@researchcomputer/pista 0.1.2 → 0.1.3

package/README.md

@@ -1,5 +1,9 @@
 # Pista
 
+<p align="center">
+  <img src="./docs/assets/logo.png" alt="Pista" style="max-width: 128px;" />
+</p>
+
 A full-featured terminal coding agent powered by [`@researchcomputer/agents-sdk`](https://www.npmjs.com/package/@researchcomputer/agents-sdk). Pista provides a rich Ink-based TUI with:
 
 - Live assistant streaming

package/dist/agent-events.js

@@ -63,16 +63,12 @@ export function handleAgentEvent(event, controls) {
 function summarizeAssistantMessage(message) {
     if (message.role !== 'assistant')
         return '';
-    const text = message.content
-        .map((item) => (item.type === 'text' ? item.text : ''))
-        .join('');
+    const text = message.content.map((item) => (item.type === 'text' ? item.text : '')).join('');
     if (text.trim())
         return text.trim();
     if (message.errorMessage)
         return `[${message.stopReason}] ${message.errorMessage}`;
-    const toolNames = message.content
-        .map((item) => (item.type === 'toolCall' ? item.name : ''))
-        .filter(Boolean);
+    const toolNames = message.content.map((item) => (item.type === 'toolCall' ? item.name : '')).filter(Boolean);
     return toolNames.length > 0 ? `[requested tools: ${toolNames.join(', ')}]` : '';
 }
 function summarizeToolResult(result) {

package/dist/agent-events.test.js

@@ -22,6 +22,7 @@ test('text deltas are forwarded through the buffered live assistant path', () =>
             type: 'text_delta',
             delta: 'hello',
         },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }, createControls({
         appendLiveAssistantDelta: (delta) => {
             deltas.push(delta);
@@ -38,6 +39,7 @@ test('assistant message end logs the final text and clears the live buffer', ()
             role: 'assistant',
             content: [{ type: 'text', text: 'final answer' }],
         },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }, createControls({
         appendLog: (kind, title, body) => {
             logs.push({ kind, title, body });
@@ -57,6 +59,7 @@ test('assistant message end falls back to buffered live text when needed', () =>
             role: 'assistant',
             content: [],
         },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }, createControls({
         getLiveAssistantText: () => 'buffered answer',
         appendLog: (kind, title, body) => {

package/dist/app.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import process from 'node:process';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { randomUUID } from 'node:crypto';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
-import { createCodingAgent, } from '@researchcomputer/agents-sdk';
+import { useTerminalSize } from './hooks/use-terminal-size.js';
+import { useComposer } from './hooks/use-composer.js';
+import { useLiveAssistant } from './hooks/use-live-assistant.js';
+import { createCodingAgent } from '@researchcomputer/agents-sdk';
 import { resolveModel, describeSelection } from './model.js';
 import { handleAgentEvent } from './agent-events.js';
 import { getSlashCommandSuggestions, handleSlashCommand } from './commands.js';
@@ -13,9 +15,11 @@ import { Header } from './components/header.js';
 import { LogRow } from './components/log-row.js';
 import { PickerPanel } from './components/picker.js';
 import { PromptPanel } from './components/prompt.js';
-import { SlashCommandMenu } from './components/slash-command-menu.js';
+// SlashCommandMenu is rendered via ComposerPanel
+import { StatusBar } from './components/status-bar.js';
+import { ComposerPanel } from './components/composer-panel.js';
 import { AssistantMessage } from './components/assistant-message.js';
-import { Editor, editBuffer } from './components/editor.js';
+import { editBuffer } from './components/editor.js';
 import { getTranscriptOffsetForEntry, getTranscriptWindow, stepTranscriptOffset } from './transcript.js';
 import { errorMessage, stringifyPreview, getStoredApiKey, saveApiKey, getApiKeyPath, getCliMemoryDir, getCliSessionsDir, loadStoredPreferences, mergeStoredPreferences, saveStoredPreferences, } from './utils.js';
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
@@ -31,19 +35,18 @@ export function App({ initialConfig }) {
     const pendingRequestRef = useRef(null);
     const permissionMemoryRef = useRef(new Map());
     const sessionIdRef = useRef(initialConfig.sessionId);
-    const liveAssistantRef = useRef('');
-    const liveAssistantFlushTimerRef = useRef(null);
     const mountedRef = useRef(true);
     const runningRef = useRef(false);
     const isRebuildingRef = useRef(false);
+    const btwSnapshotRef = useRef(null);
+    const btwLogCountRef = useRef(0);
+    const btwOneShotRef = useRef(false);
     const [config, setConfig] = useState(initialConfig);
     const [logs, setLogs] = useState([]);
-    const [composer, setComposer] = useState({ value: '', cursor: 0 });
-    const [composerHistory, setComposerHistory] = useState([]);
-    const [composerHistoryIndex, setComposerHistoryIndex] = useState(null);
-    const [composerDraftBeforeHistory, setComposerDraftBeforeHistory] = useState(null);
+    const composerHook = useComposer();
+    const { composer, setComposer } = composerHook;
+    const liveAssistant = useLiveAssistant();
     const [slashMenuSelectedIndex, setSlashMenuSelectedIndex] = useState(0);
-    const [liveAssistant, setLiveAssistant] = useState('');
     const [status, setStatus] = useState('Idle');
     const [running, setRunning] = useState(false);
     const [spinnerFrame, setSpinnerFrame] = useState(0);
@@ -52,12 +55,21 @@ export function App({ initialConfig }) {
     const [promptState, setPromptState] = useState(null);
     const [pickerState, setPickerState] = useState(null);
     const [isRebuilding, setIsRebuilding] = useState(false);
+    const [btwActive, setBtwActive] = useState(false);
     const currentInputMode = promptState ? 'prompt' : pickerState ? 'picker' : 'composer';
-    const terminalRows = process.stdout.rows || 24;
-    useEffect(() => { agentNameRef.current = config.agentName; }, [config.agentName]);
-    useEffect(() => { sessionIdRef.current = config.sessionId; }, [config.sessionId]);
-    useEffect(() => { runningRef.current = running; }, [running]);
-    useEffect(() => { isRebuildingRef.current = isRebuilding; }, [isRebuilding]);
+    const { columns: termWidth, rows: terminalRows } = useTerminalSize();
+    useEffect(() => {
+        agentNameRef.current = config.agentName;
+    }, [config.agentName]);
+    useEffect(() => {
+        sessionIdRef.current = config.sessionId;
+    }, [config.sessionId]);
+    useEffect(() => {
+        runningRef.current = running;
+    }, [running]);
+    useEffect(() => {
+        isRebuildingRef.current = isRebuilding;
+    }, [isRebuilding]);
     useEffect(() => {
         if (!running) {
             setSpinnerFrame(0);
@@ -65,62 +77,19 @@ export function App({ initialConfig }) {
         }
         const timer = setInterval(() => {
             setSpinnerFrame((current) => (current + 1) % SPINNER_FRAMES.length);
-        }, 100);
+        }, 150);
         return () => clearInterval(timer);
     }, [running]);
     const appendLog = useCallback((kind, title, body) => {
-        setLogs((current) => [
-            ...current,
-            { id: randomUUID(), kind, title, body, timestamp: Date.now() },
-        ]);
-    }, []);
-    const flushLiveAssistant = useCallback(() => {
-        if (liveAssistantFlushTimerRef.current) {
-            clearTimeout(liveAssistantFlushTimerRef.current);
-            liveAssistantFlushTimerRef.current = null;
-        }
-        if (!mountedRef.current)
-            return;
-        const next = liveAssistantRef.current;
-        setLiveAssistant((current) => (current === next ? current : next));
-    }, []);
-    const scheduleLiveAssistantFlush = useCallback(() => {
-        if (liveAssistantFlushTimerRef.current)
-            return;
-        liveAssistantFlushTimerRef.current = setTimeout(() => {
-            liveAssistantFlushTimerRef.current = null;
-            if (!mountedRef.current)
-                return;
-            const next = liveAssistantRef.current;
-            setLiveAssistant((current) => (current === next ? current : next));
-        }, 33);
-    }, []);
-    const appendLiveAssistantDelta = useCallback((delta) => {
-        if (!delta)
-            return;
-        liveAssistantRef.current += delta;
-        scheduleLiveAssistantFlush();
-    }, [scheduleLiveAssistantFlush]);
-    const clearLiveAssistant = useCallback(() => {
-        if (liveAssistantFlushTimerRef.current) {
-            clearTimeout(liveAssistantFlushTimerRef.current);
-            liveAssistantFlushTimerRef.current = null;
-        }
-        liveAssistantRef.current = '';
-        setLiveAssistant((current) => (current ? '' : current));
-    }, []);
-    const rememberComposerDraft = useCallback((value) => {
-        setComposerHistory((current) => {
-            const trimmed = value.trim();
-            if (!trimmed)
-                return current;
-            const deduped = current.filter((entry) => entry !== value);
-            return [...deduped, value].slice(-50);
-        });
+        setLogs((current) => [...current, { id: randomUUID(), kind, title, body, timestamp: Date.now() }]);
     }, []);
     const visibleLogRowsFor = useCallback((prompt, picker, live, isRunning, slashMenuCount) => {
         const slashMenuRows = slashMenuCount > 0 ? Math.min(slashMenuCount, 6) * 2 + 3 : 0;
-        const reservedRows = 8 + (prompt ? 4 : 0) + (picker ? Math.min(picker.items.length, 6) + 3 : 0) + (live || isRunning ? 3 : 0) + slashMenuRows;
+        const reservedRows = 8 +
+            (prompt ? 4 : 0) +
+            (picker ? Math.min(picker.items.length, 6) + 3 : 0) +
+            (live || isRunning ? 3 : 0) +
+            slashMenuRows;
         return Math.max(4, terminalRows - reservedRows);
     }, [terminalRows]);
     const jumpTranscriptTo = useCallback((target) => {
@@ -133,10 +102,10 @@ export function App({ initialConfig }) {
             return false;
         }
         const actualIndex = logs.length - 1 - targetIndex;
-        const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant, running, 0);
+        const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant.text, running, 0);
         setLogScrollOffset(getTranscriptOffsetForEntry(logs.length, visibleLogRows, actualIndex));
         return true;
-    }, [liveAssistant, logs, pickerState, promptState, running, visibleLogRowsFor]);
+    }, [liveAssistant.text, logs, pickerState, promptState, running, visibleLogRowsFor]);
     const openPrompt = useCallback((request) => {
         return new Promise((resolvePrompt) => {
             pendingRequestRef.current = { type: 'prompt', resolve: resolvePrompt };
@@ -176,7 +145,45 @@ export function App({ initialConfig }) {
         setStatus(runningRef.current ? 'Running' : isRebuildingRef.current ? 'Rebuilding agent' : 'Idle');
         pending?.resolve(value);
     }, []);
+    const enterBtw = useCallback((oneShot) => {
+        const agent = agentRef.current;
+        if (!agent) {
+            appendLog('error', 'Agent unavailable', 'The agent is not ready yet.');
+            return false;
+        }
+        if (btwSnapshotRef.current) {
+            appendLog('system', 'Already in btw mode', 'Press Esc to exit first.');
+            return false;
+        }
+        btwSnapshotRef.current = agent.snapshot();
+        btwLogCountRef.current = logs.length;
+        btwOneShotRef.current = oneShot;
+        setBtwActive(true);
+        appendLog('system', 'btw mode', oneShot ? 'One-shot btw — will revert after response.' : 'Entered btw mode. Press Esc to exit and revert.');
+        return true;
+    }, [appendLog, logs.length]);
+    const exitBtw = useCallback(() => {
+        const agent = agentRef.current;
+        const snapshot = btwSnapshotRef.current;
+        if (!agent || !snapshot)
+            return;
+        agent.restore(snapshot);
+        btwSnapshotRef.current = null;
+        btwOneShotRef.current = false;
+        setBtwActive(false);
+        liveAssistant.clear();
+        setPendingTools([]);
+        setLogs((current) => current.slice(0, btwLogCountRef.current));
+        setLogScrollOffset(0);
+        setStatus(runningRef.current ? 'Running' : 'Idle');
+    }, [liveAssistant]);
     const rebuildAgent = useCallback(async (nextConfig, note) => {
+        if (btwSnapshotRef.current) {
+            btwSnapshotRef.current = null;
+            btwOneShotRef.current = false;
+            setBtwActive(false);
+            setLogs((current) => current.slice(0, btwLogCountRef.current));
+        }
         const buildToken = ++buildTokenRef.current;
         if (nextConfig.sessionId !== sessionIdRef.current) {
             permissionMemoryRef.current.clear();
@@ -185,7 +192,7 @@ export function App({ initialConfig }) {
         setStatus('Rebuilding agent');
         setRunning(false);
         setPendingTools([]);
-        clearLiveAssistant();
+        liveAssistant.clear();
         unsubscribeRef.current?.();
         unsubscribeRef.current = null;
         const previousAgent = agentRef.current;
@@ -244,9 +251,17 @@ export function App({ initialConfig }) {
                         ].join('\n'),
                         items: [
                             { id: 'allow', label: 'Allow once', description: 'Run this tool call and continue the current turn.' },
-                            { id: 'allow-session', label: 'Always allow this session', description: 'Auto-approve future calls to this tool name in the current session.' },
+                            {
+                                id: 'allow-session',
+                                label: 'Always allow this session',
+                                description: 'Auto-approve future calls to this tool name in the current session.',
+                            },
                             { id: 'deny', label: 'Deny', description: 'Block this tool call and let the agent recover.' },
-                            { id: 'deny-session', label: 'Always deny this session', description: 'Auto-deny future calls to this tool name in the current session.' },
+                            {
+                                id: 'deny-session',
+                                label: 'Always deny this session',
+                                description: 'Auto-deny future calls to this tool name in the current session.',
+                            },
                         ],
                         selectedId: 'allow',
                     });
@@ -278,17 +293,18 @@ export function App({ initialConfig }) {
             unsubscribeRef.current = codingAgent.agent.subscribe((event) => {
                 handleAgentEvent(event, {
                     getAgentName: () => agentNameRef.current,
-                    getLiveAssistantText: () => {
-                        flushLiveAssistant();
-                        return liveAssistantRef.current;
-                    },
+                    getLiveAssistantText: () => liveAssistant.getText(),
                     appendLog,
-                    appendLiveAssistantDelta,
-                    clearLiveAssistant,
+                    appendLiveAssistantDelta: liveAssistant.appendDelta,
+                    clearLiveAssistant: liveAssistant.clear,
                     setPendingTools,
                     setRunning,
                     setStatus,
                 });
+                // Auto-exit btw mode after one-shot completes
+                if (event.type === 'agent_end' && btwSnapshotRef.current && btwOneShotRef.current) {
+                    setTimeout(() => exitBtw(), 0);
+                }
             });
             appendLog('system', 'Agent ready', note);
             setStatus('Idle');
@@ -302,7 +318,7 @@ export function App({ initialConfig }) {
                 setIsRebuilding(false);
             }
         }
-    }, [appendLog, openPicker, openPrompt]);
+    }, [appendLog, exitBtw, liveAssistant, openPicker, openPrompt]);
     useEffect(() => {
         void rebuildAgent(initialConfig, [
             `Agent ${initialConfig.agentName}`,
@@ -315,16 +331,13 @@ export function App({ initialConfig }) {
             mountedRef.current = false;
             unsubscribeRef.current?.();
             unsubscribeRef.current = null;
-            if (liveAssistantFlushTimerRef.current) {
-                clearTimeout(liveAssistantFlushTimerRef.current);
-                liveAssistantFlushTimerRef.current = null;
-            }
+            liveAssistant.cleanup();
             if (agentRef.current) {
                 void agentRef.current.dispose();
                 agentRef.current = null;
             }
         };
-    }, [clearLiveAssistant, initialConfig, rebuildAgent]);
+    }, [initialConfig, liveAssistant, rebuildAgent]);
     const commandContext = useMemo(() => ({
         config,
         running,
@@ -334,8 +347,14 @@ export function App({ initialConfig }) {
         rebuildAgent,
         setConfig: (updater) => setConfig(updater),
         resetAgent: () => {
+            if (btwSnapshotRef.current) {
+                btwSnapshotRef.current = null;
+                btwOneShotRef.current = false;
+                setBtwActive(false);
+                setLogs((current) => current.slice(0, btwLogCountRef.current));
+            }
             agentRef.current?.agent.reset();
-            clearLiveAssistant();
+            liveAssistant.clear();
             setPendingTools([]);
         },
         abortAgent: () => {
@@ -348,7 +367,7 @@ export function App({ initialConfig }) {
         },
         clearLogs: () => {
             setLogs([]);
-            clearLiveAssistant();
+            liveAssistant.clear();
             setLogScrollOffset(0);
         },
         getCostSummary: () => {
@@ -359,6 +378,8 @@ export function App({ initialConfig }) {
             return { tokens: total.tokens, cost: total.cost };
         },
         jumpTranscript: (target) => jumpTranscriptTo(target),
+        enterBtw,
+        isBtwActive: () => btwSnapshotRef.current !== null,
         promptAgent: async (message) => {
             const agent = agentRef.current;
             if (!agent) {
@@ -376,15 +397,25 @@ export function App({ initialConfig }) {
             }
         },
         exit,
-    }), [appendLog, clearLiveAssistant, closeRequest, config, exit, jumpTranscriptTo, openPicker, openPrompt, rebuildAgent, running]);
+    }), [
+        appendLog,
+        enterBtw,
+        liveAssistant,
+        closeRequest,
+        config,
+        exit,
+        jumpTranscriptTo,
+        openPicker,
+        openPrompt,
+        rebuildAgent,
+        running,
+    ]);
     const submitComposer = useCallback(async () => {
         const trimmed = composer.value.trim();
         if (!trimmed)
             return;
-        rememberComposerDraft(composer.value);
-        setComposer({ value: '', cursor: 0 });
-        setComposerHistoryIndex(null);
-        setComposerDraftBeforeHistory(null);
+        composerHook.remember(composer.value);
+        composerHook.clear();
         setLogScrollOffset(0);
         if (trimmed.startsWith('/')) {
             await handleSlashCommand(trimmed, commandContext);
@@ -412,10 +443,12 @@ export function App({ initialConfig }) {
             appendLog('error', 'Agent error', errorMessage(error));
             setStatus('Error');
         }
-    }, [appendLog, commandContext, composer.value, isRebuilding, rememberComposerDraft, running]);
+    }, [appendLog, commandContext, composer.value, composerHook, isRebuilding, running]);
     const slashCommandItems = useMemo(() => getSlashCommandSuggestions(composer.value, running), [composer.value, running]);
     const slashMenuVisible = currentInputMode === 'composer' && slashCommandItems.length > 0;
-    const selectedSlashCommand = slashMenuVisible ? slashCommandItems[Math.min(slashMenuSelectedIndex, slashCommandItems.length - 1)] : null;
+    const selectedSlashCommand = slashMenuVisible
+        ? slashCommandItems[Math.min(slashMenuSelectedIndex, slashCommandItems.length - 1)]
+        : null;
     useEffect(() => {
         setSlashMenuSelectedIndex((current) => {
             if (slashCommandItems.length === 0)
@@ -423,11 +456,6 @@ export function App({ initialConfig }) {
             return Math.min(current, slashCommandItems.length - 1);
         });
     }, [slashCommandItems]);
-    const applySlashCommandSelection = useCallback((insertText) => {
-        setComposer({ value: insertText, cursor: insertText.length });
-        setComposerHistoryIndex(null);
-        setComposerDraftBeforeHistory(null);
-    }, []);
     useInput((input, key) => {
         if (key.ctrl && input === 'c') {
             if (running && agentRef.current) {
@@ -486,16 +514,17 @@ export function App({ initialConfig }) {
             if (key.upArrow || key.downArrow || key.tab) {
                 return;
             }
-            setPromptState((current) => current ? editBuffer(current, input, { ...key, escape: key.escape }) : current);
+            setPromptState((current) => (current ? editBuffer(current, input, { ...key, escape: key.escape }) : current));
             return;
         }
         if (key.escape) {
-            setComposer({ value: '', cursor: 0 });
-            setComposerHistoryIndex(null);
-            setComposerDraftBeforeHistory(null);
+            if (btwActive) {
+                exitBtw();
+            }
+            composerHook.clear();
             return;
         }
-        const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant, running, slashMenuVisible ? slashCommandItems.length : 0);
+        const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant.text, running, slashMenuVisible ? slashCommandItems.length : 0);
         const scrollStep = Math.max(1, visibleLogRows - 2);
         if (key.pageUp) {
             setLogScrollOffset((current) => stepTranscriptOffset(current, scrollStep, logs.length, visibleLogRows));
@@ -522,62 +551,32 @@ export function App({ initialConfig }) {
             return;
         }
         if (slashMenuVisible && key.tab && selectedSlashCommand) {
-            applySlashCommandSelection(selectedSlashCommand.insertText);
+            composerHook.applySelection(selectedSlashCommand.insertText);
             return;
         }
         if (key.ctrl && input === 'j') {
-            setComposer((current) => {
-                const nextValue = `${current.value.slice(0, current.cursor)}\n${current.value.slice(current.cursor)}`;
-                return { value: nextValue, cursor: current.cursor + 1 };
-            });
-            setComposerHistoryIndex(null);
-            setComposerDraftBeforeHistory(null);
+            composerHook.insertNewline();
             return;
         }
         if (key.return && key.shift) {
-            setComposer((current) => {
-                const nextValue = `${current.value.slice(0, current.cursor)}\n${current.value.slice(current.cursor)}`;
-                return { value: nextValue, cursor: current.cursor + 1 };
-            });
-            setComposerHistoryIndex(null);
-            setComposerDraftBeforeHistory(null);
+            composerHook.insertNewline();
             return;
         }
         if (key.upArrow) {
-            if (composerHistory.length === 0)
-                return;
-            setComposerHistoryIndex((current) => {
-                const nextIndex = current === null ? composerHistory.length - 1 : Math.max(0, current - 1);
-                setComposerDraftBeforeHistory((draft) => draft ?? composer);
-                const nextValue = composerHistory[nextIndex] ?? '';
-                setComposer({ value: nextValue, cursor: nextValue.length });
-                return nextIndex;
-            });
+            composerHook.navigateHistory('up');
             return;
         }
         if (key.downArrow) {
-            if (composerHistory.length === 0 || composerHistoryIndex === null)
-                return;
-            if (composerHistoryIndex >= composerHistory.length - 1) {
-                setComposer(composerDraftBeforeHistory ?? { value: '', cursor: 0 });
-                setComposerHistoryIndex(null);
-                setComposerDraftBeforeHistory(null);
-                return;
-            }
-            const nextIndex = composerHistoryIndex + 1;
-            const nextValue = composerHistory[nextIndex] ?? '';
-            setComposer({ value: nextValue, cursor: nextValue.length });
-            setComposerHistoryIndex(nextIndex);
+            composerHook.navigateHistory('down');
             return;
         }
         if (key.return) {
             if (slashMenuVisible && selectedSlashCommand) {
                 const trimmed = composer.value.trim();
                 const hasArgs = /\s/.test(trimmed.slice(1));
-                const needsCompletion = !hasArgs && (trimmed !== selectedSlashCommand.commandText ||
-                    selectedSlashCommand.insertText.endsWith(' '));
+                const needsCompletion = !hasArgs && (trimmed !== selectedSlashCommand.commandText || selectedSlashCommand.insertText.endsWith(' '));
                 if (needsCompletion) {
-                    applySlashCommandSelection(selectedSlashCommand.insertText);
+                    composerHook.applySelection(selectedSlashCommand.insertText);
                     return;
                 }
             }
@@ -590,13 +589,12 @@ export function App({ initialConfig }) {
         setComposer((current) => {
             const next = editBuffer(current, input, { ...key, escape: key.escape });
             if (next.value !== current.value || next.cursor !== current.cursor) {
-                setComposerHistoryIndex(null);
-                setComposerDraftBeforeHistory(null);
+                composerHook.resetHistoryNavigation();
             }
             return next;
         });
     });
-    const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant, running, slashMenuVisible ? slashCommandItems.length : 0);
+    const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant.text, running, slashMenuVisible ? slashCommandItems.length : 0);
     const transcriptWindow = getTranscriptWindow(logs.length, visibleLogRows, logScrollOffset);
     const renderedLogs = logs.slice(transcriptWindow.start, transcriptWindow.end);
     const hasContentAbove = transcriptWindow.start > 0;
@@ -604,5 +602,5 @@ export function App({ initialConfig }) {
     const rangeText = logs.length > 0 ? `${transcriptWindow.start + 1}-${transcriptWindow.end} of ${logs.length}` : '';
     const transcriptTopRight = [rangeText, hasContentAbove ? '▲' : ''].filter(Boolean).join(' ') || undefined;
     const transcriptBottomRight = hasContentBelow ? `▼ ${transcriptWindow.offset} newer` : undefined;
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 0, minHeight: terminalRows, flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Header, { agentName: config.agentName, cwd: config.cwd, sessionId: config.sessionId, model: config.selection.model, apiStyle: config.selection.apiStyle, endpoint: config.selection.endpoint, permissionMode: config.permissionMode, thinkingLevel: config.thinkingLevel, status: status, pendingTools: pendingTools }) }), _jsx(Box, { flexGrow: 1, flexDirection: "column", marginTop: 1, minHeight: 0, children: _jsx(Frame, { borderColor: "blue", topLeft: "Transcript", topRight: transcriptTopRight, bottomRight: transcriptBottomRight, children: _jsxs(Box, { flexDirection: "row", flexGrow: 1, minHeight: 0, children: [_jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [renderedLogs.length === 0 && !liveAssistant && !running ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "No messages yet." }), _jsx(Text, { dimColor: true, children: "Try asking for a repo change, or use /help to inspect commands." }), _jsx(Text, { dimColor: true, children: "Useful setup commands: /model, /endpoint, /permissions, /thinking, /session new" })] })) : null, renderedLogs.map((entry) => (_jsx(LogRow, { entry: entry }, entry.id))), liveAssistant ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, flexShrink: 0, children: [_jsxs(Text, { color: "cyanBright", bold: true, children: ["\u25CF ", config.agentName] }), _jsx(Box, { paddingLeft: 2, children: _jsx(AssistantMessage, { content: liveAssistant, showSpinner: running, spinner: _jsx(Spinner, { frame: spinnerFrame }) }) })] })) : null, !liveAssistant && running ? (_jsxs(Box, { flexShrink: 0, children: [_jsx(Text, { color: "cyanBright", bold: true, children: "\u25CF " }), _jsx(Text, { italic: true, dimColor: true, children: "Thinking " }), _jsx(Spinner, { frame: spinnerFrame })] })) : null] }), logs.length > visibleLogRows ? (_jsx(Scrollbar, { trackHeight: visibleLogRows, totalEntries: logs.length, visibleEntries: visibleLogRows, offset: logScrollOffset })) : null] }) }) }), _jsxs(Box, { flexShrink: 0, flexDirection: "column", marginTop: 1, children: [pickerState ? (_jsx(PickerPanel, { pickerState: pickerState })) : null, promptState ? (_jsx(PromptPanel, { promptState: promptState })) : null, !promptState && !pickerState && slashMenuVisible ? (_jsx(SlashCommandMenu, { items: slashCommandItems, selectedIndex: Math.min(slashMenuSelectedIndex, Math.max(0, slashCommandItems.length - 1)) })) : null, !promptState && !pickerState ? (_jsx(Frame, { borderColor: running ? 'yellow' : 'cyan', bottomLeft: slashMenuVisible ? 'Enter send · ⇧Enter newline · Tab complete · /help' : 'Enter send · ⇧Enter newline · /help', children: _jsxs(Box, { children: [_jsx(Text, { color: "greenBright", bold: true, children: '> ' }), _jsx(Editor, { value: composer.value, cursor: composer.cursor, placeholder: `Ask ${config.agentName} or type /help` })] }) })) : null, _jsxs(Box, { paddingX: 1, justifyContent: "space-between", marginBottom: 0, children: [_jsx(Text, { dimColor: true, children: running ? 'Ctrl+C abort' : 'Ctrl+C exit' }), _jsx(Box, { children: running ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { frame: spinnerFrame }), _jsxs(Text, { color: "yellowBright", children: [" ", status] })] })) : (_jsx(Text, { color: "greenBright", children: "\u25CF ready" })) })] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingY: 0, minHeight: terminalRows, flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Header, { agentName: config.agentName, cwd: config.cwd, sessionId: config.sessionId, model: config.selection.model, apiStyle: config.selection.apiStyle, endpoint: config.selection.endpoint, permissionMode: config.permissionMode, thinkingLevel: config.thinkingLevel, status: status, pendingTools: pendingTools, termWidth: termWidth }) }), _jsx(Box, { flexGrow: 1, flexDirection: "column", marginTop: 1, minHeight: 0, children: _jsx(Frame, { borderColor: btwActive ? 'magenta' : 'blue', topLeft: btwActive ? 'Transcript (btw)' : 'Transcript', topRight: transcriptTopRight, bottomRight: transcriptBottomRight, termWidth: termWidth, children: _jsxs(Box, { flexDirection: "row", flexGrow: 1, minHeight: 0, children: [_jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [renderedLogs.length === 0 && !liveAssistant.text && !running ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "No messages yet." }), _jsx(Text, { dimColor: true, children: "Try asking for a repo change, or use /help to inspect commands." }), _jsx(Text, { dimColor: true, children: "Useful setup commands: /model, /endpoint, /permissions, /thinking, /session new" })] })) : null, renderedLogs.map((entry) => (_jsx(LogRow, { entry: entry, termWidth: termWidth }, entry.id))), liveAssistant.text ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, flexShrink: 0, children: [_jsxs(Text, { color: "cyanBright", bold: true, children: ["\u25CF ", config.agentName] }), _jsx(Box, { paddingLeft: 2, children: _jsx(AssistantMessage, { content: liveAssistant.text, showSpinner: running, spinner: _jsx(Spinner, { frame: spinnerFrame }) }) })] })) : null, !liveAssistant.text && running ? (_jsxs(Box, { flexShrink: 0, children: [_jsxs(Text, { color: "cyanBright", bold: true, children: ["\u25CF", ' '] }), _jsxs(Text, { italic: true, dimColor: true, children: ["Thinking", ' '] }), _jsx(Spinner, { frame: spinnerFrame })] })) : null] }), logs.length > visibleLogRows ? (_jsx(Scrollbar, { trackHeight: visibleLogRows, totalEntries: logs.length, visibleEntries: visibleLogRows, offset: logScrollOffset })) : null] }) }) }), _jsxs(Box, { flexShrink: 0, flexDirection: "column", marginTop: 1, children: [pickerState ? _jsx(PickerPanel, { pickerState: pickerState }) : null, promptState ? _jsx(PromptPanel, { promptState: promptState }) : null, !promptState && !pickerState ? (_jsx(ComposerPanel, { value: composerHook.composer.value, cursor: composerHook.composer.cursor, agentName: config.agentName, running: running, btwActive: btwActive, slashMenuVisible: slashMenuVisible, slashCommandItems: slashCommandItems, slashMenuSelectedIndex: slashMenuSelectedIndex, termWidth: termWidth })) : null, _jsx(StatusBar, { running: running, status: status, spinnerFrame: spinnerFrame, btwActive: btwActive })] })] }));
 }