@hienlh/ppm 0.23.13 → 0.23.15

package/src/web/components/design/share/use-share-links.ts

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+  createDesignShare, deleteDesignShare, listDesignShares, updateDesignShare,
+} from "@/lib/design/api-design-shares";
+import { deleteShareLinkThreads } from "@/lib/design/api-design-comments";
+import type {
+  CreateDesignShareInput, DesignShareLink, UpdateDesignShareInput, UpdateDesignShareResult,
+} from "../../../../shared/design-share-types";
+
+/**
+ * One design's share links while the Share dialog is open. Every action updates the list
+ * from the server's answer, so a change shows without a reload; a failure is a toast and
+ * the action resolves to `null` (create throws instead, so the form can show the reason).
+ */
+
+export interface ShareLinksFeature {
+  links: DesignShareLink[] | null;
+  error: string | null;
+  refresh: () => Promise<void>;
+  create: (input: CreateDesignShareInput) => Promise<DesignShareLink>;
+  update: (id: string, patch: UpdateDesignShareInput, failure: string) => Promise<UpdateDesignShareResult | null>;
+  remove: (id: string) => Promise<boolean>;
+  deleteComments: (id: string) => Promise<boolean>;
+}
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+export function useShareLinks(projectName: string, slug: string, open: boolean): ShareLinksFeature {
+  const [links, setLinks] = useState<DesignShareLink[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      // Newest first, the same order a link created in this dialog takes.
+      setLinks((await listDesignShares(projectName, slug)).sort((a, b) => b.createdAt - a.createdAt));
+      setError(null);
+    } catch (e) {
+      setError(message(e) || "Could not load the share links");
+    }
+  }, [projectName, slug]);
+
+  useEffect(() => {
+    if (!open) return;
+    void refresh();
+    const onFocus = () => { void refresh(); };
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [open, refresh]);
+
+  const replace = (link: DesignShareLink) =>
+    setLinks((list) => (list ?? []).map((l) => (l.id === link.id ? link : l)));
+
+  const create = useCallback(async (input: CreateDesignShareInput) => {
+    const link = await createDesignShare(projectName, slug, input);
+    setLinks((list) => [link, ...(list ?? []).filter((l) => l.id !== link.id)]);
+    return link;
+  }, [projectName, slug]);
+
+  const update = useCallback(async (id: string, patch: UpdateDesignShareInput, failure: string) => {
+    try {
+      const result = await updateDesignShare(projectName, slug, id, patch);
+      replace(result.link);
+      return result;
+    } catch (e) {
+      toast.error(failure, { description: message(e) });
+      return null;
+    }
+  }, [projectName, slug]);
+
+  const remove = useCallback(async (id: string) => {
+    try {
+      await deleteDesignShare(projectName, slug, id);
+      setLinks((list) => (list ?? []).filter((l) => l.id !== id));
+      return true;
+    } catch (e) {
+      toast.error("Could not delete the link", { description: message(e) });
+      return false;
+    }
+  }, [projectName, slug]);
+
+  const deleteComments = useCallback(async (id: string) => {
+    try {
+      await deleteShareLinkThreads(projectName, slug, id);
+      return true;
+    } catch (e) {
+      toast.error("Could not delete the link's comments", { description: message(e) });
+      return false;
+    }
+  }, [projectName, slug]);
+
+  return { links, error, refresh, create, update, remove, deleteComments };
+}

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

