fix(web): surface the blocked-origin guard instead of an empty project list

When the daemon binds 127.0.0.1 (Linux Docker host networking) and the
browser loads the app from `localhost`, the powered-preview origin guard
rejects /api/projects with a 403. Startup called the fail-soft
`listProjects()`, reconciled [], and the Projects tab reported "No projects
yet." — a permanent misconfiguration rendered as an empty workspace, which
sends the user looking for lost work rather than at the address bar.

Startup now asks for the strict variant and reproduces the fail-soft
behaviour itself, so transport and bring-up failures keep leaving the UI
rendered. The single exception is keyed to the structured origin-guard
error body rather than the 403 status, because `Server initializing` is
also a 403 and does heal on its own.

Part of #6263 — the Linux Docker quickstart wording (127.0.0.1 vs
localhost) is the remaining half and stays open.

Author: maxmilian

apps/web/src/App.tsx

@@ -172,6 +172,7 @@ import {
   importFolderProject,
   invalidatePluginCatalogCache,
   invalidateWorkspaceProjectLists,
+  isBlockedOriginError,
   listWorkspaceProjectSummaries,
   listProjects,
   listTemplates,
@@ -1192,6 +1193,11 @@ function AppInner() {
   }, []);
   const [dsLoading, setDsLoading] = useState(true);
   const [projectsLoading, setProjectsLoading] = useState(true);
+  // Set only when the daemon's powered-preview origin guard rejected the
+  // project list. Holds the loopback address the user should switch to, so
+  // the projects tab can say why it is empty instead of claiming there are
+  // no projects.
+  const [blockedOriginUrl, setBlockedOriginUrl] = useState<string | null>(null);
   const [promptTemplatesLoading, setPromptTemplatesLoading] = useState(true);
   // Goes true once the daemon-persisted config (agentId/designSystemId/etc.)
   // has merged into local state. Auto-selection effects below wait on this
@@ -2009,13 +2015,28 @@ function AppInner() {
       }
 
       const request = beginProjectListRequest(workspaceProjectViewRef.current);
