@hienlh/ppm 0.22.11 → 0.23.1

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

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { commitDesignTweaks, getDesignTweaks, type DesignTweaksInfo } from "@/lib/design/api-design-tweaks";
+import { overriddenVars, pendingChanges } from "@/lib/design/design-tweaks-model";
+import { isSafeTweakValueShape } from "../../../../shared/design-tweaks";
+import type { TweakWinner } from "../../../../shared/design-bridge-messages-tweaks";
+import type { DesignTabContextValue } from "../design-tab-context";
+import type { DesignBridge } from "../canvas/use-design-bridge";
+import { pushDesignUndo } from "../transform/design-undo-stack";
+
+/**
+ * Tweak controls for one design tab: the definitions from `design.json`, what the page
+ * renders for each variable, the user's unapplied edits, and Apply.
+ *
+ * Edits show live: each one becomes a `tweak-set` (coalesced to one per frame) that the
+ * bridge applies as an inline override. Every new document — a live reload, a 409 recovery,
+ * a panel move — starts without those overrides, so each `ready` re-reads the rendered
+ * values and replays the unapplied edits. Only this side decides what is written: Apply
+ * posts the edits it holds, and the frame's reports only ever fill the controls.
+ *
+ * After an Apply the page reloads from the rewritten file; if the reloaded page does not
+ * render a committed value, a later or more specific rule wins over it, and the panel says so.
+ */
+
+export function useDesignTweaks(tab: DesignTabContextValue, bridge: DesignBridge, reloadCanvas: () => void, opts: { onPanelOpen: () => void }) {
+  const { projectName, slug, tabId, design, isStreaming } = tab;
+  const [info, setInfo] = useState<DesignTweaksInfo | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [rendered, setRendered] = useState<Record<string, string>>({});
+  const [winners, setWinners] = useState<Record<string, TweakWinner>>({});
+  const [edits, setEdits] = useState<Record<string, string>>({});
+  const [overridden, setOverridden] = useState<string[]>([]);
+  const [applying, setApplying] = useState(false);
+  const [panelOpen, setPanelOpen] = useState(false);
+  const verify = useRef<Record<string, string> | null>(null);
+  const gensAfterApply = useRef<Record<string, string>>({});
+  const outbox = useRef<Record<string, string>>({});
+  const frame = useRef<number | null>(null);
+  const live = useRef({ info, edits, ready: bridge.ready });
+  live.current = { info, edits, ready: bridge.ready };
+  const onPanelOpen = useRef(opts.onPanelOpen);
+  onPanelOpen.current = opts.onPanelOpen;
+  const { send } = bridge;
+
+  // A manifest refresh hands over a new summary object: the tweaks may have changed with it.
+  useEffect(() => {
+    let cancelled = false;
+    getDesignTweaks(projectName, slug)
+      .then((next) => { if (!cancelled) { setInfo(next); setLoadError(null); } })
+      .catch((e: Error) => { if (!cancelled) setLoadError(e.message || "Could not load the tweaks"); });
+    return () => { cancelled = true; };
+  }, [projectName, slug, design]);
+
+  const vars = useMemo(() => (info?.tweaks ?? []).map((t) => t.var), [info]);
+  useEffect(() => {
+    if (vars.length && live.current.ready) send({ type: "tweak-read", vars });
+  }, [vars, send]);
+
+  useEffect(() => {
+    const offs = [
+      bridge.onReplay((replaySend) => {
+        gensAfterApply.current = {};
+        const { info: current, edits: pending } = live.current;
+        const names = (current?.tweaks ?? []).map((t) => t.var);
+        if (!names.length) return;
+        // Read first: the rendered values are the file's, before the edits go back on.
+        replaySend({ type: "tweak-read", vars: names });
+        const values = Object.fromEntries(Object.entries(pending).filter(([name, v]) => names.includes(name) && isSafeTweakValueShape(v)));
+        if (Object.keys(values).length) replaySend({ type: "tweak-set", values });
+      }),
+      bridge.on("tweak-values", (m) => {
+        setRendered((r) => ({ ...r, ...m.values }));
+        setWinners((w) => ({ ...w, ...m.winners }));
+        if (verify.current) {
+          setOverridden(overriddenVars(verify.current, m.values));
+          verify.current = null;
+        }
+      }),
+    ];
+    return () => { for (const off of offs) off(); };
+  }, [bridge.on, bridge.onReplay]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => () => { if (frame.current !== null) cancelAnimationFrame(frame.current); }, []);
+
+  const setValue = useCallback((name: string, value: string) => {
+    setEdits((e) => ({ ...e, [name]: value }));
+    setOverridden((o) => o.filter((v) => v !== name));
+    if (!isSafeTweakValueShape(value)) return;
+    outbox.current[name] = value;
+    if (frame.current !== null) return;
+    frame.current = requestAnimationFrame(() => {
+      frame.current = null;
+      const values = outbox.current;
+      outbox.current = {};
+      send({ type: "tweak-set", values });
+    });
+  }, [send]);
+
+  const reset = useCallback(() => {
+    outbox.current = {};
+    setEdits({});
+    send({ type: "tweak-reset" });
+  }, [send]);
+
+  const pending = useMemo(() => pendingChanges(info?.tweaks ?? [], edits, rendered), [info, edits, rendered]);
+  const dirtyCount = Object.keys(pending).length;
+
+  const apply = useCallback(async () => {
+    const ready = live.current.ready;
+    const values = pending;
+    if (!ready || isStreaming || Object.keys(values).length === 0) return;
+    setApplying(true);
+    try {
+      const gens = { ...ready.cssGens, [ready.file]: ready.gen, ...gensAfterApply.current };
+      const out = await commitDesignTweaks(projectName, slug, { entry: ready.file, gens, values });
+      if (out.status === "stale") {
+        // The edits stay; the next `ready` replays them onto the fresh document.
+        toast.warning("The design changed; your values are kept, press Apply again");
+        reloadCanvas();
+        return;
+      }
+      gensAfterApply.current = { ...gensAfterApply.current, ...out.gens };
+      if (out.undoId) pushDesignUndo(tabId, out.undoId);
+      verify.current = values;
+      setRendered((r) => ({ ...r, ...values }));
+      setEdits((e) => Object.fromEntries(Object.entries(e).filter(([name]) => !(name in values))));
+      toast.success(Object.keys(values).length === 1 ? "Tweak applied" : `${Object.keys(values).length} tweaks applied`);
+    } catch (e) {
+      toast.error("Could not apply the tweaks", { description: (e as Error).message });
+    } finally {
+      setApplying(false);
+    }
+  }, [pending, isStreaming, projectName, slug, tabId, reloadCanvas]);
+
+  const togglePanel = useCallback(() => {
+    if (!panelOpen) onPanelOpen.current();
+    setPanelOpen(!panelOpen);
+  }, [panelOpen]);
+  const closePanel = useCallback(() => setPanelOpen(false), []);
+
+  return {
+    info, loadError, rendered, winners, edits, overridden, applying, panelOpen, dirtyCount,
+    /** Shown once `design.json` is a JSON object, with or without tweaks. */
+    available: info?.manifestValid === true,
+    canApply: dirtyCount > 0 && !applying && !isStreaming && bridge.ready !== null,
+    isStreaming,
+    setValue, reset, apply: () => { void apply(); }, togglePanel, closePanel,
+  };
+}
+
+export type DesignTweaksFeature = ReturnType<typeof useDesignTweaks>;

