@researchcomputer/pista 0.1.2

package/dist/app.js

@@ -0,0 +1,608 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import process from 'node:process';
+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 { resolveModel, describeSelection } from './model.js';
+import { handleAgentEvent } from './agent-events.js';
+import { getSlashCommandSuggestions, handleSlashCommand } from './commands.js';
+import { Frame } from './components/frame.js';
+import { Scrollbar } from './components/scrollbar.js';
+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';
+import { AssistantMessage } from './components/assistant-message.js';
+import { Editor, 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 = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+function Spinner({ frame }) {
+    return _jsx(Text, { color: "cyanBright", children: SPINNER_FRAMES[frame % SPINNER_FRAMES.length] });
+}
+export function App({ initialConfig }) {
+    const { exit } = useApp();
+    const agentRef = useRef(null);
+    const agentNameRef = useRef(initialConfig.agentName);
+    const unsubscribeRef = useRef(null);
+    const buildTokenRef = useRef(0);
+    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 [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 [slashMenuSelectedIndex, setSlashMenuSelectedIndex] = useState(0);
+    const [liveAssistant, setLiveAssistant] = useState('');
+    const [status, setStatus] = useState('Idle');
+    const [running, setRunning] = useState(false);
+    const [spinnerFrame, setSpinnerFrame] = useState(0);
+    const [pendingTools, setPendingTools] = useState([]);
+    const [logScrollOffset, setLogScrollOffset] = useState(0);
+    const [promptState, setPromptState] = useState(null);
+    const [pickerState, setPickerState] = useState(null);
+    const [isRebuilding, setIsRebuilding] = 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]);
+    useEffect(() => {
+        if (!running) {
+            setSpinnerFrame(0);
+            return;
+        }
+        const timer = setInterval(() => {
+            setSpinnerFrame((current) => (current + 1) % SPINNER_FRAMES.length);
+        }, 100);
+        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);
+        });
+    }, []);
+    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;
+        return Math.max(4, terminalRows - reservedRows);
+    }, [terminalRows]);
+    const jumpTranscriptTo = useCallback((target) => {
+        if (target === 'latest') {
+            setLogScrollOffset(0);
+            return true;
+        }
+        const targetIndex = [...logs].reverse().findIndex((entry) => entry.kind === target);
+        if (targetIndex === -1) {
+            return false;
+        }
+        const actualIndex = logs.length - 1 - targetIndex;
+        const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant, running, 0);
+        setLogScrollOffset(getTranscriptOffsetForEntry(logs.length, visibleLogRows, actualIndex));
+        return true;
+    }, [liveAssistant, logs, pickerState, promptState, running, visibleLogRowsFor]);
+    const openPrompt = useCallback((request) => {
+        return new Promise((resolvePrompt) => {
+            pendingRequestRef.current = { type: 'prompt', resolve: resolvePrompt };
+            const value = request.initialValue ?? '';
+            setPromptState({
+                title: request.title,
+                description: request.description,
+                placeholder: request.placeholder,
+                secret: request.secret,
+                value,
+                cursor: value.length,
+            });
+            setStatus('Waiting for input');
+        });
+    }, []);
+    const openPicker = useCallback((request) => {
+        return new Promise((resolvePicker) => {
+            const selectedIndex = request.selectedId
+                ? Math.max(0, request.items.findIndex((item) => item.id === request.selectedId))
+                : 0;
+            pendingRequestRef.current = { type: 'picker', resolve: resolvePicker };
+            setPickerState({
+                title: request.title,
+                description: request.description,
+                items: request.items,
+                emptyMessage: request.emptyMessage,
+                selectedIndex,
+            });
+            setStatus('Choose an option');
+        });
+    }, []);
+    const closeRequest = useCallback((value) => {
+        const pending = pendingRequestRef.current;
+        pendingRequestRef.current = null;
+        setPromptState(null);
+        setPickerState(null);
+        setStatus(runningRef.current ? 'Running' : isRebuildingRef.current ? 'Rebuilding agent' : 'Idle');
+        pending?.resolve(value);
+    }, []);
+    const rebuildAgent = useCallback(async (nextConfig, note) => {
+        const buildToken = ++buildTokenRef.current;
+        if (nextConfig.sessionId !== sessionIdRef.current) {
+            permissionMemoryRef.current.clear();
+        }
+        setIsRebuilding(true);
+        setStatus('Rebuilding agent');
+        setRunning(false);
+        setPendingTools([]);
+        clearLiveAssistant();
+        unsubscribeRef.current?.();
+        unsubscribeRef.current = null;
+        const previousAgent = agentRef.current;
+        agentRef.current = null;
+        if (previousAgent) {
+            await previousAgent.dispose();
+        }
+        setConfig(nextConfig);
+        try {
+            saveStoredPreferences(mergeStoredPreferences(loadStoredPreferences(), { selection: nextConfig.selection }));
+            saveStoredPreferences(mergeStoredPreferences(loadStoredPreferences(nextConfig.cwd), { selection: nextConfig.selection }), nextConfig.cwd);
+        }
+        catch (error) {
+            appendLog('error', 'Preferences not saved', errorMessage(error));
+        }
+        const selectedModel = resolveModel(nextConfig.selection, nextConfig.thinkingLevel);
+        try {
+            const codingAgent = await createCodingAgent({
+                model: selectedModel,
+                cwd: nextConfig.cwd,
+                sessionId: nextConfig.sessionId,
+                sessionDir: getCliSessionsDir(),
+                memoryDir: getCliMemoryDir(),
+                permissionMode: nextConfig.permissionMode,
+                thinkingLevel: nextConfig.thinkingLevel,
+                skills: nextConfig.skills,
+                getApiKey: async () => {
+                    const storedKey = getStoredApiKey();
+                    if (storedKey)
+                        return storedKey;
+                    const promptedKey = await openPrompt({
+                        title: 'API Key Required',
+                        description: `Please enter your API key for ${nextConfig.selection.endpoint}. It will be saved to ${getApiKeyPath()}.`,
+                        placeholder: 'Paste your API key here',
+                        secret: true,
+                    });
+                    if (promptedKey) {
+                        saveApiKey(promptedKey);
+                        appendLog('system', 'API Key Saved', `Saved to ${getApiKeyPath()}`);
+                        return promptedKey;
+                    }
+                    return undefined;
+                },
+                onPermissionAsk: async (toolName, args) => {
+                    const rememberedDecision = permissionMemoryRef.current.get(toolName);
+                    if (rememberedDecision) {
+                        appendLog(rememberedDecision === 'allow' ? 'system' : 'error', rememberedDecision === 'allow' ? 'Permission auto-approved' : 'Permission auto-denied', `${toolName} ${rememberedDecision === 'allow' ? 'allowed' : 'blocked'} by session memory`);
+                        return rememberedDecision === 'allow';
+                    }
+                    const answer = await openPicker({
+                        title: `Permission required · ${toolName}`,
+                        description: [
+                            'The agent wants to run this tool with the following arguments:',
+                            'Remembered choices apply to this tool name for the rest of the current session.',
+                            stringifyPreview(args, 320),
+                        ].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: '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.' },
+                        ],
+                        selectedId: 'allow',
+                    });
+                    if (answer === 'allow-session') {
+                        permissionMemoryRef.current.set(toolName, 'allow');
+                    }
+                    else if (answer === 'deny-session') {
+                        permissionMemoryRef.current.set(toolName, 'deny');
+                    }
+                    const allowed = answer === 'allow' || answer === 'allow-session';
+                    appendLog(allowed ? 'system' : 'error', allowed ? 'Permission granted' : 'Permission denied', `${toolName} ${allowed ? 'allowed' : 'blocked'}${answer?.endsWith('session') ? ' for the rest of this session' : ''}`);
+                    return allowed;
+                },
+                onQuestion: async (question) => {
+                    const answer = await openPrompt({
+                        title: 'Agent question',
+                        description: question,
+                        placeholder: 'Type your answer',
+                    });
+                    appendLog('system', 'User response sent to agent', answer ?? '');
+                    return answer ?? '';
+                },
+            });
+            if (!mountedRef.current || buildToken !== buildTokenRef.current) {
+                await codingAgent.dispose();
+                return;
+            }
+            agentRef.current = codingAgent;
+            unsubscribeRef.current = codingAgent.agent.subscribe((event) => {
+                handleAgentEvent(event, {
+                    getAgentName: () => agentNameRef.current,
+                    getLiveAssistantText: () => {
+                        flushLiveAssistant();
+                        return liveAssistantRef.current;
+                    },
+                    appendLog,
+                    appendLiveAssistantDelta,
+                    clearLiveAssistant,
+                    setPendingTools,
+                    setRunning,
+                    setStatus,
+                });
+            });
+            appendLog('system', 'Agent ready', note);
+            setStatus('Idle');
+        }
+        catch (error) {
+            appendLog('error', 'Agent init failed', errorMessage(error));
+            setStatus('Error');
+        }
+        finally {
+            if (buildToken === buildTokenRef.current) {
+                setIsRebuilding(false);
+            }
+        }
+    }, [appendLog, openPicker, openPrompt]);
+    useEffect(() => {
+        void rebuildAgent(initialConfig, [
+            `Agent ${initialConfig.agentName}`,
+            `Session ${initialConfig.sessionId}`,
+            `CWD ${initialConfig.cwd}`,
+            `Model ${describeSelection(initialConfig.selection)}`,
+            'Type /help for commands.',
+        ].join('\n'));
+        return () => {
+            mountedRef.current = false;
+            unsubscribeRef.current?.();
+            unsubscribeRef.current = null;
+            if (liveAssistantFlushTimerRef.current) {
+                clearTimeout(liveAssistantFlushTimerRef.current);
+                liveAssistantFlushTimerRef.current = null;
+            }
+            if (agentRef.current) {
+                void agentRef.current.dispose();
+                agentRef.current = null;
+            }
+        };
+    }, [clearLiveAssistant, initialConfig, rebuildAgent]);
+    const commandContext = useMemo(() => ({
+        config,
+        running,
+        appendLog,
+        openPrompt,
+        openPicker,
+        rebuildAgent,
+        setConfig: (updater) => setConfig(updater),
+        resetAgent: () => {
+            agentRef.current?.agent.reset();
+            clearLiveAssistant();
+            setPendingTools([]);
+        },
+        abortAgent: () => {
+            agentRef.current?.agent.abort();
+        },
+        cancelPendingRequest: () => {
+            if (pendingRequestRef.current) {
+                closeRequest(null);
+            }
+        },
+        clearLogs: () => {
+            setLogs([]);
+            clearLiveAssistant();
+            setLogScrollOffset(0);
+        },
+        getCostSummary: () => {
+            const agent = agentRef.current;
+            if (!agent)
+                return null;
+            const total = agent.costTracker.total();
+            return { tokens: total.tokens, cost: total.cost };
+        },
+        jumpTranscript: (target) => jumpTranscriptTo(target),
+        promptAgent: async (message) => {
+            const agent = agentRef.current;
+            if (!agent) {
+                appendLog('error', 'Agent unavailable', 'The agent is not ready yet.');
+                return;
+            }
+            appendLog('user', 'You', message);
+            setStatus('Running');
+            try {
+                await agent.prompt(message);
+            }
+            catch (error) {
+                appendLog('error', 'Agent error', errorMessage(error));
+                setStatus('Error');
+            }
+        },
+        exit,
+    }), [appendLog, clearLiveAssistant, 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);
+        setLogScrollOffset(0);
+        if (trimmed.startsWith('/')) {
+            await handleSlashCommand(trimmed, commandContext);
+            return;
+        }
+        if (isRebuilding) {
+            appendLog('error', 'Agent unavailable', 'Wait for the current agent rebuild to finish.');
+            return;
+        }
+        const agent = agentRef.current;
+        if (!agent) {
+            appendLog('error', 'Agent unavailable', 'The agent is not ready yet.');
+            return;
+        }
+        if (running) {
+            appendLog('error', 'Agent busy', 'Use /abort or wait for the current run to finish.');
+            return;
+        }
+        appendLog('user', 'You', trimmed);
+        setStatus('Running');
+        try {
+            await agent.prompt(trimmed);
+        }
+        catch (error) {
+            appendLog('error', 'Agent error', errorMessage(error));
+            setStatus('Error');
+        }
+    }, [appendLog, commandContext, composer.value, isRebuilding, rememberComposerDraft, 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;
+    useEffect(() => {
+        setSlashMenuSelectedIndex((current) => {
+            if (slashCommandItems.length === 0)
+                return 0;
+            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) {
+                if (pendingRequestRef.current) {
+                    closeRequest(null);
+                }
+                agentRef.current.agent.abort();
+                appendLog('system', 'Abort requested', 'Waiting for the current run to stop.');
+                return;
+            }
+            exit();
+            return;
+        }
+        if (currentInputMode === 'picker' && pickerState) {
+            if (key.escape) {
+                closeRequest(null);
+                return;
+            }
+            if (key.upArrow) {
+                setPickerState((current) => {
+                    if (!current || current.items.length === 0)
+                        return current;
+                    return {
+                        ...current,
+                        selectedIndex: (current.selectedIndex - 1 + current.items.length) % current.items.length,
+                    };
+                });
+                return;
+            }
+            if (key.downArrow) {
+                setPickerState((current) => {
+                    if (!current || current.items.length === 0)
+                        return current;
+                    return {
+                        ...current,
+                        selectedIndex: (current.selectedIndex + 1) % current.items.length,
+                    };
+                });
+                return;
+            }
+            if (key.return) {
+                const item = pickerState.items[pickerState.selectedIndex];
+                closeRequest(item?.id ?? null);
+            }
+            return;
+        }
+        if (currentInputMode === 'prompt' && promptState) {
+            if (key.escape) {
+                closeRequest(null);
+                return;
+            }
+            if (key.return) {
+                closeRequest(promptState.value);
+                return;
+            }
+            if (key.upArrow || key.downArrow || key.tab) {
+                return;
+            }
+            setPromptState((current) => current ? editBuffer(current, input, { ...key, escape: key.escape }) : current);
+            return;
+        }
+        if (key.escape) {
+            setComposer({ value: '', cursor: 0 });
+            setComposerHistoryIndex(null);
+            setComposerDraftBeforeHistory(null);
+            return;
+        }
+        const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant, running, slashMenuVisible ? slashCommandItems.length : 0);
+        const scrollStep = Math.max(1, visibleLogRows - 2);
+        if (key.pageUp) {
+            setLogScrollOffset((current) => stepTranscriptOffset(current, scrollStep, logs.length, visibleLogRows));
+            return;
+        }
+        if (key.pageDown) {
+            setLogScrollOffset((current) => stepTranscriptOffset(current, -scrollStep, logs.length, visibleLogRows));
+            return;
+        }
+        if (slashMenuVisible && key.upArrow) {
+            setSlashMenuSelectedIndex((current) => {
+                if (slashCommandItems.length === 0)
+                    return 0;
+                return (current - 1 + slashCommandItems.length) % slashCommandItems.length;
+            });
+            return;
+        }
+        if (slashMenuVisible && key.downArrow) {
+            setSlashMenuSelectedIndex((current) => {
+                if (slashCommandItems.length === 0)
+                    return 0;
+                return (current + 1) % slashCommandItems.length;
+            });
+            return;
+        }
+        if (slashMenuVisible && key.tab && selectedSlashCommand) {
+            applySlashCommandSelection(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);
+            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);
+            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;
+            });
+            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);
+            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(' '));
+                if (needsCompletion) {
+                    applySlashCommandSelection(selectedSlashCommand.insertText);
+                    return;
+                }
+            }
+            void submitComposer();
+            return;
+        }
+        if (key.tab) {
+            return;
+        }
+        setComposer((current) => {
+            const next = editBuffer(current, input, { ...key, escape: key.escape });
+            if (next.value !== current.value || next.cursor !== current.cursor) {
+                setComposerHistoryIndex(null);
+                setComposerDraftBeforeHistory(null);
+            }
+            return next;
+        });
+    });
+    const visibleLogRows = visibleLogRowsFor(promptState, pickerState, liveAssistant, 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;
+    const hasContentBelow = transcriptWindow.offset > 0;
+    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" })) })] })] })] }));
+}