fix(preview): failed tabs no longer sit as a blank floating panel

apps/desktop/src/preview/Manager.test.ts

@@ -484,6 +484,7 @@ describe("PreviewManager", () => {
           url: null,
           title: null,
           loading: false,
+          attached: false,
         });
 
         yield* manager.createTab("tab_1");
@@ -495,12 +496,106 @@ describe("PreviewManager", () => {
           url: null,
           title: null,
           loading: false,
+          attached: false,
         });
         expect(fromId).not.toHaveBeenCalled();
       }),
     ),
   );
 
+  effectIt.effect("reports a failed navigation as unavailable automation", () =>
+    withManager((manager) =>
+      Effect.gen(function* () {
+        const listeners = new Map<string, (...args: unknown[]) => void>();
+        let url = "http://localhost:5173/";
+        let loading = false;
+        fromId.mockReturnValue({
+          id: 42,
+          isDestroyed: () => false,
+          getType: () => "webview",
+          getURL: () => url,
+          getTitle: () => "localhost:5173",
+          isLoading: () => loading,
+          getZoomFactor: () => 1,
+          setZoomFactor: vi.fn(),
+          setAudioMuted: vi.fn(),
+          isCurrentlyAudible: () => false,
+          loadURL: vi.fn(async () => undefined),
+          on: vi.fn((event: string, listener: (...args: unknown[]) => void) => {
+            listeners.set(event, listener);
+          }),
+          off: vi.fn(),
+          ipc: { on: vi.fn(), off: vi.fn() },
+          send: webviewSend,
+          navigationHistory: { canGoBack: () => false, canGoForward: () => false },
+          setWindowOpenHandler: vi.fn(),
+          debugger: {
+            isAttached: () => false,
+            attach: vi.fn(),
+            sendCommand: vi.fn(async () => undefined),
+            on: vi.fn(),
+            off: vi.fn(),
+          },
+        } as never);
+
+        yield* manager.createTab("tab_failed");
+        yield* manager.registerWebview("tab_failed", 42);
+        listeners.get("did-fail-load")?.(
+          {},
+          -102,
+          "ERR_CONNECTION_REFUSED",
+          "http://localhost:5173/",
+          true,
+        );
+        yield* Effect.yieldNow;
+
+        expect(yield* manager.automationStatus("tab_failed")).toEqual({
+          available: false,
+          visible: true,
+          tabId: "tab_failed",
+          url: "http://localhost:5173/",
+          title: "ERR_CONNECTION_REFUSED",
+          loading: false,
+          attached: true,
+        });
+
+        url = "chrome-error://chromewebdata/";
+        loading = true;
+        expect(yield* manager.automationStatus("tab_failed")).toEqual({
+          available: false,
+          visible: true,
+          tabId: "tab_failed",
+          url: "http://localhost:5173/",
+          title: "ERR_CONNECTION_REFUSED",
+          loading: true,
+          attached: true,
+        });
+      }),
+    ),
+  );
+
+  effectIt.effect("reports a destroyed guest as detached even when webContentsId remains", () =>
+    withManager((manager) =>
+      Effect.gen(function* () {
+        const preview = makeFaviconWebContents();
+        fromId.mockReturnValue(preview.webContents);
+        yield* manager.createTab("tab_destroyed_status");
+        yield* manager.registerWebview("tab_destroyed_status", 42);
+        preview.setDestroyed(true);
+
+        expect(yield* manager.automationStatus("tab_destroyed_status")).toEqual({
+          available: false,
+          visible: true,
+          tabId: "tab_destroyed_status",
+          url: "http://localhost:3200/",
+          title: null,
+          loading: false,
+          attached: false,
+        });
+      }),
+    ),
+  );
+
   effectIt.effect("rejects a destroyed webview during registration", () =>
     withManager((manager) =>
       Effect.gen(function* () {
@@ -636,6 +731,7 @@ describe("PreviewManager", () => {
           url: "http://localhost:3200/",
           title: "",
           loading: true,
+          attached: false,
         });
 
         yield* manager.registerWebview("tab_pending", 42);

apps/desktop/src/preview/Manager.ts

@@ -3462,28 +3462,51 @@ const makeNativeOperations = Effect.fn("PreviewManager.makeOperations")(function
         visible: true,
         tabId,
         url: !navStatus || navStatus.kind === "Idle" ? null : navStatus.url,
-        title: !navStatus || navStatus.kind === "Idle" ? null : navStatus.title,
+        title:
+          navStatus?.kind === "LoadFailed"
+            ? navStatus.description || navStatus.title
+            : !navStatus || navStatus.kind === "Idle"
+              ? null
+              : navStatus.title,
         loading: navStatus?.kind === "Loading",
+        attached: false,
       };
     }
     const wc = webContents.fromId(tab.webContentsId);
-    return !wc || wc.isDestroyed()
-      ? {
-          available: false,
-          visible: true,
-          tabId,
-          url: null,
-          title: null,
-          loading: false,
-        }
-      : {
-          available: true,
-          visible: true,
-          tabId,
-          url: wc.getURL() || null,
-          title: wc.getTitle() || null,
-          loading: wc.isLoading(),
-        };
+    if (!wc || wc.isDestroyed()) {
+      return {
+        available: false,
+        visible: true,
+        tabId,
+        url: tab.navStatus.kind === "Idle" ? null : tab.navStatus.url,
+        title:
+          tab.navStatus.kind === "LoadFailed"
+            ? tab.navStatus.description || tab.navStatus.title
+            : null,
+        loading: false,
+        attached: false,
+      };
+    }
+    if (tab.navStatus.kind === "LoadFailed") {
+      return {
+        available: false,
+        visible: true,
+        tabId,
+        url: tab.navStatus.url,
+        title: tab.navStatus.description || wc.getTitle() || tab.navStatus.title,
+        loading: wc.isLoading(),
+        attached: true,
+      };
+    }
+    return {
+      available: true,
+      visible: true,
+      tabId,
+      url: wc.getURL() || null,
+      title: wc.getTitle() || null,
+      loading: wc.isLoading(),
+      attached: true,
+    };
   });
 
   const captureAutomationSnapshot = Effect.fn("PreviewManager.captureAutomationSnapshot")(

apps/web/src/components/preview/PreviewAutomationHosts.tsx

@@ -71,6 +71,7 @@ import {
 } from "./previewNavigationReadiness";
 import { createPreviewAutomationRequestConsumerAtom } from "./previewAutomationRequestConsumer";
 import { createPreviewAutomationClientId } from "./previewAutomationClientId";
+import { applyPreviewLoadFailureToAutomationStatus } from "./previewAutomationStatus";
 import {
   needsPreviewAutomationSessionSync,
   resolvePreviewAutomationOpenTab,
@@ -103,9 +104,23 @@ const waitForDesktopOverlay = async (
       operation,
       requestId,
     });
-    if (state.desktopByTabId[tabId] && previewBridge && isPreviewWebviewRendering(runtimeTabId)) {
-      const status = await previewBridge.automation.status(runtimeTabId);
-      if (status.available) return;
+    // Attachment only. LoadFailed still has a live guest and must stay
+    // reachable so navigate/retry can recover. Page health is reported by
+    // preview_status, not this wait. Re-read the main-process attachment bit
+    // because a stale overlay snapshot can retain hasWebContents after destroy.
+    if (state.desktopByTabId[tabId]?.hasWebContents && previewBridge) {
+      const status = await previewBridge.automation.status(runtimeTabId).catch(() => null);
+      if (status?.attached === false) {
+        throw new PreviewAutomationTargetUnavailableError({
+          requestId,
+          operation,
+          environmentId: threadRef.environmentId,
+          threadId: threadRef.threadId,
+          tabId,
+          bridgeAvailable: true,
+        });
+      }
+      if (status) return;
     }
     await new Promise<void>((resolve) => window.setTimeout(resolve, 50));
   }
@@ -234,18 +249,33 @@ const currentStatus = async (
   };
   if (runtimeTabId && tabId && previewBridge && state.desktopByTabId[tabId]) {
     const status = await previewBridge.automation.status(runtimeTabId);
-    return { ...status, tabId, visible, ...viewportStatus };
+    return applyPreviewLoadFailureToAutomationStatus(
+      {
+        available: status.available,
+        visible,
+        tabId,
+        url: status.url,
+        title: status.title,
+        loading: status.loading,
+        ...viewportStatus,
+      },
+      snapshot?.navStatus,
+      { preferLiveStatus: true },
+    );
   }
   const navStatus = snapshot?.navStatus;
-  return {
-    available: Boolean(previewBridge?.automation),
-    visible,
-    tabId,
-    url: navStatus && navStatus._tag !== "Idle" ? navStatus.url : null,
-    title: navStatus && navStatus._tag !== "Idle" ? navStatus.title : null,
-    loading: navStatus?._tag === "Loading",
-    ...viewportStatus,
-  };
+  return applyPreviewLoadFailureToAutomationStatus(
+    {
+      available: Boolean(previewBridge?.automation),
+      visible,
+      tabId,
+      url: navStatus && navStatus._tag !== "Idle" ? navStatus.url : null,
+      title: navStatus && navStatus._tag !== "Idle" ? navStatus.title : null,
+      loading: navStatus?._tag === "Loading",
+      ...viewportStatus,
+    },
+    navStatus,
+  );
 };
 
 const raiseAtomCommandFailure = (result: Parameters<typeof squashAtomCommandFailure>[0]): never => {

apps/web/src/components/preview/PreviewMiniPlayerUnreachable.test.tsx

@@ -0,0 +1,35 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { PreviewMiniPlayerUnreachable } from "./PreviewMiniPlayerUnreachable";
+
+describe("PreviewMiniPlayerUnreachable", () => {
+  it("shows the failed host with Retry and Close", () => {
+    const html = renderToStaticMarkup(
+      <PreviewMiniPlayerUnreachable
+        url="http://localhost:5173/app"
+        description="ERR_CONNECTION_REFUSED"
+        onRetry={() => undefined}
+        onClose={() => undefined}
+      />,
+    );
+    expect(html).toContain("localhost:5173");
+    expect(html).toContain("Retry");
+    expect(html).toContain("Close");
+    expect(html).toContain("Connection refused");
+    expect(html).toContain("pointer-events-auto");
+    expect(html).toContain("truncate");
+  });
+
+  it("falls back to the raw URL when there is no host", () => {
+    const html = renderToStaticMarkup(
+      <PreviewMiniPlayerUnreachable
+        url="file:///missing.html"
+        description="ERR_FILE_NOT_FOUND"
+        onRetry={() => undefined}
+        onClose={() => undefined}
+      />,
+    );
+    expect(html).toContain("file:///missing.html");
+  });
+});

apps/web/src/components/preview/PreviewMiniPlayerUnreachable.tsx

@@ -0,0 +1,43 @@
+import { Button } from "~/components/ui/button";
+
+import { describePreviewError } from "./errorCodeMessages";
+
+interface Props {
+  readonly url: string;
+  readonly description: string;
+  readonly onRetry: () => void;
+  readonly onClose: () => void;
+}
+
+/** Compact failed-navigation overlay for the floating mini-player. */
+export function PreviewMiniPlayerUnreachable({ url, description, onRetry, onClose }: Props) {
+  const host = safeHost(url) ?? url;
+  const friendly = describePreviewError(description);
+
+  return (
+    <div className="pointer-events-auto absolute inset-0 z-[49] flex min-w-0 flex-col items-center justify-center gap-3 overflow-hidden rounded-xl bg-background px-4 text-center">
+      <p className="min-w-0 max-w-full truncate text-xs font-medium text-foreground">
+        Can&apos;t reach {host}
+      </p>
+      <p className="min-w-0 max-w-full text-[11px] leading-snug text-muted-foreground">
+        {friendly}
+      </p>
+      <div className="flex items-center gap-2">
+        <Button type="button" size="sm" onClick={onRetry}>
+          Retry
+        </Button>
+        <Button type="button" size="sm" variant="outline" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function safeHost(url: string): string | null {
+  try {
+    return new URL(url).host || null;
+  } catch {
+    return null;
+  }
+}