package/src/web/components/design/use-design-auto-check.ts

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { buildAutoCheckMessage } from "../../../shared/design-canvas-check-format";
+import {
+  autoSent, INITIAL_AUTO_CHECK_ROUNDS, mayAutoSend, turnStarted,
+} from "@/lib/design/design-auto-check-rounds";
+import { autoSendToDesignChat } from "@/lib/design/deliver-to-design-chat";
+import type { DesignTabContextValue } from "./design-tab-context";
+import type { DesignBridge } from "./canvas/use-design-bridge";
+import type { CanvasIssue } from "./canvas/design-issues-badge";
+import { runCanvasCheck, type CanvasCheckContext } from "./canvas/use-design-canvas-check";
+
+/**
+ * The check PPM runs by itself after a design turn: the agent never sees the canvas, so a
+ * turn that "finished" can leave a broken layout nobody reported.
+ *
+ * A turn changed the design when the canvas reloaded during it or reloads within
+ * {@link CHANGE_WAIT_MS} of its end (the live reload trails the last write by 300 ms). Once
+ * the reloads settle, the canvas is measured without a screenshot; what it finds goes into
+ * the canvas issues badge, and — while the rounds allow it — back to the agent as a
+ * `[Canvas check]` message (see `design-auto-check-rounds.ts`).
+ */
+
+const CHANGE_WAIT_MS = 8_000;
+/** Quiet time after the last reload before measuring: a burst of writes reloads repeatedly. */
+const SETTLE_MS = 700;
+
+export function useDesignAutoCheck(opts: {
+  tab: DesignTabContextValue;
+  bridge: DesignBridge;
+  context: () => CanvasCheckContext;
+}): CanvasIssue[] {
+  const { tab, bridge } = opts;
+  const [layoutIssues, setLayoutIssues] = useState<CanvasIssue[]>([]);
+  const ref = useRef(opts);
+  ref.current = opts;
+  const rounds = useRef(INITIAL_AUTO_CHECK_ROUNDS);
+  const readies = useRef(0);
+  const readiesAtTurnStart = useRef(0);
+  const pending = useRef<{ settle: ReturnType<typeof setTimeout> | null; giveUp: ReturnType<typeof setTimeout> | null } | null>(null);
+
+  const cancelPending = useCallback(() => {
+    if (!pending.current) return;
+    if (pending.current.settle) clearTimeout(pending.current.settle);
+    if (pending.current.giveUp) clearTimeout(pending.current.giveUp);
+    pending.current = null;
+  }, []);
+
+  const check = useCallback(async () => {
+    const { tab: t, bridge: b, context } = ref.current;
+    try {
+      const report = await runCanvasCheck(b, context(), { screenshot: false });
+      setLayoutIssues(report.findings.filter((f) => f.kind !== "runtime").map((f) => ({ kind: "layout", message: f.message, source: f.element })));
+      const message = buildAutoCheckMessage(report, t.slug);
+      if (!message || !mayAutoSend(rounds.current)) return;
+      if (autoSendToDesignChat(t.tabId, message, "Canvas check") === "sent") rounds.current = autoSent(rounds.current);
+    } catch (e) {
+      console.warn(`[design] automatic canvas check skipped: ${(e as Error).message}`);
+    }
+  }, []);
+
+  /** Measure once the canvas has been quiet for SETTLE_MS; restarted by every reload. */
+  const armSettle = useCallback(() => {
+    if (!pending.current) return;
+    if (pending.current.settle) clearTimeout(pending.current.settle);
+    pending.current.settle = setTimeout(() => { cancelPending(); void check(); }, SETTLE_MS);
+  }, [cancelPending, check]);
+
+  useEffect(() => bridge.on("ready", () => {
+    readies.current++;
+    // A new document: whatever the last check found was about the previous one.
+    setLayoutIssues([]);
+    armSettle();
+  }), [bridge.on, armSettle]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const wasStreaming = useRef(tab.isStreaming);
+  useEffect(() => {
+    const was = wasStreaming.current;
+    wasStreaming.current = tab.isStreaming;
+    if (tab.isStreaming && !was) {
+      cancelPending();
+      rounds.current = turnStarted(rounds.current);
+      readiesAtTurnStart.current = readies.current;
+      return;
+    }
+    if (!was || tab.isStreaming || !tab.sessionId) return;
+    // The turn ended. Wait for the design to reload; no reload at all means it did not change.
+    // A reload already seen and settling is left to finish.
+    pending.current = { settle: null, giveUp: setTimeout(() => { if (!pending.current?.settle) cancelPending(); }, CHANGE_WAIT_MS) };
+    if (readies.current > readiesAtTurnStart.current) armSettle();
+  }, [tab.isStreaming, tab.sessionId, armSettle, cancelPending]);
+
+  useEffect(() => cancelPending, [cancelPending]);
+  return layoutIssues;
+}

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

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  initialDesignPane, nextAutoSplit, resolveDesignLayout, type DesignLayoutOverride, type DesignPane,
+} from "@/lib/design/design-layout-mode";
+import { loadDesignViewPrefs, saveDesignViewPrefs, withLayout } from "@/lib/design/design-view-prefs";
+import type { DesignLayoutControls } from "./design-tab-context";
+
+/**
+ * The design tab's layout state: the user's pick, the pane shown in single-pane mode, the
+ * expanded canvas, and auto mode's answer for the tab's own width.
+ *
+ * `rootRef` goes on the tab's layout root. It is measured in a layout effect, so a tab that
+ * opens narrow paints single-pane on its first frame instead of flashing a split.
+ */
+export function useDesignLayout({ isPhone, isActive }: { isPhone: boolean; isActive: boolean }) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [override, setOverrideState] = useState<DesignLayoutOverride>(() => loadDesignViewPrefs().layout);
+  const [pane, setPane] = useState<DesignPane>(() => initialDesignPane(override));
+  const [autoSplit, setAutoSplit] = useState(true);
+  const [expanded, setExpanded] = useState(false);
+
+  useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const measure = (width: number) => setAutoSplit((was) => nextAutoSplit(width, was));
+    measure(el.getBoundingClientRect().width);
+    const observer = new ResizeObserver(([entry]) => { if (entry) measure(entry.contentRect.width); });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // A full-window canvas belongs to the tab on screen; switching away must not leave it
+  // covering whatever tab comes up next once this one is shown again.
+  useEffect(() => {
+    if (!isActive) setExpanded(false);
+  }, [isActive]);
+
+  const setOverride = useCallback((next: DesignLayoutOverride) => {
+    setOverrideState(next);
+    if (next === "canvas" || next === "chat") setPane(next);
+    saveDesignViewPrefs(withLayout(loadDesignViewPrefs(), next));
+  }, []);
+
+  const showChat = useCallback(() => {
+    setExpanded(false);
+    setPane("chat");
+  }, []);
+
+  const layout = useMemo<DesignLayoutControls>(() => ({
+    ...resolveDesignLayout({ override, isPhone, autoSplit, pane, expanded }),
+    setOverride, setPane, setExpanded,
+  }), [override, isPhone, autoSplit, pane, expanded, setOverride]);
+
+  return { rootRef, layout, showChat };
+}

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

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getDesign } from "@/lib/design/api-designs";
+import type { DesignSummary } from "../../../shared/design-types";
+
+export type DesignSummaryState =
+  | { status: "loading" }
+  | { status: "ready"; design: DesignSummary }
+  | { status: "missing" }
+  | { status: "error"; message: string };
+
+export type DesignFetchResult =
+  | { ok: true; design: DesignSummary }
+  | { ok: false; notFound: true }
+  | { ok: false; notFound: false; message: string };
+
+/**
+ * The state after one fetch, given what was on screen before it.
+ *
+ * A design already showing (`ready`) stays on screen through a transient refresh failure —
+ * a network blip, a server restart mid-request — instead of the tab replacing the chat and
+ * canvas with an empty state and losing whatever the user was doing. Only a 404, or a failure
+ * before anything ever loaded, counts as truly missing or erroring.
+ */
+export function nextSummaryState(previous: DesignSummaryState, result: DesignFetchResult): DesignSummaryState {
+  if (result.ok) return { status: "ready", design: result.design };
+  if (result.notFound) return { status: "missing" };
+  if (previous.status === "ready") return previous;
+  return { status: "error", message: result.message };
+}
+
+/**
+ * The design's manifest, refetched on demand (a `design.json` change, a rename).
+ *
+ * A 404 is its own state rather than an error: the folder was deleted, or a deep link names
+ * a design that never existed, and the tab shows an empty state instead of a retry loop.
+ * A refetch keeps showing the last good manifest until the new one arrives.
+ */
+export function useDesignSummary(projectName: string, slug: string) {
+  const [state, setState] = useState<DesignSummaryState>({ status: "loading" });
+  const [version, setVersion] = useState(0);
+  const latest = useRef(0);
+
+  useEffect(() => {
+    if (!projectName || !slug) { setState({ status: "missing" }); return; }
+    const request = ++latest.current;
+    getDesign(projectName, slug)
+      .then((design) => { if (request === latest.current) setState((prev) => nextSummaryState(prev, { ok: true, design })); })
+      .catch((e: Error & { status?: number }) => {
+        if (request !== latest.current) return;
+        const notFound = e.status === 404 || /not found/i.test(e.message ?? "");
+        setState((prev) => {
+          const next = nextSummaryState(prev, notFound
+            ? { ok: false, notFound: true }
+            : { ok: false, notFound: false, message: e.message || "Could not load the design" });
+          if (next === prev) console.warn(`[design] summary refresh for ${slug} failed, keeping the loaded design: ${e.message}`);
+          return next;
+        });
+      });
+  }, [projectName, slug, version]);
+
+  const refresh = useCallback(() => setVersion((v) => v + 1), []);
+  return { state, refresh };
+}

