xibecode 0.9.6 → 0.9.7

package/dist/ui/claude-style-chat.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TextInput from 'ink-text-input';
-import { Box, Text, createRoot, useApp, useInput } from '../ink.js';
+import { Box, Static, Text, createRoot, useApp, useInput } from '../ink.js';
 import * as fs from 'fs/promises';
 import * as path from 'path';
 import { ConfigManager, PROVIDER_CONFIGS } from '../utils/config.js';
@@ -14,7 +14,9 @@ import { renderAndRun } from '../interactiveHelpers.js';
 import { AssistantMarkdown } from '../components/AssistantMarkdown.js';
 import { formatToolArgs, formatToolOutcome, formatRunSwarmDetailLines } from '../utils/tool-display.js';
 import { SPINNER_VERBS } from '../constants/spinnerVerbs.js';
-const APP_VERSION = '0.9.6';
+import { extractAtReferences, splitAtReferences } from '../utils/at-references.js';
+import { loadImageAttachment, mimeFromExtension } from '../utils/image-attachments.js';
+const APP_VERSION = '0.9.7';
 const HERO_LOGO = [
     '██╗  ██╗██╗██████╗ ███████╗',
     '╚██╗██╔╝██║██╔══██╗██╔════╝',
@@ -58,6 +60,14 @@ function isAnthropicWireFormat(requestFormat, provider, customProviderFormat) {
     }
     return false;
 }
+function computeWindowStart(total, selected, windowSize) {
+    if (total <= windowSize)
+        return 0;
+    const clampedSelected = Math.max(0, Math.min(selected, total - 1));
+    const maxStart = total - windowSize;
+    const start = clampedSelected - Math.floor(windowSize / 2);
+    return Math.max(0, Math.min(start, maxStart));
+}
 function lineColorKey(type) {
     switch (type) {
         case 'user':
@@ -117,10 +127,8 @@ function XibeCodeChatApp(props) {
     const { exit } = useApp();
     const [input, setInput] = useState('');
     const [isRunning, setIsRunning] = useState(false);
-    const [paused, setPaused] = useState(false);
     const [runStartedAt, setRunStartedAt] = useState(null);
     const [runElapsedMs, setRunElapsedMs] = useState(0);
-    const [liveStats, setLiveStats] = useState(null);
     const [wireFormat, setWireFormat] = useState(props.initialRequestFormat);
     const [activeModel, setActiveModel] = useState(props.model);
     const [activeMode, setActiveMode] = useState(props.initialMode);
@@ -156,33 +164,28 @@ function XibeCodeChatApp(props) {
     const [configCostModeIndex, setConfigCostModeIndex] = useState(0);
     const [workSpinnerFrame, setWorkSpinnerFrame] = useState(0);
     const [workVerbIndex, setWorkVerbIndex] = useState(0);
+    const nextLineIdRef = useRef(1);
     const [lines, setLines] = useState([
         {
+            kind: 'line',
+            id: nextLineIdRef.current++,
             type: 'info',
             text: 'XibeCode interactive session. Type /exit to quit, /clear to reset the transcript.',
         },
-        { type: 'info', text: 'Tip: press p to pause/resume live updates (for copying).' },
+        { kind: 'line', id: nextLineIdRef.current++, type: 'info', text: 'Type /help for shortcuts.' },
     ]);
-    const pausedBuffer = useRef([]);
     const pushLine = useCallback((line) => {
+        const withId = { ...line, kind: 'line', id: nextLineIdRef.current++ };
         props.onUiLine?.(line);
-        if (paused) {
-            pausedBuffer.current.push(line);
-            return;
-        }
         // Keep a much larger in-memory transcript so context doesn't vanish quickly.
-        setLines((prev) => [...prev.slice(-5000), line]);
-    }, [paused, props]);
-    const togglePaused = useCallback(() => {
-        setPaused((prev) => {
-            const next = !prev;
-            if (prev && pausedBuffer.current.length > 0) {
-                const buffered = pausedBuffer.current.splice(0, pausedBuffer.current.length);
-                setLines((current) => [...current.slice(-5000), ...buffered].slice(-5000));
-            }
-            return next;
-        });
-    }, []);
+        setLines((prev) => [...prev.slice(-5000), withId]);
+    }, [props]);
+    const abortControllerRef = useRef(null);
+    const abortReasonRef = useRef('none');
+    const queuedPromptRef = useRef(null);
+    const lastVisibleOutputAtRef = useRef(Date.now());
+    const currentPromptRef = useRef(null);
+    const restartAttemptsRef = useRef(0);
     const lastBgLineByTask = useRef(new Map());
     useEffect(() => {
         if (!isRunning)
@@ -226,9 +229,27 @@ function XibeCodeChatApp(props) {
         }
         const id = setInterval(() => {
             setWorkSpinnerFrame((f) => (f + 1) % WORK_SPINNER_FRAMES.length);
-        }, 90);
+        }, 120);
         return () => clearInterval(id);
     }, [isRunning]);
