@hienlh/ppm 0.22.10 → 0.23.0

package/src/web/components/chat/chat-tab.tsx

@@ -7,6 +7,7 @@ import { splitAttachmentMarkers } from "@/lib/attachment-marker-split";
 import type { ChatAttemptEvent } from "@/lib/chat-attempt-lifecycle";
 import { useChat } from "@/hooks/use-chat";
 import { useUsage } from "@/hooks/use-usage";
+import { useDesignSessionRedirect } from "@/hooks/use-design-session-redirect";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -24,14 +25,31 @@ import { FilePicker } from "./file-picker";
 import { ChatHistoryBar } from "./chat-history-bar";
 import { NewChatProviderGate } from "./new-chat-provider-gate";
 import { useDraft, type DraftAttachment } from "@/hooks/use-draft";
+import { patchTabMetadata } from "@/lib/patch-tab-metadata";
 
 import type { DragEvent } from "react";
 import type { FileNode } from "../../../types/project";
 import type { Session, SessionInfo } from "../../../types/chat";
 
+/** A fork a host has taken over: the forked session, and the message to resend in it. */
+export interface ChatForkRequest {
+  sessionId: string;
+  providerId: string;
+  pendingMessage: string;
+}
+
 interface ChatTabProps {
   metadata?: Record<string, unknown>;
   tabId?: string;
+  /**
+   * Replaces "open a new chat tab" (`/clear`) for a host that keeps its conversation in
+   * place — a design tab starts the next session inside itself, where it stays in design mode.
+   */
+  onNewSession?: (clearedFrom?: string) => void;
+  /** Replaces "open the fork in a new tab"; the host swaps the fork into itself. */
+  onFork?: (fork: ChatForkRequest) => void;
+  /** Lists only this design's sessions in the history picker. */
+  historyFilter?: string;
 }
 
 /**
@@ -43,15 +61,18 @@ interface ChatTabProps {
 const SESSION_CREATE_TIMEOUT_MS = 30_000;
 const PENDING_SEND_TIMEOUT_MS = 45_000;
 
-export function ChatTab({ metadata, tabId }: ChatTabProps) {
+export function ChatTab(props: ChatTabProps) {
+  const { metadata, tabId } = props;
   return tabId && metadata ? (
     <NewChatProviderGate tabId={tabId} metadata={metadata}>
-      <ChatTabContent metadata={metadata} tabId={tabId} />
+      <ChatTabContent {...props} />
     </NewChatProviderGate>
-  ) : <ChatTabContent metadata={metadata} tabId={tabId} />;
+  ) : <ChatTabContent {...props} />;
 }
 
-function ChatTabContent({ metadata, tabId }: ChatTabProps) {
+function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }: ChatTabProps) {
+  // A design chat is created with its slug and keeps the design's name as its tab title.
+  const designSlug = typeof metadata?.designSlug === "string" && metadata.designSlug ? metadata.designSlug : undefined;
   const [sessionId, setSessionId] = useState<string | null>(
     (metadata?.sessionId as string) ?? null,
   );
@@ -113,6 +134,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
 
   // Use tab's own project, not global activeProject (keep-alive: hidden tabs must not react to switches)
   const projectName = (metadata?.projectName as string) ?? "";
+  useDesignSessionRedirect({ tabId, sessionId, designSlug, projectName, providerId });
   const updateTab = useTabStore((s) => s.updateTab);
   const version = useSettingsStore((s) => s.version);
 
@@ -140,18 +162,19 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
   // is the only account that matters, and it is the one the server re-routes when an
   // account goes bad. Keeping the tab's copy alongside it would give the chip a second,
   // staler answer to the same question.
+  //
+  // Merged into the metadata the store holds now, never the `metadata` prop: the prop is
+  // whatever this component last rendered with, and spreading it back would revert keys a
+  // host (a design tab) or the panel store wrote in the meantime.
   useEffect(() => {
     if (!tabId || !sessionId) return;
-    updateTab(tabId, {
-      metadata: {
-        ...metadata,
-        sessionId,
-        providerId,
-        permissionMode,
-        pickedAccountId: undefined,
-        pickedAccountLabel: undefined,
-        pickedAccountProvider: undefined,
-      },
+    patchTabMetadata(tabId, {
+      sessionId,
+      providerId,
+      permissionMode,
+      pickedAccountId: undefined,
+      pickedAccountLabel: undefined,
+      pickedAccountProvider: undefined,
     });
   }, [sessionId, providerId, permissionMode]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -163,8 +186,8 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
    */
   const handleProviderChange = useCallback((id: string) => {
     setProviderId(id);
-    if (tabId) updateTab(tabId, { metadata: { ...metadata, providerId: id } });
-  }, [tabId, metadata, updateTab]);
+    if (tabId) patchTabMetadata(tabId, { providerId: id });
+  }, [tabId]);
 
   /** The account this tab claimed while it had no session yet, and who it was claimed from. */
   const pickedAccountId = metadata?.pickedAccountId as string | undefined;