package/src/web/components/layout/command-palette-design-commands.tsx

@@ -0,0 +1,75 @@
+import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import { Palette, Plus } from "@/lib/icons";
+import { useSettingsStore } from "@/stores/settings-store";
+import { listDesigns } from "@/lib/design/api-designs";
+import { openDesignTab } from "@/lib/design/open-design-tab";
+import { NEW_DESIGN_EVENT, requestNewDesign, type NewDesignRequest } from "@/lib/design/design-ui-events";
+import type { CommandItem } from "./command-palette";
+import type { DesignSummary } from "../../../shared/design-types";
+
+// Lazy: the dialog (and the design API it pulls in) loads the first time it is asked for.
+const NewDesignDialog = lazy(() =>
+  import("@/components/design/dialogs/new-design-dialog").then((m) => ({ default: m.NewDesignDialog })));
+
+/**
+ * The palette's design entries: New Design, the Designs section, and one "Open Design" per
+ * design of the active project (listed each time the palette opens, so a design an agent
+ * just created is there).
+ */
+export function useDesignCommands(projectName: string | null, open: boolean, onClose: () => void): CommandItem[] {
+  const [designs, setDesigns] = useState<DesignSummary[]>([]);
+
+  useEffect(() => {
+    if (!open || !projectName) { setDesigns([]); return; }
+    let cancelled = false;
+    listDesigns(projectName)
+      .then((d) => { if (!cancelled) setDesigns(d.designs); })
+      .catch(() => { if (!cancelled) setDesigns([]); }); // the palette works without them
+    return () => { cancelled = true; };
+  }, [open, projectName]);
+
+  return useMemo(() => {
+    if (!projectName) return [];
+    const showSection = () => {
+      const settings = useSettingsStore.getState();
+      if (settings.sidebarCollapsed) settings.toggleSidebar();
+      settings.setSidebarActiveTab("designs");
+      onClose();
+    };
+    return [
+      {
+        id: "new-design", label: "New Design…", icon: Plus, group: "action" as const,
+        keywords: "design mockup prototype page slides deck presentation canvas create",
+        action: () => { onClose(); requestNewDesign(projectName); },
+      },
+      { id: "designs", label: "Designs", icon: Palette, group: "action" as const, keywords: "design list canvas", action: showSection },
+      ...designs.map((d) => ({
+        id: `design:${d.slug}`, label: `Open Design: ${d.title}`, hint: `designs/${d.slug}`, icon: Palette,
+        group: "action" as const, keywords: `design ${d.slug} ${d.kind}`,
+        action: () => { openDesignTab({ projectName, slug: d.slug, title: d.title }); onClose(); },
+      })),
+    ];
+  }, [projectName, designs, onClose]);
+}
+
+/**
+ * Hosts the New Design dialog for the whole app. Lives beside the palette because the
+ * palette is mounted on every layout, which neither sidebar nor drawer is.
+ */
+export function NewDesignDialogHost() {
+  const [projectName, setProjectName] = useState<string | null>(null);
+  useEffect(() => {
+    const onRequest = (e: Event) => {
+      const name = (e as CustomEvent<NewDesignRequest>).detail?.projectName;
+      if (name) setProjectName(name);
+    };
+    window.addEventListener(NEW_DESIGN_EVENT, onRequest);
+    return () => window.removeEventListener(NEW_DESIGN_EVENT, onRequest);
+  }, []);
+  if (!projectName) return null;
+  return (
+    <Suspense fallback={null}>
+      <NewDesignDialog projectName={projectName} onClose={() => setProjectName(null)} />
+    </Suspense>
+  );
+}

