@hienlh/ppm 0.22.11 → 0.23.1

package/src/web/components/design/comments/use-comment-pins.ts

@@ -0,0 +1,118 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { DesignBridge } from "../canvas/use-design-bridge";
+import type { PinRect } from "../../../../shared/design-bridge-messages-picker";
+import type { DesignComment } from "../../../../shared/design-comment-types";
+import type { CommentPatch } from "@/lib/design/api-design-comments";
+
+/**
+ * Keeps the frame told which comments to pin, and turns its answers into pin positions.
+ *
+ * The anchors go to the frame on every change and on every new document (`pins-set`); the
+ * frame answers `pins-rects`. A pin the frame found by its text rather than its id comes
+ * back `reanchored` with the element's current id, which is only a *proposal*: it is sent
+ * to the server, which re-checks it against the source. Refused (409) means the pin is
+ * shown as detached for this document instead of on an element the server does not
+ * recognise. Each proposal is made once per comment per load — keyed on the comment id
+ * alone, not on what the frame claims to have found — so a page varying its answers cannot
+ * turn one comment into an unbounded stream of PATCHes, each of which takes the design lock
+ * and re-parses the source file.
+ *
+ * Only comments on the page the frame is showing are sent: a multi-page design's other
+ * pages would otherwise be matched by text against this one. The same list is what a
+ * proposal is checked against, so an id the frame invents outright is dropped too.
+ */
+
+/** `elsewhere`: the comment is on another page of the design than the one on screen. */
+export type PinStatus = "pinned" | "moved" | "detached" | "pending" | "elsewhere";
+
+export interface CommentPins {
+  rects: ReadonlyMap<string, PinRect>;
+  statusOf: (id: string) => PinStatus;
+}
+
+interface ReanchoredPin { id: string; ppmId: number | null; gen: string | null; reanchored?: boolean }
+export interface ReanchorProposal { id: string; ppmId: number; gen: string }
+
+/**
+ * The re-anchor proposals worth acting on from one `pins-rects` reply: at most one per
+ * comment id, and only for ids this load actually asked the frame to pin. `proposed` is the
+ * caller's per-load dedupe set, mutated in place so a later call for the same load sees what
+ * an earlier one already accepted.
+ */
+export function pickReanchorProposals(
+  pins: readonly ReanchoredPin[],
+  validIds: ReadonlySet<string>,
+  proposed: Set<string>,
+): ReanchorProposal[] {
+  const out: ReanchorProposal[] = [];
+  for (const p of pins) {
+    if (!p.reanchored || p.ppmId === null || !p.gen) continue;
+    if (!validIds.has(p.id) || proposed.has(p.id)) continue;
+    proposed.add(p.id);
+    out.push({ id: p.id, ppmId: p.ppmId, gen: p.gen });
+  }
+  return out;
+}
+
+export function useCommentPins(
+  bridge: DesignBridge,
+  open: readonly DesignComment[],
+  update: (id: string, patch: CommentPatch) => Promise<DesignComment>,
+): CommentPins {
+  const [rects, setRects] = useState<ReadonlyMap<string, PinRect>>(new Map());
+  const [refused, setRefused] = useState<ReadonlySet<string>>(new Set());
+  const [moved, setMoved] = useState<ReadonlySet<string>>(new Set());
+  const proposed = useRef(new Set<string>());
+  const updateRef = useRef(update);
+  updateRef.current = update;
+
+  const { send } = bridge;
+  const pageFile = bridge.ready?.file ?? null;
+  const pins = useMemo(
+    () => open.filter((c) => c.file === pageFile).map((c) => ({ id: c.id, anchor: c.anchor })),
+    [open, pageFile],
+  );
+  const openRef = useRef(open);
+  openRef.current = open;
+  // Read inside the "pins-rects" handler below instead of `pins` directly: that handler is
+  // registered in an effect that does not re-run on every render, so closing over `pins`
+  // there would see whichever page was current the last time the effect ran.
+  const pinsRef = useRef(pins);
+  pinsRef.current = pins;
+
+  useEffect(() => { send({ type: "pins-set", pins }); }, [send, pins]);
+
+  useEffect(() => {
+    const offs = [
+      bridge.onReplay((replaySend, ready) => {
+        proposed.current.clear();
+        setRefused(new Set());
+        setRects(new Map());
+        const onPage = openRef.current.filter((c) => c.file === ready.file);
+        replaySend({ type: "pins-set", pins: onPage.map((c) => ({ id: c.id, anchor: c.anchor })) });
+      }),
+      bridge.on("pins-rects", (m) => {
+        setRects(new Map(m.pins.map((p) => [p.id, p])));
+        const validIds = new Set(pinsRef.current.map((p) => p.id));
+        for (const proposal of pickReanchorProposals(m.pins, validIds, proposed.current)) {
+          updateRef.current(proposal.id, { anchor: { ppmId: proposal.ppmId, gen: proposal.gen } })
+            .then(() => setMoved((s) => new Set(s).add(proposal.id)))
+            .catch(() => setRefused((s) => new Set(s).add(proposal.id)));
+        }
+      }),
+    ];
+    return () => { for (const off of offs) off(); };
+  }, [bridge.on, bridge.onReplay]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return useMemo(() => ({
+    rects,
+    statusOf: (id: string): PinStatus => {
+      if (pageFile !== null && !pins.some((p) => p.id === id)) return "elsewhere";
+      if (refused.has(id)) return "detached";
+      const r = rects.get(id);
+      if (!r) return "pending";
+      if (!r.rect) return "detached";
+      return moved.has(id) || r.reanchored ? "moved" : "pinned";
+    },
+  }), [rects, refused, moved, pins, pageFile]);
+}

package/src/web/components/design/comments/use-design-comments-feature.ts

@@ -0,0 +1,124 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { deliverToDesignChat, showDesignChat } from "@/lib/design/deliver-to-design-chat";
+import { designElementContext } from "@/lib/design/api-design-comments";
+import { buildCommentsPrompt } from "@/lib/design/design-comments-prompt";
+import type { DesignTabContextValue } from "../design-tab-context";
+import type { DesignBridge } from "../canvas/use-design-bridge";
+import type { PickedElement } from "../../../../shared/design-bridge-messages-picker";
+import type { DesignComment } from "../../../../shared/design-comment-types";
+import { useDesignComments } from "./use-design-comments";
+import { anchorFromPicked, useElementPicker } from "./use-element-picker";
+import { useCommentPins } from "./use-comment-pins";
+import type { ComposerTarget } from "./comment-composer";
+import type { SendPreview } from "./comments-send-preview";
+
+/**
+ * Pinned comments for one design tab: the list, the picker, the pins, and the flows that
+ * join them — comment on an element, open a comment, and "Send to AI".
+ *
+ * Sending never sends. It builds the message, shows it whole in the preview, and only on
+ * confirmation puts it in the design chat's composer, where the user sends it (or not).
+ * On a phone that means switching to the chat pane first, so the attachment lands in a
+ * composer the user can actually see and focus.
+ */
+
+type Composer =
+  | { mode: "create" | "send"; el: PickedElement }
+  | { mode: "edit"; comment: DesignComment };
+
+/** Two frames: the pane switch has to be rendered before the composer can take focus. */
+const afterPaint = () => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+
+const failed = (what: string) => (e: unknown) => toast.error(what, { description: (e as Error).message });
+
+export function useDesignCommentsFeature(tab: DesignTabContextValue, bridge: DesignBridge, opts: { onPanelOpen: () => void }) {
+  const { projectName, slug, tabId, isMobile } = tab;
+  const state = useDesignComments(projectName, slug);
+  const [composer, setComposer] = useState<Composer | null>(null);
+  const [preview, setPreview] = useState<SendPreview | null>(null);
+  const [panelOpen, setPanelOpen] = useState(false);
+  const picker = useElementPicker(bridge, (el) => setComposer({ mode: "create", el }));
+  const pins = useCommentPins(bridge, state.open, state.update);
+  const onPanelOpen = useRef(opts.onPanelOpen);
+  onPanelOpen.current = opts.onPanelOpen;
+
+  const togglePanel = useCallback(() => {
+    if (!panelOpen) onPanelOpen.current();
+    setPanelOpen(!panelOpen);
+  }, [panelOpen]);
+  const closePanel = useCallback(() => setPanelOpen(false), []);
+
+  const composerTarget = useMemo<ComposerTarget | null>(() => {
+    if (!composer) return null;
+    if (composer.mode === "edit") {
+      const c = composer.comment;
+      return { mode: "edit", tag: c.anchor.tag, text: c.anchor.quote.exact, initialBody: c.body };
+    }
+    return { mode: composer.mode, tag: composer.el.tag, text: composer.el.text, markup: composer.el.outerHtml };
+  }, [composer]);
+
+  const submitComposer = useCallback(async (body: string) => {
+    if (!composer) return;
+    if (composer.mode === "create") {
+      await state.add(anchorFromPicked(composer.el), body);
+      picker.clear();
+      toast.success("Comment added");
+    } else if (composer.mode === "edit") {
+      await state.update(composer.comment.id, { body });
+    } else {
+      const anchor = anchorFromPicked(composer.el);
+      // The snippet comes from the server, out of the source file, never from the page.
+      const ctx = await designElementContext(projectName, slug, anchor);
+      const text = buildCommentsPrompt(slug, [{ file: anchor.file, anchor: { ...anchor, quote: ctx.quote }, body, snippet: ctx.snippet }]);
+      setPreview({ text, label: `Design element <${anchor.tag}>`, ids: [] });
+    }
+    setComposer(null);
+  }, [composer, state, picker, projectName, slug]);
+
+  const deleteFromComposer = useCallback(async () => {
+    if (composer?.mode !== "edit") return;
+    await state.remove(composer.comment.id);
+    setComposer(null);
+  }, [composer, state]);
+
+  const sendComments = useCallback((list: readonly DesignComment[]) => {
+    if (list.length === 0) return;
+    setPreview({
+      text: buildCommentsPrompt(slug, list),
+      label: list.length === 1 ? "Design comment" : `Design comments (${list.length})`,
+      ids: list.map((c) => c.id),
+    });
+  }, [slug]);
+
+  const confirmPreview = useCallback(async () => {
+    const p = preview;
+    if (!p) return;
+    setPreview(null);
+    if (isMobile) {
+      // Sheets are portalled, so they would stay over the chat pane.
+      setPanelOpen(false);
+      showDesignChat(tabId);
+      await afterPaint();
+    }
+    deliverToDesignChat(tabId, p.text, p.label);
+    const results = await Promise.allSettled(p.ids.map((id) => state.update(id, { sent: true })));
+    if (results.some((r) => r.status === "rejected")) toast.warning("The message is in the chat, but some comments could not be marked as sent");
+  }, [preview, isMobile, tabId, state]);
+
+  return {
+    state, picker, pins, panelOpen, togglePanel, closePanel,
+    composerTarget, closeComposer: () => setComposer(null), submitComposer, deleteFromComposer,
+    preview, cancelPreview: () => setPreview(null), confirmPreview: () => { void confirmPreview().catch(failed("Could not put the message in the chat")); },
+    openCount: state.open.length,
+    commentOnSelected: () => { if (picker.selected) setComposer({ mode: "create", el: picker.selected }); },
+    sendSelected: () => { if (picker.selected) setComposer({ mode: "send", el: picker.selected }); },
+    openComment: (c: DesignComment) => setComposer({ mode: "edit", comment: c }),
+    resolveComment: (c: DesignComment, resolved = true) => { state.update(c.id, { resolved }).catch(failed("Could not update the comment")); },
+    deleteComment: (c: DesignComment) => { state.remove(c.id).catch(failed("Could not delete the comment")); },
+    sendComment: (c: DesignComment) => sendComments([c]),
+    sendAllOpen: () => sendComments(state.open),
+  };
+}
+
+export type DesignCommentsFeature = ReturnType<typeof useDesignCommentsFeature>;

package/src/web/components/design/comments/use-design-comments.ts

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  createDesignComment, deleteDesignComment, listDesignComments, updateDesignComment, type CommentPatch,
+} from "@/lib/design/api-design-comments";
+import { isOpenComment, type CommentAnchor, type DesignComment } from "../../../../shared/design-comment-types";
+
+/**
+ * One design's comments, kept in step with the server.
+ *
+ * `.design/` is not watched, so the list refreshes on `design:comments_changed` — which also
+ * covers another device commenting on the same design. Every change this client makes is
+ * applied locally at once from the server's answer; the event that follows only confirms it.
+ * Refetches are debounced, because marking N comments sent is N events.
+ */
+
+export const COMMENTS_CHANGED_EVENT = "design:comments_changed";
+
+export interface DesignCommentsState {
+  comments: DesignComment[] | null;
+  /** Open comments in the order they were made; a pin's number is its index here plus one. */
+  open: DesignComment[];
+  resolved: DesignComment[];
+  error: string | null;
+  reload: () => void;
+  add: (anchor: CommentAnchor, body: string) => Promise<DesignComment>;
+  update: (id: string, patch: CommentPatch) => Promise<DesignComment>;
+  remove: (id: string) => Promise<void>;
+}
+
+const byCreated = (a: DesignComment, b: DesignComment) => (a.createdAt < b.createdAt ? -1 : a.createdAt > b.createdAt ? 1 : 0);
+
+export function useDesignComments(projectName: string, slug: string): DesignCommentsState {
+  const [comments, setComments] = useState<DesignComment[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const reload = useCallback(() => {
+    listDesignComments(projectName, slug)
+      .then((list) => { setComments(list); setError(null); })
+      .catch((e) => setError((e as Error).message || "Could not load the comments"));
+  }, [projectName, slug]);
+
+  useEffect(() => {
+    setComments(null);
+    reload();
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const onChanged = (e: Event) => {
+      const d = (e as CustomEvent<{ projectName?: string; slug?: string }>).detail;
+      if (d?.projectName !== projectName || d.slug !== slug) return;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(reload, 150);
+    };
+    window.addEventListener(COMMENTS_CHANGED_EVENT, onChanged);
+    return () => {
+      if (timer) clearTimeout(timer);
+      window.removeEventListener(COMMENTS_CHANGED_EVENT, onChanged);
+    };
+  }, [projectName, slug, reload]);
+
+  const replace = useCallback((next: DesignComment) => {
+    setComments((list) => {
+      const rest = (list ?? []).filter((c) => c.id !== next.id);
+      return [...rest, next].sort(byCreated);
+    });
+  }, []);
+
+  const add = useCallback(async (anchor: CommentAnchor, body: string) => {
+    const created = await createDesignComment(projectName, slug, anchor, body);
+    replace(created);
+    return created;
+  }, [projectName, slug, replace]);
+
+  const update = useCallback(async (id: string, patch: CommentPatch) => {
+    const next = await updateDesignComment(projectName, slug, id, patch);
+    replace(next);
+    return next;
+  }, [projectName, slug, replace]);
+
+  const remove = useCallback(async (id: string) => {
+    await deleteDesignComment(projectName, slug, id);
+    setComments((list) => (list ?? []).filter((c) => c.id !== id));
+  }, [projectName, slug]);
+
+  const { open, resolved } = useMemo(() => {
+    const sorted = [...(comments ?? [])].sort(byCreated);
+    return { open: sorted.filter(isOpenComment), resolved: sorted.filter((c) => !isOpenComment(c)) };
+  }, [comments]);
+
+  return { comments, open, resolved, error, reload, add, update, remove };
+}

package/src/web/components/design/comments/use-element-picker.ts

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { DesignBridge } from "../canvas/use-design-bridge";
+import type { BridgeRect, PickedElement } from "../../../../shared/design-bridge-messages-picker";
+import type { CommentAnchor } from "../../../../shared/design-comment-types";
+
+/**
+ * The parent half of element picking: whether the picker is on, what the frame outlined
+ * (a first tap on touch, so the thumb-zone bar can say "tap again"), and what is selected.
+ *
+ * The frame forgets everything on every new document — a live reload, a token rotation, a
+ * panel move — so the picker's on/off state is replayed on each `ready` and the selection
+ * is dropped: its element may not exist in the new document at all.
+ */
+
+export interface ElementPicker {
+  on: boolean;
+  outlined: { tag: string; rect: BridgeRect } | null;
+  selected: PickedElement | null;
+  setOn: (on: boolean) => void;
+  selectParent: () => void;
+  clear: () => void;
+}
+
+export function anchorFromPicked(el: PickedElement): CommentAnchor {
+  return { file: el.file, ppmId: el.ppmId, gen: el.gen, tag: el.tag, cssPath: el.cssPath, quote: el.quote };
+}
+
+export function useElementPicker(bridge: DesignBridge, onLongPress: (el: PickedElement) => void): ElementPicker {
+  const [on, setOnState] = useState(false);
+  const [outlined, setOutlined] = useState<ElementPicker["outlined"]>(null);
+  const [selected, setSelected] = useState<PickedElement | null>(null);
+  const onRef = useRef(false);
+  const longPressRef = useRef(onLongPress);
+  longPressRef.current = onLongPress;
+  const { send } = bridge;
+
+  const clear = useCallback(() => {
+    setSelected(null);
+    setOutlined(null);
+    send({ type: "clear-selection" });
+  }, [send]);
+
+  const setOn = useCallback((next: boolean) => {
+    onRef.current = next;
+    setOnState(next);
+    send({ type: "picker", on: next });
+    if (!next) clear();
+  }, [send, clear]);
+
+  const selectParent = useCallback(() => { send({ type: "select-parent" }); }, [send]);
+
+  useEffect(() => {
+    // The page's own scripts can post these too; while the picker is off, nobody is picking,
+    // so a stray one must not select anything or pop the composer open.
+    const offs = [
+      bridge.on("hover", (m) => { if (onRef.current) setOutlined(m.el); }),
+      bridge.on("select", (m) => { if (onRef.current) { setSelected(m.el); setOutlined(null); } }),
+      bridge.on("element-menu", (m) => {
+        if (!onRef.current) return;
+        setSelected(m.el);
+        setOutlined(null);
+        longPressRef.current(m.el);
+      }),
+      bridge.on("picker-exit", () => setOn(false)),
+      bridge.onReplay((replaySend) => {
+        setSelected(null);
+        setOutlined(null);
+        if (onRef.current) replaySend({ type: "picker", on: true });
+      }),
+    ];
+    return () => { for (const off of offs) off(); };
+  }, [bridge.on, bridge.onReplay, setOn]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Esc exits on the parent side too, where focus usually is on a desktop. A dialog open
+  // over the canvas owns its own Esc.
+  useEffect(() => {
+    if (!on) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented || document.querySelector("[role=dialog]")) return;
+      setOn(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [on, setOn]);
+
+  return { on, outlined, selected, setOn, selectParent, clear };
+}

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

@@ -0,0 +1,51 @@
+import { Loader2 } from "@/lib/icons";
+import { ChatTab } from "@/components/chat/chat-tab";
+import type { useDesignSessionState } from "@/hooks/use-design-session-state";
+
+/**
+ * The design's conversation: an ordinary chat tab, embedded under the design tab's own id so
+ * its session persists into — and reopens from — the design tab.
+ *
+ * Every exit a normal chat offers is folded back into this tab: `/clear` starts the next
+ * session here, a fork is swapped in here, and the history picker lists only this design's
+ * sessions. The chat is keyed on the tab's chat epoch, which is how a swapped session
+ * remounts it; nothing else may remount it, or a message waiting for its socket is lost.
+ */
+export function DesignChatPane({ tabId, metadata, session }: {
+  tabId: string;
+  metadata: Record<string, unknown>;
+  session: ReturnType<typeof useDesignSessionState>;
+}) {
+  if (session.status === "no-provider") {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-center text-sm text-text-subtle" role="status">
+        No configured AI provider can run design sessions. Enable Claude or Codex in Settings → AI Provider.
+      </div>
+    );
+  }
+  if (session.status === "error") {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-sm text-text-subtle" role="status">
+        Could not prepare this design's chat.
+        <button type="button" onClick={session.retry} className="min-h-11 px-3 text-primary underline">Retry</button>
+      </div>
+    );
+  }
+  if (session.status !== "ready") {
+    return (
+      <div className="flex h-full items-center justify-center gap-2 text-sm text-text-subtle" role="status">
+        <Loader2 className="size-4 animate-spin" /> Preparing chat…
+      </div>
+    );
+  }
+  return (
+    <ChatTab
+      key={session.epoch}
+      tabId={tabId}
+      metadata={metadata}
+      onNewSession={session.startNewSession}
+      onFork={session.adoptFork}
+      historyFilter={String(metadata.designSlug)}
+    />
+  );
+}

package/src/web/components/design/design-layout-controls.tsx

@@ -0,0 +1,84 @@
+import { Columns2, MessageSquare, Palette } from "@/lib/icons";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem,
+  DropdownMenuSeparator, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { isDesignLayoutOverride, type DesignLayoutOverride, type DesignPane } from "@/lib/design/design-layout-mode";
+import type { DesignLayoutControls } from "./design-tab-context";
+
+/**
+ * The desktop's layout controls: the Canvas | Chat toggle a single-pane tab shows in place
+ * of the phone's bottom bar, and the menu that pins a layout.
+ */
+
+const PANES: { id: DesignPane; label: string; icon: typeof Palette }[] = [
+  { id: "canvas", label: "Canvas", icon: Palette },
+  { id: "chat", label: "Chat", icon: MessageSquare },
+];
+
+const LAYOUTS: { id: DesignLayoutOverride; label: string }[] = [
+  { id: "auto", label: "Auto" },
+  { id: "split", label: "Split" },
+  { id: "canvas", label: "Canvas only" },
+  { id: "chat", label: "Chat only" },
+];
+
+export function DesignPaneSwitch({ layout }: { layout: DesignLayoutControls }) {
+  return (
+    <div role="radiogroup" aria-label="Design pane" className="flex shrink-0 items-center gap-0.5 rounded-md bg-surface-elevated p-0.5">
+      {PANES.map(({ id, label, icon: Icon }) => {
+        const on = layout.pane === id;
+        return (
+          <button key={id} type="button" role="radio" aria-checked={on} onClick={() => layout.setPane(id)}
+            className={cn(
+              "flex h-7 items-center gap-1 rounded px-2 text-xs font-medium pointer-coarse:h-11 pointer-coarse:px-3",
+              on ? "bg-background text-foreground shadow-sm" : "text-text-subtle hover:text-foreground",
+            )}>
+            <Icon className="size-3.5" /> {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function DesignLayoutMenu({ layout, className }: { layout: DesignLayoutControls; className: string }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button type="button" className={className} aria-label="Layout" title="Layout">
+          <Columns2 className="size-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel className="text-xs text-text-subtle">Layout</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={layout.menuValue}
+          onValueChange={(value) => { if (isDesignLayoutOverride(value)) layout.setOverride(value); }}>
+          {LAYOUTS.map((item) => (
+            <DropdownMenuRadioItem key={item.id} value={item.id} className="pointer-coarse:min-h-11">
+              {item.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+const headerBtn = "flex size-8 items-center justify-center rounded-md text-text-subtle hover:bg-surface-elevated hover:text-foreground pointer-coarse:size-11";
+
+/**
+ * Above the chat while it is the single pane on a desktop: the canvas's toolbar is hidden
+ * with the canvas, so the way back to it has to live here.
+ */
+export function DesignChatPaneHeader({ layout }: { layout: DesignLayoutControls }) {
+  return (
+    <div className="flex min-h-9 shrink-0 items-center gap-2 border-b border-border bg-panel px-2">
+      <DesignPaneSwitch layout={layout} />
+      <span className="flex-1" />
+      <DesignLayoutMenu layout={layout} className={headerBtn} />
+    </div>
+  );
+}

package/src/web/components/design/design-mobile-layout.tsx

@@ -0,0 +1,34 @@
+import { MessageSquare, MoreHorizontal, Palette } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import type { DesignPane } from "@/lib/design/design-layout-mode";
+
+/**
+ * Phone: the thumb-zone bar under the single pane — switch to the canvas or the chat, or
+ * open the canvas's More sheet.
+ *
+ * Only the bar lives here. The panes themselves are laid out by `DesignTabLayout`, the same
+ * tree a desktop uses, so crossing the phone breakpoint never remounts the chat or the canvas.
+ */
+export function DesignMobilePaneBar({ pane, onPaneChange, onMore }: {
+  pane: DesignPane;
+  onPaneChange: (pane: DesignPane) => void;
+  onMore: () => void;
+}) {
+  const tabBtn = (active: boolean) => cn(
+    "flex min-h-11 flex-1 flex-col items-center justify-center gap-0.5 rounded-md text-[11px] font-medium",
+    active ? "text-primary" : "text-text-subtle",
+  );
+  return (
+    <nav aria-label="Design view" className="flex shrink-0 gap-2 border-t border-border bg-panel px-2 py-1 pb-[max(0.25rem,env(safe-area-inset-bottom))]">
+      <button type="button" className={tabBtn(pane === "canvas")} aria-pressed={pane === "canvas"} onClick={() => onPaneChange("canvas")}>
+        <Palette className="size-5" /> Canvas
+      </button>
+      <button type="button" className={tabBtn(pane === "chat")} aria-pressed={pane === "chat"} onClick={() => onPaneChange("chat")}>
+        <MessageSquare className="size-5" /> Chat
+      </button>
+      <button type="button" className={tabBtn(false)} aria-haspopup="dialog" onClick={onMore}>
+        <MoreHorizontal className="size-5" /> More
+      </button>
+    </nav>
+  );
+}