@hienlh/ppm 0.23.13 → 0.23.14

package/src/web/components/floating-window/window-store.ts

@@ -15,9 +15,10 @@ import {
   type Rect,
 } from "./window-geometry";
 import { loadWindowRects, saveWindowRects } from "./window-persistence";
-import type { WindowKind, WindowRuntimeState, WindowVisualState } from "./window-store-types";
+import { isPipOnlyWindow } from "./window-pip-registry";
+import type { WindowKind, WindowRuntimeState, WindowShownState, WindowVisualState } from "./window-store-types";
 
-export type { WindowKind, WindowRuntimeState, WindowVisualState };
+export type { WindowKind, WindowRuntimeState, WindowShownState, WindowVisualState };
 
 /** Fallback layer size used before the container has been measured. */
 const DEFAULT_BOUNDS: Bounds = { w: 1280, h: 800 };
@@ -31,10 +32,20 @@ interface WindowStore {
 
   open(kind: WindowKind, payload?: Record<string, unknown>, rect?: Rect): string;
   close(id: string): void;
+  /** Raise a window to the front, bringing it back from the dock if it was minimized. */
   focus(id: string): void;
   move(id: string, position: { x: number; y: number }): void;
   resize(id: string, rect: Rect): void;
+  /** Change how a window is shown. Minimizing remembers the state to come back to. */
   setState(id: string, state: WindowVisualState): void;
+  /** Bring a window back from the dock in the state it was minimized from, and raise it. */
+  restore(id: string): void;
+  /** A dock chip's click: the window in front minimizes, any other comes forward. */
+  activateFromDock(id: string): void;
+  minimizeAll(): void;
+  /** The window being dragged towards a snap, or null; drives the layer's snap preview. */
+  snapPreviewId: string | null;
+  setSnapPreview(id: string | null): void;
   /** Merge into a window's payload; persisted so a reload restores the latest state. */
   setPayload(id: string, payload: Record<string, unknown>): void;
   setBounds(bounds: Bounds): void;
@@ -58,6 +69,19 @@ function persist(windows: Record<string, WindowRuntimeState>): void {
   saveWindowRects(Object.values(windows));
 }
 
+/** The next open-order number: one past the newest window, so the dock appends it. */
+function nextOpened(windows: WindowRuntimeState[]): number {
+  return windows.reduce((max, w) => Math.max(max, w.opened + 1), 0);
+}
+
+/** `win` in `state`, remembering what a minimized window was showing as. */
+function withState(win: WindowRuntimeState, state: WindowVisualState): WindowRuntimeState {
+  if (win.state === state) return win;
+  if (state === "minimized") return { ...win, state, restoreTo: win.state as WindowShownState };
+  const { restoreTo: _dropped, ...rest } = win;
+  return { ...rest, state };
+}
+
 function newId(): string {
   return `win-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
@@ -66,6 +90,7 @@ export const useWindowStore = create<WindowStore>((set, get) => ({
   windows: {},
   bounds: DEFAULT_BOUNDS,
   restored: false,
+  snapPreviewId: null,
 
   open: (kind, payload, rect) => {
     const { windows, bounds } = get();
@@ -75,7 +100,7 @@ export const useWindowStore = create<WindowStore>((set, get) => ({
     // of silently dropping the request.
     if (ordered.length >= MAX_WINDOWS) {
       const oldest = ordered[0]!;
-      get().focus(oldest.id);
+      get().restore(oldest.id);
       return oldest.id;
     }
 
@@ -83,7 +108,7 @@ export const useWindowStore = create<WindowStore>((set, get) => ({
     const spawn = rect ? clampRect(rect, bounds) : cascadeSpawnRect(ordered.map((w) => w.rect), bounds);
     const next = densify([
       ...ordered,
-      { id, kind, rect: spawn, rank: ordered.length, state: "normal" as const, payload },
+      { id, kind, rect: spawn, rank: ordered.length, opened: nextOpened(ordered), state: "normal" as const, payload },
     ]);
     set({ windows: next });
     persist(next);
@@ -100,10 +125,13 @@ export const useWindowStore = create<WindowStore>((set, get) => ({
 
   focus: (id) => {
     const { windows } = get();
-    const target = windows[id];
-    if (!target) return;
+    const found = windows[id];
+    if (!found) return;
+    // Every opener that finds its window already open focuses it; one waiting in the dock
+    // has to come back on screen for that to mean anything.
+    const target = found.state === "minimized" ? withState(found, found.restoreTo ?? "normal") : found;
     const ordered = sortedByRank(windows);
-    if (ordered[ordered.length - 1]?.id === id) return; // already frontmost
+    if (target === found && ordered[ordered.length - 1]?.id === id) return; // already frontmost
     const next = densify([...ordered.filter((w) => w.id !== id), target]);
     set({ windows: next });
     persist(next); // stacking order is part of the restored layout
@@ -132,11 +160,32 @@ export const useWindowStore = create<WindowStore>((set, get) => ({
     const { windows } = get();
     const win = windows[id];
     if (!win || win.state === state) return;
-    const next = { ...windows, [id]: { ...win, state } };
+    const next = { ...windows, [id]: withState(win, state) };
+    set({ windows: next });
+    persist(next);
+  },
+
+  restore: (id) => get().focus(id),
+
+  activateFromDock: (id) => {
+    const { windows } = get();
+    if (!windows[id]) return;
+    if (frontWindowId(windows) === id) get().setState(id, "minimized");
+    else get().restore(id);
+  },
+
+  minimizeAll: () => {
+    const { windows } = get();
+    const next: Record<string, WindowRuntimeState> = {};
+    for (const win of Object.values(windows)) next[win.id] = withState(win, "minimized");
     set({ windows: next });
     persist(next);
   },
 
+  setSnapPreview: (id) => {
+    if (get().snapPreviewId !== id) set({ snapPreviewId: id });
+  },
+
   setPayload: (id, payload) => {
     const { windows } = get();
     const win = windows[id];
@@ -178,7 +227,10 @@ export const useWindowStore = create<WindowStore>((set, get) => ({
         kind: w.kind,
         rect: w.rect,
         rank,
+        // A blob from before open order was kept has none; stacking order stands in for it.
+        opened: w.opened ?? rank,
         state: w.state,
+        restoreTo: w.restoreTo,
         payload: w.payload,
       })),
     );
@@ -190,3 +242,18 @@ export const useWindowStore = create<WindowStore>((set, get) => ({
 export function windowsInRankOrder(windows: Record<string, WindowRuntimeState>): WindowRuntimeState[] {
   return sortedByRank(windows);
 }
+
+/**
+ * The window in front: the highest-ranked one still on screen. A minimized window keeps its
+ * rank so it comes back where it was in the stack, but it is never the one in front.
+ */
+export function frontWindowId(windows: Record<string, WindowRuntimeState>): string | null {
+  // A window that only carries a tab into picture-in-picture is never on screen either.
+  const shown = sortedByRank(windows).filter((w) => w.state !== "minimized" && !isPipOnlyWindow(w.id));
+  return shown[shown.length - 1]?.id ?? null;
+}
+
+/** Windows in the order they were opened — the order the dock lists them in. */
+export function windowsInOpenOrder(windows: Record<string, WindowRuntimeState>): WindowRuntimeState[] {
+  return Object.values(windows).sort((a, b) => a.opened - b.opened);
+}

package/src/web/components/floating-window/window-title-identity.tsx

@@ -0,0 +1,86 @@
+/**
+ * The parts of a window's identity both skins and the status-bar dock draw the same way: the
+ * tinted glyph tile, and the title row (title, dimmer subtitle, "working" marker).
+ *
+ * Colours come in as a CSS colour expression (a theme token) and are mixed here, so a design
+ * window's own colour and a terminal's success green go through one rule.
+ */
+
+import type { CSSProperties, ElementType } from "react";
+import { cn } from "@/lib/utils";
+
+const TILE_SIZES = {
+  sm: "size-4 rounded-[4px] [&_svg]:size-[11px]",
+  md: "size-[22px] rounded-md [&_svg]:size-3.5",
+  lg: "size-6 rounded-md [&_svg]:size-3.5",
+} as const;
+
+export interface WindowTileProps {
+  icon: ElementType;
+  tone: string;
+  size?: keyof typeof TILE_SIZES;
+  /** A design's tile is filled with its colour; every other kind gets a tint. */
+  filled?: boolean;
+  /** Dimmed: the window is minimized. */
+  muted?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function WindowTile({ icon: Icon, tone, size = "md", filled, muted, className, children }: WindowTileProps) {
+  const style = {
+    "--tone": tone,
+    background: filled
+      ? "linear-gradient(140deg, var(--tone), color-mix(in srgb, var(--tone) 60%, #000))"
+      : "color-mix(in srgb, var(--tone) 20%, transparent)",
+    color: filled ? "#fff" : "var(--tone)",
+  } as CSSProperties;
+  return (
+    <span
+      aria-hidden="true"
+      style={style}
+      className={cn(
+        "relative grid shrink-0 place-items-center",
+        TILE_SIZES[size],
+        muted && "opacity-55 saturate-50",
+        className,
+      )}
+    >
+      <Icon />
+      {children}
+    </span>
+  );
+}
+
+/** The pulsing dot of a window with an AI turn running; sits on a tile's corner. */
+export function WindowBusyDot({ className }: { className?: string }) {
+  return (
+    <span className={cn("absolute -right-[3px] -top-[3px] size-[7px] rounded-full bg-success ring-2 ring-panel", className)}>
+      <span className="absolute inset-0 rounded-full bg-success animate-ping motion-reduce:hidden" />
+    </span>
+  );
+}
+
+export interface WindowTitleTextProps {
+  title: string;
+  subtitle?: string;
+  busy: boolean;
+  focused: boolean;
+  className?: string;
+}
+
+/** Title, subtitle and the "Working" marker, in a row that truncates the subtitle first. */
+export function WindowTitleText({ title, subtitle, busy, focused, className }: WindowTitleTextProps) {
+  return (
+    <span className={cn("flex min-w-0 items-center gap-2", className)}>
+      <span className={cn("truncate text-[13px] font-semibold", focused ? "text-text" : "text-text-2")}>{title}</span>
+      {subtitle && <span className="min-w-0 truncate text-[11px] text-text-3 @max-[560px]/window:hidden">{subtitle}</span>}
+      {busy && (
+        <span className="flex shrink-0 items-center gap-1.5 text-[11px] text-success">
+          <span className="size-1.5 rounded-full bg-current" />
+          Working
+        </span>
+      )}
+    </span>
+  );
+}

package/src/web/components/layout/status-bar.tsx

@@ -13,6 +13,7 @@ import { WakeLockStatusBarItem } from "@/components/layout/wake-lock-indicator";
 import { countDockTabs } from "@/components/layout/dock-tabs";
 import { BranchPicker } from "@/components/git/branch-picker";
 import { DbRowsStatus } from "@/components/database/db-rows-status";
+import { WindowDock } from "@/components/floating-window/window-dock";
 import { DOCK_PANEL_ID } from "@/stores/panel-utils";
 import { cn } from "@/lib/utils";
 
@@ -45,6 +46,8 @@ export const StatusBar = memo(function StatusBar() {
         {/* Native panel toggle — the sole dock toggle (sidebar/tab-bar toggles removed). */}
         <DockToggle />
       </div>
+      {/* The floating windows' taskbar; takes the free middle, renders nothing with no windows. */}
+      <WindowDock />
       {/* Never shrinks: squeezed, CPU/MEM was its only shrinkable item and wrapped onto two lines. */}
       <div className="flex items-center gap-3 shrink-0">
         {/* Screen-awake marker — only while a wake lock is actually held. */}

package/src/web/components/layout/tab-pop-out-menu-item.tsx

@@ -15,7 +15,7 @@ import { isDocumentPipSupported } from "@/components/floating-window/pip/pip-sup
 import { ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { usePanelStore } from "@/stores/panel-store";
-import { NON_POPPABLE_TAB_TYPES } from "@/stores/panel-utils";
+import { NON_PIP_TAB_TYPES, NON_POPPABLE_TAB_TYPES } from "@/stores/panel-utils";
 import type { Tab } from "@/stores/tab-store";
 
 interface TabPopOutMenuItemProps {
@@ -42,7 +42,7 @@ export function TabPopOutMenuItem({ tab, panelId }: TabPopOutMenuItemProps) {
         <ExternalLink className="size-3.5 mr-2" />
         Open in window
       </ContextMenuItem>
-      {isDocumentPipSupported() && (
+      {isDocumentPipSupported() && !NON_PIP_TAB_TYPES.has(tab.type) && (
         <ContextMenuItem
           onClick={() => {
             // Nothing awaited before this call: it spends the click's activation on the PiP

package/src/web/components/logs/open-logs.ts

@@ -54,7 +54,6 @@ export function openLogs(nav?: LogsNavigation): void {
     const existing = Object.values(store.windows).find((w) => w.kind === "logs");
     if (existing) {
       if (nav?.view) store.setPayload(existing.id, { view: nav.view });
-      if (existing.state === "minimized") store.setState(existing.id, "normal");
       store.focus(existing.id);
     } else {
       const rect = cascadeSpawnRect(Object.values(store.windows).map((w) => w.rect), store.bounds, LOGS_WINDOW_SIZE);

package/src/web/components/os-explorer/actions/explorer-actions-upload.ts

@@ -14,6 +14,7 @@
 
 import { fsApi, FsError } from "@/lib/fs-api";
 import { uploadFileXhr } from "@/lib/fs-upload-xhr";
+import { randomId } from "@/lib/utils";
 import { dirnameOf, joinPath } from "../format-file-meta";
 import { fsChanged } from "../explorer-store";
 import type { DroppedEntry } from "../upload/collect-dropped-entries";
@@ -94,7 +95,7 @@ export async function uploadEntries(
 ): Promise<void> {
   if (entries.length === 0) return;
 
-  const batchId = crypto.randomUUID();
+  const batchId = randomId();
   const store = useUploadStore.getState();
   store.addBatch(
     batchId,

package/src/web/components/os-explorer/skins/macos-window-chrome.tsx

@@ -13,10 +13,11 @@
  * element that itself carries the attribute.
  */
 
-import { Minus, Plus, X } from "@/lib/icons";
+import { Minus, PanelRight, Plus, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { TITLEBAR_HEIGHT, type WindowChromeProps } from "@/components/floating-window/window-chrome-contract";
 import { PipCaptionButton } from "@/components/floating-window/pip/pip-caption-button";
+import { WindowTile, WindowTitleText } from "@/components/floating-window/window-title-identity";
 
 /** The traffic-light colours, plus the unfocused grey — the documented hardcoded hexes. */
 const LIGHTS = [
@@ -25,8 +26,12 @@ const LIGHTS = [
   { color: "#28C840", label: "Maximize window", Icon: Plus },
 ] as const;
 
+/** Same box as the PiP button's default, so the two right-hand buttons line up. */
+const SIDE_BUTTON =
+  "grid place-items-center size-6 rounded text-text-2 can-hover:hover:bg-surface-elevated can-hover:hover:text-text transition-colors";
+
 export function MacosWindowChrome({
-  id, title, focused, titlebarProps, onMinimize, onToggleMaximize, onClose,
+  id, kind, title, state, focused, titlebarProps, identity, onMinimize, onToggleMaximize, onToggleSnap, onClose,
 }: WindowChromeProps) {
   const { className, style, ...rest } = titlebarProps;
   const actions = [onClose, onMinimize, onToggleMaximize];
@@ -62,16 +67,17 @@ export function MacosWindowChrome({
       {/* A flex child, not an absolutely centred span: the title is boxed between the
           traffic lights and the caption button, so a long title truncates instead of
           painting over either of them. Centre is a few px off true middle — acceptable. */}
-      <span
-        className={cn(
-          "pointer-events-none flex-1 min-w-0 truncate text-center text-[13px] px-2",
-          focused ? "text-text" : "text-text-2",
-        )}
-      >
-        {title}
+      <span className="pointer-events-none flex flex-1 min-w-0 items-center justify-center gap-2 px-2">
+        {kind !== "explorer" && <WindowTile icon={identity.icon} tone={identity.tone} size="sm" />}
+        <WindowTitleText title={title} subtitle={identity.subtitle} busy={identity.busy} focused={focused} />
       </span>
-      <div className="flex items-center pr-2">
-        <PipCaptionButton id={id} />
+      <div className="flex items-center gap-0.5 pr-2">
+        {identity.allowPip && <PipCaptionButton id={id} />}
+        <button type="button" aria-label="Snap to the right"
+          title={state === "snapped" ? "Unsnap" : "Snap to the right"} aria-pressed={state === "snapped"}
+          className={cn(SIDE_BUTTON, state === "snapped" && "text-primary")} onClick={onToggleSnap}>
+          <PanelRight className="size-3.5" />
+        </button>
       </div>
     </div>
   );

package/src/web/components/os-explorer/skins/windows-window-chrome.tsx

@@ -15,10 +15,11 @@
  * `--x-radius`, `--x-font`) only resolve on an element that itself carries the attribute.
  */
 
-import { Minus, Square, Copy, X } from "@/lib/icons";
+import { Minus, Square, Copy, X, PanelRight } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { TITLEBAR_HEIGHT, type WindowChromeProps } from "@/components/floating-window/window-chrome-contract";
 import { PipCaptionButton } from "@/components/floating-window/pip/pip-caption-button";
+import { WindowTile, WindowTitleText } from "@/components/floating-window/window-title-identity";
 import { WindowsFolderIcon } from "./folder-icon-windows";
 
 /** Windows metric: 46px wide caption buttons, full titlebar height. */
@@ -28,7 +29,7 @@ const CAPTION_BUTTON =
 const CLOSE_BUTTON = cn(CAPTION_BUTTON, "can-hover:hover:!bg-[#c42b1c] can-hover:hover:!text-white");
 
 export function WindowsWindowChrome({
-  id, kind, title, state, focused, titlebarProps, onMinimize, onToggleMaximize, onClose,
+  id, kind, title, state, focused, titlebarProps, identity, onMinimize, onToggleMaximize, onToggleSnap, onClose,
 }: WindowChromeProps) {
   const { className, style, ...rest } = titlebarProps;
   return (
@@ -44,10 +45,18 @@ export function WindowsWindowChrome({
       )}
     >
       <div className="flex flex-1 min-w-0 items-center gap-2 px-2.5 cursor-default">
-        {kind === "explorer" && <WindowsFolderIcon className="size-4 shrink-0" />}
-        <span className={cn("truncate text-[12px]", focused ? "text-text" : "text-text-2")}>{title}</span>
+        {kind === "explorer"
+          ? <WindowsFolderIcon className="size-4 shrink-0" />
+          : <WindowTile icon={identity.icon} tone={identity.tone} />}
+        <WindowTitleText title={title} subtitle={identity.subtitle} busy={identity.busy} focused={focused} />
       </div>
-      <PipCaptionButton id={id} className={CAPTION_BUTTON} />
+      {identity.allowPip && <PipCaptionButton id={id} className={CAPTION_BUTTON} />}
+      <button type="button" aria-label="Snap to the right"
+        title={state === "snapped" ? "Unsnap" : "Snap to the right"}
+        aria-pressed={state === "snapped"}
+        className={cn(CAPTION_BUTTON, state === "snapped" && "text-primary")} onClick={onToggleSnap}>
+        <PanelRight className="size-3.5" />
+      </button>
       <button type="button" aria-label="Minimize window" className={CAPTION_BUTTON} onClick={onMinimize}>
         <Minus className="size-3.5" />
       </button>

package/src/web/components/settings/design-settings-section.tsx

@@ -15,6 +15,7 @@ import {
 import { DesignInstructionsEditor } from "./design-instructions-editor";
 import { DesignSkillMentionStatus } from "./design-skill-mention-status";
 import { DesignAppsSettingsSection } from "./design-apps-settings-section";
+import { DesignWindowSetting } from "./design-window-setting";
 
 /** One picker list across providers; the first provider's copy of a shared name wins. */
 function mergeSkills(settings: DesignSettings): SlashItem[] {
@@ -142,6 +143,8 @@ export function DesignSettingsSection() {
 
   return (
     <div className="space-y-4">
+      <DesignWindowSetting />
+      <div className="h-px bg-border" />
       {projectName && (
         <>
           <DesignAppsSettingsSection projectName={projectName} />

package/src/web/components/settings/design-window-setting.tsx

@@ -0,0 +1,28 @@
+import { Switch } from "@/components/ui/switch";
+import { useSettingsStore } from "@/stores/settings-store";
+
+/**
+ * Settings → Design: whether a design opens in a floating window or as a tab. Applies to
+ * designs opened from now on; one already open stays where it is.
+ */
+export function DesignWindowSetting() {
+  const enabled = useSettingsStore((s) => s.designWindows);
+  return (
+    // The whole row is the label, so the 44px target is the row rather than the 36x20 track.
+    <label className="flex min-h-11 cursor-pointer items-center justify-between gap-4">
+      <span className="space-y-1">
+        <span className="block text-sm font-medium">Open designs in a window</span>
+        <span className="block text-xs leading-relaxed text-text-subtle">
+          A design floats over your panels, where you can move it, snap it to the right half or
+          minimize it to the status bar. Off: designs open as tabs. On a phone a design is
+          always full screen.
+        </span>
+      </span>
+      <Switch
+        checked={enabled}
+        onCheckedChange={(checked) => useSettingsStore.getState().setDesignWindows(checked)}
+        aria-label="Open designs in a window"
+      />
+    </label>
+  );
+}

package/src/web/hooks/use-design-session-redirect.ts

@@ -11,7 +11,8 @@ import { openDesignTab } from "@/lib/design/open-design-tab";
  * not know the session is a design one — would otherwise take it out of design mode: no
  * canvas, and a history the design tab no longer owns. Asking once per session here covers
  * all of them, including ones added later, instead of trusting each caller to route itself.
- * The design tab is opened first (in the same panel) so the panel is never left empty.
+ * The design tab is opened first, in the same panel and kept there even where designs open in
+ * windows (`inPlace`), so the panel is never left empty.
  */
 export function useDesignSessionRedirect(input: {
   tabId?: string;
@@ -30,7 +31,7 @@ export function useDesignSessionRedirect(input: {
       .then(({ designSlug: slug }) => {
         if (cancelled || !slug) return;
         const panelId = usePanelStore.getState().getPanelForTab(tabId)?.id;
-        openDesignTab({ projectName, slug, sessionId, providerId, panelId });
+        openDesignTab({ projectName, slug, sessionId, providerId, panelId, inPlace: true });
         usePanelStore.getState().closeTab(tabId, panelId);
       })
       .catch(() => { /* an unknown session stays a plain chat */ });

package/src/web/lib/chat-attempt-lifecycle.ts

@@ -1,3 +1,5 @@
+import { randomId } from "@/lib/utils";
+
 /** Local dispatch evidence, deliberately independent of tour state and server turn IDs. */
 export interface ChatAttemptEvent {
   type: "started" | "succeeded" | "failed" | "session";
@@ -15,7 +17,7 @@ export class ChatAttemptLifecycle {
     // A follow-up can overlap an earlier done frame: never attribute it as success.
     this.fail();
     if (!idle || !connected) return;
-    this.attempt = { sessionId, attemptId: crypto.randomUUID() };
+    this.attempt = { sessionId, attemptId: randomId() };
     this.emit({ type: "started", ...this.attempt });
   }
 

package/src/web/lib/design/design-layout-mode.ts

@@ -51,6 +51,13 @@ export interface DesignLayoutInput {
   pane: DesignPane;
   /** The canvas covers the whole window. */
   expanded: boolean;
+  /**
+   * The design is in a floating window. The window has its own fixed arrangement — canvas
+   * left, chat in a column on the right — so neither the width nor the pinned layout apply.
+   */
+  windowed?: boolean;
+  /** In a window: the chat column is open. */
+  windowChat?: boolean;
 }
 
 export interface DesignLayout {
@@ -62,10 +69,18 @@ export interface DesignLayout {
   /** The layout menu's checked item, which follows what is on screen. */
   menuValue: DesignLayoutOverride;
   expanded: boolean;
+  /** Laid out as a window: canvas first, chat a fixed column after it, toggled from the toolbar. */
+  windowed: boolean;
+  /** In a window, whether the chat column is open (false outside a window). */
+  windowChat: boolean;
 }
 
 export function resolveDesignLayout(input: DesignLayoutInput): DesignLayout {
   const { override, isPhone, autoSplit, expanded } = input;
+  if (input.windowed && !isPhone) {
+    const chat = input.windowChat !== false && !expanded;
+    return { split: chat, pane: "canvas", switcher: null, menuValue: override, expanded, windowed: true, windowChat: chat };
+  }
   // An expanded canvas lives inside the canvas pane, so that pane has to be the visible one.
   const pane: DesignPane = expanded ? "canvas" : input.pane;
   // A phone ignores a pinned split: two panes do not fit, and the pin belongs to this device's
@@ -75,5 +90,5 @@ export function resolveDesignLayout(input: DesignLayoutInput): DesignLayout {
   // A pinned single pane still lets the user peek at the other pane; the menu then names the
   // pane actually shown, so it never claims "Canvas only" over a visible chat.
   const menuValue = override === "canvas" || override === "chat" ? pane : override;
-  return { split, pane, switcher, menuValue, expanded };
+  return { split, pane, switcher, menuValue, expanded, windowed: false, windowChat: false };
 }

package/src/web/lib/design/design-view-prefs.ts

@@ -16,12 +16,21 @@ const STORAGE_KEY = "ppm-design-view-prefs";
 export const DEFAULT_CHAT_PERCENT = 38;
 export const MIN_CHAT_PERCENT = 20;
 export const MAX_CHAT_PERCENT = 70;
+/**
+ * The chat column's width in a design *window*, in px: a fixed column rather than a share,
+ * because a window is resized far more often than the column is, and the chat should not
+ * swell and shrink with it. It never takes more than half the window either (see the layout).
+ */
+export const DEFAULT_WINDOW_CHAT_WIDTH = 380;
+export const MIN_WINDOW_CHAT_WIDTH = 280;
+export const MAX_WINDOW_CHAT_WIDTH = 440;
 /** Designs whose frame is remembered; the least recently changed are forgotten first. */
 export const MAX_REMEMBERED_FRAMES = 50;
 
 export interface DesignViewPrefs {
   layout: DesignLayoutOverride;
   chatPercent: number;
+  windowChatWidth: number;
   /** `<project>/<slug>` → frame, oldest first. */
   frames: Record<string, DeviceFrameId>;
   /** `<project>/<slug>` → the variant file on screen, oldest first. Checked against the list on use. */
@@ -29,7 +38,7 @@ export interface DesignViewPrefs {
 }
 
 export function defaultDesignViewPrefs(): DesignViewPrefs {
-  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, frames: {}, variants: {} };
+  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, windowChatWidth: DEFAULT_WINDOW_CHAT_WIDTH, frames: {}, variants: {} };
 }
 
 /** Newest-last entries of a stored map, the ones failing `keep` dropped, at most MAX_REMEMBERED_FRAMES. */
@@ -48,6 +57,11 @@ export function clampChatPercent(value: unknown): number {
   return Math.min(MAX_CHAT_PERCENT, Math.max(MIN_CHAT_PERCENT, Math.round(value)));
 }
 
+export function clampWindowChatWidth(value: unknown): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_WINDOW_CHAT_WIDTH;
+  return Math.min(MAX_WINDOW_CHAT_WIDTH, Math.max(MIN_WINDOW_CHAT_WIDTH, Math.round(value)));
+}
+
 export function parseDesignViewPrefs(raw: string | null): DesignViewPrefs {
   if (!raw) return defaultDesignViewPrefs();
   let data: unknown;
@@ -61,6 +75,7 @@ export function parseDesignViewPrefs(raw: string | null): DesignViewPrefs {
   const layout = isDesignLayoutOverride(obj.layout) ? obj.layout : "auto";
   return {
     layout, chatPercent: clampChatPercent(obj.chatPercent),
+    windowChatWidth: clampWindowChatWidth(obj.windowChatWidth),
     frames: rememberedMap(obj.frames, isDeviceFrameId),
     variants: rememberedMap(obj.variants, isStoredVariant),
   };
@@ -93,6 +108,10 @@ export function withChatPercent(prefs: DesignViewPrefs, percent: number): Design
   return { ...prefs, chatPercent: clampChatPercent(percent) };
 }
 
+export function withWindowChatWidth(prefs: DesignViewPrefs, width: number): DesignViewPrefs {
+  return { ...prefs, windowChatWidth: clampWindowChatWidth(width) };
+}
+
 export function withLayout(prefs: DesignViewPrefs, layout: DesignLayoutOverride): DesignViewPrefs {
   return { ...prefs, layout };
 }