@kabmo-labs/kabmo 0.3.1 → 0.5.0

package/src/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker.tsx

@@ -0,0 +1,185 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * "Wait for session" — the composer's dependency pick for a NEW chat.
+ *
+ * Only sessions with a run in flight are offered, and that is a rule rather than
+ * a filter for convenience: a prompt held on an idle session would be released
+ * by the very next sweep, so the dropdown would be promising a wait that cannot
+ * happen. The list is derived from the sidebar's server-tracked status map —
+ * the same `stream` rows the row spinner is drawn from — so a session that
+ * finished while the popup was open leaves it on the next render.
+ *
+ * The choice lives in the session's own UI state (`chat.waitingFor`), not in
+ * this component: the composer is remounted by an expansion, a tab switch and a
+ * reload, and a pick that evaporated with it would silently send the prompt
+ * immediately.
+ */
+
+import { useCallback, useMemo, useRef, useState } from 'preact/hooks';
+import { Hourglass, ChevronDown, Check, X } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import type { WorkspaceFolderData } from '@/shared/types';
+
+export interface WaitingCandidate {
+  id: string;
+  title: string;
+  folderName: string;
+}
+
+export interface WaitingDependencyPickerProps {
+  folders: WorkspaceFolderData[];
+  /** Server-tracked `stream` ids — the only sessions that may be waited on. */
+  streamStatusMap: Record<string, string | undefined>;
+  /** The session this composer writes to; never offered as its own dependency. */
+  sessionId: string | null;
+  /** A name for a streaming id the sidebar structure has not scanned yet. */
+  titleFor?: (id: string) => string | undefined;
+  value: WaitingCandidate | null;
+  onChange: (candidate: WaitingCandidate | null) => void;
+}
+
+/**
+ * Sessions with a run in flight, in sidebar order.
+ *
+ * The STATUS map is the list, and the folders are only where a name comes from.
+ * That order matters: a freshly spawned session has a `stream` row the moment
+ * its prompt is dispatched, while omp's transcript — which is what the sidebar
+ * structure is scanned from — lands seconds later (and, in a test fixture, may
+ * never land at all). Driving the list off `folder.sessions` therefore offered
+ * NOTHING in the one situation the feature exists for: a run that just started.
+ * Measured in `waiting-prompt.e2e.ts`, where the sidebar drew the running
+ * session as a PENDING row while the folder listed no sessions at all.
+ */
+export function waitingCandidates(
+  folders: WorkspaceFolderData[],
+  streamStatusMap: Record<string, string | undefined>,
+  sessionId: string | null,
+  titleFor?: (id: string) => string | undefined,
+): WaitingCandidate[] {
+  const candidates: WaitingCandidate[] = [];
+  const seen = new Set<string>();
+  for (const folder of folders) {
+    for (const session of folder.sessions ?? []) {
+      const id = String(session.id);
+      if (streamStatusMap[id] !== 'stream') continue;
+      seen.add(id);
+      if (sessionId && id === String(sessionId)) continue;
+      candidates.push({ id, title: session.title || id, folderName: folder.name });
+    }
+  }
+  // Streaming ids the structure has not scanned: still real runs, still
+  // waitable. Named from the title hint the send path published, else the id.
+  for (const [id, status] of Object.entries(streamStatusMap)) {
+    if (status !== 'stream' || seen.has(id)) continue;
+    if (sessionId && id === String(sessionId)) continue;
+    candidates.push({ id, title: titleFor?.(id) ?? id, folderName: '' });
+  }
+  return candidates;
+}
+
+export function WaitingDependencyPicker({
+  folders,
+  streamStatusMap,
+  sessionId,
+  titleFor,
+  value,
+  onChange,
+}: WaitingDependencyPickerProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  // A stable handler: the hook re-registers its document listeners whenever the
+  // callback identity changes, and an inline arrow would do that on every
+  // render — including every stream-status frame.
+  const close = useCallback(() => setOpen(false), []);
+  useOnClickOutside(ref, close);
+  const candidates = useMemo(
+    () => waitingCandidates(folders, streamStatusMap, sessionId, titleFor),
+    [folders, streamStatusMap, sessionId, titleFor],
+  );
+  const unavailable = candidates.length === 0;
+
+  return (
+    <div className="relative shrink-0" ref={ref}>
+      <button
+        type="button"
+        data-testid="wait-picker"
+        onClick={() => setOpen((prev) => !prev)}
+        disabled={unavailable && !value}
+        title={unavailable && !value ? 'No session is running right now' : 'Wait for another session to finish'}
+        aria-label={value ? `Waiting for ${value.title}` : 'Wait for session'}
+        aria-expanded={open}
+        className={`group flex items-center gap-1.5 rounded-md px-1.5 py-1 text-xs font-medium transition-all outline-none focus-visible:bg-ink/5 cursor-pointer select-none disabled:cursor-not-allowed disabled:opacity-50 ${
+          value ? 'bg-ink/10 text-ink' : 'text-ink/75 hover:text-ink hover:bg-ink/5'
+        }`}
+      >
+        <Hourglass size={13} className={`flex-shrink-0 ${value ? 'text-ink/80' : 'text-ink/50 group-hover:text-ink/80'}`} />
+        <span className="max-w-[200px] truncate tracking-tight">
+          {value ? `Wait for ${value.title}` : 'Wait for session'}
+        </span>
+        <ChevronDown
+          size={13}
+          className={`flex-shrink-0 text-ink/40 transition-transform duration-150 ${open ? 'rotate-180 text-ink/70' : ''}`}
+        />
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-72 bg-paper border border-ink/10 rounded-lg shadow-lg z-50 flex flex-col overflow-hidden text-xs py-1">
+          <div className="flex items-center justify-between px-3 py-1.5 border-b border-ink/5">
+            <span className="text-[10px] uppercase tracking-wider text-ink/40 font-semibold">Wait for session</span>
+            {value && (
+              <button
+                type="button"
+                onClick={() => {
+                  onChange(null);
+                  setOpen(false);
+                }}
+                title="Send without waiting"
+                aria-label="Send without waiting"
+                className="flex items-center gap-1 text-[10px] text-ink/50 hover:text-ink cursor-pointer"
+              >
+                <X size={10} /> clear
+              </button>
+            )}
+          </div>
+          <div className="max-h-56 scrollbar-overlay-container py-1">
+            {unavailable ? (
+              <div className="px-3 py-2 text-ink/40 italic">No session is running right now</div>
+            ) : (
+              candidates.map((candidate) => {
+                const selected = value?.id === candidate.id;
+                return (
+                  <button
+                    key={candidate.id}
+                    type="button"
+                    data-testid="wait-candidate"
+                    data-session-id={candidate.id}
+                    onClick={() => {
+                      onChange(selected ? null : candidate);
+                      setOpen(false);
+                    }}
+                    className={`w-full text-left px-3 py-1.5 flex items-center justify-between transition-colors cursor-pointer ${
+                      selected ? 'bg-ink/10 text-ink font-semibold' : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+                    }`}
+                  >
+                    <span className="flex items-center gap-2 truncate pr-2">
+                      <Hourglass size={12} className={selected ? 'text-ink flex-shrink-0' : 'text-ink/50 flex-shrink-0'} />
+                      <span className="truncate font-medium">{candidate.title}</span>
+                      {candidate.folderName && (
+                        <span className="truncate text-[10px] text-ink/40">{candidate.folderName}</span>
+                      )}
+                    </span>
+                    {selected && <Check size={12} className="text-ink flex-shrink-0" />}
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/chat-input/compact.test.tsx

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's compact composer.
+ *
+ * A reader scrolled back through the transcript with an empty draft gets the
+ * height back — but not by shrinking the box: the textarea is REMOVED, and the
+ * attachment row carries a "Type here" target that brings it back. Shrinking it
+ * instead left a focusable element with no usable pixels and a sentence-long
+ * placeholder clipped mid-word, and it kept the composer at a height it was
+ * supposed to give away.
+ *
+ * These pin the three states that make that work: compact has no textarea and
+ * one target, a tap on the target restores the box and focuses it, and a draft
+ * (or a focused composer) never enters compact at all.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input';
+import { restoreRealtime, silenceRealtime } from '@/test-support/silent-socket';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'HTMLTextAreaElement', 'Event', 'MouseEvent', 'KeyboardEvent', 'FocusEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+let container: HTMLElement | null = null;
+
+beforeEach(() => {
+  // Per case, because `restoreRealtime` clears the constructor: the composer's
+  // model picker subscribes on every mount, and this origin has no listener to
+  // reach, so a real dial would fail after the globals are restored.
+  silenceRealtime();
+});
+
+afterEach(() => {
+  container?.remove();
+  container = null;
+  // The composer's model picker subscribes to the realtime topic, and its
+  // reconnect timer outlives this file's DOM — it then fires into a torn-down
+  // `window` and surfaces as an unhandled error in whichever test runs next.
+  // `restoreRealtime` resets the client AND puts the real constructor back, so
+  // the silence does not follow this file into the next one.
+  restoreRealtime();
+});
+
+interface MountOptions {
+  shrinkWhileReading?: boolean;
+  value?: string;
+  variant?: 'desktop' | 'mobile';
+}
+
+async function mount({
+  shrinkWhileReading = false,
+  value = '',
+  variant = 'mobile',
+}: MountOptions = {}): Promise<HTMLElement> {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  await act(async () => {
+    // No `SessionStateProvider`: the composer reads no session UI state, and the
+    // provider's own load kicks a realtime reconnect that outlives this file and
+    // throws `window is not defined` after teardown.
+    render(
+      h(ChatInput, {
+        value,
+        onChange: () => {},
+        onSend: () => {},
+        isGenerating: false,
+        composerModelRef: { current: null },
+        variant,
+        shrinkWhileReading,
+        sessionId: 'composer-compact-test',
+      }),
+      host,
+    );
+  });
+  container = host;
+  return host;
+}
+
+const textarea = (el: HTMLElement) => el.querySelector('textarea');
+const typeHere = (el: HTMLElement) =>
+  Array.from(el.querySelectorAll('button')).find((b) => (b.textContent ?? '').trim() === 'Type here') ?? null;
+
+describe('compact composer', () => {
+  test('a scrolled-back phone with an empty draft renders no textarea at all', async () => {
+    const el = await mount({ shrinkWhileReading: true });
+    expect(textarea(el)).toBeNull();
+  });
+
+  test('…and offers exactly one target that says what tapping it does', async () => {
+    const el = await mount({ shrinkWhileReading: true });
+    const target = typeHere(el);
+    expect(target).not.toBeNull();
+    expect(target!.tagName).toBe('BUTTON');
+  });
+
+  test('a draft keeps the box: the reader is writing, not reading', async () => {
+    const el = await mount({ shrinkWhileReading: true, value: 'half a prompt' });
+    expect(textarea(el)).not.toBeNull();
+    expect(typeHere(el)).toBeNull();
+  });
+
+  test('a desktop is never compact — its composer sits beside the chat', async () => {
+    const el = await mount({ shrinkWhileReading: true, variant: 'desktop' });
+    expect(textarea(el)).not.toBeNull();
+  });
+
+  test('tapping the target brings the textarea back, focused', async () => {
+    const el = await mount({ shrinkWhileReading: true });
+    const target = typeHere(el)!;
+    // POINTERDOWN, not click: pressing the target expands the composer, which
+    // removes the button the finger is still on — so the browser never emits a
+    // click at all (measured in Chromium: `pd:BUTTON` with no `click` after it).
+    await act(async () => { target.dispatchEvent(new window.PointerEvent('pointerdown', { bubbles: true })); });
+    const box = textarea(el);
+    expect(box).not.toBeNull();
+    // The tap ends where the reader aimed it: the caret is in the box, which is
+    // also what stops the scroll position from collapsing it again.
+    expect(document.activeElement).toBe(box);
+  });
+
+  test('tapping a control inside the compact card does not also re-open it', async () => {
+    const el = await mount({ shrinkWhileReading: true });
+    const paperclip = el.querySelector('button[title="Attach file or image"]') as HTMLButtonElement;
+    await act(async () => { paperclip.dispatchEvent(new window.PointerEvent('pointerdown', { bubbles: true })); });
+    // The paperclip owns its own click; the card must not turn it into a reopen.
+    expect(textarea(el)).toBeNull();
+  });
+
+  test('in the normal state, tapping the card focuses the draft instead of doing nothing', async () => {
+    const el = await mount({ shrinkWhileReading: false });
+    const box = textarea(el)!;
+    // The header row is the line the paperclip lives on; a click on its padding
+    // is a click on the composer, and the caret should land in the draft.
+    const header = el.querySelector('button[title="Attach file or image"]')!.parentElement!;
+    await act(async () => { header.dispatchEvent(new window.PointerEvent('pointerdown', { bubbles: true })); });
+    expect(document.activeElement).toBe(box);
+  });
+});

package/src/client/components/workspace/chat-timeline/chat-input/expansion.test.ts

@@ -23,14 +23,16 @@ import { describe, expect, test } from 'bun:test';
 
 import { composerExpansion } from '@/client/components/workspace/chat-timeline/chat-input/expansion';
 
-const base = { expanded: false, isDragging: false, keyboardInset: 0, compact: false } as const;
+const base = { expanded: false, isDragging: false, keyboardInset: 0 } as const;
 
 describe('composerExpansion docked', () => {
   test('a phone keeps its touch-sized box and opens the popup upward', () => {
     const layout = composerExpansion({ ...base, variant: 'mobile' });
     expect(layout.cardPositionClass).toBe('relative');
     expect(layout.textareaClass).toContain('min-h-[68px]');
-    expect(layout.textareaClass).toContain('text-base');
+    // The transcript's own size, not a larger one: a draft read at 16px beside
+    // 13px messages looked like a different document pasted underneath.
+    expect(layout.textareaClass).toContain('text-[13px]');
     expect(layout.pickerPlacement).toBe('up');
     expect(layout.style).toBeUndefined();
   });
@@ -38,7 +40,7 @@ describe('composerExpansion docked', () => {
   test('a desktop keeps its 80px box', () => {
     const layout = composerExpansion({ ...base, variant: 'desktop' });
     expect(layout.textareaClass).toContain('min-h-[80px]');
-    expect(layout.textareaClass).toContain('text-sm');
+    expect(layout.textareaClass).toContain('text-[13px]');
     expect(layout.pickerPlacement).toBe('up');
   });
 
@@ -88,32 +90,31 @@ describe('composerExpansion frame matches a tool card', () => {
 });
 
 /**
- * The phone's compact composer: a reader scrolled back through the transcript
- * gets the height back. The rules that matter are which layout may shrink (only
- * a docked phone — a desktop sits beside the chat, a stretched one IS the
- * screen) and that it stays a card and a touch target rather than becoming a
- * second, differently shaped control.
+ * The compact composer is a DECISION ONE LEVEL UP, not a size in this table.
+ *
+ * A phone reader scrolled back through the transcript with an empty draft gets
+ * the height back by not rendering the textarea at all (`ChatInput`), and the
+ * attachment row then carries a "Type here" target that brings it back. So this
+ * module has nothing left to say about it — and the cases below pin that a
+ * docked or stretched layout is unchanged by the feature.
  */
-describe('composerExpansion compact', () => {
-  test('a docked phone shrinks to a 44px box, still framed as a card', () => {
-    const layout = composerExpansion({ ...base, variant: 'mobile', compact: true });
-    // A fixed height, not a min-height: a textarea's own `rows` sets its
-    // height, so a minimum alone never shrinks it.
-    expect(layout.textareaClass).toContain('h-11');
-    expect(layout.textareaClass).not.toContain('min-h-[68px]');
+describe('composerExpansion has no compact size', () => {
+  test('a docked phone keeps its full box: compact removes the element instead', () => {
+    const layout = composerExpansion({ ...base, variant: 'mobile' });
+    expect(layout.textareaClass).toContain('min-h-[68px]');
+    expect(layout.textareaClass).not.toContain('h-9');
+    // Still the same card frame as a tool card.
     expect(layout.cardClass).toContain('rounded-xl');
     expect(layout.cardClass).toContain('shadow-sm');
-    // The frame's own state does not change: compact is a SIZE, not a style.
-    expect(layout.cardClass).toContain('border-ink/10');
   });
 
-  test('a desktop ignores it: its composer sits beside the chat', () => {
-    const layout = composerExpansion({ ...base, variant: 'desktop', compact: true });
+  test('a desktop is untouched', () => {
+    const layout = composerExpansion({ ...base, variant: 'desktop' });
     expect(layout.textareaClass).toContain('min-h-[80px]');
   });
 
-  test('a stretched phone is the screen, so there is nothing to give back', () => {
-    const layout = composerExpansion({ ...base, expanded: true, variant: 'mobile', compact: true });
+  test('a stretched phone is the screen', () => {
+    const layout = composerExpansion({ ...base, expanded: true, variant: 'mobile' });
     expect(layout.cardClass).toContain('rounded-none');
     expect(layout.textareaClass).toContain('h-full');
   });

package/src/client/components/workspace/chat-timeline/chat-input/expansion.ts

@@ -59,13 +59,6 @@ export interface ComposerExpansionInput {
    * `useKeyboardInset`. 0 when there is no keyboard (or no `visualViewport`).
    */
   keyboardInset: number;
-  /**
-   * A phone reader is scrolled back through the transcript and the draft is
-   * empty, so the composer gives the conversation its height back. Only the
-   * docked phone layout has anything to give: a desktop composer sits beside
-   * the chat rather than over it, and a stretched one is the screen.
-   */
-  compact: boolean;
 }
 
 export interface ComposerExpansion {
@@ -95,7 +88,6 @@ export function composerExpansion({
   expanded,
   isDragging,
   keyboardInset,
-  compact,
 }: ComposerExpansionInput): ComposerExpansion {
   const mobile = variant === 'mobile';
   // Same frame as a tool card (`ToolCardShell`): `rounded-xl`, `border-ink/10`
@@ -112,18 +104,18 @@ export function composerExpansion({
       cardClass: `border rounded-xl bg-paper shadow-sm ${border}`,
       cardPositionClass: 'relative',
       cardLayoutClass: '',
-      // A compact phone composer gives the transcript its height back. `h-11`
-      // rather than a `min-h`: a textarea's height comes from its `rows`
-      // (two lines by default), so a min-height alone never shrinks it —
-      // measured, `min-h-[44px]` still laid out at 64px. The box is fixed at
-      // 44px, the smallest reliable touch target, and it never needs to grow:
-      // a draft restores the full composer on the same commit the first
-      // character lands in it.
+      // The phone's compact state does not render a textarea at all (see
+      // `ChatInput`), so there is no size to return here. The class below is
+      // what a DOCKED composer uses; compact is decided one level up, by
+      // whether the element exists.
+      // Same type as the transcript it sits under: `text-[13px] leading-relaxed`
+      // is what every message row uses, so a draft reads at the size of the
+      // conversation it is replying to. `composer-type` carries the iOS guard —
+      // see the rule in tailwind.css, where a sub-16px control would make
+      // Safari zoom the page on focus.
       textareaClass: mobile
-        ? compact
-          ? 'px-3 py-2 text-base h-11 max-h-40'
-          : 'px-3 py-3 text-base min-h-[68px] max-h-40'
-        : 'px-3 py-3 text-sm min-h-[80px]',
+        ? 'px-3 py-3 text-[13px] leading-relaxed composer-type min-h-[68px] max-h-40'
+        : 'px-3 py-3 text-[13px] leading-relaxed composer-type min-h-[80px]',
       wrapperClass: '',
       pickerPlacement: 'up',
       style: undefined,
@@ -139,7 +131,7 @@ export function composerExpansion({
       cardClass: 'border-0 rounded-none bg-paper shadow-none',
       cardPositionClass: 'fixed inset-0 z-40',
       cardLayoutClass: '',
-      textareaClass: 'h-full px-3 py-3 text-base',
+      textareaClass: 'h-full px-3 py-3 text-[13px] leading-relaxed composer-type',
       wrapperClass: 'flex-1 min-h-0',
       pickerPlacement: 'over',
       style: {

package/src/client/components/workspace/chat-timeline/chat-input/index.tsx

@@ -19,6 +19,7 @@ import { normalizeGoalBudget } from '@/shared/lib/omp/mode/budget';
 import { readKabmoSetting } from '@/shared/lib/settings/client';
 import { useKeyboardInset } from '@/client/hooks/ui/keyboard-inset';
 import { composerExpansion } from '@/client/components/workspace/chat-timeline/chat-input/expansion';
+import { useComposerCompact } from '@/client/hooks/chat/composer/compact';
 import type { ChatInputProps } from '@/client/components/workspace/chat-timeline/chat-input/props';
 
 export function ChatInput({ 
@@ -142,13 +143,16 @@ export function ChatInput({
   // Enter, so the covered toolbar would be the only way to send). Docked, the
   // card is inside the chat's own column and the measurement is unused.
   const keyboardInset = useKeyboardInset(cardRef, expandable && expanded);
-  // A phone gives its height back to the transcript while the reader is
-  // scrolling back — but only when there is nothing to lose: a draft means the
-  // user is writing, and the box must stay the size it was. 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 = shrinkWhileReading && !composerFocused && !value.trim() && attachments.length === 0;
-  const layout = composerExpansion({ variant, expanded, isDragging, keyboardInset, compact });
+  const { compact, reopen, onCardPointerDown } = useComposerCompact({
+    cardRef,
+    isMobile,
+    shrinkWhileReading,
+    composerFocused,
+    setComposerFocused,
+    value,
+    attachments,
+  });
+  const layout = composerExpansion({ variant, expanded, isDragging, keyboardInset });
 
   // Escape returns to the docked composer. Bound to the document rather than to
   // the textarea so it works while the picker has focus — the picker consumes
@@ -199,7 +203,22 @@ export function ChatInput({
       // focus, which never happens). Preact maps `onFocusIn`/`onFocusOut` to
       // the native bubble-phase events.
       onFocusIn={() => setComposerFocused(true)}
-      onFocusOut={() => setComposerFocused(false)}
+      // A focusout is NOT proof the reader left the card. Re-opening from the
+      // compact state REMOVES the "Type here" button that had focus, and the
+      // browser emits a focusout for it after the new textarea has already been
+      // focused — so the flag went false one tick later and the composer
+      // collapsed again (measured: `focusin:BUTTON, focusout:BUTTON,
+      // added:DIV, removed:DIV, added:BUTTON` — open and shut within a frame).
+      // The question is where focus ENDED UP, which is only answerable after
+      // the focus change has settled.
+      onFocusOut={() => {
+        requestAnimationFrame(() => {
+          if (!cardRef.current?.contains(document.activeElement)) setComposerFocused(false);
+        });
+      }}
+      // Press-time, not click-time — see `useComposerCompact` for why a click
+      // never arrives in the compact state.
+      onPointerDown={onCardPointerDown}
       {...dropProps}
     >
       <DropOverlay visible={isDragging} />
@@ -226,6 +245,8 @@ export function ChatInput({
         // (the New Chat modal) gets no control and cannot be stretched.
         expanded={expandable ? expanded : undefined}
         onToggleExpand={expandable ? () => setExpanded((prev) => !prev) : undefined}
+        compact={compact}
+        onExpandComposer={reopen}
       />
 
       {/* Refused plan/goal command notice. */}
@@ -244,25 +265,31 @@ export function ChatInput({
         </div>
       )}
 
-      {/* Textarea */}
-      <ComposerTextarea
-        value={value}
-        onChange={onChange}
-        onSend={handleSubmit}
-        disabled={disabled}
-        appSettings={appSettings}
-        rootPath={rootPath}
-        enablePicker={enablePicker}
-        placement={layout.pickerPlacement}
-        wrapperClassName={layout.wrapperClass}
-        placeholder={placeholder ?? (disabled ? "Please select a workspace above to start prompting..." : "@ for files/agents; / for commands and skills (Paste images/files here)")}
-        className={`w-full bg-transparent border-none focus:outline-none resize-none text-ink placeholder-ink/40 disabled:opacity-50 disabled:cursor-not-allowed ${layout.textareaClass}`}
-        onPaste={handlePaste}
-        variant={variant}
-        textareaRef={autoGrow ? growRef : undefined}
-        onReady={onTextareaReady}
-      />
-
+      {/* Textarea. Not rendered at all while compact: the phone gives the
+          transcript its height back by removing the box, not by shrinking it,
+          and `AttachmentToolbar` then carries the "Type here" target that
+          brings it back. Rendering it at `h-0` would keep a focusable element
+          with no pixels, which is exactly the trap the `inert` rules elsewhere
+          exist to avoid. */}
+      {!compact && (
+        <ComposerTextarea
+          value={value}
+          onChange={onChange}
+          onSend={handleSubmit}
+          disabled={disabled}
+          appSettings={appSettings}
+          rootPath={rootPath}
+          enablePicker={enablePicker}
+          placement={layout.pickerPlacement}
+          wrapperClassName={layout.wrapperClass}
+          placeholder={placeholder ?? (disabled ? "Please select a workspace above to start prompting..." : "@ for files/agents; / for commands and skills (Paste images/files here)")}
+          className={`w-full bg-transparent border-none focus:outline-none resize-none text-ink placeholder-ink/40 disabled:opacity-50 disabled:cursor-not-allowed ${layout.textareaClass}`}
+          onPaste={handlePaste}
+          variant={variant}
+          textareaRef={autoGrow ? growRef : undefined}
+          onReady={onTextareaReady}
+        />
+      )}
       {/* Dictation progress / failure, above the toolbar that owns the mic. */}
       <VoiceNotice status={voiceStatus} error={displayedVoiceError} />
 

package/src/client/components/workspace/chat-timeline/chat-input/props.ts

@@ -13,6 +13,7 @@ import type { SetStateAction } from 'preact/compat';
 import type { Attachment } from '@/shared/types';
 import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 import type { ComposerModes } from '@/client/components/workspace/chat-timeline/chat-input/modes-props';
+import type { WaitingCandidate } from '@/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker';
 
 export interface ChatInputProps {
   value: string;
@@ -104,4 +105,19 @@ export interface ChatInputProps {
    * reader reaches the tail, types, or focuses the box.
    */
   shrinkWhileReading?: boolean;
+  /**
+   * "Wait for session": the pick, the sessions that may be waited on, and the
+   * setter.
+   *
+   * Omitted by every composer that is not a NEW chat's — the pick defers a
+   * prompt that has no session yet, so an existing chat has nothing to defer.
+   * The chat composer never passes it either: its own timeline renders
+   * `EmptyWorkspacePrompt` while the session is pending, and that is where the
+   * picker lives.
+   */
+  waiting?: {
+    value: WaitingCandidate | null;
+    candidates: WaitingCandidate[];
+    onChange: (candidate: WaitingCandidate | null) => void;
+  };
 }