+      // Startup asks for the strict variant only to inspect the failure, then
+      // reproduces the fail-soft behaviour itself: a daemon that is still
+      // coming up or briefly unreachable must keep leaving the UI rendered.
+      // The one exception is the powered-preview origin guard, which will
+      // keep rejecting until the user changes the address — reconciling []
+      // there would render a persistent misconfiguration as an empty
+      // workspace.
       void listCurrentWorkspaceProjects({
         workspaceView: workspaceProjectViewRef.current,
-      }).then((list) => {
-        if (cancelled) return;
-        reconcileFetchedProjects(list, request);
-        setProjectsLoading(false);
-      });
+        throwOnError: true,
+      })
+        .then((list) => {
+          if (cancelled) return;
+          reconcileFetchedProjects(list, request);
+          setProjectsLoading(false);
+        })
+        .catch((err: unknown) => {
+          if (cancelled) return;
+          if (isBlockedOriginError(err)) setBlockedOriginUrl(loopbackWorkaroundUrl());
+          else reconcileFetchedProjects([], request);
+          setProjectsLoading(false);
+        });
 
       void listTemplates().then((list) => {
         if (cancelled) return;
@@ -4980,6 +5001,7 @@ function AppInner() {
           workspaceDesignSystems.identity !== currentWorkspaceCatalogIdentity || dsLoading
         }
         projectsLoading={projectsLoading}
+        blockedOriginUrl={blockedOriginUrl}
         promptTemplatesLoading={promptTemplatesLoading}
         onCreateProject={handleCreateProject}
         onCreatePluginShareProject={handleCreatePluginShareProject}
@@ -5169,6 +5191,13 @@ function AppInner() {
   );
 }
 
+// The address that reaches the daemon directly. Keeps the current port so
+// the guidance stays correct for non-default `--port` runs.
+function loopbackWorkaroundUrl(): string {
+  const { protocol, port } = window.location;
+  return `${protocol}//127.0.0.1${port ? `:${port}` : ''}`;
+}
+
 function generateInstallationIdSafe(): string {
   if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID();

apps/web/src/components/DesignsTab.tsx

@@ -89,6 +89,10 @@ interface Props {
 	onRename?: (id: string, name: string) => void;
 	onNewProject?: () => void;
 	onRefresh?: () => Promise<void> | void;
+	/** Loopback address to recommend when the daemon's origin guard blocked the
+	 *  project list. Non-null means the list is empty because of the address,
+	 *  not because there are no projects. */
+	blockedOriginUrl?: string | null;
 	isActive?: boolean;
 }
 
@@ -103,6 +107,7 @@ export function DesignsTab({
 	onRename,
 	onNewProject,
 	onRefresh,
+	blockedOriginUrl = null,
 	isActive = true,
 }: Props) {
 	const renameTitleId = useId();
@@ -681,7 +686,17 @@ export function DesignsTab({
 			</div>
 			{filtered.length === 0 ? (
 				<div className="tab-empty">
-					{projects.length === 0 ? (
+					{projects.length === 0 && blockedOriginUrl ? (
+						// The list is empty because the daemon refused the request,
+						// not because the workspace is. Saying "No projects yet"
+						// here sends the user looking for lost work instead of at
+						// the address bar, so name the cause and the fix.
+						<div className="designs-empty-state" role="alert">
+							<h2 className="designs-empty-title">
+								{t("designs.blockedOrigin", { url: blockedOriginUrl })}
+							</h2>
+						</div>
+					) : projects.length === 0 ? (
 						<div className="designs-empty-state">
 							<h2 className="designs-empty-title">
 								{t("designs.emptyNoProjects")}

apps/web/src/components/EntryShell.tsx

@@ -423,6 +423,10 @@ interface Props {
   skillsLoading?: boolean;
   designSystemsLoading?: boolean;
   projectsLoading?: boolean;
+  /** Loopback address to recommend when the daemon's origin guard blocked the
+   *  project list. Non-null means the list is empty because of the address,
+   *  not because there are no projects. */
+  blockedOriginUrl?: string | null;
   // Execution / model-switching context. Threaded down from `App` so the
   // top-bar `InlineModelSwitcher` can render the active mode/agent/model
   // and persist changes through the same callbacks the project view uses.
@@ -560,6 +564,7 @@ export function EntryShell({
   skillsLoading = false,
   designSystemsLoading = false,
   projectsLoading = false,
+  blockedOriginUrl = null,
   config,
   providerModelsCache: sharedProviderModelsCache,
   onProviderModelsCacheChange,
@@ -1642,6 +1647,7 @@ export function EntryShell({
                     onDuplicate={onDuplicateProject}
                     onRename={onRenameProject}
                     onRefresh={onProjectsRefresh}
+                    blockedOriginUrl={blockedOriginUrl}
                     isActive={view === 'projects'}
                     onNewProject={() => {
                       openNewProject();

apps/web/src/components/EntryView.tsx

@@ -111,6 +111,10 @@ interface Props {
   skillsLoading?: boolean;
   designSystemsLoading?: boolean;
   projectsLoading?: boolean;
+  /** Loopback address to recommend when the daemon's origin guard blocked the
+   *  project list. Non-null means the list is empty because of the address,
+   *  not because there are no projects. */
+  blockedOriginUrl?: string | null;
   promptTemplatesLoading?: boolean;
   onCreateProject: (input: EntryCreateProjectInput) => Promise<boolean> | boolean | void;
   onCreatePluginShareProject: (
@@ -273,6 +277,7 @@ export function EntryView({
   skillsLoading = false,
   designSystemsLoading = false,
   projectsLoading = false,
+  blockedOriginUrl = null,
   promptTemplatesLoading: _promptTemplatesLoading = false,
   onCreateProject,
   onCreatePluginShareProject,
@@ -377,6 +382,7 @@ export function EntryView({
       skillsLoading={skillsLoading}
       designSystemsLoading={designSystemsLoading}
       projectsLoading={projectsLoading}
+      blockedOriginUrl={blockedOriginUrl}
       config={config}
       providerModelsCache={providerModelsCache}
       onProviderModelsCacheChange={onProviderModelsCacheChange}

apps/web/src/i18n/locales/ar.ts

@@ -1894,6 +1894,7 @@ export const ar: Dict = {
   'designs.filterAria': 'تصفية المشاريع',
   'designs.searchPlaceholder': 'بحث...',
   'designs.emptyNoProjects': 'لا توجد مشاريع بعد.',
+  'designs.blockedOrigin': 'تعذّر تحميل المشاريع: حظر الـ daemon هذا العنوان. افتح {url} بدلاً منه.',
   'designs.emptyNoMatch': 'لا توجد مشاريع تطابق بحثك.',
   'designs.deleteTitle': 'حذف المشروع',
   'designs.deleteConfirm': 'هل تريد حذف "{name}"؟',

apps/web/src/i18n/locales/de.ts

@@ -1894,6 +1894,7 @@ export const de: Dict = {
   'designs.filterAria': 'Projekte filtern',
   'designs.searchPlaceholder': 'Suchen…',
   'designs.emptyNoProjects': 'Noch keine Projekte.',
+  'designs.blockedOrigin': 'Projekte konnten nicht geladen werden: Der Daemon hat diese Adresse blockiert. Öffne stattdessen {url}.',
   'designs.emptyNoMatch': 'Keine Projekte passen zu Ihrer Suche.',
   'designs.deleteTitle': 'Projekt löschen',
   'designs.deleteConfirm': '„{name}“ löschen?',

apps/web/src/i18n/locales/en.ts

@@ -1894,6 +1894,7 @@ export const en: Dict = {
   'designs.filterAria': 'Filter projects',
   'designs.searchPlaceholder': 'Search…',
   'designs.emptyNoProjects': 'No projects yet.',
+  'designs.blockedOrigin': 'Projects could not load: the daemon blocked this address. Open {url} instead.',
   'designs.emptyNoMatch': 'No projects match your search.',
   'designs.deleteTitle': 'Delete project',
   'designs.deleteConfirm': 'Delete "{name}"?',

apps/web/src/i18n/locales/es-ES.ts

@@ -1894,6 +1894,7 @@ export const esES: Dict = {
   'designs.filterAria': 'Filtrar proyectos',
   'designs.searchPlaceholder': 'Buscar…',
   'designs.emptyNoProjects': 'Aún no hay proyectos.',
+  'designs.blockedOrigin': 'No se pudieron cargar los proyectos: el daemon bloqueó esta dirección. Abre {url} en su lugar.',
   'designs.emptyNoMatch': 'Ningún proyecto coincide con tu búsqueda.',
   'designs.deleteTitle': 'Eliminar proyecto',
   'designs.deleteConfirm': '¿Eliminar «{name}»?',

apps/web/src/i18n/locales/fa.ts

@@ -1894,6 +1894,7 @@ export const fa: Dict = {
   'designs.filterAria': 'فیلتر پروژه‌ها',
   'designs.searchPlaceholder': 'جستجو…',
   'designs.emptyNoProjects': 'هنوز هیچ پروژه‌ای وجود ندارد.',
+  'designs.blockedOrigin': 'پروژه‌ها بارگذاری نشدند: دیمن این نشانی را مسدود کرد. به‌جای آن {url} را باز کنید.',
   'designs.emptyNoMatch': 'هیچ پروژه‌ای با جستجوی شما مطابقت ندارد.',
   'designs.deleteTitle': 'حذف پروژه',
   'designs.deleteConfirm': 'آیا «{name}» حذف شود؟',

apps/web/src/i18n/locales/fr.ts

@@ -1894,6 +1894,7 @@ export const fr: Dict = {
   'designs.filterAria': 'Filtrer les projets',
   'designs.searchPlaceholder': 'Rechercher…',
   'designs.emptyNoProjects': 'Aucun projet pour l\'instant.',
+  'designs.blockedOrigin': 'Impossible de charger les projets : le daemon a bloqué cette adresse. Ouvrez plutôt {url}.',
   'designs.emptyNoMatch': 'Aucun projet ne correspond à votre recherche.',
   'designs.deleteTitle': 'Supprimer le projet',
   'designs.deleteConfirm': 'Supprimer « {name} » ?',