package/src/web/components/layout/command-palette.tsx

@@ -39,11 +39,12 @@ import { splitSourceLocation, type SourceLine } from "@/lib/source-location";
 import { CommandPaletteFilterChips } from "@/components/layout/command-palette-filter-chips";
 import { dispatchExtCommand } from "@/lib/ext-command-dispatch";
 import { fileIconElement } from "@/lib/file-icons";
+import { NewDesignDialogHost, useDesignCommands } from "./command-palette-design-commands";
 
 /** Max results to display — prevents rendering thousands of matches */
 const MAX_RESULTS = 100;
 
-interface CommandItem {
+export interface CommandItem {
   id: string;
   label: string;
   hint?: string;
@@ -210,6 +211,8 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     return () => clearTimeout(timer);
   }, [query]);
 
+  const designCommands = useDesignCommands(activeProject?.name ?? null, open, onClose);
+
   // Action commands
   const actionCommands = useMemo<CommandItem[]>(() => {
     const projectId = activeProject?.name ?? null;
@@ -325,8 +328,8 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       };
     });
 
-    return [...builtIn, ...extCmds];
-  }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding, extContributions, isMobile, isTouchOnly, lspEnabled]);
+    return [...builtIn, ...designCommands, ...extCmds];
+  }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding, extContributions, isMobile, isTouchOnly, lspEnabled, designCommands]);
 
   // File commands — from index when ready, fallback to flattened tree
   const fileCommands = useMemo<CommandItem[]>(() => {
@@ -541,11 +544,15 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     }
   }
 