@@ -194,13 +217,10 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
     pickAccountForTab(providerId)
       .then((picked) => {
         if (cancelled || !picked) return;
-        updateTab(tabId, {
-          metadata: {
-            ...metadata,
-            pickedAccountId: picked.id,
-            pickedAccountLabel: picked.label,
-            pickedAccountProvider: providerId,
-          },
+        patchTabMetadata(tabId, {
+          pickedAccountId: picked.id,
+          pickedAccountLabel: picked.label,
+          pickedAccountProvider: providerId,
         });
       })
       .catch(() => { /* leave the chip blank rather than naming an account we did not get */ });
@@ -241,9 +261,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
       return null;
     }
     if (!tabId) return null;
-    updateTab(tabId, {
-      metadata: { ...metadata, pickedAccountId: accountId, pickedAccountLabel: label, pickedAccountProvider: providerId },
-    });
+    patchTabMetadata(tabId, { pickedAccountId: accountId, pickedAccountLabel: label, pickedAccountProvider: providerId });
     return null;
   }, [sessionId, projectName, tabId, metadata, providerId, updateTab, reloadUsage]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -368,9 +386,10 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
     };
   }, [sessionId, tabId]);
 
-  // Update tab title when SDK summary arrives
+  // Update tab title when SDK summary arrives. A design tab is named after its design, not
+  // after whichever of its sessions happens to be open.
   useEffect(() => {
-    if (tabId && sessionTitle) {
+    if (tabId && sessionTitle && !designSlug) {
       updateTab(tabId, { title: sessionTitle });
     }
   }, [sessionTitle]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -486,7 +505,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
   useEffect(() => {
     if (forkDraft && isConnected && sessionId && tabId) {
       // Clear from tab metadata once consumed
-      updateTab(tabId, { metadata: { ...metadata, pendingMessage: undefined } });
+      patchTabMetadata(tabId, { pendingMessage: undefined });
     }
   }, [isConnected, sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -503,6 +522,10 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
   }, [editForking]);
 
   const handleNewSession = useCallback((title?: string, clearedFrom?: string) => {
+    if (onNewSession) {
+      onNewSession(clearedFrom);
+      return;
+    }
     useTabStore.getState().openTab({
       type: "chat",
       title: title || "AI Chat",
@@ -510,7 +533,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
       projectId: projectName || null,
       closable: true,
     });
-  }, [projectName, providerId]);
+  }, [projectName, providerId, onNewSession]);
 
   const handleSelectSession = useCallback((session: SessionInfo) => {
     // A message still waiting for its own session's socket must not ride the
@@ -519,10 +542,10 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
     abandonPendingSend("You switched to another chat before it connected.");
     setSessionId(session.id);
     setProviderId(session.providerId);
-    if (tabId) updateTab(tabId, { title: session.title || "Chat" });
+    if (tabId && !designSlug) updateTab(tabId, { title: session.title || "Chat" });
     // Immediately clear notification for the selected session
     useNotificationStore.getState().clearForSession(session.id);
-  }, [tabId, updateTab, abandonPendingSend]);
+  }, [tabId, updateTab, abandonPendingSend, designSlug]);
 
   /** Fork current session and open new tab with the forked session, resending userMessage */
   const handleFork = useCallback(async (userMessage: string, messageId?: string) => {
@@ -533,7 +556,12 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
         `${projectUrl(projectName)}/chat/sessions/${sessionId}/fork?providerId=${providerId}`,
         { messageId },
       );
-      // Open new chat tab with forked session — it will send userMessage on connect
+      // A host that keeps the conversation in place takes the fork over; otherwise open a
+      // new chat tab with the forked session — it will send userMessage on connect.
+      if (onFork) {
+        onFork({ sessionId: forked.id, providerId, pendingMessage: userMessage });
+        return;
+      }
       useTabStore.getState().openTab({
         type: "chat",
         title: `Fork: ${userMessage.slice(0, 30)}`,
@@ -553,7 +581,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
           : msg,
       });
     }
