From 7de07263fc6d55b0626479749acfdc75fc1d3706 Mon Sep 17 00:00:00 2001
From: Aleel101 <AleelsJourney@gmail.com>
Date: Sun, 26 Apr 2026 07:24:29 -0400
Subject: [PATCH 1/7] fix: update package dependencies and enhance window
 management

- Downgraded `@tailwindcss/postcss` and `tailwindcss` to version 4.0.0.
- Downgraded `electron` from 39.8.9 to 39.8.8.
- Added IPC handlers for window management (minimize, maximize, close).
- Updated window creation to remove the native title bar and manage menu visibility based on platform.
- Enhanced state management in onboarding and design generation processes.
- Introduced support for fast model configuration in onboarding IPC.
- Improved design generation state handling to support multiple active generations.
- Refactored various components to utilize the new state management logic.
---
 apps/desktop/package.json                     |   6 +-
 apps/desktop/src/main/index.ts                |  32 +-
 apps/desktop/src/main/onboarding-ipc.ts       |  20 +
 apps/desktop/src/preload/index.ts             |   5 +
 apps/desktop/src/renderer/src/App.tsx         |   2 +-
 .../renderer/src/components/ConsolePanel.tsx  | 135 +++++
 .../renderer/src/components/FilesPanel.tsx    |   5 +-
 .../renderer/src/components/FilesTabView.tsx  |   8 +-
 .../renderer/src/components/HistoryPanel.tsx  | 160 ++++++
 .../src/components/InlineCommentComposer.tsx  |   2 +-
 .../src/components/ModelSwitcher.test.ts      |  18 +-
 .../renderer/src/components/ModelSwitcher.tsx | 523 +++++++++++++-----
 .../renderer/src/components/PageTabBar.tsx    |  43 ++
 .../renderer/src/components/PreviewPane.tsx   | 176 +++++-
 .../src/components/PreviewToolbar.tsx         |  43 +-
 .../src/renderer/src/components/Settings.tsx  | 305 ++++++++++
 .../src/renderer/src/components/Sidebar.tsx   |  32 +-
 .../src/renderer/src/components/TopBar.tsx    | 227 ++++----
 .../src/components/WindowControls.tsx         |  89 +++
 .../src/components/chat/AssistantText.tsx     |  32 +-
 .../src/components/chat/ChatMessageList.tsx   | 290 +++++++---
 .../src/components/chat/CommentChipBar.tsx    |   2 +-
 .../components/chat/GenerationStatusBar.tsx   |  89 +++
 .../src/components/chat/PromptInput.tsx       |  63 ---
 .../src/components/chat/StickyTodoHeader.tsx  |  86 +++
 .../src/components/chat/UserMessage.tsx       |  20 +-
 .../src/components/chat/WorkingCard.tsx       | 119 +++-
 .../src/renderer/src/hooks/useAgentStream.ts  | 148 +++--
 apps/desktop/src/renderer/src/store.ts        | 208 +++++--
 .../src/renderer/src/views/hub/DesignGrid.tsx |   8 +
 .../src/renderer/src/views/hub/RecentTab.tsx  |   2 +-
 packages/core/package.json                    |   4 +-
 packages/core/src/agent.ts                    |  35 +-
 packages/i18n/src/locales/en.json             |  15 +
 packages/providers/package.json               |   2 +-
 packages/runtime/src/iframe-errors.ts         |  20 +
 packages/runtime/src/index.ts                 |  33 +-
 packages/runtime/src/overlay.ts               |  32 ++
 packages/shared/src/config.ts                 |   5 +
 packages/ui/package.json                      |   4 +-
 packages/ui/src/tokens.css                    |   2 +-
 website/package.json                          |   4 +-
 42 files changed, 2452 insertions(+), 602 deletions(-)
 create mode 100644 apps/desktop/src/renderer/src/components/ConsolePanel.tsx
 create mode 100644 apps/desktop/src/renderer/src/components/HistoryPanel.tsx
 create mode 100644 apps/desktop/src/renderer/src/components/PageTabBar.tsx
 create mode 100644 apps/desktop/src/renderer/src/components/WindowControls.tsx
 create mode 100644 apps/desktop/src/renderer/src/components/chat/GenerationStatusBar.tsx
 create mode 100644 apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index ff8b37cc..3f2ce1ba 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -38,20 +38,20 @@
     "zustand": "^5.0.2"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.2.4",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
-    "electron": "^39.8.9",
+    "electron": "^39.8.8",
     "electron-builder": "^26.8.1",
     "electron-builder-squirrel-windows": "26.8.1",
     "electron-vite": "^2.3.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "tailwindcss": "^4.2.4",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
     "vite": "^6.0.5",
     "vitest": "^2.1.8"
diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index d06d8e43..51888985 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -129,14 +129,27 @@ const USE_AGENT_RUNTIME = (() => {
 
 const IS_VITEST = process.env['VITEST'] === 'true';
 
+/** No OS title bar; renderer draws TopBar with -webkit-app-region. Register once (not in createWindow — macOS can call createWindow again on activate). */
+function registerWindowChromeIpc(): void {
+  ipcMain.on('window:minimize', () => mainWindow?.minimize());
+  ipcMain.on('window:maximize', () => {
+    if (!mainWindow) return;
+    if (mainWindow.isMaximized()) mainWindow.unmaximize();
+    else mainWindow.maximize();
+  });
+  ipcMain.on('window:close', () => mainWindow?.close());
+}
+
 function createWindow(): void {
+  // frame: false removes the native title bar and window controls; we provide
+  // a custom top bar in the renderer (see TopBar, WindowControls).
   mainWindow = new BrowserWindow({
     width: 1280,
     height: 820,
     minWidth: 960,
     minHeight: 640,
-    autoHideMenuBar: process.platform !== 'darwin',
-    titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default',
+    frame: false,
+    autoHideMenuBar: true,
     backgroundColor: BRAND.backgroundColor,
     icon: join(__dirname, '../../resources/icon.png'),
     show: false,
@@ -148,7 +161,12 @@ function createWindow(): void {
     },
   });
 
-  mainWindow.on('ready-to-show', () => mainWindow?.show());
+  mainWindow.on('ready-to-show', () => {
+    if (process.platform === 'win32' || process.platform === 'linux') {
+      mainWindow?.setMenuBarVisibility(false);
+    }
+    mainWindow?.show();
+  });
   // Null the reference on close so stale IPC sends from async emitters
   // (autoUpdater, long-running generate runs) become clean no-ops rather
   // than throwing "Object has been destroyed" on a discarded webContents.
@@ -1084,7 +1102,12 @@ function registerIpcHandlers(db: Database | null): void {
       // Inline-comment edits don't need to be tied to whatever provider was
       // pinned in the original generate; resolve fresh against the canonical
       // active provider so a switch in Settings takes effect immediately.
-      const hint = payload.model ?? { provider: cfg.provider, modelId: cfg.modelPrimary };
+      // Prefer modelFast when configured — it's cheaper for quick edits.
+      const fastModelId = cfg.modelFast ?? null;
+      const hint = payload.model ?? {
+        provider: cfg.provider,
+        modelId: fastModelId ?? cfg.modelPrimary,
+      };
       const active = resolveActiveModel(cfg, hint);
       const allowKeyless = active.allowKeyless;
       const apiKey = await resolveApiKeyForActive(active.model.provider, allowKeyless);
@@ -1359,6 +1382,7 @@ if (!IS_VITEST) {
       registerDiagnosticsIpc(diagnosticsDb);
       setupAutoUpdater();
       registerAppMenu();
+      registerWindowChromeIpc();
       createWindow();
       void scheduleStartupUpdateCheck();
 
diff --git a/apps/desktop/src/main/onboarding-ipc.ts b/apps/desktop/src/main/onboarding-ipc.ts
index c1803768..22a7c03b 100644
--- a/apps/desktop/src/main/onboarding-ipc.ts
+++ b/apps/desktop/src/main/onboarding-ipc.ts
@@ -180,6 +180,7 @@ function toState(cfg: Config | null): OnboardingState {
       hasKey: false,
       provider: null,
       modelPrimary: null,
+      modelFast: null,
       baseUrl: null,
       designSystem: null,
     };
@@ -191,6 +192,7 @@ function toState(cfg: Config | null): OnboardingState {
       hasKey: false,
       provider: active,
       modelPrimary: null,
+      modelFast: null,
       baseUrl: null,
       designSystem: cfg.designSystem ?? null,
     };
@@ -199,6 +201,7 @@ function toState(cfg: Config | null): OnboardingState {
     hasKey: true,
     provider: active,
     modelPrimary: cfg.activeModel,
+    modelFast: cfg.modelFast ?? null,
     baseUrl: cfg.providers[active]?.baseUrl ?? null,
     designSystem: cfg.designSystem ?? null,
   };
@@ -1153,6 +1156,23 @@ export function registerOnboardingIpc(): void {
     },
   );
 
+  ipcMain.handle(
+    'config:v1:set-fast-model',
+    async (_e, raw: unknown): Promise<OnboardingState> => {
+      const input = raw as { modelFast: string | null };
+      if (typeof input !== 'object' || input === null || !('modelFast' in input)) {
+        throw new CodesignError(
+          'config:v1:set-fast-model expects { modelFast: string | null }',
+          ERROR_CODES.IPC_BAD_INPUT,
+        );
+      }
+      const modelFast = input.modelFast === '' ? null : input.modelFast;
+      cachedConfig = hydrateConfig({ ...cachedConfig, modelFast: modelFast ?? undefined });
+      await writeConfig(cachedConfig);
+      return toState(cachedConfig);
+    },
+  );
+
   ipcMain.handle(
     'config:v1:detect-external-configs',
     async (): Promise<ExternalConfigsDetection> => {
diff --git a/apps/desktop/src/preload/index.ts b/apps/desktop/src/preload/index.ts
index 9cc4fe11..96330cff 100644
--- a/apps/desktop/src/preload/index.ts
+++ b/apps/desktop/src/preload/index.ts
@@ -314,6 +314,8 @@ const api = {
         'config:v1:set-active-provider-and-model',
         input,
       ) as Promise<OnboardingState>,
+    setFastModel: (modelFast: string | null) =>
+      ipcRenderer.invoke('config:v1:set-fast-model', { modelFast }) as Promise<OnboardingState>,
     testEndpoint: (input: {
       wire: WireApi;
       baseUrl: string;
@@ -572,6 +574,9 @@ const api = {
   },
   openExternal: (url: string) =>
     ipcRenderer.invoke('codesign:v1:open-external', url) as Promise<void>,
+  minimize: () => ipcRenderer.send('window:minimize'),
+  maximize: () => ipcRenderer.send('window:maximize'),
+  close: () => ipcRenderer.send('window:close'),
 };
 
 contextBridge.exposeInMainWorld('codesign', api);
diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx
index 3d2e9283..0829812e 100644
--- a/apps/desktop/src/renderer/src/App.tsx
+++ b/apps/desktop/src/renderer/src/App.tsx
@@ -29,7 +29,7 @@ export function App() {
   const switchDesign = useCodesignStore((s) => s.switchDesign);
   const sendPrompt = useCodesignStore((s) => s.sendPrompt);
   const isGenerating = useCodesignStore(
-    (s) => s.isGenerating && s.generatingDesignId === s.currentDesignId,
+    (s) => s.currentDesignId !== null && s.activeGenerations.has(s.currentDesignId),
   );
   const setView = useCodesignStore((s) => s.setView);
   const view = useCodesignStore((s) => s.view);
diff --git a/apps/desktop/src/renderer/src/components/ConsolePanel.tsx b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
new file mode 100644
index 00000000..2b8aa779
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
@@ -0,0 +1,135 @@
+import type { ConsoleLevel } from '@open-codesign/runtime';
+import { ChevronDown, ChevronUp, Terminal, Trash2 } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import type { IframeConsoleLogEntry } from '../store';
+import { useCodesignStore } from '../store';
+
+const LEVEL_STYLE: Record<ConsoleLevel, string> = {
+  log: 'text-[var(--color-text-primary)]',
+  info: 'text-[#3b82f6]',
+  warn: 'text-[#f59e0b]',
+  error: 'text-[var(--color-error)]',
+  debug: 'text-[var(--color-text-muted)]',
+};
+
+const LEVEL_BG: Record<ConsoleLevel, string> = {
+  log: '',
+  info: '',
+  warn: 'bg-[color-mix(in_srgb,#f59e0b_6%,transparent)]',
+  error: 'bg-[color-mix(in_srgb,var(--color-error)_6%,transparent)]',
+  debug: '',
+};
+
+function ConsoleRow({ entry }: { entry: IframeConsoleLogEntry }) {
+  const time = new Date(entry.timestamp).toTimeString().slice(0, 8);
+  const text = entry.args.join(' ');
+  return (
+    <div
+      className={`flex items-start gap-[var(--space-2)] px-[var(--space-3)] py-[2px] font-[ui-monospace,Menlo,monospace] text-[11.5px] leading-[1.5] border-b border-[var(--color-border-muted)]/40 last:border-0 ${LEVEL_BG[entry.level]}`}
+    >
+      <span className="shrink-0 text-[var(--color-text-muted)] tabular-nums select-none">{time}</span>
+      <span className={`shrink-0 w-[36px] uppercase text-[10px] font-bold tracking-wide ${LEVEL_STYLE[entry.level]}`}>
+        {entry.level}
+      </span>
+      <span className={`flex-1 break-all whitespace-pre-wrap ${LEVEL_STYLE[entry.level]}`}>{text}</span>
+    </div>
+  );
+}
+
+export function ConsolePanel() {
+  const logs = useCodesignStore((s) => s.consoleLogs);
+  const clearConsoleLogs = useCodesignStore((s) => s.clearConsoleLogs);
+  const [open, setOpen] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const stickyRef = useRef(true);
+
+  const errorCount = logs.filter((l) => l.level === 'error').length;
+  const warnCount = logs.filter((l) => l.level === 'warn').length;
+
+  useEffect(() => {
+    if (!open || !stickyRef.current) return;
+    bottomRef.current?.scrollIntoView({ block: 'end' });
+  }, [logs.length, open]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    function onScroll() {
+      if (!el) return;
+      stickyRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 32;
+    }
+    el.addEventListener('scroll', onScroll, { passive: true });
+    return () => el.removeEventListener('scroll', onScroll);
+  }, []);
+
+  if (logs.length === 0 && !open) return null;
+
+  const badge =
+    errorCount > 0 ? (
+      <span className="rounded-[3px] bg-[var(--color-error)] text-white text-[10px] px-[5px] py-[1px] tabular-nums font-bold">
+        {errorCount}
+      </span>
+    ) : warnCount > 0 ? (
+      <span className="rounded-[3px] bg-[#f59e0b] text-white text-[10px] px-[5px] py-[1px] tabular-nums font-bold">
+        {warnCount}
+      </span>
+    ) : logs.length > 0 ? (
+      <span className="rounded-[3px] bg-[var(--color-border)] text-[var(--color-text-muted)] text-[10px] px-[5px] py-[1px] tabular-nums">
+        {logs.length}
+      </span>
+    ) : null;
+
+  return (
+    <div className="shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background-secondary)]">
+      {/* Header */}
+      <div className="flex items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-1_5)] select-none">
+        <button
+          type="button"
+          onClick={() => setOpen((v) => !v)}
+          className="flex items-center gap-[var(--space-2)] flex-1 min-w-0 text-left"
+        >
+          <Terminal className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
+          <span className="text-[11.5px] font-medium text-[var(--color-text-secondary)]">Console</span>
+          {badge}
+          <span className="ml-auto">
+            {open ? (
+              <ChevronDown className="w-[13px] h-[13px] text-[var(--color-text-muted)]" />
+            ) : (
+              <ChevronUp className="w-[13px] h-[13px] text-[var(--color-text-muted)]" />
+            )}
+          </span>
+        </button>
+        {logs.length > 0 && (
+          <button
+            type="button"
+            onClick={clearConsoleLogs}
+            aria-label="Clear console"
+            className="shrink-0 p-[3px] rounded-[var(--radius-sm)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+          >
+            <Trash2 className="w-[12px] h-[12px]" />
+          </button>
+        )}
+      </div>
+
+      {open && (
+        <div
+          ref={scrollRef}
+          className="max-h-[200px] overflow-y-auto border-t border-[var(--color-border-muted)]"
+        >
+          {logs.length === 0 ? (
+            <div className="px-[var(--space-3)] py-[var(--space-2)] text-[11.5px] text-[var(--color-text-muted)] font-[ui-monospace,Menlo,monospace]">
+              No output yet.
+            </div>
+          ) : (
+            logs.map((entry, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: console logs are append-only, index is stable within a session
+              <ConsoleRow key={i} entry={entry} />
+            ))
+          )}
+          <div ref={bottomRef} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/FilesPanel.tsx b/apps/desktop/src/renderer/src/components/FilesPanel.tsx
index 5b4627e3..4351eda9 100644
--- a/apps/desktop/src/renderer/src/components/FilesPanel.tsx
+++ b/apps/desktop/src/renderer/src/components/FilesPanel.tsx
@@ -23,8 +23,7 @@ export function FilesPanel() {
   const t = useT();
   const currentDesignId = useCodesignStore((s) => s.currentDesignId);
   const designs = useCodesignStore((s) => s.designs);
-  const isGenerating = useCodesignStore((s) => s.isGenerating);
-  const generatingDesignId = useCodesignStore((s) => s.generatingDesignId);
+  const activeGenerations = useCodesignStore((s) => s.activeGenerations);
   const openFileTab = useCodesignStore((s) => s.openCanvasFileTab);
   const requestWorkspaceRebind = useCodesignStore((s) => s.requestWorkspaceRebind);
   const { files, loading } = useDesignFiles(currentDesignId);
@@ -33,7 +32,7 @@ export function FilesPanel() {
 
   const currentDesign = designs.find((d) => d.id === currentDesignId);
   const workspacePath = currentDesign?.workspacePath ?? null;
-  const isCurrentDesignGenerating = isGenerating && generatingDesignId === currentDesignId;
+  const isCurrentDesignGenerating = currentDesignId !== null && activeGenerations.has(currentDesignId);
 
   useEffect(() => {
     if (!workspacePath || !currentDesignId) {
diff --git a/apps/desktop/src/renderer/src/components/FilesTabView.tsx b/apps/desktop/src/renderer/src/components/FilesTabView.tsx
index 9aa1a1b4..5fd21aed 100644
--- a/apps/desktop/src/renderer/src/components/FilesTabView.tsx
+++ b/apps/desktop/src/renderer/src/components/FilesTabView.tsx
@@ -17,15 +17,15 @@ function WorkspaceSection() {
   const t = useT();
   const currentDesignId = useCodesignStore((s) => s.currentDesignId);
   const designs = useCodesignStore((s) => s.designs);
-  const isGenerating = useCodesignStore((s) => s.isGenerating);
-  const generatingDesignId = useCodesignStore((s) => s.generatingDesignId);
+  const activeGenerations = useCodesignStore((s) => s.activeGenerations);
   const requestWorkspaceRebind = useCodesignStore((s) => s.requestWorkspaceRebind);
   const [picking, setPicking] = useState(false);
   const [folderExists, setFolderExists] = useState<boolean | null>(null);
 
   const currentDesign = designs.find((d) => d.id === currentDesignId);
   const workspacePath = currentDesign?.workspacePath ?? null;
-  const isCurrentDesignGenerating = isGenerating && generatingDesignId === currentDesignId;
+  const isCurrentDesignGenerating =
+    currentDesignId !== null && activeGenerations.has(currentDesignId);
   const disabled = picking || isCurrentDesignGenerating;
 
   useEffect(() => {
@@ -317,7 +317,7 @@ export function FilesTabView() {
                   pushIframeError(`SET_MODE postMessage failed: ${reason}`);
                 }
               }}
-              className="w-full h-full bg-white border-0 block"
+              className="w-full h-full bg-transparent border-0 block"
             />
           ) : (
             <div className="h-full flex items-center justify-center text-[var(--text-sm)] text-[var(--color-text-muted)]">
diff --git a/apps/desktop/src/renderer/src/components/HistoryPanel.tsx b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
new file mode 100644
index 00000000..5ec4e0b5
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
@@ -0,0 +1,160 @@
+import type { DesignSnapshot } from '@open-codesign/shared';
+import { buildSrcdoc } from '@open-codesign/runtime';
+import { Clock, RotateCcw, X } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useCodesignStore } from '../store';
+
+interface HistoryPanelProps {
+  onClose: () => void;
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function HistoryPanel({ onClose }: HistoryPanelProps) {
+  const currentDesignId = useCodesignStore((s) => s.currentDesignId);
+  const setPreviewHtml = useCodesignStore((s) => s.setPreviewHtml);
+  const pushToast = useCodesignStore((s) => s.pushToast);
+
+  const [snapshots, setSnapshots] = useState<DesignSnapshot[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<DesignSnapshot | null>(null);
+  const [restoring, setRestoring] = useState(false);
+
+  useEffect(() => {
+    if (!currentDesignId || !window.codesign) return;
+    setLoading(true);
+    window.codesign.snapshots
+      .list(currentDesignId)
+      .then((rows) => {
+        setSnapshots(rows);
+        setSelected(rows[0] ?? null);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [currentDesignId]);
+
+  const previewSrc = useMemo(
+    () => (selected ? buildSrcdoc(selected.artifactSource) : null),
+    [selected],
+  );
+
+  async function handleRestore() {
+    if (!selected || !currentDesignId || !window.codesign) return;
+    setRestoring(true);
+    try {
+      await window.codesign.snapshots.create({
+        designId: currentDesignId,
+        parentId: selected.id,
+        type: 'fork',
+        prompt: selected.prompt,
+        artifactType: selected.artifactType,
+        artifactSource: selected.artifactSource,
+      });
+      setPreviewHtml(selected.artifactSource);
+      pushToast({ variant: 'success', title: 'Restored to selected version' });
+      onClose();
+    } catch (err) {
+      pushToast({
+        variant: 'error',
+        title: 'Restore failed',
+        description: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      setRestoring(false);
+    }
+  }
+
+  return (
+    <div className="absolute inset-0 z-30 flex flex-col bg-[var(--color-background)] border-l border-[var(--color-border)]">
+      {/* Header */}
+      <div className="flex items-center gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-3)] border-b border-[var(--color-border)] shrink-0">
+        <Clock className="w-[14px] h-[14px] text-[var(--color-text-muted)]" aria-hidden />
+        <span className="text-[13px] font-medium text-[var(--color-text-primary)] flex-1">
+          Version History
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close history"
+          className="p-[var(--space-1)] rounded-[var(--radius-md)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      <div className="flex flex-1 min-h-0">
+        {/* Snapshot list */}
+        <div className="w-[200px] shrink-0 border-r border-[var(--color-border)] overflow-y-auto">
+          {loading ? (
+            <div className="px-4 py-3 text-[12px] text-[var(--color-text-muted)]">Loading…</div>
+          ) : snapshots.length === 0 ? (
+            <div className="px-4 py-3 text-[12px] text-[var(--color-text-muted)]">No history yet.</div>
+          ) : (
+            snapshots.map((snap, i) => (
+              <button
+                key={snap.id}
+                type="button"
+                onClick={() => setSelected(snap)}
+                className={`w-full text-left px-[var(--space-3)] py-[var(--space-2_5)] border-b border-[var(--color-border-muted)] transition-colors ${
+                  selected?.id === snap.id
+                    ? 'bg-[var(--color-accent)]/10 text-[var(--color-accent)]'
+                    : 'hover:bg-[var(--color-surface-hover)] text-[var(--color-text-primary)]'
+                }`}
+              >
+                <div className="text-[11.5px] font-medium truncate">
+                  {i === 0 ? 'Current' : snap.type === 'fork' ? 'Restored' : `v${snapshots.length - i}`}
+                </div>
+                <div className="text-[10.5px] text-[var(--color-text-muted)] mt-[2px]">
+                  {formatDate(snap.createdAt)}
+                </div>
+                {snap.prompt && (
+                  <div className="text-[10.5px] text-[var(--color-text-muted)] mt-[1px] truncate">
+                    {snap.prompt.slice(0, 40)}
+                  </div>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+
+        {/* Preview area */}
+        <div className="flex-1 flex flex-col min-w-0">
+          {previewSrc ? (
+            <iframe
+              title="history-preview"
+              sandbox="allow-scripts"
+              srcDoc={previewSrc}
+              className="flex-1 w-full border-0 bg-white"
+            />
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-[12px] text-[var(--color-text-muted)]">
+              Select a version to preview.
+            </div>
+          )}
+
+          {selected && (
+            <div className="shrink-0 flex items-center justify-end gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-2)] border-t border-[var(--color-border)] bg-[var(--color-background-secondary)]">
+              <button
+                type="button"
+                onClick={handleRestore}
+                disabled={restoring || snapshots[0]?.id === selected.id}
+                className="inline-flex items-center gap-[var(--space-1_5)] px-[var(--space-3)] py-[var(--space-1_5)] rounded-[var(--radius-md)] bg-[var(--color-accent)] text-white text-[12px] font-medium disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+              >
+                <RotateCcw className="w-[12px] h-[12px]" aria-hidden />
+                {restoring ? 'Restoring…' : snapshots[0]?.id === selected.id ? 'Current version' : 'Restore this version'}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx b/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx
index 9f3b2620..6e451967 100644
--- a/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx
+++ b/apps/desktop/src/renderer/src/components/InlineCommentComposer.tsx
@@ -22,7 +22,7 @@ function InlineCommentComposerCard({ selectedElement }: InlineCommentComposerCar
   const clearCanvasElement = useCodesignStore((s) => s.clearCanvasElement);
   const applyInlineComment = useCodesignStore((s) => s.applyInlineComment);
   const isGenerating = useCodesignStore(
-    (s) => s.isGenerating && s.generatingDesignId === s.currentDesignId,
+    (s) => s.currentDesignId !== null && s.activeGenerations.has(s.currentDesignId),
   );
   const [draft, setDraft] = useState('');
   const applyDisabledReason = isGenerating
diff --git a/apps/desktop/src/renderer/src/components/ModelSwitcher.test.ts b/apps/desktop/src/renderer/src/components/ModelSwitcher.test.ts
index 9369d71e..c38b021f 100644
--- a/apps/desktop/src/renderer/src/components/ModelSwitcher.test.ts
+++ b/apps/desktop/src/renderer/src/components/ModelSwitcher.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { filterModels } from './ModelSwitcher';
+import { filterModels, mergeActiveModelIfMissing } from './ModelSwitcher';
 
 describe('filterModels', () => {
   const models = [
@@ -36,3 +36,19 @@ describe('filterModels', () => {
     expect(filterModels(models, 'xyz-nonexistent')).toEqual([]);
   });
 });
+
+describe('mergeActiveModelIfMissing', () => {
+  it('returns the catalog unchanged when active is empty', () => {
+    expect(mergeActiveModelIfMissing(['a', 'b'], undefined)).toEqual(['a', 'b']);
+    expect(mergeActiveModelIfMissing(['a', 'b'], null)).toEqual(['a', 'b']);
+    expect(mergeActiveModelIfMissing(['a', 'b'], '')).toEqual(['a', 'b']);
+  });
+
+  it('returns the catalog unchanged when the active id is in the list', () => {
+    expect(mergeActiveModelIfMissing(['a', 'b'], 'a')).toEqual(['a', 'b']);
+  });
+
+  it('prepends the active id when it is missing (partial /models, TOML, …)', () => {
+    expect(mergeActiveModelIfMissing(['a', 'b'], 'x')).toEqual(['x', 'a', 'b']);
+  });
+});
diff --git a/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx b/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
index 0c8ab1e6..2bd2f24c 100644
--- a/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
+++ b/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
@@ -1,6 +1,6 @@
 import { useT } from '@open-codesign/i18n';
-import { ChevronDown, Loader2, Search, X } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronDown, ChevronRight, Loader2, Search, Star, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ProviderRow } from '../../../preload/index';
 import { recordAction } from '../lib/action-timeline';
 import { useCodesignStore } from '../store';
@@ -9,28 +9,79 @@ interface ModelSwitcherProps {
   variant: 'topbar' | 'sidebar';
 }
 
-// Below this threshold the search input just adds UI chrome for no real win —
-// a user with ~12 models can eyeball and scroll the list without filtering.
-// Above it, scrolling becomes a chore (community feedback: providers like
-// DeepSeek/Zhipu return 40+ IDs).
-const SEARCH_VISIBILITY_THRESHOLD = 12;
+export const MODEL_LIST_SEARCH_THRESHOLD = 12;
 
 function shortenModelLabel(model: string): string {
   const stripped = model.replace(/^(claude-|gpt-|gemini-)/, '');
   return stripped.includes('/') ? (stripped.split('/').pop() ?? stripped) : stripped;
 }
 
-/**
- * Case-insensitive substring filter. Exported for unit tests — inlining it
- * into a useMemo would work, but a pure helper documents the "empty query
- * returns everything" and "trim" rules without reading the component.
- */
 export function filterModels(models: string[], query: string): string[] {
   const q = query.trim().toLowerCase();
   if (q.length === 0) return models;
   return models.filter((m) => m.toLowerCase().includes(q));
 }
 
+export function mergeActiveModelIfMissing(
+  models: string[],
+  activeId: string | null | undefined,
+): string[] {
+  if (!activeId || models.includes(activeId)) return models;
+  return [activeId, ...models];
+}
+
+// ─── Pinned model persistence ─────────────────────────────────────────────
+
+const PINS_KEY = 'open-codesign:pinned-models';
+
+interface PinnedEntry {
+  provider: string;
+  modelId: string;
+}
+
+function loadPins(): PinnedEntry[] {
+  try {
+    const raw = localStorage.getItem(PINS_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (x): x is PinnedEntry =>
+        typeof x === 'object' && x !== null &&
+        typeof x.provider === 'string' && typeof x.modelId === 'string',
+    );
+  } catch {
+    return [];
+  }
+}
+
+function savePins(pins: PinnedEntry[]): void {
+  try {
+    localStorage.setItem(PINS_KEY, JSON.stringify(pins));
+  } catch {
+    /* storage full — ignore */
+  }
+}
+
+function isPinned(pins: PinnedEntry[], provider: string, modelId: string): boolean {
+  return pins.some((p) => p.provider === provider && p.modelId === modelId);
+}
+
+function togglePin(pins: PinnedEntry[], provider: string, modelId: string): PinnedEntry[] {
+  if (isPinned(pins, provider, modelId)) {
+    return pins.filter((p) => !(p.provider === provider && p.modelId === modelId));
+  }
+  return [...pins, { provider, modelId }];
+}
+
+// ─── Provider section state ───────────────────────────────────────────────
+
+interface SectionState {
+  models: string[] | null;
+  loading: boolean;
+  expanded: boolean;
+}
+
 export function ModelSwitcher({ variant }: ModelSwitcherProps) {
   const t = useT();
   const config = useCodesignStore((s) => s.config);
@@ -38,16 +89,17 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
   const reportableErrorToast = useCodesignStore((s) => s.reportableErrorToast);
 
   const [open, setOpen] = useState(false);
-  const [models, setModels] = useState<string[] | null>(null);
-  const [loading, setLoading] = useState(false);
   const [providerRows, setProviderRows] = useState<ProviderRow[] | null>(null);
+  const [sections, setSections] = useState<Map<string, SectionState>>(new Map());
   const [query, setQuery] = useState('');
+  const [pins, setPins] = useState<PinnedEntry[]>(() => loadPins());
   const rootRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const provider = config?.provider ?? null;
+  const activeProvider = config?.provider ?? null;
   const currentModel = config?.modelPrimary ?? null;
 
+  // Close on outside click / Escape
   useEffect(() => {
     if (!open) return;
     function onDown(e: MouseEvent) {
@@ -64,63 +116,104 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
     };
   }, [open]);
 
-  // Reset the filter every time the dropdown closes so the next open starts
-  // fresh — otherwise a stale query from a previous session silently hides
-  // models and looks like a loading bug.
+  // Reset state on close
   useEffect(() => {
-    if (!open) setQuery('');
+    if (!open) {
+      setQuery('');
+    }
   }, [open]);
 
-  // Load provider rows once — used to display the active provider's friendly label
+  // Load providers + start fetching models for all when dropdown opens
   useEffect(() => {
-    if (providerRows !== null || !window.codesign?.settings?.listProviders) return;
-    void window.codesign.settings
-      .listProviders()
-      .then((rows) => setProviderRows(rows))
-      .catch(() => setProviderRows([]));
-  }, [providerRows]);
+    if (!open) return;
+    if (!window.codesign?.settings?.listProviders) return;
 
-  useEffect(() => {
-    if (!open || models !== null || !window.codesign?.models?.listForProvider || !provider) return;
-    setLoading(true);
-    void window.codesign.models
-      .listForProvider(provider)
-      .then((res) => setModels(res.ok ? res.models : []))
-      .catch(() => setModels([]))
-      .finally(() => setLoading(false));
-  }, [open, models, provider]);
-
-  const showSearch = (models?.length ?? 0) > SEARCH_VISIBILITY_THRESHOLD;
-
-  // Auto-focus the search box once the model list arrives so users who
-  // opened the dropdown with keyboard don't need to grab the mouse.
-  useEffect(() => {
-    if (open && showSearch && !loading) {
-      searchInputRef.current?.focus();
-    }
-  }, [open, showSearch, loading]);
+    void window.codesign.settings.listProviders().then((rows) => {
+      setProviderRows(rows);
 
-  const filteredModels = useMemo(() => {
-    if (models === null) return null;
-    return filterModels(models, query);
-  }, [models, query]);
+      setSections((prev) => {
+        const next = new Map(prev);
+        for (const row of rows) {
+          if (!next.has(row.provider)) {
+            next.set(row.provider, {
+              models: null,
+              loading: false,
+              // Auto-expand active provider; collapse others
+              expanded: row.provider === activeProvider,
+            });
+          }
+        }
+        return next;
+      });
 
-  if (!provider || !currentModel) return null;
+      // Kick off model loads for all providers in parallel
+      if (!window.codesign?.models?.listForProvider) return;
+      for (const row of rows) {
+        setSections((prev) => {
+          const cur = prev.get(row.provider);
+          if (cur?.models !== null) return prev; // already loaded
+          const next = new Map(prev);
+          next.set(row.provider, { ...(cur ?? { expanded: row.provider === activeProvider }), loading: true, models: null });
+          return next;
+        });
 
-  const activeProviderRow = providerRows?.find((r) => r.provider === provider) ?? null;
-  const providerLabel = activeProviderRow?.label ?? provider;
+        void window.codesign.models
+          .listForProvider(row.provider)
+          .then((res) => {
+            setSections((prev) => {
+              const cur = prev.get(row.provider);
+              const models = res.ok ? mergeActiveModelIfMissing(res.models, row.provider === activeProvider ? currentModel : null) : [];
+              const next = new Map(prev);
+              next.set(row.provider, { ...(cur ?? { expanded: false }), loading: false, models });
+              return next;
+            });
+          })
+          .catch(() => {
+            setSections((prev) => {
+              const cur = prev.get(row.provider);
+              const next = new Map(prev);
+              next.set(row.provider, { ...(cur ?? { expanded: false }), loading: false, models: [] });
+              return next;
+            });
+          });
+      }
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
 
-  async function switchModel(model: string) {
-    if (!window.codesign || !provider || model === currentModel) {
-      setOpen(false);
-      return;
+  // Auto-focus search when any section has models
+  const totalModels = useMemo(() => {
+    let n = 0;
+    for (const s of sections.values()) n += s.models?.length ?? 0;
+    return n;
+  }, [sections]);
+
+  useEffect(() => {
+    if (open && totalModels > MODEL_LIST_SEARCH_THRESHOLD) {
+      searchInputRef.current?.focus();
     }
+  }, [open, totalModels]);
+
+  const handleTogglePin = useCallback((provider: string, modelId: string, e: import('react').MouseEvent) => {
+    e.stopPropagation();
+    setPins((prev) => {
+      const next = togglePin(prev, provider, modelId);
+      savePins(next);
+      return next;
+    });
+  }, []);
+
+  async function switchModel(provider: string, modelId: string) {
+    if (!window.codesign) { setOpen(false); return; }
+    if (provider === activeProvider && modelId === currentModel) { setOpen(false); return; }
     try {
-      const next = await window.codesign.settings.setActiveProvider({
-        provider,
-        modelPrimary: model,
-      });
-      recordAction({ type: 'provider.switch', data: { provider, modelId: model } });
+      let next: typeof config;
+      if (provider !== activeProvider) {
+        next = await window.codesign.config.setActiveProviderAndModel({ provider, modelPrimary: modelId });
+      } else {
+        next = await window.codesign.settings.setActiveProvider({ provider, modelPrimary: modelId });
+      }
+      recordAction({ type: 'provider.switch', data: { provider, modelId } });
       setConfig(next);
     } catch (err) {
       reportableErrorToast({
@@ -129,14 +222,33 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
         title: t('settings.providers.toast.modelSaveFailed'),
         description: err instanceof Error ? err.message : t('settings.common.unknownError'),
         ...(err instanceof Error && err.stack !== undefined ? { stack: err.stack } : {}),
-        context: { provider, model },
+        context: { provider, modelId },
       });
     } finally {
       setOpen(false);
-      setModels(null);
     }
   }
 
+  const toggleSection = (provider: string) => {
+    setSections((prev) => {
+      const cur = prev.get(provider);
+      if (!cur) return prev;
+      const next = new Map(prev);
+      next.set(provider, { ...cur, expanded: !cur.expanded });
+      return next;
+    });
+  };
+
+  // Pinned entries filtered by query
+  const filteredPins = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q.length === 0) return pins;
+    return pins.filter((p) => p.modelId.toLowerCase().includes(q) || p.provider.toLowerCase().includes(q));
+  }, [pins, query]);
+
+  if (!activeProvider || !currentModel) return null;
+  const activeProviderRow = providerRows?.find((r) => r.provider === activeProvider) ?? null;
+  const providerLabel = activeProviderRow?.label ?? activeProvider;
   const isSidebar = variant === 'sidebar';
 
   return (
@@ -176,97 +288,131 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
 
       {open ? (
         <div
-          role="listbox"
-          className={`absolute z-50 overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-elevated)] shadow-[var(--shadow-card)] ${
+          className={`absolute z-50 flex flex-col overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-elevated)] shadow-[var(--shadow-card)] ${
             isSidebar
-              ? 'bottom-full mb-[var(--space-1)] left-0 min-w-[220px]'
-              : 'top-full mt-[var(--space-1)] right-0 min-w-[260px]'
-          }`}
+              ? 'bottom-full mb-[var(--space-1)] left-0 w-[320px]'
+              : 'top-full mt-[var(--space-1)] right-0 w-[340px]'
+          } max-h-[480px]`}
         >
-          {showSearch && (
-            <div className="relative p-[var(--space-2)] border-b border-[var(--color-border-muted)]">
-              <Search
-                className="absolute left-[calc(var(--space-2)+var(--space-2))] top-1/2 -translate-y-1/2 w-[var(--size-icon-xs)] h-[var(--size-icon-xs)] text-[var(--color-text-muted)] pointer-events-none"
-                aria-hidden
-              />
-              <input
-                ref={searchInputRef}
-                type="text"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder={t('topbar.modelSwitcher.searchPlaceholder', {
-                  defaultValue: 'Search models…',
-                })}
-                aria-label={t('topbar.modelSwitcher.searchAriaLabel', {
-                  defaultValue: 'Filter models by name',
-                })}
-                className="w-full h-[var(--size-control-xs)] pl-[calc(var(--space-2)+var(--size-icon-xs)+var(--space-1_5))] pr-[calc(var(--space-2)+var(--size-icon-sm))] rounded-[var(--radius-sm)] bg-transparent border-0 text-[var(--text-xs)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]"
-                style={{ fontFamily: 'var(--font-mono)' }}
-              />
-              {query.length > 0 && (
-                <button
-                  type="button"
-                  onClick={() => {
-                    setQuery('');
-                    searchInputRef.current?.focus();
-                  }}
-                  aria-label={t('topbar.modelSwitcher.clearSearch', {
-                    defaultValue: 'Clear search',
-                  })}
-                  className="absolute right-[calc(var(--space-2)+var(--space-1))] top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-[var(--size-icon-sm)] h-[var(--size-icon-sm)] rounded-full text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
-                >
-                  <X className="w-[var(--size-icon-xs)] h-[var(--size-icon-xs)]" aria-hidden />
-                </button>
-              )}
-            </div>
-          )}
-
-          <div className="max-h-[280px] overflow-y-auto py-[var(--space-1)]">
-            {loading ? (
-              <div className="flex items-center justify-center py-[var(--space-3)]">
+          {/* Search */}
+          <div className="relative p-[var(--space-2)] border-b border-[var(--color-border-muted)] shrink-0">
+            <Search
+              className="absolute left-[calc(var(--space-2)+var(--space-2))] top-1/2 -translate-y-1/2 w-[13px] h-[13px] text-[var(--color-text-muted)] pointer-events-none"
+              aria-hidden
+            />
+            <input
+              ref={searchInputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search models…"
+              className="w-full h-[28px] pl-[28px] pr-[28px] rounded-[var(--radius-sm)] bg-[var(--color-background-secondary)] border border-[var(--color-border-subtle)] text-[12px] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]"
+              style={{ fontFamily: 'var(--font-mono)' }}
+            />
+            {query.length > 0 && (
+              <button
+                type="button"
+                onClick={() => { setQuery(''); searchInputRef.current?.focus(); }}
+                aria-label="Clear"
+                className="absolute right-[calc(var(--space-2)+var(--space-1))] top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-[18px] h-[18px] rounded-full text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+              >
+                <X className="w-[11px] h-[11px]" aria-hidden />
+              </button>
+            )}
+          </div>
+
+          {/* Scrollable body */}
+          <div className="overflow-y-auto flex-1">
+            {/* Pinned section */}
+            {filteredPins.length > 0 && (
+              <div>
+                <SectionHeader label="Pinned" icon={<Star className="w-[11px] h-[11px]" />} expanded />
+                {filteredPins.map((pin) => (
+                  <ModelRow
+                    key={`pin:${pin.provider}:${pin.modelId}`}
+                    modelId={pin.modelId}
+                    provider={pin.provider}
+                    providerLabel={providerRows?.find((r) => r.provider === pin.provider)?.label ?? pin.provider}
+                    isActive={pin.provider === activeProvider && pin.modelId === currentModel}
+                    isPinned
+                    showProvider
+                    onSelect={() => void switchModel(pin.provider, pin.modelId)}
+                    onTogglePin={(e) => handleTogglePin(pin.provider, pin.modelId, e)}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Provider sections */}
+            {providerRows === null ? (
+              <div className="flex items-center justify-center py-[var(--space-4)]">
                 <Loader2 className="w-4 h-4 animate-spin text-[var(--color-text-muted)]" />
               </div>
-            ) : filteredModels && filteredModels.length > 0 ? (
-              filteredModels.map((m) => {
-                const isActive = m === currentModel;
+            ) : (
+              providerRows.map((row) => {
+                const sec = sections.get(row.provider);
+                const expanded = sec?.expanded ?? (row.provider === activeProvider);
+                const models = sec?.models ?? null;
+                const loading = sec?.loading ?? false;
+                const q = query.trim().toLowerCase();
+                const filtered = models
+                  ? (q ? models.filter((m) => m.toLowerCase().includes(q) || row.provider.toLowerCase().includes(q)) : models)
+                  : null;
+
+                // When searching, skip sections with no matches (only if models loaded)
+                if (q && filtered && filtered.length === 0) return null;
+
                 return (
-                  <button
-                    key={m}
-                    type="button"
-                    role="option"
-                    aria-selected={isActive}
-                    onClick={() => void switchModel(m)}
-                    className={`relative w-full text-left px-[var(--space-3)] py-[var(--space-1_5)] text-[12px] transition-colors ${
-                      isActive
-                        ? 'bg-[var(--color-surface-hover)] font-medium text-[var(--color-text-primary)]'
-                        : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
-                    }`}
-                    style={{ fontFamily: 'var(--font-mono)' }}
-                  >
-                    {isActive && (
-                      <span
-                        aria-hidden
-                        className="absolute left-0 top-[3px] bottom-[3px] w-[2px] rounded-r-full bg-[var(--color-accent)]"
-                      />
+                  <div key={row.provider}>
+                    <button
+                      type="button"
+                      onClick={() => toggleSection(row.provider)}
+                      className="w-full flex items-center gap-[var(--space-1_5)] px-[var(--space-3)] py-[6px] text-[11px] font-semibold text-[var(--color-text-secondary)] uppercase tracking-[0.06em] hover:bg-[var(--color-surface-hover)] transition-colors"
+                    >
+                      {expanded ? (
+                        <ChevronDown className="w-[11px] h-[11px] shrink-0" aria-hidden />
+                      ) : (
+                        <ChevronRight className="w-[11px] h-[11px] shrink-0" aria-hidden />
+                      )}
+                      <span className="flex-1 text-left">{row.label}</span>
+                      {loading && <Loader2 className="w-[11px] h-[11px] animate-spin opacity-60" />}
+                      {row.isActive && (
+                        <span className="text-[10px] font-medium text-[var(--color-accent)] normal-case tracking-normal">
+                          active
+                        </span>
+                      )}
+                    </button>
+
+                    {(expanded || q.length > 0) && (
+                      <div>
+                        {loading ? (
+                          <div className="flex justify-center py-[var(--space-2)]">
+                            <Loader2 className="w-3 h-3 animate-spin text-[var(--color-text-muted)]" />
+                          </div>
+                        ) : filtered && filtered.length > 0 ? (
+                          filtered.map((m) => (
+                            <ModelRow
+                              key={`${row.provider}:${m}`}
+                              modelId={m}
+                              provider={row.provider}
+                              providerLabel={row.label}
+                              isActive={m === currentModel && row.provider === activeProvider}
+                              isPinned={isPinned(pins, row.provider, m)}
+                              showProvider={false}
+                              onSelect={() => void switchModel(row.provider, m)}
+                              onTogglePin={(e) => handleTogglePin(row.provider, m, e)}
+                            />
+                          ))
+                        ) : models !== null ? (
+                          <div className="px-[var(--space-3)] py-[var(--space-1_5)] text-[11px] text-[var(--color-text-muted)]">
+                            {q ? `No matches` : t('settings.providers.noModel')}
+                          </div>
+                        ) : null}
+                      </div>
                     )}
-                    {m}
-                  </button>
+                  </div>
                 );
               })
-            ) : models && models.length > 0 && query.trim().length > 0 ? (
-              // Had models, filter produced none — distinct copy so the user
-              // knows their search term, not the provider, is the reason the
-              // list is empty.
-              <div className="px-[var(--space-3)] py-[var(--space-2)] text-[var(--text-xs)] text-[var(--color-text-muted)]">
-                {t('topbar.modelSwitcher.noMatches', {
-                  defaultValue: 'No models match "{{query}}"',
-                  query: query.trim(),
-                })}
-              </div>
-            ) : (
-              <div className="px-[var(--space-3)] py-[var(--space-2)] text-[var(--text-xs)] text-[var(--color-text-muted)]">
-                {t('settings.providers.noModel')}
-              </div>
             )}
           </div>
         </div>
@@ -274,3 +420,88 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
     </div>
   );
 }
+
+// ─── Subcomponents ────────────────────────────────────────────────────────────
+
+function SectionHeader({
+  label,
+  icon,
+  expanded: _expanded,
+}: {
+  label: string;
+  icon?: import('react').ReactNode;
+  expanded?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-[var(--space-1_5)] px-[var(--space-3)] py-[5px] text-[11px] font-semibold text-[var(--color-text-secondary)] uppercase tracking-[0.06em]">
+      {icon}
+      {label}
+    </div>
+  );
+}
+
+interface ModelRowProps {
+  modelId: string;
+  provider: string;
+  providerLabel: string;
+  isActive: boolean;
+  isPinned: boolean;
+  showProvider: boolean;
+  onSelect: () => void;
+  onTogglePin: (e: import('react').MouseEvent) => void;
+}
+
+function ModelRow({
+  modelId,
+  provider: _provider,
+  providerLabel,
+  isActive,
+  isPinned,
+  showProvider,
+  onSelect,
+  onTogglePin,
+}: ModelRowProps) {
+  return (
+    <div
+      className={`group relative flex items-center gap-[var(--space-1)] px-[var(--space-3)] pl-[calc(var(--space-3)+var(--space-4))] py-[5px] cursor-pointer transition-colors ${
+        isActive
+          ? 'bg-[var(--color-surface-hover)]'
+          : 'hover:bg-[var(--color-surface-hover)]'
+      }`}
+      onClick={onSelect}
+      role="option"
+      aria-selected={isActive}
+    >
+      {isActive && (
+        <span
+          aria-hidden
+          className="absolute left-[var(--space-3)] top-[3px] bottom-[3px] w-[2px] rounded-r-full bg-[var(--color-accent)]"
+        />
+      )}
+      <div className="flex-1 min-w-0">
+        <div
+          className={`text-[12px] truncate font-[ui-monospace,Menlo,monospace] ${isActive ? 'text-[var(--color-text-primary)] font-medium' : 'text-[var(--color-text-secondary)]'}`}
+        >
+          {modelId}
+        </div>
+        {showProvider && (
+          <div className="text-[10px] text-[var(--color-text-muted)] truncate">
+            {providerLabel}
+          </div>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={onTogglePin}
+        aria-label={isPinned ? 'Unpin' : 'Pin'}
+        className={`shrink-0 inline-flex items-center justify-center w-[20px] h-[20px] rounded transition-colors ${
+          isPinned
+            ? 'text-[var(--color-accent)] opacity-100'
+            : 'text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100'
+        } hover:bg-[var(--color-surface)]`}
+      >
+        <Star className={`w-[11px] h-[11px] ${isPinned ? 'fill-current' : ''}`} aria-hidden />
+      </button>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/PageTabBar.tsx b/apps/desktop/src/renderer/src/components/PageTabBar.tsx
new file mode 100644
index 00000000..16ca8e11
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/PageTabBar.tsx
@@ -0,0 +1,43 @@
+import { useCodesignStore } from '../store';
+
+function pageLabel(path: string): string {
+  if (path === 'index.html') return 'Home';
+  // page-about.html → "About"
+  const m = path.match(/^page-(.+)\.html$/);
+  if (m?.[1]) return m[1].charAt(0).toUpperCase() + m[1].slice(1).replace(/-/g, ' ');
+  return path;
+}
+
+export function PageTabBar() {
+  const pageFiles = useCodesignStore((s) => s.pageFiles);
+  const activePagePath = useCodesignStore((s) => s.activePagePath);
+  const setActivePagePath = useCodesignStore((s) => s.setActivePagePath);
+
+  const paths = Object.keys(pageFiles).sort((a, b) => {
+    if (a === 'index.html') return -1;
+    if (b === 'index.html') return 1;
+    return a.localeCompare(b);
+  });
+
+  // Only show when there are 2+ pages
+  if (paths.length < 2) return null;
+
+  return (
+    <div className="flex items-center gap-[2px] px-[var(--space-2)] overflow-x-auto shrink-0 border-b border-[var(--color-border-muted)] bg-[var(--color-background-secondary)]">
+      {paths.map((path) => (
+        <button
+          key={path}
+          type="button"
+          onClick={() => setActivePagePath(path)}
+          className={`shrink-0 h-[28px] px-[var(--space-3)] text-[12px] rounded-t-[var(--radius-sm)] transition-colors ${
+            path === activePagePath
+              ? 'bg-[var(--color-background)] text-[var(--color-text-primary)] font-medium border-x border-t border-[var(--color-border-muted)]'
+              : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
+          }`}
+        >
+          {pageLabel(path)}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/PreviewPane.tsx b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
index 1ab1b2a5..b64e9151 100644
--- a/apps/desktop/src/renderer/src/components/PreviewPane.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
@@ -1,10 +1,12 @@
 import { useT } from '@open-codesign/i18n';
 import {
   type ElementRectsMessage,
+  type IframeConsoleMessage,
   type IframeErrorMessage,
   type OverlayMessage,
   buildSrcdoc,
   isElementRectsMessage,
+  isIframeConsoleMessage,
   isIframeErrorMessage,
   isOverlayMessage,
 } from '@open-codesign/runtime';
@@ -14,9 +16,12 @@ import { ErrorState } from '../preview/ErrorState';
 import { useCodesignStore } from '../store';
 import { CanvasErrorBar } from './CanvasErrorBar';
 import { CanvasTabBar } from './CanvasTabBar';
+import { ConsolePanel } from './ConsolePanel';
 import { FilesTabView } from './FilesTabView';
+import { HistoryPanel } from './HistoryPanel';
+import { PageTabBar } from './PageTabBar';
 import { PhoneFrame } from './PhoneFrame';
-import { PreviewToolbar } from './PreviewToolbar';
+import { PreviewToolbar, type PreviewToolbarExternalProps } from './PreviewToolbar';
 import { TweakPanel } from './TweakPanel';
 import { CommentBubble } from './comment/CommentBubble';
 import { PinOverlay } from './comment/PinOverlay';
@@ -87,12 +92,17 @@ export function stablePreviewSourceKey(source: string): string {
     );
 }
 
-export type AllowedPreviewMessageType = 'ELEMENT_SELECTED' | 'IFRAME_ERROR' | 'ELEMENT_RECTS';
+export type AllowedPreviewMessageType =
+  | 'ELEMENT_SELECTED'
+  | 'IFRAME_ERROR'
+  | 'ELEMENT_RECTS'
+  | 'CONSOLE_LOG';
 
 export interface PreviewMessageHandlers {
   onElementSelected: (msg: OverlayMessage) => void;
   onIframeError: (msg: IframeErrorMessage) => void;
   onElementRects: (msg: ElementRectsMessage) => void;
+  onConsoleLog: (msg: IframeConsoleMessage) => void;
 }
 
 export type PreviewMessageOutcome =
@@ -130,6 +140,12 @@ export function handlePreviewMessage(
         return { status: 'handled', type: 'ELEMENT_RECTS' };
       }
       return { status: 'rejected', reason: 'shape', type: envelope.type };
+    case 'CONSOLE_LOG':
+      if (isIframeConsoleMessage(data)) {
+        handlers.onConsoleLog(data);
+        return { status: 'handled', type: 'CONSOLE_LOG' };
+      }
+      return { status: 'rejected', reason: 'shape', type: envelope.type };
     default:
       return { status: 'rejected', reason: 'unknown-type', type: envelope.type };
   }
@@ -276,9 +292,13 @@ function PreviewSlot({
 export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
+  const setPreviewHtml = useCodesignStore((s) => s.setPreviewHtml);
   const previewHtmlByDesign = useCodesignStore((s) => s.previewHtmlByDesign);
   const recentDesignIds = useCodesignStore((s) => s.recentDesignIds);
   const currentDesignId = useCodesignStore((s) => s.currentDesignId);
+  const isGenerating = useCodesignStore(
+    (s) => s.currentDesignId !== null && s.activeGenerations.has(s.currentDesignId),
+  );
   const designs = useCodesignStore((s) => s.designs);
   const chatMessages = useCodesignStore((s) => s.chatMessages);
   const canvasTabs = useCodesignStore((s) => s.canvasTabs);
@@ -287,6 +307,7 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const retry = useCodesignStore((s) => s.retryLastPrompt);
   const clearError = useCodesignStore((s) => s.clearError);
   const pushIframeError = useCodesignStore((s) => s.pushIframeError);
+  const pushConsoleLog = useCodesignStore((s) => s.pushConsoleLog);
   const selectCanvasElement = useCodesignStore((s) => s.selectCanvasElement);
   const previewViewport = useCodesignStore((s) => s.previewViewport);
   const previewZoom = useCodesignStore((s) => s.previewZoom);
@@ -300,10 +321,20 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const applyLiveRects = useCodesignStore((s) => s.applyLiveRects);
   const clearLiveRects = useCodesignStore((s) => s.clearLiveRects);
   const liveRects = useCodesignStore((s) => s.liveRects);
+  const pageFiles = useCodesignStore((s) => s.pageFiles);
+  const activePagePath = useCodesignStore((s) => s.activePagePath);
+  const activeTab = canvasTabs[activeCanvasTab];
+  const showFilesOverPreview =
+    activeTab?.kind === 'files' && typeof previewHtml === 'string' && previewHtml.length > 0;
+  const [filesLayerKept, setFilesLayerKept] = useState(false);
+  const hasPreviewText = typeof previewHtml === 'string' && previewHtml.length > 0;
+  const filesLayerInDom = hasPreviewText && (showFilesOverPreview || filesLayerKept);
 
   // Active iframe ref consumed by TweakPanel (postMessage target) and by the
   // window.message guard. We re-point this whenever the active design changes
   // or the active iframe element re-mounts.
+  const [showHistory, setShowHistory] = useState(false);
+  const [showCodeView, setShowCodeView] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   // Unsent bubble drafts, keyed by bubbleKey (edit:<id> | new:<selector>).
   // Lives across bubble remounts so switching to another chip / element and
@@ -316,6 +347,14 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   // on first mount.
   const [iframeLoadTick, setIframeLoadTick] = useState(0);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-run on design id only — effect body is intentionally idempotent
+  useEffect(() => {
+    setFilesLayerKept(false);
+  }, [currentDesignId]);
+  useEffect(() => {
+    if (showFilesOverPreview) setFilesLayerKept(true);
+  }, [showFilesOverPreview]);
+
   const registerIframe = useCallback((designId: string, el: HTMLIFrameElement | null) => {
     if (el) {
       iframesByDesign.current.set(designId, el);
@@ -405,6 +444,8 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
         onElementRects: (msg) => {
           applyLiveRects(msg.entries);
         },
+        onConsoleLog: (msg) =>
+          pushConsoleLog({ level: msg.level, args: msg.args, timestamp: msg.timestamp }),
       });
 
       if (outcome.status === 'rejected' && outcome.reason === 'unknown-type') {
@@ -414,7 +455,14 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
 
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [pushIframeError, selectCanvasElement, openCommentBubble, previewZoom, applyLiveRects]);
+  }, [
+    pushIframeError,
+    pushConsoleLog,
+    selectCanvasElement,
+    openCommentBubble,
+    previewZoom,
+    applyLiveRects,
+  ]);
 
   // Pool entries: active design first (using the freshest in-memory
   // previewHtml), then any other recently-visited designs that still have a
@@ -424,7 +472,9 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
     const seen = new Set<string>();
     const out: Array<{ id: string; html: string }> = [];
     if (currentDesignId !== null) {
-      const html = previewHtml ?? previewHtmlByDesign[currentDesignId];
+      // When viewing a non-index page, show that page's content instead.
+      const pageHtml = activePagePath !== 'index.html' ? pageFiles[activePagePath] : undefined;
+      const html = pageHtml ?? previewHtml ?? previewHtmlByDesign[currentDesignId];
       if (typeof html === 'string' && html.length > 0) {
         out.push({ id: currentDesignId, html });
         seen.add(currentDesignId);
@@ -439,9 +489,15 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
       }
     }
     return out;
-  }, [currentDesignId, previewHtml, previewHtmlByDesign, recentDesignIds]);
+  }, [
+    currentDesignId,
+    previewHtml,
+    previewHtmlByDesign,
+    recentDesignIds,
+    activePagePath,
+    pageFiles,
+  ]);
 
-  const activeTab = canvasTabs[activeCanvasTab];
   const showCommentUi = interactionMode === 'comment';
   const snapshotComments = currentSnapshotId
     ? comments.filter((c) => c.snapshotId === currentSnapshotId)
@@ -494,14 +550,14 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
         onDismiss={clearError}
       />
     );
-  } else if (activeTab?.kind === 'files' && previewHtml) {
-    body = <FilesTabView />;
   } else {
+    // Stack Files above the pool and toggle with `hidden` (HubView pattern) so
+    // iframes are not torn down on tab switch.
     // Pool slots stay mounted even when the current design has no preview —
     // background iframes for recently-visited designs keep their documents
     // alive for instant switch-back. EmptyState is overlaid in the same
     // stacking context when the active design has no content yet.
-    body = (
+    const previewStack = (
       <div className="relative h-full w-full">
         {poolEntries.map((entry) => (
           <PreviewSlot
@@ -531,6 +587,26 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
         ) : null}
       </div>
     );
+    body = (
+      <div className="relative h-full w-full">
+        {filesLayerInDom ? (
+          <div
+            className="absolute inset-0 z-10 min-h-0"
+            hidden={!showFilesOverPreview}
+            aria-hidden={!showFilesOverPreview}
+          >
+            <FilesTabView />
+          </div>
+        ) : null}
+        <div
+          className="absolute inset-0 min-h-0"
+          hidden={showFilesOverPreview}
+          aria-hidden={showFilesOverPreview}
+        >
+          {previewStack}
+        </div>
+      </div>
+    );
   }
 
   const hasTabs = canvasTabs.length > 0;
@@ -542,14 +618,26 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
         {isWelcome ? null : (
           <div className="flex items-stretch justify-between gap-[var(--space-2)] border-b border-[var(--color-border-muted)] bg-[var(--color-background-secondary)] pl-[var(--space-2)]">
             {hasTabs ? <CanvasTabBar /> : <div />}
-            <PreviewToolbar />
+            <PreviewToolbar
+              onToggleHistory={() => setShowHistory((v) => !v)}
+              historyOpen={showHistory}
+              showCodeView={showCodeView}
+              onToggleCodeView={() => setShowCodeView((v) => !v)}
+            />
           </div>
         )}
+        <PageTabBar />
         <CanvasErrorBar />
         <div className="relative flex-1 overflow-hidden">
-          {body}
-          {previewHtml ? <TweakPanel iframeRef={iframeRef} /> : null}
+          {showCodeView && previewHtml ? (
+            <CodeViewPanel html={previewHtml} isGenerating={isGenerating} onSave={setPreviewHtml} />
+          ) : (
+            body
+          )}
+          {!showCodeView && previewHtml ? <TweakPanel iframeRef={iframeRef} /> : null}
+          {showHistory ? <HistoryPanel onClose={() => setShowHistory(false)} /> : null}
         </div>
+        <ConsolePanel />
         {commentBubble && interactionMode === 'comment'
           ? (() => {
               const liveForBubble = liveRects[commentBubble.selector];
@@ -630,3 +718,67 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
     </div>
   );
 }
+
+/* ── Code view panel ─────────────────────────────────────────────────── */
+
+interface CodeViewPanelProps {
+  html: string;
+  isGenerating: boolean;
+  onSave: (html: string) => void;
+}
+
+function CodeViewPanel({ html, isGenerating, onSave }: CodeViewPanelProps) {
+  const [draft, setDraft] = useState(html);
+  const [saved, setSaved] = useState(false);
+  const dirty = draft !== html;
+
+  // Keep draft in sync when html changes externally (e.g. agent streaming)
+  useEffect(() => {
+    setDraft(html);
+  }, [html]);
+
+  function handleSave(): void {
+    onSave(draft);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 1500);
+  }
+
+  function handleKeyDown(e: import('react').KeyboardEvent): void {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      if (!isGenerating) handleSave();
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-[var(--color-background-secondary)]">
+      {isGenerating ? (
+        <div className="flex items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-1_5)] text-[11.5px] bg-[color-mix(in_srgb,var(--color-accent)_8%,transparent)] border-b border-[var(--color-accent)]/20 text-[var(--color-text-secondary)]">
+          <span className="w-[7px] h-[7px] rounded-full bg-[var(--color-accent)] animate-pulse shrink-0" />
+          Code view is read-only while the agent is running.
+        </div>
+      ) : dirty ? (
+        <div className="flex items-center justify-between gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-1_5)] text-[11.5px] bg-[color-mix(in_srgb,#f59e0b_10%,transparent)] border-b border-[#f59e0b]/30 text-[var(--color-text-secondary)]">
+          <span>Unsaved edits — save to apply to preview.</span>
+          <button
+            type="button"
+            onClick={handleSave}
+            className="shrink-0 inline-flex items-center h-[22px] px-[10px] rounded-[var(--radius-sm)] text-[11px] font-medium bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors duration-100"
+          >
+            {saved ? 'Saved ✓' : 'Save (⌘S)'}
+          </button>
+        </div>
+      ) : null}
+      <textarea
+        value={draft}
+        onChange={(e) => !isGenerating && setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        readOnly={isGenerating}
+        spellCheck={false}
+        className="flex-1 w-full resize-none border-0 bg-transparent p-[var(--space-4)] text-[12.5px] leading-[1.6] font-[ui-monospace,Menlo,monospace] text-[var(--color-text-primary)] outline-none focus:outline-none"
+        style={{ tabSize: 2 }}
+        aria-label="HTML source"
+      />
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
index 58cc9a66..3e81710e 100644
--- a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
@@ -1,10 +1,17 @@
 import { useT } from '@open-codesign/i18n';
-import { Download, MessageSquare } from 'lucide-react';
+import { Clock, Code2, Download, MessageSquare } from 'lucide-react';
 import { type ReactElement, useEffect, useRef, useState } from 'react';
 import type { ExportFormat } from '../../../preload/index';
 import type { PreviewViewport } from '../store';
 import { useCodesignStore } from '../store';
 
+export interface PreviewToolbarExternalProps {
+  onToggleHistory: () => void;
+  historyOpen: boolean;
+  showCodeView?: boolean;
+  onToggleCodeView?: () => void;
+}
+
 interface ExportItem {
   format: ExportFormat;
   label: string;
@@ -14,7 +21,7 @@ interface ExportItem {
 
 const ZOOM_OPTIONS = [50, 75, 90, 100, 110, 125, 150, 175, 200] as const;
 
-export function PreviewToolbar(): ReactElement {
+export function PreviewToolbar({ onToggleHistory, historyOpen, showCodeView, onToggleCodeView }: PreviewToolbarExternalProps): ReactElement {
   const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
   const exportActive = useCodesignStore((s) => s.exportActive);
@@ -97,6 +104,38 @@ export function PreviewToolbar(): ReactElement {
         </output>
       )}
 
+      {onToggleCodeView ? (
+        <button
+          type="button"
+          disabled={disabled}
+          aria-pressed={showCodeView}
+          onClick={onToggleCodeView}
+          className={`inline-flex items-center gap-[6px] h-[26px] px-[10px] text-[12px] transition-[background-color,color,transform] duration-[var(--duration-faster)] active:scale-[var(--scale-press-down)] disabled:opacity-40 disabled:pointer-events-none ${
+            showCodeView
+              ? 'text-[var(--color-accent)]'
+              : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
+          }`}
+        >
+          <Code2 className="w-3.5 h-3.5" aria-hidden="true" />
+          Code
+        </button>
+      ) : null}
+
+      <button
+        type="button"
+        disabled={disabled}
+        aria-pressed={historyOpen}
+        onClick={onToggleHistory}
+        className={`inline-flex items-center gap-[6px] h-[26px] px-[10px] text-[12px] transition-[background-color,color,transform] duration-[var(--duration-faster)] active:scale-[var(--scale-press-down)] disabled:opacity-40 disabled:pointer-events-none ${
+          historyOpen
+            ? 'text-[var(--color-accent)]'
+            : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
+        }`}
+      >
+        <Clock className="w-3.5 h-3.5" aria-hidden="true" />
+        History
+      </button>
+
       <button
         type="button"
         disabled={disabled}
diff --git a/apps/desktop/src/renderer/src/components/Settings.tsx b/apps/desktop/src/renderer/src/components/Settings.tsx
index 3524b7ad..850eb6ae 100644
--- a/apps/desktop/src/renderer/src/components/Settings.tsx
+++ b/apps/desktop/src/renderer/src/components/Settings.tsx
@@ -21,8 +21,10 @@ import {
   Pencil,
   Plus,
   RotateCcw,
+  Search,
   Sliders,
   Trash2,
+  X,
   Zap,
 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -37,6 +39,11 @@ import { recordAction } from '../lib/action-timeline';
 import { useCodesignStore } from '../store';
 import { AddCustomProviderModal } from './AddCustomProviderModal';
 import { ChatgptLoginCard } from './ChatgptLoginCard';
+import {
+  MODEL_LIST_SEARCH_THRESHOLD,
+  filterModels,
+  mergeActiveModelIfMissing,
+} from './ModelSwitcher';
 import { DiagnosticsPanel } from './settings/DiagnosticsPanel';
 
 type Tab = 'models' | 'images' | 'appearance' | 'storage' | 'diagnostics' | 'advanced';
@@ -1931,6 +1938,16 @@ function ModelsTab() {
               setShowAddMenu(false);
               void handleAddOllama();
             }}
+            onAddOpenRouter={() => {
+              setShowAddMenu(false);
+              setCustomProviderPreset({
+                name: 'OpenRouter',
+                baseUrl: 'https://openrouter.ai/api/v1',
+                wire: 'openai-chat',
+                defaultModel: SHORTLIST.openrouter.defaultPrimary,
+              });
+              setShowAddCustom(true);
+            }}
             onAddCustom={() => {
               setShowAddMenu(false);
               setShowAddCustom(true);
@@ -1978,11 +1995,288 @@ function ModelsTab() {
             ))}
           </div>
         )}
+
+        <ModelRoutingSection config={config} setConfig={setConfig} />
       </div>
     </>
   );
 }
 
+// ─── Model routing section ────────────────────────────────────────────────────
+
+function ModelRoutingSection({
+  config,
+  setConfig,
+}: {
+  config: OnboardingState | null;
+  setConfig: (next: OnboardingState) => void;
+}) {
+  const t = useT();
+  const pushToast = useCodesignStore((s) => s.pushToast);
+  const [fastModel, setFastModel] = useState<string>(config?.modelFast ?? '');
+  const [saving, setSaving] = useState(false);
+  const [availableModels, setAvailableModels] = useState<string[]>([]);
+  const [listLoading, setListLoading] = useState(() => Boolean(config?.provider));
+  const [query, setQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const notInListSuffix = t('settings.providers.activeNotInList');
+
+  useEffect(() => {
+    setFastModel(config?.modelFast ?? '');
+  }, [config?.modelFast]);
+
+  useEffect(() => {
+    if (!window.codesign?.models?.listForProvider || !config?.provider) {
+      setQuery('');
+      setAvailableModels([]);
+      setListLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setQuery('');
+    setListLoading(true);
+    setAvailableModels([]);
+    void window.codesign.models.listForProvider(config.provider).then((res) => {
+      if (cancelled) return;
+      setListLoading(false);
+      if (res.ok) setAvailableModels(res.models);
+      else setAvailableModels([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [config?.provider]);
+
+  const modelIdsForList = useMemo(
+    () => mergeActiveModelIfMissing(availableModels, fastModel),
+    [availableModels, fastModel],
+  );
+  const showSearch = modelIdsForList.length > MODEL_LIST_SEARCH_THRESHOLD;
+  const filteredModelIds = useMemo(
+    () => filterModels(modelIdsForList, query),
+    [modelIdsForList, query],
+  );
+
+  function modelLabel(m: string) {
+    return m && !availableModels.includes(m) ? `${m} ${notInListSuffix}` : m;
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    window.addEventListener('mousedown', onDown);
+    window.addEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('mousedown', onDown);
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) setQuery('');
+  }, [open]);
+
+  async function handleSave() {
+    if (!window.codesign) return;
+    setSaving(true);
+    try {
+      const next = await window.codesign.config.setFastModel(fastModel.trim() || null);
+      setConfig(next);
+      pushToast({ variant: 'success', title: t('settings.modelRouting.saved') });
+    } catch (err) {
+      pushToast({
+        variant: 'error',
+        title: t('settings.modelRouting.saveFailed'),
+        description: cleanIpcError(err) || t('settings.common.unknownError'),
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const buttonLabel = fastModel || t('settings.modelRouting.usePrimary');
+
+  return (
+    <div className="pt-4 border-t border-[var(--color-border-subtle)] space-y-3">
+      <div>
+        <SectionTitle>{t('settings.modelRouting.title')}</SectionTitle>
+        <p className="text-[var(--text-xs)] text-[var(--color-text-muted)] mt-1 leading-[var(--leading-body)]">
+          {t('settings.modelRouting.hint')}
+        </p>
+      </div>
+
+      <Row
+        label={t('settings.modelRouting.primaryLabel')}
+        hint={t('settings.modelRouting.primaryHint')}
+      >
+        <span className="text-[var(--text-sm)] text-[var(--color-text-secondary)] font-mono">
+          {config?.modelPrimary ?? '—'}
+        </span>
+      </Row>
+
+      <Row label={t('settings.modelRouting.fastLabel')} hint={t('settings.modelRouting.fastHint')}>
+        <div className="flex items-start gap-2">
+          {listLoading && availableModels.length === 0 && config?.provider ? (
+            <div className="flex h-8 w-80 max-w-full items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)]">
+              <Loader2 className="h-3 w-3 shrink-0 animate-spin text-[var(--color-text-muted)]" />
+            </div>
+          ) : availableModels.length > 0 ? (
+            <div ref={rootRef} className="relative">
+              <button
+                type="button"
+                onClick={() => setOpen((v) => !v)}
+                className="flex min-w-[200px] items-center gap-[var(--space-2)] rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-[var(--space-2_5)] py-[var(--space-1)] select-none hover:bg-[var(--color-surface-hover)] transition-colors"
+              >
+                <span
+                  className="text-[var(--text-xs)] text-[var(--color-text-primary)] truncate"
+                  style={{ fontFamily: 'var(--font-mono)' }}
+                >
+                  {buttonLabel}
+                </span>
+                <ChevronDown
+                  className={`h-3 w-3 shrink-0 transition-transform ${open ? 'rotate-180' : ''} text-[var(--color-text-muted)]`}
+                  aria-hidden
+                />
+              </button>
+              {open ? (
+                <div className="absolute z-50 top-full mt-[var(--space-1)] left-0 min-w-[260px] overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface-elevated)] shadow-[var(--shadow-card)]">
+                  {showSearch && (
+                    <div className="relative border-b border-[var(--color-border-muted)] p-[var(--space-2)]">
+                      <Search
+                        className="pointer-events-none absolute left-[calc(var(--space-2)+var(--space-2))] top-1/2 h-[var(--size-icon-xs)] w-[var(--size-icon-xs)] -translate-y-1/2 text-[var(--color-text-muted)]"
+                        aria-hidden
+                      />
+                      <input
+                        ref={searchInputRef}
+                        type="text"
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder={t('topbar.modelSwitcher.searchPlaceholder', {
+                          defaultValue: 'Search models…',
+                        })}
+                        aria-label={t('topbar.modelSwitcher.searchAriaLabel', {
+                          defaultValue: 'Filter models by name',
+                        })}
+                        className="h-[var(--size-control-xs)] w-full rounded-[var(--radius-sm)] border-0 bg-transparent pl-[calc(var(--space-2)+var(--size-icon-xs)+var(--space-1_5))] pr-[calc(var(--space-2)+var(--size-icon-sm))] text-[var(--text-xs)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]"
+                        style={{ fontFamily: 'var(--font-mono)' }}
+                      />
+                      {query.length > 0 && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setQuery('');
+                            searchInputRef.current?.focus();
+                          }}
+                          aria-label={t('topbar.modelSwitcher.clearSearch', {
+                            defaultValue: 'Clear search',
+                          })}
+                          className="absolute right-[calc(var(--space-2)+var(--space-1))] top-1/2 inline-flex h-[var(--size-icon-sm)] w-[var(--size-icon-sm)] -translate-y-1/2 items-center justify-center rounded-full text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
+                        >
+                          <X
+                            className="h-[var(--size-icon-xs)] w-[var(--size-icon-xs)]"
+                            aria-hidden
+                          />
+                        </button>
+                      )}
+                    </div>
+                  )}
+                  <div className="max-h-[280px] overflow-y-auto py-[var(--space-1)]">
+                    {listLoading && availableModels.length === 0 ? (
+                      <div className="flex items-center justify-center py-[var(--space-3)]">
+                        <Loader2 className="h-4 w-4 animate-spin text-[var(--color-text-muted)]" />
+                      </div>
+                    ) : (
+                      <>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setFastModel('');
+                            setOpen(false);
+                          }}
+                          className={`relative w-full py-[var(--space-1_5)] pl-[var(--space-3)] pr-[var(--space-3)] text-left text-[12px] transition-colors ${
+                            fastModel === ''
+                              ? 'bg-[var(--color-surface-hover)] font-medium text-[var(--color-text-primary)]'
+                              : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
+                          }`}
+                        >
+                          {fastModel === '' && (
+                            <span
+                              aria-hidden
+                              className="absolute bottom-[3px] left-0 top-[3px] w-[2px] rounded-r-full bg-[var(--color-accent)]"
+                            />
+                          )}
+                          {t('settings.modelRouting.usePrimary')}
+                        </button>
+                        {filteredModelIds.length > 0 ? (
+                          filteredModelIds.map((m) => {
+                            const isActive = m === fastModel;
+                            return (
+                              <button
+                                key={m}
+                                type="button"
+                                onClick={() => {
+                                  setFastModel(m);
+                                  setOpen(false);
+                                }}
+                                className={`relative w-full py-[var(--space-1_5)] pl-[var(--space-3)] pr-[var(--space-3)] text-left text-[12px] transition-colors ${
+                                  isActive
+                                    ? 'bg-[var(--color-surface-hover)] font-medium text-[var(--color-text-primary)]'
+                                    : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
+                                }`}
+                                style={{ fontFamily: 'var(--font-mono)' }}
+                              >
+                                {isActive && (
+                                  <span
+                                    aria-hidden
+                                    className="absolute bottom-[3px] left-0 top-[3px] w-[2px] rounded-r-full bg-[var(--color-accent)]"
+                                  />
+                                )}
+                                {modelLabel(m)}
+                              </button>
+                            );
+                          })
+                        ) : availableModels.length > 0 && query.trim().length > 0 ? (
+                          <div className="px-[var(--space-3)] py-[var(--space-2)] text-[var(--text-xs)] text-[var(--color-text-muted)]">
+                            {t('topbar.modelSwitcher.noMatches', {
+                              defaultValue: 'No models match "{{query}}"',
+                              query: query.trim(),
+                            })}
+                          </div>
+                        ) : null}
+                      </>
+                    )}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          ) : config?.provider ? (
+            <input
+              type="text"
+              value={fastModel}
+              onChange={(e) => setFastModel(e.target.value)}
+              placeholder={t('settings.modelRouting.fastPlaceholder')}
+              className="h-8 w-56 max-w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-[var(--text-sm)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
+            />
+          ) : (
+            <span className="text-[var(--text-sm)] text-[var(--color-text-muted)]">—</span>
+          )}
+          <Button size="sm" variant="secondary" onClick={() => void handleSave()} disabled={saving}>
+            {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Check className="h-3 w-3" />}
+            {t('settings.modelRouting.saveButton')}
+          </Button>
+        </div>
+      </Row>
+    </div>
+  );
+}
+
 // ─── Appearance tab ───────────────────────────────────────────────────────────
 
 /**
@@ -2602,6 +2896,7 @@ interface AddProviderMenuProps {
   onImportCodex: () => void;
   onImportClaudeCode: () => void;
   onAddOllama: () => void;
+  onAddOpenRouter: () => void;
   onAddCustom: () => void;
   onAddCliProxyApi: () => void;
 }
@@ -2614,6 +2909,7 @@ function AddProviderMenu({
   onImportCodex,
   onImportClaudeCode,
   onAddOllama,
+  onAddOpenRouter,
   onAddCustom,
   onAddCliProxyApi,
 }: AddProviderMenuProps) {
@@ -2663,6 +2959,15 @@ function AddProviderMenu({
       disabled: hasClaudeCodeImported,
       onClick: onImportClaudeCode,
     },
+    {
+      key: 'openrouter',
+      label: 'OpenRouter',
+      desc: t('settings.providers.import.openrouterMenuDesc', {
+        defaultValue: 'Access 200+ models with one API key',
+      }),
+      disabled: false,
+      onClick: onAddOpenRouter,
+    },
     {
       key: 'ollama',
       label: t('settings.providers.import.ollamaMenu'),
diff --git a/apps/desktop/src/renderer/src/components/Sidebar.tsx b/apps/desktop/src/renderer/src/components/Sidebar.tsx
index 29d890d7..1c00c157 100644
--- a/apps/desktop/src/renderer/src/components/Sidebar.tsx
+++ b/apps/desktop/src/renderer/src/components/Sidebar.tsx
@@ -4,12 +4,13 @@ import { FolderOpen, Link2, Paperclip, X } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { useAgentStream } from '../hooks/useAgentStream';
 import { useCodesignStore } from '../store';
-import { ModelSwitcher } from './ModelSwitcher';
 import { AddMenu } from './chat/AddMenu';
 import { ChatMessageList } from './chat/ChatMessageList';
 import { CommentChipBar } from './chat/CommentChipBar';
 import { EmptyState } from './chat/EmptyState';
+import { GenerationStatusBar } from './chat/GenerationStatusBar';
 import { PromptInput, type PromptInputHandle } from './chat/PromptInput';
+import { StickyTodoHeader } from './chat/StickyTodoHeader';
 
 export interface SidebarProps {
   prompt: string;
@@ -78,7 +79,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
   const t = useT();
   const config = useCodesignStore((s) => s.config);
   const isGenerating = useCodesignStore(
-    (s) => s.isGenerating && s.generatingDesignId === s.currentDesignId,
+    (s) => s.currentDesignId !== null && s.activeGenerations.has(s.currentDesignId),
   );
   const cancelGeneration = useCodesignStore((s) => s.cancelGeneration);
   const inputFiles = useCodesignStore((s) => s.inputFiles);
@@ -88,7 +89,6 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
   const removeInputFile = useCodesignStore((s) => s.removeInputFile);
   const pickDesignSystemDirectory = useCodesignStore((s) => s.pickDesignSystemDirectory);
   const clearDesignSystem = useCodesignStore((s) => s.clearDesignSystem);
-  const lastUsage = useCodesignStore((s) => s.lastUsage);
 
   const chatMessages = useCodesignStore((s) => s.chatMessages);
   const chatLoaded = useCodesignStore((s) => s.chatLoaded);
@@ -97,8 +97,6 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
   const loadChatForCurrentDesign = useCodesignStore((s) => s.loadChatForCurrentDesign);
   const currentDesignId = useCodesignStore((s) => s.currentDesignId);
   const designs = useCodesignStore((s) => s.designs);
-  const sidebarCollapsed = useCodesignStore((s) => s.sidebarCollapsed);
-  const setSidebarCollapsed = useCodesignStore((s) => s.setSidebarCollapsed);
 
   // Mount useAgentStream here so streaming events route into the chat
   // as soon as the Sidebar is in the tree — matches the lifecycle of
@@ -121,10 +119,6 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
     }
   }, [currentDesignId, chatLoaded, loadChatForCurrentDesign]);
 
-  const activeModelLine =
-    config?.hasKey && config.modelPrimary ? config.modelPrimary : t('sidebar.chat.noModel');
-  const lastTokens = lastUsage ? lastUsage.inputTokens + lastUsage.outputTokens : null;
-
   return (
     <aside
       className="flex flex-col h-full overflow-x-hidden border-r border-[var(--color-border)] bg-[var(--color-background-secondary)]"
@@ -135,6 +129,7 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
       <div className="h-[var(--space-3)] shrink-0" />
 
       <>
+        <StickyTodoHeader />
         {/* Chat scroll area */}
         <div className="flex-1 overflow-y-auto px-[var(--space-4)] py-[var(--space-4)]">
           <ChatMessageList
@@ -148,10 +143,16 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
                 : null
             }
             empty={<EmptyState onPickStarter={handlePickStarter} />}
+            onEditMessage={(text) => {
+              setPrompt(text);
+              promptInputRef.current?.focus();
+            }}
           />
         </div>
 
-        {/* Skill chips + prompt input + model/tokens line */}
+        <GenerationStatusBar />
+
+        {/* Skill chips + prompt input */}
         <div className="border-t border-[var(--color-border-subtle)] px-[var(--space-4)] pt-[var(--space-3)] pb-[var(--space-3)] space-y-[10px] bg-[var(--color-background-secondary)]">
           <CommentChipBar />
           <PromptInput
@@ -228,17 +229,6 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
               />
             }
           />
-          <div className="flex items-center justify-between gap-[var(--space-2)] px-[2px]">
-            <ModelSwitcher variant="sidebar" />
-            {lastTokens !== null ? (
-              <span
-                className="shrink-0 tabular-nums text-[10.5px] text-[var(--color-text-muted)]"
-                style={{ fontFamily: 'var(--font-mono)' }}
-              >
-                {t('sidebar.chat.tokensLine', { count: lastTokens })}
-              </span>
-            ) : null}
-          </div>
         </div>
       </>
     </aside>
diff --git a/apps/desktop/src/renderer/src/components/TopBar.tsx b/apps/desktop/src/renderer/src/components/TopBar.tsx
index d7a722cd..bb13544d 100644
--- a/apps/desktop/src/renderer/src/components/TopBar.tsx
+++ b/apps/desktop/src/renderer/src/components/TopBar.tsx
@@ -3,9 +3,8 @@ import { IconButton, Wordmark } from '@open-codesign/ui';
 import { AlertCircle, ArrowLeft, FolderOpen, Settings as SettingsIcon } from 'lucide-react';
 import { type CSSProperties, useEffect } from 'react';
 import { type HubTab, useCodesignStore } from '../store';
-import { LanguageToggle } from './LanguageToggle';
 import { ModelSwitcher } from './ModelSwitcher';
-import { ThemeToggle } from './ThemeToggle';
+import { WindowControls } from './WindowControls';
 
 const dragStyle = { WebkitAppRegion: 'drag' } as CSSProperties;
 const noDragStyle = { WebkitAppRegion: 'no-drag' } as CSSProperties;
@@ -26,8 +25,6 @@ export function TopBar() {
   const refreshDiagnosticEvents = useCodesignStore((s) => s.refreshDiagnosticEvents);
   const openSettingsTab = useCodesignStore((s) => s.openSettingsTab);
 
-  // Pull-based: refresh the diagnostic counter on mount so a page reload
-  // surfaces errors recorded while the window was closed. No polling.
   // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
   useEffect(() => {
     void refreshDiagnosticEvents();
@@ -35,131 +32,135 @@ export function TopBar() {
 
   return (
     <header
-      className="h-[var(--size-titlebar-height)] shrink-0 flex items-center justify-between pr-[var(--space-6)] select-none"
+      className="h-[var(--size-titlebar-height)] shrink-0 flex items-center justify-between select-none"
       style={{
         ...dragStyle,
         paddingLeft: 'var(--space-4)',
+        paddingRight: '0px',
         borderBottom: '1px solid oklch(0.22 0.025 50 / 0.08)',
         background: 'var(--color-background)',
       }}
     >
-      <div className="flex items-center gap-[var(--space-8)] min-w-0 h-full" style={noDragStyle}>
-        <Wordmark badge={`v${__APP_VERSION__}`} size="md" />
+      <div className="flex items-center gap-[var(--space-4)] min-w-0 h-full">
+        <div style={dragStyle}>
+          <Wordmark badge={`v${__APP_VERSION__}`} size="sm" />
+        </div>
 
-        {view === 'settings' ? (
-          <div className="flex items-center gap-[var(--space-2)]">
-            <span style={{ color: 'oklch(0.22 0.025 50 / 0.2)' }}>/</span>
-            <button
-              type="button"
-              onClick={() => setView(previousView === 'settings' ? 'hub' : previousView)}
-              aria-label={t('topbar.closeSettings')}
-              className="inline-flex items-center gap-[6px] rounded-[var(--radius-sm)] px-[var(--space-2)] py-[var(--space-1)] transition-colors duration-[var(--duration-faster)]"
-              style={{
-                fontFamily: 'var(--font-display)',
-                fontSize: '19px',
-                letterSpacing: '-0.015em',
-                color: 'var(--color-text-secondary)',
-              }}
+        <div style={noDragStyle}>
+          {view === 'settings' ? (
+            <div className="flex items-center gap-[var(--space-1)]">
+              <span style={{ color: 'oklch(0.22 0.025 50 / 0.2)' }}>/</span>
+              <button
+                type="button"
+                onClick={() => setView(previousView === 'settings' ? 'hub' : previousView)}
+                aria-label={t('topbar.closeSettings')}
+                className="inline-flex items-center gap-[4px] rounded-[var(--radius-sm)] px-[var(--space-1_5)] py-[var(--space-0_5)] transition-colors duration-[var(--duration-faster)]"
+                style={{
+                  fontFamily: 'var(--font-display)',
+                  fontSize: '14px',
+                  letterSpacing: '-0.01em',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                <ArrowLeft className="w-3.5 h-3.5 shrink-0" aria-hidden />
+                <span>{t('topbar.settingsLabel')}</span>
+              </button>
+            </div>
+          ) : view === 'hub' ? (
+            <nav
+              className="flex items-center gap-[var(--space-4)] h-full"
+              aria-label={t('hub.tabs.your')}
             >
-              <ArrowLeft className="w-4 h-4 shrink-0" aria-hidden />
-              <span>{t('topbar.settingsLabel')}</span>
-            </button>
-          </div>
-        ) : view === 'hub' ? (
-          <nav
-            className="flex items-center gap-[var(--space-8)] h-full"
-            aria-label={t('hub.tabs.your')}
-          >
-            {HUB_TABS.map((tab) => {
-              const active = tab === hubTab;
-              return (
-                <button
-                  key={tab}
-                  type="button"
-                  onClick={() => setHubTab(tab)}
-                  aria-current={active ? 'page' : undefined}
-                  className="relative h-full inline-flex items-center transition-colors duration-[var(--duration-faster)]"
-                  style={{
-                    fontFamily: 'var(--font-display)',
-                    fontSize: '19px',
-                    fontWeight: active ? 500 : 400,
-                    color: active ? 'var(--color-text-primary)' : 'var(--color-text-muted)',
-                    letterSpacing: '-0.015em',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!active) e.currentTarget.style.color = 'var(--color-text-secondary)';
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!active) e.currentTarget.style.color = 'var(--color-text-muted)';
-                  }}
-                >
-                  {t(`hub.tabs.${tab}`)}
-                  {active ? (
-                    <span
-                      aria-hidden
-                      className="absolute left-0 right-0 bottom-[-1px] h-[2px] rounded-full"
-                      style={{ background: 'var(--color-accent)' }}
-                    />
-                  ) : null}
-                </button>
-              );
-            })}
-          </nav>
-        ) : (
-          <div className="flex items-center gap-[var(--space-2)]">
-            <span style={{ color: 'oklch(0.22 0.025 50 / 0.2)' }}>/</span>
+              {HUB_TABS.map((tab) => {
+                const active = tab === hubTab;
+                return (
+                  <button
+                    key={tab}
+                    type="button"
+                    onClick={() => setHubTab(tab)}
+                    aria-current={active ? 'page' : undefined}
+                    className="relative h-full inline-flex items-center transition-colors duration-[var(--duration-faster)]"
+                    style={{
+                      fontFamily: 'var(--font-display)',
+                      fontSize: '14px',
+                      fontWeight: active ? 500 : 400,
+                      color: active ? 'var(--color-text-primary)' : 'var(--color-text-muted)',
+                      letterSpacing: '-0.01em',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!active) e.currentTarget.style.color = 'var(--color-text-secondary)';
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!active) e.currentTarget.style.color = 'var(--color-text-muted)';
+                    }}
+                  >
+                    {t(`hub.tabs.${tab}`)}
+                    {active ? (
+                      <span
+                        aria-hidden
+                        className="absolute left-0 right-0 bottom-[-1px] h-[2px] rounded-full"
+                        style={{ background: 'var(--color-accent)' }}
+                      />
+                    ) : null}
+                  </button>
+                );
+              })}
+            </nav>
+          ) : (
+            <div className="flex items-center gap-[var(--space-1)]">
+              <span style={{ color: 'oklch(0.22 0.025 50 / 0.2)' }}>/</span>
+              <button
+                type="button"
+                onClick={() => setView('hub')}
+                aria-label={t('topbar.openMyDesigns')}
+                className="inline-flex items-center gap-[4px] rounded-[var(--radius-sm)] px-[var(--space-1_5)] py-[var(--space-0_5)] transition-colors duration-[var(--duration-faster)] max-w-[400px]"
+                style={{
+                  fontFamily: 'var(--font-display)',
+                  fontSize: '14px',
+                  letterSpacing: '-0.01em',
+                  color: 'var(--color-text-secondary)',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = 'var(--color-text-primary)';
+                  e.currentTarget.style.background = 'var(--color-surface-hover)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = 'var(--color-text-secondary)';
+                  e.currentTarget.style.background = 'transparent';
+                }}
+              >
+                <FolderOpen className="w-3.5 h-3.5 shrink-0" aria-hidden />
+                <span className="truncate" title={currentDesign?.name ?? ''}>
+                  {currentDesign?.name ?? t('sidebar.noDesign')}
+                </span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center h-full" style={noDragStyle}>
+        <div className="flex items-center gap-[var(--space-2)] px-[var(--space-3)]">
+          <ModelSwitcher variant="topbar" />
+          {unreadErrorCount > 0 ? (
             <button
               type="button"
-              onClick={() => setView('hub')}
-              aria-label={t('topbar.openMyDesigns')}
-              className="inline-flex items-center gap-[6px] rounded-[var(--radius-sm)] px-[var(--space-2)] py-[var(--space-1)] transition-colors duration-[var(--duration-faster)] max-w-[520px]"
-              style={{
-                fontFamily: 'var(--font-display)',
-                fontSize: '19px',
-                letterSpacing: '-0.015em',
-                color: 'var(--color-text-secondary)',
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.color = 'var(--color-text-primary)';
-                e.currentTarget.style.background = 'var(--color-surface-hover)';
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.color = 'var(--color-text-secondary)';
-                e.currentTarget.style.background = 'transparent';
-              }}
+              onClick={() => openSettingsTab('diagnostics')}
+              aria-label={t('topbar.unreadErrors', { count: unreadErrorCount })}
+              title={t('topbar.unreadErrors', { count: unreadErrorCount })}
+              className="inline-flex items-center gap-1 h-6 px-1.5 rounded-[var(--radius-sm)] border border-[var(--color-error)]/30 text-[var(--color-error)] hover:bg-[var(--color-error)]/10 transition-colors"
             >
-              <FolderOpen className="w-4 h-4 shrink-0" aria-hidden />
-              <span className="truncate" title={currentDesign?.name ?? ''}>
-                {currentDesign?.name ?? t('sidebar.noDesign')}
+              <AlertCircle className="w-3 h-3" aria-hidden />
+              <span className="text-[10px] font-semibold">
+                {unreadErrorCount > 99 ? '99+' : unreadErrorCount}
               </span>
             </button>
-          </div>
-        )}
-      </div>
-
-      <div className="flex items-center gap-[var(--space-3)]" style={noDragStyle}>
-        <ModelSwitcher variant="topbar" />
-        {unreadErrorCount > 0 ? (
-          <button
-            type="button"
-            onClick={() => openSettingsTab('diagnostics')}
-            aria-label={t('topbar.unreadErrors', { count: unreadErrorCount })}
-            title={t('topbar.unreadErrors', { count: unreadErrorCount })}
-            className="inline-flex items-center gap-1 h-7 px-2 rounded-[var(--radius-sm)] border border-[var(--color-error)]/30 text-[var(--color-error)] hover:bg-[var(--color-error)]/10 transition-colors"
-          >
-            <AlertCircle className="w-3.5 h-3.5" aria-hidden />
-            <span className="text-[var(--text-xs)] font-semibold">
-              {unreadErrorCount > 99 ? '99+' : unreadErrorCount}
-            </span>
-          </button>
-        ) : null}
-        <div className="flex items-center gap-[2px]" style={{ marginLeft: 'var(--space-1)' }}>
-          <LanguageToggle />
-          <ThemeToggle />
-          <IconButton label={t('settings.title')} size="md" onClick={() => setView('settings')}>
-            <SettingsIcon className="w-[18px] h-[18px]" />
+          ) : null}
+          <IconButton label={t('settings.title')} size="sm" onClick={() => setView('settings')}>
+            <SettingsIcon className="w-4 h-4" />
           </IconButton>
         </div>
+        <WindowControls />
       </div>
     </header>
   );
diff --git a/apps/desktop/src/renderer/src/components/WindowControls.tsx b/apps/desktop/src/renderer/src/components/WindowControls.tsx
new file mode 100644
index 00000000..7bb7975c
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/WindowControls.tsx
@@ -0,0 +1,89 @@
+import { type CSSProperties, useEffect, useState } from 'react';
+
+export function WindowControls() {
+  const [maximized, setMaximized] = useState(false);
+
+  useEffect(() => {
+    function onResize() {
+      const electron = (window as unknown as { process: { platform: string } }).process;
+      const isMac = electron?.platform === 'darwin';
+      if (isMac) return;
+      // Best-effort state tracking for Windows
+      setMaximized(
+        window.innerWidth >= screen.availWidth && window.innerHeight >= screen.availHeight,
+      );
+    }
+    window.addEventListener('resize', onResize);
+    onResize();
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const btn =
+    'inline-flex items-center justify-center h-full w-[46px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors';
+
+  return (
+    <div
+      className="flex items-center h-full"
+      style={{ WebkitAppRegion: 'no-drag' } as CSSProperties}
+    >
+      <button
+        type="button"
+        onClick={() => window.codesign?.minimize?.()}
+        className={btn}
+        aria-label="Minimize"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+          <rect y="4.5" width="10" height="1" rx="0.5" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        onClick={() => window.codesign?.maximize?.()}
+        className={btn}
+        aria-label={maximized ? 'Restore' : 'Maximize'}
+      >
+        {maximized ? (
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="0.8"
+          >
+            <rect x="1.5" y="3.5" width="5" height="5" rx="0.5" />
+            <path d="M3.5 3.5V2a0.5 0.5 0 0 1 0.5-0.5h4a0.5 0.5 0 0 1 0.5 0.5v4a0.5 0.5 0 0 1-0.5 0.5H6.5" />
+          </svg>
+        ) : (
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="0.8"
+          >
+            <rect x="0.5" y="0.5" width="9" height="9" rx="0.5" />
+          </svg>
+        )}
+      </button>
+      <button
+        type="button"
+        onClick={() => window.codesign?.close?.()}
+        className={`${btn} hover:bg-[var(--color-error)] hover:text-white`}
+        aria-label="Close"
+      >
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="0.8"
+        >
+          <path d="M1.5 1.5l7 7M8.5 1.5l-7 7" />
+        </svg>
+      </button>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/chat/AssistantText.tsx b/apps/desktop/src/renderer/src/components/chat/AssistantText.tsx
index 3db0feea..a3a3c71e 100644
--- a/apps/desktop/src/renderer/src/components/chat/AssistantText.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/AssistantText.tsx
@@ -1,4 +1,6 @@
 import { useT } from '@open-codesign/i18n';
+import { Check, Copy } from 'lucide-react';
+import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -10,8 +12,17 @@ interface AssistantTextProps {
 
 export function AssistantText({ text, streaming }: AssistantTextProps) {
   const t = useT();
+  const [copied, setCopied] = useState(false);
+
+  function handleCopy(): void {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    });
+  }
+
   return (
-    <div className="space-y-[var(--space-1_5)]">
+    <div className="group space-y-[var(--space-1_5)]">
       <div className="max-w-[90%] rounded-2xl rounded-bl-md bg-[var(--color-surface)] shadow-[0_1px_3px_rgba(0,0,0,0.06)] border border-[var(--color-border-muted)] px-[var(--space-3)] py-[var(--space-2)] text-[14px] leading-relaxed text-[var(--color-text-primary)] break-words codesign-prose">
         <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
       </div>
@@ -24,7 +35,24 @@ export function AssistantText({ text, streaming }: AssistantTextProps) {
           <span className="codesign-stream-dot" style={{ animationDelay: '150ms' }} />
           <span className="codesign-stream-dot" style={{ animationDelay: '300ms' }} />
         </div>
-      ) : null}
+      ) : (
+        <div className="flex items-center gap-[var(--space-1)] pl-[var(--space-1)] opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+          <button
+            type="button"
+            onClick={handleCopy}
+            aria-label={copied ? t('settings.common.copied') : t('settings.common.copy')}
+            title={copied ? t('settings.common.copied') : t('settings.common.copy')}
+            className="inline-flex items-center gap-[4px] h-[22px] px-[6px] rounded-[var(--radius-sm)] text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-100"
+          >
+            {copied ? (
+              <Check className="w-[12px] h-[12px]" aria-hidden />
+            ) : (
+              <Copy className="w-[12px] h-[12px]" aria-hidden />
+            )}
+            {copied ? t('settings.common.copied') : t('settings.common.copy')}
+          </button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx b/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx
index 5060e58e..8f6ccbdb 100644
--- a/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx
@@ -1,23 +1,25 @@
 import { useT } from '@open-codesign/i18n';
 import type { ChatMessageRow, ChatToolCallPayload } from '@open-codesign/shared';
-import { FileText } from 'lucide-react';
-import { useEffect, useRef } from 'react';
+import { Check, ChevronDown, ChevronRight, FileText, Loader } from 'lucide-react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { useCodesignStore } from '../../store';
 import { AssistantText } from './AssistantText';
 import { UserMessage } from './UserMessage';
-import { InlineTodoList, WorkingCard } from './WorkingCard';
+import { WorkingCard } from './WorkingCard';
 
 interface ChatMessageListProps {
   messages: ChatMessageRow[];
   loading: boolean;
   isGenerating?: boolean;
-  empty?: React.ReactNode;
+  empty?: ReactNode;
   streamingText?: string | null;
   pendingToolCalls?: ChatToolCallPayload[];
+  onEditMessage?: (text: string) => void;
 }
 
 interface RenderItem {
   key: string;
-  node: React.ReactNode;
+  node: ReactNode;
 }
 
 /**
@@ -27,6 +29,9 @@ interface RenderItem {
  * artifact_delivered) which gives us a clean per-turn "Working" card followed
  * by a plain assistant prose bubble. SQLite-replayed history obeys the same
  * grouping because rows are read back in `seq` order.
+ *
+ * `set_todos` is not rendered here: the sticky todo header (Sidebar) shows the
+ * live checklist; chat history would duplicate it.
  */
 export function ChatMessageList({
   messages,
@@ -35,8 +40,10 @@ export function ChatMessageList({
   empty,
   streamingText,
   pendingToolCalls,
+  onEditMessage,
 }: ChatMessageListProps) {
   const t = useT();
+  const currentOperation = useCodesignStore((s) => s.currentOperation);
   const bottomRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const stickToBottomRef = useRef(true);
@@ -91,15 +98,8 @@ export function ChatMessageList({
     if (msg.kind === 'tool_call') {
       const call = (msg.payload as ChatToolCallPayload) ?? null;
       if (!call) continue;
-      // set_todos breaks the bucket — render the checklist exactly where the
-      // agent fired it so the chronological story stays intact (otherwise
-      // WorkingCard would pull the todos to the bottom of the cluster).
       if (call.toolName === 'set_todos') {
         flush();
-        items.push({
-          key: `todos-${msg.seq}`,
-          node: <InlineTodoList call={call} />,
-        });
         continue;
       }
       if (!bucket) bucket = { calls: [], firstSeq: msg.seq };
@@ -117,6 +117,7 @@ export function ChatMessageList({
           <UserMessage
             text={p?.text ?? ''}
             {...(p?.attachedSkills ? { attachedSkills: p.attachedSkills } : {})}
+            {...(onEditMessage ? { onEdit: onEditMessage } : {})}
           />
         ),
       });
@@ -168,81 +169,202 @@ export function ChatMessageList({
       {items.map((item) => (
         <div key={item.key}>{item.node}</div>
       ))}
-      {/* In-flight tool calls (memory only, not yet persisted). Same logic as
-          the persisted stream: set_todos breaks the cluster and renders inline
-          so the chronological position is preserved while the agent is still
-          mid-turn. */}
-      {pendingToolCalls && pendingToolCalls.length > 0 && (
-        <div key="pending-tools" className="space-y-[var(--space-1)]">
-          {(() => {
-            const groups: React.ReactNode[] = [];
-            let pendingBucket: ChatToolCallPayload[] = [];
-            const flushPending = (idx: number): void => {
-              if (pendingBucket.length === 0) return;
-              groups.push(<WorkingCard key={`p-cluster-${idx}`} calls={pendingBucket} />);
-              pendingBucket = [];
-            };
-            for (let i = 0; i < pendingToolCalls.length; i += 1) {
-              const c = pendingToolCalls[i];
-              if (!c) continue;
-              if (c.toolName === 'set_todos') {
-                flushPending(i);
-                groups.push(<InlineTodoList key={`p-todos-${i}`} call={c} />);
-                continue;
-              }
-              pendingBucket.push(c);
+      <LiveThinkingBlock
+        isGenerating={Boolean(isGenerating)}
+        pendingToolCalls={pendingToolCalls ?? []}
+        streamingText={streamingText ?? null}
+        messages={messages}
+        currentOperation={currentOperation}
+        t={t}
+      />
+      <div ref={bottomRef} />
+    </div>
+  );
+}
+
+/* ── Live thinking block ─────────────────────────────────────────────── */
+
+/* ── Planning view (set_todos inline) ─────────────────────────────────── */
+
+function PlanningView({
+  items,
+}: {
+  items: { text: string; status: 'pending' | 'in_progress' | 'completed' }[];
+}) {
+  return (
+    <div className="space-y-[3px]">
+      {items.map((item, i) => (
+        <div
+          key={`plan-${i}-${item.text.slice(0, 8)}`}
+          className="flex items-start gap-[6px] text-[12px] leading-[1.4]"
+        >
+          {item.status === 'completed' ? (
+            <span className="mt-[2px] inline-flex items-center justify-center w-[13px] h-[13px] rounded-[3px] bg-[var(--color-accent)] shrink-0">
+              <Check className="w-[9px] h-[9px] text-white" strokeWidth={3} />
+            </span>
+          ) : item.status === 'in_progress' ? (
+            <Loader className="mt-[2px] w-[13px] h-[13px] shrink-0 text-[var(--color-accent)] animate-spin" />
+          ) : (
+            <span className="mt-[2px] inline-block w-[13px] h-[13px] rounded-[3px] border border-[var(--color-border)] shrink-0" />
+          )}
+          <span
+            className={
+              item.status === 'completed'
+                ? 'line-through text-[var(--color-text-muted)]'
+                : item.status === 'in_progress'
+                  ? 'text-[var(--color-text-primary)] font-medium'
+                  : 'text-[var(--color-text-secondary)]'
             }
-            flushPending(pendingToolCalls.length);
-            return groups;
-          })()}
-        </div>
-      )}
-      {(() => {
-        if (!streamingText || streamingText.length === 0) return null;
-        // Defensive dedupe: if the most recent persisted assistant_text is
-        // already a prefix-equal/superset of the streaming buffer (the IPC
-        // turn_end persisted before the streaming reset landed), skip the
-        // ephemeral bubble to avoid showing the same prose twice.
-        const lastAssistant = [...messages].reverse().find((m) => m.kind === 'assistant_text');
-        const lastText =
-          (lastAssistant?.payload as { text?: string } | undefined)?.text?.trim() ?? '';
-        const streamingTrim = streamingText.trim();
-        if (lastText && (lastText === streamingTrim || lastText.startsWith(streamingTrim))) {
-          return null;
-        }
-        return (
-          <div key="streaming-assistant">
-            <AssistantText text={streamingText} streaming />
-          </div>
-        );
-      })()}
-      {(() => {
-        // "Agent is thinking" placeholder — shown only when generating and
-        // nothing has arrived yet (no streaming text, last message is the
-        // user's prompt). Bridges the silent gap between submit and first
-        // tool_call / assistant_text / error event.
-        if (!isGenerating) return null;
-        if (streamingText && streamingText.length > 0) return null;
-        const last = messages[messages.length - 1];
-        if (last?.kind !== 'user') return null;
-        return (
-          <div
-            key="thinking-placeholder"
-            className="inline-flex items-center gap-[var(--space-2)] rounded-2xl rounded-bl-md bg-[var(--color-surface)] border border-[var(--color-border-muted)] px-[var(--space-3)] py-[var(--space-2)] text-[12px] text-[var(--color-text-muted)]"
-            aria-live="polite"
           >
-            <span className="codesign-stream-dot">·</span>
-            <span className="codesign-stream-dot" style={{ animationDelay: '150ms' }}>
-              ·
-            </span>
-            <span className="codesign-stream-dot" style={{ animationDelay: '300ms' }}>
-              ·
+            {item.text}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface LiveThinkingBlockProps {
+  isGenerating: boolean;
+  pendingToolCalls: ChatToolCallPayload[];
+  streamingText: string | null;
+  messages: ChatMessageRow[];
+  currentOperation: string | null;
+  t: (key: string, opts?: Record<string, unknown>) => string;
+}
+
+function LiveThinkingBlock({
+  isGenerating,
+  pendingToolCalls,
+  streamingText,
+  messages,
+  currentOperation,
+  t,
+}: LiveThinkingBlockProps) {
+  const [expanded, setExpanded] = useState(true);
+
+  // Collapse automatically once streaming text arrives (LLM is now replying)
+  const prevGenerating = useRef(isGenerating);
+  useEffect(() => {
+    if (!isGenerating && prevGenerating.current) {
+      // generation finished — keep expanded so user can review steps
+    }
+    prevGenerating.current = isGenerating;
+  }, [isGenerating]);
+
+  // Show streaming text bubble
+  const showStreaming = streamingText && streamingText.length > 0;
+  if (showStreaming) {
+    const lastAssistant = [...messages].reverse().find((m) => m.kind === 'assistant_text');
+    const lastText = (lastAssistant?.payload as { text?: string } | undefined)?.text?.trim() ?? '';
+    const streamingTrim = streamingText.trim();
+    const isDupe = Boolean(lastText && (lastText === streamingTrim || lastText.startsWith(streamingTrim)));
+    if (!isDupe) {
+      return (
+        <div key="streaming-assistant">
+          <AssistantText text={streamingText} streaming />
+        </div>
+      );
+    }
+    return null;
+  }
+
+  // Show thinking block when generating
+  const hasPendingTools = pendingToolCalls.length > 0;
+  const isEarlyThinking = isGenerating && !hasPendingTools;
+  if (!isGenerating && !hasPendingTools) return null;
+
+  // Build pending tool clusters. set_todos → shown as PlanningView (not WorkingCard).
+  const pendingGroups: import('react').ReactNode[] = [];
+  let bucket: ChatToolCallPayload[] = [];
+  let latestSetTodosCall: ChatToolCallPayload | null = null;
+  const flushBucket = (idx: number): void => {
+    if (bucket.length === 0) return;
+    pendingGroups.push(<WorkingCard key={`p-${idx}`} calls={bucket} />);
+    bucket = [];
+  };
+  for (let i = 0; i < pendingToolCalls.length; i += 1) {
+    const c = pendingToolCalls[i];
+    if (!c) continue;
+    if (c.toolName === 'set_todos') { flushBucket(i); latestSetTodosCall = c; continue; }
+    bucket.push(c);
+  }
+  flushBucket(pendingToolCalls.length);
+
+  // Extract plan items from the latest set_todos call for inline display
+  const planItems: { text: string; status: 'pending' | 'in_progress' | 'completed' }[] = [];
+  if (latestSetTodosCall) {
+    const raw = (latestSetTodosCall.args?.['todos'] ?? latestSetTodosCall.args?.['items']) as unknown;
+    if (Array.isArray(raw)) {
+      for (const it of raw) {
+        if (typeof it !== 'object' || it === null) continue;
+        const o = it as Record<string, unknown>;
+        const text = typeof o['content'] === 'string' ? o['content'] : typeof o['text'] === 'string' ? o['text'] : null;
+        if (!text) continue;
+        const rs = o['status'];
+        const status: 'pending' | 'in_progress' | 'completed' =
+          rs === 'completed' || rs === 'in_progress' || rs === 'pending' ? rs : o['checked'] === true ? 'completed' : 'pending';
+        planItems.push({ text, status });
+      }
+    }
+  }
+
+  const stepCount = pendingToolCalls.filter((c) => c.toolName !== 'set_todos').length;
+
+  return (
+    <div
+      className="rounded-[var(--radius-md)] border border-[var(--color-border-muted)] bg-[var(--color-surface)] overflow-hidden"
+      aria-live="polite"
+    >
+      {/* Header row — always visible */}
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-2)] text-[12px] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-100"
+      >
+        {expanded ? (
+          <ChevronDown className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
+        ) : (
+          <ChevronRight className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
+        )}
+        <span className="flex items-center gap-[var(--space-1_5)]">
+          {isGenerating ? (
+            <>
+              <span className="codesign-stream-dot shrink-0" style={{ width: 6, height: 6 }} />
+              <span className="codesign-stream-dot shrink-0" style={{ width: 6, height: 6, animationDelay: '150ms' }} />
+              <span className="codesign-stream-dot shrink-0" style={{ width: 6, height: 6, animationDelay: '300ms' }} />
+            </>
+          ) : null}
+          <span className="font-medium text-[var(--color-text-primary)]">
+            {isEarlyThinking ? t('sidebar.chat.thinking') : t('sidebar.chat.working.title')}
+          </span>
+          {stepCount > 0 ? (
+            <span className="text-[11px] text-[var(--color-text-muted)]">
+              {stepCount} {stepCount === 1 ? 'step' : 'steps'}
             </span>
-            <span className="ml-[var(--space-1)]">{t('sidebar.chat.thinking')}</span>
-          </div>
-        );
-      })()}
-      <div ref={bottomRef} />
+          ) : null}
+        </span>
+        {isGenerating && currentOperation ? (
+          <span className="ml-auto truncate max-w-[50%] text-[11px] font-[ui-monospace,Menlo,monospace] text-[var(--color-text-muted)]">
+            {currentOperation}
+          </span>
+        ) : null}
+      </button>
+
+      {/* Expandable steps */}
+      {expanded && (isEarlyThinking || pendingGroups.length > 0 || planItems.length > 0) ? (
+        <div className="border-t border-[var(--color-border-subtle)] px-[var(--space-3)] py-[var(--space-2)] space-y-[var(--space-2)]">
+          {pendingGroups.length > 0 ? (
+            pendingGroups
+          ) : planItems.length > 0 ? (
+            <PlanningView items={planItems} />
+          ) : (
+            <p className="text-[11.5px] text-[var(--color-text-muted)] italic">
+              {currentOperation ?? t('sidebar.chat.thinking')}…
+            </p>
+          )}
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/apps/desktop/src/renderer/src/components/chat/CommentChipBar.tsx b/apps/desktop/src/renderer/src/components/chat/CommentChipBar.tsx
index c6beb410..f751e523 100644
--- a/apps/desktop/src/renderer/src/components/chat/CommentChipBar.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/CommentChipBar.tsx
@@ -22,7 +22,7 @@ export function CommentChipBar() {
   const reportableErrorToast = useCodesignStore((s) => s.reportableErrorToast);
   const config = useCodesignStore((s) => s.config);
   const isGenerating = useCodesignStore(
-    (s) => s.isGenerating && s.generatingDesignId === s.currentDesignId,
+    (s) => s.currentDesignId !== null && s.activeGenerations.has(s.currentDesignId),
   );
 
   const pending = comments.filter((c) => c.kind === 'edit' && c.status === 'pending');
diff --git a/apps/desktop/src/renderer/src/components/chat/GenerationStatusBar.tsx b/apps/desktop/src/renderer/src/components/chat/GenerationStatusBar.tsx
new file mode 100644
index 00000000..0ba603b8
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/chat/GenerationStatusBar.tsx
@@ -0,0 +1,89 @@
+import { useT } from '@open-codesign/i18n';
+import { useEffect, useState } from 'react';
+import type { GenerationStage } from '../../store';
+import { useCodesignStore } from '../../store';
+
+function useElapsedSeconds(startedAt: number | null): number {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (startedAt === null) {
+      setElapsed(0);
+      return;
+    }
+    setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+    const id = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+    }, 1000);
+    return () => clearInterval(id);
+  }, [startedAt]);
+  return elapsed;
+}
+
+function formatElapsed(s: number): string {
+  if (s < 60) return `${s}s`;
+  return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
+export function GenerationStatusBar() {
+  const t = useT();
+  const isGenerating = useCodesignStore(
+    (s) => s.currentDesignId !== null && s.activeGenerations.has(s.currentDesignId),
+  );
+  const generationStage = useCodesignStore((s) => s.generationStage);
+  const startedAt = useCodesignStore((s) => s.generationStartedAt);
+  const currentOperation = useCodesignStore((s) => s.currentOperation);
+  const elapsed = useElapsedSeconds(isGenerating ? startedAt : null);
+
+  if (!isGenerating) return null;
+
+  const opTrim = currentOperation?.trim() ?? '';
+  const labelFromStage = (s: GenerationStage) => {
+    switch (s) {
+      case 'sending':
+        return t('loading.stage.sending');
+      case 'thinking':
+        return t('loading.stage.thinking');
+      case 'streaming':
+        return t('loading.stage.streaming');
+      case 'parsing':
+        return t('loading.stage.parsing');
+      case 'rendering':
+        return t('loading.stage.rendering');
+      case 'error':
+        return t('common.working');
+      case 'done':
+        return t('common.working');
+      case 'idle':
+        return t('loading.stage.thinking');
+      default:
+        return t('common.working');
+    }
+  };
+  const label =
+    opTrim.length > 0
+      ? opTrim.length > 72
+        ? `${opTrim.slice(0, 72)}…`
+        : opTrim
+      : labelFromStage(generationStage) || t('common.working');
+
+  return (
+    <div
+      className="flex items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-1_5)] border-b border-[var(--color-border-muted)] bg-[var(--color-background-secondary)] text-[11.5px] shrink-0"
+      role="status"
+    >
+      <span className="relative inline-flex w-[8px] h-[8px] shrink-0">
+        <span className="absolute inline-block w-full h-full rounded-full bg-[var(--color-accent)] animate-ping opacity-60" />
+        <span className="relative inline-block w-full h-full rounded-full bg-[var(--color-accent)]" />
+      </span>
+      <span
+        className="flex-1 min-w-0 truncate font-[ui-monospace,Menlo,monospace] text-[var(--color-text-secondary)]"
+        title={label}
+      >
+        {label}
+      </span>
+      <span className="shrink-0 tabular-nums text-[var(--color-text-muted)]">
+        {formatElapsed(elapsed)}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx b/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx
index df9144fd..9a816ebf 100644
--- a/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx
@@ -9,9 +9,7 @@ import {
   useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react';
-import { useCodesignStore } from '../../store';
 
 const MAX_TEXTAREA_ROWS = 6;
 
@@ -64,47 +62,6 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(funct
 ) {
   const t = useT();
   const taRef = useRef<HTMLTextAreaElement>(null);
-  const generationStage = useCodesignStore((s) => s.generationStage);
-
-  const runningLabel = isGenerating
-    ? (() => {
-        switch (generationStage) {
-          case 'sending':
-            return t('loading.stage.sending');
-          case 'thinking':
-            return t('loading.stage.thinking');
-          case 'streaming':
-            return t('loading.stage.streaming');
-          case 'parsing':
-            return t('loading.stage.parsing');
-          case 'rendering':
-            return t('loading.stage.rendering');
-          default:
-            return t('loading.stage.thinking');
-        }
-      })()
-    : null;
-
-  // Elapsed timer — reassures users that long agent runs are still alive.
-  // Only ticks while isGenerating; resets to 0 on each new run.
-  const [elapsedSec, setElapsedSec] = useState(0);
-  useEffect(() => {
-    if (!isGenerating) {
-      setElapsedSec(0);
-      return;
-    }
-    const start = Date.now();
-    setElapsedSec(0);
-    const id = setInterval(() => {
-      setElapsedSec(Math.floor((Date.now() - start) / 1000));
-    }, 500);
-    return () => clearInterval(id);
-  }, [isGenerating]);
-
-  const elapsedText =
-    elapsedSec < 60
-      ? `${elapsedSec}s`
-      : `${Math.floor(elapsedSec / 60)}:${String(elapsedSec % 60).padStart(2, '0')}`;
 
   useEffect(() => {
     if (taRef.current) resizeTextarea(taRef.current);
@@ -192,26 +149,6 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(funct
           )}
         </div>
       </div>
-      {runningLabel ? (
-        <div
-          aria-live="polite"
-          className="mt-[var(--space-2)] flex items-center justify-between gap-[var(--space-2)] px-[var(--space-1)]"
-        >
-          <div className="inline-flex items-center gap-[var(--space-1_5)] rounded-full border border-[var(--color-border-subtle)] bg-[var(--color-surface)] px-[var(--space-2)] py-[3px] text-[11px] text-[var(--color-text-secondary)] shadow-[var(--shadow-soft)]">
-            <span aria-hidden className="relative inline-flex h-[6px] w-[6px] shrink-0">
-              <span className="absolute inset-0 rounded-full bg-[var(--color-accent)] opacity-45 animate-ping" />
-              <span className="relative inline-block h-full w-full rounded-full bg-[var(--color-accent)]" />
-            </span>
-            <span className="whitespace-nowrap">{runningLabel}</span>
-          </div>
-          <span
-            className="text-[11px] text-[var(--color-text-muted)]"
-            style={{ fontFamily: 'var(--font-mono)', fontFeatureSettings: "'tnum'" }}
-          >
-            {elapsedText}
-          </span>
-        </div>
-      ) : null}
     </form>
   );
 });
diff --git a/apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx b/apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx
new file mode 100644
index 00000000..11216c05
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx
@@ -0,0 +1,86 @@
+import { Check, ChevronDown, ChevronUp, ListChecks } from 'lucide-react';
+import { useState } from 'react';
+import { useCodesignStore } from '../../store';
+
+export function StickyTodoHeader() {
+  const todos = useCodesignStore((s) => s.latestTodos);
+  const [expanded, setExpanded] = useState(true);
+
+  if (!todos || todos.length === 0) return null;
+
+  const done = todos.filter((t) => t.status === 'completed').length;
+  const total = todos.length;
+  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+  const inProgress = todos.find((t) => t.status === 'in_progress');
+
+  return (
+    <div className="shrink-0 border-b border-[var(--color-border-muted)] bg-[var(--color-surface)]">
+      {/* Progress bar + toggle */}
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-center gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-2)] text-left"
+      >
+        <ListChecks
+          className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]"
+          aria-hidden
+        />
+        <div className="flex-1 h-[3px] rounded-full bg-[var(--color-background-secondary)] overflow-hidden">
+          <div
+            className="h-full rounded-full bg-[var(--color-accent)] transition-[width] duration-300 ease-out"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+        <span className="text-[11px] tabular-nums text-[var(--color-text-muted)] shrink-0">
+          {done}/{total}
+        </span>
+        {expanded ? (
+          <ChevronUp className="w-[12px] h-[12px] text-[var(--color-text-muted)] shrink-0" />
+        ) : (
+          <ChevronDown className="w-[12px] h-[12px] text-[var(--color-text-muted)] shrink-0" />
+        )}
+      </button>
+
+      {/* In-progress item preview when collapsed */}
+      {!expanded && inProgress && (
+        <div className="px-[var(--space-4)] pb-[var(--space-1_5)] text-[12px] font-medium text-[var(--color-text-primary)] truncate">
+          {inProgress.text}
+        </div>
+      )}
+
+      {/* Full list when expanded */}
+      {expanded && (
+        <div className="px-[var(--space-4)] pb-[var(--space-2)] space-y-[3px]">
+          {todos.map((todo, i) => (
+            <div
+              // biome-ignore lint/suspicious/noArrayIndexKey: todo list is replaced atomically, index is stable per snapshot
+              key={i}
+              className="flex items-start gap-[var(--space-2)] text-[12px] leading-[1.4]"
+            >
+              {todo.status === 'completed' ? (
+                <span className="mt-[2px] inline-flex items-center justify-center w-[13px] h-[13px] rounded-[3px] bg-[var(--color-accent)] shrink-0">
+                  <Check className="w-[9px] h-[9px] text-white" strokeWidth={3} />
+                </span>
+              ) : todo.status === 'in_progress' ? (
+                <span className="mt-[2px] inline-block w-[13px] h-[13px] rounded-[3px] border-2 border-[var(--color-accent)] bg-[var(--color-accent)]/10 shrink-0 animate-pulse" />
+              ) : (
+                <span className="mt-[2px] inline-block w-[13px] h-[13px] rounded-[3px] border border-[var(--color-border)] shrink-0" />
+              )}
+              <span
+                className={
+                  todo.status === 'completed'
+                    ? 'line-through text-[var(--color-text-muted)]'
+                    : todo.status === 'in_progress'
+                      ? 'text-[var(--color-text-primary)] font-medium'
+                      : 'text-[var(--color-text-primary)]'
+                }
+              >
+                {todo.text}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/components/chat/UserMessage.tsx b/apps/desktop/src/renderer/src/components/chat/UserMessage.tsx
index de1eb82d..d904db2d 100644
--- a/apps/desktop/src/renderer/src/components/chat/UserMessage.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/UserMessage.tsx
@@ -1,21 +1,37 @@
 import { useT } from '@open-codesign/i18n';
+import { Pencil } from 'lucide-react';
 
 interface UserMessageProps {
   text: string;
   attachedSkills?: string[];
+  onEdit?: (text: string) => void;
 }
 
 /**
  * Claude-style user message: right-aligned bubble with subtle accent tint
  * background. No "You" label — bubble alignment carries the role signal.
  */
-export function UserMessage({ text, attachedSkills }: UserMessageProps) {
+export function UserMessage({ text, attachedSkills, onEdit }: UserMessageProps) {
   const t = useT();
   return (
-    <div className="flex flex-col items-end gap-[var(--space-1)] pl-[var(--space-6)]">
+    <div className="group flex flex-col items-end gap-[var(--space-1)] pl-[var(--space-6)]">
       <div className="max-w-[85%] rounded-2xl rounded-br-md bg-[var(--color-accent)]/10 border border-[var(--color-accent)]/20 px-[var(--space-3)] py-[var(--space-2)] text-[14px] leading-relaxed text-[var(--color-text-primary)] whitespace-pre-wrap break-words">
         {text}
       </div>
+      {onEdit ? (
+        <div className="flex items-center gap-[var(--space-1)] opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+          <button
+            type="button"
+            onClick={() => onEdit(text)}
+            aria-label={t('settings.providers.edit')}
+            title={t('settings.providers.edit')}
+            className="inline-flex items-center gap-[4px] h-[22px] px-[6px] rounded-[var(--radius-sm)] text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-100"
+          >
+            <Pencil className="w-[12px] h-[12px]" aria-hidden />
+            {t('settings.providers.edit')}
+          </button>
+        </div>
+      ) : null}
       {attachedSkills && attachedSkills.length > 0 ? (
         <div className="flex flex-wrap justify-end gap-[var(--space-1)]">
           {attachedSkills.map((s) => (
diff --git a/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx b/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx
index 57d167d6..f0390c40 100644
--- a/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx
@@ -21,9 +21,8 @@ export interface WorkingCardProps {
 
 /**
  * Renders a tight vertical cluster of tool rows — no border, no card.
- * Visual grouping is intentional only when consecutive tool calls arrived
- * between two prose flushes; the chronological position of `set_todos` is
- * preserved by ChatMessageList rendering it as its own item via TodoListView.
+ * `set_todos` is omitted here (and not rendered inline in ChatMessageList);
+ * the sidebar sticky header shows the live checklist.
  */
 export function WorkingCard({ calls }: WorkingCardProps) {
   const rows = useMemo(() => buildRows(calls).filter((r) => !r.todos), [calls]);
@@ -62,8 +61,15 @@ interface ToolRow {
   status: 'running' | 'done' | 'error';
   todos?: TodoItem[];
   editCount?: number;
+  /** Rich inline content snippet shown below the header line. */
+  snippet?: ToolSnippet;
 }
 
+type ToolSnippet =
+  | { kind: 'diff'; minus: string; plus: string }
+  | { kind: 'text'; lines: string[] }
+  | { kind: 'range'; start: number; end: number }
+
 function extractTodos(call: ChatToolCallPayload): TodoItem[] {
   const raw = (call.args?.['todos'] as unknown) ?? (call.args?.['items'] as unknown) ?? null;
   if (!Array.isArray(raw)) return [];
@@ -90,6 +96,42 @@ function extractTodos(call: ChatToolCallPayload): TodoItem[] {
     .filter((x): x is TodoItem => x !== null);
 }
 
+function firstMeaningfulLine(text: string): string {
+  for (const line of text.split('\n')) {
+    const trimmed = line.trim();
+    if (trimmed.length > 0) return trimmed.slice(0, 120);
+  }
+  return text.slice(0, 120).trim();
+}
+
+function computeSnippet(call: ChatToolCallPayload): ToolSnippet | undefined {
+  if (call.toolName !== 'str_replace_based_edit_tool' && call.toolName !== 'text_editor') return;
+  const cmd = call.command;
+  const args = call.args;
+  if (cmd === 'str_replace') {
+    const minus = typeof args?.['old_str'] === 'string' ? firstMeaningfulLine(args['old_str']) : null;
+    const plus = typeof args?.['new_str'] === 'string' ? firstMeaningfulLine(args['new_str']) : null;
+    if (minus && plus && minus !== plus) return { kind: 'diff', minus, plus };
+  }
+  if (cmd === 'create' || cmd === 'insert') {
+    const src = typeof args?.['file_text'] === 'string'
+      ? args['file_text']
+      : typeof args?.['new_str'] === 'string'
+        ? args['new_str']
+        : null;
+    if (src) {
+      const lines = src.split('\n').map((l) => l.trim()).filter(Boolean).slice(0, 3);
+      if (lines.length > 0) return { kind: 'text', lines };
+    }
+  }
+  if (cmd === 'view') {
+    const range = args?.['view_range'];
+    if (Array.isArray(range) && typeof range[0] === 'number' && typeof range[1] === 'number') {
+      return { kind: 'range', start: range[0] as number, end: range[1] as number };
+    }
+  }
+}
+
 function isEditCommand(call: ChatToolCallPayload): boolean {
   return call.command === 'str_replace' || call.command === 'insert';
 }
@@ -183,12 +225,14 @@ export function buildRows(calls: ChatToolCallPayload[]): ToolRow[] {
       }
     }
 
+    const snippet = computeSnippet(call);
     rows.push({
       key: `c-${i}`,
       Icon,
       label,
       detail,
       status: call.status,
+      ...(snippet !== undefined ? { snippet } : {}),
     });
     if (isFileEdit) lastEditIdx = rows.length - 1;
   }
@@ -264,27 +308,56 @@ function ToolRowView({ row }: { row: ToolRow }) {
       : row.detail;
 
   return (
-    <div
-      className="flex items-center gap-[6px] text-[12.5px] py-[1px]"
-      title={detailText ?? row.label}
-    >
-      {row.status === 'running' ? (
-        <span className="relative inline-flex w-[14px] h-[14px] items-center justify-center shrink-0">
-          <span className="absolute inline-block w-[7px] h-[7px] rounded-full bg-[var(--color-accent)] animate-pulse" />
-          <span className="absolute inline-block w-[12px] h-[12px] rounded-full border border-[var(--color-accent)]/30 animate-ping" />
-        </span>
-      ) : row.status === 'error' ? (
-        <Icon className="w-[14px] h-[14px] shrink-0 text-[var(--color-error)]" aria-hidden />
-      ) : (
-        <Icon className="w-[14px] h-[14px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
-      )}
-      <span className="font-[var(--font-mono),ui-monospace,Menlo,monospace] text-[var(--color-text-secondary)]">
-        {row.label}
-      </span>
-      {detailText ? (
-        <span className="font-[var(--font-mono),ui-monospace,Menlo,monospace] text-[var(--color-text-primary)] truncate">
-          {detailText}
+    <div className="py-[2px]" title={detailText ?? row.label}>
+      {/* Header line */}
+      <div className="flex items-center gap-[6px] text-[12.5px]">
+        {row.status === 'running' ? (
+          <span className="relative inline-flex w-[14px] h-[14px] items-center justify-center shrink-0">
+            <span className="absolute inline-block w-[7px] h-[7px] rounded-full bg-[var(--color-accent)] animate-pulse" />
+            <span className="absolute inline-block w-[12px] h-[12px] rounded-full border border-[var(--color-accent)]/30 animate-ping" />
+          </span>
+        ) : row.status === 'error' ? (
+          <Icon className="w-[14px] h-[14px] shrink-0 text-[var(--color-error)]" aria-hidden />
+        ) : (
+          <Icon className="w-[14px] h-[14px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
+        )}
+        <span className="font-[var(--font-mono),ui-monospace,Menlo,monospace] text-[var(--color-text-secondary)]">
+          {row.label}
         </span>
+        {detailText ? (
+          <span className="font-[var(--font-mono),ui-monospace,Menlo,monospace] text-[var(--color-text-primary)] truncate">
+            {detailText}
+          </span>
+        ) : null}
+        {row.snippet?.kind === 'range' ? (
+          <span className="font-[var(--font-mono),ui-monospace,Menlo,monospace] text-[var(--color-text-muted)] text-[11px]">
+            :{row.snippet.start}–{row.snippet.end}
+          </span>
+        ) : null}
+      </div>
+
+      {/* Content snippet */}
+      {row.snippet && row.snippet.kind !== 'range' ? (
+        <div className="mt-[3px] ml-[20px] rounded-[4px] bg-[var(--color-background-secondary)] border border-[var(--color-border-subtle)] px-[8px] py-[4px] font-[ui-monospace,Menlo,monospace] text-[11px] leading-[1.55] overflow-hidden">
+          {row.snippet.kind === 'diff' ? (
+            <>
+              <div className="text-[#e06c75] truncate">
+                <span className="select-none mr-[4px] opacity-60">−</span>
+                {row.snippet.minus}
+              </div>
+              <div className="text-[#98c379] truncate">
+                <span className="select-none mr-[4px] opacity-60">+</span>
+                {row.snippet.plus}
+              </div>
+            </>
+          ) : (
+            row.snippet.lines.map((line, i) => (
+              <div key={i} className="text-[var(--color-text-secondary)] truncate">
+                {line}
+              </div>
+            ))
+          )}
+        </div>
       ) : null}
     </div>
   );
diff --git a/apps/desktop/src/renderer/src/hooks/useAgentStream.ts b/apps/desktop/src/renderer/src/hooks/useAgentStream.ts
index cce914b7..145a8921 100644
--- a/apps/desktop/src/renderer/src/hooks/useAgentStream.ts
+++ b/apps/desktop/src/renderer/src/hooks/useAgentStream.ts
@@ -47,18 +47,21 @@ export function useAgentStream(): void {
   const setPreviewHtmlFromAgent = useCodesignStore((s) => s.setPreviewHtmlFromAgent);
   const updateChatToolStatus = useCodesignStore((s) => s.updateChatToolStatus);
   const persistAgentRunSnapshot = useCodesignStore((s) => s.persistAgentRunSnapshot);
-  const inFlight = useRef<InFlightTurn | null>(null);
+  const setCurrentOperation = useCodesignStore((s) => s.setCurrentOperation);
+  const setLatestTodos = useCodesignStore((s) => s.setLatestTodos);
+  const upsertPageFile = useCodesignStore((s) => s.upsertPageFile);
+  const inFlight = useRef<Map<string, InFlightTurn>>(new Map());
 
-  // Throttled live-preview push. iframe srcdoc reloads the whole page on every
-  // change, so a flurry of str_replace events (10+ per turn is normal) would
-  // strobe. Coalesce to ~250ms with a guaranteed trailing edge so the final
-  // state always lands.
+  // Buffered live-preview push. iframe srcdoc reloads on every change, so
+  // accumulate fs_updated writes and flush once at turn_end instead.
   const fsThrottle = useRef<{
     timer: ReturnType<typeof setTimeout> | null;
     pending: { designId: string; content: string } | null;
     lastFlushAt: number;
   }>({ timer: null, pending: null, lastFlushAt: 0 });
-  const FS_THROTTLE_MS = 250;
+  // Never auto-fire during a turn — flush explicitly at turn_end so the
+  // iframe reloads at most once per LLM response instead of 50+ times.
+  const FS_THROTTLE_MS = 30_000;
 
   useEffect(() => {
     if (typeof window === 'undefined' || !window.codesign) return;
@@ -91,28 +94,23 @@ export function useAgentStream(): void {
         generationId: event.generationId,
         designId: event.designId,
       });
-      const previous = inFlight.current;
-      const sameRun =
-        previous &&
-        previous.designId === event.designId &&
-        previous.generationId === event.generationId;
-      inFlight.current = {
+      const gid = event.generationId;
+      const previous = inFlight.current.get(gid);
+      inFlight.current.set(gid, {
         designId: event.designId,
-        generationId: event.generationId,
+        generationId: gid,
         textBuffer: '',
-        lastPersistedText: sameRun ? previous.lastPersistedText : null,
-        pendingTools: sameRun ? previous.pendingTools : [],
-      };
+        lastPersistedText: previous?.lastPersistedText ?? null,
+        pendingTools: previous?.pendingTools ?? [],
+      });
       setStreamingAssistantText({ designId: event.designId, text: '' });
     };
 
     const handleTextDelta = (event: AgentStreamEvent) => {
-      if (!inFlight.current || typeof event.delta !== 'string') return;
-      inFlight.current.textBuffer += event.delta;
-      setStreamingAssistantText({
-        designId: inFlight.current.designId,
-        text: inFlight.current.textBuffer,
-      });
+      const turn = inFlight.current.get(event.generationId);
+      if (!turn || typeof event.delta !== 'string') return;
+      turn.textBuffer += event.delta;
+      setStreamingAssistantText({ designId: turn.designId, text: turn.textBuffer });
     };
 
     const drainPendingTools = (current: InFlightTurn, finalStatus: 'done' | 'error'): void => {
@@ -129,7 +127,7 @@ export function useAgentStream(): void {
     };
 
     const handleTurnEnd = (event: AgentStreamEvent) => {
-      const current = inFlight.current;
+      const current = inFlight.current.get(event.generationId);
       // TODO: replace with rendererLogger once renderer-logger lands
       console.debug('[agent] turn_end', {
         generationId: event.generationId,
@@ -149,12 +147,40 @@ export function useAgentStream(): void {
       if (current) drainPendingTools(current, 'done');
       setStreamingAssistantText(null);
       if (current) current.textBuffer = '';
+      // Flush any buffered fs_updated so the preview shows the latest state
+      // for this turn. Without this the iframe only refreshes at agent_end
+      // which could be minutes away.
+      const slotTurn = fsThrottle.current;
+      if (slotTurn.timer !== null) { clearTimeout(slotTurn.timer); slotTurn.timer = null; }
+      const pendingTurn = slotTurn.pending;
+      slotTurn.pending = null;
+      if (pendingTurn) { slotTurn.lastFlushAt = Date.now(); setPreviewHtmlFromAgent(pendingTurn); }
     };
 
     const handleToolCallStart = (event: AgentStreamEvent) => {
-      const current = inFlight.current;
+      const current = inFlight.current.get(event.generationId);
       const designId = event.designId;
       const toolName = event.toolName ?? 'unknown';
+      // Build a human-readable operation label for the progress bar.
+      const opPath = (event.args as { path?: string } | undefined)?.path;
+      const basename = opPath ? (opPath.split('/').pop() ?? opPath) : null;
+      const opLabel = (() => {
+        if (toolName === 'set_todos') return 'planning';
+        if ((event.command === 'str_replace' || event.command === 'insert') && basename) return `editing ${basename}`;
+        if (event.command === 'create' && basename) return `creating ${basename}`;
+        if (event.command === 'view' && basename) return `reading ${basename}`;
+        if (toolName === 'read_url') return 'reading url';
+        if (toolName === 'read_design_system') return 'reading design system';
+        if (toolName === 'list_files') return 'listing files';
+        if (toolName === 'verify_html') return 'verifying';
+        return basename ? `${toolName} ${basename}` : toolName;
+      })();
+      setCurrentOperation(opLabel);
+      // Update sticky todo header immediately when agent calls set_todos.
+      if (toolName === 'set_todos') {
+        const todos = extractTodosFromArgs(event.args as Record<string, unknown> | undefined);
+        if (todos) setLatestTodos(todos);
+      }
       // TODO: replace with rendererLogger once renderer-logger lands
       console.debug('[agent] tool_call_start', {
         generationId: event.generationId,
@@ -188,8 +214,37 @@ export function useAgentStream(): void {
       }
     };
 
+    const extractTodosFromArgs = (
+      args: Record<string, unknown> | undefined,
+    ): Array<{ text: string; status: 'pending' | 'in_progress' | 'completed' }> | null => {
+      const raw = (args?.['todos'] ?? args?.['items']) as unknown;
+      if (!Array.isArray(raw)) return null;
+      const items = raw
+        .map((it) => {
+          if (typeof it !== 'object' || it === null) return null;
+          const o = it as Record<string, unknown>;
+          const text =
+            typeof o['content'] === 'string'
+              ? o['content']
+              : typeof o['text'] === 'string'
+                ? o['text']
+                : null;
+          if (text === null) return null;
+          const rawStatus = o['status'];
+          const status: 'pending' | 'in_progress' | 'completed' =
+            rawStatus === 'completed' || rawStatus === 'in_progress' || rawStatus === 'pending'
+              ? rawStatus
+              : o['checked'] === true
+                ? 'completed'
+                : 'pending';
+          return { text, status };
+        })
+        .filter((x): x is { text: string; status: 'pending' | 'in_progress' | 'completed' } => x !== null);
+      return items.length > 0 ? items : null;
+    };
+
     const handleToolCallResult = (event: AgentStreamEvent) => {
-      const current = inFlight.current;
+      const current = inFlight.current.get(event.generationId);
       const designId = event.designId;
       if (!current) return;
       const idx = current.pendingTools.findIndex(
@@ -218,16 +273,21 @@ export function useAgentStream(): void {
     };
 
     const handleFsUpdated = (event: AgentStreamEvent) => {
-      // Live mirror of the agent's text_editor mutations into the iframe.
-      // We only react to index.html — other paths (frames/, skills/) are
-      // read-only context and never become the rendered artifact.
-      if (event.path === 'index.html' && typeof event.content === 'string') {
-        scheduleFs({ designId: event.designId, content: event.content });
+      const path = event.path;
+      const content = event.content;
+      if (typeof path !== 'string' || typeof content !== 'string') return;
+      // index.html → primary live preview (throttled).
+      if (path === 'index.html') {
+        scheduleFs({ designId: event.designId, content });
+      }
+      // page-*.html → additional page files tracked in store for tab rendering.
+      if (path === 'index.html' || /^page-[^/]+\.html$/.test(path)) {
+        upsertPageFile(path, content);
       }
     };
 
     const handleError = (event: AgentStreamEvent) => {
-      const current = inFlight.current;
+      setCurrentOperation(null);
       // TODO: replace with rendererLogger once renderer-logger lands
       console.error('[agent] error', {
         generationId: event.generationId,
@@ -236,7 +296,7 @@ export function useAgentStream(): void {
         code: event.code,
       });
       setStreamingAssistantText(null);
-      inFlight.current = null;
+      inFlight.current.delete(event.generationId);
       void appendChatMessage({
         designId: event.designId,
         kind: 'error',
@@ -249,17 +309,23 @@ export function useAgentStream(): void {
       // "running" if the IPC promise that drives sendPrompt hangs. Only clear
       // when the error belongs to the design the store thinks is generating.
       const s = useCodesignStore.getState();
+      const nextActiveGenerations = new Set(s.activeGenerations);
+      nextActiveGenerations.delete(event.designId);
       if (s.generatingDesignId === event.designId) {
         useCodesignStore.setState({
-          isGenerating: false,
+          isGenerating: nextActiveGenerations.size > 0,
           generatingDesignId: null,
           generationStage: 'error',
           streamingAssistantText: null,
+          activeGenerations: nextActiveGenerations,
         });
+      } else {
+        useCodesignStore.setState({ activeGenerations: nextActiveGenerations });
       }
     };
 
     const handleAgentEnd = (event: AgentStreamEvent) => {
+      setCurrentOperation(null);
       // Flush any throttled fs_updated payload synchronously so the preview
       // store reflects the final html before we read it back for persistence.
       const slot = fsThrottle.current;
@@ -273,24 +339,30 @@ export function useAgentStream(): void {
         slot.lastFlushAt = Date.now();
         setPreviewHtmlFromAgent(pending);
       }
-      const finalText = inFlight.current?.lastPersistedText ?? undefined;
+      const turn = inFlight.current.get(event.generationId);
+      const finalText = turn?.lastPersistedText ?? undefined;
       void persistAgentRunSnapshot({
         designId: event.designId,
         ...(finalText ? { finalText } : {}),
       });
-      inFlight.current = null;
+      inFlight.current.delete(event.generationId);
       // Defensive: clear generation flags. The sendPrompt Promise resolution
       // would normally clear them shortly after, but if the main-process IPC
       // hangs for any reason the UI would be stuck in "running" forever.
       // Mirror the happy-path terminal state here as a belt-and-suspenders.
       const s = useCodesignStore.getState();
+      const nextActiveGenerations = new Set(s.activeGenerations);
+      nextActiveGenerations.delete(event.designId);
       if (s.generatingDesignId === event.designId) {
         useCodesignStore.setState({
-          isGenerating: false,
+          isGenerating: nextActiveGenerations.size > 0,
           generatingDesignId: null,
           generationStage: 'done',
           streamingAssistantText: null,
+          activeGenerations: nextActiveGenerations,
         });
+      } else {
+        useCodesignStore.setState({ activeGenerations: nextActiveGenerations });
       }
       // Fire the auto-polish follow-up exactly once per design. Delay so the
       // isGenerating flag and persisted assistant_text row have settled before
@@ -341,6 +413,7 @@ export function useAgentStream(): void {
     });
     return () => {
       off();
+      inFlight.current.clear();
       const slot = fsThrottle.current;
       if (slot.timer !== null) {
         clearTimeout(slot.timer);
@@ -354,5 +427,8 @@ export function useAgentStream(): void {
     setPreviewHtmlFromAgent,
     updateChatToolStatus,
     persistAgentRunSnapshot,
+    setCurrentOperation,
+    setLatestTodos,
+    upsertPageFile,
   ]);
 }
diff --git a/apps/desktop/src/renderer/src/store.ts b/apps/desktop/src/renderer/src/store.ts
index 8ad93906..431ff120 100644
--- a/apps/desktop/src/renderer/src/store.ts
+++ b/apps/desktop/src/renderer/src/store.ts
@@ -1,3 +1,4 @@
+import type { ConsoleLevel } from '@open-codesign/runtime';
 import { i18n } from '@open-codesign/i18n';
 import type {
   ChatAppendInput,
@@ -33,6 +34,14 @@ declare global {
   }
 }
 
+export interface IframeConsoleLogEntry {
+  level: ConsoleLevel;
+  args: string[];
+  timestamp: number;
+}
+
+export const MAX_CONSOLE_LOGS = 200;
+
 export type GenerationStage =
   | 'idle'
   | 'sending'
@@ -181,7 +190,19 @@ interface CodesignState {
    *  design via designIdAtStart) — UI only shows "generating" affordances on
    *  the design that actually has the run. */
   generatingDesignId: string | null;
+  /** Set of design IDs currently being generated (parallel support). */
+  activeGenerations: Set<string>;
   generationStage: GenerationStage;
+  /** Epoch ms when the current generation started. Used to render elapsed time. */
+  generationStartedAt: number | null;
+  /** Human-readable label for the agent's current operation (e.g. "edit index.html"). */
+  currentOperation: string | null;
+  /** Most-recent set_todos payload for the current design — sticky header above chat. */
+  latestTodos: Array<{ text: string; status: 'pending' | 'in_progress' | 'completed' }> | null;
+  /** All page HTML files from the agent's virtual FS, keyed by path (e.g. "index.html", "page-about.html"). */
+  pageFiles: Record<string, string>;
+  /** Path of the currently-displayed page tab. */
+  activePagePath: string;
   /** Live assistant text buffered during the current agent turn. Rendered as
    *  an ephemeral chat bubble so the UI shows incremental output instead of
    *  waiting for the turn to settle. Cleared on turn_end (the persisted
@@ -214,6 +235,7 @@ interface CodesignState {
   previewViewport: PreviewViewport;
   toasts: Toast[];
   iframeErrors: string[];
+  consoleLogs: IframeConsoleLogEntry[];
 
   inputFiles: LocalInputFile[];
   referenceUrl: string;
@@ -323,6 +345,12 @@ interface CodesignState {
   clearError: () => void;
   clearIframeErrors: () => void;
   pushIframeError: (message: string) => void;
+  clearConsoleLogs: () => void;
+  pushConsoleLog: (entry: IframeConsoleLogEntry) => void;
+  setCurrentOperation: (op: string | null) => void;
+  setLatestTodos: (todos: Array<{ text: string; status: 'pending' | 'in_progress' | 'completed' }> | null) => void;
+  upsertPageFile: (path: string, content: string) => void;
+  setActivePagePath: (path: string) => void;
   exportActive: (format: ExportFormat) => Promise<void>;
 
   pickInputFiles: () => Promise<void>;
@@ -839,10 +867,31 @@ function isReadyConfig(cfg: OnboardingState | null): cfg is ReadyConfig {
 
 function finishIfCurrent(
   set: SetState,
-  generationId: string,
+  _generationId: string,
   update: (state: CodesignState) => Partial<CodesignState>,
+  designId?: string | null,
 ): void {
-  set((state) => (state.activeGenerationId === generationId ? update(state) : {}));
+  set((state) => {
+    // For parallel support, check by design ID in activeGenerations rather
+    // than by the store's single activeGenerationId (which is overwritten when
+    // a second generation starts for a different design).
+    const designKnown = designId ? state.activeGenerations.has(designId) : false;
+    const isCurrent =
+      designKnown || state.activeGenerationId === _generationId;
+    if (!isCurrent) return {};
+    const base = update(state);
+    if (designId) {
+      const nextActiveGenerations = new Set(state.activeGenerations);
+      nextActiveGenerations.delete(designId);
+      const remaining = nextActiveGenerations.size;
+      return {
+        ...base,
+        activeGenerations: nextActiveGenerations,
+        isGenerating: remaining > 0 ? true : (base.isGenerating ?? false),
+      };
+    }
+    return base;
+  });
 }
 
 function applyGenerateSuccess(
@@ -885,7 +934,7 @@ function applyGenerateSuccess(
       generationStage: 'done' as GenerationStage,
       lastUsage: usage,
     };
-  });
+  }, designIdAtStart);
   // If the user switched designs mid-generation, didApply is false but we
   // still want the fresh artifact in the pool so the design they generated
   // for shows the new content the next time they switch back to it.
@@ -1028,7 +1077,8 @@ function applyGenerateError(
   designIdAtStart: string | null,
 ): void {
   const msg = err instanceof Error ? err.message : tr('errors.unknown');
-  if (get().activeGenerationId !== generationId) return;
+  // For parallel support: don't bail if activeGenerationId was overwritten by a
+  // second gen — still need to clean up this gen's entry in activeGenerations.
   // TODO: replace with rendererLogger once renderer-logger lands
   console.error('[store] applyGenerateError', {
     generationId,
@@ -1044,7 +1094,7 @@ function applyGenerateError(
     errorMessage: msg,
     lastError: msg,
     generationStage: 'error' as GenerationStage,
-  }));
+  }), designIdAtStart);
   const designId = designIdAtStart ?? get().currentDesignId;
   if (designId) {
     void get().appendChatMessage({
@@ -1309,7 +1359,13 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   isGenerating: false,
   activeGenerationId: null,
   generatingDesignId: null,
+  activeGenerations: new Set<string>(),
   generationStage: 'idle' as GenerationStage,
+  generationStartedAt: null,
+  currentOperation: null,
+  latestTodos: null,
+  pageFiles: {} as Record<string, string>,
+  activePagePath: 'index.html',
   streamingAssistantText: null,
   pendingToolCalls: [],
   lastUsage: null,
@@ -1324,7 +1380,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     const s = get();
     if (!s.autoPolishEnabled) return;
     if (s.autoPolishFired.has(designId)) return;
-    if (s.isGenerating) return;
+    if (s.activeGenerations.has(designId)) return;
     // Require that the design has at least one completed assistant_text row
     // for the just-finished round. If the agent ended without producing
     // prose, the run likely errored or was trivial — skip polish.
@@ -1363,6 +1419,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   previewViewport: 'desktop' as PreviewViewport,
   toasts: [],
   iframeErrors: [],
+  consoleLogs: [],
 
   designs: [],
   currentDesignId: null,
@@ -1401,7 +1458,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   activeReportLocalId: null,
 
   clearIframeErrors() {
-    set({ iframeErrors: [] });
+    set({ iframeErrors: [], consoleLogs: [] });
   },
 
   pushIframeError(message) {
@@ -1413,6 +1470,33 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     });
   },
 
+  clearConsoleLogs() {
+    set({ consoleLogs: [] });
+  },
+
+  pushConsoleLog(entry) {
+    set((s) => {
+      const next = [...s.consoleLogs, entry];
+      return { consoleLogs: next.length > MAX_CONSOLE_LOGS ? next.slice(next.length - MAX_CONSOLE_LOGS) : next };
+    });
+  },
+
+  setCurrentOperation(op) {
+    set({ currentOperation: op });
+  },
+
+  setLatestTodos(todos) {
+    set({ latestTodos: todos });
+  },
+
+  upsertPageFile(path, content) {
+    set((s) => ({ pageFiles: { ...s.pageFiles, [path]: content } }));
+  },
+
+  setActivePagePath(path) {
+    set({ activePagePath: path });
+  },
+
   async loadConfig() {
     if (!window.codesign) {
       set({
@@ -1498,7 +1582,8 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         hasAttachments: (input.attachments?.length ?? 0) > 0,
       },
     });
-    if (get().isGenerating) return;
+    const targetDesignId = get().currentDesignId;
+    if (targetDesignId !== null && get().activeGenerations.has(targetDesignId)) return;
     if (!window.codesign) {
       const msg = tr('errors.rendererDisconnected');
       set({ errorMessage: msg, lastError: msg });
@@ -1548,18 +1633,26 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     const pendingEditIds = pendingEdits.map((c) => c.id);
 
     const generationId = newId();
-    const designIdAtStart = get().currentDesignId;
-    set(() => ({
-      isGenerating: true,
-      activeGenerationId: generationId,
-      generatingDesignId: designIdAtStart,
-      generationStage: 'sending',
-      streamingAssistantText: null,
-      errorMessage: null,
-      lastPromptInput: request,
-      selectedElement: null,
-      iframeErrors: [],
-    }));
+    const designIdAtStart = targetDesignId ?? get().currentDesignId;
+    set((s) => {
+      const nextActiveGenerations = new Set(s.activeGenerations);
+      if (designIdAtStart) nextActiveGenerations.add(designIdAtStart);
+      return {
+        isGenerating: true,
+        activeGenerationId: generationId,
+        generatingDesignId: designIdAtStart,
+        activeGenerations: nextActiveGenerations,
+        generationStage: 'sending',
+        generationStartedAt: Date.now(),
+        currentOperation: null,
+        streamingAssistantText: null,
+        errorMessage: null,
+        lastPromptInput: request,
+        selectedElement: null,
+        iframeErrors: [],
+        consoleLogs: [],
+      };
+    });
 
     // Cap cross-generate history to the most recent turns. The agent re-reads
     // the current HTML via text_editor.view() when needed, so older prose in
@@ -1671,6 +1764,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
       return;
     }
 
+    const cancelDesignId = get().generatingDesignId;
     void window.codesign
       .cancelGeneration(id)
       .then(() => {
@@ -1680,7 +1774,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
           generatingDesignId: null,
           streamingAssistantText: null,
           generationStage: 'idle' as GenerationStage,
-        }));
+        }), cancelDesignId);
       })
       .catch((err) => {
         const msg = err instanceof Error ? err.message : tr('errors.unknown');
@@ -1709,7 +1803,8 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
 
   async applyInlineComment(comment) {
     const trimmed = comment.trim();
-    if (!trimmed || get().isGenerating) return;
+    const currentId = get().currentDesignId;
+    if (!trimmed || (currentId !== null && get().activeGenerations.has(currentId))) return;
     if (!window.codesign) return;
     const cfg = get().config;
     const html = get().previewHtml;
@@ -1721,12 +1816,18 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     const attachments = uniqueFiles(get().inputFiles);
     const designIdAtStart = get().currentDesignId;
 
-    set(() => ({
-      isGenerating: true,
-      generatingDesignId: designIdAtStart,
-      errorMessage: null,
-      iframeErrors: [],
-    }));
+    set((s) => {
+      const nextActiveGenerations = new Set(s.activeGenerations);
+      if (designIdAtStart) nextActiveGenerations.add(designIdAtStart);
+      return {
+        isGenerating: true,
+        generatingDesignId: designIdAtStart,
+        activeGenerations: nextActiveGenerations,
+        errorMessage: null,
+        iframeErrors: [],
+        consoleLogs: [],
+      };
+    });
 
     if (designIdAtStart) {
       void get().appendChatMessage({
@@ -1758,12 +1859,15 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
                 nextHtml,
               )
             : { cache: s.previewHtmlByDesign, recent: s.recentDesignIds };
+        const nextActiveGenerations = new Set(s.activeGenerations);
+        if (designIdAtStart) nextActiveGenerations.delete(designIdAtStart);
         return {
           previewHtml: nextHtml,
           previewHtmlByDesign: pool.cache,
           recentDesignIds: pool.recent,
-          isGenerating: false,
+          isGenerating: nextActiveGenerations.size > 0,
           generatingDesignId: null,
+          activeGenerations: nextActiveGenerations,
           selectedElement: null,
           lastUsage: usage,
         };
@@ -1783,12 +1887,17 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
       }
     } catch (err) {
       const msg = err instanceof Error ? err.message : tr('errors.unknown');
-      set(() => ({
-        isGenerating: false,
-        generatingDesignId: null,
-        errorMessage: msg,
-        lastError: msg,
-      }));
+      set((s) => {
+        const nextActiveGenerations = new Set(s.activeGenerations);
+        if (designIdAtStart) nextActiveGenerations.delete(designIdAtStart);
+        return {
+          isGenerating: nextActiveGenerations.size > 0,
+          generatingDesignId: null,
+          activeGenerations: nextActiveGenerations,
+          errorMessage: msg,
+          lastError: msg,
+        };
+      });
       if (designIdAtStart) {
         void get().appendChatMessage({
           designId: designIdAtStart,
@@ -1928,17 +2037,6 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
 
   async createNewDesign(workspacePath?: string | null) {
     if (!window.codesign) return null;
-    if (get().isGenerating) {
-      // Don't silently drop the request — callers like the Examples flow
-      // assume "clicked = new design". A hidden no-op makes the prompt appear
-      // to have vanished into the current design instead.
-      get().pushToast({
-        variant: 'info',
-        title: tr('projects.notifications.createFailed'),
-        description: tr('projects.notifications.busyGenerating'),
-      });
-      return null;
-    }
     const existingNames = new Set(get().designs.map((d) => d.name));
     let n = 1;
     while (existingNames.has(`Untitled design ${n}`)) n += 1;
@@ -1950,6 +2048,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         previewHtml: null,
         errorMessage: null,
         iframeErrors: [],
+        consoleLogs: [],
+        latestTodos: null,
+        pageFiles: {},
+        activePagePath: 'index.html',
         selectedElement: null,
         lastPromptInput: null,
         designsViewOpen: false,
@@ -2031,6 +2133,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         recentDesignIds: incomingPool.recent,
         errorMessage: null,
         iframeErrors: [],
+        consoleLogs: [],
+        latestTodos: null,
+        pageFiles: {},
+        activePagePath: 'index.html',
         selectedElement: null,
         lastPromptInput: null,
         designsViewOpen: false,
@@ -2085,6 +2191,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         recentDesignIds: incomingPool.recent,
         errorMessage: null,
         iframeErrors: [],
+        consoleLogs: [],
+        latestTodos: null,
+        pageFiles: {},
+        activePagePath: 'index.html',
         selectedElement: null,
         lastPromptInput: null,
         designsViewOpen: false,
@@ -2160,7 +2270,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
 
   async softDeleteDesign(id: string) {
     if (!window.codesign) return;
-    if (get().isGenerating) {
+    if (get().activeGenerations.has(id)) {
       get().pushToast({
         variant: 'info',
         title: tr('projects.notifications.deleteBlockedGenerating'),
@@ -2225,7 +2335,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   requestWorkspaceRebind(design, newPath) {
     // Block workspace changes while the current design is generating
     const state = get();
-    if (state.isGenerating && state.generatingDesignId === state.currentDesignId) {
+    if (state.currentDesignId !== null && state.activeGenerations.has(state.currentDesignId)) {
       return;
     }
     set({ workspaceRebindPending: { design, newPath } });
@@ -2449,7 +2559,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     // is looking at OR what is actively generating. This prevents a background
     // run on design A from blowing away the preview while the user has switched
     // to design B.
-    if (state.currentDesignId !== designId && state.generatingDesignId !== designId) {
+    if (state.currentDesignId !== designId && !state.activeGenerations.has(designId)) {
       // The event's design isn't visible — still update its pool entry so
       // switching back later reflects the streamed-in HTML.
       const pool = recordPreviewInPool(
diff --git a/apps/desktop/src/renderer/src/views/hub/DesignGrid.tsx b/apps/desktop/src/renderer/src/views/hub/DesignGrid.tsx
index 81155fe4..aece4aa4 100644
--- a/apps/desktop/src/renderer/src/views/hub/DesignGrid.tsx
+++ b/apps/desktop/src/renderer/src/views/hub/DesignGrid.tsx
@@ -62,6 +62,7 @@ export function DesignGrid({ designs, emptyLabel, prefixTile }: DesignGridProps)
   const setView = useCodesignStore((s) => s.setView);
   const requestRenameDesign = useCodesignStore((s) => s.requestRenameDesign);
   const requestDeleteDesign = useCodesignStore((s) => s.requestDeleteDesign);
+  const activeGenerations = useCodesignStore((s) => s.activeGenerations);
   const { pos, open, close } = useMenu();
 
   if (designs.length === 0 && !prefixTile) {
@@ -89,6 +90,7 @@ export function DesignGrid({ designs, emptyLabel, prefixTile }: DesignGridProps)
         {prefixTile ? <li>{prefixTile}</li> : null}
         {designs.map((d) => {
           const updated = formatRelativeTime(d.updatedAt);
+          const isActive = activeGenerations.has(d.id);
           return (
             <li key={d.id}>
               <div
@@ -109,6 +111,12 @@ export function DesignGrid({ designs, emptyLabel, prefixTile }: DesignGridProps)
 
                 <div className="relative aspect-[4/3] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-background-secondary)] transition-[transform,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out)] group-hover:-translate-y-[2px] group-hover:border-[var(--color-border)] group-hover:shadow-[var(--shadow-card)] focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)]">
                   <DesignCardPreview design={d} />
+                  {isActive && (
+                    <div className="absolute top-[var(--space-2)] left-[var(--space-2)] z-[2] flex items-center gap-1 px-2 py-0.5 rounded-full bg-[var(--color-accent)] text-white text-[10px] font-medium shadow-[var(--shadow-soft)]">
+                      <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
+                      Generating
+                    </div>
+                  )}
                 </div>
 
                 <button
diff --git a/apps/desktop/src/renderer/src/views/hub/RecentTab.tsx b/apps/desktop/src/renderer/src/views/hub/RecentTab.tsx
index 2949d82f..fb0caee9 100644
--- a/apps/desktop/src/renderer/src/views/hub/RecentTab.tsx
+++ b/apps/desktop/src/renderer/src/views/hub/RecentTab.tsx
@@ -10,7 +10,7 @@ export function RecentTab() {
   const designs = useCodesignStore((s) => s.designs);
   const openNewDesignDialog = useCodesignStore((s) => s.openNewDesignDialog);
   const isGenerating = useCodesignStore(
-    (s) => s.isGenerating && s.generatingDesignId === s.currentDesignId,
+    (s) => s.currentDesignId !== null && s.activeGenerations.has(s.currentDesignId),
   );
   const recent = [...designs]
     .filter((d) => d.deletedAt === null)
diff --git a/packages/core/package.json b/packages/core/package.json
index 24063270..c912ce8c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -13,8 +13,8 @@
     "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@mariozechner/pi-agent-core": "^0.70.2",
-    "@mariozechner/pi-ai": "^0.70.2",
+    "@mariozechner/pi-agent-core": "^0.67.68",
+    "@mariozechner/pi-ai": "^0.67.68",
     "@open-codesign/artifacts": "workspace:*",
     "@open-codesign/providers": "workspace:*",
     "@open-codesign/shared": "workspace:*",
diff --git a/packages/core/src/agent.ts b/packages/core/src/agent.ts
index 4e2e7a77..29dec0e6 100644
--- a/packages/core/src/agent.ts
+++ b/packages/core/src/agent.ts
@@ -367,6 +367,8 @@ const AGENTIC_TOOL_GUIDANCE = [
   '',
   '## Output format (STRICT — no exceptions)',
   '',
+  '**CRITICAL: Do NOT write a full HTML document.** Never emit `<!doctype html>`, `<html>`, `<head>`, `<body>`, or `<script src="...">` tags. The host injects those. Writing a full HTML page is a hard failure — it breaks the live preview and wastes your entire context budget.',
+  '',
   'Your artifact lives in `index.html` and follows this template — write it via',
   '`text_editor.create("index.html", ...)`:',
   '',
@@ -404,16 +406,15 @@ const AGENTIC_TOOL_GUIDANCE = [
   "- Don't rewrite the marker block at runtime; the host edits it.",
   '',
   '### Required cadence',
-  '1. **First turn — plan.** Call `set_todos` with **7–10 checklist items** naming concrete sections AND an explicit `Interactive polish` step near the end (e.g. "Hero", "Metrics row", "CFO pull quote", "How we did it", "Logo strip", "Interactive polish: hover/press, tabs, empty states", "Final proof-read"). Each item is a single component or refinement pass — not "Build page". Mark all unchecked.',
-  '2. **Second turn — skeleton.** Use `text_editor.create("index.html", ...)` to write a minimal scaffold: the EDITMODE block, an empty `App` returning a basic layout container, and the `ReactDOM.createRoot` line. **Do not** include any section content yet. Then `set_todos` with skeleton ticked.',
-  '3. **One section per turn — fill.** For each remaining todo, in its own turn:',
+  '1. **First turn — plan + skeleton.** In a SINGLE turn: (a) call `set_todos` with **7–10 checklist items** naming concrete sections AND an explicit `Interactive polish` step near the end (e.g. "Hero", "Metrics row", "CFO pull quote", "How we did it", "Logo strip", "Interactive polish: hover/press, tabs, empty states", "Final proof-read"). Each item is a single component or refinement pass — not "Build page". Mark all unchecked. (b) IMMEDIATELY call `text_editor.create("index.html", ...)` in the SAME turn to write a minimal scaffold: the EDITMODE block (with at least 3 starter tokens), a real `App` shell with a visible header/hero placeholder (not an empty div), and the `ReactDOM.createRoot` line. The user sees a live preview after Turn 1 — do NOT delay the file write to a later turn. Then call `set_todos` to tick the skeleton item.',
+  '2. **One section per turn — fill.** For each remaining todo, in its own turn:',
   '   1. One short prose line announcing what you\'re about to do ("Adding the metrics row now.").',
   '   2. `view` the file (1 call).',
   "   3. `str_replace` to add ONE section's JSX (1 call).",
   '   4. One short prose line reflecting on what landed ("Three KPIs in place — the deltas use mono tnum so they line up.").',
   '   5. Tick the matching todo via `set_todos`.',
   '   That is **2 prose lines + 3 tool calls per turn**. Never batch multiple sections into a single str_replace; never run two str_replace tools in the same turn without a prose line in between.',
-  '4. **Polish passes — interactive depth (MANDATORY, ≥2 dedicated turns).** The first polish turn wires interactions; the second adds small-detail craft. These are NOT optional — if the user sees static pixels where they expected live UI, the artifact fails. Before `done` every item on this list must be TRUE:',
+  '3. **Polish passes — interactive depth (MANDATORY, ≥2 dedicated turns).** The first polish turn wires interactions; the second adds small-detail craft. These are NOT optional — if the user sees static pixels where they expected live UI, the artifact fails. Before `done` every item on this list must be TRUE:',
   '   (a) **≥3 functional state changes** that a user can trigger and observe. Tab switch revealing a different view, accordion open/close, drawer slide-in, favorite/like toggle that persists, dropdown/menu expand, inline-edit, filter chip toggle, modal open. Pure hover effects do NOT count toward this three.',
   '   (b) **≥1 animated view/page transition** if there is any nav (tabs, sidebar, bottom bar, breadcrumbs). 180–260ms, opacity + small translate. A hard cut between views is a failure.',
   '   (c) **Every `<button>` and `<a>` does something.** No decorative buttons. Wire a state change, open a modal, fire a toast, or remove it. Login / Sign-up / CTA buttons on marketing pages may open a modal stub — still real, not dead.',
@@ -423,7 +424,7 @@ const AGENTIC_TOOL_GUIDANCE = [
   '   (g) **Active nav indicator uses weight/shape, not color alone** — underline, inset background, side-accent bar, or pill — so color-blind users can tell where they are.',
   '   (h) Data reads real: varied names, non-round numbers (87 %, $14.2k), relative dates ("3h ago", "yesterday"), not Lorem / 100 % / Jan 1 2020.',
   '   Break this into TWO todo items: `Interactive wiring (state + transitions)` and `Craft surplus (small details)`. Tick them explicitly so the user can see both phases landed.',
-  '5. **Final turn — summary.** 2–4 sentences of natural-language prose explaining 2–3 design decisions worth noting (e.g. "Used three distinct surface tones for depth"). Do NOT re-emit the file content; the host extracts it from the virtual fs. Pasting the full file here wastes ~2M tokens on the next turn and will crash the request — this is a hard failure, not a style nit.',
+  '4. **Final turn — summary.** 2–4 sentences of natural-language prose explaining 2–3 design decisions worth noting (e.g. "Used three distinct surface tones for depth"). Do NOT re-emit the file content; the host extracts it from the virtual fs. Pasting the full file here wastes ~2M tokens on the next turn and will crash the request — this is a hard failure, not a style nit.',
   '',
   '### File output policy (STRICT)',
   "- Use `str_replace_based_edit_tool` for ALL file content. Do NOT emit `<artifact>` tags or fenced ```jsx/```html blocks containing the source in your prose — the host extracts the artifact from the virtual fs and any inline source spams the user's chat.",
@@ -473,15 +474,13 @@ const AGENTIC_TOOL_GUIDANCE = [
   '',
   'Each declares a `// when_to_use:` hint at the top — read it before adopting.',
   '',
-  '## Multi-view designs — when the brief implies navigation',
+  '## Multi-page designs — tabs vs. view-state',
   '',
-  'Many briefs (landing + pricing, product + docs, app with dashboard/settings/',
-  'inbox, multi-step onboarding) need more than one surface. The preview',
-  'sandbox has NO routing and blocks `<a href="/route">` navigation — clicking',
-  'any link with a real href would blank the iframe. So:',
+  'The preview has two patterns for multi-surface designs:',
   '',
-  '**Always build multi-view designs as React view-state in one App**, not with',
-  'href navigation. Pattern:',
+  '**Option A — React view-state (in-page navigation):** Put all views in `index.html`',
+  'and switch between them with `React.useState`. Use this for app UIs (dashboard,',
+  'settings, inbox) where pages share a shell/nav component.',
   '',
   '```jsx',
   'function App() {',
@@ -491,14 +490,20 @@ const AGENTIC_TOOL_GUIDANCE = [
   '      <Nav current={view} onNavigate={setView} />',
   '      {view === "home" && <HomeView/>}',
   '      {view === "pricing" && <PricingView/>}',
-  '      {view === "docs" && <DocsView/>}',
   '    </>',
   '  );',
   '}',
   '```',
   '',
-  'Nav buttons use `onClick={() => setView(...)}`, NOT `<a href>`. If you must',
-  'use `<a>` for visual reasons, make it `<a href="#" onClick={e => { e.preventDefault(); setView(...); }}>`.',
+  '**Option B — Separate page files (page tabs):** Create additional files named',
+  '`page-<name>.html` (e.g. `page-about.html`, `page-pricing.html`). The preview',
+  'shows a tab bar above the canvas — each tab loads that file independently.',
+  'Use this when pages are truly distinct (different layouts, landing page + docs,',
+  'marketing site sections). Each page file is a standalone React artifact.',
+  '',
+  'Nav buttons MUST NOT use `<a href>` — the sandbox blocks navigation.',
+  'Use `onClick={() => setView(...)}` for Option A, or inform the user to use',
+  'the page tabs for Option B.',
   '',
   'When the brief implies depth, produce **3–5 distinct views**. Each view',
   'should:',
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index 72493250..06cc3645 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -254,6 +254,7 @@
       "moreActions": "More actions",
       "editModel": "Change model",
       "deleteAria": "Delete {{label}} provider",
+      "noModel": "No model selected",
       "primary": "Primary",
       "fast": "Fast",
       "custom": {
@@ -329,6 +330,7 @@
         "ollamaDone": "Ollama provider added",
         "customMenu": "Custom provider",
         "customMenuDesc": "Enter API key and URL manually",
+        "openrouterMenuDesc": "Access 200+ models with one API key",
         "alreadyImported": "Already imported"
       },
       "modal": {
@@ -467,6 +469,19 @@
       "prefsLoadFailed": "Failed to load preferences",
       "prefsSaveFailed": "Failed to save preference",
       "devtoolsFailed": "Could not toggle DevTools"
+    },
+    "modelRouting": {
+      "title": "Model routing",
+      "hint": "Route quick tasks (inline edits, lint passes) to a cheaper/faster model to reduce cost.",
+      "primaryLabel": "Primary model",
+      "primaryHint": "Used for full design generation runs.",
+      "fastLabel": "Fast model",
+      "fastHint": "Used for quick inline edits and lint passes. Falls back to primary if unset.",
+      "fastPlaceholder": "e.g. claude-haiku-4-5",
+      "usePrimary": "Same as primary",
+      "saveButton": "Save",
+      "saved": "Model routing saved",
+      "saveFailed": "Failed to save model routing"
     }
   },
   "updates": {
diff --git a/packages/providers/package.json b/packages/providers/package.json
index 8045c280..be9650e6 100644
--- a/packages/providers/package.json
+++ b/packages/providers/package.json
@@ -14,7 +14,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@mariozechner/pi-ai": "^0.70.2",
+    "@mariozechner/pi-ai": "^0.67.68",
     "@open-codesign/shared": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/runtime/src/iframe-errors.ts b/packages/runtime/src/iframe-errors.ts
index 6f683b04..e54f6614 100644
--- a/packages/runtime/src/iframe-errors.ts
+++ b/packages/runtime/src/iframe-errors.ts
@@ -31,3 +31,23 @@ export function isIframeErrorMessage(data: unknown): data is IframeErrorMessage
     typeof (data as { message?: unknown }).message === 'string'
   );
 }
+
+export type ConsoleLevel = 'log' | 'warn' | 'error' | 'info' | 'debug';
+
+export interface IframeConsoleMessage {
+  __codesign: true;
+  type: 'CONSOLE_LOG';
+  level: ConsoleLevel;
+  args: string[];
+  timestamp: number;
+}
+
+export function isIframeConsoleMessage(data: unknown): data is IframeConsoleMessage {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    (data as { __codesign?: boolean }).__codesign === true &&
+    (data as { type?: string }).type === 'CONSOLE_LOG' &&
+    Array.isArray((data as { args?: unknown }).args)
+  );
+}
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
index dc06db47..a0b12794 100644
--- a/packages/runtime/src/index.ts
+++ b/packages/runtime/src/index.ts
@@ -28,8 +28,8 @@ import { TWEAKS_BRIDGE_LISTENER, TWEAKS_BRIDGE_SETUP } from './tweaks-bridge';
 
 export { OVERLAY_SCRIPT, isOverlayMessage, isElementRectsMessage } from './overlay';
 export type { OverlayMessage, ElementRectsMessage } from './overlay';
-export { isIframeErrorMessage } from './iframe-errors';
-export type { IframeErrorMessage } from './iframe-errors';
+export { isIframeErrorMessage, isIframeConsoleMessage } from './iframe-errors';
+export type { IframeErrorMessage, IframeConsoleMessage, ConsoleLevel } from './iframe-errors';
 
 const JSX_TEMPLATE_BEGIN = '<!-- AGENT_BODY_BEGIN -->';
 const JSX_TEMPLATE_END = '<!-- AGENT_BODY_END -->';
@@ -85,18 +85,37 @@ function overlayScriptTag(): string {
   return `${OVERLAY_MARKER}<script>${OVERLAY_SCRIPT}</script>`;
 }
 
+function injectVendorsIfNeeded(html: string): string {
+  // Full HTML docs that include type="text/babel" scripts need React/Babel
+  // pre-loaded. Detect by absence of react UMD and presence of babel script.
+  const hasBabel = /<script[^>]*type=["']text\/babel["']/i.test(html);
+  if (!hasBabel) return html;
+  // Only treat React as "already loaded" when there's a <script> tag that
+  // references a react library file — NOT when "React" or "ReactDOM" merely
+  // appears inside JSX source code (e.g. ReactDOM.createRoot(...)).
+  const hasReactScript =
+    /<script[^>]*(?:react(?:[-.]dom)?)\.(?:development|production|min|umd)/i.test(html) ||
+    /<script[^>]*src=["'][^"']*react/i.test(html) ||
+    /window\.(React|ReactDOM)\s*=/i.test(html);
+  if (hasReactScript) return html;
+  const vendors = `<script>${REACT_UMD}</script>\n<script>${REACT_DOM_UMD}</script>\n<script>${BABEL_STANDALONE}</script>\n`;
+  // Inject before the first text/babel script tag so vendors load first
+  return html.replace(/<script[^>]*type=["']text\/babel["']/i, `${vendors}$&`);
+}
+
 function injectOverlayIntoHtmlDocument(html: string): string {
   if (html.includes(OVERLAY_MARKER) || html.includes("type: 'ELEMENT_SELECTED'")) {
     return html;
   }
+  const withVendors = injectVendorsIfNeeded(html);
   const script = overlayScriptTag();
-  if (/<\/body\s*>/i.test(html)) {
-    return html.replace(/<\/body\s*>/i, `${script}</body>`);
+  if (/<\/body\s*>/i.test(withVendors)) {
+    return withVendors.replace(/<\/body\s*>/i, `${script}</body>`);
   }
-  if (/<\/html\s*>/i.test(html)) {
-    return html.replace(/<\/html\s*>/i, `${script}</html>`);
+  if (/<\/html\s*>/i.test(withVendors)) {
+    return withVendors.replace(/<\/html\s*>/i, `${script}</html>`);
   }
-  return `${html}${script}`;
+  return `${withVendors}${script}`;
 }
 
 /**
diff --git a/packages/runtime/src/overlay.ts b/packages/runtime/src/overlay.ts
index 832200c5..f6ac12b5 100644
--- a/packages/runtime/src/overlay.ts
+++ b/packages/runtime/src/overlay.ts
@@ -297,6 +297,38 @@ export const OVERLAY_SCRIPT = `(function() {
     }
   } catch (err) { try { console.warn('[overlay] setInterval reattach failed:', err); } catch (_) {} }
 
+  // Console interception — forward log/warn/error/info/debug to parent.
+  // Re-entrancy guard prevents our own postMessage call (which can itself
+  // trigger framework logging) from creating an infinite loop.
+  try {
+    if (!window.__cs_console) {
+      window.__cs_console = true;
+      var _cs_posting = false;
+      var _consoleMethods = ['log', 'warn', 'error', 'info', 'debug'];
+      for (var _cmi = 0; _cmi < _consoleMethods.length; _cmi++) {
+        (function(level, origFn) {
+          console[level] = function() {
+            if (_cs_posting) { try { origFn.apply(console, arguments); } catch(_) {} return; }
+            _cs_posting = true;
+            try {
+              var args = [];
+              for (var ai = 0; ai < arguments.length; ai++) {
+                try {
+                  var v = arguments[ai];
+                  if (typeof v === 'string') { args.push(v); }
+                  else { try { args.push(JSON.stringify(v)); } catch(_) { args.push(String(v)); } }
+                } catch(_) { args.push('[unserializable]'); }
+              }
+              window.parent.postMessage({ __codesign: true, type: 'CONSOLE_LOG', level: level, args: args, timestamp: Date.now() }, '*');
+            } catch(_) {}
+            _cs_posting = false;
+            try { origFn.apply(console, arguments); } catch(_) {}
+          };
+        })(_consoleMethods[_cmi], console[_consoleMethods[_cmi]]);
+      }
+    }
+  } catch(err) { try { console.warn('[overlay] console interception failed:', err); } catch(_) {} }
+
   // Neutralize programmatic navigation — generated code may call
   // window.location = '/foo', location.assign('/x'), or window.open(...)
   // in button onclick handlers. None of those routes exist in the sandbox and
diff --git a/packages/shared/src/config.ts b/packages/shared/src/config.ts
index 68d61881..87c16d43 100644
--- a/packages/shared/src/config.ts
+++ b/packages/shared/src/config.ts
@@ -352,6 +352,8 @@ export const ConfigV3Schema = z.object({
   // hanging the main process before the window could open.
   activeProvider: z.string(),
   activeModel: z.string(),
+  /** Optional cheaper/faster model used for quick tasks (inline edits, lint passes). */
+  modelFast: z.string().optional(),
   secrets: z.record(z.string(), SecretRef).default({}),
   providers: z.record(z.string(), ProviderEntrySchema).default({}),
   designSystem: StoredDesignSystem.optional(),
@@ -466,6 +468,7 @@ export function toPersistedV3(cfg: Config | ConfigV3): ConfigV3 {
     version: 3,
     activeProvider: cfg.activeProvider,
     activeModel: cfg.activeModel,
+    ...(cfg.modelFast !== undefined ? { modelFast: cfg.modelFast } : {}),
     secrets: cfg.secrets,
     providers: cfg.providers,
     ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
@@ -479,6 +482,8 @@ export interface OnboardingState {
   hasKey: boolean;
   provider: string | null;
   modelPrimary: string | null;
+  /** Optional cheaper/faster model used for quick tasks (inline edits, lint passes). */
+  modelFast: string | null;
   baseUrl: string | null;
   designSystem: StoredDesignSystem | null;
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 04436a8e..07d6a4da 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,7 +17,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "tailwindcss": "^4.2.4"
+    "tailwindcss": "^4.0.0"
   },
   "dependencies": {
     "@fontsource-variable/fraunces": "^5.1.1",
@@ -32,7 +32,7 @@
     "happy-dom": "^20.9.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tailwindcss": "^4.2.4",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
     "vitest": "^2.1.8"
   }
diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css
index f8974f0c..95a4a6f8 100644
--- a/packages/ui/src/tokens.css
+++ b/packages/ui/src/tokens.css
@@ -123,7 +123,7 @@
   --size-input-height: 40px;
 
   /* Titlebar (Electron frameless window) */
-  --size-titlebar-height: 96px;
+  --size-titlebar-height: 48px;
   --size-titlebar-pad-left: 72px; /* clears macOS traffic-light buttons */
 
   /* Chip / file-token max width */
diff --git a/website/package.json b/website/package.json
index 55224dc7..a09fdd03 100644
--- a/website/package.json
+++ b/website/package.json
@@ -8,8 +8,8 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.4",
-    "tailwindcss": "^4.2.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
     "vitepress": "^1.6.4"
   }
 }

From 07a11f5929c89e3345518b94f0a9c80e11cecf46 Mon Sep 17 00:00:00 2001
From: Aleel101 <AleelsJourney@gmail.com>
Date: Sun, 26 Apr 2026 07:35:07 -0400
Subject: [PATCH 2/7] refactor: enhance configuration handling with preserved
 optional fields

- Introduced `preservedV3OptionalsForWrite` function to maintain optional fields during configuration updates.
- Updated various IPC handlers to utilize the new function, ensuring optional fields like `designSystem` and `imageGeneration` are preserved when writing configurations.
- Added tests for the new functionality to verify correct behavior in different scenarios.
- Adjusted dependencies in `pnpm-lock.yaml` to reflect version changes for several packages.
---
 .changeset/persist-fast-model-v3.md           |  6 ++
 apps/desktop/src/main/codex-oauth-ipc.ts      |  5 +-
 .../src/main/image-generation-settings.ts     |  3 +-
 apps/desktop/src/main/onboarding-ipc.ts       | 72 +++++++-------
 packages/shared/src/config.test.ts            | 44 +++++++++
 packages/shared/src/config.ts                 | 29 ++++++
 packages/shared/src/index.ts                  |  1 +
 pnpm-lock.yaml                                | 97 ++++++++++++-------
 8 files changed, 179 insertions(+), 78 deletions(-)
 create mode 100644 .changeset/persist-fast-model-v3.md

diff --git a/.changeset/persist-fast-model-v3.md b/.changeset/persist-fast-model-v3.md
new file mode 100644
index 00000000..65f493ef
--- /dev/null
+++ b/.changeset/persist-fast-model-v3.md
@@ -0,0 +1,6 @@
+---
+"@open-codesign/shared": patch
+"@open-codesign/desktop": patch
+---
+
+Preserve `modelFast`, `imageGeneration`, and `designSystem` when other settings writes rebuild the on-disk v3 config, so the fast model and related optionals are not cleared after the next provider or import save.
diff --git a/apps/desktop/src/main/codex-oauth-ipc.ts b/apps/desktop/src/main/codex-oauth-ipc.ts
index fdcd7436..f57791d6 100644
--- a/apps/desktop/src/main/codex-oauth-ipc.ts
+++ b/apps/desktop/src/main/codex-oauth-ipc.ts
@@ -18,6 +18,7 @@ import {
   ERROR_CODES,
   type ProviderEntry,
   hydrateConfig,
+  preservedV3OptionalsForWrite,
 } from '@open-codesign/shared';
 import { configDir, writeConfig } from './config';
 import { ipcMain, shell } from './electron-runtime';
@@ -133,7 +134,7 @@ async function persistProviderMutation(
     activeModel: cfg?.activeModel ?? '',
     secrets: cfg?.secrets ?? {},
     providers: nextProviders,
-    ...(cfg?.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+    ...preservedV3OptionalsForWrite(cfg),
   });
   await writeConfig(next);
   setCachedConfig(next);
@@ -155,7 +156,7 @@ async function claimActiveProviderIfUnset(): Promise<void> {
     activeModel: CHATGPT_CODEX_PROVIDER.defaultModel,
     secrets: cfg.secrets,
     providers: cfg.providers,
-    ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+    ...preservedV3OptionalsForWrite(cfg),
   });
   await writeConfig(next);
   setCachedConfig(next);
diff --git a/apps/desktop/src/main/image-generation-settings.ts b/apps/desktop/src/main/image-generation-settings.ts
index 1ca27b08..8c94fedc 100644
--- a/apps/desktop/src/main/image-generation-settings.ts
+++ b/apps/desktop/src/main/image-generation-settings.ts
@@ -21,6 +21,7 @@ import {
   type ImageGenerationSize,
   ImageGenerationSizeSchema,
   hydrateConfig,
+  preservedV3OptionalsForWrite,
 } from '@open-codesign/shared';
 import { writeConfig } from './config';
 import { ipcMain } from './electron-runtime';
@@ -281,7 +282,7 @@ async function updateImageGenerationSettings(
     activeModel: cfg.activeModel,
     secrets: cfg.secrets,
     providers: cfg.providers,
-    ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+    ...preservedV3OptionalsForWrite(cfg, { skipImageGeneration: true }),
     imageGeneration: parsed,
   });
   await writeConfig(config);
diff --git a/apps/desktop/src/main/onboarding-ipc.ts b/apps/desktop/src/main/onboarding-ipc.ts
index 22a7c03b..0ecf72e6 100644
--- a/apps/desktop/src/main/onboarding-ipc.ts
+++ b/apps/desktop/src/main/onboarding-ipc.ts
@@ -22,6 +22,8 @@ import {
   hydrateConfig,
   isSupportedOnboardingProvider,
   modelsEndpointUrl,
+  preservedV3OptionalsForWrite,
+  toPersistedV3,
 } from '@open-codesign/shared';
 import { buildAuthHeadersForWire } from './auth-headers';
 import { defaultConfigDir, readConfig, writeConfig } from './config';
@@ -227,6 +229,7 @@ export async function setDesignSystem(
     activeModel: cfg.activeModel,
     secrets: cfg.secrets,
     providers: cfg.providers,
+    ...preservedV3OptionalsForWrite(cfg, { clearDesignSystem: designSystem === null }),
     ...(designSystem !== null ? { designSystem: StoredDesignSystem.parse(designSystem) } : {}),
   });
   await writeConfig(next);
@@ -379,9 +382,7 @@ async function runSetProviderAndModels(input: SetProviderAndModelsInput): Promis
     activeModel: nextActiveModel,
     secrets: nextSecrets,
     providers: nextProviders,
-    ...(cachedConfig?.designSystem !== undefined
-      ? { designSystem: cachedConfig.designSystem }
-      : {}),
+    ...preservedV3OptionalsForWrite(cachedConfig),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -431,7 +432,7 @@ async function runDeleteProvider(raw: unknown): Promise<ProviderRow[]> {
       activeModel: '',
       secrets: {},
       providers: nextProviders,
-      ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+      ...preservedV3OptionalsForWrite(cfg),
     });
     await writeConfig(emptyNext);
     cachedConfig = emptyNext;
@@ -444,7 +445,7 @@ async function runDeleteProvider(raw: unknown): Promise<ProviderRow[]> {
     activeModel: modelPrimary,
     secrets: nextSecrets,
     providers: nextProviders,
-    ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+    ...preservedV3OptionalsForWrite(cfg),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -475,7 +476,7 @@ async function runSetActiveProvider(raw: unknown): Promise<OnboardingState> {
     activeModel: modelPrimary,
     secrets: cfg.secrets,
     providers: cfg.providers,
-    ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+    ...preservedV3OptionalsForWrite(cfg),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -543,7 +544,7 @@ async function runResetOnboarding(): Promise<void> {
     activeModel: cfg.activeModel,
     secrets: {},
     providers: cfg.providers,
-    ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+    ...preservedV3OptionalsForWrite(cfg),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -655,9 +656,7 @@ async function runAddCustomProvider(input: AddCustomProviderInput): Promise<Onbo
       : (cachedConfig?.activeModel ?? input.defaultModel),
     secrets: nextSecrets,
     providers: nextProviders,
-    ...(cachedConfig?.designSystem !== undefined
-      ? { designSystem: cachedConfig.designSystem }
-      : {}),
+    ...preservedV3OptionalsForWrite(cachedConfig),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -784,7 +783,7 @@ async function runUpdateProvider(input: UpdateProviderInput): Promise<Onboarding
     activeModel: cfg.activeModel,
     secrets: nextSecrets,
     providers: { ...cfg.providers, [input.id]: updated },
-    ...(cfg.designSystem !== undefined ? { designSystem: cfg.designSystem } : {}),
+    ...preservedV3OptionalsForWrite(cfg),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -879,9 +878,7 @@ async function runImportCodex(imported: CodexImport): Promise<OnboardingState> {
     activeModel,
     secrets: nextSecrets,
     providers: nextProviders,
-    ...(cachedConfig?.designSystem !== undefined
-      ? { designSystem: cachedConfig.designSystem }
-      : {}),
+    ...preservedV3OptionalsForWrite(cachedConfig),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -936,9 +933,7 @@ async function runImportClaudeCode(imported: ClaudeCodeImport): Promise<Onboardi
     activeModel: nextActiveModel,
     secrets: nextSecrets,
     providers: nextProviders,
-    ...(cachedConfig?.designSystem !== undefined
-      ? { designSystem: cachedConfig.designSystem }
-      : {}),
+    ...preservedV3OptionalsForWrite(cachedConfig),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -984,9 +979,7 @@ async function runImportGemini(imported: GeminiImport): Promise<OnboardingState>
     activeModel: nextActiveModel,
     secrets: nextSecrets,
     providers: nextProviders,
-    ...(cachedConfig?.designSystem !== undefined
-      ? { designSystem: cachedConfig.designSystem }
-      : {}),
+    ...preservedV3OptionalsForWrite(cachedConfig),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -1030,9 +1023,7 @@ async function runImportOpencode(imported: OpencodeImport): Promise<OnboardingSt
     activeModel,
     secrets: nextSecrets,
     providers: nextProviders,
-    ...(cachedConfig?.designSystem !== undefined
-      ? { designSystem: cachedConfig.designSystem }
-      : {}),
+    ...preservedV3OptionalsForWrite(cachedConfig),
   });
   await writeConfig(next);
   cachedConfig = next;
@@ -1156,22 +1147,25 @@ export function registerOnboardingIpc(): void {
     },
   );
 
-  ipcMain.handle(
-    'config:v1:set-fast-model',
-    async (_e, raw: unknown): Promise<OnboardingState> => {
-      const input = raw as { modelFast: string | null };
-      if (typeof input !== 'object' || input === null || !('modelFast' in input)) {
-        throw new CodesignError(
-          'config:v1:set-fast-model expects { modelFast: string | null }',
-          ERROR_CODES.IPC_BAD_INPUT,
-        );
-      }
-      const modelFast = input.modelFast === '' ? null : input.modelFast;
-      cachedConfig = hydrateConfig({ ...cachedConfig, modelFast: modelFast ?? undefined });
-      await writeConfig(cachedConfig);
-      return toState(cachedConfig);
-    },
-  );
+  ipcMain.handle('config:v1:set-fast-model', async (_e, raw: unknown): Promise<OnboardingState> => {
+    const input = raw as { modelFast: string | null };
+    if (typeof input !== 'object' || input === null || !('modelFast' in input)) {
+      throw new CodesignError(
+        'config:v1:set-fast-model expects { modelFast: string | null }',
+        ERROR_CODES.IPC_BAD_INPUT,
+      );
+    }
+    const modelFast = input.modelFast === '' ? null : input.modelFast;
+    if (cachedConfig === null) {
+      throw new CodesignError('No configuration found', ERROR_CODES.CONFIG_MISSING);
+    }
+    cachedConfig = hydrateConfig({
+      ...toPersistedV3(cachedConfig),
+      modelFast: modelFast ?? undefined,
+    });
+    await writeConfig(cachedConfig);
+    return toState(cachedConfig);
+  });
 
   ipcMain.handle(
     'config:v1:detect-external-configs',
diff --git a/packages/shared/src/config.test.ts b/packages/shared/src/config.test.ts
index b7bf2a10..a8ee406d 100644
--- a/packages/shared/src/config.test.ts
+++ b/packages/shared/src/config.test.ts
@@ -8,6 +8,7 @@ import {
   hydrateConfig,
   migrateLegacyToV3,
   parseConfigFlexible,
+  preservedV3OptionalsForWrite,
   resolveProviderCapabilities,
   toPersistedV3,
 } from './config';
@@ -247,6 +248,49 @@ describe('hydrateConfig / toPersistedV3', () => {
     });
     expect(toPersistedV3(hydrated).imageGeneration?.model).toBe('gpt-image-2');
   });
+
+  it('preservedV3OptionalsForWrite copies optionals; skipImageGeneration omits image gen', () => {
+    const cfg = hydrateConfig({
+      version: 3,
+      activeProvider: 'openai',
+      activeModel: 'gpt-4o',
+      modelFast: 'gpt-4o-mini',
+      secrets: {},
+      providers: { openai: BUILTIN_PROVIDERS.openai },
+      designSystem: {
+        schemaVersion: 1,
+        rootPath: '/a',
+        summary: 's',
+        extractedAt: 't',
+        sourceFiles: [],
+        colors: [],
+        fonts: [],
+        spacing: [],
+        radius: [],
+        shadows: [],
+      },
+      imageGeneration: {
+        schemaVersion: 1,
+        enabled: true,
+        provider: 'openai',
+        credentialMode: 'inherit',
+        model: 'gpt-image-2',
+        quality: 'high',
+        size: '1024x1024',
+        outputFormat: 'png',
+      },
+    });
+    const full = preservedV3OptionalsForWrite(cfg);
+    expect(full.modelFast).toBe('gpt-4o-mini');
+    expect(full.imageGeneration?.model).toBe('gpt-image-2');
+    expect(full.designSystem).toBeDefined();
+    const skipImage = preservedV3OptionalsForWrite(cfg, { skipImageGeneration: true });
+    expect(skipImage.modelFast).toBe('gpt-4o-mini');
+    expect(skipImage.imageGeneration).toBeUndefined();
+    const clearDesign = preservedV3OptionalsForWrite(cfg, { clearDesignSystem: true });
+    expect(clearDesign.modelFast).toBe('gpt-4o-mini');
+    expect(clearDesign.designSystem).toBeUndefined();
+  });
 });
 
 describe('provider capability helpers', () => {
diff --git a/packages/shared/src/config.ts b/packages/shared/src/config.ts
index 87c16d43..30d74923 100644
--- a/packages/shared/src/config.ts
+++ b/packages/shared/src/config.ts
@@ -476,6 +476,35 @@ export function toPersistedV3(cfg: Config | ConfigV3): ConfigV3 {
   };
 }
 
+/**
+ * Spreads for `hydrateConfig` so a partial v3 write does not drop optional
+ * top-level fields from the current config (e.g. `modelFast` when saving a
+ * provider key, or `imageGeneration` when editing providers).
+ */
+export function preservedV3OptionalsForWrite(
+  source: Config | ConfigV3 | null | undefined,
+  options?: {
+    /** Set when `designSystem` is being set or removed in the same write. */
+    clearDesignSystem?: boolean;
+    /** Set when `imageGeneration` is overwritten in the same object. */
+    skipImageGeneration?: boolean;
+  },
+): Partial<Pick<ConfigV3, 'modelFast' | 'imageGeneration' | 'designSystem'>> {
+  if (source == null) return {};
+  const p = toPersistedV3(source);
+  const out: Partial<Pick<ConfigV3, 'modelFast' | 'imageGeneration' | 'designSystem'>> = {};
+  if (p.modelFast !== undefined) {
+    out.modelFast = p.modelFast;
+  }
+  if (p.imageGeneration !== undefined && options?.skipImageGeneration !== true) {
+    out.imageGeneration = p.imageGeneration;
+  }
+  if (p.designSystem !== undefined && options?.clearDesignSystem !== true) {
+    out.designSystem = p.designSystem;
+  }
+  return out;
+}
+
 // ── OnboardingState ──────────────────────────────────────────────────────────
 
 export interface OnboardingState {
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 3cd15041..8e333e52 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -260,6 +260,7 @@ export {
   isSupportedOnboardingProvider,
   migrateLegacyToV3,
   parseConfigFlexible,
+  preservedV3OptionalsForWrite,
   resolveProviderCapabilities,
   toPersistedV3,
 } from './config';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b42f4dc6..7af30b2d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -100,7 +100,7 @@ importers:
         version: 5.0.12(@types/react@19.2.14)(react@19.2.5)
     devDependencies:
       '@tailwindcss/postcss':
-        specifier: ^4.2.4
+        specifier: ^4.0.0
         version: 4.2.4
       '@types/better-sqlite3':
         specifier: ^7.6.13
@@ -121,7 +121,7 @@ importers:
         specifier: ^10.4.20
         version: 10.5.0(postcss@8.5.10)
       electron:
-        specifier: ^39.8.9
+        specifier: ^39.8.8
         version: 39.8.9
       electron-builder:
         specifier: ^26.8.1
@@ -139,7 +139,7 @@ importers:
         specifier: ^4.0.1
         version: 4.0.1
       tailwindcss:
-        specifier: ^4.2.4
+        specifier: ^4.0.0
         version: 4.2.4
       typescript:
         specifier: ^5.7.2
@@ -170,11 +170,11 @@ importers:
   packages/core:
     dependencies:
       '@mariozechner/pi-agent-core':
-        specifier: ^0.70.2
-        version: 0.70.2(ws@8.20.0)(zod@3.25.76)
+        specifier: ^0.67.68
+        version: 0.67.68(ws@8.20.0)(zod@3.25.76)
       '@mariozechner/pi-ai':
-        specifier: ^0.70.2
-        version: 0.70.2(ws@8.20.0)(zod@3.25.76)
+        specifier: ^0.67.68
+        version: 0.67.68(ws@8.20.0)(zod@3.25.76)
       '@open-codesign/artifacts':
         specifier: workspace:*
         version: link:../artifacts
@@ -248,8 +248,8 @@ importers:
   packages/providers:
     dependencies:
       '@mariozechner/pi-ai':
-        specifier: ^0.70.2
-        version: 0.70.2(ws@8.20.0)(zod@3.25.76)
+        specifier: ^0.67.68
+        version: 0.67.68(ws@8.20.0)(zod@3.25.76)
       '@open-codesign/shared':
         specifier: workspace:*
         version: link:../shared
@@ -337,7 +337,7 @@ importers:
         specifier: ^19.0.0
         version: 19.2.5(react@19.2.5)
       tailwindcss:
-        specifier: ^4.2.4
+        specifier: ^4.0.0
         version: 4.2.4
       typescript:
         specifier: ^5.7.2
@@ -349,10 +349,10 @@ importers:
   website:
     devDependencies:
       '@tailwindcss/vite':
-        specifier: ^4.2.4
+        specifier: ^4.0.0
         version: 4.2.4(vite@5.4.21(@types/node@25.6.0)(lightningcss@1.32.0))
       tailwindcss:
-        specifier: ^4.2.4
+        specifier: ^4.0.0
         version: 4.2.4
       vitepress:
         specifier: ^1.6.4
@@ -1393,12 +1393,12 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@mariozechner/pi-agent-core@0.70.2':
-    resolution: {integrity: sha512-g1hIdKyDwmQOoBGO0R4OhpemKeMENeK0vE5FJtuQKqEcsdCAkVBgZAK6aZUARYZVxMA718JS6WPLFWoddzjD7g==}
+  '@mariozechner/pi-agent-core@0.67.68':
+    resolution: {integrity: sha512-anwFuzeUL7Qjbyih4DWY7w1zrOTrBxaz1L6+duLUuuzpHOun0EiP4KWIGTXPT5oJA7ZaeRNTyXJ7PlWfGQG33g==}
     engines: {node: '>=20.0.0'}
 
-  '@mariozechner/pi-ai@0.70.2':
-    resolution: {integrity: sha512-+30LRPjXsXF+oI96DvGWMbdPGeqoLJvadh6UPev7wx2DzhC9FEqXkQcoMZ0usbCm7E9pl8ua8a9s/pQ5ikaUbg==}
+  '@mariozechner/pi-ai@0.67.68':
+    resolution: {integrity: sha512-DWWQmcb3IV3mbGXmzYBScfKA6kA52n/stY029eiBikrIxVT7DGLG6n7KSvTA2R4qBSgi1iFL3nGHtwxmtIn6Lg==}
     engines: {node: '>=20.0.0'}
     hasBin: true
 
@@ -2224,6 +2224,14 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
   ajv-keywords@3.5.2:
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
@@ -2232,6 +2240,9 @@ packages:
   ajv@6.14.0:
     resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
 
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
   algoliasearch@5.50.2:
     resolution: {integrity: sha512-Tfp26yoNWurUjfgK4GOrVJQhSNXu9tJtHfFFNosgT2YClG+vPyUjX/gbC8rG39qLncnZg8Fj34iarQWpMkqefw==}
     engines: {node: '>= 14.0.0'}
@@ -2929,6 +2940,9 @@ packages:
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
   fast-xml-builder@1.1.5:
     resolution: {integrity: sha512-4TJn/8FKLeslLAH3dnohXqE3QSoxkhvaMzepOIZytwJXZO69Bfz0HBdDHzOTOon6G59Zrk6VQ2bEiv1t61rfkA==}
 
@@ -3345,6 +3359,9 @@ packages:
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
   json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
 
@@ -3356,9 +3373,6 @@ packages:
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
-  jsonfile@6.2.0:
-    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
-
   jsonfile@6.2.1:
     resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
 
@@ -4139,6 +4153,10 @@ packages:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
 
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
   resedit@1.7.2:
     resolution: {integrity: sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA==}
     engines: {node: '>=12', npm: '>=6'}
@@ -4504,9 +4522,6 @@ packages:
     resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
     engines: {node: '>=10'}
 
-  typebox@1.1.33:
-    resolution: {integrity: sha512-+/MWwlQ1q2GSVwoxi/+u5JsHkgLQKcCN2Nsjree9c+K7GJu40qbaHrFETmfV1i9Fs1TcOVfynW+jJvIWcXtvjw==}
-
   typed-query-selector@2.12.1:
     resolution: {integrity: sha512-uzR+FzI8qrUEIu96oaeBJmd9E7CFEiQ3goA5qCVgc4s5llSubcfGHq9yUstZx/k4s9dXHVKsE35YWoFyvEqEHA==}
 
@@ -6122,10 +6137,9 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@mariozechner/pi-agent-core@0.70.2(ws@8.20.0)(zod@3.25.76)':
+  '@mariozechner/pi-agent-core@0.67.68(ws@8.20.0)(zod@3.25.76)':
     dependencies:
-      '@mariozechner/pi-ai': 0.70.2(ws@8.20.0)(zod@3.25.76)
-      typebox: 1.1.33
+      '@mariozechner/pi-ai': 0.67.68(ws@8.20.0)(zod@3.25.76)
     transitivePeerDependencies:
       - '@modelcontextprotocol/sdk'
       - aws-crt
@@ -6135,17 +6149,19 @@ snapshots:
       - ws
       - zod
 
-  '@mariozechner/pi-ai@0.70.2(ws@8.20.0)(zod@3.25.76)':
+  '@mariozechner/pi-ai@0.67.68(ws@8.20.0)(zod@3.25.76)':
     dependencies:
       '@anthropic-ai/sdk': 0.90.0(zod@3.25.76)
       '@aws-sdk/client-bedrock-runtime': 3.1037.0
       '@google/genai': 1.50.1
       '@mistralai/mistralai': 2.2.1
+      '@sinclair/typebox': 0.34.49
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
       chalk: 5.6.2
       openai: 6.26.0(ws@8.20.0)(zod@3.25.76)
       partial-json: 0.1.7
       proxy-agent: 6.5.0
-      typebox: 1.1.33
       undici: 7.25.0
       zod-to-json-schema: 3.25.2(zod@3.25.76)
     transitivePeerDependencies:
@@ -7079,6 +7095,10 @@ snapshots:
 
   agent-base@7.1.4: {}
 
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
   ajv-keywords@3.5.2(ajv@6.14.0):
     dependencies:
       ajv: 6.14.0
@@ -7090,6 +7110,13 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
   algoliasearch@5.50.2:
     dependencies:
       '@algolia/abtesting': 1.16.2
@@ -7915,6 +7942,8 @@ snapshots:
 
   fast-json-stable-stringify@2.1.0: {}
 
+  fast-uri@3.1.0: {}
+
   fast-xml-builder@1.1.5:
     dependencies:
       path-expression-matcher: 1.5.0
@@ -7986,7 +8015,7 @@ snapshots:
   fs-extra@10.1.0:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 6.2.0
+      jsonfile: 6.2.1
       universalify: 2.0.1
 
   fs-extra@11.3.4:
@@ -8395,6 +8424,8 @@ snapshots:
 
   json-schema-traverse@0.4.1: {}
 
+  json-schema-traverse@1.0.0: {}
+
   json-stringify-safe@5.0.1:
     optional: true
 
@@ -8404,12 +8435,6 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.2.0:
-    dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
-
   jsonfile@6.2.1:
     dependencies:
       universalify: 2.0.1
@@ -9442,6 +9467,8 @@ snapshots:
 
   require-directory@2.1.1: {}
 
+  require-from-string@2.0.2: {}
+
   resedit@1.7.2:
     dependencies:
       pe-library: 0.4.1
@@ -9857,8 +9884,6 @@ snapshots:
   type-fest@0.13.1:
     optional: true
 
-  typebox@1.1.33: {}
-
   typed-query-selector@2.12.1: {}
 
   typescript@5.9.3: {}

From 79f5bd7f70fcea2176b07cf93db799394aea2536 Mon Sep 17 00:00:00 2001
From: Aleel101 <AleelsJourney@gmail.com>
Date: Sun, 26 Apr 2026 07:35:27 -0400
Subject: [PATCH 3/7] refactor: improve code readability and formatting across
 components

- Reorganized imports and adjusted formatting in several files for better readability.
- Enhanced the structure of function parameters and return values for clarity.
- Made minor adjustments to the console and files panels for consistent styling.
- Updated the handling of console logs and design generation states for improved maintainability.
- Refactored the ModelSwitcher and PreviewToolbar components to streamline their logic and enhance user experience.
---
 .../renderer/src/components/ConsolePanel.tsx  |  21 +++-
 .../renderer/src/components/FilesPanel.tsx    |   3 +-
 .../renderer/src/components/HistoryPanel.tsx  |  18 ++-
 .../renderer/src/components/ModelSwitcher.tsx | 104 ++++++++++++-----
 .../src/components/PreviewToolbar.tsx         |   7 +-
 .../src/components/chat/ChatMessageList.tsx   |  46 ++++++--
 .../src/components/chat/WorkingCard.tsx       |  25 ++--
 .../src/renderer/src/hooks/useAgentStream.ts  |  17 ++-
 apps/desktop/src/renderer/src/store.ts        | 107 +++++++++++-------
 9 files changed, 240 insertions(+), 108 deletions(-)

diff --git a/apps/desktop/src/renderer/src/components/ConsolePanel.tsx b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
index 2b8aa779..300dcd4d 100644
--- a/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
+++ b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
@@ -27,11 +27,17 @@ function ConsoleRow({ entry }: { entry: IframeConsoleLogEntry }) {
     <div
       className={`flex items-start gap-[var(--space-2)] px-[var(--space-3)] py-[2px] font-[ui-monospace,Menlo,monospace] text-[11.5px] leading-[1.5] border-b border-[var(--color-border-muted)]/40 last:border-0 ${LEVEL_BG[entry.level]}`}
     >
-      <span className="shrink-0 text-[var(--color-text-muted)] tabular-nums select-none">{time}</span>
-      <span className={`shrink-0 w-[36px] uppercase text-[10px] font-bold tracking-wide ${LEVEL_STYLE[entry.level]}`}>
+      <span className="shrink-0 text-[var(--color-text-muted)] tabular-nums select-none">
+        {time}
+      </span>
+      <span
+        className={`shrink-0 w-[36px] uppercase text-[10px] font-bold tracking-wide ${LEVEL_STYLE[entry.level]}`}
+      >
         {entry.level}
       </span>
-      <span className={`flex-1 break-all whitespace-pre-wrap ${LEVEL_STYLE[entry.level]}`}>{text}</span>
+      <span className={`flex-1 break-all whitespace-pre-wrap ${LEVEL_STYLE[entry.level]}`}>
+        {text}
+      </span>
     </div>
   );
 }
@@ -89,8 +95,13 @@ export function ConsolePanel() {
           onClick={() => setOpen((v) => !v)}
           className="flex items-center gap-[var(--space-2)] flex-1 min-w-0 text-left"
         >
-          <Terminal className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
-          <span className="text-[11.5px] font-medium text-[var(--color-text-secondary)]">Console</span>
+          <Terminal
+            className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]"
+            aria-hidden
+          />
+          <span className="text-[11.5px] font-medium text-[var(--color-text-secondary)]">
+            Console
+          </span>
           {badge}
           <span className="ml-auto">
             {open ? (
diff --git a/apps/desktop/src/renderer/src/components/FilesPanel.tsx b/apps/desktop/src/renderer/src/components/FilesPanel.tsx
index 4351eda9..7da32039 100644
--- a/apps/desktop/src/renderer/src/components/FilesPanel.tsx
+++ b/apps/desktop/src/renderer/src/components/FilesPanel.tsx
@@ -32,7 +32,8 @@ export function FilesPanel() {
 
   const currentDesign = designs.find((d) => d.id === currentDesignId);
   const workspacePath = currentDesign?.workspacePath ?? null;
-  const isCurrentDesignGenerating = currentDesignId !== null && activeGenerations.has(currentDesignId);
+  const isCurrentDesignGenerating =
+    currentDesignId !== null && activeGenerations.has(currentDesignId);
 
   useEffect(() => {
     if (!workspacePath || !currentDesignId) {
diff --git a/apps/desktop/src/renderer/src/components/HistoryPanel.tsx b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
index 5ec4e0b5..f73ea0fa 100644
--- a/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
+++ b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
@@ -1,5 +1,5 @@
-import type { DesignSnapshot } from '@open-codesign/shared';
 import { buildSrcdoc } from '@open-codesign/runtime';
+import type { DesignSnapshot } from '@open-codesign/shared';
 import { Clock, RotateCcw, X } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useCodesignStore } from '../store';
@@ -96,7 +96,9 @@ export function HistoryPanel({ onClose }: HistoryPanelProps) {
           {loading ? (
             <div className="px-4 py-3 text-[12px] text-[var(--color-text-muted)]">Loading…</div>
           ) : snapshots.length === 0 ? (
-            <div className="px-4 py-3 text-[12px] text-[var(--color-text-muted)]">No history yet.</div>
+            <div className="px-4 py-3 text-[12px] text-[var(--color-text-muted)]">
+              No history yet.
+            </div>
           ) : (
             snapshots.map((snap, i) => (
               <button
@@ -110,7 +112,11 @@ export function HistoryPanel({ onClose }: HistoryPanelProps) {
                 }`}
               >
                 <div className="text-[11.5px] font-medium truncate">
-                  {i === 0 ? 'Current' : snap.type === 'fork' ? 'Restored' : `v${snapshots.length - i}`}
+                  {i === 0
+                    ? 'Current'
+                    : snap.type === 'fork'
+                      ? 'Restored'
+                      : `v${snapshots.length - i}`}
                 </div>
                 <div className="text-[10.5px] text-[var(--color-text-muted)] mt-[2px]">
                   {formatDate(snap.createdAt)}
@@ -149,7 +155,11 @@ export function HistoryPanel({ onClose }: HistoryPanelProps) {
                 className="inline-flex items-center gap-[var(--space-1_5)] px-[var(--space-3)] py-[var(--space-1_5)] rounded-[var(--radius-md)] bg-[var(--color-accent)] text-white text-[12px] font-medium disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
               >
                 <RotateCcw className="w-[12px] h-[12px]" aria-hidden />
-                {restoring ? 'Restoring…' : snapshots[0]?.id === selected.id ? 'Current version' : 'Restore this version'}
+                {restoring
+                  ? 'Restoring…'
+                  : snapshots[0]?.id === selected.id
+                    ? 'Current version'
+                    : 'Restore this version'}
               </button>
             </div>
           )}
diff --git a/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx b/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
index 2bd2f24c..db31c2dc 100644
--- a/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
+++ b/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
@@ -47,8 +47,10 @@ function loadPins(): PinnedEntry[] {
     if (!Array.isArray(parsed)) return [];
     return parsed.filter(
       (x): x is PinnedEntry =>
-        typeof x === 'object' && x !== null &&
-        typeof x.provider === 'string' && typeof x.modelId === 'string',
+        typeof x === 'object' &&
+        x !== null &&
+        typeof x.provider === 'string' &&
+        typeof x.modelId === 'string',
     );
   } catch {
     return [];
@@ -153,7 +155,11 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
           const cur = prev.get(row.provider);
           if (cur?.models !== null) return prev; // already loaded
           const next = new Map(prev);
-          next.set(row.provider, { ...(cur ?? { expanded: row.provider === activeProvider }), loading: true, models: null });
+          next.set(row.provider, {
+            ...(cur ?? { expanded: row.provider === activeProvider }),
+            loading: true,
+            models: null,
+          });
           return next;
         });
 
@@ -162,7 +168,12 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
           .then((res) => {
             setSections((prev) => {
               const cur = prev.get(row.provider);
-              const models = res.ok ? mergeActiveModelIfMissing(res.models, row.provider === activeProvider ? currentModel : null) : [];
+              const models = res.ok
+                ? mergeActiveModelIfMissing(
+                    res.models,
+                    row.provider === activeProvider ? currentModel : null,
+                  )
+                : [];
               const next = new Map(prev);
               next.set(row.provider, { ...(cur ?? { expanded: false }), loading: false, models });
               return next;
@@ -172,13 +183,17 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
             setSections((prev) => {
               const cur = prev.get(row.provider);
               const next = new Map(prev);
-              next.set(row.provider, { ...(cur ?? { expanded: false }), loading: false, models: [] });
+              next.set(row.provider, {
+                ...(cur ?? { expanded: false }),
+                loading: false,
+                models: [],
+              });
               return next;
             });
           });
       }
     });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   // Auto-focus search when any section has models
@@ -194,24 +209,39 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
     }
   }, [open, totalModels]);
 
-  const handleTogglePin = useCallback((provider: string, modelId: string, e: import('react').MouseEvent) => {
-    e.stopPropagation();
-    setPins((prev) => {
-      const next = togglePin(prev, provider, modelId);
-      savePins(next);
-      return next;
-    });
-  }, []);
+  const handleTogglePin = useCallback(
+    (provider: string, modelId: string, e: import('react').MouseEvent) => {
+      e.stopPropagation();
+      setPins((prev) => {
+        const next = togglePin(prev, provider, modelId);
+        savePins(next);
+        return next;
+      });
+    },
+    [],
+  );
 
   async function switchModel(provider: string, modelId: string) {
-    if (!window.codesign) { setOpen(false); return; }
-    if (provider === activeProvider && modelId === currentModel) { setOpen(false); return; }
+    if (!window.codesign) {
+      setOpen(false);
+      return;
+    }
+    if (provider === activeProvider && modelId === currentModel) {
+      setOpen(false);
+      return;
+    }
     try {
       let next: typeof config;
       if (provider !== activeProvider) {
-        next = await window.codesign.config.setActiveProviderAndModel({ provider, modelPrimary: modelId });
+        next = await window.codesign.config.setActiveProviderAndModel({
+          provider,
+          modelPrimary: modelId,
+        });
       } else {
-        next = await window.codesign.settings.setActiveProvider({ provider, modelPrimary: modelId });
+        next = await window.codesign.settings.setActiveProvider({
+          provider,
+          modelPrimary: modelId,
+        });
       }
       recordAction({ type: 'provider.switch', data: { provider, modelId } });
       setConfig(next);
@@ -243,7 +273,9 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
   const filteredPins = useMemo(() => {
     const q = query.trim().toLowerCase();
     if (q.length === 0) return pins;
-    return pins.filter((p) => p.modelId.toLowerCase().includes(q) || p.provider.toLowerCase().includes(q));
+    return pins.filter(
+      (p) => p.modelId.toLowerCase().includes(q) || p.provider.toLowerCase().includes(q),
+    );
   }, [pins, query]);
 
   if (!activeProvider || !currentModel) return null;
@@ -312,7 +344,10 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
             {query.length > 0 && (
               <button
                 type="button"
-                onClick={() => { setQuery(''); searchInputRef.current?.focus(); }}
+                onClick={() => {
+                  setQuery('');
+                  searchInputRef.current?.focus();
+                }}
                 aria-label="Clear"
                 className="absolute right-[calc(var(--space-2)+var(--space-1))] top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-[18px] h-[18px] rounded-full text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
               >
@@ -326,13 +361,19 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
             {/* Pinned section */}
             {filteredPins.length > 0 && (
               <div>
-                <SectionHeader label="Pinned" icon={<Star className="w-[11px] h-[11px]" />} expanded />
+                <SectionHeader
+                  label="Pinned"
+                  icon={<Star className="w-[11px] h-[11px]" />}
+                  expanded
+                />
                 {filteredPins.map((pin) => (
                   <ModelRow
                     key={`pin:${pin.provider}:${pin.modelId}`}
                     modelId={pin.modelId}
                     provider={pin.provider}
-                    providerLabel={providerRows?.find((r) => r.provider === pin.provider)?.label ?? pin.provider}
+                    providerLabel={
+                      providerRows?.find((r) => r.provider === pin.provider)?.label ?? pin.provider
+                    }
                     isActive={pin.provider === activeProvider && pin.modelId === currentModel}
                     isPinned
                     showProvider
@@ -351,12 +392,17 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
             ) : (
               providerRows.map((row) => {
                 const sec = sections.get(row.provider);
-                const expanded = sec?.expanded ?? (row.provider === activeProvider);
+                const expanded = sec?.expanded ?? row.provider === activeProvider;
                 const models = sec?.models ?? null;
                 const loading = sec?.loading ?? false;
                 const q = query.trim().toLowerCase();
                 const filtered = models
-                  ? (q ? models.filter((m) => m.toLowerCase().includes(q) || row.provider.toLowerCase().includes(q)) : models)
+                  ? q
+                    ? models.filter(
+                        (m) =>
+                          m.toLowerCase().includes(q) || row.provider.toLowerCase().includes(q),
+                      )
+                    : models
                   : null;
 
                 // When searching, skip sections with no matches (only if models loaded)
@@ -405,7 +451,7 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
                           ))
                         ) : models !== null ? (
                           <div className="px-[var(--space-3)] py-[var(--space-1_5)] text-[11px] text-[var(--color-text-muted)]">
-                            {q ? `No matches` : t('settings.providers.noModel')}
+                            {q ? 'No matches' : t('settings.providers.noModel')}
                           </div>
                         ) : null}
                       </div>
@@ -464,9 +510,7 @@ function ModelRow({
   return (
     <div
       className={`group relative flex items-center gap-[var(--space-1)] px-[var(--space-3)] pl-[calc(var(--space-3)+var(--space-4))] py-[5px] cursor-pointer transition-colors ${
-        isActive
-          ? 'bg-[var(--color-surface-hover)]'
-          : 'hover:bg-[var(--color-surface-hover)]'
+        isActive ? 'bg-[var(--color-surface-hover)]' : 'hover:bg-[var(--color-surface-hover)]'
       }`}
       onClick={onSelect}
       role="option"
@@ -485,9 +529,7 @@ function ModelRow({
           {modelId}
         </div>
         {showProvider && (
-          <div className="text-[10px] text-[var(--color-text-muted)] truncate">
-            {providerLabel}
-          </div>
+          <div className="text-[10px] text-[var(--color-text-muted)] truncate">{providerLabel}</div>
         )}
       </div>
       <button
diff --git a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
index 3e81710e..23706270 100644
--- a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
@@ -21,7 +21,12 @@ interface ExportItem {
 
 const ZOOM_OPTIONS = [50, 75, 90, 100, 110, 125, 150, 175, 200] as const;
 
-export function PreviewToolbar({ onToggleHistory, historyOpen, showCodeView, onToggleCodeView }: PreviewToolbarExternalProps): ReactElement {
+export function PreviewToolbar({
+  onToggleHistory,
+  historyOpen,
+  showCodeView,
+  onToggleCodeView,
+}: PreviewToolbarExternalProps): ReactElement {
   const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
   const exportActive = useCodesignStore((s) => s.exportActive);
diff --git a/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx b/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx
index 8f6ccbdb..fc3d4b35 100644
--- a/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/ChatMessageList.tsx
@@ -258,7 +258,9 @@ function LiveThinkingBlock({
     const lastAssistant = [...messages].reverse().find((m) => m.kind === 'assistant_text');
     const lastText = (lastAssistant?.payload as { text?: string } | undefined)?.text?.trim() ?? '';
     const streamingTrim = streamingText.trim();
-    const isDupe = Boolean(lastText && (lastText === streamingTrim || lastText.startsWith(streamingTrim)));
+    const isDupe = Boolean(
+      lastText && (lastText === streamingTrim || lastText.startsWith(streamingTrim)),
+    );
     if (!isDupe) {
       return (
         <div key="streaming-assistant">
@@ -286,7 +288,11 @@ function LiveThinkingBlock({
   for (let i = 0; i < pendingToolCalls.length; i += 1) {
     const c = pendingToolCalls[i];
     if (!c) continue;
-    if (c.toolName === 'set_todos') { flushBucket(i); latestSetTodosCall = c; continue; }
+    if (c.toolName === 'set_todos') {
+      flushBucket(i);
+      latestSetTodosCall = c;
+      continue;
+    }
     bucket.push(c);
   }
   flushBucket(pendingToolCalls.length);
@@ -294,16 +300,26 @@ function LiveThinkingBlock({
   // Extract plan items from the latest set_todos call for inline display
   const planItems: { text: string; status: 'pending' | 'in_progress' | 'completed' }[] = [];
   if (latestSetTodosCall) {
-    const raw = (latestSetTodosCall.args?.['todos'] ?? latestSetTodosCall.args?.['items']) as unknown;
+    const raw = (latestSetTodosCall.args?.['todos'] ??
+      latestSetTodosCall.args?.['items']) as unknown;
     if (Array.isArray(raw)) {
       for (const it of raw) {
         if (typeof it !== 'object' || it === null) continue;
         const o = it as Record<string, unknown>;
-        const text = typeof o['content'] === 'string' ? o['content'] : typeof o['text'] === 'string' ? o['text'] : null;
+        const text =
+          typeof o['content'] === 'string'
+            ? o['content']
+            : typeof o['text'] === 'string'
+              ? o['text']
+              : null;
         if (!text) continue;
         const rs = o['status'];
         const status: 'pending' | 'in_progress' | 'completed' =
-          rs === 'completed' || rs === 'in_progress' || rs === 'pending' ? rs : o['checked'] === true ? 'completed' : 'pending';
+          rs === 'completed' || rs === 'in_progress' || rs === 'pending'
+            ? rs
+            : o['checked'] === true
+              ? 'completed'
+              : 'pending';
         planItems.push({ text, status });
       }
     }
@@ -323,16 +339,28 @@ function LiveThinkingBlock({
         className="w-full flex items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-2)] text-[12px] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-100"
       >
         {expanded ? (
-          <ChevronDown className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
+          <ChevronDown
+            className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]"
+            aria-hidden
+          />
         ) : (
-          <ChevronRight className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]" aria-hidden />
+          <ChevronRight
+            className="w-[13px] h-[13px] shrink-0 text-[var(--color-text-muted)]"
+            aria-hidden
+          />
         )}
         <span className="flex items-center gap-[var(--space-1_5)]">
           {isGenerating ? (
             <>
               <span className="codesign-stream-dot shrink-0" style={{ width: 6, height: 6 }} />
-              <span className="codesign-stream-dot shrink-0" style={{ width: 6, height: 6, animationDelay: '150ms' }} />
-              <span className="codesign-stream-dot shrink-0" style={{ width: 6, height: 6, animationDelay: '300ms' }} />
+              <span
+                className="codesign-stream-dot shrink-0"
+                style={{ width: 6, height: 6, animationDelay: '150ms' }}
+              />
+              <span
+                className="codesign-stream-dot shrink-0"
+                style={{ width: 6, height: 6, animationDelay: '300ms' }}
+              />
             </>
           ) : null}
           <span className="font-medium text-[var(--color-text-primary)]">
diff --git a/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx b/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx
index f0390c40..7bce24fb 100644
--- a/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/WorkingCard.tsx
@@ -68,7 +68,7 @@ interface ToolRow {
 type ToolSnippet =
   | { kind: 'diff'; minus: string; plus: string }
   | { kind: 'text'; lines: string[] }
-  | { kind: 'range'; start: number; end: number }
+  | { kind: 'range'; start: number; end: number };
 
 function extractTodos(call: ChatToolCallPayload): TodoItem[] {
   const raw = (call.args?.['todos'] as unknown) ?? (call.args?.['items'] as unknown) ?? null;
@@ -109,18 +109,25 @@ function computeSnippet(call: ChatToolCallPayload): ToolSnippet | undefined {
   const cmd = call.command;
   const args = call.args;
   if (cmd === 'str_replace') {
-    const minus = typeof args?.['old_str'] === 'string' ? firstMeaningfulLine(args['old_str']) : null;
-    const plus = typeof args?.['new_str'] === 'string' ? firstMeaningfulLine(args['new_str']) : null;
+    const minus =
+      typeof args?.['old_str'] === 'string' ? firstMeaningfulLine(args['old_str']) : null;
+    const plus =
+      typeof args?.['new_str'] === 'string' ? firstMeaningfulLine(args['new_str']) : null;
     if (minus && plus && minus !== plus) return { kind: 'diff', minus, plus };
   }
   if (cmd === 'create' || cmd === 'insert') {
-    const src = typeof args?.['file_text'] === 'string'
-      ? args['file_text']
-      : typeof args?.['new_str'] === 'string'
-        ? args['new_str']
-        : null;
+    const src =
+      typeof args?.['file_text'] === 'string'
+        ? args['file_text']
+        : typeof args?.['new_str'] === 'string'
+          ? args['new_str']
+          : null;
     if (src) {
-      const lines = src.split('\n').map((l) => l.trim()).filter(Boolean).slice(0, 3);
+      const lines = src
+        .split('\n')
+        .map((l) => l.trim())
+        .filter(Boolean)
+        .slice(0, 3);
       if (lines.length > 0) return { kind: 'text', lines };
     }
   }
diff --git a/apps/desktop/src/renderer/src/hooks/useAgentStream.ts b/apps/desktop/src/renderer/src/hooks/useAgentStream.ts
index 145a8921..87101270 100644
--- a/apps/desktop/src/renderer/src/hooks/useAgentStream.ts
+++ b/apps/desktop/src/renderer/src/hooks/useAgentStream.ts
@@ -151,10 +151,16 @@ export function useAgentStream(): void {
       // for this turn. Without this the iframe only refreshes at agent_end
       // which could be minutes away.
       const slotTurn = fsThrottle.current;
-      if (slotTurn.timer !== null) { clearTimeout(slotTurn.timer); slotTurn.timer = null; }
+      if (slotTurn.timer !== null) {
+        clearTimeout(slotTurn.timer);
+        slotTurn.timer = null;
+      }
       const pendingTurn = slotTurn.pending;
       slotTurn.pending = null;
-      if (pendingTurn) { slotTurn.lastFlushAt = Date.now(); setPreviewHtmlFromAgent(pendingTurn); }
+      if (pendingTurn) {
+        slotTurn.lastFlushAt = Date.now();
+        setPreviewHtmlFromAgent(pendingTurn);
+      }
     };
 
     const handleToolCallStart = (event: AgentStreamEvent) => {
@@ -166,7 +172,8 @@ export function useAgentStream(): void {
       const basename = opPath ? (opPath.split('/').pop() ?? opPath) : null;
       const opLabel = (() => {
         if (toolName === 'set_todos') return 'planning';
-        if ((event.command === 'str_replace' || event.command === 'insert') && basename) return `editing ${basename}`;
+        if ((event.command === 'str_replace' || event.command === 'insert') && basename)
+          return `editing ${basename}`;
         if (event.command === 'create' && basename) return `creating ${basename}`;
         if (event.command === 'view' && basename) return `reading ${basename}`;
         if (toolName === 'read_url') return 'reading url';
@@ -239,7 +246,9 @@ export function useAgentStream(): void {
                 : 'pending';
           return { text, status };
         })
-        .filter((x): x is { text: string; status: 'pending' | 'in_progress' | 'completed' } => x !== null);
+        .filter(
+          (x): x is { text: string; status: 'pending' | 'in_progress' | 'completed' } => x !== null,
+        );
       return items.length > 0 ? items : null;
     };
 
diff --git a/apps/desktop/src/renderer/src/store.ts b/apps/desktop/src/renderer/src/store.ts
index 431ff120..ec658079 100644
--- a/apps/desktop/src/renderer/src/store.ts
+++ b/apps/desktop/src/renderer/src/store.ts
@@ -1,5 +1,5 @@
-import type { ConsoleLevel } from '@open-codesign/runtime';
 import { i18n } from '@open-codesign/i18n';
+import type { ConsoleLevel } from '@open-codesign/runtime';
 import type {
   ChatAppendInput,
   ChatMessage,
@@ -348,7 +348,9 @@ interface CodesignState {
   clearConsoleLogs: () => void;
   pushConsoleLog: (entry: IframeConsoleLogEntry) => void;
   setCurrentOperation: (op: string | null) => void;
-  setLatestTodos: (todos: Array<{ text: string; status: 'pending' | 'in_progress' | 'completed' }> | null) => void;
+  setLatestTodos: (
+    todos: Array<{ text: string; status: 'pending' | 'in_progress' | 'completed' }> | null,
+  ) => void;
   upsertPageFile: (path: string, content: string) => void;
   setActivePagePath: (path: string) => void;
   exportActive: (format: ExportFormat) => Promise<void>;
@@ -876,8 +878,7 @@ function finishIfCurrent(
     // than by the store's single activeGenerationId (which is overwritten when
     // a second generation starts for a different design).
     const designKnown = designId ? state.activeGenerations.has(designId) : false;
-    const isCurrent =
-      designKnown || state.activeGenerationId === _generationId;
+    const isCurrent = designKnown || state.activeGenerationId === _generationId;
     if (!isCurrent) return {};
     const base = update(state);
     if (designId) {
@@ -912,29 +913,34 @@ function applyGenerateSuccess(
   const assistantMessage = result.message || tr('common.done');
   const { usage, rejected: rejectedUsageFields } = coerceUsageSnapshot(result);
   let didApply = false;
-  finishIfCurrent(set, generationId, (_state) => {
-    didApply = true;
-    const nextHtml = firstArtifact?.content ?? _state.previewHtml;
-    const pool =
-      _state.currentDesignId !== null && nextHtml !== null
-        ? recordPreviewInPool(
-            _state.previewHtmlByDesign,
-            _state.recentDesignIds,
-            _state.currentDesignId,
-            nextHtml,
-          )
-        : { cache: _state.previewHtmlByDesign, recent: _state.recentDesignIds };
-    return {
-      previewHtml: nextHtml,
-      previewHtmlByDesign: pool.cache,
-      recentDesignIds: pool.recent,
-      isGenerating: false,
-      activeGenerationId: null,
-      generatingDesignId: null,
-      generationStage: 'done' as GenerationStage,
-      lastUsage: usage,
-    };
-  }, designIdAtStart);
+  finishIfCurrent(
+    set,
+    generationId,
+    (_state) => {
+      didApply = true;
+      const nextHtml = firstArtifact?.content ?? _state.previewHtml;
+      const pool =
+        _state.currentDesignId !== null && nextHtml !== null
+          ? recordPreviewInPool(
+              _state.previewHtmlByDesign,
+              _state.recentDesignIds,
+              _state.currentDesignId,
+              nextHtml,
+            )
+          : { cache: _state.previewHtmlByDesign, recent: _state.recentDesignIds };
+      return {
+        previewHtml: nextHtml,
+        previewHtmlByDesign: pool.cache,
+        recentDesignIds: pool.recent,
+        isGenerating: false,
+        activeGenerationId: null,
+        generatingDesignId: null,
+        generationStage: 'done' as GenerationStage,
+        lastUsage: usage,
+      };
+    },
+    designIdAtStart,
+  );
   // If the user switched designs mid-generation, didApply is false but we
   // still want the fresh artifact in the pool so the design they generated
   // for shows the new content the next time they switch back to it.
@@ -1086,15 +1092,20 @@ function applyGenerateError(
     message: msg,
   });
 
-  finishIfCurrent(set, generationId, () => ({
-    isGenerating: false,
-    activeGenerationId: null,
-    generatingDesignId: null,
-    streamingAssistantText: null,
-    errorMessage: msg,
-    lastError: msg,
-    generationStage: 'error' as GenerationStage,
-  }), designIdAtStart);
+  finishIfCurrent(
+    set,
+    generationId,
+    () => ({
+      isGenerating: false,
+      activeGenerationId: null,
+      generatingDesignId: null,
+      streamingAssistantText: null,
+      errorMessage: msg,
+      lastError: msg,
+      generationStage: 'error' as GenerationStage,
+    }),
+    designIdAtStart,
+  );
   const designId = designIdAtStart ?? get().currentDesignId;
   if (designId) {
     void get().appendChatMessage({
@@ -1477,7 +1488,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   pushConsoleLog(entry) {
     set((s) => {
       const next = [...s.consoleLogs, entry];
-      return { consoleLogs: next.length > MAX_CONSOLE_LOGS ? next.slice(next.length - MAX_CONSOLE_LOGS) : next };
+      return {
+        consoleLogs:
+          next.length > MAX_CONSOLE_LOGS ? next.slice(next.length - MAX_CONSOLE_LOGS) : next,
+      };
     });
   },
 
@@ -1768,13 +1782,18 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     void window.codesign
       .cancelGeneration(id)
       .then(() => {
-        finishIfCurrent(set, id, () => ({
-          isGenerating: false,
-          activeGenerationId: null,
-          generatingDesignId: null,
-          streamingAssistantText: null,
-          generationStage: 'idle' as GenerationStage,
-        }), cancelDesignId);
+        finishIfCurrent(
+          set,
+          id,
+          () => ({
+            isGenerating: false,
+            activeGenerationId: null,
+            generatingDesignId: null,
+            streamingAssistantText: null,
+            generationStage: 'idle' as GenerationStage,
+          }),
+          cancelDesignId,
+        );
       })
       .catch((err) => {
         const msg = err instanceof Error ? err.message : tr('errors.unknown');

From a962d4b3319d30f6650df593af7d68b1d6b9d2a3 Mon Sep 17 00:00:00 2001
From: Aleel101 <AleelsJourney@gmail.com>
Date: Sun, 26 Apr 2026 07:38:31 -0400
Subject: [PATCH 4/7] test: add modelFast field and console log handler to
 onboarding state tests

- Updated onboarding state tests to include a new `modelFast` field initialized to null.
- Enhanced the `PreviewPane` test to include an `onConsoleLog` handler for better logging during tests.
- Ensured consistency across various test files by adding the `modelFast` field to relevant configurations.
---
 apps/desktop/src/renderer/src/components/PreviewPane.test.ts    | 1 +
 .../src/renderer/src/lib/action-timeline.integration.test.ts    | 1 +
 apps/desktop/src/renderer/src/store.generationStage.test.ts     | 1 +
 apps/desktop/src/renderer/src/store.test.ts                     | 2 ++
 4 files changed, 5 insertions(+)

diff --git a/apps/desktop/src/renderer/src/components/PreviewPane.test.ts b/apps/desktop/src/renderer/src/components/PreviewPane.test.ts
index 4ccc9895..085f5dc0 100644
--- a/apps/desktop/src/renderer/src/components/PreviewPane.test.ts
+++ b/apps/desktop/src/renderer/src/components/PreviewPane.test.ts
@@ -71,6 +71,7 @@ describe('handlePreviewMessage trust boundary', () => {
       onElementSelected: vi.fn(),
       onIframeError: vi.fn(),
       onElementRects: vi.fn(),
+      onConsoleLog: vi.fn(),
     };
   }
 
diff --git a/apps/desktop/src/renderer/src/lib/action-timeline.integration.test.ts b/apps/desktop/src/renderer/src/lib/action-timeline.integration.test.ts
index 0ae3ff07..0aed5fad 100644
--- a/apps/desktop/src/renderer/src/lib/action-timeline.integration.test.ts
+++ b/apps/desktop/src/renderer/src/lib/action-timeline.integration.test.ts
@@ -37,6 +37,7 @@ describe('action timeline wiring', () => {
       hasKey: true,
       provider: 'anthropic',
       modelPrimary: 'claude-sonnet-4-6',
+      modelFast: null,
       baseUrl: null,
       designSystem: null,
     });
diff --git a/apps/desktop/src/renderer/src/store.generationStage.test.ts b/apps/desktop/src/renderer/src/store.generationStage.test.ts
index f1d734b0..d70c836e 100644
--- a/apps/desktop/src/renderer/src/store.generationStage.test.ts
+++ b/apps/desktop/src/renderer/src/store.generationStage.test.ts
@@ -7,6 +7,7 @@ const READY_CONFIG: OnboardingState = {
   hasKey: true,
   provider: 'anthropic',
   modelPrimary: 'claude-sonnet-4-6',
+  modelFast: null,
   baseUrl: null,
   designSystem: null,
 };
diff --git a/apps/desktop/src/renderer/src/store.test.ts b/apps/desktop/src/renderer/src/store.test.ts
index ba5c8938..6188d9ad 100644
--- a/apps/desktop/src/renderer/src/store.test.ts
+++ b/apps/desktop/src/renderer/src/store.test.ts
@@ -12,6 +12,7 @@ const READY_CONFIG: OnboardingState = {
   hasKey: true,
   provider: 'anthropic',
   modelPrimary: 'claude-sonnet-4-6',
+  modelFast: null,
   baseUrl: null,
   designSystem: null,
 };
@@ -385,6 +386,7 @@ describe('useCodesignStore active provider routing', () => {
       hasKey: true,
       provider: 'openai',
       modelPrimary: 'gpt-4o',
+      modelFast: null,
       baseUrl: null,
       designSystem: null,
     };

From f6fb53c0e759944061d14188002cf995283654bc Mon Sep 17 00:00:00 2001
From: Aleel101 <AleelsJourney@gmail.com>
Date: Sun, 26 Apr 2026 07:41:55 -0400
Subject: [PATCH 5/7] feat: enhance design generation state management and
 console logging

- Added `activeGenerations` state to `useCodesignStore` for tracking ongoing design generations.
- Updated `ConsolePanel` to improve log entry keys for better uniqueness and stability.
- Refactored dependencies in `ModelSwitcher` and `StickyTodoHeader` to ensure proper state handling and performance.
---
 apps/desktop/src/renderer/src/components/ConsolePanel.tsx   | 6 +++---
 apps/desktop/src/renderer/src/components/ModelSwitcher.tsx  | 3 +--
 .../src/renderer/src/components/chat/StickyTodoHeader.tsx   | 3 +--
 apps/desktop/src/renderer/src/store.test.ts                 | 3 +++
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/renderer/src/components/ConsolePanel.tsx b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
index 300dcd4d..77a68ab8 100644
--- a/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
+++ b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
@@ -53,10 +53,11 @@ export function ConsolePanel() {
   const errorCount = logs.filter((l) => l.level === 'error').length;
   const warnCount = logs.filter((l) => l.level === 'warn').length;
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: autoscroll when the log list updates
   useEffect(() => {
     if (!open || !stickyRef.current) return;
     bottomRef.current?.scrollIntoView({ block: 'end' });
-  }, [logs.length, open]);
+  }, [open, logs]);
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -134,8 +135,7 @@ export function ConsolePanel() {
             </div>
           ) : (
             logs.map((entry, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: console logs are append-only, index is stable within a session
-              <ConsoleRow key={i} entry={entry} />
+              <ConsoleRow key={`log-${i}-${entry.timestamp}-${entry.level}`} entry={entry} />
             ))
           )}
           <div ref={bottomRef} />
diff --git a/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx b/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
index db31c2dc..11e9af1d 100644
--- a/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
+++ b/apps/desktop/src/renderer/src/components/ModelSwitcher.tsx
@@ -193,8 +193,7 @@ export function ModelSwitcher({ variant }: ModelSwitcherProps) {
           });
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [open, activeProvider, currentModel]);
 
   // Auto-focus search when any section has models
   const totalModels = useMemo(() => {
diff --git a/apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx b/apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx
index 11216c05..010a3596 100644
--- a/apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/StickyTodoHeader.tsx
@@ -53,8 +53,7 @@ export function StickyTodoHeader() {
         <div className="px-[var(--space-4)] pb-[var(--space-2)] space-y-[3px]">
           {todos.map((todo, i) => (
             <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: todo list is replaced atomically, index is stable per snapshot
-              key={i}
+              key={`todo-${i}-${todo.text}`}
               className="flex items-start gap-[var(--space-2)] text-[12px] leading-[1.4]"
             >
               {todo.status === 'completed' ? (
diff --git a/apps/desktop/src/renderer/src/store.test.ts b/apps/desktop/src/renderer/src/store.test.ts
index 6188d9ad..c86d886e 100644
--- a/apps/desktop/src/renderer/src/store.test.ts
+++ b/apps/desktop/src/renderer/src/store.test.ts
@@ -551,6 +551,7 @@ describe('useCodesignStore design management', () => {
     useCodesignStore.setState({
       currentDesignId: 'design-a',
       isGenerating: true,
+      activeGenerations: new Set(['design-a']),
     });
 
     await useCodesignStore.getState().softDeleteDesign('design-a');
@@ -1174,6 +1175,7 @@ describe('useCodesignStore generation-blocking workspace guards', () => {
       currentDesignId: 'design-1',
       isGenerating: true,
       generatingDesignId: 'design-1',
+      activeGenerations: new Set(['design-1']),
       workspaceRebindPending: null,
     });
 
@@ -1189,6 +1191,7 @@ describe('useCodesignStore generation-blocking workspace guards', () => {
       currentDesignId: 'design-1',
       isGenerating: true,
       generatingDesignId: 'design-2',
+      activeGenerations: new Set(['design-2']),
       workspaceRebindPending: null,
     });
 

From 88046c2544c60fc3b53963c4de8c292ee01e7f10 Mon Sep 17 00:00:00 2001
From: Aleel101 <AleelsJourney@gmail.com>
Date: Sun, 26 Apr 2026 07:48:06 -0400
Subject: [PATCH 6/7] feat: enhance canvas tab management and UI components

- Updated `CanvasTab` type to include 'history' and 'code' tabs, improving tab management.
- Refactored `CanvasTabBar` to display new tab types with appropriate icons and labels.
- Adjusted `PreviewPane` to handle new tab types, ensuring correct rendering of content based on active tab.
- Enhanced localization by adding translations for new tab labels in English, Portuguese, and Chinese.
- Improved overall UI consistency and user experience across components related to canvas tabs.
---
 .../renderer/src/components/CanvasTabBar.tsx  | 36 +++++++++++---
 .../renderer/src/components/HistoryPanel.tsx  |  2 +-
 .../renderer/src/components/PreviewPane.tsx   | 35 ++++++++------
 .../src/components/PreviewToolbar.tsx         | 48 +------------------
 apps/desktop/src/renderer/src/store.ts        | 37 ++++++++------
 packages/i18n/src/locales/en.json             |  5 +-
 packages/i18n/src/locales/pt-BR.json          |  5 +-
 packages/i18n/src/locales/zh-CN.json          |  5 +-
 8 files changed, 89 insertions(+), 84 deletions(-)

diff --git a/apps/desktop/src/renderer/src/components/CanvasTabBar.tsx b/apps/desktop/src/renderer/src/components/CanvasTabBar.tsx
index 5036f617..51da7ec0 100644
--- a/apps/desktop/src/renderer/src/components/CanvasTabBar.tsx
+++ b/apps/desktop/src/renderer/src/components/CanvasTabBar.tsx
@@ -1,5 +1,5 @@
 import { useT } from '@open-codesign/i18n';
-import { FolderOpen, X } from 'lucide-react';
+import { Clock, Code2, FolderOpen, X } from 'lucide-react';
 import { useCodesignStore } from '../store';
 
 function fileTabLabel(path: string): string {
@@ -25,9 +25,31 @@ export function CanvasTabBar() {
       {tabs.map((tab, index) => {
         const isActive = index === active;
         const isFiles = tab.kind === 'files';
-        const label = isFiles ? t('canvas.filesTab') : fileTabLabel((tab as { path: string }).path);
-        const title = isFiles ? t('canvas.filesTab') : (tab as { path: string }).path;
-        const key: string = isFiles ? 'files' : `file:${(tab as { path: string }).path}`;
+        const isHistory = tab.kind === 'history';
+        const isCode = tab.kind === 'code';
+        const isFile = tab.kind === 'file';
+        const isPinned = isFiles || isHistory || isCode;
+        const label = isFiles
+          ? t('canvas.filesTab')
+          : isHistory
+            ? t('canvas.historyTab')
+            : isCode
+              ? t('canvas.codeTab')
+              : fileTabLabel((tab as { path: string }).path);
+        const title = isFiles
+          ? t('canvas.filesTab')
+          : isHistory
+            ? t('canvas.historyTab')
+            : isCode
+              ? t('canvas.codeTab')
+              : (tab as { path: string }).path;
+        const key: string = isFiles
+          ? 'files'
+          : isHistory
+            ? 'history'
+            : isCode
+              ? 'code'
+              : `file:${(tab as { path: string }).path}`;
         return (
           <div
             key={key}
@@ -46,14 +68,16 @@ export function CanvasTabBar() {
               className="flex items-center gap-[var(--space-1_5)] focus:outline-none"
             >
               {isFiles ? <FolderOpen className="w-3.5 h-3.5 opacity-80" aria-hidden /> : null}
+              {isHistory ? <Clock className="w-3.5 h-3.5 opacity-80" aria-hidden /> : null}
+              {isCode ? <Code2 className="w-3.5 h-3.5 opacity-80" aria-hidden /> : null}
               <span
                 className="truncate max-w-[220px]"
-                style={isFiles ? undefined : { fontFamily: 'var(--font-mono)' }}
+                style={isFile ? { fontFamily: 'var(--font-mono)' } : undefined}
               >
                 {label}
               </span>
             </button>
-            {isFiles ? null : (
+            {isPinned ? null : (
               <button
                 type="button"
                 onClick={() => close(index)}
diff --git a/apps/desktop/src/renderer/src/components/HistoryPanel.tsx b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
index f73ea0fa..e6893d84 100644
--- a/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
+++ b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
@@ -73,7 +73,7 @@ export function HistoryPanel({ onClose }: HistoryPanelProps) {
   }
 
   return (
-    <div className="absolute inset-0 z-30 flex flex-col bg-[var(--color-background)] border-l border-[var(--color-border)]">
+    <div className="flex h-full min-h-0 w-full flex-col bg-[var(--color-background)]">
       {/* Header */}
       <div className="flex items-center gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-3)] border-b border-[var(--color-border)] shrink-0">
         <Clock className="w-[14px] h-[14px] text-[var(--color-text-muted)]" aria-hidden />
diff --git a/apps/desktop/src/renderer/src/components/PreviewPane.tsx b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
index b64e9151..36c6a466 100644
--- a/apps/desktop/src/renderer/src/components/PreviewPane.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
@@ -21,7 +21,7 @@ import { FilesTabView } from './FilesTabView';
 import { HistoryPanel } from './HistoryPanel';
 import { PageTabBar } from './PageTabBar';
 import { PhoneFrame } from './PhoneFrame';
-import { PreviewToolbar, type PreviewToolbarExternalProps } from './PreviewToolbar';
+import { PreviewToolbar } from './PreviewToolbar';
 import { TweakPanel } from './TweakPanel';
 import { CommentBubble } from './comment/CommentBubble';
 import { PinOverlay } from './comment/PinOverlay';
@@ -303,6 +303,7 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const chatMessages = useCodesignStore((s) => s.chatMessages);
   const canvasTabs = useCodesignStore((s) => s.canvasTabs);
   const activeCanvasTab = useCodesignStore((s) => s.activeCanvasTab);
+  const setActiveCanvasTab = useCodesignStore((s) => s.setActiveCanvasTab);
   const errorMessage = useCodesignStore((s) => s.errorMessage);
   const retry = useCodesignStore((s) => s.retryLastPrompt);
   const clearError = useCodesignStore((s) => s.clearError);
@@ -324,17 +325,21 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const pageFiles = useCodesignStore((s) => s.pageFiles);
   const activePagePath = useCodesignStore((s) => s.activePagePath);
   const activeTab = canvasTabs[activeCanvasTab];
+  const activeKind = activeTab?.kind;
   const showFilesOverPreview =
-    activeTab?.kind === 'files' && typeof previewHtml === 'string' && previewHtml.length > 0;
+    activeKind === 'files' && typeof previewHtml === 'string' && previewHtml.length > 0;
   const [filesLayerKept, setFilesLayerKept] = useState(false);
   const hasPreviewText = typeof previewHtml === 'string' && previewHtml.length > 0;
   const filesLayerInDom = hasPreviewText && (showFilesOverPreview || filesLayerKept);
 
+  const goToFilesTab = useCallback(() => {
+    const i = canvasTabs.findIndex((t) => t.kind === 'files');
+    if (i >= 0) setActiveCanvasTab(i);
+  }, [canvasTabs, setActiveCanvasTab]);
+
   // Active iframe ref consumed by TweakPanel (postMessage target) and by the
   // window.message guard. We re-point this whenever the active design changes
   // or the active iframe element re-mounts.
-  const [showHistory, setShowHistory] = useState(false);
-  const [showCodeView, setShowCodeView] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   // Unsent bubble drafts, keyed by bubbleKey (edit:<id> | new:<selector>).
   // Lives across bubble remounts so switching to another chip / element and
@@ -618,24 +623,26 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
         {isWelcome ? null : (
           <div className="flex items-stretch justify-between gap-[var(--space-2)] border-b border-[var(--color-border-muted)] bg-[var(--color-background-secondary)] pl-[var(--space-2)]">
             {hasTabs ? <CanvasTabBar /> : <div />}
-            <PreviewToolbar
-              onToggleHistory={() => setShowHistory((v) => !v)}
-              historyOpen={showHistory}
-              showCodeView={showCodeView}
-              onToggleCodeView={() => setShowCodeView((v) => !v)}
-            />
+            <PreviewToolbar />
           </div>
         )}
         <PageTabBar />
         <CanvasErrorBar />
-        <div className="relative flex-1 overflow-hidden">
-          {showCodeView && previewHtml ? (
+        <div className="relative flex-1 min-h-0 overflow-hidden">
+          {activeKind === 'code' && typeof previewHtml === 'string' && previewHtml.length > 0 ? (
             <CodeViewPanel html={previewHtml} isGenerating={isGenerating} onSave={setPreviewHtml} />
+          ) : activeKind === 'code' ? (
+            <div className="flex h-full min-h-0 items-center justify-center px-6 text-center text-[12px] text-[var(--color-text-muted)]">
+              {t('canvas.codeTabEmpty')}
+            </div>
+          ) : activeKind === 'history' ? (
+            <HistoryPanel onClose={goToFilesTab} />
           ) : (
             body
           )}
-          {!showCodeView && previewHtml ? <TweakPanel iframeRef={iframeRef} /> : null}
-          {showHistory ? <HistoryPanel onClose={() => setShowHistory(false)} /> : null}
+          {activeKind !== 'code' && activeKind !== 'history' && previewHtml ? (
+            <TweakPanel iframeRef={iframeRef} />
+          ) : null}
         </div>
         <ConsolePanel />
         {commentBubble && interactionMode === 'comment'
diff --git a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
index 23706270..58cc9a66 100644
--- a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
@@ -1,17 +1,10 @@
 import { useT } from '@open-codesign/i18n';
-import { Clock, Code2, Download, MessageSquare } from 'lucide-react';
+import { Download, MessageSquare } from 'lucide-react';
 import { type ReactElement, useEffect, useRef, useState } from 'react';
 import type { ExportFormat } from '../../../preload/index';
 import type { PreviewViewport } from '../store';
 import { useCodesignStore } from '../store';
 
-export interface PreviewToolbarExternalProps {
-  onToggleHistory: () => void;
-  historyOpen: boolean;
-  showCodeView?: boolean;
-  onToggleCodeView?: () => void;
-}
-
 interface ExportItem {
   format: ExportFormat;
   label: string;
@@ -21,12 +14,7 @@ interface ExportItem {
 
 const ZOOM_OPTIONS = [50, 75, 90, 100, 110, 125, 150, 175, 200] as const;
 
-export function PreviewToolbar({
-  onToggleHistory,
-  historyOpen,
-  showCodeView,
-  onToggleCodeView,
-}: PreviewToolbarExternalProps): ReactElement {
+export function PreviewToolbar(): ReactElement {
   const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
   const exportActive = useCodesignStore((s) => s.exportActive);
@@ -109,38 +97,6 @@ export function PreviewToolbar({
         </output>
       )}
 
-      {onToggleCodeView ? (
-        <button
-          type="button"
-          disabled={disabled}
-          aria-pressed={showCodeView}
-          onClick={onToggleCodeView}
-          className={`inline-flex items-center gap-[6px] h-[26px] px-[10px] text-[12px] transition-[background-color,color,transform] duration-[var(--duration-faster)] active:scale-[var(--scale-press-down)] disabled:opacity-40 disabled:pointer-events-none ${
-            showCodeView
-              ? 'text-[var(--color-accent)]'
-              : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
-          }`}
-        >
-          <Code2 className="w-3.5 h-3.5" aria-hidden="true" />
-          Code
-        </button>
-      ) : null}
-
-      <button
-        type="button"
-        disabled={disabled}
-        aria-pressed={historyOpen}
-        onClick={onToggleHistory}
-        className={`inline-flex items-center gap-[6px] h-[26px] px-[10px] text-[12px] transition-[background-color,color,transform] duration-[var(--duration-faster)] active:scale-[var(--scale-press-down)] disabled:opacity-40 disabled:pointer-events-none ${
-          historyOpen
-            ? 'text-[var(--color-accent)]'
-            : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
-        }`}
-      >
-        <Clock className="w-3.5 h-3.5" aria-hidden="true" />
-        History
-      </button>
-
       <button
         type="button"
         disabled={disabled}
diff --git a/apps/desktop/src/renderer/src/store.ts b/apps/desktop/src/renderer/src/store.ts
index ec658079..66a606bd 100644
--- a/apps/desktop/src/renderer/src/store.ts
+++ b/apps/desktop/src/renderer/src/store.ts
@@ -129,12 +129,18 @@ export type InteractionMode = 'default' | 'comment';
 export type PreviewViewport = 'desktop' | 'tablet' | 'mobile';
 
 // Workstream G — canvas tabs.
-// 'files' is the pinned tab that hosts the file list + inline preview; 'file'
-// tabs wrap a single file preview opened by double-clicking the list. Closing
-// a 'file' tab is purely UI state — it does NOT delete anything.
-export type CanvasTab = { kind: 'files' } | { kind: 'file'; path: string };
+// 'files', 'history', and 'code' are pinned (not closable). 'file' tabs wrap a
+// single file preview opened from the list. Closing a 'file' tab is UI only.
+export type CanvasTab =
+  | { kind: 'files' }
+  | { kind: 'history' }
+  | { kind: 'code' }
+  | { kind: 'file'; path: string };
 
 export const FILES_TAB: CanvasTab = { kind: 'files' };
+export const HISTORY_TAB: CanvasTab = { kind: 'history' };
+export const CODE_TAB: CanvasTab = { kind: 'code' };
+export const DEFAULT_CANVAS_TABS: CanvasTab[] = [FILES_TAB, HISTORY_TAB, CODE_TAB];
 
 // Pure reducers, exported for unit tests so we don't need RTL for slice logic.
 export function openFileTab(tabs: CanvasTab[], path: string): { tabs: CanvasTab[]; index: number } {
@@ -151,8 +157,9 @@ export function closeTabAt(
 ): { tabs: CanvasTab[]; activeIndex: number } {
   const tab = tabs[target];
   if (!tab) return { tabs, activeIndex };
-  // The pinned 'files' tab cannot be closed — it always anchors index 0.
-  if (tab.kind === 'files') return { tabs, activeIndex };
+  if (tab.kind === 'files' || tab.kind === 'history' || tab.kind === 'code') {
+    return { tabs, activeIndex };
+  }
   const next = tabs.filter((_, i) => i !== target);
   let nextActive = activeIndex;
   if (activeIndex === target) {
@@ -1458,7 +1465,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   currentSnapshotId: null,
   liveRects: {},
 
-  canvasTabs: [FILES_TAB],
+  canvasTabs: DEFAULT_CANVAS_TABS,
   activeCanvasTab: 0,
 
   recentEvents: [],
@@ -2081,7 +2088,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         commentsLoaded: false,
         commentBubble: null,
         currentSnapshotId: null,
-        canvasTabs: [FILES_TAB],
+        canvasTabs: DEFAULT_CANVAS_TABS,
         activeCanvasTab: 0,
       });
       await get().loadDesigns();
@@ -2166,8 +2173,8 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         commentsLoaded: false,
         commentBubble: null,
         currentSnapshotId: null,
-        canvasTabs: [FILES_TAB, { kind: 'file', path: 'index.html' }],
-        activeCanvasTab: 1,
+        canvasTabs: [...DEFAULT_CANVAS_TABS, { kind: 'file', path: 'index.html' }],
+        activeCanvasTab: 3,
       });
       void get().loadChatForCurrentDesign();
       void get().loadCommentsForCurrentDesign();
@@ -2224,8 +2231,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         commentsLoaded: false,
         commentBubble: null,
         currentSnapshotId: null,
-        canvasTabs: latest ? [FILES_TAB, { kind: 'file', path: 'index.html' }] : [FILES_TAB],
-        activeCanvasTab: latest ? 1 : 0,
+        canvasTabs: latest
+          ? [...DEFAULT_CANVAS_TABS, { kind: 'file', path: 'index.html' }]
+          : DEFAULT_CANVAS_TABS,
+        activeCanvasTab: latest ? 3 : 0,
       });
       void get().loadChatForCurrentDesign();
       void get().loadCommentsForCurrentDesign();
@@ -2310,7 +2319,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         set({
           currentDesignId: null,
           previewHtml: null,
-          canvasTabs: [FILES_TAB],
+          canvasTabs: DEFAULT_CANVAS_TABS,
           activeCanvasTab: 0,
         });
         if (remaining.length > 0 && remaining[0]) {
@@ -2854,7 +2863,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   },
 
   resetCanvasTabs() {
-    set({ canvasTabs: [FILES_TAB], activeCanvasTab: 0 });
+    set({ canvasTabs: DEFAULT_CANVAS_TABS, activeCanvasTab: 0 });
   },
 
   async refreshDiagnosticEvents() {
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index 06cc3645..0994e69f 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -39,10 +39,13 @@
   },
   "canvas": {
     "filesTab": "Files",
+    "historyTab": "History",
+    "codeTab": "Code",
+    "codeTabEmpty": "Generate a preview to edit HTML source here.",
     "filesTabEmpty": "No files yet",
     "openInTab": "Open in tab",
     "previewHint": "Thumbnail preview · double-click the file or use Open in tab for full view",
-    "tabsAriaLabel": "Open files",
+    "tabsAriaLabel": "Canvas",
     "closeTab": "Close {{name}}",
     "files": {
       "sectionTitle": "Design files",
diff --git a/packages/i18n/src/locales/pt-BR.json b/packages/i18n/src/locales/pt-BR.json
index c605e180..7f38ce35 100644
--- a/packages/i18n/src/locales/pt-BR.json
+++ b/packages/i18n/src/locales/pt-BR.json
@@ -39,10 +39,13 @@
   },
   "canvas": {
     "filesTab": "Arquivos",
+    "historyTab": "Histórico",
+    "codeTab": "Código",
+    "codeTabEmpty": "Gere uma pré-visualização para editar o HTML aqui.",
     "filesTabEmpty": "Nenhum arquivo ainda",
     "openInTab": "Abrir em nova aba",
     "previewHint": "Pré-visualização em miniatura · clique duas vezes no arquivo ou use Abrir em nova aba para ver em tela cheia",
-    "tabsAriaLabel": "Arquivos abertos",
+    "tabsAriaLabel": "Tela de artefato",
     "closeTab": "Fechar {{name}}",
     "files": {
       "sectionTitle": "Arquivos de design",
diff --git a/packages/i18n/src/locales/zh-CN.json b/packages/i18n/src/locales/zh-CN.json
index c13b628a..93e2fa7b 100644
--- a/packages/i18n/src/locales/zh-CN.json
+++ b/packages/i18n/src/locales/zh-CN.json
@@ -39,10 +39,13 @@
   },
   "canvas": {
     "filesTab": "文件",
+    "historyTab": "历史",
+    "codeTab": "代码",
+    "codeTabEmpty": "生成预览后可在此编辑 HTML 源码。",
     "filesTabEmpty": "还没有文件",
     "openInTab": "在新标签打开",
     "previewHint": "缩略预览 · 双击文件名或点击「在新标签打开」可在独立标签查看",
-    "tabsAriaLabel": "已打开文件",
+    "tabsAriaLabel": "画布",
     "closeTab": "关闭 {{name}}",
     "files": {
       "sectionTitle": "设计文件",

From a78bf6ffba144a4dc221068b06996fffdf30a167 Mon Sep 17 00:00:00 2001
From: Aleel101 <AleelsJourney@gmail.com>
Date: Mon, 27 Apr 2026 01:05:02 -0400
Subject: [PATCH 7/7] feat: upgrade Monaco editor with Shiki TextMate
 tokenization and settings panel

- Replace lang-mode selector (auto/html/js) with unified html language mode
- Add Shiki v4 TextMate grammar tokenization via @shikijs/monaco for VS Code-quality
  syntax highlighting across HTML, CSS, JS, and embedded regions
- Add babel injection grammar so <script type="text/babel"> blocks highlight as JS
- Configure monaco.languages.html.htmlDefaults and javascriptDefaults for richer
  IntelliSense inside embedded script/style regions
- Add editor settings panel: theme (system/light/dark), font size, word wrap, minimap,
  line numbers, tab size
- Fix async theme registration race: apply Shiki theme imperatively after grammars load
- Update ConsolePanel to use CSS variable colors and --font-mono
- Fix HistoryPanel restore to use artifactSource from restored snapshot and call
  loadCommentsForCurrentDesign after restore
- Add error handling for listForProvider in Settings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/desktop/package.json                     |   4 +
 .../renderer/src/components/ConsolePanel.tsx  |  12 +-
 .../renderer/src/components/HistoryPanel.tsx  |  33 +-
 .../src/components/PreviewPane.test.ts        |  33 ++
 .../renderer/src/components/PreviewPane.tsx   | 445 +++++++++++++++++-
 .../src/renderer/src/components/Settings.tsx  |  34 +-
 .../renderer/src/lib/setupMonacoTextmate.ts   |  61 +++
 pnpm-lock.yaml                                | 171 +++++++
 8 files changed, 752 insertions(+), 41 deletions(-)
 create mode 100644 apps/desktop/src/renderer/src/lib/setupMonacoTextmate.ts

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 3f2ce1ba..a14dbe06 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -18,6 +18,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@open-codesign/artifacts": "workspace:*",
     "@open-codesign/core": "workspace:*",
     "@open-codesign/exporters": "workspace:*",
@@ -27,12 +28,15 @@
     "@open-codesign/shared": "workspace:*",
     "@open-codesign/templates": "workspace:*",
     "@open-codesign/ui": "workspace:*",
+    "@shikijs/monaco": "^4.0.2",
     "better-sqlite3": "^12.9.0",
     "electron-log": "^5",
     "electron-updater": "^6.3.9",
     "lucide-react": "^1.8.0",
+    "monaco-editor": "^0.55.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "shiki": "^4.0.2",
     "smol-toml": "^1.6.1",
     "zip-lib": "^1.0.4",
     "zustand": "^5.0.2"
diff --git a/apps/desktop/src/renderer/src/components/ConsolePanel.tsx b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
index 77a68ab8..1d429e64 100644
--- a/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
+++ b/apps/desktop/src/renderer/src/components/ConsolePanel.tsx
@@ -6,8 +6,8 @@ import { useCodesignStore } from '../store';
 
 const LEVEL_STYLE: Record<ConsoleLevel, string> = {
   log: 'text-[var(--color-text-primary)]',
-  info: 'text-[#3b82f6]',
-  warn: 'text-[#f59e0b]',
+  info: 'text-[var(--color-accent)]',
+  warn: 'text-[var(--color-warning)]',
   error: 'text-[var(--color-error)]',
   debug: 'text-[var(--color-text-muted)]',
 };
@@ -15,7 +15,7 @@ const LEVEL_STYLE: Record<ConsoleLevel, string> = {
 const LEVEL_BG: Record<ConsoleLevel, string> = {
   log: '',
   info: '',
-  warn: 'bg-[color-mix(in_srgb,#f59e0b_6%,transparent)]',
+  warn: 'bg-[color-mix(in_srgb,var(--color-warning)_6%,transparent)]',
   error: 'bg-[color-mix(in_srgb,var(--color-error)_6%,transparent)]',
   debug: '',
 };
@@ -25,7 +25,7 @@ function ConsoleRow({ entry }: { entry: IframeConsoleLogEntry }) {
   const text = entry.args.join(' ');
   return (
     <div
-      className={`flex items-start gap-[var(--space-2)] px-[var(--space-3)] py-[2px] font-[ui-monospace,Menlo,monospace] text-[11.5px] leading-[1.5] border-b border-[var(--color-border-muted)]/40 last:border-0 ${LEVEL_BG[entry.level]}`}
+      className={`flex items-start gap-[var(--space-2)] px-[var(--space-3)] py-[2px] font-[var(--font-mono),ui-monospace,Menlo,monospace] text-[11.5px] leading-[1.5] border-b border-[var(--color-border-muted)]/40 last:border-0 ${LEVEL_BG[entry.level]}`}
     >
       <span className="shrink-0 text-[var(--color-text-muted)] tabular-nums select-none">
         {time}
@@ -78,7 +78,7 @@ export function ConsolePanel() {
         {errorCount}
       </span>
     ) : warnCount > 0 ? (
-      <span className="rounded-[3px] bg-[#f59e0b] text-white text-[10px] px-[5px] py-[1px] tabular-nums font-bold">
+      <span className="rounded-[3px] bg-[var(--color-warning)] text-[var(--color-on-accent)] text-[10px] px-[5px] py-[1px] tabular-nums font-bold">
         {warnCount}
       </span>
     ) : logs.length > 0 ? (
@@ -130,7 +130,7 @@ export function ConsolePanel() {
           className="max-h-[200px] overflow-y-auto border-t border-[var(--color-border-muted)]"
         >
           {logs.length === 0 ? (
-            <div className="px-[var(--space-3)] py-[var(--space-2)] text-[11.5px] text-[var(--color-text-muted)] font-[ui-monospace,Menlo,monospace]">
+            <div className="px-[var(--space-3)] py-[var(--space-2)] text-[11.5px] text-[var(--color-text-muted)] font-[var(--font-mono),ui-monospace,Menlo,monospace]">
               No output yet.
             </div>
           ) : (
diff --git a/apps/desktop/src/renderer/src/components/HistoryPanel.tsx b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
index e6893d84..85995551 100644
--- a/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
+++ b/apps/desktop/src/renderer/src/components/HistoryPanel.tsx
@@ -21,12 +21,14 @@ function formatDate(iso: string): string {
 export function HistoryPanel({ onClose }: HistoryPanelProps) {
   const currentDesignId = useCodesignStore((s) => s.currentDesignId);
   const setPreviewHtml = useCodesignStore((s) => s.setPreviewHtml);
+  const loadCommentsForCurrentDesign = useCodesignStore((s) => s.loadCommentsForCurrentDesign);
   const pushToast = useCodesignStore((s) => s.pushToast);
 
   const [snapshots, setSnapshots] = useState<DesignSnapshot[]>([]);
   const [loading, setLoading] = useState(true);
   const [selected, setSelected] = useState<DesignSnapshot | null>(null);
   const [restoring, setRestoring] = useState(false);
+  const [previewLoading, setPreviewLoading] = useState(false);
 
   useEffect(() => {
     if (!currentDesignId || !window.codesign) return;
@@ -46,11 +48,15 @@ export function HistoryPanel({ onClose }: HistoryPanelProps) {
     [selected],
   );
 
+  useEffect(() => {
+    setPreviewLoading(Boolean(previewSrc));
+  }, [previewSrc]);
+
   async function handleRestore() {
     if (!selected || !currentDesignId || !window.codesign) return;
     setRestoring(true);
     try {
-      await window.codesign.snapshots.create({
+      const restored = await window.codesign.snapshots.create({
         designId: currentDesignId,
         parentId: selected.id,
         type: 'fork',
@@ -58,7 +64,8 @@ export function HistoryPanel({ onClose }: HistoryPanelProps) {
         artifactType: selected.artifactType,
         artifactSource: selected.artifactSource,
       });
-      setPreviewHtml(selected.artifactSource);
+      setPreviewHtml(restored.artifactSource);
+      await loadCommentsForCurrentDesign();
       pushToast({ variant: 'success', title: 'Restored to selected version' });
       onClose();
     } catch (err) {
@@ -134,12 +141,22 @@ export function HistoryPanel({ onClose }: HistoryPanelProps) {
         {/* Preview area */}
         <div className="flex-1 flex flex-col min-w-0">
           {previewSrc ? (
-            <iframe
-              title="history-preview"
-              sandbox="allow-scripts"
-              srcDoc={previewSrc}
-              className="flex-1 w-full border-0 bg-white"
-            />
+            <div className="relative flex-1 min-h-0 bg-[var(--color-surface)]">
+              <iframe
+                title="history-preview"
+                sandbox="allow-scripts"
+                srcDoc={previewSrc}
+                onLoad={() => setPreviewLoading(false)}
+                className={`h-full w-full border-0 bg-[var(--color-surface)] transition-opacity ${
+                  previewLoading ? 'opacity-0' : 'opacity-100'
+                }`}
+              />
+              {previewLoading ? (
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-[12px] text-[var(--color-text-muted)]">
+                  Loading preview…
+                </div>
+              ) : null}
+            </div>
           ) : (
             <div className="flex-1 flex items-center justify-center text-[12px] text-[var(--color-text-muted)]">
               Select a version to preview.
diff --git a/apps/desktop/src/renderer/src/components/PreviewPane.test.ts b/apps/desktop/src/renderer/src/components/PreviewPane.test.ts
index 085f5dc0..4ee6e66b 100644
--- a/apps/desktop/src/renderer/src/components/PreviewPane.test.ts
+++ b/apps/desktop/src/renderer/src/components/PreviewPane.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { useCodesignStore } from '../store';
 import {
+  decideCodeDraftSync,
   handlePreviewMessage,
   isTrustedPreviewMessageSource,
   postModeToPreviewWindow,
@@ -65,6 +66,38 @@ function App(){ return <div />; }`;
   });
 });
 
+describe('decideCodeDraftSync', () => {
+  it('adopts incoming html when draft still matches previous committed html', () => {
+    expect(
+      decideCodeDraftSync({
+        previousCommittedHtml: '<h1>old</h1>',
+        nextHtml: '<h1>new</h1>',
+        currentDraft: '<h1>old</h1>',
+      }),
+    ).toEqual({ nextDraft: '<h1>new</h1>', pendingRemoteUpdate: false });
+  });
+
+  it('keeps local draft and marks pending update when incoming html arrives while dirty', () => {
+    expect(
+      decideCodeDraftSync({
+        previousCommittedHtml: '<h1>old</h1>',
+        nextHtml: '<h1>new remote</h1>',
+        currentDraft: '<h1>local edits</h1>',
+      }),
+    ).toEqual({ nextDraft: '<h1>local edits</h1>', pendingRemoteUpdate: true });
+  });
+
+  it('returns unchanged draft when html has not changed', () => {
+    expect(
+      decideCodeDraftSync({
+        previousCommittedHtml: '<h1>same</h1>',
+        nextHtml: '<h1>same</h1>',
+        currentDraft: '<h1>local edits</h1>',
+      }),
+    ).toEqual({ nextDraft: '<h1>local edits</h1>', pendingRemoteUpdate: false });
+  });
+});
+
 describe('handlePreviewMessage trust boundary', () => {
   function makeHandlers() {
     return {
diff --git a/apps/desktop/src/renderer/src/components/PreviewPane.tsx b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
index 36c6a466..9112965a 100644
--- a/apps/desktop/src/renderer/src/components/PreviewPane.tsx
+++ b/apps/desktop/src/renderer/src/components/PreviewPane.tsx
@@ -1,3 +1,4 @@
+import type { Monaco } from '@monaco-editor/react';
 import { useT } from '@open-codesign/i18n';
 import {
   type ElementRectsMessage,
@@ -10,9 +11,25 @@ import {
   isIframeErrorMessage,
   isOverlayMessage,
 } from '@open-codesign/runtime';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { editor as MonacoEditorNS } from 'monaco-editor';
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  Suspense,
+  lazy,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  SHIKI_THEME_DARK,
+  SHIKI_THEME_LIGHT,
+  setupTextmateGrammars,
+} from '../lib/setupMonacoTextmate';
 import { EmptyState } from '../preview/EmptyState';
 import { ErrorState } from '../preview/ErrorState';
+import type { Theme } from '../store';
 import { useCodesignStore } from '../store';
 import { CanvasErrorBar } from './CanvasErrorBar';
 import { CanvasTabBar } from './CanvasTabBar';
@@ -30,6 +47,12 @@ export interface PreviewPaneProps {
   onPickStarter: (prompt: string) => void;
 }
 
+const ENABLE_MONACO_CODE_EDITOR = true;
+const MonacoEditor = lazy(async () => {
+  const mod = await import('@monaco-editor/react');
+  return { default: mod.default };
+});
+
 export function formatIframeError(
   kind: string,
   message: string,
@@ -293,6 +316,7 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const t = useT();
   const previewHtml = useCodesignStore((s) => s.previewHtml);
   const setPreviewHtml = useCodesignStore((s) => s.setPreviewHtml);
+  const theme = useCodesignStore((s) => s.theme);
   const previewHtmlByDesign = useCodesignStore((s) => s.previewHtmlByDesign);
   const recentDesignIds = useCodesignStore((s) => s.recentDesignIds);
   const currentDesignId = useCodesignStore((s) => s.currentDesignId);
@@ -630,7 +654,12 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
         <CanvasErrorBar />
         <div className="relative flex-1 min-h-0 overflow-hidden">
           {activeKind === 'code' && typeof previewHtml === 'string' && previewHtml.length > 0 ? (
-            <CodeViewPanel html={previewHtml} isGenerating={isGenerating} onSave={setPreviewHtml} />
+            <CodeViewPanel
+              html={previewHtml}
+              isGenerating={isGenerating}
+              onSave={setPreviewHtml}
+              theme={theme}
+            />
           ) : activeKind === 'code' ? (
             <div className="flex h-full min-h-0 items-center justify-center px-6 text-center text-[12px] text-[var(--color-text-muted)]">
               {t('canvas.codeTabEmpty')}
@@ -728,64 +757,440 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
 
 /* ── Code view panel ─────────────────────────────────────────────────── */
 
+type EditorThemeSetting = 'system' | 'light' | 'dark';
+
+interface EditorSettings {
+  theme: EditorThemeSetting;
+  fontSize: number;
+  wordWrap: 'on' | 'off';
+  minimap: boolean;
+  lineNumbers: 'on' | 'off';
+  tabSize: 2 | 4;
+}
+
+const DEFAULT_EDITOR_SETTINGS: EditorSettings = {
+  theme: 'system',
+  fontSize: 12.5,
+  wordWrap: 'on',
+  minimap: false,
+  lineNumbers: 'on',
+  tabSize: 2,
+};
+
+const FONT_SIZES = [11, 12, 13, 14, 16, 18, 20] as const;
+
 interface CodeViewPanelProps {
   html: string;
   isGenerating: boolean;
   onSave: (html: string) => void;
+  theme: Theme;
+}
+
+export function decideCodeDraftSync(input: {
+  previousCommittedHtml: string;
+  nextHtml: string;
+  currentDraft: string;
+}): { nextDraft: string; pendingRemoteUpdate: boolean } {
+  const { previousCommittedHtml, nextHtml, currentDraft } = input;
+  if (nextHtml === previousCommittedHtml) {
+    return { nextDraft: currentDraft, pendingRemoteUpdate: false };
+  }
+  const draftMatchesPreviousCommitted = currentDraft === previousCommittedHtml;
+  if (draftMatchesPreviousCommitted) {
+    return { nextDraft: nextHtml, pendingRemoteUpdate: false };
+  }
+  return { nextDraft: currentDraft, pendingRemoteUpdate: true };
 }
 
-function CodeViewPanel({ html, isGenerating, onSave }: CodeViewPanelProps) {
+function CodeViewPanel({ html, isGenerating, onSave, theme }: CodeViewPanelProps) {
   const [draft, setDraft] = useState(html);
   const [saved, setSaved] = useState(false);
+  const [pendingRemoteUpdate, setPendingRemoteUpdate] = useState(false);
+  const [settings, setSettings] = useState<EditorSettings>(DEFAULT_EDITOR_SETTINGS);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const lastCommittedHtmlRef = useRef(html);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const settingsPanelRef = useRef<HTMLDivElement>(null);
+  const settingsBtnRef = useRef<HTMLButtonElement>(null);
+  const monacoRef = useRef<Monaco | null>(null);
+  const resolvedThemeRef = useRef<string>('');
   const dirty = draft !== html;
 
-  // Keep draft in sync when html changes externally (e.g. agent streaming)
   useEffect(() => {
-    setDraft(html);
-  }, [html]);
+    if (!settingsOpen) return;
+    function onPointerDown(e: PointerEvent) {
+      const target = e.target as Node;
+      if (
+        !settingsPanelRef.current?.contains(target) &&
+        !settingsBtnRef.current?.contains(target)
+      ) {
+        setSettingsOpen(false);
+      }
+    }
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [settingsOpen]);
+
+  function setSetting<K extends keyof EditorSettings>(key: K, value: EditorSettings[K]) {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  }
+
+  // Keep draft synced to external html changes unless the user is editing a
+  // dirty draft; in that case keep local edits and surface that a newer server
+  // version is waiting.
+  useEffect(() => {
+    const prevHtml = lastCommittedHtmlRef.current;
+    if (html === prevHtml) return;
+    const sync = decideCodeDraftSync({
+      previousCommittedHtml: prevHtml,
+      nextHtml: html,
+      currentDraft: draft,
+    });
+    lastCommittedHtmlRef.current = html;
+    if (sync.nextDraft !== draft) {
+      setDraft(sync.nextDraft);
+      return;
+    }
+    setPendingRemoteUpdate(sync.pendingRemoteUpdate);
+  }, [html, draft]);
+
+  useEffect(() => {
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (draft === html) setPendingRemoteUpdate(false);
+  }, [draft, html]);
 
   function handleSave(): void {
     onSave(draft);
     setSaved(true);
-    setTimeout(() => setSaved(false), 1500);
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(() => setSaved(false), 1500);
   }
 
-  function handleKeyDown(e: import('react').KeyboardEvent): void {
+  function handleKeyDown(e: ReactKeyboardEvent): void {
     if ((e.metaKey || e.ctrlKey) && e.key === 's') {
       e.preventDefault();
       if (!isGenerating) handleSave();
     }
   }
 
+  function handleMonacoMount(editor: MonacoEditorNS.IStandaloneCodeEditor, monaco: Monaco): void {
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      if (!isGenerating) handleSave();
+    });
+
+    const { typescript, html } = monaco.languages;
+    const { ScriptTarget, ModuleKind, JsxEmit } = typescript;
+
+    typescript.javascriptDefaults.setCompilerOptions({
+      target: ScriptTarget.ESNext,
+      module: ModuleKind.ESNext,
+      jsx: JsxEmit.React,
+      allowJs: true,
+      allowNonTsExtensions: true,
+      allowSyntheticDefaultImports: true,
+      esModuleInterop: true,
+      lib: ['es2022', 'dom'],
+    });
+
+    // Suppress errors that don't apply to inline scripts: missing imports,
+    // top-level module semantics, and implicit-any on browser globals.
+    typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+      noSuggestionDiagnostics: false,
+      diagnosticCodesToIgnore: [
+        2304, // Cannot find name (browser globals like 'document', 'React')
+        2580, // Cannot find module 'X' (CDN imports)
+        2792, // Cannot find module (ESM specifiers)
+        7026, // JSX element implicitly has type 'any'
+      ],
+    });
+
+    html.htmlDefaults.setOptions({
+      validate: true,
+      suggest: { html5: true },
+      format: { indentInnerHtml: true, wrapLineLength: 120 },
+    });
+
+    monacoRef.current = monaco;
+    setupTextmateGrammars(monaco).then(() => {
+      monaco.editor.setTheme(resolvedThemeRef.current);
+    });
+  }
+
+  const resolvedTheme =
+    settings.theme === 'light'
+      ? SHIKI_THEME_LIGHT
+      : settings.theme === 'dark'
+        ? SHIKI_THEME_DARK
+        : theme === 'dark'
+          ? SHIKI_THEME_DARK
+          : SHIKI_THEME_LIGHT;
+
+  // Keep ref current so the post-Shiki .then() callback always reads the
+  // latest value regardless of which render's closure captured handleMonacoMount.
+  resolvedThemeRef.current = resolvedTheme;
+
+  // Imperatively apply the theme whenever it changes. The theme prop alone is
+  // insufficient because shikiToMonaco registers Monaco themes asynchronously —
+  // Monaco ignores setTheme calls for unregistered names, so we re-apply once
+  // Shiki is done (in handleMonacoMount) and on every subsequent change here.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    monacoRef.current?.editor.setTheme(resolvedTheme);
+  }, [resolvedTheme]);
+
+  const showMonaco = ENABLE_MONACO_CODE_EDITOR;
+
+  function SegmentedControl<T extends string | number>({
+    value,
+    options,
+    onChange,
+  }: {
+    value: T;
+    options: { label: string; value: T }[];
+    onChange: (v: T) => void;
+  }) {
+    return (
+      <div className="inline-flex rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-background)] p-[2px] gap-[2px]">
+        {options.map((opt) => (
+          <button
+            key={String(opt.value)}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            aria-pressed={value === opt.value}
+            className={`h-[22px] rounded-[calc(var(--radius-sm)-2px)] px-[var(--space-2)] text-[10px] font-medium transition-colors ${
+              value === opt.value
+                ? 'bg-[var(--color-accent)] text-[var(--color-on-accent)]'
+                : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
+            }`}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full bg-[var(--color-background-secondary)]">
+      {/* Permanent header: language badge + settings toggle */}
+      <div className="relative flex items-center justify-between px-[var(--space-3)] h-8 border-b border-[var(--color-border-muted)] bg-[var(--color-background)] shrink-0">
+        <span className="text-[10px] font-medium text-[var(--color-text-muted)] tracking-wide uppercase select-none">
+          HTML
+        </span>
+        <button
+          ref={settingsBtnRef}
+          type="button"
+          onClick={() => setSettingsOpen((o) => !o)}
+          aria-label="Editor settings"
+          aria-expanded={settingsOpen}
+          className={`w-6 h-6 flex items-center justify-center rounded-[var(--radius-sm)] transition-colors ${
+            settingsOpen
+              ? 'bg-[var(--color-accent)] text-[var(--color-on-accent)]'
+              : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
+          }`}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+          </svg>
+        </button>
+
+        {/* Settings panel */}
+        {settingsOpen && (
+          <div
+            ref={settingsPanelRef}
+            className="absolute right-0 top-full z-20 w-64 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-b-[var(--radius-base)] shadow-lg overflow-hidden"
+          >
+            <div className="px-[var(--space-3)] py-[var(--space-2)] flex flex-col gap-[var(--space-3)]">
+              {/* Theme */}
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-[11px] text-[var(--color-text-secondary)] shrink-0">
+                  Theme
+                </span>
+                <SegmentedControl
+                  value={settings.theme}
+                  options={[
+                    { label: 'System', value: 'system' as const },
+                    { label: 'Light', value: 'light' as const },
+                    { label: 'Dark', value: 'dark' as const },
+                  ]}
+                  onChange={(v) => setSetting('theme', v)}
+                />
+              </div>
+
+              {/* Font size */}
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-[11px] text-[var(--color-text-secondary)] shrink-0">
+                  Font size
+                </span>
+                <div className="inline-flex rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-background)] p-[2px] gap-[2px]">
+                  {FONT_SIZES.map((size) => (
+                    <button
+                      key={size}
+                      type="button"
+                      onClick={() => setSetting('fontSize', size)}
+                      aria-pressed={settings.fontSize === size}
+                      className={`h-[22px] min-w-[22px] rounded-[calc(var(--radius-sm)-2px)] px-[3px] text-[10px] font-medium transition-colors ${
+                        settings.fontSize === size
+                          ? 'bg-[var(--color-accent)] text-[var(--color-on-accent)]'
+                          : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]'
+                      }`}
+                    >
+                      {size}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Word wrap */}
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-[11px] text-[var(--color-text-secondary)] shrink-0">
+                  Word wrap
+                </span>
+                <SegmentedControl
+                  value={settings.wordWrap}
+                  options={[
+                    { label: 'On', value: 'on' as const },
+                    { label: 'Off', value: 'off' as const },
+                  ]}
+                  onChange={(v) => setSetting('wordWrap', v)}
+                />
+              </div>
+
+              {/* Minimap */}
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-[11px] text-[var(--color-text-secondary)] shrink-0">
+                  Minimap
+                </span>
+                <SegmentedControl
+                  value={settings.minimap ? 'show' : 'hide'}
+                  options={[
+                    { label: 'Show', value: 'show' },
+                    { label: 'Hide', value: 'hide' },
+                  ]}
+                  onChange={(v) => setSetting('minimap', v === 'show')}
+                />
+              </div>
+
+              {/* Line numbers */}
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-[11px] text-[var(--color-text-secondary)] shrink-0">
+                  Line numbers
+                </span>
+                <SegmentedControl
+                  value={settings.lineNumbers}
+                  options={[
+                    { label: 'On', value: 'on' as const },
+                    { label: 'Off', value: 'off' as const },
+                  ]}
+                  onChange={(v) => setSetting('lineNumbers', v)}
+                />
+              </div>
+
+              {/* Tab size */}
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-[11px] text-[var(--color-text-secondary)] shrink-0">
+                  Tab size
+                </span>
+                <SegmentedControl
+                  value={settings.tabSize}
+                  options={[
+                    { label: '2', value: 2 as const },
+                    { label: '4', value: 4 as const },
+                  ]}
+                  onChange={(v) => setSetting('tabSize', v)}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
       {isGenerating ? (
         <div className="flex items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-1_5)] text-[11.5px] bg-[color-mix(in_srgb,var(--color-accent)_8%,transparent)] border-b border-[var(--color-accent)]/20 text-[var(--color-text-secondary)]">
           <span className="w-[7px] h-[7px] rounded-full bg-[var(--color-accent)] animate-pulse shrink-0" />
           Code view is read-only while the agent is running.
         </div>
       ) : dirty ? (
-        <div className="flex items-center justify-between gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-1_5)] text-[11.5px] bg-[color-mix(in_srgb,#f59e0b_10%,transparent)] border-b border-[#f59e0b]/30 text-[var(--color-text-secondary)]">
+        <div className="flex items-center justify-between gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-1_5)] text-[11.5px] bg-[color-mix(in_srgb,var(--color-warning)_10%,transparent)] border-b border-[color-mix(in_srgb,var(--color-warning)_36%,transparent)] text-[var(--color-text-secondary)]">
           <span>Unsaved edits — save to apply to preview.</span>
           <button
             type="button"
             onClick={handleSave}
-            className="shrink-0 inline-flex items-center h-[22px] px-[10px] rounded-[var(--radius-sm)] text-[11px] font-medium bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors duration-100"
+            className="shrink-0 inline-flex items-center h-[22px] px-[10px] rounded-[var(--radius-sm)] text-[11px] font-medium bg-[var(--color-accent)] text-[var(--color-on-accent)] hover:bg-[var(--color-accent-hover)] transition-colors duration-100"
           >
             {saved ? 'Saved ✓' : 'Save (⌘S)'}
           </button>
         </div>
       ) : null}
-      <textarea
-        value={draft}
-        onChange={(e) => !isGenerating && setDraft(e.target.value)}
-        onKeyDown={handleKeyDown}
-        readOnly={isGenerating}
-        spellCheck={false}
-        className="flex-1 w-full resize-none border-0 bg-transparent p-[var(--space-4)] text-[12.5px] leading-[1.6] font-[ui-monospace,Menlo,monospace] text-[var(--color-text-primary)] outline-none focus:outline-none"
-        style={{ tabSize: 2 }}
-        aria-label="HTML source"
-      />
+      {pendingRemoteUpdate ? (
+        <div className="flex items-center gap-[var(--space-2)] border-b border-[var(--color-border-muted)] bg-[var(--color-surface)] px-[var(--space-3)] py-[var(--space-1_5)] text-[11px] text-[var(--color-text-muted)]">
+          A newer preview update is available. Save your local edits to apply your version.
+        </div>
+      ) : null}
+      {showMonaco ? (
+        <div className="flex-1 min-h-0">
+          <Suspense
+            fallback={
+              <div className="flex h-full items-center justify-center text-[12px] text-[var(--color-text-muted)]">
+                Loading editor…
+              </div>
+            }
+          >
+            <MonacoEditor
+              value={draft}
+              onChange={(value) => {
+                if (isGenerating) return;
+                setDraft(value ?? '');
+              }}
+              language="html"
+              theme={resolvedTheme}
+              onMount={handleMonacoMount}
+              options={{
+                readOnly: isGenerating,
+                minimap: { enabled: settings.minimap },
+                wordWrap: settings.wordWrap,
+                tabSize: settings.tabSize,
+                lineNumbers: settings.lineNumbers,
+                automaticLayout: true,
+                scrollBeyondLastLine: false,
+                fontSize: settings.fontSize,
+                lineHeight: Math.round(settings.fontSize * 1.6),
+                fontFamily: 'var(--font-mono), ui-monospace, Menlo, monospace',
+              }}
+            />
+          </Suspense>
+        </div>
+      ) : (
+        <textarea
+          value={draft}
+          onChange={(e) => !isGenerating && setDraft(e.target.value)}
+          onKeyDown={handleKeyDown}
+          readOnly={isGenerating}
+          spellCheck={false}
+          className="flex-1 w-full resize-none border-0 bg-transparent p-[var(--space-4)] text-[12.5px] leading-[1.6] font-[var(--font-mono),ui-monospace,Menlo,monospace] text-[var(--color-text-primary)] outline-none focus:outline-none"
+          style={{ tabSize: settings.tabSize }}
+          aria-label="HTML source"
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/desktop/src/renderer/src/components/Settings.tsx b/apps/desktop/src/renderer/src/components/Settings.tsx
index 850eb6ae..26170143 100644
--- a/apps/desktop/src/renderer/src/components/Settings.tsx
+++ b/apps/desktop/src/renderer/src/components/Settings.tsx
@@ -2038,16 +2038,36 @@ function ModelRoutingSection({
     setQuery('');
     setListLoading(true);
     setAvailableModels([]);
-    void window.codesign.models.listForProvider(config.provider).then((res) => {
-      if (cancelled) return;
-      setListLoading(false);
-      if (res.ok) setAvailableModels(res.models);
-      else setAvailableModels([]);
-    });
+    void window.codesign.models
+      .listForProvider(config.provider)
+      .then((res) => {
+        if (cancelled) return;
+        setListLoading(false);
+        if (res.ok) {
+          setAvailableModels(res.models);
+          return;
+        }
+        setAvailableModels([]);
+        pushToast({
+          variant: 'error',
+          title: t('settings.modelRouting.saveFailed'),
+          description: res.message ?? t('settings.common.unknownError'),
+        });
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setListLoading(false);
+        setAvailableModels([]);
+        pushToast({
+          variant: 'error',
+          title: t('settings.modelRouting.saveFailed'),
+          description: cleanIpcError(err) || t('settings.common.unknownError'),
+        });
+      });
     return () => {
       cancelled = true;
     };
-  }, [config?.provider]);
+  }, [config?.provider, pushToast, t]);
 
   const modelIdsForList = useMemo(
     () => mergeActiveModelIfMissing(availableModels, fastModel),
diff --git a/apps/desktop/src/renderer/src/lib/setupMonacoTextmate.ts b/apps/desktop/src/renderer/src/lib/setupMonacoTextmate.ts
new file mode 100644
index 00000000..2f11371c
--- /dev/null
+++ b/apps/desktop/src/renderer/src/lib/setupMonacoTextmate.ts
@@ -0,0 +1,61 @@
+import type { Monaco } from '@monaco-editor/react';
+import type { LanguageRegistration } from 'shiki';
+
+// VS Code's HTML grammar explicitly excludes type="text/babel" from JS
+// embedding. This injection grammar restores it. R: = high priority so our
+// pattern runs before HTML's own <script> rules in the same scope.
+//
+// Capture groups in begin (no captures inside the lookahead):
+//   1: <   2: script   3: >
+const babelScriptInjection: LanguageRegistration = {
+  name: 'html-babel-injection',
+  scopeName: 'text.html.babel-injection',
+  injectionSelector: 'R:text.html.basic',
+  patterns: [{ include: '#script-babel' }],
+  repository: {
+    'script-babel': {
+      name: 'meta.embedded.block.babel',
+      begin: String.raw`(<)(script)(?=[^>]*\btype=["']text/babel["'])[^>]*(>)`,
+      beginCaptures: {
+        '1': { name: 'punctuation.definition.tag.begin.html' },
+        '2': { name: 'entity.name.tag.script.html' },
+        '3': { name: 'punctuation.definition.tag.end.html' },
+      },
+      contentName: 'source.js',
+      end: String.raw`(<\/)(script)([^>]*)(>)`,
+      endCaptures: {
+        '1': { name: 'punctuation.definition.tag.begin.html' },
+        '2': { name: 'entity.name.tag.script.html' },
+        '4': { name: 'punctuation.definition.tag.end.html' },
+      },
+      patterns: [{ include: 'source.js' }],
+    },
+  },
+};
+
+let promise: Promise<void> | null = null;
+
+export function setupTextmateGrammars(monaco: Monaco): Promise<void> {
+  if (promise) return promise;
+  promise = (async () => {
+    const [{ createHighlighter, bundledThemes, bundledLanguages }, { shikiToMonaco }] =
+      await Promise.all([import('shiki'), import('@shikijs/monaco')]);
+
+    // light-plus / dark-plus = VS Code's Light+/Dark+ — closest bundled
+    // equivalents to Monaco's built-in vs/vs-dark.
+    // Injection grammar loads before html so vscode-textmate sees it when
+    // compiling text.html.basic.
+    const highlighter = await createHighlighter({
+      themes: [bundledThemes['light-plus'](), bundledThemes['dark-plus']()],
+      langs: [bundledLanguages['css'](), bundledLanguages['javascript']()],
+    });
+    await highlighter.loadLanguage(babelScriptInjection);
+    await highlighter.loadLanguage(bundledLanguages['html']());
+
+    shikiToMonaco(highlighter, monaco);
+  })();
+  return promise;
+}
+
+export const SHIKI_THEME_LIGHT = 'light-plus' as const;
+export const SHIKI_THEME_DARK = 'dark-plus' as const;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7af30b2d..c52ef925 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
 
   apps/desktop:
     dependencies:
+      '@monaco-editor/react':
+        specifier: ^4.7.0
+        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@open-codesign/artifacts':
         specifier: workspace:*
         version: link:../../packages/artifacts
@@ -71,6 +74,9 @@ importers:
       '@open-codesign/ui':
         specifier: workspace:*
         version: link:../../packages/ui
+      '@shikijs/monaco':
+        specifier: ^4.0.2
+        version: 4.0.2
       better-sqlite3:
         specifier: ^12.9.0
         version: 12.9.0
@@ -83,12 +89,18 @@ importers:
       lucide-react:
         specifier: ^1.8.0
         version: 1.8.0(react@19.2.5)
+      monaco-editor:
+        specifier: ^0.55.1
+        version: 0.55.1
       react:
         specifier: ^19.0.0
         version: 19.2.5
       react-dom:
         specifier: ^19.0.0
         version: 19.2.5(react@19.2.5)
+      shiki:
+        specifier: ^4.0.2
+        version: 4.0.2
       smol-toml:
         specifier: ^1.6.1
         version: 1.6.1
@@ -1405,6 +1417,16 @@ packages:
   '@mistralai/mistralai@2.2.1':
     resolution: {integrity: sha512-uKU8CZmL2RzYKmplsU01hii4p3pe4HqJefpWNRWXm1Tcm0Sm4xXfwSLIy4k7ZCPlbETCGcp69E7hZs+WOJ5itQ==}
 
+  '@monaco-editor/loader@1.7.0':
+    resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
+
+  '@monaco-editor/react@4.7.0':
+    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@nodable/entities@2.1.0':
     resolution: {integrity: sha512-nyT7T3nbMyBI/lvr6L5TyWbFJAI9FTgVRakNoBqCD+PmID8DzFrrNdLLtHMwMszOtqZa8PAOV24ZqDnQrhQINA==}
 
@@ -1598,24 +1620,56 @@ packages:
   '@shikijs/core@2.5.0':
     resolution: {integrity: sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==}
 
+  '@shikijs/core@4.0.2':
+    resolution: {integrity: sha512-hxT0YF4ExEqB8G/qFdtJvpmHXBYJ2lWW7qTHDarVkIudPFE6iCIrqdgWxGn5s+ppkGXI0aEGlibI0PAyzP3zlw==}
+    engines: {node: '>=20'}
+
   '@shikijs/engine-javascript@2.5.0':
     resolution: {integrity: sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==}
 
+  '@shikijs/engine-javascript@4.0.2':
+    resolution: {integrity: sha512-7PW0Nm49DcoUIQEXlJhNNBHyoGMjalRETTCcjMqEaMoJRLljy1Bi/EGV3/qLBgLKQejdspiiYuHGQW6dX94Nag==}
+    engines: {node: '>=20'}
+
   '@shikijs/engine-oniguruma@2.5.0':
     resolution: {integrity: sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==}
 
+  '@shikijs/engine-oniguruma@4.0.2':
+    resolution: {integrity: sha512-UpCB9Y2sUKlS9z8juFSKz7ZtysmeXCgnRF0dlhXBkmQnek7lAToPte8DkxmEYGNTMii72zU/lyXiCB6StuZeJg==}
+    engines: {node: '>=20'}
+
   '@shikijs/langs@2.5.0':
     resolution: {integrity: sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==}
 
+  '@shikijs/langs@4.0.2':
+    resolution: {integrity: sha512-KaXby5dvoeuZzN0rYQiPMjFoUrz4hgwIE+D6Du9owcHcl6/g16/yT5BQxSW5cGt2MZBz6Hl0YuRqf12omRfUUg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/monaco@4.0.2':
+    resolution: {integrity: sha512-yA49DPAjDyj9D8yxyr1S7qjcT1TVv6BqhZ+sXccwqcdp83RuncYOCUkJ1rjqAu3NA8YDc2wdesD+/js5pHJdqg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.0.2':
+    resolution: {integrity: sha512-M6UMPrSa3fN5ayeJwFVl9qWofl273wtK1VG8ySDZ1mQBfhCpdd8nEx7nPZ/tk7k+TYcpqBZzj/AnwxT9lO+HJw==}
+    engines: {node: '>=20'}
+
   '@shikijs/themes@2.5.0':
     resolution: {integrity: sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==}
 
+  '@shikijs/themes@4.0.2':
+    resolution: {integrity: sha512-mjCafwt8lJJaVSsQvNVrJumbnnj1RI8jbUKrPKgE6E3OvQKxnuRoBaYC51H4IGHePsGN/QtALglWBU7DoKDFnA==}
+    engines: {node: '>=20'}
+
   '@shikijs/transformers@2.5.0':
     resolution: {integrity: sha512-SI494W5X60CaUwgi8u4q4m4s3YAFSxln3tzNjOSYqq54wlVgz0/NbbXEb3mdLbqMBztcmS7bVTaEd2w0qMmfeg==}
 
   '@shikijs/types@2.5.0':
     resolution: {integrity: sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==}
 
+  '@shikijs/types@4.0.2':
+    resolution: {integrity: sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg==}
+    engines: {node: '>=20'}
+
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
@@ -2052,6 +2106,9 @@ packages:
   '@types/retry@0.12.0':
     resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -2724,6 +2781,9 @@ packages:
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
   dotenv-expand@11.0.7:
     resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
     engines: {node: '>=12'}
@@ -3534,6 +3594,11 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   matcher@3.0.0:
     resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==}
     engines: {node: '>=10'}
@@ -3767,6 +3832,9 @@ packages:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -3841,9 +3909,15 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
   oniguruma-to-es@3.1.1:
     resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
 
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
   openai@6.26.0:
     resolution: {integrity: sha512-zd23dbWTjiJ6sSAX6s0HrCZi41JwTA1bQVs0wLQPZ2/5o2gxOJA5wh7yOAUgwYybfhDXyhwlpeQf7Mlgx8EOCA==}
     hasBin: true
@@ -4266,6 +4340,10 @@ packages:
   shiki@2.5.0:
     resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
 
+  shiki@4.0.2:
+    resolution: {integrity: sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ==}
+    engines: {node: '>=20'}
+
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -4348,6 +4426,9 @@ packages:
     resolution: {integrity: sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==}
     engines: {node: '>= 6'}
 
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
@@ -6182,6 +6263,17 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  '@monaco-editor/loader@1.7.0':
+    dependencies:
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+    dependencies:
+      '@monaco-editor/loader': 1.7.0
+      monaco-editor: 0.55.1
+      react: 19.2.5
+      react-dom: 19.2.5(react@19.2.5)
+
   '@nodable/entities@2.1.0': {}
 
   '@nodelib/fs.scandir@2.1.5':
@@ -6337,25 +6429,64 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
+  '@shikijs/core@4.0.2':
+    dependencies:
+      '@shikijs/primitive': 4.0.2
+      '@shikijs/types': 4.0.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
   '@shikijs/engine-javascript@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 3.1.1
 
+  '@shikijs/engine-javascript@4.0.2':
+    dependencies:
+      '@shikijs/types': 4.0.2
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
   '@shikijs/engine-oniguruma@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
       '@shikijs/vscode-textmate': 10.0.2
 
+  '@shikijs/engine-oniguruma@4.0.2':
+    dependencies:
+      '@shikijs/types': 4.0.2
+      '@shikijs/vscode-textmate': 10.0.2
+
   '@shikijs/langs@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
 
+  '@shikijs/langs@4.0.2':
+    dependencies:
+      '@shikijs/types': 4.0.2
+
+  '@shikijs/monaco@4.0.2':
+    dependencies:
+      '@shikijs/core': 4.0.2
+      '@shikijs/types': 4.0.2
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/primitive@4.0.2':
+    dependencies:
+      '@shikijs/types': 4.0.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/themes@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
 
+  '@shikijs/themes@4.0.2':
+    dependencies:
+      '@shikijs/types': 4.0.2
+
   '@shikijs/transformers@2.5.0':
     dependencies:
       '@shikijs/core': 2.5.0
@@ -6366,6 +6497,11 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  '@shikijs/types@4.0.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.2': {}
 
   '@sinclair/typebox@0.34.49': {}
@@ -6901,6 +7037,9 @@ snapshots:
 
   '@types/retry@0.12.0': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -7626,6 +7765,10 @@ snapshots:
 
   dom-accessibility-api@0.5.16: {}
 
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   dotenv-expand@11.0.7:
     dependencies:
       dotenv: 16.6.1
@@ -8585,6 +8728,8 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked@14.0.0: {}
+
   matcher@3.0.0:
     dependencies:
       escape-string-regexp: 4.0.0
@@ -9019,6 +9164,11 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
   mri@1.2.0: {}
 
   ms@2.1.3: {}
@@ -9088,12 +9238,20 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  oniguruma-parser@0.12.2: {}
+
   oniguruma-to-es@3.1.1:
     dependencies:
       emoji-regex-xs: 1.0.0
       regex: 6.1.0
       regex-recursion: 6.0.2
 
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   openai@6.26.0(ws@8.20.0)(zod@3.25.76):
     optionalDependencies:
       ws: 8.20.0
@@ -9594,6 +9752,17 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  shiki@4.0.2:
+    dependencies:
+      '@shikijs/core': 4.0.2
+      '@shikijs/engine-javascript': 4.0.2
+      '@shikijs/engine-oniguruma': 4.0.2
+      '@shikijs/langs': 4.0.2
+      '@shikijs/themes': 4.0.2
+      '@shikijs/types': 4.0.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   siginfo@2.0.0: {}
 
   signal-exit@3.0.7: {}
@@ -9669,6 +9838,8 @@ snapshots:
 
   stat-mode@1.0.0: {}
 
+  state-local@1.0.7: {}
+
   std-env@3.10.0: {}
 
   streamx@2.25.0: