@kabmo-labs/kabmo 0.3.1 → 0.5.0

package/src/client/components/workspace/plugin-panel/catalog.tsx

@@ -0,0 +1,237 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The panel catalog: one list, two columns.
+ *
+ * The built-in views and the installed plugins travel the SAME path — one
+ * merged list, one enablement set, one entry shape — so the activity bars, the
+ * desktop panel stacks and the phone's tab strip cannot disagree about what
+ * exists or what it is called.
+ *
+ * Two axes are decided here and nowhere else:
+ *
+ * - **SIDE.** A built-in view is `right` by construction; a plugin panel is
+ *   `left` only while the user placed it there (`left-dock.ts`). A caller asks
+ *   for the column it draws (`usePanelCatalog('left')`), or for everything
+ *   (`usePanelCatalog('all')`, which is what the phone's drawer reads — a panel
+ *   placed on the left must stay reachable on a phone, which has one drawer).
+ * - **ORDER.** The right column keeps the user's dragged order
+ *   (`omp_right_panel_order`); the left column is ordered by the placement list
+ *   itself, because placing a panel there IS the arrangement.
+ *
+ * The left column also carries a view of its own — `sessions`, the session list
+ * that used to BE the column. It is a catalog entry like any other so the bar
+ * draws it with the same button, the same active state and the same visibility
+ * menu; it is never removable, because a chat with no way back to the session
+ * list is a dead end.
+ */
+
+import { lazy } from 'preact/compat';
+import type { ReactNode } from 'preact/compat';
+import { MessagesSquare } from 'lucide-preact';
+import { useMemo } from 'preact/hooks';
+import { usePanelRegistry, usePanelSlots } from '@/client/hooks/workspace/panel-registry';
+import { usePanelOrder } from '@/client/hooks/workspace/panel-order';
+import { useLeftDock } from '@/client/hooks/workspace/left-dock';
+import { PluginIdProvider } from '@kabmo-labs/kabmo-ui';
+import { rightPanelOf } from '@/client/lib/plugins/slots';
+import { pluginEnablementKey, pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
+import { SESSIONS_VIEW_ID, panelSideOf, type PanelSide } from '@/shared/lib/workspace/left-dock';
+import { resolvePluginPanelWidths } from '@/shared/lib/workspace/panel-widths';
+import { DEFAULT_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH } from '@/shared/lib/workspace/sidebar-width';
+import {
+  enabledBuiltinPanels,
+  type BuiltinPanelView,
+  type PanelBodyProps,
+} from '@/client/components/workspace/panels/builtin';
+
+/** `left`, `right`, or both — `all` is the phone's drawer and the settings pane. */
+export type PanelCatalogSide = PanelSide | 'all';
+
+/** One panel in the merged catalog — a built-in view, the dock's view, or a plugin. */
+export interface ResolvedPanel {
+  /** The panel id: a bare built-in view id, `sessions`, or `plugin:<pluginId>`. */
+  id: string;
+  /** The column it is drawn in. */
+  side: PanelSide;
+  /** The activity bar's tooltip. */
+  title: string;
+  /** The phone's chip label. */
+  label: string;
+  /** A built-in view's own icon; a plugin draws its mark instead. */
+  icon?: ReactNode;
+  /** A plugin's icon URL, when its manifest declares one. */
+  iconUrl?: string;
+  /** The plugin's display name; empty for a built-in view. */
+  name: string;
+  builtin: boolean;
+  requiresWorkspace: boolean;
+  liveWhileHidden: boolean;
+  minWidth: number;
+  /** The px width the view opens at before the group's area is measured. */
+  defaultWidth: number;
+  defaultFraction: number;
+  /** Render the body. One call, so every layout draws a view the same way. */
+  render: (props: PanelBodyProps) => ReactNode;
+}
+
+const SessionsView = lazy(() =>
+  import('@/client/components/layout/session-sidebar/SessionsView').then((m) => ({ default: m.SessionsView })),
+);
+
+/** The dock's own view. Never removable, never placed anywhere else. */
+const SESSIONS_PANEL: ResolvedPanel = {
+  id: SESSIONS_VIEW_ID,
+  side: 'left',
+  title: 'Sessions',
+  label: 'Sessions',
+  icon: <MessagesSquare size={16} />,
+  name: '',
+  builtin: true,
+  // The list is the workspace's own navigation: it reads folders and sessions,
+  // not the working tree of the active folder.
+  requiresWorkspace: false,
+  liveWhileHidden: false,
+  minWidth: MIN_LEFT_PANEL_WIDTH,
+  defaultWidth: DEFAULT_LEFT_PANEL_WIDTH,
+  // The left column is px-sized (a session list does not get more useful on a
+  // wider monitor), so the fraction is only what a phone's drawer would use.
+  defaultFraction: 0.25,
+  // The column's title row and footer are NOT this view's: `LeftColumn` draws
+  // them, so the rail and the list sit under ONE title and above ONE strip.
+  render: (props) => <SessionsView className={props.className} appSettings={props.appSettings} />,
+};
+
+/** A built-in view's catalog entry, with its renderer closed over its component. */
+function builtinEntry(view: BuiltinPanelView): ResolvedPanel {
+  const View = view.Component;
+  return {
+    id: view.id,
+    // A built-in view is a RIGHT-column view by construction: its floor, width
+    // slot and workspace gate were all declared for that column.
+    side: 'right',
+    title: view.title,
+    label: view.label,
+    icon: view.icon,
+    name: '',
+    builtin: true,
+    requiresWorkspace: view.requiresWorkspace,
+    liveWhileHidden: view.liveWhileHidden === true,
+    minWidth: view.minWidth,
+    defaultWidth: view.defaultWidth,
+    defaultFraction: view.defaultFraction,
+    render: (props) => <View {...props} />,
+  };
+}
+
+/**
+ * The panel catalog the activity bars and the panel stacks render.
+ *
+ * `side` selects the column. `all` is deliberately a first-class value rather
+ * than "no filter": the phone's drawer and the settings pane both need every
+ * panel in one list, and a caller that forgot to pass a side would otherwise get
+ * a silently halved catalog.
+ */
+export function usePanelCatalog(side: PanelCatalogSide = 'right'): ResolvedPanel[] {
+  const { panels, disabledPanels } = usePanelRegistry();
+  const { slots } = usePanelSlots();
+  const { apply } = usePanelOrder();
+  const dock = useLeftDock();
+
+  return useMemo(() => {
+    const out: ResolvedPanel[] = [];
+
+    if (side !== 'left') {
+      for (const view of enabledBuiltinPanels(disabledPanels)) out.push(builtinEntry(view));
+    }
+
+    const placed = new Map(dock.panels.map((id, index) => [id, index]));
+    const left: ResolvedPanel[] = [];
+
+    for (const panel of panels) {
+      const entry = slots.get(panel.pluginId);
+      const Component = entry ? rightPanelOf(entry) : undefined;
+      if (!Component) continue;
+      const key = pluginPanelKey(panel.pluginId, 'rightPanel');
+      if (disabledPanels.includes(pluginEnablementKey(panel.pluginId))) continue;
+      const size = entry?.sizing.rightPanel;
+      const widths = resolvePluginPanelWidths({ ...size });
+      const resolved: ResolvedPanel = {
+        id: key,
+        // Where the USER put it, keyed per PANEL INSTANCE. A plugin that also
+        // contributes a takeover has a second, independent key, so placing this
+        // one on the left never moves that one.
+        side: panelSideOf(key, dock),
+        title: `${entry?.titles.rightPanel ?? panel.name} — ${panel.name}`,
+        label: entry?.titles.rightPanel ?? panel.name,
+        name: panel.name,
+        builtin: false,
+        // A plugin reads whatever the host published and draws what it can, so
+        // gating it on a workspace folder would hide a panel that works.
+        requiresWorkspace: false,
+        liveWhileHidden: false,
+        minWidth: widths.min,
+        defaultWidth: widths.px,
+        defaultFraction: widths.fraction,
+        ...(panel.iconUrl ? { iconUrl: panel.iconUrl } : {}),
+        // Wrapped so the kit's participant hooks resolve THIS plugin's id while
+        // its panel renders — the scope is what `useRpc`/`useRealtime` read.
+        render: (props) => (
+          <PluginIdProvider pluginId={panel.pluginId}>
+            <Component sessionId={props.sessionId ?? null} workspacePath={null} />
+          </PluginIdProvider>
+        ),
+      };
+      // `editor` is not a column this catalog draws: the takeover has its own
+      // list (`usePanelSlotPlugins`) and its own rail in the editor column.
+      if (resolved.side === 'editor') continue;
+      if (resolved.side === 'left') left.push(resolved);
+      else if (side !== 'left') out.push(resolved);
+    }
+
+    if (side !== 'right') {
+      // The dock's own view first, then the placed plugins in PLACEMENT order:
+      // on the left, putting a panel there IS the arrangement, so the right
+      // column's dragged order would be a second answer to the same question.
+      left.sort((a, b) => (placed.get(a.id) ?? 0) - (placed.get(b.id) ?? 0));
+      out.unshift(SESSIONS_PANEL, ...left);
+    }
+
+    return side === 'left' ? out : apply(out);
+  }, [panels, slots, disabledPanels, apply, dock, side]);
+}
+
+/** Whether a panel id names the dock's own session list. */
+export function isSessionsPanel(id: string): boolean {
+  return id === SESSIONS_VIEW_ID;
+}
+
+/**
+ * Which view the dock actually shows, given the stored selection.
+ *
+ * Three answers, and they are different states a blank column would conflate:
+ *
+ * - the stored id is a LEFT panel → draw it;
+ * - the stored id names a panel that still exists but lives on the RIGHT (the
+ *   user moved it back, or it was never placed here) → the dock's own view,
+ *   because that is not an error;
+ * - the stored id names nothing at all (uninstalled, switched off) → the id is
+ *   returned as-is so the dock can say WHY, which is what the panel position's
+ *   notice exists for.
+ */
+export function useLeftDockView(stored: string, railEnabled: boolean): string {
+  const left = usePanelCatalog('left');
+  const all = usePanelCatalog('all');
+  return useMemo(() => {
+    // With no rail there is no control that switches views, so the dock shows
+    // its own view: leaving a plugin panel up would strand the user there with
+    // no way back to the session list.
+    if (!railEnabled) return SESSIONS_VIEW_ID;
+    if (left.some((panel) => panel.id === stored)) return stored;
+    if (all.some((panel) => panel.id === stored)) return SESSIONS_VIEW_ID;
+    return stored;
+  }, [left, all, stored, railEnabled]);
+}

package/src/client/components/workspace/plugin-panel/resolve.tsx

@@ -1,18 +1,13 @@
 import { useMemo } from 'preact/hooks';
-import type { ComponentType, ReactNode } from 'preact/compat';
+import type { ComponentType } from 'preact/compat';
 import type { RightPanelProps } from '@kabmo-labs/kabmo-sdk/app';
 import { usePanelRegistry, usePanelSlots } from '@/client/hooks/workspace/panel-registry';
-import { usePanelOrder } from '@/client/hooks/workspace/panel-order';
-import { pluginIdOf, pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
-import { resolvePluginPanelWidths } from '@/shared/lib/workspace/panel-widths';
-import { PluginIdProvider } from '@kabmo-labs/kabmo-ui';
+import { pluginEnablementKey, pluginIdOf, pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
+import { panelSideOf } from '@/shared/lib/workspace/left-dock';
+import { useLeftDock } from '@/client/hooks/workspace/left-dock';
 import { panelOf, rightPanelOf } from '@/client/lib/plugins/slots';
 import { PluginError } from '@/client/components/workspace/plugin-panel/Error';
-import {
-  enabledBuiltinPanels,
-  type BuiltinPanelView,
-  type PanelBodyProps,
-} from '@/client/components/workspace/panels/builtin';
+import type { PanelBodyProps } from '@/client/components/workspace/panels/builtin';
 
 export type { PanelBodyProps };
 
@@ -60,7 +55,7 @@ export function usePluginPanels(activePanel: string): PluginPanels {
       if (!Component) continue;
       const size = entry?.sizing.rightPanel;
       out.push({
-        panelKey: pluginPanelKey(panel.pluginId),
+        panelKey: pluginPanelKey(panel.pluginId, 'rightPanel'),
         pluginId: panel.pluginId,
         name: panel.name,
         title: entry?.titles.rightPanel ?? panel.name,
@@ -114,8 +109,9 @@ export function PluginPanelBody({ panelKey }: { panelKey: string }) {
  * it renders, so nothing here assumes what it contains.
  */
 export function usePanelSlotPlugins(): ResolvedPluginPanel[] {
-  const { panels } = usePanelRegistry();
+  const { panels, disabledPanels } = usePanelRegistry();
   const { slots } = usePanelSlots();
+  const dock = useLeftDock();
 
   return useMemo(() => {
     const out: ResolvedPluginPanel[] = [];
@@ -123,9 +119,17 @@ export function usePanelSlotPlugins(): ResolvedPluginPanel[] {
       const entry = slots.get(panel.pluginId);
       const Component = entry ? panelOf(entry) : undefined;
       if (!Component) continue;
+      // Enablement is per PLUGIN, so a switched-off plugin contributes nothing
+      // to any column — the same rule the right-panel catalog uses.
+      if (disabledPanels.includes(pluginEnablementKey(panel.pluginId))) continue;
+      const key = pluginPanelKey(panel.pluginId, 'panel');
+      // The column is one destination, and a `panel` slot only rides it. A row
+      // in the dock's placement list naming this instance is therefore ignored
+      // by `panelSideOf`'s slot rule rather than honoured.
+      if (panelSideOf(key, dock) !== 'editor') continue;
       const size = entry?.sizing.panel;
       out.push({
-        panelKey: pluginPanelKey(panel.pluginId),
+        panelKey: key,
         pluginId: panel.pluginId,
         name: panel.name,
         title: entry?.titles.panel ?? panel.name,
@@ -136,7 +140,7 @@ export function usePanelSlotPlugins(): ResolvedPluginPanel[] {
       });
     }
     return out;
-  }, [panels, slots]);
+  }, [panels, slots, disabledPanels, dock]);
 }
 
 /**
@@ -153,111 +157,4 @@ export function useActiveEditorPanel(activeKey: string | null): ResolvedPluginPa
   return activeKey ? plugins.find((panel) => panel.panelKey === activeKey) ?? null : null;
 }
 
-/** A built-in view's catalog entry, with its renderer closed over its component. */
-function builtinEntry(view: BuiltinPanelView): ResolvedPanel {
-  const View = view.Component;
-  return {
-    id: view.id,
-    title: view.title,
-    label: view.label,
-    icon: view.icon,
-    name: '',
-    builtin: true,
-    requiresWorkspace: view.requiresWorkspace,
-    liveWhileHidden: view.liveWhileHidden === true,
-    minWidth: view.minWidth,
-    defaultWidth: view.defaultWidth,
-    defaultFraction: view.defaultFraction,
-    render: (props) => <View {...props} />,
-  };
-}
-
-/** One panel in the merged catalog — a built-in view or an installed plugin. */
-export interface ResolvedPanel {
-  /** The panel id: a bare built-in view id, or `plugin:<pluginId>`. */
-  id: string;
-  /** The activity bar's tooltip. */
-  title: string;
-  /** The phone's chip label. */
-  label: string;
-  /** A built-in view's own icon; a plugin draws its mark instead. */
-  icon?: ReactNode;
-  /** A plugin's icon URL, when its manifest declares one. */
-  iconUrl?: string;
-  /** The plugin's display name; empty for a built-in view. */
-  name: string;
-  builtin: boolean;
-  requiresWorkspace: boolean;
-  liveWhileHidden: boolean;
-  minWidth: number;
-  /** The px width the view opens at before the group's area is measured. */
-  defaultWidth: number;
-  defaultFraction: number;
-  /** Render the body. One call, so both layouts draw a view the same way. */
-  render: (props: PanelBodyProps) => ReactNode;
-}
-
-/**
- * The panel catalog the activity bar and the panel stack render.
- *
- * ONE list, two sources: the built-in views (in `RIGHT_PANEL_TYPES` order) and
- * the installed plugins (in the registry's order). Enablement is ONE set of ids
- * — a built-in view is off by its bare id and a plugin by `plugin:<id>` — so a
- * view the user switched off disappears from the bar, the phone's strip and the
- * right-click menu alike, whichever kind it is.
- *
- * The BASE order is built-ins then plugins, which is what makes the bar stable
- * across reloads rather than following whichever import finished first; the
- * user's own order (`usePanelOrder`) is laid over it, so a dragged button stays
- * where it was put and a panel the order does not name keeps its base position.
- * Applied HERE rather than in the bar, because the desktop stack and the phone's
- * tab strip render from this same list — ordering at one call site would leave
- * the other two drawing the base order.
- */
-export function usePanelCatalog(): ResolvedPanel[] {
-  const { panels, disabledPanels } = usePanelRegistry();
-  const { slots } = usePanelSlots();
-  const { apply } = usePanelOrder();
-
-  return useMemo(() => {
-    const out: ResolvedPanel[] = [];
-
-    for (const view of enabledBuiltinPanels(disabledPanels)) {
-      out.push(builtinEntry(view));
-    }
-
-    for (const panel of panels) {
-      const entry = slots.get(panel.pluginId);
-      const Component = entry ? rightPanelOf(entry) : undefined;
-      if (!Component) continue;
-      const key = pluginPanelKey(panel.pluginId);
-      if (disabledPanels.includes(key)) continue;
-      const size = entry?.sizing.rightPanel;
-      const widths = resolvePluginPanelWidths({ ...size });
-      out.push({
-        id: key,
-        title: `${entry?.titles.rightPanel ?? panel.name} — ${panel.name}`,
-        label: entry?.titles.rightPanel ?? panel.name,
-        name: panel.name,
-        builtin: false,
-        // A plugin reads whatever the host published and draws what it can, so
-        // gating it on a workspace folder would hide a panel that works.
-        requiresWorkspace: false,
-        liveWhileHidden: false,
-        minWidth: widths.min,
-        defaultWidth: widths.px,
-        defaultFraction: widths.fraction,
-        ...(panel.iconUrl ? { iconUrl: panel.iconUrl } : {}),
-        // Wrapped so the kit's participant hooks resolve THIS plugin's id while
-        // its panel renders — the scope is what `useRpc`/`useRealtime` read.
-        render: (props) => (
-          <PluginIdProvider pluginId={panel.pluginId}>
-            <Component sessionId={props.sessionId ?? null} workspacePath={null} />
-          </PluginIdProvider>
-        ),
-      });
-    }
-
-    return apply(out);
-  }, [panels, slots, disabledPanels, apply]);
-}
+export { usePanelCatalog, isSessionsPanel, type PanelCatalogSide, type ResolvedPanel } from '@/client/components/workspace/plugin-panel/catalog';

package/src/client/hooks/chat/composer/compact.ts

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone composer's "give the height back" state, and the tap that ends it.
+ *
+ * A reader scrolled back through the transcript with an empty draft gets the
+ * conversation's height back — the textarea is REMOVED rather than shrunk (a
+ * shrunk one keeps a focusable element with no usable pixels and a
+ * sentence-long placeholder clipped mid-word). `AttachmentToolbar` then carries
+ * the "Type here" target that brings the box back.
+ *
+ * Two properties are load-bearing and each was a bug first:
+ *
+ *  - **The reopen flag is not derived from focus.** Re-opening removes the
+ *    button that was tapped, so the browser emits a `focusout` for it in the
+ *    same frame the textarea is being inserted — measured order:
+ *    `focusin:BUTTON, focusout:BUTTON, ta-added, ta-removed`. Any flag derived
+ *    from focus collapses the composer it just opened.
+ *  - **The decision is made on POINTERDOWN, not click.** Pressing the target
+ *    fires `focusin`, which expands the composer, which removes the button the
+ *    finger is still on — so the pointerup lands on a different target and the
+ *    browser emits no click at all (measured: `pd:BUTTON` with no `click:`
+ *    line after it).
+ *
+ * Only reaching for something OUTSIDE the card takes the composer back to
+ * compact: the reader asked for the box, and nothing the focus system does on
+ * the way to it may take that back.
+ */
+
+import { useEffect, useState } from 'preact/hooks';
+import type { RefObject } from 'preact/compat';
+import type { Attachment } from '@/shared/types';
+
+export interface ComposerCompactInput {
+  /** The composer's card — the element the tap handler is bound to. */
+  cardRef: RefObject<HTMLDivElement>;
+  /** Only a phone gives its height back; a desktop sits beside the chat. */
+  isMobile: boolean;
+  /** The timeline says the reader is back through the transcript. */
+  shrinkWhileReading: boolean;
+  /** Anything inside the card has focus. */
+  composerFocused: boolean;
+  setComposerFocused: (focused: boolean) => void;
+  value: string;
+  attachments: Attachment[];
+}
+
+export interface ComposerCompact {
+  /** True when the textarea must not be rendered. */
+  compact: boolean;
+  /** The reader tapped the card to get the box back. */
+  reopen: () => void;
+  /** The card's `onPointerDown`, for every state (focuses the draft when open). */
+  onCardPointerDown: (event: PointerEvent) => void;
+}
+
+/** Controls that own their own press — a tap on one must not re-open the card. */
+const OWN_PRESS = 'button, input, textarea, a, label, [role="button"]';
+
+export function useComposerCompact({
+  cardRef,
+  isMobile,
+  shrinkWhileReading,
+  composerFocused,
+  setComposerFocused,
+  value,
+  attachments,
+}: ComposerCompactInput): ComposerCompact {
+  const [reopenRequested, setReopenRequested] = useState(false);
+
+  // A draft means the reader is writing, and a focused composer is the same
+  // rule from the other side: the tap that re-opens it must not be undone by
+  // the scroll position it was tapped from.
+  const compact = isMobile
+    && shrinkWhileReading
+    && !composerFocused
+    && !reopenRequested
+    && !value.trim()
+    && attachments.length === 0;
+
+  // The tap ends with the caret where the reader aimed it. Runs on the commit
+  // that put the textarea back in the DOM, which is why it cannot live in the
+  // press handler. The flag is NOT cleared here — see the module note.
+  useEffect(() => {
+    if (!reopenRequested) return;
+    cardRef.current?.querySelector('textarea')?.focus();
+  }, [reopenRequested, cardRef]);
+
+  useEffect(() => {
+    if (!reopenRequested) return;
+    const onOutside = (event: Event) => {
+      if (cardRef.current?.contains(event.target as Node)) return;
+      setReopenRequested(false);
+      setComposerFocused(false);
+    };
+    document.addEventListener('pointerdown', onOutside);
+    return () => document.removeEventListener('pointerdown', onOutside);
+  }, [reopenRequested, cardRef, setComposerFocused]);
+
+  const onCardPointerDown = (event: PointerEvent) => {
+    const target = event.target as HTMLElement;
+    if (target.closest(OWN_PRESS)) {
+      // The "Type here" target is the ONE control that must open the box; it is
+      // marked rather than special-cased by its text.
+      if (target.closest('[data-composer-reopen]')) setReopenRequested(true);
+      return;
+    }
+    if (compact) {
+      setReopenRequested(true);
+      return;
+    }
+    cardRef.current?.querySelector('textarea')?.focus();
+  };
+
+  return { compact, reopen: () => setReopenRequested(true), onCardPointerDown };
+}

package/src/client/hooks/chat/omp/pending-rows.ts

@@ -64,6 +64,10 @@ export function withPendingRows(
       // newest and reshuffled LATEST_SESSION ordering mid-run.
       created_at: stamp,
       updated_at: stamp,
+      // The row's own reason for existing past the click: its prompt is held.
+      ...(entry.waiting
+        ? { waitingFor: { waitId: entry.waiting.waitId, sessionId: entry.waiting.dependsOn, title: entry.waiting.dependsOnTitle } }
+        : {}),
     };
     result = result.map((folder) => (
       folder.id === target.id

package/src/client/hooks/chat/omp/pending-sessions.ts

@@ -57,6 +57,19 @@ export interface PendingSessionEntry {
   /** Epoch ms a prompt was dispatched for this chat, or null while it is a
    *  draft the user has not sent in. */
   sentAt: number | null;
+  /**
+   * Set while this chat's prompt is HELD for another session to finish.
+   *
+   * The row is drawn exactly as it was before the send — same id, same folder —
+   * because the session does not exist yet: what the user asked for is that the
+   * row stays put and says what it is waiting on. `waitId` is the server row
+   * that owns the wait, so cancelling from the row reaches it.
+   */
+  waiting?: {
+    waitId: string;
+    dependsOn: string;
+    dependsOnTitle: string | null;
+  };
 }
 
 /** How long a SENT entry may outlive its switch with no real row behind it.
@@ -90,11 +103,15 @@ function createdAtFor(id: string): number {
 /** Write an entry, emitting only when it actually moved. */
 function upsert(entry: PendingSessionEntry): void {
   const current = entries.get(entry.id);
+  const sameWait = current?.waiting?.waitId === entry.waiting?.waitId
+    && current?.waiting?.dependsOn === entry.waiting?.dependsOn
+    && current?.waiting?.dependsOnTitle === entry.waiting?.dependsOnTitle;
   if (
     current
     && current.folderId === entry.folderId
     && current.createdAt === entry.createdAt
     && current.sentAt === entry.sentAt
+    && sameWait
   ) {
     return;
   }
@@ -160,6 +177,8 @@ export function adoptPendingSession(
     folderId: from?.folderId ?? folderId ?? null,
     createdAt: from?.createdAt ?? createdAtFor(toId),
     sentAt: from?.sentAt ?? Date.now(),
+    // The wait ended when the spawn answered: the new row is a real session
+    // from this moment, and a cue left on it would say it is still held.
   });
 }
 
@@ -216,6 +235,28 @@ export function hydratePendingSession(
   upsert({ id, folderId, createdAt: createdAtFor(id), sentAt: running ? Date.now() : null });
 }
 
+/**
+ * Rewrite one entry through the store's own write path.
+ *
+ * Exported for the WAITING half (`pending-waiting.ts`): the field is a normal
+ * part of the entry, so it must go through the same no-op check and the same
+ * emit rather than mutating the map behind the store's back.
+ */
+export function patchPendingEntry(
+  id: string,
+  update: (entry: PendingSessionEntry) => PendingSessionEntry | null,
+): void {
+  const entry = entries.get(id);
+  if (!entry) return;
+  const next = update(entry);
+  if (next === null) {
+    entries.delete(id);
+    emit();
+    return;
+  }
+  upsert(next);
+}
+
 /** Drop an entry (a released draft, a session that went away). */
 export function releasePendingSession(id: string): void {
   if (entries.delete(id)) emit();
@@ -252,6 +293,12 @@ export function reconcilePendingSessions(input: {
     // A live run holds its row wherever the user navigates: the spinner and
     // the row it belongs to are the same fact.
     if (input.running.has(id)) continue;
+    // A HELD prompt holds its row for as long as the wait lasts. The settle
+    // window below exists because a sent prompt's transcript is seconds away;
+    // a held prompt has no transcript at all yet, so expiring it after 30s
+    // would delete the very row the user is waiting on. The server's own list
+    // is what ends this — the dispatch watcher clears the cue.
+    if (entry.waiting) continue;
     if (entry.sentAt !== null) {
       if (now - entry.sentAt > PENDING_SETTLE_MS) {
         entries.delete(id);