-  if (!open) return null;
+  // The dialog host stays mounted while the palette is closed: New Design opens after it
+  // closes. Both branches keep it as the fragment's first child so React keeps its state.
+  if (!open) return <><NewDesignDialogHost /></>;
 
   const pathMode = isPathQuery(typed.path);
 
   return (
+    <>
+    <NewDesignDialogHost />
     <div className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[20vh]" onClick={onClose}>
       <div className="fixed inset-0 bg-black/50" />
       <div
@@ -675,5 +682,6 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
         </div>
       </div>
     </div>
+    </>
   );
 }

package/src/web/components/layout/editor-panel.tsx

@@ -9,6 +9,7 @@ import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
 import { registerPanelSlot } from "./tab-pool";
 import { visibleTabs } from "@/stores/panel-utils";
+import { openSessionInItsTab } from "@/lib/design/open-design-tab";
 import { cn } from "@/lib/utils";
 
 const QUICK_OPEN_TABS: { type: TabType; label: string; icon: React.ElementType }[] = [
@@ -95,16 +96,9 @@ function EmptyPanel({ panelId, canClose }: { panelId: string; canClose: boolean
   }
 
   const openSession = useCallback((session: SessionInfo) => {
-    usePanelStore.getState().openTab(
-      {
-        type: "chat",
-        title: session.title || "Chat",
-        projectId: activeProject?.name ?? null,
-        metadata: { projectName: activeProject?.name, sessionId: session.id, providerId: session.providerId },
-        closable: true,
-      },
-      panelId,
-    );
+    if (!activeProject?.name) return;
+    // A design session opens in its design tab, where it stays in design mode.
+    openSessionInItsTab(session, activeProject.name, panelId);
   }, [activeProject?.name, panelId]);
 
   return (

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect, useMemo, lazy, Suspense } from "react";
 import { X, Bug as BugIcon, Cloud, FolderTree, MonitorSmartphone, Settings } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
@@ -30,10 +30,14 @@ import { FeatureBadge } from "@/components/ui/feature-badge";
 import type { FeatureBadgeId } from "@/lib/feature-badges";
 import { cn } from "@/lib/utils";
 
+// Lazy so the design UI stays out of the entry bundle until the section is opened.
+const DesignsSidebarPanel = lazy(() =>
+  import("@/components/design/designs-sidebar-panel").then((m) => ({ default: m.DesignsSidebarPanel })));
+
 // Tab ids the mobile drawer can render content for;
 // ext views are supported via the `ext:` prefix.
 const MOBILE_SUPPORTED = new Set<string>([
-  "history", "teams", "explorer", "search", "git", "database", "tunnels", "ai-resources", "jira",
+  "history", "teams", "designs", "explorer", "search", "git", "database", "tunnels", "ai-resources", "jira",
 ]);
 const isMobileSupported = (id: SidebarActiveTab) => MOBILE_SUPPORTED.has(id) || id.startsWith("ext:");
 
@@ -167,6 +171,9 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
             ? <SessionHistoryList variant="sidebar" projectName={activeProject.name} onNavigate={onClose} />
             : noProject)}
           {activeTab === "teams" && (activeProject ? <GroupList /> : noProject)}