@@ -12,12 +12,14 @@ import type { DesignLayoutControls } from "./design-tab-context";
  * `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 }) {
+export function useDesignLayout({ isPhone, isActive, windowed = false }: { isPhone: boolean; isActive: boolean; windowed?: 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);
+  // A window opens with its chat column showing; closing it is a choice for this window only.
+  const [windowChat, setWindowChat] = useState(true);
 
   useLayoutEffect(() => {
     const el = rootRef.current;
@@ -44,12 +46,13 @@ export function useDesignLayout({ isPhone, isActive }: { isPhone: boolean; isAct
   const showChat = useCallback(() => {
     setExpanded(false);
     setPane("chat");
+    setWindowChat(true);
   }, []);
 
   const layout = useMemo<DesignLayoutControls>(() => ({
-    ...resolveDesignLayout({ override, isPhone, autoSplit, pane, expanded }),
-    setOverride, setPane, setExpanded,
-  }), [override, isPhone, autoSplit, pane, expanded, setOverride]);
+    ...resolveDesignLayout({ override, isPhone, autoSplit, pane, expanded, windowed, windowChat }),
+    setOverride, setPane, setExpanded, setWindowChat,
+  }), [override, isPhone, autoSplit, pane, expanded, windowed, windowChat, setOverride]);
 
   return { rootRef, layout, showChat };
 }

package/src/web/components/editor/diff-viewer.tsx

@@ -168,19 +168,23 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     // Monaco DiffEditor computes the diff itself, giving full-file view instead
     // of just the changed hunks + 3 lines of context that `git diff` returns.
     if (filePath) {
-      // git is being run inside the repository, which for a container project
-      // is a subfolder — so the path it is asked about has to be relative to
-      // that, and a file outside it has no diff to show.
-      const inRepo = gitRepo.repoPath(filePath);
-      if (inRepo == null) { setLoading(false); return; }
-      const params = new URLSearchParams({ file: inRepo });
+      // git runs in the repository that holds the file — for a container
+      // project a subfolder, whichever one Source Control is pointed at — so the
+      // path it is asked about is relative to that. The Git Graph's views open
+      // these tabs on the file's own repository, not on the pick. Undecided
+      // until discovery answers (the effect re-runs then); a file under no
+      // repository has no diff to show.
+      const scope = gitRepo.fileScope(filePath);
+      if (scope === undefined) return;
+      if (scope === null) { setLoading(false); return; }
+      const params = new URLSearchParams({ file: scope.path });
       if (ref1) params.set("ref", ref1);
       if (ref2) params.set("ref2", ref2);
       // A binary file answers with its sides empty unless they are asked for.
       if (openAsText) params.set("text", "1");
       api
         .get<FileFullDiff>(
-          gitRepo.gitUrl(`/file-full-diff?${params}`),
+          gitRepo.fileGitUrl(`/file-full-diff?${params}`, scope.repo),
         )
         .then((data) => { setFullFileDiff(data); setLoading(false); })
         .catch((err) => { setError(err instanceof Error ? err.message : "Failed to load diff"); setLoading(false); });
@@ -312,14 +316,14 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
 
   // A file the text editor cannot show. An image is drawn on both sides, and
   // anything else says so in VS Code's words; "Open Anyway" asks the route for
-  // the same bytes decoded. `repoFile` is non-null by construction here — the
-  // fetch above returns early without it — but the URL builder has to say so.
+  // the same bytes decoded. `scope` is set by construction here — the fetch
+  // above returns early without it — but the URL builder has to say so.
   if (fullFileDiff?.binary && !openAsText && filePath && projectName) {
-    const repoFile = gitRepo.repoPath(filePath);
+    const scope = gitRepo.fileScope(filePath);
     const blobUrl = (rev: string) =>
-      repoFile == null
+      scope == null
         ? null
-        : gitRepo.gitUrl(`/file-blob?file=${encodeURIComponent(repoFile)}&ref=${encodeURIComponent(rev)}`);
+        : gitRepo.fileGitUrl(`/file-blob?file=${encodeURIComponent(scope.path)}&ref=${encodeURIComponent(rev)}`, scope.repo);
     return (
       <div className="flex flex-col h-full">
         {canPreviewBinary(filePath) && (

package/src/web/components/editor/docx-preview.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Loader2, FileWarning } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
+import { sanitizeDocxHtml } from "@/components/shared/docx-html-sanitize";
 
 interface DocxPreviewProps {
   filePath: string;
@@ -13,6 +14,10 @@ export function DocxPreview({ filePath, projectName }: DocxPreviewProps) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // mammoth does not sanitise, so hold its HTML to the allow-list before it reaches innerHTML.
+  // Declared with the other hooks, above every early return, so the hook order never changes.
+  const safeHtml = useMemo(() => (html ? sanitizeDocxHtml(html) : ""), [html]);
+
   useEffect(() => {
     setLoading(true);
     setError(null);
@@ -85,7 +90,7 @@ export function DocxPreview({ filePath, projectName }: DocxPreviewProps) {
           [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2
           [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2
           [&_li]:my-0.5"
-        dangerouslySetInnerHTML={{ __html: html ?? "" }}
+        dangerouslySetInnerHTML={{ __html: safeHtml }}
       />
     </div>
   );

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

@@ -0,0 +1,32 @@
+/**
+ * The one way a user closes a window — titlebar ×, Escape on the titlebar, the dock list's ×.
+ *
+ * Closing a tab-host window normally hands its tab back to the grid: the user popped it out
+ * and closing the window means "put it back". A window opened *as* the tab's home (a design
+ * opened from the sidebar, `closeTabsOnClose` in its payload) has nowhere to go back to, so
+ * closing it closes the tab. Closing the panel's last tab closes the window by itself
+ * (`syncWindowPanel`), which keeps the two from ever disagreeing.
+ */
+
+import { usePanelStore } from "@/stores/panel-store";
+import { windowPanelId } from "@/stores/panel-utils";
+import { useWindowStore } from "./window-store";
+
+/** Closing this window closes its tabs too, rather than handing them back to the grid. */
+export function closesItsTabs(win: { kind: string; payload?: Record<string, unknown> }): boolean {
+  return win.kind === "tab-host" && win.payload?.closeTabsOnClose === true;
+}
+
+export function closeWindow(id: string): void {
+  const win = useWindowStore.getState().windows[id];
+  if (!win) return;
+  if (closesItsTabs(win)) {
+    const panelId = windowPanelId(id);
+    const tabs = usePanelStore.getState().panels[panelId]?.tabs ?? [];
+    if (tabs.length > 0) {
+      for (const tab of [...tabs]) usePanelStore.getState().closeTab(tab.id, panelId);
+      return;
+    }
+  }
+  useWindowStore.getState().close(id);
+}

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

@@ -16,12 +16,13 @@ import { useCallback, useLayoutEffect, useRef, useState, type ReactNode } from "
 import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 import { PortalContainerProvider } from "@/components/ui/portal-container-context";
-import { TITLEBAR_HEIGHT } from "./window-chrome-contract";
+import type { WindowChromeIdentity } from "./window-chrome-contract";
+import { closesItsTabs, closeWindow } from "./close-window";
 import { useWindowBodyElement } from "./use-window-body-element";
 import { WindowPipPlaceholder } from "./window-pip-placeholder";
 import { isPipOnlyWindow } from "./window-pip-registry";
 import { WindowSkinChrome } from "./window-skin-chrome";
-import { windowZIndex, type Bounds, type Rect } from "./window-geometry";
+import { displayedRect, windowZIndex, type Bounds, type Rect } from "./window-geometry";
 import { useWindowStore, type WindowRuntimeState } from "./window-store";
 import { useWindowDrag } from "./use-window-drag";
 import { useWindowKeyboard } from "./use-window-keyboard";
@@ -33,6 +34,8 @@ export interface FloatingWindowProps {
   /** Size of the layer container; a maximized window fills exactly this. */
   bounds: Bounds;
   title: string;
+  /** Glyph, colour, subtitle and busy state for the titlebar (see `useWindowMeta`). */
+  identity: WindowChromeIdentity;
   focused: boolean;
   /** Reads the layer's CSS scale so pointer deltas can be corrected. */
   getScale: () => number;
@@ -41,17 +44,18 @@ export interface FloatingWindowProps {
   children: ReactNode;
 }
 
-function applyRect(el: HTMLElement | null, rect: Rect, collapsed: boolean): void {
+function applyRect(el: HTMLElement | null, rect: Rect): void {
   if (!el) return;
   el.style.transform = `translate3d(${Math.round(rect.x)}px, ${Math.round(rect.y)}px, 0)`;
   el.style.width = `${Math.round(rect.w)}px`;
-  el.style.height = collapsed ? `${TITLEBAR_HEIGHT}px` : `${Math.round(rect.h)}px`;
+  el.style.height = `${Math.round(rect.h)}px`;
 }
 
 export function FloatingWindow({
   win,
   bounds,
   title,
+  identity,
   focused,
   getScale,
   onGestureActive,
@@ -61,8 +65,11 @@ export function FloatingWindow({
   const [gesturing, setGesturing] = useState(false);
 
   const maximized = win.state === "maximized";
+  const snapped = win.state === "snapped";
   const minimized = win.state === "minimized";
-  const rect: Rect = maximized ? { x: 0, y: 0, w: bounds.w, h: bounds.h } : win.rect;
+  // Only a normal window is moved and resized by hand; the others are placed by the layer.
+  const floating = win.state === "normal";
+  const rect: Rect = displayedRect(win.state, win.rect, bounds);
 
   const { body, pip } = useWindowBodyElement(win.id, rootRef, minimized);
 
@@ -74,8 +81,25 @@ export function FloatingWindow({
   boundsRef.current = bounds;
 
   useLayoutEffect(() => {
-    applyRect(rootRef.current, rectRef.current, minimized);
-  }, [rect.x, rect.y, rect.w, rect.h, minimized]);
+    applyRect(rootRef.current, rectRef.current);
+  }, [rect.x, rect.y, rect.w, rect.h]);
+
+  // Any pointer inside the window raises it, including clicks on its content. A native
+  // listener, not React's onPointerDownCapture: a tab-host window's content is rendered by the
+  // tab pool and moved in as a DOM node, so a React handler here never sees a click on it.
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const raise = () => useWindowStore.getState().focus(win.id);
+    root.addEventListener("pointerdown", raise, true);
+    return () => root.removeEventListener("pointerdown", raise, true);
+  }, [win.id]);
+
+  // A window closed mid-drag never sees its gesture end, so it takes its snap preview along.
+  useLayoutEffect(() => () => {
+    const store = useWindowStore.getState();
+    if (store.snapPreviewId === win.id) store.setSnapPreview(null);
+  }, [win.id]);
 
   const setActive = useCallback(
     (active: boolean) => {
@@ -86,12 +110,12 @@ export function FloatingWindow({
   );
 
   const commitMove = useCallback((next: Rect, committed: boolean) => {
-    applyRect(rootRef.current, next, useWindowStore.getState().windows[win.id]?.state === "minimized");
+    applyRect(rootRef.current, next);
     if (committed) useWindowStore.getState().move(win.id, { x: next.x, y: next.y });
   }, [win.id]);
 
   const commitResize = useCallback((next: Rect, committed: boolean) => {
-    applyRect(rootRef.current, next, false);
+    applyRect(rootRef.current, next);
     if (committed) useWindowStore.getState().resize(win.id, next);
   }, [win.id]);
 
@@ -101,24 +125,34 @@ export function FloatingWindow({
     getScale,
     onGestureActive: setActive,
   };
-  const bindDrag = useWindowDrag({ ...shared, onChange: commitMove, disabled: maximized });
-  const bindResize = useWindowResize({ ...shared, onChange: commitResize, disabled: maximized || minimized });
+  const bindDrag = useWindowDrag({
+    ...shared,
+    onChange: commitMove,
+    disabled: !floating,
+    onSnapPreview: (armed) => useWindowStore.getState().setSnapPreview(armed ? win.id : null),
+    onSnap: () => useWindowStore.getState().setState(win.id, "snapped"),
+  });
+  const bindResize = useWindowResize({ ...shared, onChange: commitResize, disabled: !floating });
 
-  const close = useCallback(() => useWindowStore.getState().close(win.id), [win.id]);
+  const close = useCallback(() => closeWindow(win.id), [win.id]);
   const toggleMaximize = useCallback(() => {
     useWindowStore.getState().setState(win.id, maximized ? "normal" : "maximized");
   }, [win.id, maximized]);
-  const minimize = useCallback(() => {
-    useWindowStore.getState().setState(win.id, minimized ? "normal" : "minimized");
-  }, [win.id, minimized]);
+  const toggleSnap = useCallback(() => {
+    useWindowStore.getState().setState(win.id, snapped ? "normal" : "snapped");
+  }, [win.id, snapped]);
+  // Minimized windows live in the status bar's dock; the dock is what brings them back.
+  const minimize = useCallback(() => useWindowStore.getState().setState(win.id, "minimized"), [win.id]);
 
   const onKeyDown = useWindowKeyboard({
     getRect: () => rectRef.current,
     getBounds: () => boundsRef.current,
     onMove: (next) => useWindowStore.getState().move(win.id, { x: next.x, y: next.y }),
     onToggleMaximize: toggleMaximize,
-    onClose: close,
-    movable: !maximized,
+    // Escape is a canvas's "deselect" and the titlebar keeps focus after every drag, so it
+    // must not throw away a window whose closing closes the content itself (a design).
+    onClose: () => { if (!closesItsTabs(win)) close(); },
+    movable: floating,
   });
 
   const hiddenHost = Boolean(pip) && isPipOnlyWindow(win.id);
@@ -129,19 +163,20 @@ export function FloatingWindow({
       role="group"
       aria-roledescription="window"
       aria-label={title}
-      // Any pointer inside the window raises it, including clicks on its content.
-      onPointerDownCapture={() => useWindowStore.getState().focus(win.id)}
       style={{ zIndex: windowZIndex(win.rank) }}
       className={cn(
-        "absolute left-0 top-0 flex flex-col pointer-events-auto",
+        "@container/window absolute left-0 top-0 flex flex-col pointer-events-auto",
         "rounded-[8px] border border-border bg-panel overflow-visible",
+        // Placed by the layer against its edges: square corners, like a tiled window.
+        (maximized || snapped) && "rounded-none",
         focused ? "shadow-2xl shadow-black/40" : "shadow-lg shadow-black/20",
         // Transitions are for maximize/restore only; during a gesture they would lag the pointer.
         gesturing ? "transition-none" : "transition-[transform,width,height] duration-150 motion-reduce:transition-none",
         // A window opened only to carry a tab into PiP is never shown: the user asked for a
-        // PiP, not a window. `hidden` and not an unmount — the body must stay connected, or
-        // the PiP host has nowhere to put the tab back.
-        hiddenHost && "hidden",
+        // PiP, not a window. A minimized one waits in the status bar's dock. `hidden` and not
+        // an unmount either way: the body must stay connected (the PiP host puts the tab back
+        // into it) and the content keeps its state (a canvas, a terminal's scrollback).
+        (hiddenHost || minimized) && "hidden",
       )}
     >
       <WindowSkinChrome
@@ -150,9 +185,14 @@ export function FloatingWindow({
         title={title}
         state={win.state}
         focused={focused}
+        identity={identity}
         titlebarProps={{
           ...(bindDrag() as Record<string, unknown>),
           onKeyDown,
+          // Double-clicking the bar itself, not one of its buttons, maximizes or restores.
+          onDoubleClick: (e) => {
+            if (!(e.target as Element).closest("button")) toggleMaximize();
+          },
           tabIndex: 0,
           role: "toolbar",
           "aria-label": `${title} title bar`,
@@ -162,12 +202,13 @@ export function FloatingWindow({
         }}
         onMinimize={minimize}
         onToggleMaximize={toggleMaximize}
+        onToggleSnap={toggleSnap}
         onClose={close}
       />
 
       {pip && !hiddenHost && <WindowPipPlaceholder pip={pip} minimized={minimized} />}
 
-      {!maximized && !minimized && (
+      {floating && (
         <WindowResizeHandles bind={(handle) => bindResize(handle) as Record<string, unknown>} />
       )}
 

package/src/web/components/floating-window/open-tab-in-pip.ts

@@ -8,6 +8,7 @@
  */
 
 import { usePanelStore } from "@/stores/panel-store";
+import { NON_PIP_TAB_TYPES } from "@/stores/panel-utils";
 import { focusPipDocument } from "./pip/pip-focus-target";
 import { attachPipHost } from "./pip/pip-host";
 import { TITLEBAR_HEIGHT } from "./window-chrome-contract";
@@ -35,6 +36,8 @@ function discard(windowId: string): void {
  * before it — the one await inside is a React commit, which leaves the activation valid.
  */
 export async function openTabInPip(tabId: string, panelId: string): Promise<OpenTabInPipResult> {
+  const tab = usePanelStore.getState().panels[panelId]?.tabs.find((t) => t.id === tabId);
+  if (tab && NON_PIP_TAB_TYPES.has(tab.type)) return "cancelled";
   const windowId = usePanelStore.getState().popOutTab(tabId, panelId);
   if (!windowId) return "window-cap";
   markPipOnlyWindow(windowId);

package/src/web/components/floating-window/use-window-drag.ts

@@ -1,7 +1,13 @@
-/** Titlebar drag: moves a window, committing to the store only when the gesture ends. */
+/**
+ * Titlebar drag: moves a window, committing to the store only when the gesture ends.
+ *
+ * Dragging a window's right edge past the layer's right edge (see `wantsSnap`) arms a snap:
+ * the layer shows where the window would go, and releasing there snaps it instead of
+ * committing the move.
+ */
 
 import { useDrag } from "@use-gesture/react";
-import { clampRect, type Rect } from "./window-geometry";
+import { clampRect, wantsSnap, type Rect } from "./window-geometry";
 import {
   gestureAbandoned,
   gestureDisplacement,
@@ -9,7 +15,14 @@ import {
   type WindowGestureContext,
 } from "./use-window-gesture-context";
 
-export function useWindowDrag(ctx: WindowGestureContext) {
+export interface WindowDragContext extends WindowGestureContext {
+  /** Told whether releasing now would snap; called only when the answer changes. */
+  onSnapPreview?: (armed: boolean) => void;
+  /** Released while armed: the window snaps and the move is not committed. */
+  onSnap?: () => void;
+}
+
+export function useWindowDrag(ctx: WindowDragContext) {
   return useDrag(
     ({ xy, initial, first, last, memo }) => {
       if (gestureAbandoned(first, memo)) {
@@ -18,15 +31,28 @@ export function useWindowDrag(ctx: WindowGestureContext) {
       }
       // The rect is captured once per gesture: the displacement is cumulative from the
       // start, so re-reading a rect that we ourselves are mutating would compound it.
-      const base: Rect = first ? { ...ctx.getRect() } : (memo as Rect);
+      const state = first ? { base: { ...ctx.getRect() }, armed: false } : (memo as { base: Rect; armed: boolean });
+      const { base } = state;
       if (first) ctx.onGestureActive(true);
 
       const { dx, dy } = gestureDisplacement(xy, initial, ctx.getScale());
-      const next = clampRect({ ...base, x: base.x + dx, y: base.y + dy }, ctx.getBounds());
-      ctx.onChange(next, last);
+      const moved = { ...base, x: base.x + dx, y: base.y + dy };
+      const bounds = ctx.getBounds();
+      const armed = Boolean(ctx.onSnap) && wantsSnap(moved, base, bounds);
+      if (armed !== state.armed) {
+        state.armed = armed;
+        ctx.onSnapPreview?.(armed);
+      }
+
+      if (last && armed) {
+        ctx.onSnapPreview?.(false);
+        ctx.onSnap?.();
+      } else {
+        ctx.onChange(clampRect(moved, bounds), last);
+      }
 
       if (last) ctx.onGestureActive(false);
-      return base;
+      return state;
     },
     { ...WINDOW_DRAG_CONFIG, enabled: !ctx.disabled },
   );

package/src/web/components/floating-window/use-window-meta.ts

@@ -0,0 +1,138 @@
+/**
+ * What a window shows besides its title — glyph, colour, subtitle, "working" — for both its
+ * titlebar and its chip in the status bar's dock, so the two can never disagree.
+ *
+ * A tab-host window is described by the tab inside it rather than by the kind: a detached
+ * terminal is a terminal, a design window is that design. Its title is the tab's live title
+ * too, because the one captured in the payload at pop-out time goes stale (a design renamed,
+ * a chat that acquired a name).
+ */
+
+import type { ElementType } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { Activity, FolderOpen, Monitor, ScrollText, Settings, Users } from "@/lib/icons";
+import { getTabTypeIcon } from "@/lib/tab-type-icons";
+import { tabSessionId } from "@/lib/tab-session-id";
+import { usePanelStore } from "@/stores/panel-store";
+import { useStreamingStore } from "@/stores/streaming-store";
+import { NON_PIP_TAB_TYPES, windowPanelId } from "@/stores/panel-utils";
+import type { Tab, TabType } from "@/stores/tab-store";
+import type { WindowChromeIdentity } from "./window-chrome-contract";
+import { windowTitle } from "./window-content-registry";
+import type { WindowKind, WindowRuntimeState } from "./window-store-types";
+
+export interface WindowMeta extends WindowChromeIdentity {
+  /** The hosted tab's live title, when there is one; the caller falls back to `windowTitle`. */
+  title?: string;
+  /** What kind of window this is, in words: the dock list's second line. */
+  kindLabel: string;
+  /** A design: its tile is filled with its own colour rather than tinted. */
+  filled: boolean;
+}
+
+const tone = (token: string) => `var(--color-${token})`;
+
+/** The colours a design can be given; a design keeps the one its slug hashes to. */
+const DESIGN_TONES = ["primary", "accent-2", "success", "warning", "error", "info"].map(tone);
+
+/** A stable colour per design, so one design's chip looks the same in every session. */
+export function designTone(slug: string): string {
+  let hash = 0;
+  for (let i = 0; i < slug.length; i++) hash = (hash * 31 + slug.charCodeAt(i)) | 0;
+  return DESIGN_TONES[Math.abs(hash) % DESIGN_TONES.length]!;
+}
+
+const KIND_META: Record<Exclude<WindowKind, "tab-host">, { icon: ElementType; tone: string; label: string }> = {
+  explorer: { icon: FolderOpen, tone: tone("info"), label: "Explorer" },
+  "agent-session": { icon: Users, tone: tone("accent-2"), label: "Agent" },
+  "system-monitor": { icon: Activity, tone: tone("warning"), label: "System Monitor" },
+  "remote-desktop": { icon: Monitor, tone: tone("info"), label: "Remote Desktop" },
+  settings: { icon: Settings, tone: tone("text-3"), label: "Settings" },
+  logs: { icon: ScrollText, tone: tone("text-2"), label: "Logs" },
+};
+
+const TAB_LABELS: Partial<Record<TabType, string>> = {
+  terminal: "Terminal",
+  chat: "Chat",
+  editor: "Editor",
+  design: "Design",
+  "git-log": "Git graph",
+  "git-diff": "Diff",
+  "git-review": "Review changes",
+  "session-review": "Session review",
+  database: "Database",
+  sqlite: "Database",
+  "web-preview": "Preview",
+  android: "Android",
+  extension: "Extension",
+  "extension-webview": "Extension",
+};
+
+const TAB_TONES: Partial<Record<TabType, string>> = {
+  terminal: tone("success"),
+  chat: tone("accent-2"),
+  "git-log": tone("warning"),
+  "git-diff": tone("warning"),
+  "git-review": tone("warning"),
+};
+
+/** The tab a tab-host window shows: its panel's active tab, else its first. */
+function hostedTab(windowId: string): (s: ReturnType<typeof usePanelStore.getState>) => Tab | undefined {
+  return (s) => {
+    const panel = s.panels[windowPanelId(windowId)];
+    if (!panel) return undefined;
+    return panel.tabs.find((t) => t.id === panel.activeTabId) ?? panel.tabs[0];
+  };
+}
+
+/** Pure half of {@link useWindowMeta}: everything but the store reads. */
+export function describeWindow(kind: WindowKind, tab: Tab | undefined, busy: boolean): WindowMeta {
+  if (kind !== "tab-host") {
+    const meta = KIND_META[kind];
+    return { icon: meta.icon, tone: meta.tone, kindLabel: meta.label, busy: false, allowPip: true, filled: false };
+  }
+  if (!tab) return { icon: getTabTypeIcon("editor"), tone: tone("primary"), kindLabel: "Tab", busy: false, allowPip: true, filled: false };
+  const isDesign = tab.type === "design";
+  const kindLabel = TAB_LABELS[tab.type] ?? "Tab";
+  const project = tab.projectId ?? undefined;
+  const slug = typeof tab.metadata?.designSlug === "string" ? tab.metadata.designSlug : tab.title;
+  return {
+    title: tab.title,
+    icon: getTabTypeIcon(tab.type),
+    tone: isDesign ? designTone(slug) : (TAB_TONES[tab.type] ?? tone("primary")),
+    subtitle: project ? `${kindLabel} · ${project}` : kindLabel,
+    kindLabel,
+    busy,
+    allowPip: !NON_PIP_TAB_TYPES.has(tab.type),
+    filled: isDesign,
+  };
+}
+
+/**
+ * Each window's searchable words — its live title and its kind — for filtering a list of
+ * them in one place instead of row by row.
+ */
+export function useWindowSearchText(windows: Pick<WindowRuntimeState, "id" | "kind" | "payload">[]): string[] {
+  return usePanelStore(useShallow((s) => windows.map((w) => {
+    const meta = describeWindow(w.kind, w.kind === "tab-host" ? hostedTab(w.id)(s) : undefined, false);
+    return `${meta.title || windowTitle(w.kind, w.payload)} ${meta.kindLabel}`.toLowerCase();
+  })));
+}
+
+/**
+ * Which of `windows` have an AI turn running, for the dock's `+N` button: a busy window
+ * folded out of sight must still say so.
+ */
+export function useBusyWindowIds(windows: Pick<WindowRuntimeState, "id" | "kind">[]): Set<string> {
+  const sessionIds = usePanelStore(useShallow((s) =>
+    windows.map((w) => (w.kind === "tab-host" ? tabSessionId(hostedTab(w.id)(s)) ?? "" : ""))));
+  const running = useStreamingStore(useShallow((s) => sessionIds.map((sid) => (sid ? s.sessions.has(sid) : false))));
+  return new Set(windows.filter((_, i) => running[i]).map((w) => w.id));
+}
+
+export function useWindowMeta(win: Pick<WindowRuntimeState, "id" | "kind">): WindowMeta {
+  const tab = usePanelStore(win.kind === "tab-host" ? hostedTab(win.id) : () => undefined);
+  const sessionId = tabSessionId(tab);
+  const busy = useStreamingStore((s) => (sessionId ? s.sessions.has(sessionId) : false));
+  return describeWindow(win.kind, tab, busy);
+}