+    useEffect(() => {
+        if (!isRunning)
+            return;
+        const id = setInterval(() => {
+            // Silent means: no visible output (tool_call/tool_result/stream_text/response) for 90s.
+            if (Date.now() - lastVisibleOutputAtRef.current > 90_000) {
+                if (abortControllerRef.current && abortReasonRef.current === 'none') {
+                    abortReasonRef.current = 'watchdog';
+                    pushLine({
+                        type: 'info',
+                        text: `No output for 90s — restarting (attempt ${Math.min(restartAttemptsRef.current + 1, 2)}/2)…`,
+                    });
+                    abortControllerRef.current.abort();
+                }
+            }
+        }, 1000);
+        return () => clearInterval(id);
+    }, [isRunning, pushLine]);
     useEffect(() => {
         if (!isRunning) {
             setRunStartedAt(null);
@@ -242,19 +263,6 @@ function XibeCodeChatApp(props) {
         }, 250);
         return () => clearInterval(id);
     }, [isRunning]);
-    useEffect(() => {
-        if (!isRunning || !props.getLiveStats)
-            return;
-        const id = setInterval(() => {
-            try {
-                setLiveStats(props.getLiveStats());
-            }
-            catch {
-                // ignore
-            }
-        }, 1000);
-        return () => clearInterval(id);
-    }, [isRunning, props]);
     useEffect(() => {
         if (!isRunning)
             return;
@@ -359,8 +367,14 @@ function XibeCodeChatApp(props) {
     }, [activeMode, props, pushLine]);
     const onSubmit = useCallback(async (value) => {
         const trimmed = value.trim();
-        if (!trimmed || isRunning)
+        if (!trimmed)
+            return;
+        if (isRunning) {
+            queuedPromptRef.current = trimmed;
+            setInput('');
+            pushLine({ type: 'info', text: 'Queued message — will run next.' });
             return;
+        }
         const commandMatches = CHAT_COMMANDS.filter((command) => command.name.toLowerCase().startsWith(trimmed.toLowerCase()));
         const exactMatch = CHAT_COMMANDS.some((command) => command.name.toLowerCase() === trimmed.toLowerCase());
         const resolvedInput = trimmed.startsWith('/') && !exactMatch && commandMatches[selectedCommandIndex]
@@ -464,14 +478,21 @@ function XibeCodeChatApp(props) {
             return;
         }
         if (resolvedInput === '/clear') {
-            setLines([{ type: 'info', text: 'Cleared transcript.' }]);
+            pushLine({ type: 'info', text: '──────────── transcript cleared ────────────' });
             return;
         }
         if (resolvedInput === '/help') {
             setLines((prev) => [
                 ...prev,
-                { type: 'info', text: `Shortcuts: ${QUICK_HELP.join(' · ')}` },
                 {
+                    kind: 'line',
+                    id: nextLineIdRef.current++,
+                    type: 'info',
+                    text: `Shortcuts: ${QUICK_HELP.join(' · ')}`,
+                },
+                {
+                    kind: 'line',
+                    id: nextLineIdRef.current++,
                     type: 'info',
                     text: 'Press Ctrl+C to quit. Type any prompt and XibeCode will run agent mode.',
                 },
@@ -579,26 +600,94 @@ function XibeCodeChatApp(props) {
             }
             return;
         }
-        pushLine({ type: 'user', text: resolvedInput });
-        setIsRunning(true);
-        try {
-            const startedAt = Date.now();
-            const stats = await props.runPrompt(resolvedInput, pushLine);
-            const elapsedMs = Date.now() - startedAt;
-            const seconds = (elapsedMs / 1000).toFixed(1);
-            pushLine({
-                type: 'info',
-                text: `Done in ${seconds}s · ` +
-                    `tokens ${stats.inputTokens} in / ${stats.outputTokens} out / ${stats.totalTokens} total` +
-                    (stats.costLabel ? ` · cost ${stats.costLabel}` : ''),
-            });
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : 'Unknown error';
-            pushLine({ type: 'error', text: message });
-        }
-        finally {
-            setIsRunning(false);
+        const runOne = async (prompt) => {
+            currentPromptRef.current = prompt;
+            abortReasonRef.current = 'none';
+            lastVisibleOutputAtRef.current = Date.now();
+            abortControllerRef.current = new AbortController();
+            pushLine({ type: 'user', text: prompt });
+            setIsRunning(true);
+            try {
+                const startedAt = Date.now();
+                const refs = extractAtReferences(prompt, process.cwd());
+                const { image: imageRefs } = splitAtReferences(refs);
+                const images = [];
+                for (const ref of imageRefs) {
+                    try {
+                        const mime = mimeFromExtension(ref.extension);
+                        if (!mime)
+                            continue;
+                        const attachment = await loadImageAttachment(ref.resolvedPath, { mime });
+                        images.push(attachment);
+                    }
+                    catch (err) {
+                        const message = err instanceof Error ? err.message : 'Failed to load image';
+                        pushLine({ type: 'error', text: message });
+                    }
+                }
+                const stats = await props.runPrompt(prompt, pushLine, {
+                    images: images.length ? images : undefined,
+                    signal: abortControllerRef.current.signal,
+                    onVisibleOutput: () => {
+                        lastVisibleOutputAtRef.current = Date.now();
+                    },
+                });
+                const elapsedMs = Date.now() - startedAt;
+                const seconds = (elapsedMs / 1000).toFixed(1);
+                pushLine({
+                    type: 'info',
+                    text: `Done in ${seconds}s` + (stats.costLabel ? ` · cost ${stats.costLabel}` : ''),
+                });
+            }
+            finally {
+                abortControllerRef.current = null;
+                currentPromptRef.current = null;
+                setIsRunning(false);
+            }
+        };
+        const isAbortError = (err) => {
+            if (!err || typeof err !== 'object')
+                return false;
+            const anyErr = err;
+            return anyErr.name === 'AbortError' || String(anyErr.message || '').toLowerCase().includes('aborted');
+        };
+        // Watchdog auto-restart loop (up to 2 restarts)
+        restartAttemptsRef.current = 0;
+        let promptToRun = resolvedInput;
+        while (promptToRun) {
+            try {
+                await runOne(promptToRun);
+                break;
+            }
+            catch (err) {
+                if (isAbortError(err) && abortReasonRef.current === 'watchdog') {
+                    restartAttemptsRef.current += 1;
+                    if (restartAttemptsRef.current <= 2) {
+                        // Restart same prompt
+                        continue;
+                    }
+                    pushLine({ type: 'error', text: 'Restart limit reached (2). Stopping.' });
+                    break;
+                }
+                if (isAbortError(err) && abortReasonRef.current === 'user') {
+                    pushLine({ type: 'info', text: 'Cancelled.' });
+                    break;
+                }
+                const message = err instanceof Error ? err.message : 'Unknown error';
+                pushLine({ type: 'error', text: message });
+                break;
+            }
+            finally {
+                // If a message was queued during this run, send it next.
+                if (!isRunning && queuedPromptRef.current) {
+                    const q = queuedPromptRef.current;
+                    queuedPromptRef.current = null;
+                    promptToRun = q;
+                }
+                else {
+                    promptToRun = null;
+                }
+            }
         }
     }, [
         applyModel,
@@ -617,6 +706,7 @@ function XibeCodeChatApp(props) {
         wireFormat,
         applyMode,
         startSetupWizard,
+        isRunning,
     ]);
     const normalizedInput = input.trim().toLowerCase();
     const isSlashMode = input.startsWith('/');
@@ -631,13 +721,21 @@ function XibeCodeChatApp(props) {
         mode.label.toLowerCase().includes(modeFilter) ||
         mode.description.toLowerCase().includes(modeFilter));
     const filteredCommands = CHAT_COMMANDS.filter((command) => command.name.toLowerCase().startsWith(normalizedInput || '/'));
+    const MODEL_PICKER_WINDOW = 14;
+    const modelPickerStart = computeWindowStart(filteredModels.length, selectedModelIndex, MODEL_PICKER_WINDOW);
+    const visibleModelOptions = filteredModels.slice(modelPickerStart, modelPickerStart + MODEL_PICKER_WINDOW);
+    const setupModelPickerStart = computeWindowStart(setupModels.length, setupSelectedModelIndex, MODEL_PICKER_WINDOW);
+    const visibleSetupModelOptions = setupModels.slice(setupModelPickerStart, setupModelPickerStart + MODEL_PICKER_WINDOW);
     useInput((inputKey, key) => {
         if (key.ctrl && inputKey === 'c') {
             exit();
             return;
         }
-        if (!key.ctrl && !key.meta && !key.shift && (inputKey === 'p' || inputKey === 'P')) {
-            togglePaused();
+        if (isRunning && key.escape) {
+            if (abortControllerRef.current && abortReasonRef.current === 'none') {
+                abortReasonRef.current = 'user';
+                abortControllerRef.current.abort();
+            }
             return;
         }
         if (configMenuOpen && !isRunning) {
@@ -817,9 +915,8 @@ function XibeCodeChatApp(props) {
                 const picked = setupModels[setupSelectedModelIndex];
                 if (!picked)
                     return;
-                const config = new ConfigManager(props.profile);
-                config.set('model', picked);
-                pushLine({ type: 'info', text: `Model set to: ${picked}` });
+                // Use the same path as /model so the live status line updates immediately.
+                void applyModel(picked);
                 setSetupModelPickerOpen(false);
                 setSetupStep('idle');
                 pushLine({ type: 'info', text: 'Setup complete. Type a prompt to start.' });
@@ -907,12 +1004,8 @@ function XibeCodeChatApp(props) {
             ? `${workVerbPhrase.slice(0, 30)}…`
             : workVerbPhrase;
         const tail = `working ${WORK_SPINNER_FRAMES[workSpinnerFrame]} · ${shortVerb}`;
-        const pauseLabel = paused ? ' | PAUSED' : '';
         const elapsed = runElapsedMs ? ` | elapsed ${(runElapsedMs / 1000).toFixed(1)}s` : '';
-        const tokens = liveStats
-            ? ` | tokens ${liveStats.inputTokens}/${liveStats.outputTokens}/${liveStats.totalTokens}`
-            : '';
-        return `model: ${activeModel} | format: ${wireFormat} | mode: ${activeMode} | provider: ${props.provider || 'auto'} | ${tail}${pauseLabel}${elapsed}${tokens}`;
+        return `model: ${activeModel} | format: ${wireFormat} | mode: ${activeMode} | provider: ${props.provider || 'auto'} | ${tail}${elapsed}`;
     }, [
         activeModel,
         activeMode,
@@ -921,17 +1014,34 @@ function XibeCodeChatApp(props) {
         wireFormat,
         workSpinnerFrame,
         workVerbPhrase,
-        paused,
         runElapsedMs,
-        liveStats,
     ]);
-    const showWelcome = lines.length <= 1;
+    /** Taller transcript area once there is real chat; hero stays visible for the whole session. */
+    const hasChatContent = lines.some((l) => l.kind === 'line' &&
+        (l.type === 'user' ||
+            l.type === 'assistant' ||
+            l.type === 'tool' ||
+            l.type === 'tool_out' ||
+            l.type === 'error'));
     const providerName = props.provider ? props.provider.toUpperCase() : 'AUTO';
     const divider = '─'.repeat(98);
-    const chatPanelHeight = showWelcome ? 12 : 22;
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [showWelcome && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [HERO_LOGO.map((line, idx) => (_jsx(React.Fragment, { children: _jsx(Text, { bold: true, color: idx < 6 ? 'claude' : 'suggestion', children: line }) }, `logo-${idx}`))), _jsx(Text, { color: "suggestion", children: "\u2726 Any model, Every tool, Zero limits. \u2726" }), _jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Provider " }), _jsx(Text, { color: "claude", bold: true, children: providerName })] }), _jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Model    " }), _jsx(Text, { children: activeModel })] }), _jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Endpoint " }), _jsx(Text, { children: props.baseUrl || 'provider default' })] }), _jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Format  " }), _jsxs(Text, { children: [wireFormat, ' ', _jsxs(Text, { dimColor: true, children: ["(", isAnthropicWireFormat(wireFormat, props.provider, props.customProviderFormat)
-                                                        ? 'Anthropic Messages'
-                                                        : 'OpenAI chat', ")"] })] })] })] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "suggestion", children: "\u25C8 cloud" }), _jsx(Text, { color: "inactive", children: "  Ready \u2014 type " }), _jsx(Text, { color: "claude", children: "/help" }), _jsx(Text, { color: "inactive", children: " to begin" })] }), _jsxs(Text, { color: "inactive", children: ["xibecode ", _jsxs(Text, { color: "claude", children: ["v", APP_VERSION] })] })] })), _jsx(Text, { dimColor: true, children: status }), _jsx(Text, { color: "subtle", children: divider }), _jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: "promptBorder", flexDirection: "column", paddingX: 1, minHeight: chatPanelHeight, children: lines.slice(-chatPanelHeight + 2).map((line, index) => line.type === 'assistant' ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: prefixColorKey('assistant'), children: [prefixForType('assistant'), ":"] }), _jsx(Box, { marginLeft: 2, flexDirection: "column", children: _jsx(AssistantMarkdown, { content: line.text }) })] }, `${index}-assistant-${line.text.length}-${line.text.slice(0, 12)}`)) : (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsxs(Text, { bold: true, color: prefixColorKey(line.type), children: [prefixForType(line.type), ":", ' '] }), _jsx(Text, { color: lineColorKey(line.type), children: line.text })] }) }, `${index}-${line.type}-${line.text.slice(0, 24)}`))) }), _jsx(Text, { color: "subtle", children: divider }), isRunning && (_jsx(Box, { marginTop: 1, paddingX: 1, borderStyle: "round", borderColor: "claudeBlue_FOR_SYSTEM_SPINNER", flexDirection: "column", children: _jsxs(Text, { wrap: "wrap", children: [_jsxs(Text, { bold: true, color: "claudeBlue_FOR_SYSTEM_SPINNER", children: [WORK_SPINNER_FRAMES[workSpinnerFrame], ' '] }), _jsx(Text, { bold: true, color: "briefLabelClaude", children: workVerbPhrase })] }) })), _jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", paddingX: 1, children: [_jsx(Text, { color: "claude", children: '> ' }), _jsx(TextInput, { value: input, onChange: setInput, onSubmit: onSubmit, placeholder: isRunning ? 'Waiting for response…' : 'Message XibeCode…' })] }), isSlashMode && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "suggestion", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "suggestion", bold: true, children: "Commands" }), filteredCommands.length === 0 ? (_jsxs(Text, { color: "inactive", children: ["No commands match \"", input, "\""] })) : (filteredCommands.map((command, index) => (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: index === selectedCommandIndex ? 'claude' : 'inactive', children: index === selectedCommandIndex ? '▸ ' : '  ' }), _jsx(Text, { bold: true, color: index === selectedCommandIndex ? 'claude' : 'text', children: command.name }), _jsxs(Text, { color: "inactive", children: [" \u2014 ", command.description] })] }) }, command.name)))), _jsx(Text, { color: "subtle", children: "Use \u2191/\u2193 to navigate, Tab to autocomplete." })] })), modelPickerOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "claude", children: "Select model" }), isModelListLoading ? (_jsx(Text, { color: "inactive", children: "Loading models from provider..." })) : filteredModels.length === 0 ? (_jsx(Text, { color: "inactive", children: "No models matched current filter." })) : (filteredModels.slice(0, 14).map((modelName, index) => (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: index === selectedModelIndex ? 'claude' : 'inactive', children: index === selectedModelIndex ? '▸ ' : '  ' }), _jsx(Text, { color: index === selectedModelIndex ? 'claude' : 'text', children: modelName })] }) }, modelName)))), _jsx(Text, { color: "subtle", children: "\u2191/\u2193 navigate \u2022 Enter apply \u2022 Esc close" })] })), setupModelPickerOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "claude", children: "Setup: select model" }), setupModels.length === 0 ? (_jsx(Text, { color: "inactive", children: "No models loaded." })) : (setupModels.slice(0, 14).map((modelName, index) => (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: index === setupSelectedModelIndex ? 'claude' : 'inactive', children: index === setupSelectedModelIndex ? '▸ ' : '  ' }), _jsx(Text, { color: index === setupSelectedModelIndex ? 'claude' : 'text', children: modelName })] }) }, modelName)))), _jsx(Text, { color: "subtle", children: "\u2191/\u2193 navigate \u2022 Enter apply \u2022 Esc cancel" })] })), configMenuOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "suggestion", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "suggestion", children: "Config" }), CONFIG_MENU.map((item, index) => (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: index === configSelectedIndex ? 'claude' : 'inactive', children: index === configSelectedIndex ? '▸ ' : '  ' }), _jsx(Text, { bold: true, color: index === configSelectedIndex ? 'claude' : 'text', children: item.label }), _jsxs(Text, { color: "inactive", children: [" \u2014 ", item.description] })] }) }, item.value))), _jsx(Text, { color: "subtle", children: "\u2191/\u2193 navigate \u2022 Enter select \u2022 Esc close" })] })), configProviderPickerOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "suggestion", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "suggestion", children: "Provider" }), [
+    const staticItems = useMemo(() => [{ kind: 'hero', id: 0 }, ...lines], [lines]);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { dimColor: true, children: status }), _jsx(Text, { color: "subtle", children: divider }), _jsx(Static, { items: staticItems, children: (item) => {
+                    if (item.kind === 'hero') {
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [HERO_LOGO.map((line, idx) => (_jsx(React.Fragment, { children: _jsx(Text, { bold: true, color: idx < 6 ? 'claude' : 'suggestion', children: line }) }, `logo-${idx}`))), _jsx(Text, { color: "suggestion", children: "\u2726 Any model, Every tool, Zero limits. \u2726" }), _jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Provider " }), _jsx(Text, { color: "claude", bold: true, children: providerName })] }), _jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Model    " }), _jsx(Text, { children: activeModel })] }), _jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Endpoint " }), _jsx(Text, { children: props.baseUrl || 'provider default' })] }), _jsxs(Text, { children: [_jsx(Text, { color: "inactive", children: "Format  " }), _jsxs(Text, { children: [wireFormat, ' ', _jsxs(Text, { dimColor: true, children: ["(", isAnthropicWireFormat(wireFormat, props.provider, props.customProviderFormat)
+                                                                    ? 'Anthropic Messages'
+                                                                    : 'OpenAI chat', ")"] })] })] })] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "suggestion", children: "\u25C8 cloud" }), _jsx(Text, { color: "inactive", children: "  Ready \u2014 type " }), _jsx(Text, { color: "claude", children: "/help" }), _jsx(Text, { color: "inactive", children: " to begin" })] }), _jsxs(Text, { color: "inactive", children: ["xibecode ", _jsxs(Text, { color: "claude", children: ["v", APP_VERSION] })] }), _jsx(Text, { color: "subtle", children: '─'.repeat(98) }), _jsx(Text, { color: "inactive", children: "Agent transcript" })] }));
+                    }
+                    return item.type === 'assistant' ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: prefixColorKey('assistant'), children: [prefixForType('assistant'), ":"] }), _jsx(Box, { marginLeft: 2, flexDirection: "column", children: _jsx(AssistantMarkdown, { content: item.text }) })] })) : (_jsxs(Text, { children: [_jsxs(Text, { bold: true, color: prefixColorKey(item.type), children: [prefixForType(item.type), ":", ' '] }), _jsx(Text, { color: lineColorKey(item.type), children: item.text })] }));
+                } }), !hasChatContent && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Text, { color: "inactive", children: "(send a message to start)" }) })), _jsx(Text, { color: "subtle", children: divider }), isRunning && (_jsx(Box, { marginTop: 1, paddingX: 1, borderStyle: "round", borderColor: "claudeBlue_FOR_SYSTEM_SPINNER", flexDirection: "column", children: _jsxs(Text, { wrap: "wrap", children: [_jsxs(Text, { bold: true, color: "claudeBlue_FOR_SYSTEM_SPINNER", children: [WORK_SPINNER_FRAMES[workSpinnerFrame], ' '] }), _jsx(Text, { bold: true, color: "briefLabelClaude", children: workVerbPhrase })] }) })), _jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", paddingX: 1, children: [_jsx(Text, { color: "claude", children: '> ' }), _jsx(TextInput, { value: input, onChange: setInput, onSubmit: onSubmit, placeholder: isRunning ? 'Waiting for response…' : 'Message XibeCode…' })] }), isSlashMode && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "suggestion", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "suggestion", bold: true, children: "Commands" }), filteredCommands.length === 0 ? (_jsxs(Text, { color: "inactive", children: ["No commands match \"", input, "\""] })) : (filteredCommands.map((command, index) => (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: index === selectedCommandIndex ? 'claude' : 'inactive', children: index === selectedCommandIndex ? '▸ ' : '  ' }), _jsx(Text, { bold: true, color: index === selectedCommandIndex ? 'claude' : 'text', children: command.name }), _jsxs(Text, { color: "inactive", children: [" \u2014 ", command.description] })] }) }, command.name)))), _jsx(Text, { color: "subtle", children: "Use \u2191/\u2193 to navigate, Tab to autocomplete." })] })), modelPickerOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "claude", children: "Select model" }), isModelListLoading ? (_jsx(Text, { color: "inactive", children: "Loading models from provider..." })) : filteredModels.length === 0 ? (_jsx(Text, { color: "inactive", children: "No models matched current filter." })) : (visibleModelOptions.map((modelName, index) => {
+                        const absoluteIndex = modelPickerStart + index;
+                        const isSelected = absoluteIndex === selectedModelIndex;
+                        return (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: isSelected ? 'claude' : 'inactive', children: isSelected ? '▸ ' : '  ' }), _jsx(Text, { color: isSelected ? 'claude' : 'text', children: modelName })] }) }, modelName));
+                    })), _jsx(Text, { color: "subtle", children: "\u2191/\u2193 navigate \u2022 Enter apply \u2022 Esc close" })] })), setupModelPickerOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "claude", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "claude", children: "Setup: select model" }), setupModels.length === 0 ? (_jsx(Text, { color: "inactive", children: "No models loaded." })) : (visibleSetupModelOptions.map((modelName, index) => {
+                        const absoluteIndex = setupModelPickerStart + index;
+                        const isSelected = absoluteIndex === setupSelectedModelIndex;
+                        return (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: isSelected ? 'claude' : 'inactive', children: isSelected ? '▸ ' : '  ' }), _jsx(Text, { color: isSelected ? 'claude' : 'text', children: modelName })] }) }, modelName));
+                    })), _jsx(Text, { color: "subtle", children: "\u2191/\u2193 navigate \u2022 Enter apply \u2022 Esc cancel" })] })), configMenuOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "suggestion", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "suggestion", children: "Config" }), CONFIG_MENU.map((item, index) => (_jsx(React.Fragment, { children: _jsxs(Text, { children: [_jsx(Text, { color: index === configSelectedIndex ? 'claude' : 'inactive', children: index === configSelectedIndex ? '▸ ' : '  ' }), _jsx(Text, { bold: true, color: index === configSelectedIndex ? 'claude' : 'text', children: item.label }), _jsxs(Text, { color: "inactive", children: [" \u2014 ", item.description] })] }) }, item.value))), _jsx(Text, { color: "subtle", children: "\u2191/\u2193 navigate \u2022 Enter select \u2022 Esc close" })] })), configProviderPickerOpen && (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "suggestion", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "suggestion", children: "Provider" }), [
                         'auto-detect',
                         'openai',
                         'anthropic',
@@ -1027,7 +1137,7 @@ export async function launchClaudeStyleChat(options) {
         }
         return unique;
     };
-    const runPrompt = async (prompt, onLine) => {
+    const runPrompt = async (prompt, onLine, opts) => {
         activeAgent.removeAllListeners('event');
         let streamedBuffer = '';
         activeAgent.on('event', (event) => {
@@ -1039,6 +1149,7 @@ export async function launchClaudeStyleChat(options) {
                     });
                     break;
                 case 'tool_call': {
+                    opts?.onVisibleOutput?.();
                     const name = String(event.data?.name ?? 'tool');
                     const input = event.data?.input;
                     const args = formatToolArgs(name, input);
@@ -1049,6 +1160,7 @@ export async function launchClaudeStyleChat(options) {
                     break;
                 }
                 case 'tool_result': {
+                    opts?.onVisibleOutput?.();
                     const name = String(event.data?.name ?? 'tool');
                     const result = event.data?.result;
                     const success = event.data?.success !== false;
@@ -1070,6 +1182,7 @@ export async function launchClaudeStyleChat(options) {
                     break;
                 }
                 case 'stream_text':
+                    opts?.onVisibleOutput?.();
                     streamedBuffer += event.data?.text || '';
                     break;
                 case 'stream_end':
@@ -1079,6 +1192,7 @@ export async function launchClaudeStyleChat(options) {
                     streamedBuffer = '';
                     break;
                 case 'response':
+                    opts?.onVisibleOutput?.();
                     onLine({ type: 'assistant', text: event.data?.text || '' });
                     break;
                 case 'error':
@@ -1093,12 +1207,14 @@ export async function launchClaudeStyleChat(options) {
                     break;
             }
         });
-        await activeAgent.run(prompt, toolExecutor.getTools(), toolExecutor);
+        await activeAgent.run(prompt, toolExecutor.getTools(), toolExecutor, {
+            images: opts?.images,
+            signal: opts?.signal,
+        });
         activeMode = activeAgent.getMode();
         toolExecutor.setMode(activeMode);
         return activeAgent.getStats();
     };
-    const getLiveStats = () => activeAgent.getStats();
     const listBackgroundTasks = async () => {
         const result = await toolExecutor.execute('list_background_tasks', {});
         if (result?.success && Array.isArray(result.tasks)) {
@@ -1129,6 +1245,6 @@ export async function launchClaudeStyleChat(options) {
         logChain = logChain.then(() => fs.appendFile(chatLogPath, rendered, 'utf8')).catch(() => { });
     };
     const root = createRoot({ exitOnCtrlC: true });
-    await renderAndRun(root, _jsx(XibeCodeChatApp, { model: model, initialMode: activeMode, provider: provider, baseUrl: baseUrl, defaultModel: model, modeOptions: modeOptions, initialRequestFormat: wireFormat, customProviderFormat: customProviderFormat, profile: options.profile, runPrompt: runPrompt, getLiveStats: getLiveStats, listBackgroundTasks: listBackgroundTasks, checkBackgroundTask: checkBackgroundTask, onUiLine: appendLogLine, loadModels: loadModels, onModelChange: onModelChange, onModeChange: onModeChange, onWireFormatChange: onWireFormatChange }));
+    await renderAndRun(root, _jsx(XibeCodeChatApp, { model: model, initialMode: activeMode, provider: provider, baseUrl: baseUrl, defaultModel: model, modeOptions: modeOptions, initialRequestFormat: wireFormat, customProviderFormat: customProviderFormat, profile: options.profile, runPrompt: runPrompt, listBackgroundTasks: listBackgroundTasks, checkBackgroundTask: checkBackgroundTask, onUiLine: appendLogLine, loadModels: loadModels, onModelChange: onModelChange, onModeChange: onModeChange, onWireFormatChange: onWireFormatChange }));
 }
 //# sourceMappingURL=claude-style-chat.js.map