@itookit/dsht 0.3.3 → 0.3.7

package/dist/ui/app.js

@@ -5,9 +5,8 @@ import { mocha, ThemeContext } from "./theme/index.js";
 import { Box, Text, measureElement, useApp, useInput, useStdout } from 'ink';
 import { useMouseWheel } from "./input/mouse.js";
 import { TextInput } from "./input/input.js";
-import { InputHistory } from "./input/history.js";
 import { ReferenceMenu } from "./input/references.js";
-import { historyLayout, releaseHistoryLayout } from "../session/history.js";
+import { historyLayout } from "../session/history.js";
 import { toolLine } from "../session/transcript.js";
 import { activeReference, fileMention } from "../session/references.js";
 import { CostPanel } from "./dialogs/cost.js";
@@ -19,10 +18,12 @@ import { CopyMode } from "./copy-mode.js";
 import { HelpPanel, HistoryDialog, ModelDialog, PickerScreen, QueueDialog, QueuedPreview, RemovalDialog, SearchResultsDialog, ThoughtsDialog } from "./dialogs/index.js";
 import { COMMAND_HINTS, completeCommand as completeDraft, suggestedCommands } from "./commands/registry.js";
 import { classifySubmission } from "./commands/parse.js";
-import { sessionLabel, sessionStatus, workspaceStatus } from "../session/navigation.js";
+import { ROLLUP_LEGEND, sessionLabel, sessionStatus, workspaceCounts, workspaceDetail, workspaceSegments, workspaceStatus } from "../session/navigation.js";
 import { array, errorText, object, safeText, string } from "../transport/wire.js";
 /** Transient notices expire; interactive panels remain open until dismissed. */
 const PANEL_LIFETIME_MS = 10_000;