-  }, [sessionId, projectName, providerId]);
+  }, [sessionId, projectName, providerId, onFork]);
 
   /** Edit a user message: prefill input + arm same-tab fork on next send */
   const handleEdit = useCallback((userMessage: string, messageId?: string, ownMsgId?: string) => {
@@ -594,7 +622,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
         queuePendingSend({ content: fullContent, draftId: sessionId, permissionMode });
         // Swap the current tab to the forked session (no new tab).
         setStaleSwap(true);
-        if (tabId) updateTab(tabId, { metadata: { ...metadata, sessionId: forked.id } });
+        if (tabId) patchTabMetadata(tabId, { sessionId: forked.id });
         setSessionId(forked.id);
       } catch (e) {
         setEditForking(false);
@@ -610,7 +638,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
         setRestore({ text: fullContent, nonce: Date.now() });
       }
     },
-    [sessionId, projectName, providerId, permissionMode, tabId, updateTab, metadata, queuePendingSend],
+    [sessionId, projectName, providerId, permissionMode, tabId, queuePendingSend],
   );
 
   /** Swap THIS tab to another version's session (version switcher prev/next) */
@@ -620,10 +648,10 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
       // Same as handleSelectSession: a queued edit must not land in the version switched to.
       abandonPendingSend("You switched to another version before it connected.");
       setStaleSwap(true);
-      if (tabId) updateTab(tabId, { metadata: { ...metadata, sessionId: targetSessionId } });
+      if (tabId) patchTabMetadata(tabId, { sessionId: targetSessionId });
       setSessionId(targetSessionId);
     },
-    [sessionId, tabId, updateTab, metadata, abandonPendingSend],
+    [sessionId, tabId, abandonPendingSend],
   );
 
   /** Build message content with file references and inline text snippets prepended */
@@ -698,6 +726,9 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
             // The account this tab claimed on open and has been displaying since. Redeeming
             // it here is what makes that display true rather than a guess.
             accountId: pickedAccountId,
+            // Fixed at creation: the server gives every turn of this session the design's
+            // instructions and the design permission default.
+            ...(designSlug && { designSlug }),
           }, { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) });
           setSessionId(session.id);
           setProviderId(session.providerId);
@@ -718,7 +749,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
       // Only now: the message is on (or queued for) a live session's socket.
       clearDraft();
     },
-    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, pickedAccountId, queuePendingSend, restoreUnsentMessage, clearDraft],
+    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, pickedAccountId, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug],
   );
 
   // Read through a ref so handleInputSend keeps a stable identity — it is passed to
@@ -981,6 +1012,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
           pickedAccountId={servingAccount?.id ?? (claimMatchesProvider ? pickedAccountId ?? null : null)}
           onSelectAccount={handleSelectAccount}
           onSelectSession={handleSelectSession}