+          {activeTab === "designs" && (activeProject
+            ? <Suspense fallback={null}><DesignsSidebarPanel onNavigate={onClose} /></Suspense>
+            : noProject)}
           {activeTab === "explorer" && (activeProject ? <FileTree onFileOpen={onClose} /> : noProject)}
           {isOpen && activeTab === "search" && <SearchPanel onNavigate={onClose} />}
           {isOpen && activeTab === "git" && <GitStatusPanel metadata={{ projectName: activeProject?.name }} onNavigate={onClose} />}

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

@@ -29,6 +29,7 @@ import { MobileTabSwitcherSheet } from "@/components/layout/mobile-tab-switcher-
 import { getTabIcon } from "@/lib/tab-type-icons";
 import { countDockTabs } from "@/components/layout/dock-tabs";
 import { DOCK_PANEL_ID } from "@/stores/panel-utils";
+import { tabSessionId } from "@/lib/tab-session-id";
 
 interface MobileNavProps { onMenuPress: () => void; onProjectsPress: () => void; }
 
@@ -109,7 +110,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const menuTabIdx = menuTabId ? menuTabPanelTabs.findIndex((t) => t.id === menuTabId) : -1;
 
   // Chat-session context for the long-press menu (Mark as unread / Set Tag)
-  const menuSessionId = menuTab?.type === "chat" ? (menuTab.metadata?.sessionId as string | undefined) : undefined;
+  const menuSessionId = tabSessionId(menuTab);
   const menuNotiType = menuSessionId ? ((notifications.get(menuSessionId)?.count ?? 0) > 0) : false;
   // Editor "Compare with Selected" only when a different file in the same project is selected
   const menuFilePath = menuTab?.metadata?.filePath as string | undefined;
