cli-jaw 2.17.41 → 2.17.42

package/public/manager/src/code/CodeTranscript.tsx

@@ -1,11 +1,49 @@
-import { lazy, Suspense, useCallback, useRef, useState, type KeyboardEvent } from 'react';
-import type { CodeItem, CodeProviderId } from '../../../../src/code-mode/wire';
+import { lazy, Suspense, useCallback, useMemo, useRef, useState, type KeyboardEvent } from 'react';
+import type { CodeItem, CodeItemKind, CodeProviderId } from '../../../../src/code-mode/wire';
 import { useCodeTranscriptVirtualRows } from './useCodeTranscriptVirtualRows';
 import { useCodeTranscriptScroll } from './use-code-transcript-scroll';
 import { useThrottledMarkdown } from './use-throttled-markdown';
 import { CODE_RUNTIME_LABELS, codeItemStatus } from './code-types';
+import { noteworthyStatus, toolSummary } from './tool-summary';
+import { PENDING_USER_ITEM_ID } from './pending-user-item';
 
 const MarkdownRenderer = lazy(() => import('../notes/rendering/MarkdownRenderer').then(m => ({ default: m.MarkdownRenderer })));
+
+/**
+ * Turn boundaries are bookkeeping, not conversation. A one-line answer framed by
+ * "Turn started" and "Completed" reads as a status board, and neither line tells
+ * the reader anything the answer itself does not.
+ *
+ * They stay in the store and on the wire: history replay, the failed-input
+ * recovery lookup in CodeWorkbench and the transcript-limit accounting all still
+ * see them. Only this view drops them. Failure and cancellation are kept,
+ * because those are states a reader can act on.
+ */
+const HIDDEN_KINDS: ReadonlySet<CodeItemKind> = new Set<CodeItemKind>(['turn_started', 'turn_completed']);
+
+/**
+ * What a collapsible row measures before it has been measured. Collapsed is one
+ * line and exact. Expanded is a guess and deliberately only that: the panes are
+ * capped at 200px each by `.code-tool-output` / `.code-tool-args`, so a call
+ * with both is far taller, and the real number arrives from the ResizeObserver
+ * a frame later. This only has to be closer than one line.
+ */
+const COLLAPSED_ROW_PX = 44;
+const EXPANDED_ROW_PX = 320;
+/** Same bound the scroll anchors use, for the same reason. */
+const MAX_OPEN_ROWS = 64;
+
+/**
+ * A failed call opens itself, because the reader has to see why it failed. That
+ * is a default, not a lock: once the reader has said what they want for this
+ * row, their choice wins, including closing a failure they have already read.
+ */
+function isRowOpen(chosen: ReadonlyMap<string, boolean>, sessionKey: string, item: CodeItem): boolean {
+    const choice = chosen.get(`${sessionKey}:${item.itemId}`);
+    if (choice !== undefined) return choice;
+    return item.status === 'error' && item.kind !== 'reasoning';
+}
+
 function ItemMarkdown({ item, identity, onOpenLocalFile }: { item: CodeItem; identity: string; onOpenLocalFile?: ((path: string) => void) | undefined }) {
     const text = useThrottledMarkdown(item.text ?? '', item.status !== 'running' && item.status !== 'pending', identity);
     if (!text.trim()) return <span className="code-plain-text">{text}</span>;
@@ -14,32 +52,57 @@ function ItemMarkdown({ item, identity, onOpenLocalFile }: { item: CodeItem; ide
     </Suspense>;
 }
 
-export function CodeTranscriptItem({ item, provider, sessionKey, onOpenLocalFile }: {
-    item: CodeItem; provider: CodeProviderId; sessionKey: string; onOpenLocalFile?: ((path: string) => void) | undefined;
+export function CodeTranscriptItem({ item, provider, sessionKey, workingDir = '', onOpenLocalFile, expanded, onExpandedChange }: {
+    item: CodeItem; provider: CodeProviderId; sessionKey: string; workingDir?: string;
+    onOpenLocalFile?: ((path: string) => void) | undefined;
+    expanded?: boolean;
+    onExpandedChange?: ((itemId: string, open: boolean) => void) | undefined;
 }) {
     const tool = item.kind === 'tool_call' || item.kind === 'file_change';
     const reasoning = item.kind === 'reasoning';
     const assistant = item.kind === 'assistant_message';
     const user = item.kind === 'user_message';
     const status = codeItemStatus(item);
+    // A completed turn should read as prose, not as a status board: only
+    // states the reader can act on are worth a visible badge.
+    const note = noteworthyStatus(item);
+    const unsent = item.itemId === PENDING_USER_ITEM_ID;
+    // The transcript owns the disclosure, because the virtualizer unmounts rows
+    // and per-row state would be lost on scroll. Rendered standalone (tests, a
+    // future embed) it falls back to the same failure default.
+    const open = expanded ?? (item.status === 'error' && item.kind !== 'reasoning');
+    const running = item.status === 'running' || item.status === 'pending';
+    // The verb already says the call is in flight; a second badge next to
+    // "Reading src/app.ts" is the same fact twice. Keyed off the status rather
+    // than the badge text, so renaming either vocabulary cannot quietly bring
+    // the duplicate back. Failure and cancellation still get a word, because
+    // those change what to do next.
+    const toolNote = running ? null : note;
     const label = user ? 'You' : assistant ? CODE_RUNTIME_LABELS[provider] : reasoning ? 'Reasoning'
         : item.kind === 'turn_started' ? 'Turn started' : item.kind === 'session_runtime' ? 'Runtime'
             : item.kind === 'permission_request' ? 'Permission record' : item.kind === 'notice' ? 'Notice' : status;
-    return <article className={`code-message code-message-${tool ? 'tool' : assistant ? 'assistant' : user ? 'user' : 'system'} is-${item.status}`}
+    return <article className={`code-message code-message-${tool ? 'tool' : assistant ? 'assistant' : user ? 'user' : 'system'} is-${item.status}${unsent ? ' is-unsent' : ''}`}
         data-code-item-id={item.itemId} aria-label={`${label} · ${status}`}>
-        {tool ? <details className={`code-tool-card code-tool-${item.status}`}>
+        {tool ? <details className={`code-tool-card code-tool-${item.status}`} open={open}
+            onToggle={event => onExpandedChange?.(item.itemId, event.currentTarget.open)}>
             <summary className="code-tool-summary"><span className="code-tool-chevron" aria-hidden="true">›</span>
-                <span className="code-tool-name">{item.tool?.name ?? (item.kind === 'file_change' ? 'File change' : 'Tool')}</span>
-                <span className="code-tool-status">{status}</span></summary>
-            {item.tool?.detail !== undefined && <p className="code-tool-text">{item.tool.detail}</p>}
-            {item.tool?.input !== undefined && <section className="code-tool-section"><span className="code-tool-section-label">Input</span><pre className="code-tool-args">{item.tool.input}</pre></section>}
-            {item.tool?.output !== undefined && <section className="code-tool-section"><span className="code-tool-section-label">Output</span><pre className="code-tool-output">{item.tool.output}</pre></section>}
-            {item.text !== undefined && <pre className="code-tool-text">{item.text}</pre>}
-        </details> : reasoning ? <details className="code-thinking">
-            <summary className="code-thinking-summary">Reasoning · {status}</summary><div className="code-thinking-text">{item.text}</div>
+                <span className={`code-tool-name${running ? ' code-tool-name-running' : ''}`}>{toolSummary(item, workingDir)}</span>
+                {toolNote && <span className="code-tool-status">{toolNote}</span>}</summary>
+            {/* Built only while open: a collapsed call's output can be megabytes,
+                and constructing it costs the same whether or not it is painted. */}
+            {open && <>
+                {item.tool?.detail !== undefined && <p className="code-tool-text">{item.tool.detail}</p>}
+                {item.tool?.input !== undefined && <section className="code-tool-section"><span className="code-tool-section-label">Input</span><pre className="code-tool-args">{item.tool.input}</pre></section>}
+                {item.tool?.output !== undefined && <section className="code-tool-section"><span className="code-tool-section-label">Output</span><pre className="code-tool-output">{item.tool.output}</pre></section>}
+                {item.text !== undefined && <pre className="code-tool-text">{item.text}</pre>}
+            </>}
+        </details> : reasoning ? <details className="code-thinking" open={open}
+            onToggle={event => onExpandedChange?.(item.itemId, event.currentTarget.open)}>
+            <summary className={`code-thinking-summary${item.status === 'running' ? ' code-tool-name-running' : ''}`}>{item.status === 'running' ? 'Thinking…' : 'Reasoning'}</summary>
+            {open && <div className="code-thinking-text">{item.text}</div>}
         </details> : <>
-            <span className="code-message-role">{label}{assistant && item.phase && item.phase !== 'unknown' ? ` · ${item.phase === 'final' ? 'Final' : 'Commentary'}` : ''}
-                {(assistant || user || item.kind === 'permission_request') && ` · ${status}`}</span>
+            <span className="code-message-role">{label}{assistant && item.phase === 'commentary' ? ' · Commentary' : ''}
+                {note && ` · ${unsent ? 'Sending' : note}`}</span>
             <div className="code-message-text">{assistant ? <ItemMarkdown item={item} identity={`${sessionKey}:${item.itemId}`} onOpenLocalFile={onOpenLocalFile} />
                 : <span className="code-plain-text">{item.text ?? item.permission?.title ?? ''}</span>}</div>
             {item.permission?.detail && <p className="code-plain-text">{item.permission.detail}</p>}
@@ -55,18 +118,62 @@ export function CodeTranscript({ items, provider, sessionKey, workingDir, loadin
     onOpenLocalFile?: ((path: string) => void) | undefined;
 }) {
     const transcriptRef = useRef<HTMLDivElement>(null);
-    const itemsRef = useRef(items); itemsRef.current = items;
+    const visible = useMemo(() => items.filter(item => !HIDDEN_KINDS.has(item.kind)), [items]);
+    const itemsRef = useRef(visible); itemsRef.current = visible;
+    // What the reader chose, which is not the same as what is open: a failed
+    // call opens itself, so "not in the map" and "the reader closed it" have to
+    // be different states or the auto-open reopens it on the next render.
+    // Scoped by session so the reserved pending-user id cannot carry one
+    // session's disclosure into another, and bounded so a long-lived tab does
+    // not accumulate ids for sessions it will never show again.
+    const [openRows, setOpenRows] = useState<ReadonlyMap<string, boolean>>(() => new Map());
+    // `getItemKey` is called by the virtualizer outside render, so it reads the
+    // choice through a ref; the callback identity is refreshed below so the
+    // virtualizer actually re-keys after a toggle.
+    const openRef = useRef(openRows); openRef.current = openRows;
     const [historyPending, setHistoryPending] = useState(false);
     const [historyError, setHistoryError] = useState<{ sessionKey: string; message: string } | null>(null);
     const historyGuard = useRef(false);
-    const firstId = items[0]?.itemId;
-    const getItemKey = useCallback((index: number) => `${sessionKey}:${itemsRef.current[index]?.itemId ?? index}`, [sessionKey, firstId]);
+    const firstId = visible[0]?.itemId;
+    // The disclosure is part of the key, because a measured size always beats an
+    // estimate: without it a row measured while collapsed would keep that height
+    // after it expands, and no better estimate could correct it. Opening a row
+    // gives it a key that has never been measured, so it falls back to the
+    // estimate until the ResizeObserver reports the real height. The identity
+    // that has to stay stable is the DOM node's, which comes from the React
+    // `key` on the row, and that is unchanged.
+    const getItemKey = useCallback((index: number) => {
+        const item = itemsRef.current[index];
+        if (!item) return `${sessionKey}:${index}`;
+        return `${sessionKey}:${item.itemId}${isRowOpen(openRef.current, sessionKey, item) ? ':open' : ''}`;
+    }, [sessionKey, firstId, openRows]);
     const estimateSize = useCallback((index: number) => {
         const item = itemsRef.current[index];
-        return item?.kind === 'tool_call' || item?.kind === 'reasoning' ? 64 : 64 + Math.min(420, (item?.text?.length ?? 0) / 6);
-    }, []);
-    const virtual = useCodeTranscriptVirtualRows({ count: items.length, resetKey: sessionKey, scrollElementRef: transcriptRef, getItemKey, estimateSize });
-    const { showJump, jumpToLatest } = useCodeTranscriptScroll({ items, sessionKey, transcriptRef, virtual });
+        const collapsible = item?.kind === 'tool_call' || item?.kind === 'file_change' || item?.kind === 'reasoning';
+        // A collapsible row is one line until someone opens it. Estimating an
+        // open row at one line is what makes the scrollbar disagree with the
+        // content, so the estimate has to follow the disclosure.
+        if (!collapsible) return 64 + Math.min(420, (item?.text?.length ?? 0) / 6);
+        return item && isRowOpen(openRows, sessionKey, item) ? EXPANDED_ROW_PX : COLLAPSED_ROW_PX;
+    }, [openRows, sessionKey]);
+    const virtual = useCodeTranscriptVirtualRows({ count: visible.length, resetKey: sessionKey, scrollElementRef: transcriptRef, getItemKey, estimateSize });
+    const { showJump, jumpToLatest } = useCodeTranscriptScroll({ items: visible, sessionKey, transcriptRef, virtual });
+    const setExpanded = useCallback((itemId: string, open: boolean) => {
+        const key = `${sessionKey}:${itemId}`;
+        setOpenRows(current => {
+            if (current.get(key) === open) return current;
+            const next = new Map(current);
+            next.delete(key); next.set(key, open);
+            // Same bound as the scroll anchors: remembering every row a reader
+            // ever touched is not worth an unbounded map. Re-inserting above
+            // keeps the row just acted on newest, so it is never the one evicted.
+            if (next.size > MAX_OPEN_ROWS) {
+                const oldest = next.keys().next().value;
+                if (oldest !== undefined) next.delete(oldest);
+            }
+            return next;
+        });
+    }, [sessionKey]);
     async function older() {
         if (historyGuard.current) return;
         historyGuard.current = true; setHistoryPending(true); setHistoryError(null);
@@ -92,14 +199,17 @@ export function CodeTranscript({ items, provider, sessionKey, workingDir, loadin
             {historyError?.sessionKey === sessionKey && <span className="code-action-error" role="alert">{historyError.message}</span>}
         </div>
         <div ref={transcriptRef} className="code-transcript" role="log" aria-label="Code transcript" aria-live="off" tabIndex={0} onKeyDown={keyboard}>
-            {!items.length ? <div className="code-transcript-empty"><p>{loading ? 'Loading conversation…' : 'Type a prompt below to start this conversation.'}</p>
+            {!visible.length ? <div className="code-transcript-empty"><p>{loading ? 'Loading conversation…' : 'Type a prompt below to start this conversation.'}</p>
                 <p className="code-transcript-cwd">Workspace: {workingDir || 'not set'}</p></div>
                 : <div className="code-transcript-virtual-spacer" style={{ height: virtual.totalSize }}>
                     {virtual.virtualItems.map(row => {
-                        const item = items[row.index];
+                        const item = visible[row.index];
                         return item ? <div key={row.key} ref={virtual.measureElement} className="code-transcript-virtual-row"
                             data-code-transcript-idx={row.index} style={{ transform: `translateY(${row.start}px)` }}>
-                            <CodeTranscriptItem item={item} provider={provider} sessionKey={sessionKey} onOpenLocalFile={onOpenLocalFile} />
+                            <CodeTranscriptItem item={item} provider={provider} sessionKey={sessionKey}
+                                workingDir={workingDir} onOpenLocalFile={onOpenLocalFile}
+                                expanded={isRowOpen(openRows, sessionKey, item)}
+                                onExpandedChange={setExpanded} />
                         </div> : null;
                     })}
                 </div>}

package/public/manager/src/code/CodeWorkbench.tsx

@@ -1,9 +1,11 @@
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import type { CodeControllerModel } from './code-controller-types';
 import { CodeComposer } from './CodeComposer';
 import { ComposerFooter } from './ComposerFooter';
 import { CodePermissionQueue } from './CodePermissionQueue';
 import { CodeTranscript } from './CodeTranscript';
+import { CodeToastHost } from './CodeToastHost';
+import { applyCodeNotice, dismissCodeToast, type CodeNotice, type CodeToast } from './code-toasts';
 import { CodeWorkspaceHeader } from './CodeWorkspaceHeader';
 import { codeCanResume } from './code-types';
 
@@ -13,6 +15,15 @@ export function CodeWorkbench({ controller: c, endpointKey, onOpenLocalFile }: P
     const [actionError, setActionError] = useState<{ key: string; message: string } | null>(null);
     const [retrying, setRetrying] = useState<string | null>(null);
     const retryGuard = useRef(new Set<string>());
+    const [toasts, setToasts] = useState<readonly CodeToast[]>([]);
+    // Notices are not cleared on a session change. The one notice that exists
+    // is derived from the current policy and re-raised by the footer on every
+    // mount, so wiping the stack here would delete it at the moment a draft
+    // becomes a running session -- exactly when it matters most.
+    const notify = useCallback((notice: CodeNotice) => {
+        setToasts(current => applyCodeNotice(current, notice));
+    }, []);
+    const dismiss = useCallback((id: string) => setToasts(current => dismissCodeToast(current, id)), []);
     const archived = c.session?.archivedAt != null;
     const stopping = c.session?.status === 'stopping' || c.operation.kind === 'stopping';
     const busy = c.busy || stopping || c.session?.status === 'starting' || c.session?.status === 'streaming';
@@ -69,6 +80,9 @@ export function CodeWorkbench({ controller: c, endpointKey, onOpenLocalFile }: P
             {canResume ? <button type="button" onClick={() => perform(c.resume)}>Resume session</button>
                 : <><span>{c.session.resume.reason ?? 'Resume is not currently available.'}</span><button type="button" onClick={c.newSession}>New session</button></>}
         </section>}
+        {/* Directly above the transcript, so a notice sits over the conversation
+            rather than over the workspace header and its picker. */}
+        <CodeToastHost toasts={toasts} onDismiss={dismiss} />
         <CodeTranscript items={c.items} provider={c.session?.provider ?? c.selection.provider} sessionKey={sessionKey}
             workingDir={c.session?.cwd ?? c.selection.cwd} loading={c.loading} hasOlderHistory={c.hasOlderHistory}
             loadOlderHistory={c.loadOlderHistory} permissionCount={c.permissions.length} onOpenLocalFile={onOpenLocalFile} />
@@ -82,7 +96,7 @@ export function CodeWorkbench({ controller: c, endpointKey, onOpenLocalFile }: P
             <div className="code-composer-surface" aria-label="Code composer controls">
                 <CodeComposer key={`composer:${sessionKey}`} inputText={c.input} canSend={canSend} busy={busy} canStop={canStop} stopping={stopping}
                     pending={c.pending} readOnly={archived} onInputChange={c.setInput} onSubmit={c.send} onStop={c.stop} />
-                <ComposerFooter key={`footer:${sessionKey}`} controller={c} />
+                <ComposerFooter key={`footer:${sessionKey}`} controller={c} onNotice={notify} />
             </div>
         </div>
     </div>;

package/public/manager/src/code/ComposerFooter.tsx

@@ -1,48 +1,80 @@
-import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
+import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import type { CodeControllerModel } from './code-controller-types';
 import type { CodeCreateSessionRequest } from '../../../../src/code-mode/wire';
 import { CODE_POLICY_DETAILS, CODE_POLICY_LABELS, CODE_RUNTIME_LABELS } from './code-types';
+import type { CodeNotice } from './code-toasts';
+import { CheckGlyph, ProviderGlyph } from './ProviderGlyph';
+import { ContextUsageMeter } from './ContextUsageMeter';
 
-type MenuOption<T extends string> = { value: T; label: string; detail?: string | undefined; disabled?: boolean };
-export function CodeFooterMenu<T extends string>({ label, value, options, disabled, onChange, displayValue }: {
-    label: string; value: T; options: MenuOption<T>[]; disabled: boolean; onChange(value: T): void; displayValue?: string;
+type MenuOption<T extends string> = {
+    value: T; label: string; detail?: string | undefined; disabled?: boolean; icon?: ReactNode;
+};
+
+/**
+ * One dropup for every composer control.
+ *
+ * `triggerContent` replaces the label+value pair for icon-only controls; the
+ * accessible name still comes from `label`, so an icon trigger is never
+ * anonymous. `filterable` adds a search field, which the model menu needs
+ * because a live Codex catalog can carry 28+ routed ids.
+ */
+export function CodeFooterMenu<T extends string>({ label, value, options, disabled, onChange, displayValue,
+    triggerContent, filterable, filterPlaceholder, className, title }: {
+    label: string; value: T; options: MenuOption<T>[]; disabled: boolean; onChange(value: T): void;
+    displayValue?: string; triggerContent?: ReactNode; filterable?: boolean; filterPlaceholder?: string;
+    className?: string; title?: string;
 }) {
     const id = useId();
-    const trigger = useRef<HTMLButtonElement>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
     const menu = useRef<HTMLDivElement>(null);
+    const search = useRef<HTMLInputElement>(null);
     const [position, setPosition] = useState<{ left: number; bottom: number | 'auto'; top?: number; width: number; maxHeight: number } | null>(null);
+    const [query, setQuery] = useState('');
     const selected = options.find(option => option.value === value);
-    function close(restore = true) { setPosition(null); if (restore) trigger.current?.focus(); }
+    const visible = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        if (!filterable || !needle) return options;
+        return options.filter(option => option.value.toLowerCase().includes(needle) || option.label.toLowerCase().includes(needle));
+    }, [filterable, options, query]);
+    function close(restore = true) { setPosition(null); setQuery(''); if (restore) triggerRef.current?.focus(); }
     function open() {
-        const rect = trigger.current?.getBoundingClientRect();
+        const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect || disabled) return;
-        const width = Math.min(340, window.innerWidth - 28);
+        const width = Math.max(192, Math.min(filterable ? 340 : 260, window.innerWidth - 28));
         const above = Math.max(0, rect.top - 16);
         const below = Math.max(0, window.innerHeight - rect.bottom - 16);
         const common = { left: Math.max(14, Math.min(rect.left, window.innerWidth - width - 14)), width };
         setPosition(above >= below
-            ? { ...common, bottom: window.innerHeight - rect.top + 8, maxHeight: Math.min(280, above) }
-            : { ...common, bottom: 'auto', top: rect.bottom + 8, maxHeight: Math.min(280, below) });
+            ? { ...common, bottom: window.innerHeight - rect.top + 8, maxHeight: Math.min(288, above) }
+            : { ...common, bottom: 'auto', top: rect.bottom + 8, maxHeight: Math.min(288, below) });
     }
     useEffect(() => {
         if (!position) return;
-        const buttons = menu.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)');
-        const selectedButton = [...(buttons ?? [])].find(button => button.getAttribute('aria-selected') === 'true');
-        (selectedButton ?? buttons?.[0])?.focus();
+        // A filterable menu types first; otherwise land on the current choice so
+        // arrow keys move relative to what is already selected.
+        if (filterable) search.current?.focus();
+        else {
+            const buttons = menu.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)');
+            const current = [...(buttons ?? [])].find(button => button.getAttribute('aria-selected') === 'true');
+            (current ?? buttons?.[0])?.focus();
+        }
         const outside = (event: PointerEvent) => {
-            if (!menu.current?.contains(event.target as Node) && !trigger.current?.contains(event.target as Node)) close(false);
+            if (!menu.current?.contains(event.target as Node) && !triggerRef.current?.contains(event.target as Node)) close(false);
         };
         const resize = () => close(false);
         document.addEventListener('pointerdown', outside);
         window.addEventListener('resize', resize);
         return () => { document.removeEventListener('pointerdown', outside); window.removeEventListener('resize', resize); };
-    }, [position]);
-    useEffect(() => { if (disabled) setPosition(null); }, [disabled]);
+    }, [position, filterable]);
+    useEffect(() => { if (disabled) { setPosition(null); setQuery(''); } }, [disabled]);
     function navigate(event: KeyboardEvent<HTMLDivElement>) {
         if (event.key === 'Escape') { event.preventDefault(); close(); return; }
-        if (event.key === 'Tab') { event.preventDefault(); close(); return; }
+        // Tab closes the menu but keeps its own meaning: restoring focus to the
+        // trigger here would swallow the move and strand the user for one press.
+        if (event.key === 'Tab') { close(false); return; }
         const buttons = [...(menu.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ?? [])];
+        if (buttons.length === 0) return;
         const current = buttons.findIndex(button => button === document.activeElement);
         let index: number;
         if (event.key === 'ArrowDown') index = (current + 1) % buttons.length;
@@ -52,36 +84,69 @@ export function CodeFooterMenu<T extends string>({ label, value, options, disabl
         else return;
         event.preventDefault(); buttons[index]?.focus();
     }
-    return <div className="code-footer-menu">
-        <button ref={trigger} type="button" className="code-footer-menu-trigger" aria-label={label}
-            aria-haspopup="listbox" aria-expanded={Boolean(position)} aria-controls={position ? id : undefined}
-            disabled={disabled} title={selected?.detail} onClick={() => position ? close() : open()}
+    const shown = selected?.label ?? displayValue ?? (value || 'not selected');
+    const name = `${label}: ${shown}`;
+    return <div className={`code-footer-menu${className ? ` ${className}` : ''}`}>
+        <button ref={triggerRef} type="button" className={`code-footer-menu-trigger${triggerContent ? ' is-icon' : ''}`}
+            aria-label={name} aria-haspopup="listbox" aria-expanded={Boolean(position)} aria-controls={position ? id : undefined}
+            disabled={disabled} title={title ?? selected?.detail ?? name} onClick={() => position ? close() : open()}
             onKeyDown={event => { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); open(); } }}>
-            <span className="code-footer-label">{label}</span><strong>{selected?.label ?? displayValue ?? (value || 'Not selected')}</strong>
+            {triggerContent ?? <><span className="code-footer-label">{label}</span>
+                <strong>{selected?.label ?? displayValue ?? (value || 'Not selected')}</strong></>}
         </button>
         {position && createPortal(<div ref={menu} id={id} role="listbox" aria-label={label} className="code-footer-dropup code-footer-floating"
             style={position} onKeyDown={navigate}>
-            {options.map(option => <button type="button" role="option" aria-selected={option.value === value}
-                key={option.value} disabled={option.disabled} className="code-footer-dropup-option"
-                onClick={() => { onChange(option.value); close(); }}>
-                <span><strong>{option.label}</strong>{option.detail && <small>{option.detail}</small>}</span>
-            </button>)}
+            {filterable && <input ref={search} type="text" className="code-footer-filter" value={query}
+                aria-label={`Filter ${label.toLowerCase()}`} placeholder={filterPlaceholder ?? 'Filter…'}
+                onChange={event => setQuery(event.target.value)} />}
+            <div className="code-footer-dropup-list">
+                {visible.map(option => <button type="button" role="option" aria-selected={option.value === value}
+                    key={option.value} disabled={option.disabled} className="code-footer-dropup-option"
+                    title={option.detail ?? option.label}
+                    onClick={() => { onChange(option.value); close(); }}>
+                    {option.icon && <span className="code-footer-option-icon">{option.icon}</span>}
+                    <span className="code-footer-option-text"><strong>{option.label}</strong>{option.detail && <small>{option.detail}</small>}</span>
+                    {option.value === value && <CheckGlyph />}
+                </button>)}
+                {visible.length === 0 && <p className="code-footer-dropup-empty" role="note">No match for “{query.trim()}”.</p>}
+            </div>
         </div>, document.body)}
     </div>;
 }
 
-export function ComposerFooter({ controller: c }: { controller: CodeControllerModel }) {
+export function ComposerFooter({ controller: c, onNotice }: {
+    controller: CodeControllerModel;
+    onNotice?: ((notice: CodeNotice) => void) | undefined;
+}) {
     const selection = c.selection;
     const provider = c.catalog?.providers.find(entry => entry.id === selection.provider);
     const capabilities = c.session?.capabilities ?? provider?.capabilities;
     const locked = c.selectedId !== null;
     const disabled = c.pending || c.busy || c.creationUnknown || c.operation.kind !== 'idle' || (locked && (!c.synced || c.session?.status !== 'idle' || c.session?.archivedAt !== null));
-    const [modelText, setModelText] = useState(selection.model);
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const guard = useRef(false);
-    const modelSuggestions = useId();
-    useEffect(() => { setModelText(selection.model); }, [selection.model]);
+    const noticeRef = useRef(onNotice); noticeRef.current = onNotice;
+    // Announce the change, not the state. "Auto (YOLO)" as a permanent line
+    // stops being read after the first time; the moment it is switched on is
+    // the moment worth interrupting for. What the policy currently is stays
+    // legible on the Permission control itself.
+    useEffect(() => {
+        if (selection.permissionMode !== 'auto') {
+            // Leaving auto retires the warning immediately. A notice that
+            // outlived the policy would be stating something false about what
+            // the session is allowed to do.
+            noticeRef.current?.({ id: 'code:permission-mode', clear: true });
+            return;
+        }
+        // Derived from the current policy, not from a transition. The footer
+        // remounts when the draft becomes a real session, and a transition
+        // detector reads that remount as "no change" -- which deleted the
+        // warning at the exact moment the session started acting on it.
+        noticeRef.current?.({ id: 'code:permission-mode', variant: 'warning',
+            message: 'Auto (YOLO): actions may run without approval.',
+            durationMs: Number.POSITIVE_INFINITY });
+    }, [selection.permissionMode]);
     async function change(patch: Partial<CodeCreateSessionRequest>) {
         if (disabled || guard.current) return;
         guard.current = true; setSaving(true); setError(null);
@@ -90,40 +155,59 @@ export function ComposerFooter({ controller: c }: { controller: CodeControllerMo
         finally { guard.current = false; setSaving(false); }
     }
     const controlsDisabled = disabled || saving;
-    const modelDisabled = controlsDisabled;
+    // A model may accept a narrower effort set than the provider union, so the
+    // per-model set is preferred. An open session is additionally bound by the
+    // capabilities it stored at creation -- the server checks both -- so offer
+    // the intersection rather than a value the session would reject.
+    const catalogEfforts = provider?.effortsByModel?.[selection.model] ?? capabilities?.efforts ?? [];
+    const sessionEfforts = c.session?.capabilities.efforts;
+    const modelEfforts = sessionEfforts
+        ? catalogEfforts.filter(value => sessionEfforts.includes(value))
+        : catalogEfforts;
+    const models = provider?.models ?? [];
     return <>
         <div className="code-composer-footer">
-            <CodeFooterMenu label="Runtime" value={selection.provider} disabled={locked ? !c.catalog : controlsDisabled || !c.catalog}
+            <CodeFooterMenu label="Runtime" value={selection.provider} className="code-footer-runtime"
+                disabled={locked ? !c.catalog : controlsDisabled || !c.catalog}
+                triggerContent={<ProviderGlyph provider={selection.provider} />}
+                title={CODE_RUNTIME_LABELS[selection.provider]}
                 options={(Object.keys(CODE_RUNTIME_LABELS) as Array<keyof typeof CODE_RUNTIME_LABELS>).map(id => {
                     const entry = c.catalog?.providers.find(p => p.id === id);
                     return { value: id, label: locked && id !== selection.provider ? `New ${CODE_RUNTIME_LABELS[id]} session` : CODE_RUNTIME_LABELS[id],
                         disabled: !entry?.available || (locked && id === selection.provider),
+                        icon: <ProviderGlyph provider={id} />,
                         detail: entry?.reason ?? (entry?.available ? undefined : 'Availability unknown') };
                 })} onChange={value => {
                     if (locked) void c.setSelection({ provider: value }).catch(err => setError(err instanceof Error ? err.message : String(err)));
                     else void change({ provider: value });
                 }} />
-            <form className="code-footer-model-form" onSubmit={event => { event.preventDefault(); if (modelText.trim() && !modelDisabled) void change({ model: modelText.trim() }); }}>
-                <label className="code-footer-label" htmlFor={`${modelSuggestions}-input`}>Model</label>
-                <input id={`${modelSuggestions}-input`} aria-label="Native model ID" list={modelSuggestions} value={modelText}
-                    disabled={modelDisabled} onChange={event => setModelText(event.target.value)}
-                    onKeyDown={event => { if (event.key === 'Escape') { setModelText(selection.model); event.currentTarget.blur(); } }} />
-                <datalist id={modelSuggestions}>{provider?.models.map(model => <option key={model} value={model} />)}</datalist>
-                {modelText !== selection.model && <button type="submit" disabled={modelDisabled || !modelText.trim()}>Apply</button>}
-            </form>
-            {!!capabilities?.efforts.length && <CodeFooterMenu label="Effort" value={selection.effort ?? ''}
-                options={[{ value: '', label: 'Native default' }, ...capabilities.efforts.map(value => ({ value, label: value }))]}
-                disabled={controlsDisabled} onChange={value => void change({ effort: value || null })} />}
-            <CodeFooterMenu label="Permission" value={selection.permissionMode} displayValue={CODE_POLICY_LABELS[selection.permissionMode]} disabled={controlsDisabled || !capabilities?.permissions}
+            <CodeFooterMenu label="Permission" value={selection.permissionMode} displayValue={CODE_POLICY_LABELS[selection.permissionMode]}
+                disabled={controlsDisabled || !capabilities?.permissions}
                 options={(capabilities?.permissionModes ?? []).map(value => ({ value, label: CODE_POLICY_LABELS[value], detail: CODE_POLICY_DETAILS[value] }))}
                 onChange={value => void change({ permissionMode: value })} />
+            <span className="code-composer-footer-spacer" aria-hidden="true" />
+            <ContextUsageMeter usage={c.session?.contextUsage} />
+            <CodeFooterMenu label="Model" value={selection.model} className="code-footer-model"
+                disabled={controlsDisabled || models.length === 0} filterable filterPlaceholder="Filter models…"
+                displayValue={selection.model || 'Select model'}
+                options={models.map(value => ({ value, label: value }))}
+                onChange={value => void change({ model: value })} />
+            {modelEfforts.length > 0 && <CodeFooterMenu label="Effort" value={selection.effort ?? ''}
+                className="code-footer-effort" displayValue={selection.effort ?? 'Default'}
+                options={[{ value: '', label: 'Native default' }, ...modelEfforts.map(value => ({ value, label: value }))]}
+                disabled={controlsDisabled} onChange={value => void change({ effort: value || null })} />}
             {locked && <button type="button" className="code-inline-action" onClick={c.newSession}>New session</button>}
         </div>
+        {models.length === 0 && provider?.available && <div className="code-selection-notice">This runtime published no models.
+            <button type="button" className="code-inline-action" onClick={() => { void c.refresh().catch(err => setError(err instanceof Error ? err.message : String(err))); }}>Refresh catalog</button>
+        </div>}
         {!provider?.available && <div className="code-selection-notice">{provider?.reason ?? 'Runtime availability has not been confirmed.'}
             <button type="button" className="code-inline-action" onClick={() => { void c.refresh().catch(err => setError(err instanceof Error ? err.message : String(err))); }}>Refresh availability</button>
         </div>}
-        {selection.permissionMode === 'auto' && <p className="code-policy-note">Auto (YOLO): actions may run without approval.</p>}
         {(saving || c.operation.kind === 'patching') && <span role="status">Saving settings…</span>}
+        {/* Stays inline. A failed setting change is something the reader has to
+            act on -- the control reverted and this is the only account of why --
+            and it must not leave on a timer before they have read it. */}
         {error && <div className="code-action-error" role="alert">{error}</div>}
     </>;
 }

package/public/manager/src/code/ContextUsageMeter.tsx

@@ -0,0 +1,72 @@
+import { useId, useState } from 'react';
+import type { CodeContextUsage } from '../../../../src/code-mode/wire';
+import { contextUsageLabel, contextUsageLevel, contextUsageView, formatExactTokens, formatOptionalTokens, formatTokens } from './context-usage';
+
+/**
+ * How full the context window is, as a ring beside the composer controls.
+ *
+ * It renders nothing when the runtime has not reported usage, rather than
+ * showing a zero that would read as measured. When a count arrives without a
+ * window there is no ring, because a proportion of an unknown total is not a
+ * proportion.
+ */
+export function ContextUsageMeter({ usage }: { usage: CodeContextUsage | undefined }) {
+    const view = contextUsageView(usage);
+    // Hover and focus are separate reasons to show the detail, tracked
+    // separately. One boolean made them fight: clicking closed a panel the
+    // pointer had opened, and blurring closed one the pointer was still over.
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const open = hovered || focused;
+    const detailId = useId();
+    if (view.state === 'hidden') return null;
+    const label = contextUsageLabel(view);
+    const level = view.state === 'measured' ? (view.over ? 'critical' : contextUsageLevel(view.percent)) : 'normal';
+    const circumference = 2 * Math.PI * 7;
+    const filled = view.state === 'measured' ? (view.percent / 100) * circumference : 0;
+    return <div className="code-context-usage"
+        onPointerEnter={() => setHovered(true)} onPointerLeave={() => setHovered(false)}>
+        {/* Described by, not expanded: the panel is a role="note" description
+            and its numbers are already in this button's accessible name, so
+            announcing an expandable widget would offer a control that reveals
+            nothing new. */}
+        <button type="button" className={`code-context-trigger is-${level}`}
+            aria-label={label} aria-describedby={open ? detailId : undefined}
+            onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}>
+            {view.state === 'measured'
+                ? <svg className="code-context-ring" viewBox="0 0 18 18" aria-hidden="true">
+                    <circle className="code-context-ring-track" cx="9" cy="9" r="7" />
+                    <circle className="code-context-ring-fill" cx="9" cy="9" r="7"
+                        strokeDasharray={`${filled} ${circumference}`} />
+                </svg>
+                : null}
+            <span className="code-context-value">
+                {view.state !== 'measured' ? formatTokens(view.usedTokens) : view.over ? 'over' : `${view.percent}%`}
+            </span>
+        </button>
+        {open && <div id={detailId} className="code-context-detail" role="note">
+            <p className="code-context-detail-total">
+                {view.state === 'measured'
+                    ? `${formatTokens(view.usedTokens)} of ${formatTokens(view.maxTokens)} tokens`
+                    : `${formatTokens(view.usedTokens)} tokens used`}
+            </p>
+            {view.state === 'measured' && view.over
+                && <p className="code-context-detail-note">Past the window the runtime last reported.</p>}
+            {view.state === 'counted' && <p className="code-context-detail-note">This runtime did not report a context window.</p>}
+            <dl className="code-context-breakdown">
+                {/* Exact here, because the rounded form on the trigger cannot be
+                    reconstructed into it and this is the only place the real
+                    number appears. */}
+                <div><dt>Used</dt><dd>{formatExactTokens(usage?.totalTokens ?? null)}</dd></div>
+                <div><dt>Input</dt><dd>{formatOptionalTokens(usage?.inputTokens ?? null)}</dd></div>
+                <div><dt>Cached</dt><dd>{formatOptionalTokens(usage?.cachedInputTokens ?? null)}</dd></div>
+                <div><dt>Output</dt><dd>{formatOptionalTokens(usage?.outputTokens ?? null)}</dd></div>
+                <div><dt>Reasoning</dt><dd>{formatOptionalTokens(usage?.reasoningOutputTokens ?? null)}</dd></div>
+            </dl>
+            {/* Spend, not occupancy: it counts every turn's tokens including the
+                prompt resent each time, so it passes the window in ordinary use. */}
+            {usage?.processedTokens != null && <p className="code-context-detail-note">
+                Processed across the conversation: {formatTokens(usage.processedTokens)}</p>}
+        </div>}
+    </div>;
+}