Implement preview panel functionality and state management

- Introduce a new PreviewPanel component for displaying local previews within the chat interface.
- Integrate preview state management using Zustand for handling thread-specific preview states.
- Enhance ChatView and ChatHeader components to support toggling the preview panel.
- Add tests for preview state validation and bounds sanitization.
- Refactor existing components to accommodate the new preview functionality while maintaining existing features.

Made-with: Cursor

Author: BunsDev

apps/desktop/src/main.ts

@@ -762,7 +762,9 @@ function getPreviewController(window: BrowserWindow): DesktopPreviewController {
 }
 
 function resolvePreviewWindow(sender: Electron.WebContents): BrowserWindow | null {
-  return BrowserWindow.fromWebContents(sender) ?? mainWindow ?? BrowserWindow.getFocusedWindow() ?? null;
+  return (
+    BrowserWindow.fromWebContents(sender) ?? mainWindow ?? BrowserWindow.getFocusedWindow() ?? null
+  );
 }
 
 function setUpdateState(patch: Partial<DesktopUpdateState>): void {

apps/desktop/src/previewController.ts

@@ -1,9 +1,4 @@
-import {
-  type BrowserWindow,
-  type HandlerDetails,
-  shell,
-  WebContentsView,
-} from "electron";
+import { type BrowserWindow, type HandlerDetails, shell, WebContentsView } from "electron";
 import type {
   DesktopPreviewBounds,
   DesktopPreviewState,
@@ -66,7 +61,8 @@ export class DesktopPreviewController {
       return { accepted: false, state: this.state };
     }
 
-    const nextTitle = typeof input.title === "string" && input.title.trim().length > 0 ? input.title : null;
+    const nextTitle =
+      typeof input.title === "string" && input.title.trim().length > 0 ? input.title : null;
     const view = this.ensureView();
     this.setState({
       status: "loading",
@@ -90,10 +86,14 @@ export class DesktopPreviewController {
         return;
       }
       this.setState(
-        createPreviewErrorState("load-failed", error instanceof Error ? error.message : String(error), {
-          url: validatedUrl.url,
-          title: this.state.title,
-        }),
+        createPreviewErrorState(
+          "load-failed",
+          error instanceof Error ? error.message : String(error),
+          {
+            url: validatedUrl.url,
+            title: this.state.title,
+          },
+        ),
       );
     });
 

apps/web/src/components/ChatView.tsx

@@ -182,6 +182,7 @@ import {
   SendPhase,
 } from "./ChatView.logic";
 import { useLocalStorage } from "~/hooks/useLocalStorage";
+import { usePreviewStateStore } from "~/previewStateStore";
 
 const ATTACHMENT_PREVIEW_HANDOFF_TTL_MS = 5000;
 const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
@@ -253,6 +254,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const setStickyComposerModel = useComposerDraftStore((store) => store.setStickyModel);
   const timestampFormat = settings.timestampFormat;
   const navigate = useNavigate();
+  const previewOpen = usePreviewStateStore((state) => state.openByThreadId[threadId] === true);
+  const togglePreviewOpen = usePreviewStateStore((state) => state.toggleThreadOpen);
   const rawSearch = useSearch({
     strict: false,
     select: (params) => parseDiffRouteSearch(params),
@@ -3501,6 +3504,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
           terminalOpen={terminalState.terminalOpen}
           terminalToggleShortcutLabel={terminalToggleShortcutLabel}
           diffToggleShortcutLabel={diffPanelShortcutLabel}
+          previewAvailable={isElectron && activeProject !== undefined}
+          previewOpen={previewOpen}
           gitCwd={gitCwd}
           diffOpen={diffOpen}
           onRunProjectScript={(script) => {
@@ -3511,6 +3516,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
           onDeleteProjectScript={deleteProjectScript}
           onToggleTerminal={toggleTerminalVisibility}
           onToggleDiff={onToggleDiff}
+          onTogglePreview={() => togglePreviewOpen(activeThread.id)}
         />
       </header>
 

apps/web/src/components/PreviewPanel.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+
+import { resolvePreviewStatusCopy } from "./PreviewPanel";
+
+describe("resolvePreviewStatusCopy", () => {
+  it("returns actionable copy for closed, loading, and ready states", () => {
+    expect(
+      resolvePreviewStatusCopy({
+        status: "closed",
+        url: null,
+        title: null,
+        visible: false,
+        error: null,
+      }),
+    ).toContain("localhost URL");
+
+    expect(
+      resolvePreviewStatusCopy({
+        status: "loading",
+        url: "http://localhost:3000/",
+        title: null,
+        visible: true,
+        error: null,
+      }),
+    ).toContain("Loading");
+
+    expect(
+      resolvePreviewStatusCopy({
+        status: "ready",
+        url: "http://localhost:3000/",
+        title: "App",
+        visible: true,
+        error: null,
+      }),
+    ).toContain("http://localhost:3000/");
+  });
+
+  it("prefers explicit preview errors", () => {
+    expect(
+      resolvePreviewStatusCopy({
+        status: "error",
+        url: "http://localhost:3000/",
+        title: null,
+        visible: false,
+        error: {
+          code: "load-failed",
+          message: "Dev server did not respond.",
+        },
+      }),
+    ).toBe("Dev server did not respond.");
+  });
+});