@@ -236,7 +237,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   }, [activeProject?.name, projectTags, loadTags]);
 
   // Session tag map — same fetch pattern as desktop tab-bar so mobile tabs can show tag bar
-  const chatSessionIds = tabs.filter((t) => t.type === "chat" && t.metadata?.sessionId).map((t) => t.metadata!.sessionId as string);
+  const chatSessionIds = tabs.map(tabSessionId).filter((id): id is string => !!id);
   useEffect(() => {
     if (!activeProject?.name || chatSessionIds.length === 0) return;
     api.get<{ sessions: { id: string; tag?: { id: number; name: string; color: string } | null }[] }>(

package/src/web/components/layout/mobile-tab-switcher-sheet.tsx

@@ -13,6 +13,7 @@ import { useStreamingStore } from "@/stores/streaming-store";
 import { getTabIcon } from "@/lib/tab-type-icons";
 import { buildTabSwitcherGroups, type TabSortMode } from "./tab-switcher-groups";
 import type { Tab } from "@/stores/tab-store";
+import { tabSessionId } from "@/lib/tab-session-id";
 import { cn } from "@/lib/utils";
 
 const SORT_STORAGE_KEY = "ppm:tab-sort-mode";
@@ -64,10 +65,8 @@ export function MobileTabSwitcherSheet({
 
   function activate(tab: Tab) {
     usePanelStore.getState().setActiveTab(tab.id, tabPanelMap[tab.id]);
-    if (tab.type === "chat") {
-      const sid = tab.metadata?.sessionId as string | undefined;
-      if (sid) useNotificationStore.getState().clearForSession(sid);
-    }
+    const sid = tabSessionId(tab);
+    if (sid) useNotificationStore.getState().clearForSession(sid);
     onClose();
   }
 
@@ -150,7 +149,7 @@ export function MobileTabSwitcherSheet({
               {group.tabs.map((tab) => {
                 const Icon = getTabIcon(tab);
                 const isActive = tab.id === activeTabId;
-                const sessionId = tab.type === "chat" ? (tab.metadata?.sessionId as string | undefined) : undefined;
+                const sessionId = tabSessionId(tab);
                 const tagColor = sessionId ? sessionTagMap[sessionId]?.color : undefined;
                 const entry = sessionId ? notifications.get(sessionId) : undefined;
                 const notiType = entry && entry.count > 0 ? entry.type : null;

package/src/web/components/layout/sidebar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, memo } from "react";
+import { useCallback, useRef, memo, lazy, Suspense } from "react";
 import { PanelLeftOpen } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
@@ -17,6 +17,10 @@ import { useGitChangesPoller } from "@/stores/git-status-store";
 import { ProjectSwitcher } from "./project-switcher";
 import { NavSectionRail } from "./nav-section-rail";
 
+// Lazy so the design UI stays out of the entry bundle until the section is opened.
+const DesignsSidebarPanel = lazy(() =>
+  import("@/components/design/designs-sidebar-panel").then((m) => ({ default: m.DesignsSidebarPanel })));
+
 function ResizeHandle({ onResize }: { onResize: (width: number) => void }) {
   const dragging = useRef(false);
 
@@ -132,6 +136,9 @@ export const Sidebar = memo(function Sidebar() {
               )
             )}
             {sidebarActiveTab === "teams" && <GroupList />}
+            {sidebarActiveTab === "designs" && (
+              <Suspense fallback={null}><DesignsSidebarPanel /></Suspense>
+            )}
             {sidebarActiveTab === "database" && <DatabaseSidebar />}
             {sidebarActiveTab === "tunnels" && <TunnelManagerTab />}
             {sidebarActiveTab === "jira" && <JiraPanel />}