fix(desktop): complete canvas context wiring

Signed-off-by: framethespace <68256458+framethespace@users.noreply.github.com>

Author: framethespace

.changeset/canvas-context-tab.md

@@ -0,0 +1,5 @@
+---
+"@open-codesign/desktop": patch
+---
+
+Add a pinned Canvas tab in the desktop preview pane so sketches can live alongside generated files, and send canvas context back with the next prompt when the sketch changes.

apps/desktop/src/preload/index.ts

@@ -117,6 +117,17 @@ export interface Preferences {
   diagnosticsLastReadTs: number;
 }
 
+export interface CanvasStoredState {
+  sceneJson: string | null;
+  importedFiles: LocalInputFile[];
+}
+
+export interface CanvasContextFile {
+  name: string;
+  content: string;
+  encoding?: 'utf8' | 'base64';
+}
+
 /**
  * Streaming events emitted by the (future) Agent runtime. Phase 1 emits
  * turn_start / text_delta / turn_end. Phase 2 adds tool_call_*. Kept
@@ -528,6 +539,27 @@ const api = {
         snapshotId,
       }) as Promise<CommentRow[]>,
   },
+  canvas: {
+    loadState: (designId: string) =>
+      ipcRenderer.invoke('canvas:v1:load-state', {
+        schemaVersion: 1,
+        designId,
+      }) as Promise<CanvasStoredState>,
+    saveState: (input: {
+      designId: string;
+      sceneJson: string | null;
+      importedFiles: LocalInputFile[];
+    }) =>
+      ipcRenderer.invoke('canvas:v1:save-state', {
+        schemaVersion: 1,
+        ...input,
+      }) as Promise<{ ok: true }>,
+    writeContextFiles: (input: { designId: string; files: CanvasContextFile[] }) =>
+      ipcRenderer.invoke('canvas:v1:write-context-files', {
+        schemaVersion: 1,
+        ...input,
+      }) as Promise<LocalInputFile[]>,
+  },
   diagnostics: {
     log: (entry: {
       schemaVersion: 1;

apps/desktop/src/renderer/src/components/CanvasErrorBar.tsx

@@ -7,7 +7,10 @@ import { useCodesignStore } from '../store';
  * from broken snapshots surface as "Inline Babel script" — the user can't
  * do anything about them except regenerate, so say that plainly.
  */