+          historyFilter={historyFilter}
           onBugReport={sessionId ? () => openBugReportPopup(version, { sessionId, projectName }) : undefined}
           isConnected={isConnected}
           onReload={() => {
@@ -1064,7 +1096,9 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
             onModeChange={setPermissionMode}
             providerId={providerId}
             sessionId={sessionId ?? undefined}
-            onProviderChange={!sessionId ? handleProviderChange : undefined}
+            // A design chat's provider was chosen among those that carry design instructions;
+            // the composer's picker offers every provider, so it is not offered here.
+            onProviderChange={!sessionId && !designSlug ? handleProviderChange : undefined}
             model={model}
             onModelChange={setModel}
             effort={effort}

package/src/web/components/chat/message-input.tsx

@@ -7,7 +7,7 @@ import { downscaleImage } from "@/lib/image-resize";
 import { INLINE_IMAGE_LIMITS } from "@/lib/image-resize-limits";
 import { randomId } from "@/lib/utils";
 import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
-import { SEND_TO_CHAT_EVENT, SEND_TO_CHAT_ACK_EVENT, type SendToChatDetail } from "@/lib/send-to-chat";
+import { SEND_TO_CHAT_EVENT, SEND_TO_CHAT_ACK_EVENT, type SendToChatAck, type SendToChatDetail } from "@/lib/send-to-chat";
 import { isImageFile } from "@/lib/file-support";
 import { AttachmentChips } from "./attachment-chips";
 import { stepHistory } from "./message-history-recall";
@@ -290,10 +290,17 @@ export const MessageInput = memo(function MessageInput({
   // may consume it, or the same output lands in every open chat at once.
   useEffect(() => {
     const handler = (e: Event) => {
-      const { text, label, targetTabId } = ((e as CustomEvent).detail ?? {}) as SendToChatDetail;
+      const { text, label, targetTabId, autoSend } = ((e as CustomEvent).detail ?? {}) as SendToChatDetail;
       if (!text) return;
       if (targetTabId ? targetTabId !== tabId : !ownsGlobalShortcut(getVisibleTextarea())) return;
-      window.dispatchEvent(new Event(SEND_TO_CHAT_ACK_EVENT));
+      // Sent as-is only into an idle, empty composer: anything the user has typed or
+      // attached is theirs, and the text joins it as a chip for them to send instead.
+      const send = !!autoSend && !!targetTabId && !disabled && !isStreaming && !valueRef.current.trim() && attachments.length === 0;
+      window.dispatchEvent(new CustomEvent<SendToChatAck>(SEND_TO_CHAT_ACK_EVENT, { detail: { sent: send } }));
+      if (send) {
+        onSend(text, []);
+        return;
+      }
       const att: ChatAttachment = {
         id: randomId(),
         name: label ?? "Terminal output",
@@ -307,7 +314,7 @@ export const MessageInput = memo(function MessageInput({
     };
     window.addEventListener(SEND_TO_CHAT_EVENT, handler);
     return () => window.removeEventListener(SEND_TO_CHAT_EVENT, handler);
-  }, [getVisibleTextarea, tabId]);
+  }, [getVisibleTextarea, tabId, disabled, isStreaming, attachments.length, onSend]);
 
   // Apply initialValue when it changes (e.g. "Ask AI" from command palette).
   // A restored draft can land after the input is already on screen, so never
@@ -409,8 +416,10 @@ export const MessageInput = memo(function MessageInput({
         onFileItemsLoaded?.([]);
         return;
       }
-      const { fileIndex } = useFileStore.getState();
-      const nodes: FileNode[] = fileIndex.map((e) => ({ name: e.name, path: e.path, type: e.type }));
+      // Share the store's array rather than mapping it: every mounted chat tab runs this,
+      // and a project index can hold tens of thousands of entries, so a per-tab copy
+      // kept one full duplicate alive for each open chat. Consumers only read it.
+      const nodes: FileNode[] = useFileStore.getState().fileIndex;
       fileItemsRef.current = nodes;
       onFileItemsLoaded?.(nodes);
     };

package/src/web/components/chat/session-history-list.tsx

@@ -2,7 +2,7 @@ import { Loader2, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Bot,
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { cn } from "@/lib/utils";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";
-import { useTabStore } from "@/stores/tab-store";
+import { openSessionInItsTab } from "@/lib/design/open-design-tab";
 import { formatRelativeDate } from "@/lib/format-date";
 import { TagSettingsSection } from "@/components/settings/tag-settings-section";
 import { SessionContextMenu } from "./session-context-menu";
@@ -73,7 +73,6 @@ export function SessionHistoryList({ projectName, variant, sessionId, onSelectSe
     enableKeyboardShortcuts: variant === "bar",
   });
   const notifications = useNotificationStore((s) => s.notifications);
-  const openTab = useTabStore((s) => s.openTab);
 
   const isSidebar = variant === "sidebar";
   // Content-aware unified search is a sidebar affordance; the bar keeps its
@@ -82,13 +81,10 @@ export function SessionHistoryList({ projectName, variant, sessionId, onSelectSe
   const showSearch = isSidebar && h.searchQuery.trim().length > 0;
 
   function openResult(r: ChatSearchResult) {
-    openTab({
-      type: "chat",
-      title: r.title || "Chat",
-      projectId: projectName,
-      metadata: { projectName, sessionId: r.sessionId, providerId: r.providerId },
-      closable: true,
-    });
+    openSessionInItsTab(
+      { id: r.sessionId, providerId: r.providerId, title: r.title ?? undefined, designSlug: r.designSlug },
+      projectName,
+    );
     onNavigate?.();
   }
 

package/src/web/components/design/canvas/canvas-geometry.ts

@@ -0,0 +1,47 @@
+/**
+ * How a fixed-size device frame sits in the canvas pane.
+ *
+ * The frame keeps its own CSS size — a phone design must lay out at 390px, not at the pane's
+ * width — and is scaled with a transform to fit. It is never scaled *up*: enlarging a 390px
+ * layout on a wide pane would show it bigger than any phone ever will.
+ */
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface FrameFit {
+  /** The frame's CSS size, i.e. what the design lays out against. */
+  width: number;
+  height: number;
+  /** The transform scale that fits it into the pane. */
+  scale: number;
+  /** The frame's footprint on screen after scaling. */
+  outerWidth: number;
+  outerHeight: number;
+}
+
+/** Room left around a scaled frame so its edge stays visible against the canvas. */
+export const FRAME_PADDING = 16;
+/** Below this a frame is unreadable anyway; stops a collapsed pane from producing 0 or NaN. */
+export const MIN_FRAME_SCALE = 0.05;
+
+export function fitFrame(frame: Size | null, pane: Size, padding = FRAME_PADDING): FrameFit {
+  const paneW = Math.max(0, finite(pane.width));
+  const paneH = Math.max(0, finite(pane.height));
+  if (!frame) {
+    return { width: paneW, height: paneH, scale: 1, outerWidth: paneW, outerHeight: paneH };
+  }
+  const width = Math.max(1, finite(frame.width));
+  const height = Math.max(1, finite(frame.height));
+  const availW = Math.max(0, paneW - 2 * padding);
+  const availH = Math.max(0, paneH - 2 * padding);
+  const raw = Math.min(1, availW / width, availH / height);
+  const scale = Math.max(MIN_FRAME_SCALE, Number.isFinite(raw) ? raw : 1);
+  return { width, height, scale, outerWidth: width * scale, outerHeight: height * scale };
+}
+
+function finite(n: number): number {
+  return Number.isFinite(n) ? n : 0;
+}

package/src/web/components/design/canvas/design-canvas-pane.tsx

@@ -0,0 +1,192 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loader2, Minimize2, RefreshCw } from "@/lib/icons";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { cn } from "@/lib/utils";
+import {
+  designFrameKey, loadDesignViewPrefs, saveDesignViewPrefs, withFrame,
+} from "@/lib/design/design-view-prefs";
+import { useDesignTab } from "../design-tab-context";
+import { DesignToolbar, type DesignToolbarContext } from "../design-toolbar";
+import { DesignToolbarList } from "../design-toolbar-list";
+import { DesignHistoryPanel } from "../history/design-history-panel";
+import { useDesignCanvas } from "./use-design-canvas";
+import { defaultFrameFor, framePreset, type DeviceFrameId } from "./device-frame-presets";
+import { fitFrame, type Size } from "./canvas-geometry";
+import { DesignIssuesBadge } from "./design-issues-badge";
+import { useDesignCommentsFeature } from "../comments/use-design-comments-feature";
+import { DesignCommentsOverlay, DesignCommentsSidePanel } from "../comments/design-comments-layer";
+import { useDesignTweaks } from "../tweaks/use-design-tweaks";
+import { TweaksPanel } from "../tweaks/tweaks-panel";
+import { useCanvasTransform } from "../transform/use-canvas-transform";
+import { useDesignUndo } from "../transform/design-undo-stack";
+import { TransformReadout } from "../transform/transform-readout";
+import { useDesignExport } from "../export/use-design-export";
+import { ExportSheet } from "../export/export-menu";
+import { ExportWarningsSheet } from "../export/export-warnings-sheet";
+import { useDesignCanvasCheckResponder } from "./use-design-canvas-check";
+import { useDesignAutoCheck } from "../use-design-auto-check";
+import { useExpandedCanvasEscape } from "./use-expanded-canvas-escape";
+
+/**
+ * The live canvas: the design's entry page in a sandboxed iframe, sized to the chosen
+ * device frame, with the toolbar above it (desktop) or behind the More sheet (phone).
+ *
+ * `sandbox="allow-scripts"` without `allow-same-origin` gives the page an opaque origin, so
+ * it can read nothing of PPM's; `no-referrer` keeps its capability URL out of any request
+ * the page makes.
+ */
+export function DesignCanvasPane({ moreOpen = false, onMoreClose }: { moreOpen?: boolean; onMoreClose?: () => void }) {
+  const tab = useDesignTab();
+  const canvas = useDesignCanvas(tab);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const frameKey = designFrameKey(tab.projectName, tab.slug);
+  const [frame, setFrameState] = useState<DeviceFrameId>(
+    () => loadDesignViewPrefs().frames[frameKey] ?? defaultFrameFor(tab.design.kind),
+  );
+  const setFrame = useCallback((next: DeviceFrameId) => {
+    setFrameState(next);
+    saveDesignViewPrefs(withFrame(loadDesignViewPrefs(), frameKey, next));
+  }, [frameKey]);
+
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [stage, setStage] = useState<Size>({ width: 0, height: 0 });
+  useEffect(() => {
+    const el = stageRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setStage({ width: entry.contentRect.width, height: entry.contentRect.height });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const fit = fitFrame(framePreset(frame).size, stage);
+  const framed = frame !== "desktop";
+
+  // Comments, tweaks and the history share the side column, so opening one closes the others.
+  const closeTweaksRef = useRef<() => void>(() => {});
+  const comments = useDesignCommentsFeature(tab, canvas.bridge, {
+    onPanelOpen: () => { setHistoryOpen(false); closeTweaksRef.current(); },
+  });
+  const { closePanel: closeComments } = comments;
+  const tweaks = useDesignTweaks(tab, canvas.bridge, canvas.reload, {
+    onPanelOpen: () => { setHistoryOpen(false); closeComments(); },
+  });
+  const { closePanel: closeTweaks } = tweaks;
+  closeTweaksRef.current = closeTweaks;
+  const toggleHistory = useCallback(() => {
+    if (!historyOpen) { closeComments(); closeTweaks(); }
+    setHistoryOpen(!historyOpen);
+  }, [historyOpen, closeComments, closeTweaks]);
+
+  const transform = useCanvasTransform(tab, canvas.bridge, comments.picker, fit.scale, canvas.reload);
+  const openHistory = useCallback(() => {
+    closeComments();
+    closeTweaks();
+    setHistoryOpen(true);
+  }, [closeComments, closeTweaks]);
+  const undo = useDesignUndo(tab, { openHistory });
+  const exports = useDesignExport(tab, canvas.bridge);
+  // The self-check: on demand for the agent's design_check tool, and by itself after a turn.
+  const checkContext = () => ({ issues: canvas.issues, frame: framePreset(frame).label });
+  useDesignCanvasCheckResponder({ projectName: tab.projectName, slug: tab.slug, bridge: canvas.bridge, context: checkContext });
+  const layoutIssues = useDesignAutoCheck({ tab, bridge: canvas.bridge, context: checkContext });
+  const allIssues = useMemo(() => [...canvas.issues, ...layoutIssues], [canvas.issues, layoutIssues]);
+
+  const { expanded, setExpanded } = tab.layout;
+  useExpandedCanvasEscape(expanded, () => setExpanded(false), () => comments.picker.on);
+
+  const toolbarCtx = useMemo<DesignToolbarContext>(() => ({
+    ...tab, canvas, frame, setFrame, historyOpen, toggleHistory, comments, tweaks, transform, undo, exports,
+  }), [tab, canvas, frame, setFrame, historyOpen, toggleHistory, comments, tweaks, transform, undo, exports]);
+  const tweaksPanel = tweaks.panelOpen && <TweaksPanel feature={tweaks} tabId={tab.tabId} slug={tab.slug} />;
+
+  const history = historyOpen && (
+    <DesignHistoryPanel onClose={() => setHistoryOpen(false)} onRestored={canvas.reload} />
+  );
+
+  return (
+    // Expanding only restyles this element: `fixed` lifts it over the whole window from where
+    // it stands, where moving it to a portal would reload the iframe. Above the mobile nav
+    // (z-40), below dialogs, sheets and toasts (z-50 and up).
+    <div className={cn("flex h-full min-h-0 flex-col bg-background",
+      expanded && "fixed inset-0 z-[45] pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]")}>
+      {!tab.isMobile && <DesignToolbar ctx={toolbarCtx} />}
+      <div className="flex min-h-0 flex-1">
+        {/* Focusable in Move mode, so arrow keys pressed here nudge the selected element. */}
+        <div ref={stageRef} className={cn("relative min-w-0 flex-1 overflow-hidden outline-none", framed && "bg-surface-elevated/40")}
+          tabIndex={transform.moveOn ? 0 : undefined} onKeyDown={transform.onPaneKeyDown}
+          aria-label={transform.moveOn ? "Canvas: arrow keys move the selected element" : undefined}>
+          {canvas.src && (
+            <div
+              className={cn("absolute left-1/2 top-1/2 origin-center", framed && "rounded-md shadow-lg ring-1 ring-border")}
+              style={{
+                width: fit.width, height: fit.height,
+                transform: `translate(-50%, -50%) scale(${fit.scale})`,
+              }}
+            >
+              <iframe
+                ref={canvas.iframeRef}
+                src={canvas.src}
+                title={`Design canvas: ${tab.design.title}`}
+                sandbox="allow-scripts"
+                referrerPolicy="no-referrer"
+                onLoad={canvas.bridge.frameLoaded}
+                className="block size-full border-0 bg-white [[data-design-resizing]_&]:pointer-events-none"
+              />
+            </div>
+          )}
+          {!canvas.src && !canvas.error && (
+            <div className="absolute inset-0 flex items-center justify-center text-sm text-text-subtle">
+              <Loader2 className="mr-2 size-4 animate-spin" /> Opening canvas…
+            </div>
+          )}
+          {(canvas.dead || canvas.error) && (
+            <div className="absolute inset-x-0 top-0 flex items-center justify-center p-2">
+              <div className="flex items-center gap-2 rounded-md border border-border bg-popover px-3 py-2 text-xs shadow-md" role="alert">
+                {canvas.error ?? "The canvas stopped responding."}
+                <button type="button" onClick={canvas.reload}
+                  className="flex min-h-11 items-center gap-1 px-2 text-primary underline md:min-h-7">
+                  <RefreshCw className="size-3.5" /> Reload
+                </button>
+              </div>
+            </div>
+          )}
+          <DesignIssuesBadge issues={allIssues} className="absolute right-2 top-2" />
+          {expanded && (
+            <button type="button" onClick={() => setExpanded(false)}
+              className="absolute left-2 top-2 z-30 flex min-h-8 items-center gap-1.5 rounded-md border border-border bg-popover px-2.5 text-xs font-medium shadow-md hover:bg-surface-elevated pointer-coarse:min-h-11 pointer-coarse:px-3">
+              <Minimize2 className="size-3.5" /> Exit full view
+            </button>
+          )}
+          {canvas.src && (
+            <DesignCommentsOverlay feature={comments} fit={fit} stage={stage} isMobile={tab.isMobile} selectionHint={transform.hint} />
+          )}
+          {canvas.src && <TransformReadout feature={transform} isMobile={tab.isMobile} />}
+        </div>
+        {!tab.isMobile && history && <div className="w-72 shrink-0 border-l border-border">{history}</div>}
+        {!tab.isMobile && comments.panelOpen && (
+          <div className="w-72 shrink-0 border-l border-border"><DesignCommentsSidePanel feature={comments} /></div>
+        )}
+        {!tab.isMobile && tweaksPanel && <div className="w-72 shrink-0 border-l border-border">{tweaksPanel}</div>}
+      </div>
+      {/* Docked under the canvas rather than in a sheet: a sheet's backdrop would dim the very
+          colours being tweaked, and the canvas has to stay in view while a slider moves. */}
+      {tab.isMobile && tweaksPanel && <div className="h-[45%] shrink-0 border-t border-border">{tweaksPanel}</div>}
+      <ExportWarningsSheet feature={exports} />
+      {tab.isMobile && (
+        <>
+          <ExportSheet feature={exports} />
+          <BottomSheet open={moreOpen} onClose={() => onMoreClose?.()}>
+            <DesignToolbarList ctx={toolbarCtx} onDone={() => onMoreClose?.()} />
+          </BottomSheet>
+          <BottomSheet open={historyOpen} onClose={() => setHistoryOpen(false)} className="flex h-[70vh] flex-col">
+            <div className="min-h-0 flex-1">{history}</div>
+          </BottomSheet>
+          <BottomSheet open={comments.panelOpen} onClose={closeComments} className="flex h-[70vh] flex-col">
+            <div className="min-h-0 flex-1"><DesignCommentsSidePanel feature={comments} /></div>
+          </BottomSheet>
+        </>
+      )}
+    </div>
+  );
+}