ompchamber 1.0.0 → 1.1.0

package/src/client/components/layout/desktop-layout/resizer/index.tsx

@@ -1,8 +1,9 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'preact/compat';
 import { useRef as useRefBase } from 'preact/hooks';
 import type { ComponentChildren, RefObject } from 'preact';
-import type { CSSProperties, TargetedPointerEvent } from 'preact';
-import { clamp, toPx, transfer } from '@/client/components/layout/desktop-layout/resizer/utils';
+import type { CSSProperties } from 'preact';
+import { clamp, toPx } from '@/client/components/layout/desktop-layout/resizer/utils';
+import { useSeparatorDrag } from '@/client/components/layout/desktop-layout/resizer/separator-drag';
 
 /**
  * Hand-rolled resizable panel group (the Preact-native replacement for
@@ -15,6 +16,10 @@ import { clamp, toPx, transfer } from '@/client/components/layout/desktop-layout
  * clamped by both neighbors' min/max constraints, and commits once per drag
  * through `onLayoutChanged(_, { isUserInteraction: true })`.
  *
+ * Sizes are pixels here. A caller that stores a width as a share of the group's
+ * area (see `panel-widths.ts`) resolves it to px before passing it in — the
+ * resizer has no percentage path and should not grow one.
+ *
  * The filler's `minSize` is a real CSS floor, which is what makes a shrinking
  * window push the resizable panels toward their own floors instead of
  * collapsing the filler to nothing (a zero flex basis absorbs no negative free
@@ -39,14 +44,9 @@ export interface PanelImperativeHandle {
   getSize: () => { inPixels: number } | null;
 }
 
-export interface GroupImperativeHandle {
-  /** Batch resize of the named panels, in pixels. */
-  setLayout: (layout: Record<string, number>) => void;
-}
-
 export type LayoutChangedHandler = (layout: Record<string, number>, meta: LayoutMeta) => void;
 
-interface PanelState {
+export interface PanelState {
   id: string;
   isFiller: boolean;
   minSize: number;
@@ -69,7 +69,8 @@ const GroupContext = createContext<GroupContextValue | null>(null);
 export function Group(props: {
   orientation: GroupOrientation;
   id?: string;
-  groupRef?: RefObject<GroupImperativeHandle | null>;
+  /** The group's own element, for measuring the area its panels share. */
+  groupRef?: RefObject<HTMLDivElement>;
   onLayoutChanged?: LayoutChangedHandler;
   className?: string;
   children: ComponentChildren;
@@ -86,35 +87,10 @@ export function Group(props: {
     [orientation],
   );
 
-  const snapshot = () => {
-    const layout: Record<string, number> = {};
-    for (const [pid, state] of panelsRef.current) {
-      const px = state.getSize();
-      if (px != null) layout[pid] = px;
-    }
-    return layout;
-  };
-
-  useEffect(() => {
-    if (!groupRef) return;
-    groupRef.current = {
-      setLayout: (layout) => {
-        for (const [pid, px] of Object.entries(layout)) {
-          const state = panelsRef.current.get(pid);
-          if (!state || state.isFiller || typeof px !== 'number') continue;
-          state.setSize(clamp(px, state.minSize, state.maxSize));
-        }
-        changedRef.current?.(snapshot(), { isUserInteraction: false });
-      },
-    };
-    return () => {
-      groupRef.current = null;
-    };
-  }, [groupRef]);
-
   return (
     <GroupContext.Provider value={ctx}>
       <div
+        ref={groupRef}
         data-panel-group=""
         data-panel-group-id={id}
         className={className}
@@ -133,14 +109,19 @@ export function Panel(props: {
   defaultSize?: number | string;
   minSize?: number | string;
   maxSize?: number | string;
-  collapsible?: boolean;
+  /**
+   * Render at zero width without unmounting. The panel keeps its size state, so
+   * reopening restores the remembered width and the width transition animates
+   * the movement instead of the content popping in.
+   */
+  collapsed?: boolean;
   /** This panel absorbs the remaining space instead of holding its own px. */
   filler?: boolean;
   className?: string;
   style?: CSSProperties;
   children: ComponentChildren;
 }) {
-  const { id, panelRef, defaultSize, minSize = 0, maxSize, filler = false, className, style, children } = props;
+  const { id, panelRef, defaultSize, minSize = 0, maxSize, collapsed = false, filler = false, className, style, children } = props;
   const group = useContext(GroupContext);
   if (!group) {
     throw new Error(`<Panel id="${id}"> must be rendered inside a <Group>`);
@@ -184,6 +165,21 @@ export function Panel(props: {
     }
   });
 
+  // Adopt a changed `defaultSize`. This is what restores a panel after its
+  // owner swaps it — a right-panel view switch, an editor source↔diff switch —
+  // and after a resize recomputes it, without an imperative push from the
+  // owner. A drag does not fight it: the owner only produces a new
+  // `defaultSize` once the drag commits, and that value is the size the drag
+  // already applied.
+  const lastDefaultPxRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (filler || defaultSize == null) return;
+    const nextPx = toPx(defaultSize, minPx);
+    if (lastDefaultPxRef.current === nextPx) return;
+    lastDefaultPxRef.current = nextPx;
+    setSizePx(clamp(nextPx, minPx, maxPx));
+  }, [defaultSize, filler, minPx, maxPx]);
+
   useEffect(() => {
     if (!panelRef) return;
     panelRef.current = {
@@ -212,17 +208,29 @@ export function Panel(props: {
       }
     : {
         flex: '0 1 auto',
-        width: orientation === 'horizontal' ? sizePx ?? undefined : undefined,
-        height: orientation === 'horizontal' ? undefined : sizePx ?? undefined,
-        minWidth: orientation === 'horizontal' ? minPx : undefined,
-        minHeight: orientation === 'horizontal' ? undefined : minPx,
+        width: orientation === 'horizontal' ? (collapsed ? 0 : sizePx ?? undefined) : undefined,
+        height: orientation === 'horizontal' ? undefined : collapsed ? 0 : sizePx ?? undefined,
+        minWidth: orientation === 'horizontal' ? (collapsed ? 0 : minPx) : undefined,
+        minHeight: orientation === 'horizontal' ? undefined : collapsed ? 0 : minPx,
         maxWidth: maxSize != null ? maxPx : undefined,
+        // A drag re-applies the real width at most every RESIZE_FOLLOW_INTERVAL_MS
+        // (see useSeparatorDrag), and this transition is what makes those steps
+        // read as one movement. It also carries a panel to its remembered width
+        // on a view switch, and to zero on collapse, instead of snapping.
+        transition: `${orientation === 'horizontal' ? 'width' : 'height'} 200ms cubic-bezier(0.22, 1, 0.36, 1)`,
         overflow: 'hidden',
         position: 'relative',
       };
 
   return (
-    <div ref={elementRef} data-panel="" data-panel-id={id} className={className} style={{ ...baseStyle, ...style }}>
+    <div
+      ref={elementRef}
+      data-panel=""
+      data-panel-id={id}
+      data-panel-collapsed={collapsed ? '' : undefined}
+      className={className}
+      style={{ ...baseStyle, ...style }}
+    >
       {children}
     </div>
   );
@@ -240,88 +248,26 @@ export function Panel(props: {
 export function Separator(props: { className?: string; style?: CSSProperties; children?: ComponentChildren }) {
   const { className, style, children } = props;
   const group = useContext(GroupContext);
-  const [dragging, setDragging] = useState(false);
   const hostRef = useRef<HTMLDivElement | null>(null);
-  const dragCleanupRef = useRef<(() => void) | null>(null);
-
-  // A drag owns two window listeners; if the separator unmounts mid-drag (a
-  // layout switch) nothing else would ever remove them.
-  useEffect(() => () => dragCleanupRef.current?.(), []);
 
   if (!group) {
     throw new Error('<Separator> must be rendered inside a <Group>');
   }
   const { orientation, panels, onLayoutChanged } = group;
-
-  const handlePointerDown = (e: TargetedPointerEvent<HTMLDivElement>) => {
-    const host = hostRef.current;
-    if (!host || e.button !== 0) return;
-    const previous = host.previousElementSibling as HTMLElement | null;
-    const next = host.nextElementSibling as HTMLElement | null;
-    const aId = previous?.getAttribute('data-panel-id');
-    const bId = next?.getAttribute('data-panel-id');
-    const a = aId ? panels.current.get(aId) : undefined;
-    const b = bId ? panels.current.get(bId) : undefined;
-    if (!a || !b || !previous || !next) return;
-
-    e.preventDefault();
-    setDragging(true);
-
-    const startPos = orientation === 'horizontal' ? e.clientX : e.clientY;
-    const measure = (el: HTMLElement) =>
-      orientation === 'horizontal' ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
-    // Measure, never ask the panel: a window narrow enough for flexbox to
-    // shrink a panel below its specified width would otherwise start the drag
-    // from a size the panel does not have on screen.
-    const aStart = measure(previous);
-    const bStart = measure(next);
-
-    const onMove = (ev: PointerEvent) => {
-      const pos = orientation === 'horizontal' ? ev.clientX : ev.clientY;
-      const delta = transfer(
-        { size: aStart, min: a.minSize, max: a.maxSize },
-        { size: bStart, min: b.minSize, max: b.maxSize },
-        pos - startPos,
-      );
-      a.setSize(clamp(aStart + delta, a.minSize, a.maxSize));
-      if (!b.isFiller) b.setSize(clamp(bStart - delta, b.minSize, b.maxSize));
-    };
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove);
-      window.removeEventListener('pointerup', onUp);
-      window.removeEventListener('pointercancel', onUp);
-      dragCleanupRef.current = null;
-      setDragging(false);
-      const layout: Record<string, number> = {};
-      for (const [pid, state] of panels.current) {
-        const px = state.getSize();
-        if (px != null) layout[pid] = px;
-      }
-      onLayoutChanged.current?.(layout, { isUserInteraction: true });
-    };
-    const onUp = () => cleanup();
-
-    window.addEventListener('pointermove', onMove);
-    window.addEventListener('pointerup', onUp);
-    window.addEventListener('pointercancel', onUp);
-    dragCleanupRef.current = cleanup;
-  };
+  const { dragging, guidePx, onPointerDown } = useSeparatorDrag(hostRef, orientation, panels, onLayoutChanged);
 
   return (
-    <>
-      <div
-        ref={hostRef}
-        data-separator=""
-        role="separator"
-        aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
-        className={className}
-        style={style}
-        onPointerDown={handlePointerDown}
-        onDragStart={(e: DragEvent) => e.preventDefault()}
-      >
-        {children}
-      </div>
+    <div
+      ref={hostRef}
+      data-separator=""
+      role="separator"
+      aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
+      className={className}
+      style={style}
+      onPointerDown={onPointerDown}
+      onDragStart={(e: DragEvent) => e.preventDefault()}
+    >
+      {children}
       {dragging && (
         <div
           style={{
@@ -332,6 +278,21 @@ export function Separator(props: { className?: string; style?: CSSProperties; ch
           } as CSSProperties}
         />
       )}
-    </>
+      {guidePx !== null && (
+        <div
+          aria-hidden="true"
+          style={{
+            position: 'fixed',
+            ...(orientation === 'horizontal'
+              ? { left: `${guidePx}px`, top: 0, bottom: 0, width: '1px' }
+              : { top: `${guidePx}px`, left: 0, right: 0, height: '1px' }),
+            zIndex: 9998,
+            pointerEvents: 'none',
+            background: 'var(--theme-ink)',
+            opacity: 0.35,
+          } as CSSProperties}
+        />
+      )}
+    </div>
   );
-}
+}

package/src/client/components/layout/desktop-layout/resizer/separator-drag.ts

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { RefObject } from 'preact';
+import type { TargetedPointerEvent } from 'preact';
+import { clamp, transfer } from '@/client/components/layout/desktop-layout/resizer/utils';
+import { RESIZE_FOLLOW_INTERVAL_MS } from '@/shared/lib/workspace/panel-widths';
+import type { GroupOrientation, LayoutChangedHandler, PanelState } from '@/client/components/layout/desktop-layout/resizer';
+
+export interface SeparatorDrag {
+  /** A drag is in flight; the caller renders the pointer-capture blocker. */
+  dragging: boolean;
+  /** Pointer position of the guide line, or null when not dragging. */
+  guidePx: number | null;
+  onPointerDown: (event: TargetedPointerEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * The deferred drag behind a separator.
+ *
+ * A ghost guide line follows the pointer, and the real width is re-applied at
+ * most every `RESIZE_FOLLOW_INTERVAL_MS`. Applying it on every pointermove
+ * re-renders both panels per frame and reflows whatever they contain — an xterm
+ * buffer, a CodeMirror document, a browser iframe — for a width the user is
+ * still choosing. The panel's own width transition smooths the steps that land.
+ *
+ * Kept out of `index.tsx` so the components stay inside the repo's file-size
+ * ceiling.
+ */
+export function useSeparatorDrag(
+  hostRef: RefObject<HTMLDivElement | null>,
+  orientation: GroupOrientation,
+  panels: { current: Map<string, PanelState> },
+  onLayoutChanged: { current: LayoutChangedHandler | null },
+): SeparatorDrag {
+  const [dragging, setDragging] = useState(false);
+  // State, not a ref: the guide line has to move with the pointer even though
+  // the panels deliberately do not.
+  const [guidePx, setGuidePx] = useState<number | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  // A drag owns two window listeners; if the separator unmounts mid-drag (a
+  // layout switch) nothing else would ever remove them.
+  useEffect(() => () => cleanupRef.current?.(), []);
+
+  const onPointerDown = (e: TargetedPointerEvent<HTMLDivElement>) => {
+    const host = hostRef.current;
+    if (!host || e.button !== 0) return;
+    // Walk past separators and collapsed panels to the real neighbours. A
+    // collapsed panel keeps its DOM node (so its state survives and the width
+    // transition has something to animate), but it is zero-width and its own
+    // floor still reads as 320 in the registry — pairing a drag against it
+    // would clamp every delta to zero and kill the separator.
+    const neighbour = (start: Element | null, step: 'previous' | 'next') => {
+      let node = start;
+      while (node) {
+        if (node.hasAttribute('data-separator') || node.hasAttribute('data-panel-collapsed')) {
+          node = step === 'previous' ? node.previousElementSibling : node.nextElementSibling;
+          continue;
+        }
+        return node instanceof HTMLElement && node.hasAttribute('data-panel') ? node : null;
+      }
+      return null;
+    };
+
+    const previous = neighbour(host.previousElementSibling, 'previous');
+    const next = neighbour(host.nextElementSibling, 'next');
+    const a = previous ? panels.current.get(previous.getAttribute('data-panel-id') ?? '') : undefined;
+    const b = next ? panels.current.get(next.getAttribute('data-panel-id') ?? '') : undefined;
+    if (!a || !b || !previous || !next) return;
+
+    e.preventDefault();
+    setDragging(true);
+
+    const horizontal = orientation === 'horizontal';
+    const startPos = horizontal ? e.clientX : e.clientY;
+    const measure = (el: HTMLElement) =>
+      horizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+    // Measure, never ask the panel: a window narrow enough for flexbox to
+    // shrink a panel below its specified width would otherwise start the drag
+    // from a size the panel does not have on screen.
+    const aStart = measure(previous);
+    const bStart = measure(next);
+
+    // The size the throttle last committed, kept apart from the guide line so
+    // every step that lands is a legal clamped size.
+    let pending: { a: number; b: number } | null = null;
+    let followTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const apply = (sizes: { a: number; b: number }) => {
+      a.setSize(sizes.a);
+      if (!b.isFiller) b.setSize(sizes.b);
+    };
+
+    const onMove = (ev: PointerEvent) => {
+      const pos = horizontal ? ev.clientX : ev.clientY;
+      const delta = transfer(
+        { size: aStart, min: a.minSize, max: a.maxSize },
+        { size: bStart, min: b.minSize, max: b.maxSize },
+        pos - startPos,
+      );
+      pending = {
+        a: clamp(aStart + delta, a.minSize, a.maxSize),
+        b: clamp(bStart - delta, b.minSize, b.maxSize),
+      };
+      setGuidePx(pos);
+      if (followTimer === undefined) {
+        followTimer = setTimeout(() => {
+          followTimer = undefined;
+          if (pending) apply(pending);
+        }, RESIZE_FOLLOW_INTERVAL_MS);
+      }
+    };
+
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      clearTimeout(followTimer);
+      cleanupRef.current = null;
+      setDragging(false);
+      setGuidePx(null);
+      // Land the exact final size once, so the release position is the one the
+      // guide line showed rather than the last throttled step.
+      if (pending) apply(pending);
+
+      const layout: Record<string, number> = {};
+      for (const [pid, state] of panels.current) {
+        const px = state.getSize();
+        if (px != null) layout[pid] = px;
+      }
+      onLayoutChanged.current?.(layout, { isUserInteraction: true });
+    };
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    cleanupRef.current = onUp;
+  };
+
+  return { dragging, guidePx, onPointerDown };
+}

package/src/client/components/layout/session-sidebar/Header.tsx

@@ -5,7 +5,7 @@ export function SessionSidebarHeader({ onNewSession }: { onNewSession: () => voi
     <>
       {/* App Title */}
       <div 
-        className="h-12 flex-shrink-0 flex items-center px-4 border-b border-ink/10 titlebar-drag-region select-none"
+        className="h-14 flex-shrink-0 flex items-center px-4 border-b border-ink/10 titlebar-drag-region select-none"
         style={{ paddingLeft: 'max(1rem, env(titlebar-area-x, 0px))' }}
       >
         <span className="font-bold text-sm tracking-tight flex items-center">

package/src/client/components/layout/session-sidebar/SessionItem.tsx

@@ -33,6 +33,15 @@ export function SessionItem({
   onToggleExpand,
 }: SessionItemProps) {
   const showChevron = Boolean(expandable && hasSubagents && onToggleExpand);
+  // The slot shows one glyph, never two side by side. A live run signal owns
+  // it at rest — the spinner, or the blocked-on-a-question cue, which says it
+  // is YOUR turn. With nothing live to report the chevron is PINNED, collapsed
+  // or expanded: it is the only affordance left worth showing, and making it
+  // hover-only would leave the roster reachable only by hovering exactly the
+  // right 16px.
+  const liveRun = awaitingInput || status === 'stream';
+  const chevronPinned = showChevron && !liveRun;
+  const showStatus = Boolean(awaitingInput || status) && !chevronPinned;
   const {
     isEditing,
     draft,
@@ -52,11 +61,16 @@ export function SessionItem({
           : 'text-ink/75 hover:text-ink hover:bg-ink/5'
       }`}
     >
-      {/* One 16px slot owns both icons: the run-status indicator (spinner /
-          check) shows at rest, and the expand toggle takes the slot over on
-          hover — or permanently while the roster is open. Never two icons.
-          The toggle is pointer-inert while invisible so the slot keeps
-          selecting the session until the chevron is what you see. */}
+      {/* One 16px slot owns both icons — never two side by side. A live run
+          signal (blocked question, run spinner) holds the slot; otherwise the
+          chevron is pinned, collapsed or expanded. While the signal holds it,
+          hovering hands the slot to the chevron so the roster stays reachable
+          mid-run.
+          Both layers are pointer-inert for the opposite state: the toggle
+          while hidden, the status glyph ALWAYS (it is painted after the
+          toggle, so without that it wins the hit test over the revealed
+          chevron and every click on a badged row selects the session instead
+          of expanding it). */}
       <span className="relative w-4 h-4 shrink-0">
         {showChevron && onToggleExpand && (
           <button
@@ -67,18 +81,18 @@ export function SessionItem({
             }}
             title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
             aria-expanded={isExpanded}
-            className={`peer absolute inset-0 flex items-center justify-center rounded cursor-pointer text-ink/40 transition-opacity hover:text-ink ${
-              isExpanded
-                ? ''
-                : 'pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:opacity-100'
+            className={`peer absolute inset-0 flex items-center justify-center rounded cursor-pointer transition-opacity ${
+              chevronPinned
+                ? 'text-ink/60 hover:text-ink'
+                : 'text-ink/40 hover:text-ink pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:opacity-100'
             }`}
           >
-            {isExpanded ? <ChevronDown size={13} className="text-ink/70" /> : <ChevronRight size={13} />}
+            {isExpanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
           </button>
         )}
-        {(awaitingInput || status) && !(showChevron && isExpanded) && (
+        {showStatus && (
           <span
-            className={`absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
+            className={`pointer-events-none absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
               showChevron ? 'group-hover/item:opacity-0 peer-focus-visible:opacity-0' : ''
             }`}
           >

package/src/client/components/layout/session-sidebar/SubagentList.tsx

@@ -3,6 +3,7 @@ import { useSearchParams } from '@/client/lib/router/search-params';
 import { SubagentStatusIcon } from '@/client/components/common/SubagentStatusIcon';
 import { isRecord } from '@/shared/lib/util/guards';
 import { fetchSubagentHistory, historyEntryToSubagentInfo } from '@/shared/lib/omp/subagent/history/client';
+import { subagentRowLabel } from '@/shared/lib/omp/subagent/label';
 import { mergeSubagentRoster, parseSubagentLifecycle, parseSubagentProgress, parseSubagentRosterResponse } from '@/shared/lib/omp/subagent/parse';
 import type { SubagentInfo, SubagentProgress } from '@/shared/types';
 
@@ -123,13 +124,14 @@ export function SubagentList({ sessionId, isActiveSession }: SubagentListProps)
         </div>
       ) : (
         subagents.map((subagent) => {
-          const taskText = subagent.task ?? subagent.description ?? subagent.assignment ?? subagent.agent ?? '';
+          const label = subagentRowLabel(subagent);
+          const brief = subagent.task ?? subagent.assignment ?? subagent.description ?? label;
           const isViewed = subagent.id === viewedSubagentId;
           return (
             <button
               key={subagent.id}
               type="button"
-              title={taskText}
+              title={brief}
               onClick={() => window.dispatchEvent(new CustomEvent('omp:view-subagent', { detail: { sessionId: String(sessionId), subagent } }))}
               className={`w-full flex items-center text-left text-xs rounded-md px-2 py-1 cursor-pointer transition-colors select-none group/subagent ${isViewed ? 'bg-ink/10 font-medium text-ink' : 'text-ink/70 hover:text-ink hover:bg-ink/5'}`}
             >
@@ -141,8 +143,8 @@ export function SubagentList({ sessionId, isActiveSession }: SubagentListProps)
               {/* Gap between subagent icon and task text */}
               <span className="w-2 shrink-0" />
 
-              {/* Subagent task description text */}
-              <span className="flex-1 min-w-0 truncate leading-snug">{taskText}</span>
+              {/* Subagent label: `id (agent): target` */}
+              <span className="flex-1 min-w-0 truncate leading-snug">{label}</span>
             </button>
           );
         })

package/src/client/components/workspace/chat-timeline/ComposerDock.tsx

@@ -32,6 +32,7 @@ interface ComposerDockProps {
   accessMode: ApprovalMode;
   onAccessModeChange: (mode: ApprovalMode) => void;
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
   sessionModel: { provider: string; modelId: string } | null;
   sessionThinkingLevel?: string | null;
   variant: 'desktop' | 'mobile';
@@ -69,6 +70,7 @@ export function ComposerDock({
   accessMode,
   onAccessModeChange,
   composerModelRef,
+  deferredComposerPickRef,
   sessionModel,
   sessionThinkingLevel,
   variant,
@@ -118,6 +120,7 @@ export function ComposerDock({
           accessMode={accessMode}
           onAccessModeChange={onAccessModeChange}
           composerModelRef={composerModelRef}
+          deferredComposerPickRef={deferredComposerPickRef}
           sessionModel={sessionModel}
           sessionThinkingLevel={sessionThinkingLevel}
           variant={variant}

package/src/client/components/workspace/chat-timeline/EmptyWorkspacePrompt.tsx

@@ -40,6 +40,7 @@ interface EmptyWorkspacePromptProps {
   accessMode: ApprovalMode;
   onAccessModeChange: (mode: ApprovalMode) => void;
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
   generatingVerb?: string;
   variant?: 'desktop' | 'mobile';
 }
@@ -69,6 +70,7 @@ export function EmptyWorkspacePrompt({
   accessMode,
   onAccessModeChange,
   composerModelRef,
+  deferredComposerPickRef,
   generatingVerb,
   variant = 'desktop',
 }: EmptyWorkspacePromptProps) {
@@ -226,6 +228,7 @@ export function EmptyWorkspacePrompt({
           accessMode={accessMode}
           onAccessModeChange={onAccessModeChange}
           composerModelRef={composerModelRef}
+          deferredComposerPickRef={deferredComposerPickRef}
           variant={variant}
         />
       </div>

package/src/client/components/workspace/chat-timeline/SubagentView.tsx

@@ -8,6 +8,7 @@ import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter
 import { useSubagentTranscript } from '@/client/hooks/chat/subagent';
 import { useModelNames } from '@/client/hooks/models/use-model-names';
 import { isNoticeRow } from '@/shared/lib/chat/notice-row';
+import { subagentHeaderTitle } from '@/shared/lib/omp/subagent/label';
 import { previousNonNoticeIndex, resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import { formatCompactTokens } from '@/shared/lib/format/number';
 
@@ -62,6 +63,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
 
   const progress = status?.progress ?? subagent.progress;
   const modelName = progress?.resolvedModel ?? subagent.agent;
+  const headerTitle = subagentHeaderTitle(status ?? subagent);
   const compactTokens = formatCompactTokens(progress?.tokens);
   const meta = compactTokens ? `${compactTokens} tok` : '';
   const rawTask = status?.task ?? status?.assignment ?? status?.description
@@ -85,7 +87,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2 min-w-0">
             <span className="font-mono text-[12px] font-semibold text-ink truncate">
-              {status?.agent ?? subagent.agent}
+              {headerTitle}
             </span>
             <span className="shrink-0 rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-ink/50">
               {STATUS_LABEL[effectiveStatus]}