-function humanizeError(raw: string, t: (k: string, d?: Record<string, unknown>) => string): string {
+export function humanizePreviewError(
+  raw: string,
+  t: (k: string, d?: Record<string, unknown>) => string,
+): string {
   if (/Inline Babel script/i.test(raw) || /Unexpected token/.test(raw)) {
     return t('preview.error.brokenJsx', {
       defaultValue:
@@ -29,7 +32,7 @@ export function CanvasErrorBar() {
   if (errors.length === 0) return null;
   const latest = errors[errors.length - 1];
   if (!latest) return null;
-  const friendly = humanizeError(latest, t);
+  const friendly = humanizePreviewError(latest, t);
   return (
     <div
       role="alert"

apps/desktop/src/renderer/src/components/CanvasSketchView.tsx

@@ -27,7 +27,9 @@ export function CanvasSketchView() {
   const canvasSceneLoaded = useCodesignStore((s) => s.canvasSceneLoaded);
   const canvasSeed = useCodesignStore((s) => s.canvasSeed);
   const ensureCurrentDesign = useCodesignStore((s) => s.ensureCurrentDesign);
-  const loadCanvasStateForCurrentDesign = useCodesignStore((s) => s.loadCanvasStateForCurrentDesign);
+  const loadCanvasStateForCurrentDesign = useCodesignStore(
+    (s) => s.loadCanvasStateForCurrentDesign,
+  );
 
   const apiRef = useRef<ExcalidrawImperativeAPI | null>(null);
   const saveTimerRef = useRef<number | null>(null);

apps/desktop/src/renderer/src/components/PreviewPane.tsx

@@ -286,8 +286,10 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
   const canvasTabs = useCodesignStore((s) => s.canvasTabs);
   const activeCanvasTab = useCodesignStore((s) => s.activeCanvasTab);
   const errorMessage = useCodesignStore((s) => s.errorMessage);
+  const iframeErrors = useCodesignStore((s) => s.iframeErrors);
   const retry = useCodesignStore((s) => s.retryLastPrompt);
   const clearError = useCodesignStore((s) => s.clearError);
+  const clearIframeErrors = useCodesignStore((s) => s.clearIframeErrors);
   const pushIframeError = useCodesignStore((s) => s.pushIframeError);
   const selectCanvasElement = useCodesignStore((s) => s.selectCanvasElement);
   const previewViewport = useCodesignStore((s) => s.previewViewport);
@@ -469,6 +471,9 @@ export function PreviewPane({ onPickStarter }: PreviewPaneProps) {
 
   const activeHasHtml =
     currentDesignId !== null && poolEntries.some((e) => e.id === currentDesignId);
+  const latestIframeError = iframeErrors[iframeErrors.length - 1] ?? null;
+  const friendlyIframeError =
+    latestIframeError !== null ? humanizePreviewError(latestIframeError, t) : null;
 
   // When a design already has persisted content (thumbnail from a prior save,
   // or chat history), the preview IS coming — we're just waiting on the IPC

apps/desktop/src/renderer/src/components/Sidebar.tsx

@@ -216,15 +216,15 @@ export function Sidebar({ prompt, setPrompt, onSubmit }: SidebarProps) {
                     <span
                       className="inline-flex max-w-full items-center gap-[6px] rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-[10px] py-[5px] text-[11px] text-[var(--color-text-secondary)]"
                       title={
-                        canvasWillBeSent
-                          ? t('canvas.contextReady')
-                          : t('canvas.contextUpToDate')
+                        canvasWillBeSent ? t('canvas.contextReady') : t('canvas.contextUpToDate')
                       }
                     >
                       <span className="text-[10px] uppercase tracking-[0.08em] text-[var(--color-text-muted)]">
                         {t('canvas.canvasTab')}
                       </span>
-                      <span>{canvasWillBeSent ? t('canvas.contextReady') : t('canvas.contextUpToDate')}</span>
+                      <span>
+                        {canvasWillBeSent ? t('canvas.contextReady') : t('canvas.contextUpToDate')}
+                      </span>
                     </span>
                   ) : null}
                   {referenceUrl.trim() ? (

apps/desktop/src/renderer/src/store.test.ts

@@ -258,39 +258,6 @@ describe('useCodesignStore generation cancellation', () => {
   });
 });
 
-describe('useCodesignStore auto-continue incomplete todos', () => {
-  it('fires one silent continuation per design until a new explicit prompt resets the guard', async () => {
-    const sendPromptMock = vi.fn(async () => undefined);
-    const mockedSendPrompt = sendPromptMock as unknown as SendPromptFn;
-
-    useCodesignStore.setState({
-      currentDesignId: 'design-incomplete',
-      isGenerating: false,
-      autoContinueIncompleteFired: new Set<string>(),
-      sendPrompt: mockedSendPrompt,
-    });
-
-    const first = useCodesignStore
-      .getState()
-      .tryAutoContinueIncomplete('design-incomplete', ['Finish the final screen']);
-    const second = useCodesignStore
-      .getState()
-      .tryAutoContinueIncomplete('design-incomplete', ['Finish the final screen']);
-
-    expect(first).toBe(true);
-    expect(second).toBe(false);
-    expect(sendPromptMock).toHaveBeenCalledTimes(1);
-    expect(sendPromptMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        silent: true,
-        prompt: expect.stringContaining('Finish the final screen'),
-      }),
-    );
-
-    useCodesignStore.setState({ sendPrompt: initialState.sendPrompt });
-  });
-});
-
 describe('useCodesignStore canvas context attachments', () => {
   it('shows canvas context in the user chat payload and sends fresh canvas files when dirty', async () => {
     const append = vi.fn(async (input: { designId: string; kind: string; payload: unknown }) => ({
@@ -303,10 +270,12 @@ describe('useCodesignStore canvas context attachments', () => {
       createdAt: new Date().toISOString(),
       schemaVersion: 1,
     }));
-    const generate = vi.fn(async (payload: { attachments: Array<{ path: string; name: string }> }) => ({
-      artifacts: [],
-      message: 'done',
-    }));
+    const generate = vi.fn(
+      async (payload: { attachments: Array<{ path: string; name: string }> }) => ({
+        artifacts: [],
+        message: 'done',
+      }),
+    );
 
     vi.stubGlobal('window', {
       codesign: {

apps/desktop/src/renderer/src/store.ts

@@ -1622,15 +1622,6 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     const shouldIncludeCanvasContext =
       canvasRevisionAtSend > get().lastGeneratedCanvasRevision &&
       (hasCanvasContent(canvasSceneAtSend) || canvasImportedFilesAtSend.length > 0);
-    if (
-      designIdAtStart &&
-      !input.silent &&
-      get().autoContinueIncompleteFired.has(designIdAtStart)
-    ) {
-      const nextFired = new Set(get().autoContinueIncompleteFired);
-      nextFired.delete(designIdAtStart);
-      set({ autoContinueIncompleteFired: nextFired });
-    }
     set(() => ({
       isGenerating: true,
       activeGenerationId: generationId,
@@ -1688,9 +1679,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
         kind: 'user',
         payload: {
           text: request.prompt,
-          ...(shouldIncludeCanvasContext
-            ? { contextBadges: [tr('canvas.contextBadge')] }
-            : {}),
+          ...(shouldIncludeCanvasContext ? { contextBadges: [tr('canvas.contextBadge')] } : {}),
         },
       });
     }

apps/desktop/src/renderer/test/excalidraw-shim.css

@@ -1 +0,0 @@
-