+/** Pages one boundary recall press may walk before it reports that nothing older holds a prompt. */
+const RECALL_PAGE_SCAN = 20;
 /** The caller owns starting and stopping the controller around the Ink render lifetime.
  * @param props - Controller, panel lifetime and semantic theme.
  * @returns The rendered terminal interface.
@@ -35,43 +36,26 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     const { exit } = useApp();
     const { stdout } = useStdout();
     const [copyMode, setCopyMode] = useState(false);
-    const [input, updateInput] = useState('');
-    const draft = useRef('');
-    const inputHistory = useRef(new InputHistory());
-    useLayoutEffect(() => {
-        const history = new InputHistory();
-        inputHistory.current = history;
-        if (!state.transcript.ready)
-            return;
-        const messages = state.transcript.messagesForWidth(Math.max(20, (stdout.columns ?? 100) - 2));
-        // Seed once per loaded session, never scan historical messages on stream ticks or arrow presses.
-        const prompts = messages.filter(message => message.role === 'You').slice(-200);
-        for (const message of prompts)
-            history.record(message.text.replace(/\r?\n/g, ' ').trim());
-    }, [state.sessionId, state.transcript, state.transcript.ready]);
-    const [cursor, setCursor] = useState(0);
-    // Input callbacks may run before Ink refreshes the controlled field's listener.
+    // The composer belongs to the selected session: it resets when another session opens, and every
+    // callback reads the controller rather than a render closure Ink may not have refreshed yet.
+    const { draft: input, cursor } = state.session.composer;
+    const historyPaging = useRef(false);
     const setInput = (value, recalled = false) => {
         if (!recalled)
-            inputHistory.current.reset();
+            controller.resetRecall();
         // A new message draft returns the view to the live end, so composing never needs a scroll first.
         // A slash command is not a message, and the reader keeps their place while typing one.
-        if (state.screen === 'chat' && draft.current === '' && value !== '' && !value.startsWith('/'))
-            setScroll(0);
-        draft.current = value;
-        updateInput(value);
-        setCursor(value.length);
+        if (state.screen === 'chat' && controller.composer.draft === '' && value !== '' && !value.startsWith('/'))
+            controller.setScroll(0);
+        controller.setComposer(value);
     };
-    const [historyWindow, setHistoryWindow] = useState();
+    // The reading view is session-owned too: which record is shown, where the reader is, and what is
+    // expanded. `SessionInfo` releases the detached window, so the composer and this view reset together.
+    const { window: historyWindow, scroll, folds: reasoningOverrides, liveReasoning } = state.session.view;
     const [historyLoading, setHistoryLoading] = useState();
-    const [historyMatches, setHistoryMatches] = useState();
-    const displayTranscript = historyWindow ?? state.transcript;
+    const displayTranscript = historyWindow ?? state.session.record;
     const displayRef = useRef(displayTranscript);
     displayRef.current = displayTranscript;
-    useEffect(() => () => { if (historyWindow) {
-        releaseHistoryLayout(historyWindow);
-        historyWindow.dispose();
-    } }, [historyWindow]);
     const conversationBox = useRef(null);
     const [conversationRows, setConversationRows] = useState(20);
     useLayoutEffect(() => {
@@ -81,23 +65,18 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                 setConversationRows(height);
         }
     });
-    const [scroll, setScroll] = useState(0);
-    const [liveReasoning, setLiveReasoning] = useState('row');
     const [removal, setRemoval] = useState();
-    const [models, setModels] = useState();
-    const [thoughtList, setThoughtList] = useState(false);
-    const [queueOpen, setQueueOpen] = useState(false);
-    const [historyQuery, setHistoryQuery] = useState();
-    const [contentSearch, setContentSearch] = useState(false);
-    const [searchResults, setSearchResults] = useState();
+    // Session-owned panels: visibility and query text only, because every row comes from the record.
+    const { thoughts: thoughtList, queue: queueOpen, model: models, history, search: searchResults } = state.session.panels;
+    const historyQuery = history?.query;
+    const contentSearch = history?.contentSearch === true;
+    const historyMatches = history?.matches;
     const historyAbort = useRef(undefined);
     useEffect(() => () => historyAbort.current?.abort(), []);
     const [costExpanded, setCostExpanded] = useState(false);
     const [statusExpanded, setStatusExpanded] = useState(false);
-    const [reasoningOverrides, setReasoningOverrides] = useState(new Set());
     const reasoning = 'row';
-    useEffect(() => { setReasoningOverrides(new Set()); setModels(undefined); setThoughtList(false); setHistoryWindow(undefined); setHistoryMatches(undefined); }, [state.transcript]);
-    useEffect(() => { setLiveReasoning('row'); }, [state.transcript, state.transcript.liveAttemptKey]);
+    useEffect(() => { controller.setLiveReasoning('row'); }, [state.session.record, state.session.record.liveAttemptKey]);
     const [notice, setNotice] = useState();
     const [help, setHelp] = useState(false);
     const [helpPage, setHelpPage] = useState(0);
@@ -110,11 +89,10 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     // three-row composer above it never shrink, so only the remainder of the screen height shows rows.
     const [statusBarRows, setStatusBarRows] = useState(1);
     const statusViewRows = Math.max(1, (stdout.rows ?? 30) - 9 - (statusBarRows - 1));
-    const [answers, setAnswers] = useState({});
-    const [optionState, setOptionState] = useState();
-    const [approvalSelection, setApprovalSelection] = useState();
-    const [referenceIndex, setReferenceIndex] = useState(0);
-    const [dismissedReference, dismissReference] = useState();
+    // Answers and menu highlights are session-owned too: the waterfall itself is derived per session
+    // by the controller, so only the local selection is kept here.
+    const { answers, option: optionState, approval: approvalSelection } = state.session.interaction;
+    const { index: referenceIndex, dismissed: dismissedReference } = state.session.reference;
     const [lookup, setLookup] = useState();
     // Interactive panels remain stable while read; only transient notices expire.
     useEffect(() => {
@@ -130,14 +108,14 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     useEffect(() => {
         if (copyMode || contentSearch || historyQuery === undefined)
             return;
-        const timer = setTimeout(() => { setHistoryQuery(undefined); setHistoryMatches(undefined); }, panelLifetimeMs);
+        const timer = setTimeout(() => { controller.setHistoryPanel(undefined); }, panelLifetimeMs);
         return () => clearTimeout(timer);
     }, [historyQuery, contentSearch, panelLifetimeMs, copyMode]);
     const pending = state.pending[0];
     const queued = controller.telemetry.pending(state.sessionId).filter(item => item.placement !== 'context');
-    useEffect(() => { setQueueOpen(false); }, [state.sessionId, pending?.eventId]);
+    useEffect(() => { controller.openQueue(false); }, [state.sessionId, pending?.eventId]);
     // A replayed interaction (same eventId after a reconnect) starts unselected again.
-    useEffect(() => { setApprovalSelection(undefined); }, [state.sessionId, state.online, pending?.eventId]);
+    useEffect(() => { controller.setApproval(undefined); }, [state.sessionId, state.online, pending?.eventId]);
     const token = state.screen === 'chat' && state.online && !state.busy && !pending
         && !input.startsWith('/') && dismissedReference !== input && cursor === input.length
         ? activeReference(input) : undefined;
@@ -152,7 +130,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             return;
         const abort = new AbortController();
         setLookup(undefined);
-        setReferenceIndex(0);
+        controller.setReferenceIndex(0);
         void controller.references(activeReference(input).query, abort.signal).then(items => {
             if (!abort.signal.aborted)
                 setLookup({ draft: input, sessionId: state.sessionId, items });
@@ -164,7 +142,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     }, [controller, input, state.sessionId, referenceOpen]);
     const pickReference = () => {
         const candidate = matches?.items[referenceIndex];
-        if (!candidate || !token || draft.current !== input)
+        if (!candidate || !token || controller.composer.draft !== input)
             return;
         const mention = fileMention(candidate, token.quoted);
         setInput(input.slice(0, -token.prefix.length) + mention + (candidate.kind === 'file' ? ' ' : ''));
@@ -197,26 +175,16 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     // parked rather than typed into, and comes back when the last one closes. A question switches to
     // the composer itself for a free-text or "Other" answer, so it keeps the keys then.
     const answerPending = !!pending && (pending.event === 'approval/request' || options.length > 0 && !choiceState.custom);
-    const parkedDraft = useRef('');
     useEffect(() => {
         if (answerPending) {
-            if (draft.current === '')
-                return;
-            parkedDraft.current = draft.current;
-            draft.current = '';
-            updateInput('');
-            setCursor(0);
+            controller.parkComposer();
             return;
         }
-        if (pending || parkedDraft.current === '')
+        if (pending)
             return;
-        // Restoring writes the states directly: the draft was neither recalled from history nor a new
-        // message, so it must not move a reader's scroll position.
-        const restore = parkedDraft.current;
-        parkedDraft.current = '';
-        draft.current = restore;
-        updateInput(restore);
-        setCursor(restore.length);
+        // Restoring writes the draft directly: it was neither recalled from history nor a new message,
+        // so it must not move a reader's scroll position.
+        controller.restoreComposer();
     }, [answerPending, pending]);
     const approvalKeysActive = pending?.event === 'approval/request' && !copyMode && !panelBlocksKeys;
     const approvalIndex = approvalSelection?.eventId === eventId ? approvalSelection.index : -1;
@@ -227,11 +195,13 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         const next = [...answered, answer];
         if (next.length === questions.length) {
             await controller.answer({ answers: next });
-            setAnswers(previous => { const rest = { ...previous }; delete rest[eventId]; return rest; });
+            const rest = { ...controller.interaction.answers };
+            delete rest[eventId];
+            controller.setAnswers(rest);
         }
         else
-            setAnswers(previous => ({ ...previous, [eventId]: next }));
-        setOptionState(undefined);
+            controller.setAnswers({ ...controller.interaction.answers, [eventId]: next });
+        controller.setOption(undefined);
     };
     const operate = (fn) => { void controller.perform(fn); };
     const requestRemoval = async (kind, query) => {
@@ -257,37 +227,48 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             historyAbort.current.abort();
             // Esc also leaves a history list that was already on screen when the load was aborted.
             if (key.escape && historyQuery !== undefined) {
-                setHistoryQuery(undefined);
-                setHistoryMatches(undefined);
+                controller.setHistoryPanel(undefined);
             }
             return;
         }
         if ((key.escape || key.ctrl && _value === 'c') && controller.state.pending.length) {
-            if (key.ctrl && draft.current)
+            if (key.ctrl && controller.composer.draft)
                 setInput('');
             if (key.escape) {
-                setOptionState({ ...choiceState, custom: false });
-                setApprovalSelection(undefined);
+                controller.setApproval(undefined);
                 setRemoval(undefined);
-                setModels(undefined);
-                setThoughtList(false);
-                setSearchResults(undefined);
-                setHistoryQuery(undefined);
-                setHistoryMatches(undefined);
+                controller.setModelPanel(undefined);
+                controller.openThoughts(false);
+                controller.setSearchPanel(undefined);
+                controller.setHistoryPanel(undefined);
                 setHelp(false);
                 setCostExpanded(false);
                 setStatusExpanded(false);
+                // A question batch is one request, so Esc leaves the whole set the way the Web client's
+                // close button does. The free-text row keeps its own step back: its first Esc returns to
+                // the options, and only the next one dismisses. Approval keeps every choice explicit.
+                if (pending?.event === 'user-questions/request' && !choiceState.custom) {
+                    if (controller.state.online && !controller.state.busy && controller.state.pending[0]?.eventId === eventId) {
+                        controller.setOption(undefined);
+                        const rest = { ...controller.interaction.answers };
+                        delete rest[eventId];
+                        controller.setAnswers(rest);
+                        operate(() => controller.dismissQuestion());
+                    }
+                    return;
+                }
+                controller.setOption({ ...choiceState, custom: false });
             }
             return;
         }
-        if (approvalKeysActive && !draft.current && controller.state.online && !controller.state.busy
+        if (approvalKeysActive && !controller.composer.draft && controller.state.online && !controller.state.busy
             && controller.state.pending[0]?.eventId === eventId && !key.ctrl && !key.meta) {
             const digit = /^[1-3]$/.test(_value) ? Number(_value) - 1 : -1;
             if (digit >= 0 || key.upArrow || key.downArrow) {
                 // An unselected list enters at the first, non-destructive choice, so a stray arrow plus Enter cannot cancel.
                 const index = digit >= 0 ? digit : approvalIndex < 0 ? 0
                     : Math.max(0, Math.min(2, approvalIndex + (key.upArrow ? -1 : 1)));
-                setApprovalSelection({ eventId, index });
+                controller.setApproval({ eventId, index });
                 return;
             }
             if (key.return) {
@@ -297,10 +278,10 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                 return;
             }
         }
-        if (questionKeysActive && !draft.current && !controller.state.busy && !key.ctrl && !key.meta) {
+        if (questionKeysActive && !controller.composer.draft && !controller.state.busy && !key.ctrl && !key.meta) {
             const digit = /^[1-9]$/.test(_value) ? Number(_value) - 1 : -1;
             if (key.upArrow || key.downArrow) {
-                setOptionState({ ...choiceState, cursor: Math.max(0, Math.min(options.length, optionCursor + (key.upArrow ? -1 : 1))) });
+                controller.setOption({ ...choiceState, cursor: Math.max(0, Math.min(options.length, optionCursor + (key.upArrow ? -1 : 1))) });
                 return;
             }
             if (digit >= 0 && digit <= options.length || _value === ' ' && question.multiSelect === true && optionCursor < options.length) {
@@ -309,12 +290,12 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                 const selected = question.multiSelect === true && label
                     ? choiceState.selected.includes(label) ? choiceState.selected.filter(item => item !== label) : [...choiceState.selected, label]
                     : choiceState.selected;
-                setOptionState({ ...choiceState, cursor: index, selected });
+                controller.setOption({ ...choiceState, cursor: index, selected });
                 return;
             }
             if (key.return) {
                 if (optionCursor === options.length) {
-                    setOptionState({ ...choiceState, custom: true });
+                    controller.setOption({ ...choiceState, custom: true });
                     return;
                 }
                 const selected = question.multiSelect === true ? choiceState.selected : [string(options[optionCursor].label)];
@@ -343,7 +324,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             return;
         }
         if (key.escape && queueOpen) {
-            setQueueOpen(false);
+            controller.openQueue(false);
             return;
         }
         if (key.escape && removal) {
@@ -351,24 +332,23 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             return;
         }
         if (key.escape && models) {
-            setModels(undefined);
+            controller.setModelPanel(undefined);
             return;
         }
         if (key.escape && thoughtList) {
-            setThoughtList(false);
+            controller.openThoughts(false);
             if (controller.running)
                 void controller.interrupt(true);
             return;
         }
         if (key.escape && searchResults) {
-            setSearchResults(undefined);
+            controller.setSearchPanel(undefined);
             if (controller.running)
                 void controller.interrupt(true);
             return;
         }
         if (key.escape && historyQuery !== undefined) {
-            setHistoryQuery(undefined);
-            setHistoryMatches(undefined);
+            controller.setHistoryPanel(undefined);
             if (controller.running)
                 void controller.interrupt(true);
             return;
@@ -392,24 +372,34 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         }
         if (referenceOpen) {
             if (key.escape) {
-                dismissReference(input);
+                controller.setReferenceDismissed(input);
                 if (controller.running)
                     void controller.interrupt(true);
             }
             else if (key.tab)
                 pickReference();
             else if (key.upArrow)
-                setReferenceIndex(value => Math.max(0, value - 1));
+                controller.setReferenceIndex(Math.max(0, controller.reference.index - 1));
             else if (key.downArrow)
-                setReferenceIndex(value => Math.max(0, Math.min((matches?.items.length ?? 1) - 1, value + 1)));
+                controller.setReferenceIndex(Math.max(0, Math.min((matches?.items.length ?? 1) - 1, controller.reference.index + 1)));
             return;
         }
         const recallPrevious = key.upArrow || key.ctrl && _value === 'p';
         const recallNext = key.downArrow || key.ctrl && _value === 'n';
         if ((recallPrevious || recallNext) && state.online && !controller.state.busy && !pending
             && !queueOpen && (!recallBlocked || key.ctrl)
-            && (state.screen === 'chat' || draft.current !== '' || key.ctrl)) {
-            setInput(inputHistory.current.move(recallPrevious ? -1 : 1, draft.current), true);
+            && (state.screen === 'chat' || controller.composer.draft !== '' || key.ctrl)) {
+            // The oldest seeded entry is where the session happened to open, not where it began: stepping
+            // past it fetches the page before the retained window, and the step is applied once the page
+            // lands, so recall covers prompts from before this client connected. Paging stays with the
+            // conversation: on a picker screen the arrows only ever walked what was already retained.
+            if (recallPrevious && state.screen === 'chat' && !historyPaging.current
+                && (controller.recallAtOldest || controller.recallLength === 0)
+                && state.session.record.ready && controller.recallHasOlder) {
+                void recallOlderPrompts();
+                return;
+            }
+            setInput(controller.recall(recallPrevious ? -1 : 1, controller.composer.draft), true);
             return;
         }
         if (key.tab) {
@@ -442,7 +432,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         }
         const value = raw.trim();
         if (!pending && !/^\/feedback(?:\s|$)/.test(value))
-            inputHistory.current.record(value);
+            controller.recordRecall(value);
         if (submission.kind === 'copy') {
             setInput('');
             setCopyMode(true);
@@ -451,9 +441,9 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         setRemoval(undefined);
         // Each panel belongs to the command that opened it, so any other command closes it.
         if (value !== '/queue')
-            setQueueOpen(false);
+            controller.openQueue(false);
         if (!/^\/model(?: |$)/.test(value))
-            setModels(undefined);
+            controller.setModelPanel(undefined);
         if (value !== '/help')
             setHelp(false);
         if (value !== '/cost')
@@ -461,7 +451,7 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         if (value !== '/status')
             setStatusExpanded(false);
         if (!/^\/think(?: |$)/.test(value))
-            setThoughtList(false);
+            controller.openThoughts(false);
         if (submission.kind === 'quit') {
             exit();
             return;
@@ -491,70 +481,67 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                     await requestRemoval(submission.target, submission.query);
                     return;
                 case 'navigate': {
-                    setHistoryQuery(undefined);
-                    setSearchResults(undefined);
+                    controller.setHistoryPanel(undefined);
+                    controller.setSearchPanel(undefined);
                     if (submission.target === 'workspace')
                         await controller.switchWorkspace(submission.query);
                     else
                         await controller.switchSession(submission.query);
-                    setScroll(0);
+                    controller.setScroll(0);
                     return;
                 }
                 case 'path':
                     await controller.createWorkspace(submission.value);
                     return;
                 case 'latest':
-                    setHistoryWindow(undefined);
-                    setHistoryMatches(undefined);
-                    setHistoryQuery(undefined);
-                    setSearchResults(undefined);
-                    setReasoningOverrides(new Set());
-                    setScroll(0);
+                    controller.setViewWindow(undefined);
+                    controller.setHistoryPanel(undefined);
+                    controller.setSearchPanel(undefined);
+                    controller.setFolds(new Set());
+                    controller.setScroll(0);
                     controller.pinHistory(false);
                     return;
                 case 'models': {
                     if (!submission.args.length) {
-                        setHistoryQuery(undefined);
-                        setSearchResults(undefined);
-                        setModels({ catalog: await controller.modelCatalog() });
+                        controller.setHistoryPanel(undefined);
+                        controller.setSearchPanel(undefined);
+                        controller.setModelPanel({ catalog: await controller.modelCatalog() });
                     }
                     else {
                         await controller.selectModel(submission.args[0], submission.args[1], submission.args[2]);
-                        setModels(undefined);
+                        controller.setModelPanel(undefined);
                     }
                     return;
                 }
                 case 'queue':
-                    setQueueOpen(true);
+                    controller.openQueue(true);
                     return;
                 case 'newSession':
                     await controller.createSession();
                     return;
                 case 'history':
-                    setSearchResults(undefined);
-                    setContentSearch(false);
-                    setHistoryQuery(submission.query);
+                    controller.setSearchPanel(undefined);
+                    controller.setHistoryPanel({ query: submission.query, contentSearch: false });
                     return;
                 case 'sessionSearch':
                     await historyOperation(async (signal) => {
                         const result = await controller.searchSessions(submission.query, submission.command === '/ssearch', signal);
-                        setHistoryQuery(undefined);
-                        setSearchResults({ query: submission.query, ...result });
+                        controller.setHistoryPanel(undefined);
+                        controller.setSearchPanel({ query: submission.query, ...result });
                     });
                     return;
                 case 'historySearch':
                     await historyOperation(async (signal) => {
-                        setHistoryMatches(await controller.searchHistory(submission.query, signal));
-                        setSearchResults(undefined);
-                        setContentSearch(true);
-                        setHistoryQuery(submission.query);
+                        controller.setHistoryPanel({ query: submission.query, contentSearch: true,
+                            matches: await controller.searchHistory(submission.query, signal) });
+                        controller.setSearchPanel(undefined);
                     });
                     return;
                 case 'think': {
                     if (submission.target === 'live') {
-                        setLiveReasoning(value => value === 'row' ? 'full' : 'row');
-                        setThoughtList(false);
-                        setScroll(0);
+                        controller.setLiveReasoning(controller.view.liveReasoning === 'row' ? 'full' : 'row');
+                        controller.openThoughts(false);
+                        controller.setScroll(0);
                     }
                     else if (submission.target) {
                         const seq = Number(submission.target);
@@ -562,23 +549,23 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                             throw new Error('Use /think <message sequence> for a loaded reasoning block');
                         const next = new Set(reasoningOverrides);
                         if (next.delete(seq)) {
-                            setReasoningOverrides(next);
+                            controller.setFolds(next);
                             return;
                         }
                         next.add(seq);
-                        setReasoningOverrides(next);
+                        controller.setFolds(next);
                         await jumpHistory(seq, next);
                     }
                     else {
-                        setHistoryQuery(undefined);
-                        setSearchResults(undefined);
-                        setThoughtList(true);
+                        controller.setHistoryPanel(undefined);
+                        controller.setSearchPanel(undefined);
+                        controller.openThoughts(true);
                     }
                     return;
                 }
                 case 'older':
                     await controller.older(undefined, displayTranscript);
-                    setScroll(value => value + 10);
+                    controller.setScroll(controller.view.scroll + 10);
                     return;
                 case 'compact':
                     setNotice(undefined);
@@ -613,25 +600,52 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
                 case 'error': throw new Error(submission.message);
                 case 'prompt':
                     await controller.prompt(submission.text);
-                    setHistoryWindow(undefined);
-                    setScroll(0);
+                    controller.setViewWindow(undefined);
+                    controller.setScroll(0);
                     return;
             }
         });
         if (accepted)
             setInput('');
     };
+    const width = Math.max(10, (stdout.columns ?? 80) - 2);
+    // The composer never trades the conversation away for input. Its window grows with the body and
+    // is clamped so a few conversation rows always survive; width never buys height, so landscape and
+    // a wide desktop only wrap less instead of showing more input rows. The budget subtracts the one
+    // row the frame, the header, the status bar and a transient notice/suggestion line may each take.
+    const bodyRows = Math.max(4, (stdout.rows ?? 30) - 4 - statusBarRows);
+    const composerRows = Math.max(1, Math.min(Math.min(5, Math.max(2, Math.floor(bodyRows / 3))), bodyRows - 7));
+    const draftWidth = Math.max(1, width - 6);
     // Session activity is a list-level fact, so both pickers read it without loading any history.
     const listAge = Date.now();
+    // Unanswered interactions are held per session already; a list only has to read the counts.
+    const pendingCounts = controller.pendingCounts();
+    const isPending = (session) => (pendingCounts.get(string(session.sessionId)) ?? 0) > 0;
     const sessionsOf = (workspace) => {
         const ids = new Set(array(workspace.sessionIds).map(string));
         return state.sessions.filter(session => ids.has(string(session.sessionId)));
     };
+    // `width` counts only the frame's outer padding, so the list subtracts the composer border and
+    // padding it renders inside; measured against the wider value a long row would still wrap.
+    const pickerWidth = Math.max(16, width - 4);
+    // Words explain themselves. Badges fit a narrow terminal but need the marker key beside them.
+    const rollupStyle = pickerWidth >= 80 ? 'words' : 'badges';
+    // Needs-you is the one state that asks for action, so it outranks working; ready stays quiet.
+    const stateColor = { needs: theme.status.critical, running: theme.status.working, idle: theme.colors.muted };
     const choices = state.screen === 'workspaces' ? [
-        ...state.workspaces.map(workspace => ({ key: string(workspace.workspaceId),
-            label: `${[workspaceStatus(sessionsOf(workspace)), string(workspace.title), string(workspace.path)].filter(Boolean).join('  ')}`,
-            remove: () => setRemoval({ kind: 'workspace', id: string(workspace.workspaceId), name: string(workspace.title), path: string(workspace.path) }),
-            action: () => controller.pickWorkspace(string(workspace.workspaceId)) })),
+        ...state.workspaces.map(workspace => {
+            const counts = workspaceCounts(sessionsOf(workspace), new Set(pendingCounts.keys()));
+            const name = string(workspace.title);
+            const title = name || string(workspace.path);
+            // A path only earns a column when words are affordable and the title does not already say it.
+            const detail = rollupStyle === 'words' && name ? workspaceDetail(string(workspace.path), name) : '';
+            return { key: string(workspace.workspaceId),
+                label: [workspaceStatus(counts, rollupStyle), title].filter(Boolean).join('  '), title,
+                cells: workspaceSegments(counts, rollupStyle).map(segment => ({ text: segment.text, color: stateColor[segment.state] })),
+                ...(detail ? { detail } : {}),
+                remove: () => setRemoval({ kind: 'workspace', id: string(workspace.workspaceId), name: string(workspace.title), path: string(workspace.path) }),
+                action: () => controller.pickWorkspace(string(workspace.workspaceId)) };
+        }),
         { key: '@all', label: 'All sessions', action: () => operate(() => controller.switchSession('all')) },
         // The directory this client runs in is the one case where no path has to be typed, and offering
         // it only while the host has not registered it keeps the row from repeating itself.
@@ -642,42 +656,40 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     ] : [
         ...(state.workspaceId && !state.showAllSessions ? [{ key: '@new', label: '+ New session', action: () => operate(() => controller.createSession()) }] : []),
         ...controller.visibleSessions.map(session => ({ key: string(session.sessionId),
-            label: `${sessionStatus(session, listAge)} ${sessionLabel(session)}  ${session.sessionId}`,
+            label: `${sessionStatus(session, listAge, isPending(session))} ${sessionLabel(session)}  ${session.sessionId}`,
             remove: () => operate(() => requestRemoval('session', string(session.sessionId))),
-            action: () => { setScroll(0); operate(() => controller.selectSession(string(session.sessionId))); } })),
+            action: () => { controller.setScroll(0); operate(() => controller.selectSession(string(session.sessionId))); } })),
         { key: '@back', label: '← Workspaces', action: () => operate(() => controller.showPicker('workspaces')) },
     ];
-    const width = Math.max(10, (stdout.columns ?? 80) - 2);
     const layout = useMemo(() => historyLayout(displayTranscript, width, reasoning, reasoningOverrides, liveReasoning), [displayTranscript, displayTranscript.version, width, reasoning, reasoningOverrides, liveReasoning]);
     const { length, first } = layout;
     const statusNotice = !['Connected', 'Idle', 'Running…', 'Responding…'].includes(state.status);
     const showHistoryHint = dialogOpen || displayTranscript.hasMore || !!historyWindow;
     const pageSize = Math.max(1, conversationRows - (showHistoryHint ? 1 : 0));
-    const previousView = useRef({ transcript: displayTranscript, session: state.transcript, count: length, first, folds: reasoningOverrides, liveReasoning });
+    const previousView = useRef({ transcript: displayTranscript, session: state.session.record, count: length, first, folds: reasoningOverrides, liveReasoning });
     const previous = previousView.current;
     const prepended = previous.first !== undefined && first !== undefined && first < previous.first;
-    const adjustedScroll = previous.session !== state.transcript ? 0
+    const adjustedScroll = previous.session !== state.session.record ? 0
         : scroll > 0 && previous.transcript === displayTranscript && !prepended && previous.folds === reasoningOverrides && previous.liveReasoning === liveReasoning ? Math.max(0, scroll + length - previous.count) : scroll;
     const maxScroll = Math.max(0, length - pageSize);
     const position = Math.min(adjustedScroll, maxScroll);
     useLayoutEffect(() => {
-        previousView.current = { transcript: displayTranscript, session: state.transcript, count: length, first, folds: reasoningOverrides, liveReasoning };
+        previousView.current = { transcript: displayTranscript, session: state.session.record, count: length, first, folds: reasoningOverrides, liveReasoning };
         if (position !== scroll)
-            setScroll(position);
-    }, [state.transcript, displayTranscript, length, position, scroll, reasoningOverrides, liveReasoning]);
+            controller.setScroll(position);
+    }, [state.session.record, displayTranscript, length, position, scroll, reasoningOverrides, liveReasoning]);
     useLayoutEffect(() => {
         controller.pinHistory(!historyWindow && (position > 0 || thoughtList || historyQuery !== undefined && !contentSearch));
-    }, [controller, historyWindow, position, thoughtList, historyQuery, contentSearch, state.transcript]);
+    }, [controller, historyWindow, position, thoughtList, historyQuery, contentSearch, state.session.record]);
     useEffect(() => {
         const first = displayTranscript.beforeSeq;
-        if (first !== undefined)
-            setReasoningOverrides(previous => {
-                const next = new Set([...previous].filter(seq => seq >= first));
-                return next.size === previous.size ? previous : next;
-            });
+        if (first === undefined)
+            return;
+        const previous = controller.view.folds;
+        const next = new Set([...previous].filter(seq => seq >= first));
+        if (next.size !== previous.size)
+            controller.setFolds(next);
     }, [displayTranscript, displayTranscript.memoryRevision]);
-    const scrollPosition = useRef(position);
-    scrollPosition.current = position;
     const loadingPage = useRef(false);
     const scrollIntent = useRef(0);
     const mounted = useRef(true);
@@ -686,16 +698,15 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         if (copyMode || state.screen !== 'chat')
             return;
         const intent = ++scrollIntent.current;
-        const next = Math.max(0, Math.min(maxScroll, scrollPosition.current + delta));
-        scrollPosition.current = next;
-        setScroll(next);
+        const next = Math.max(0, Math.min(maxScroll, controller.view.scroll + delta));
+        controller.setScroll(next);
         if (delta <= 0 || next < maxScroll || loadingPage.current || state.busy || !state.online || !displayTranscript.ready || !displayTranscript.hasMore)
             return;
         loadingPage.current = true;
         const transcript = displayTranscript;
         void controller.perform(() => historyOperation(signal => controller.older(signal, transcript))).then(accepted => {
             if (accepted && mounted.current && displayRef.current === transcript && scrollIntent.current === intent) {
-                setScroll(value => value + delta);
+                controller.setScroll(controller.view.scroll + delta);
             }
         }).finally(() => { loadingPage.current = false; });
     }
@@ -713,14 +724,51 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             }
         }
     }
+    /** Reach one prompt older than the index's boundary, from memory first and the host second.
+     *
+     * The transcript window outlives the prompt index's budgets, so an evicted prompt is usually still
+     * loaded: refilling from it costs nothing and keeps the key immediate. Only when the window itself
+     * is exhausted does this page back, skipping tool-only pages inside one bounded request loop; the
+     * fetched page stays readable in the conversation above the composer.
+     */
+    async function recallOlderPrompts() {
+        if (historyPaging.current)
+            return;
+        const transcript = state.session.record;
+        const sessionId = state.sessionId;
+        // Recover from the loaded window first: no request, no focus change, no loading label.
+        if (controller.refillRecall() || !transcript.hasMore) {
+            setInput(controller.recall(-1, controller.composer.draft), true);
+            return;
+        }
+        historyPaging.current = true;
+        try {
+            const accepted = await controller.perform(() => historyOperation(async (signal) => {
+                // A prompt can be many pages back in an agent session, so scan a healthy stretch before
+                // giving up; the loading label stays visible and Esc cancels the scan.
+                for (let page = 0; page < RECALL_PAGE_SCAN; page++) {
+                    if (transcript.beforeSeq === undefined || !transcript.hasMore)
+                        break;
+                    await controller.older(signal, transcript);
+                    signal.throwIfAborted();
+                    if (controller.refillRecall())
+                        return;
+                }
+            }, 'Loading older prompts…'));
+            if (accepted && mounted.current && controller.state.sessionId === sessionId) {
+                setInput(controller.recall(-1, controller.composer.draft), true);
+            }
+        }
+        finally {
+            historyPaging.current = false;
+        }
+    }
     async function openSearchSession(sessionId, query) {
         await historyOperation(async (signal) => {
             await controller.selectSession(sessionId);
             await controller.waitForHistory(signal);
-            setHistoryMatches(await controller.searchHistory(query, signal));
-            setSearchResults(undefined);
-            setContentSearch(true);
-            setHistoryQuery(query);
+            controller.setHistoryPanel({ query, contentSearch: true, matches: await controller.searchHistory(query, signal) });
+            controller.setSearchPanel(undefined);
         });
     }
     async function jumpHistory(target, folds = reasoningOverrides) {
@@ -731,18 +779,17 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
         historyAbort.current = abort;
         try {
             const transcript = displayTranscript.messages.some(message => message.seq === target) ? displayTranscript
-                : state.transcript.messages.some(message => message.seq === target) ? state.transcript
+                : state.session.record.messages.some(message => message.seq === target) ? state.session.record
                     : await controller.historyAt(target, abort.signal);
             abort.signal.throwIfAborted();
             const current = historyLayout(transcript, width, reasoning, folds, liveReasoning);
             const row = current.offsets.get(target);
             if (row === undefined)
                 throw new Error('No visible message at this sequence; use /history to choose a record');
-            setHistoryWindow(transcript === state.transcript ? undefined : transcript);
-            setHistoryQuery(undefined);
-            setHistoryMatches(undefined);
-            setThoughtList(false);
-            setScroll(Math.max(0, current.length - pageSize - row));
+            controller.setViewWindow(transcript === state.session.record ? undefined : transcript);
+            controller.setHistoryPanel(undefined);
+            controller.openThoughts(false);
+            controller.setScroll(Math.max(0, current.length - pageSize - row));
         }
         finally {
             if (historyAbort.current === abort)
@@ -757,18 +804,18 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
     const trailingGap = dialogOpen && length > 0 && layout.viewport(length - 1, length)[0]?.text === '' ? 1 : 0;
     const end = Math.max(pageSize, length - position - trailingGap);
     const visible = useMemo(() => layout.viewport(Math.max(0, end - pageSize), end), [layout, end, pageSize]);
-    const liveThought = thoughtList && !historyWindow ? state.transcript.liveParts(width).find(part => part.kind === 'reasoning') : undefined;
+    const liveThought = thoughtList && !historyWindow ? state.session.record.liveParts(width).find(part => part.kind === 'reasoning') : undefined;
     const thoughtEntries = thoughtList ? displayTranscript.thoughts : undefined;
     const thoughtChoices = useMemo(() => [...(thoughtEntries ?? [])].reverse().map(entry => ({
         key: String(entry.seq), label: `${toolLine(`#${entry.seq} User · ${entry.prompt}`, width - 2)}\n  ${toolLine(`◇ ${entry.preview}`, width - 4)}`,
-        action: () => operate(async () => { const next = new Set(reasoningOverrides); next.add(entry.seq); setReasoningOverrides(next); await jumpHistory(entry.seq, next); }),
+        action: () => operate(async () => { const next = new Set(reasoningOverrides); next.add(entry.seq); controller.setFolds(next); await jumpHistory(entry.seq, next); }),
     })), [thoughtEntries, width, pageSize, reasoningOverrides, liveReasoning, displayTranscript]);
     const thoughtOptions = useMemo(() => [
-        ...(liveThought ? [{ key: 'live', label: `${toolLine(`Now · User · ${state.transcript.latestPrompt}`, width - 2)}\n  ${toolLine(liveThought.text, width - 4)}`,
-                action: () => { setLiveReasoning('full'); setThoughtList(false); const expanded = historyLayout(state.transcript, width, reasoning, reasoningOverrides, 'full'); setScroll(Math.max(0, expanded.length - pageSize - expanded.liveOffset)); } }] : []),
+        ...(liveThought ? [{ key: 'live', label: `${toolLine(`Now · User · ${state.session.record.latestPrompt}`, width - 2)}\n  ${toolLine(liveThought.text, width - 4)}`,
+                action: () => { controller.setLiveReasoning('full'); controller.openThoughts(false); const expanded = historyLayout(state.session.record, width, reasoning, reasoningOverrides, 'full'); controller.setScroll(Math.max(0, expanded.length - pageSize - expanded.liveOffset)); } }] : []),
         ...thoughtChoices,
         ...(displayTranscript.hasMore ? [{ key: 'older', label: '↑ Load older reasoning', action: () => operate(() => historyOperation(signal => controller.older(signal, displayTranscript))) }] : []),
-        { key: 'close', label: '← Back to conversation', action: () => setThoughtList(false) },
+        { key: 'close', label: '← Back to conversation', action: () => controller.openThoughts(false) },
     ], [liveThought, thoughtChoices, displayTranscript, displayTranscript.hasMore, width, pageSize, reasoningOverrides]);
     const workspace = state.workspaces.find(item => item.workspaceId === state.workspaceId);
     const workspaceName = workspace ? string(workspace.title) || string(workspace.path) : state.workspaceId;
@@ -783,8 +830,13 @@ export function App({ controller, panelLifetimeMs = PANEL_LIFETIME_MS, theme = m
             : state.screen === 'chat' && position > 0 ? 'history'
                 : undefined;
     const statusFrozen = pauseReason !== undefined;
-    return _jsx(ThemeContext.Provider, { value: theme, children: _jsx(CopyMode.Provider, { value: copyMode, children: _jsx(Frozen, { frozen: copyMode, identity: `${width}:${stdout.rows}`, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, height: Math.max(1, (stdout.rows ?? 30) - 1), overflowY: "hidden", children: [copyMode && _jsx(Text, { color: theme.accent, children: "Copy mode \u00B7 drag to select \u00B7 Esc / Ctrl+S resumes" }), _jsx(ChatHeader, { title: headerTitle, mode: controller.sessionMode, width: width, frozen: displayPaused, identity: `${width}:${state.sessionId}` }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflowY: "hidden", children: [historyLoading && _jsxs(Text, { dimColor: true, children: [historyLoading, " \u00B7 Esc / Ctrl+C cancel"] }), _jsx(Frozen, { frozen: statusPaused, identity: state.sessionId ?? "", children: statusNotice && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: safeText(state.status) }) }), state.error && _jsx(Text, { color: theme.colors.error, children: state.error }), state.screen === 'chat' && _jsx(ChatViewport, { rows: visible, showHistoryHint: showHistoryHint, dialogOpen: dialogOpen, historyWindow: !!historyWindow, frozen: displayPaused, identity: `${width}:${state.sessionId}:${position}:${pageSize}`, boxRef: conversationBox })] }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [notice && _jsx(Text, { dimColor: true, children: safeText(notice) }), _jsxs(Box, { borderStyle: "round", borderColor: pending ? theme.colors.context : state.online ? theme.accent : theme.border, paddingX: 1, flexDirection: "column", flexShrink: 1, minHeight: 3, children: [_jsx(Box, { flexDirection: "column", flexShrink: 1, minHeight: 0, overflowY: "hidden", children: queueOpen && !pending ? _jsx(QueueDialog, { queued: queued, rows: stdout.rows ?? 30, width: width, unavailable: !!state.controlError, enabled: !input && !state.busy && state.online, canSelect: () => !draft.current && !controller.state.busy && controller.state.online && !controller.state.pending.length, onRemove: id => operate(() => controller.removeQueued(id)) }) : removal ? _jsx(RemovalDialog, { removal: removal, enabled: !input && !state.busy && state.online, canSelect: () => !draft.current && !controller.state.busy && controller.state.online, onCancel: () => setRemoval(undefined), onConfirm: () => operate(async () => { await controller.removeTarget(removal); setRemoval(undefined); }) }) : models ? _jsx(ModelDialog, { models: models, rows: stdout.rows ?? 30, width: width, enabled: !input && !state.busy && state.online, canSelect: () => !draft.current && !controller.state.busy && controller.state.online, onChoose: (provider, model, effort) => operate(async () => { await controller.selectModel(provider, model, effort); setModels(undefined); }), onOpen: (provider, model) => setModels({ catalog: models.catalog, provider, model }), onBack: () => setModels({ catalog: models.catalog }), onClose: () => setModels(undefined) }) : searchResults ? _jsx(SearchResultsDialog, { query: searchResults.query, items: searchResults.items, hasMore: searchResults.hasMore, width: width, enabled: !input && !state.busy, canSelect: () => !draft.current && !controller.state.busy, onOpen: sessionId => operate(() => openSearchSession(sessionId, searchResults.query)), onClose: () => setSearchResults(undefined) }) : state.screen === 'workspaces' || state.screen === 'sessions' ? _jsx(PickerScreen, { title: state.screen === 'workspaces' ? 'Choose workspace' : state.showAllSessions ? 'Choose session · All workspaces' : 'Choose session', identity: `${state.screen}:${state.workspaceId ?? ''}`, choices: choices, enabled: state.online && !state.busy && !input, canSelect: () => !draft.current && controller.state.online && !controller.state.busy }) : _jsxs(_Fragment, { children: [thoughtList && _jsx(ThoughtsDialog, { identity: `thoughts:${state.sessionId}`, options: thoughtOptions, empty: !thoughtEntries?.length && !liveThought, rows: stdout.rows ?? 30, enabled: !input && !state.busy, canSelect: () => !draft.current && !controller.state.busy }), state.screen === 'chat' && historyQuery !== undefined && _jsx(HistoryDialog, { identity: `history:${historyQuery}`, contentSearch: contentSearch, matches: historyMatches, query: historyQuery, messages: layout.messages, width: width, enabled: !input && !state.busy, canSelect: () => !draft.current && !controller.state.busy, onJump: seq => operate(() => jumpHistory(seq)), onClose: () => { setHistoryQuery(undefined); setHistoryMatches(undefined); } }), pending && _jsxs(Box, { flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.colors.context, children: question ? `Question ${answered.length + 1}/${questions.length}${question.header ? ` · ${safeText(string(question.header))}` : ''}` : 'Approval required' }), _jsx(Text, { children: safeText(question ? string(question.question) : JSON.stringify(pending.request, null, 2)) }), question?.detail && _jsx(Text, { children: safeText(string(question.detail)) }), pending.event === 'approval/request' && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [['Allow once', 'Deny', 'Stop turn'].map((label, index) => _jsxs(Text, { color: approvalIndex === index ? theme.accent : undefined, children: [approvalIndex === index ? '❯ ' : '  ', index + 1, ". ", label] }, label)), _jsx(Text, { dimColor: true, children: "\u2191 \u2193 / 1\u20133 select \u00B7 Enter confirm" })] }), options.length > 0 && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [[...options, { label: 'Other answer — type below' }].map((option, index) => ({ option, index }))
+    return _jsx(ThemeContext.Provider, { value: theme, children: _jsx(CopyMode.Provider, { value: copyMode, children: _jsx(Frozen, { frozen: copyMode, identity: `${width}:${stdout.rows}`, children: _jsxs(Box, { flexDirection: "column", paddingX: 1, height: Math.max(1, (stdout.rows ?? 30) - 1), overflowY: "hidden", children: [copyMode && _jsx(Text, { color: theme.accent, children: "Copy mode \u00B7 drag to select \u00B7 Esc / Ctrl+S resumes" }), _jsx(ChatHeader, { title: headerTitle, mode: controller.sessionMode, width: width, frozen: displayPaused, identity: `${width}:${state.sessionId}` }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflowY: "hidden", children: [historyLoading && _jsxs(Text, { dimColor: true, children: [historyLoading, " \u00B7 Esc / Ctrl+C cancel"] }), _jsx(Frozen, { frozen: statusPaused, identity: state.sessionId ?? "", children: statusNotice && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: safeText(state.status) }) }), state.error && _jsx(Text, { color: theme.colors.error, children: state.error }), state.screen === 'chat' && _jsx(ChatViewport, { rows: visible, showHistoryHint: showHistoryHint, dialogOpen: dialogOpen, historyWindow: !!historyWindow, frozen: displayPaused, identity: `${width}:${state.sessionId}:${position}:${pageSize}`, boxRef: conversationBox })] }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [notice && _jsx(Text, { dimColor: true, children: safeText(notice) }), _jsxs(Box, { borderStyle: "round", borderColor: pending ? theme.colors.context : state.online ? theme.accent : theme.border, paddingX: 1, flexDirection: "column", flexShrink: 1, minHeight: 3, children: [_jsx(Box, { flexDirection: "column", flexShrink: 1, minHeight: 0, overflowY: "hidden", children: queueOpen && !pending ? _jsx(QueueDialog, { queued: queued, rows: stdout.rows ?? 30, width: width, unavailable: !!state.controlError, enabled: !input && !state.busy && state.online, canSelect: () => !controller.composer.draft && !controller.state.busy && controller.state.online && !controller.state.pending.length, onRemove: id => operate(() => controller.removeQueued(id)) }) : removal ? _jsx(RemovalDialog, { removal: removal, enabled: !input && !state.busy && state.online, canSelect: () => !controller.composer.draft && !controller.state.busy && controller.state.online, onCancel: () => setRemoval(undefined), onConfirm: () => operate(async () => { await controller.removeTarget(removal); setRemoval(undefined); }) }) : models ? _jsx(ModelDialog, { models: models, rows: stdout.rows ?? 30, width: width, enabled: !input && !state.busy && state.online, canSelect: () => !controller.composer.draft && !controller.state.busy && controller.state.online, onChoose: (provider, model, effort) => operate(async () => { await controller.selectModel(provider, model, effort); controller.setModelPanel(undefined); }), onOpen: (provider, model) => controller.setModelPanel({ catalog: models.catalog, provider, model }), onBack: () => controller.setModelPanel({ catalog: models.catalog }), onClose: () => controller.setModelPanel(undefined) }) : searchResults ? _jsx(SearchResultsDialog, { query: searchResults.query, items: searchResults.items, hasMore: searchResults.hasMore, width: width, enabled: !input && !state.busy, canSelect: () => !controller.composer.draft && !controller.state.busy, onOpen: sessionId => operate(() => openSearchSession(sessionId, searchResults.query)), onClose: () => controller.setSearchPanel(undefined) }) : state.screen === 'workspaces' || state.screen === 'sessions' ? _jsx(PickerScreen, { title: state.screen === 'workspaces' ? 'Choose workspace' : state.showAllSessions ? 'Choose session · All workspaces' : 'Choose session', identity: `${state.screen}:${state.workspaceId ?? ''}`, choices: choices, width: pickerWidth, 
+                                                // A rollup of badges is read through the key beside it; spelled-out states need no key, and a
+                                                // terminal too narrow for the whole key gets the badges alone rather than half a legend.
+                                                legend: state.screen === 'workspaces' && rollupStyle === 'badges' && pickerWidth >= 40 ? ROLLUP_LEGEND : undefined, enabled: state.online && !state.busy && !input, canSelect: () => !controller.composer.draft && controller.state.online && !controller.state.busy }) : _jsxs(_Fragment, { children: [thoughtList && _jsx(ThoughtsDialog, { identity: `thoughts:${state.sessionId}`, options: thoughtOptions, empty: !thoughtEntries?.length && !liveThought, rows: stdout.rows ?? 30, enabled: !input && !state.busy, canSelect: () => !controller.composer.draft && !controller.state.busy }), state.screen === 'chat' && historyQuery !== undefined && _jsx(HistoryDialog, { identity: `history:${historyQuery}`, contentSearch: contentSearch, matches: historyMatches, query: historyQuery, messages: layout.messages, width: width, enabled: !input && !state.busy, canSelect: () => !controller.composer.draft && !controller.state.busy, onJump: seq => operate(() => jumpHistory(seq)), onClose: () => controller.setHistoryPanel(undefined) }), pending && _jsxs(Box, { flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.colors.context, children: question ? `Question ${answered.length + 1}/${questions.length}${question.header ? ` · ${safeText(string(question.header))}` : ''}` : 'Approval required' }), _jsx(Text, { children: safeText(question ? string(question.question) : JSON.stringify(pending.request, null, 2)) }), question?.detail && _jsx(Text, { children: safeText(string(question.detail)) }), pending.event === 'approval/request' && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [['Allow once', 'Deny', 'Stop turn'].map((label, index) => _jsxs(Text, { color: approvalIndex === index ? theme.accent : undefined, children: [approvalIndex === index ? '❯ ' : '  ', index + 1, ". ", label] }, label)), _jsx(Text, { dimColor: true, children: "\u2191 \u2193 / 1\u20133 select \u00B7 Enter confirm" })] }), options.length > 0 && _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [[...options, { label: 'Other answer — type below' }].map((option, index) => ({ option, index }))
                                                                         .slice(optionStart, optionStart + optionPageSize).map(({ option, index }) => _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Text, { color: index === optionCursor ? theme.accent : undefined, wrap: "truncate-end", children: [index === optionCursor ? '❯ ' : '  ', index + 1, ". ", question?.multiSelect === true && index < options.length ? choiceState.selected.includes(string(option.label)) ? '[x] ' : '[ ] ' : '', safeText(string(option.label))] }), option.description && _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['     ', safeText(string(option.description))] })] }, index)), _jsx(Text, { dimColor: true, children: choiceState.custom ? 'Type your answer below · Esc returns to options' : question?.multiSelect === true
-                                                                            ? '↑ ↓ move · Space / 1–9 toggle · Enter confirm' : '↑ ↓ / 1–9 select · Enter confirm' })] }), _jsx(Text, { dimColor: true, children: question ? 'Choose "Other answer" to type · the draft is kept while this is open'
-                                                                    : 'Esc keeps this pending · the draft is kept while this is open' })] })] }) }), !queueOpen && !pending && state.screen === 'chat' && queued.length > 0 && _jsx(QueuedPreview, { queued: queued, width: width }), _jsxs(Box, { flexShrink: 0, children: [_jsx(Text, { color: answerPending ? theme.colors.muted : theme.accent, children: "\u276F " }), _jsx(TextInput, { value: input, onChange: setInput, onCursorChange: setCursor, onSubmit: () => { void submit(draft.current); }, reservedKeys: approvalKeysActive ? ['1', '2', '3'] : queueOpen && !pending ? ['d'] : questionKeysActive ? ['1', '2', '3', '4', '5', '6', '7', '8', '9', ...(question?.multiSelect === true ? [' '] : [])] : !removal && !models && !searchResults && (state.screen === 'workspaces' || state.screen === 'sessions') ? ['d'] : undefined, focus: state.online && !state.busy && !copyMode && !answerPending, placeholder: state.screen === 'path' ? 'Absolute directory path on host' : 'Message, @host-file, or /help' })] }), referenceOpen && _jsx(ReferenceMenu, { matches: matches, index: referenceIndex })] }), commandSuggestions && _jsx(Text, { dimColor: true, children: commandSuggestions.join('  ') }), help && _jsx(HelpPanel, { page: currentHelpPage, pages: helpPages, pageSize: helpPageSize }), costExpanded && _jsx(CostPanel, { controller: controller }), _jsx(Frozen, { frozen: statusFrozen, identity: `${width}:${state.sessionId}:${statusExpanded}:${statusScroll}:${pauseReason ?? ''}`, children: _jsx(StatusBar, { controller: controller, width: width, expanded: statusExpanded, scroll: statusScroll, pageSize: statusViewRows, onScroll: setStatusScroll, onOverflow: setStatusOverflow, onRows: setStatusBarRows, pauseReason: pauseReason, revision: state.version }) })] })] }) }) }) });
+                                                                            ? '↑ ↓ move · Space / 1–9 toggle · Enter confirm · Esc dismisses' : '↑ ↓ / 1–9 select · Enter confirm · Esc dismisses' })] }), _jsx(Text, { dimColor: true, children: question ? options.length > 0
+                                                                    ? 'Choose "Other answer" to type · the draft is kept while this is open'
+                                                                    : 'Esc dismisses the question · the draft is kept while this is open'
+                                                                    : 'Esc keeps this pending · the draft is kept while this is open' })] })] }) }), !queueOpen && !pending && state.screen === 'chat' && queued.length > 0 && _jsx(QueuedPreview, { queued: queued, width: width }), _jsx(TextInput, { value: input, onChange: setInput, onCursorChange: cursor => controller.setComposerCursor(cursor), onSubmit: () => { void submit(controller.composer.draft); }, reservedKeys: approvalKeysActive ? ['1', '2', '3'] : queueOpen && !pending ? ['d'] : questionKeysActive ? ['1', '2', '3', '4', '5', '6', '7', '8', '9', ...(question?.multiSelect === true ? [' '] : [])] : !removal && !models && !searchResults && (state.screen === 'workspaces' || state.screen === 'sessions') ? ['d'] : undefined, width: draftWidth, maxRows: composerRows, promptColor: answerPending ? theme.colors.muted : theme.accent, focus: state.online && !state.busy && !copyMode && !answerPending, placeholder: state.screen === 'path' ? 'Absolute directory path on host' : 'Message, @host-file, or /help' }), referenceOpen && _jsx(ReferenceMenu, { matches: matches, index: referenceIndex })] }), commandSuggestions && _jsx(Text, { dimColor: true, children: commandSuggestions.join('  ') }), help && _jsx(HelpPanel, { page: currentHelpPage, pages: helpPages, pageSize: helpPageSize }), costExpanded && _jsx(CostPanel, { controller: controller }), _jsx(Frozen, { frozen: statusFrozen, identity: `${width}:${state.sessionId}:${statusExpanded}:${statusScroll}:${pauseReason ?? ''}`, children: _jsx(StatusBar, { controller: controller, width: width, expanded: statusExpanded, scroll: statusScroll, pageSize: statusViewRows, onScroll: setStatusScroll, onOverflow: setStatusOverflow, onRows: setStatusBarRows, pauseReason: pauseReason, revision: state.version }) })] })] }) }) }) });
 }