@pentoshi/clai 2.0.5 → 2.0.8

package/dist/tui/App.js

@@ -1,24 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text, useApp, useInput, useStdin } from "ink";
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState, } from "react";
 import { providerIds } from "../types.js";
 import { assertProvider } from "../llm/provider.js";
 import { getProvider } from "../llm/router.js";
-import { envValue, getProviderSecret, getSearchProviderKey, listProviderStatuses, maskSecret, setProviderSecret } from "../store/keys.js";
-import { searchProviderIds } from "../tools/web/types.js";
-import { modelSupportsThinking, modelSupportsVision } from "../llm/capabilities.js";
+import { envValue, getProviderSecret, getSearchProviderKey, listProviderStatuses, maskSecret, setProviderSecret, setSecret, } from "../store/keys.js";
+import { setActiveSearchProvider } from "../store/config.js";
+import { searchProviderIds, } from "../tools/web/types.js";
+import { assertSearchProvider, searchProviders, } from "../tools/web/providers/provider.js";
+import "../tools/web/providers/duckduckgo.js";
+import "../tools/web/providers/brave.js";
+import "../tools/web/providers/tavily.js";
+import { modelSupportsThinking, modelSupportsVision, } from "../llm/capabilities.js";
 import { getConfig, getProviderModel, setDefaultMode, setDefaultProvider, setProviderModel, setThinking, updateConfig, } from "../store/config.js";
 import { estimateMessagesTokens } from "../agent/context-manager.js";
-import { clearAllHistory, getSession, listSessions, saveSession } from "../store/history.js";
+import { clearAllHistory, getSession, listSessions, saveSession, upsertSession, } from "../store/history.js";
 import { safeCwd } from "../os/cwd.js";
 import { resolve } from "node:path";
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
-import { expandMentions, findFileSuggestions, getMentionQuery, loadImageAttachments } from "../ui/mentions.js";
+import { expandMentions, findFileSuggestions, getMentionQuery, loadImageAttachments, } from "../ui/mentions.js";
 import { deletePlan, loadPlan, savePlan } from "../store/plan.js";
 import { renderPlanDocument } from "../ui/plan-pane.js";
-import { getSlashCommandSuggestions, isKnownSlashCommand, knownModels, slashCommands } from "../repl.js";
-import { initialState, reducer, serializeTranscriptForCompaction } from "./state.js";
+import { getSlashCommandSuggestions, isKnownSlashCommand, knownModels, slashCommands, } from "../repl.js";
+import { initialState, reducer, serializeTranscriptForCompaction, } from "./state.js";
 import { renderTranscriptLines } from "./render-lines.js";
 import { createTuiConfirmPort } from "./confirm.js";
 import { useAgentRunner } from "./hooks/useAgentRunner.js";
@@ -31,10 +36,10 @@ import { JobsPanel } from "./components/JobsPanel.js";
 import { PickerPanel } from "./components/PickerPanel.js";
 import { SecretInputPanel } from "./components/SecretInputPanel.js";
 import { clearArtifacts, clearAuditLogs } from "../store/logs.js";
-import { addScopeTargets, clearScope, loadScope, saveScope } from "../store/scope.js";
+import { addScopeTargets, clearScope, loadScope, saveScope, } from "../store/scope.js";
 import { formatKeyStatus } from "./format-keys.js";
 import { shouldStoreInPromptHistory } from "./input-history.js";
-import { isMouseReport, mouseWheelDirection, stripMouseReports } from "./mouse.js";
+import { DISABLE_MOUSE_REPORTING, ENABLE_MOUSE_REPORTING, isMouseReport, mouseWheelDirection, stripMouseReports, } from "./mouse.js";
 const IMPLEMENT_PROMPT = "I approve the plan. Execute it now in STRICT ORDER. Task 1 (explore) is ALREADY COMPLETE from the planning phase — " +
     "do NOT re-list or re-read the directory. Start with the FIRST pending task that still needs implementation work. " +
     "For each task: call task.update {taskId, state:'in_progress'} → do the real work → VERIFY it succeeded → " +
@@ -44,7 +49,7 @@ const IMPLEMENT_PROMPT = "I approve the plan. Execute it now in STRICT ORDER. Ta
     "Do NOT call web.search — you already know everything needed. " +
     "Run real commands (installs, servers, verification) — do not claim anything ran without a successful tool call.";
 const MAX_FILE_SUGGESTIONS = 6;
-export function App({ version, initialMode, provider: initialProvider, initialModel, noHistory = false }) {
+export function App({ version, initialMode, provider: initialProvider, initialModel, noHistory = false, }) {
     const { exit } = useApp();
     const { stdin } = useStdin();
     const { columns: cols, rows } = useTerminalSize();
@@ -60,19 +65,34 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
     const secretResolver = useRef();
     const [scroll, setScroll] = useState(0); // lines scrolled up from bottom
     const [compacting, setCompacting] = useState(false);
+    const [mouseMode, setMouseMode] = useState(true);
     const history = useRef([]);
     const historyIdx = useRef(-1);
     const historyDraft = useRef("");
     const lastCtrlC = useRef(0);
     const jobs = useJobs(overlay.kind === "jobs");
     const spinner = useSpinner(state.status.running);
+    const autosaveTimer = useRef(undefined);
+    const latestItems = useRef(state.items);
+    latestItems.current = state.items;
+    useEffect(() => {
+        if (!process.stdout.isTTY)
+            return;
+        process.stdout.write(mouseMode ? ENABLE_MOUSE_REPORTING : DISABLE_MOUSE_REPORTING);
+        return () => {
+            process.stdout.write(DISABLE_MOUSE_REPORTING);
+        };
+    }, [mouseMode]);
     // ── Confirm port → in-app modal ────────────────────────────────────────────
     const confirmController = useMemo(() => createTuiConfirmPort(), []);
     const confirmResolver = useRef(undefined);
     useEffect(() => {
         confirmController.setHandler((req) => new Promise((res) => {
             confirmResolver.current = res;
-            dispatch({ type: "event", event: { type: "confirm-request", id: "c", ...req } });
+            dispatch({
+                type: "event",
+                event: { type: "confirm-request", id: "c", ...req },
+            });
         }));
     }, [confirmController]);
     const ctxRef = useRef({ mode, provider, model });
@@ -91,11 +111,39 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         void (async () => {
             const messages = runner.getMessages();
             if (!noHistory && !getConfig().privateMode && messages.length > 0) {
-                await saveSession(messages, undefined, state.items).catch(() => undefined);
+                await upsertSession(runner.getSession().sessionId, messages, undefined, state.items).catch(() => undefined);
             }
             exit();
         })();
     }, [exit, noHistory, runner, state.items]);
+    useEffect(() => {
+        if (noHistory || getConfig().privateMode)
+            return;
+        if (state.items.length === 0)
+            return;
+        if (autosaveTimer.current)
+            clearTimeout(autosaveTimer.current);
+        autosaveTimer.current = setTimeout(() => {
+            const messages = runner.getMessages();
+            if (messages.length === 0 && state.items.length === 0)
+                return;
+            void upsertSession(runner.getSession().sessionId, messages, undefined, state.items).catch(() => undefined);
+        }, 250);
+        return () => {
+            if (autosaveTimer.current)
+                clearTimeout(autosaveTimer.current);
+        };
+    }, [noHistory, runner, state.items]);
+    useEffect(() => () => {
+        if (autosaveTimer.current)
+            clearTimeout(autosaveTimer.current);
+        const messages = runner.getMessages();
+        if (!noHistory &&
+            !getConfig().privateMode &&
+            (messages.length > 0 || latestItems.current.length > 0)) {
+            void upsertSession(runner.getSession().sessionId, messages, undefined, latestItems.current).catch(() => undefined);
+        }
+    }, [noHistory, runner]);
     const startTurn = useCallback(async (display, modelInput, images) => {
         setScroll(0);
         dispatch({ type: "submit", text: display });
@@ -105,11 +153,15 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         const vision = modelSupportsVision(provider, model);
         const expansion = expandMentions(rawText, safeCwd(), vision);
         const images = vision ? loadImageAttachments(rawText, safeCwd()) : [];
-        const modelInput = expansion.contextBlock ? `${rawText}\n\n${expansion.contextBlock}` : rawText;
+        const modelInput = expansion.contextBlock
+            ? `${rawText}\n\n${expansion.contextBlock}`
+            : rawText;
         void startTurn(rawText, modelInput, images);
     }, [provider, model, startTurn]);
     useEffect(() => {
-        if (!state.status.running && state.queued.length > 0 && !runner.isRunning()) {
+        if (!state.status.running &&
+            state.queued.length > 0 &&
+            !runner.isRunning()) {
             const next = state.queued[0];
             dispatch({ type: "dequeue" });
             beginTurn(next);
@@ -134,17 +186,29 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         const session = runner.getSession();
         const plan = await loadPlan(session.sessionId).catch(() => undefined);
         if (!plan) {
-            dispatch({ type: "notice", level: "info", text: "no plan to implement — ask clai to plan a multi-step task first" });
+            dispatch({
+                type: "notice",
+                level: "info",
+                text: "no plan to implement — ask clai to plan a multi-step task first",
+            });
             return;
         }
         if (plan.tasks.every((t) => t.state === "done")) {
-            dispatch({ type: "notice", level: "info", text: "this plan is already complete ✓" });
+            dispatch({
+                type: "notice",
+                level: "info",
+                text: "this plan is already complete ✓",
+            });
             return;
         }
         plan.status = "approved";
         await savePlan(plan).catch(() => undefined);
         session.planApproved.value = true;
-        dispatch({ type: "notice", level: "info", text: "✦ plan approved — executing it now" });
+        dispatch({
+            type: "notice",
+            level: "info",
+            text: "✦ plan approved — executing it now",
+        });
         void startTurn("/implement", IMPLEMENT_PROMPT);
     }, [runner, startTurn]);
     const chooseModel = useCallback(async () => {
@@ -173,7 +237,11 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         setOverlay({
             kind: "picker",
             title: `Models · ${provider}`,
-            options: models.map((value) => ({ value, label: value, active: value === model })),
+            options: models.map((value) => ({
+                value,
+                label: value,
+                active: value === model,
+            })),
             onSelect: (value) => {
                 setModel(value);
                 setProviderModel(provider, value);
@@ -183,18 +251,28 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         });
     }, [model, provider]);
     const activateProvider = useCallback(async (next) => {
-        const configured = next === "ollama" || Boolean(envValue(next)) || Boolean((await getProviderSecret(next)).value);
+        const configured = next === "ollama" ||
+            Boolean(envValue(next)) ||
+            Boolean((await getProviderSecret(next)).value);
         if (!configured) {
             const key = await requestSecret({
                 title: `${next} API key`,
                 prompt: `No API key is configured for ${next}. Enter it now to activate this provider.`,
             });
             if (!key) {
-                dispatch({ type: "notice", level: "warn", text: `provider unchanged · ${next} needs an API key` });
+                dispatch({
+                    type: "notice",
+                    level: "warn",
+                    text: `provider unchanged · ${next} needs an API key`,
+                });
                 return;
             }
             if (!getProvider(next).validateKey(key)) {
-                dispatch({ type: "notice", level: "warn", text: `invalid API key format for ${next}` });
+                dispatch({
+                    type: "notice",
+                    level: "warn",
+                    text: `invalid API key format for ${next}`,
+                });
                 return;
             }
             await setProviderSecret(next, key);
@@ -204,7 +282,11 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         setProvider(next);
         setModel(nextModel);
         setOverlay({ kind: "none" });
-        dispatch({ type: "notice", level: "info", text: `provider → ${next} · model → ${nextModel}` });
+        dispatch({
+            type: "notice",
+            level: "info",
+            text: `provider → ${next} · model → ${nextModel}`,
+        });
     }, [requestSecret]);
     const chooseProvider = useCallback(() => {
         setOverlay({
@@ -222,6 +304,54 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
             },
         });
     }, [activateProvider, provider]);
+    const activateSearchProvider = useCallback(async (next) => {
+        const adapter = searchProviders[next];
+        if (adapter?.needsApiKey) {
+            const current = await getSearchProviderKey(next);
+            if (!current.value) {
+                const key = await requestSecret({
+                    title: `${next} search API key`,
+                    prompt: `No API key is configured for ${adapter.displayName}. Enter it now to use this search provider.`,
+                });
+                if (!key) {
+                    dispatch({
+                        type: "notice",
+                        level: "warn",
+                        text: `search provider unchanged · ${next} needs an API key`,
+                    });
+                    return;
+                }
+                await setSecret("search", next, key);
+            }
+        }
+        setActiveSearchProvider(next);
+        setOverlay({ kind: "none" });
+        dispatch({
+            type: "notice",
+            level: "info",
+            text: `search provider → ${next}`,
+        });
+    }, [requestSecret]);
+    const chooseSearchProvider = useCallback(() => {
+        const active = getConfig().activeSearchProvider;
+        setOverlay({
+            kind: "picker",
+            title: "Search providers",
+            options: searchProviderIds.map((id) => {
+                const adapter = searchProviders[id];
+                return {
+                    value: id,
+                    label: id === active ? `${id} · active` : id,
+                    description: adapter?.needsApiKey
+                        ? `${adapter.displayName} · API key required`
+                        : `${adapter?.displayName ?? id} · keyless`,
+                };
+            }),
+            onSelect: (value) => {
+                void activateSearchProvider(assertSearchProvider(value));
+            },
+        });
+    }, [activateSearchProvider]);
     const setReasoning = useCallback((value) => {
         if (value === "off" || value === "none")
             setThinking({ enabled: false });
@@ -230,7 +360,9 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         dispatch({
             type: "notice",
             level: "info",
-            text: value === "off" || value === "none" ? "thinking → off" : `thinking → ${value}`,
+            text: value === "off" || value === "none"
+                ? "thinking → off"
+                : `thinking → ${value}`,
         });
     }, []);
     const chooseReasoning = useCallback(() => {
@@ -310,7 +442,11 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                     if (!plan)
                         info("no active plan yet");
                     else
-                        setOverlay({ kind: "pager", title: "Plan", body: renderPlanDocument(plan) });
+                        setOverlay({
+                            kind: "pager",
+                            title: "Plan",
+                            body: renderPlanDocument(plan),
+                        });
                 })();
                 return true;
             case "/jobs":
@@ -318,11 +454,22 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                 return true;
             case "/output": {
                 const outputs = state.items.filter((item) => item.kind === "tool" && Boolean(item.output));
+                if (!arg) {
+                    if (outputs.length)
+                        dispatch({ type: "toggle-output" });
+                    else
+                        info("no tool output yet");
+                    return true;
+                }
                 if (arg === "list" || arg === "ls") {
-                    info(outputs.length ? outputs.map((item) => `${item.id} · ${item.name}`).join("\n") : "no tool output yet");
+                    info(outputs.length
+                        ? outputs.map((item) => `${item.id} · ${item.name}`).join("\n")
+                        : "no tool output yet");
                     return true;
                 }
-                const selectedOutput = arg && arg !== "last" ? outputs.find((item) => item.id === arg) : lastToolOutput();
+                const selectedOutput = arg && arg !== "last"
+                    ? outputs.find((item) => item.id === arg)
+                    : lastToolOutput();
                 if (!selectedOutput)
                     info(arg ? `no tool output: ${arg}` : "no tool output yet");
                 else
@@ -337,7 +484,9 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                 {
                     const options = knownModels[provider] ?? [];
                     const index = Number.parseInt(arg, 10);
-                    const nextModel = Number.isInteger(index) && index >= 1 && index <= options.length ? options[index - 1] : arg;
+                    const nextModel = Number.isInteger(index) && index >= 1 && index <= options.length
+                        ? options[index - 1]
+                        : arg;
                     setModel(nextModel);
                     setProviderModel(provider, nextModel);
                     info(`model → ${nextModel}`);
@@ -357,6 +506,39 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                     warn(`unknown provider: ${arg}`);
                 }
                 return true;
+            case "/search":
+            case "/search-provider":
+                if (!arg || arg === "list" || arg === "ls") {
+                    chooseSearchProvider();
+                    return true;
+                }
+                try {
+                    const next = assertSearchProvider(arg);
+                    void activateSearchProvider(next);
+                }
+                catch {
+                    warn(`unknown search provider: ${arg}`);
+                }
+                return true;
+            case "/mouse": {
+                const normalized = arg.toLowerCase();
+                if (!normalized) {
+                    info(`mouse=${mouseMode ? "on" : "off"} · on: touchpad scrolls chat; off: native select/copy`);
+                    return true;
+                }
+                if (/^(on|true|1|enable)$/i.test(normalized)) {
+                    setMouseMode(true);
+                    info("mouse=on · touchpad scrolls chat; use Option/Shift selection if your terminal requires it");
+                    return true;
+                }
+                if (/^(off|false|0|disable)$/i.test(normalized)) {
+                    setMouseMode(false);
+                    info("mouse=off · native select/copy restored; use PageUp/PageDown/Ctrl+U/Ctrl+D or j/k to scroll chat");
+                    return true;
+                }
+                warn("usage: /mouse [on|off]");
+                return true;
+            }
             case "/variants":
             case "/reasoning": {
                 if (!arg) {
@@ -400,7 +582,9 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
             case "/allow":
                 if (!arg || arg === "list" || arg === "ls") {
                     const list = [...runner.getSession().allow];
-                    info(list.length ? `allowed: ${list.join(", ")}` : "no session allowances");
+                    info(list.length
+                        ? `allowed: ${list.join(", ")}`
+                        : "no session allowances");
                     return true;
                 }
                 runner.getSession().allow.add(arg);
@@ -424,14 +608,17 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                 setCompacting(true);
                 info("compacting conversation…");
                 const fullSession = serializeTranscriptForCompaction(state.items);
-                void runner.compact(fullSession).then((result) => {
+                void runner
+                    .compact(fullSession)
+                    .then((result) => {
                     if (result.after === result.before) {
                         info("nothing to compact yet — more than 8 recent messages are required");
                     }
                     else {
                         info(`compacted ${result.before} → ${result.after} messages · ~${result.beforeTokens.toLocaleString()} → ~${result.afterTokens.toLocaleString()} tokens${result.summarized ? "" : " · local fallback"}`);
                     }
-                }).catch((error) => warn(`compaction failed: ${error instanceof Error ? error.message : String(error)}`))
+                })
+                    .catch((error) => warn(`compaction failed: ${error instanceof Error ? error.message : String(error)}`))
                     .finally(() => setCompacting(false));
                 return true;
             }
@@ -458,12 +645,16 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                         kind: "picker",
                         title: "Session history",
                         options: [
-                            ...(currentMessages.length ? [{
-                                    value: "__current__",
-                                    label: "Current session",
-                                    description: `${currentMessages.length} messages · active now`,
-                                    active: true,
-                                }] : []),
+                            ...(currentMessages.length
+                                ? [
+                                    {
+                                        value: "__current__",
+                                        label: "Current session",
+                                        description: `${currentMessages.length} messages · active now`,
+                                        active: true,
+                                    },
+                                ]
+                                : []),
                             ...sessions.map((session) => ({
                                 value: session.id,
                                 label: session.name ?? session.id,
@@ -484,7 +675,11 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                                 }
                                 runner.setMessages(session.messages);
                                 setOverlay({ kind: "none" });
-                                dispatch({ type: "load-history", messages: session.messages, transcript: session.transcript });
+                                dispatch({
+                                    type: "load-history",
+                                    messages: session.messages,
+                                    transcript: session.transcript,
+                                });
                                 setScroll(0);
                                 info(`session resumed · ${session.transcript?.length ?? session.messages.length} items`);
                             })();
@@ -518,11 +713,16 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                     }
                     if (sub === "show" || sub === "list" || sub === "ls") {
                         const scope = await loadScope();
-                        info(scope ? `scope: ${scope.name ?? "unnamed"} · ${scope.authorizedTargets.join(", ")}` : "no engagement scope configured");
+                        info(scope
+                            ? `scope: ${scope.name ?? "unnamed"} · ${scope.authorizedTargets.join(", ")}`
+                            : "no engagement scope configured");
                         return;
                     }
                     if (sub === "add") {
-                        const targets = parts.join(" ").split(/[\s,]+/).filter(Boolean);
+                        const targets = parts
+                            .join(" ")
+                            .split(/[\s,]+/)
+                            .filter(Boolean);
                         if (!targets.length) {
                             warn("usage: /scope add <target1,target2>");
                             return;
@@ -532,12 +732,18 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                         return;
                     }
                     if (sub === "new" || sub === "set") {
-                        const targets = parts.join(" ").split(/[\s,]+/).filter(Boolean);
+                        const targets = parts
+                            .join(" ")
+                            .split(/[\s,]+/)
+                            .filter(Boolean);
                         if (!targets.length) {
                             warn("usage: /scope new <target1,target2>");
                             return;
                         }
-                        await saveScope({ authorizedTargets: targets, createdAt: new Date().toISOString() });
+                        await saveScope({
+                            authorizedTargets: targets,
+                            createdAt: new Date().toISOString(),
+                        });
                         info(`scope created · ${targets.join(", ")}`);
                         return;
                     }
@@ -577,7 +783,11 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                         return;
                     }
                     if (sub === "clear-all") {
-                        const [historyResult, logResult, artifactResult] = await Promise.all([clearAllHistory(), clearAuditLogs(), clearArtifacts()]);
+                        const [historyResult, logResult, artifactResult] = await Promise.all([
+                            clearAllHistory(),
+                            clearAuditLogs(),
+                            clearArtifacts(),
+                        ]);
                         info(`cleared history (${historyResult.detail || "ok"}), logs (${logResult.removed}), artifacts (${artifactResult.removed})`);
                         return;
                     }
@@ -616,10 +826,16 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                             active: id === activeSearch,
                             configured: keyless || Boolean(secret.value),
                             source: keyless ? "keyless" : secret.source,
-                            maskedKey: secret.value ? maskSecret(secret.value) : undefined,
+                            maskedKey: secret.value
+                                ? maskSecret(secret.value)
+                                : undefined,
                         };
                     }));
-                    setOverlay({ kind: "pager", title: "Credential status", body: formatKeyStatus(llm, search) });
+                    setOverlay({
+                        kind: "pager",
+                        title: "Credential status",
+                        body: formatKeyStatus(llm, search),
+                    });
                 })().catch((error) => warn(`could not read keys: ${error instanceof Error ? error.message : String(error)}`));
                 return true;
             case "/set":
@@ -649,9 +865,28 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
             case "/quit":
                 exitTui();
                 return true;
-            default: return false;
+            default:
+                return false;
         }
-    }, [activateProvider, chooseModel, chooseProvider, chooseReasoning, compacting, exitTui, noHistory, provider, runner, runImplement, lastToolOutput, openToolOutput, setReasoning, state.items]);
+    }, [
+        activateProvider,
+        activateSearchProvider,
+        chooseModel,
+        chooseProvider,
+        chooseReasoning,
+        chooseSearchProvider,
+        compacting,
+        exitTui,
+        mouseMode,
+        noHistory,
+        provider,
+        runner,
+        runImplement,
+        lastToolOutput,
+        openToolOutput,
+        setReasoning,
+        state.items,
+    ]);
     const submitText = useCallback((text) => {
         const trimmed = text.trim();
         if (!trimmed)
@@ -666,7 +901,11 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
         // token is an actual clai command; file paths remain normal prompts.
         if (trimmed.startsWith("/") && isKnownSlashCommand(trimmed)) {
             if (!handleLocalSlash(trimmed))
-                dispatch({ type: "notice", level: "warn", text: `unknown command: ${trimmed}` });
+                dispatch({
+                    type: "notice",
+                    level: "warn",
+                    text: `unknown command: ${trimmed}`,
+                });
             return;
         }
         if (shouldStoreInPromptHistory(trimmed))
@@ -707,7 +946,11 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
     const statusH = state.pendingConfirm ? 6 : secretRequest ? 7 : 1;
     const composerH = 3;
     const maxMenuRows = Math.max(3, usableRows - headerH - statusH - composerH - 3);
-    const menuH = slashMenuOpen ? Math.min(suggestions.length, maxMenuRows) : fileMenuOpen ? fileSuggestions.length : 0;
+    const menuH = slashMenuOpen
+        ? Math.min(suggestions.length, maxMenuRows)
+        : fileMenuOpen
+            ? fileSuggestions.length
+            : 0;
     const viewportH = Math.max(3, usableRows - headerH - statusH - composerH - menuH);
     const slashWindowStart = slashMenuOpen
         ? Math.min(Math.max(0, selected - Math.floor(menuH / 2)), Math.max(0, suggestions.length - menuH))
@@ -741,7 +984,9 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                 setScroll((value) => Math.max(0, value - 3));
         };
         stdin.on("data", onData);
-        return () => { stdin.off("data", onData); };
+        return () => {
+            stdin.off("data", onData);
+        };
     }, [stdin, modalActive, maxOffset]);
     // ── Key handling ────────────────────────────────────────────────────────────
     useInput((ch, key) => {
@@ -756,9 +1001,9 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
             return;
         }
         if (key.ctrl && ch === "o") {
-            const last = lastToolOutput();
-            if (last)
-                void openToolOutput(last);
+            const hasOutput = state.items.some((item) => item.kind === "tool" && Boolean(item.output));
+            if (hasOutput)
+                dispatch({ type: "toggle-output" });
             else
                 dispatch({ type: "notice", level: "info", text: "no tool output yet" });
             return;
@@ -767,9 +1012,17 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
             void (async () => {
                 const plan = await loadPlan(runner.getSession().sessionId).catch(() => undefined);
                 if (plan)
-                    setOverlay({ kind: "pager", title: "Plan", body: renderPlanDocument(plan) });
+                    setOverlay({
+                        kind: "pager",
+                        title: "Plan",
+                        body: renderPlanDocument(plan),
+                    });
                 else
-                    dispatch({ type: "notice", level: "info", text: "no active plan yet" });
+                    dispatch({
+                        type: "notice",
+                        level: "info",
+                        text: "no active plan yet",
+                    });
             })();
             return;
         }
@@ -803,7 +1056,9 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
             return;
         }
         if (key.escape) {
-            if (runner.isRunning())
+            if (state.outputExpanded)
+                dispatch({ type: "toggle-output" });
+            else if (runner.isRunning())
                 runner.abort();
             else if (input) {
                 setInput("");
@@ -870,7 +1125,9 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
                 return;
             if (historyIdx.current < 0)
                 historyDraft.current = input;
-            const idx = historyIdx.current < 0 ? history.current.length - 1 : Math.max(0, historyIdx.current - 1);
+            const idx = historyIdx.current < 0
+                ? history.current.length - 1
+                : Math.max(0, historyIdx.current - 1);
             historyIdx.current = idx;
             const v = history.current[idx] ?? "";
             setInput(v);
@@ -930,17 +1187,31 @@ export function App({ version, initialMode, provider: initialProvider, initialMo
     const before = input.slice(0, cursor);
     const at = input.slice(cursor, cursor + 1) || " ";
     const after = input.slice(cursor + 1);
-    return (_jsxs(Box, { flexDirection: "column", width: cols, height: usableRows, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", marginX: 2, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { children: [_jsx(Text, { backgroundColor: "#2563EB", color: "#FFFFFF", bold: true, children: " \u25C6 clai " }), _jsxs(Text, { color: "#94A3B8", children: ["  v", version] })] }), _jsxs(Text, { children: [_jsx(Text, { backgroundColor: "#854D0E", color: "#FFFFFF", bold: true, children: ` ${mode.toUpperCase()} ` }), _jsx(Text, { color: "#94A3B8", children: " MODE" })] })] }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "green", children: provider }), _jsx(Text, { dimColor: true, children: "  /  " }), _jsx(Text, { color: "cyan", children: model }), _jsx(Text, { dimColor: true, children: `  ·  ${safeCwd()}` }), offset > 0 ? _jsx(Text, { color: "yellow", children: `  ·  ▲ ${offset}` }) : null] })] }), overlay.kind === "pager" ? (_jsx(Pager, { title: overlay.title, body: overlay.body, height: viewportH, onClose: closeOverlay })) : overlay.kind === "jobs" ? (_jsx(JobsPanel, { jobs: jobs, onClose: closeOverlay })) : overlay.kind === "picker" ? (_jsx(PickerPanel, { title: overlay.title, options: overlay.options, height: viewportH, onSelect: overlay.onSelect, onClose: closeOverlay })) : (_jsx(Box, { flexDirection: "column", height: viewportH, children: visible.map((line, i) => (_jsx(Text, { wrap: "truncate-end", children: line === "" ? " " : line }, i))) })), slashMenuOpen && !modalActive
+    return (_jsxs(Box, { flexDirection: "column", width: cols, height: usableRows, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", marginX: 2, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { children: [_jsxs(Text, { backgroundColor: "#2563EB", color: "#FFFFFF", bold: true, children: [" ", "\u25C6 clai", " "] }), _jsxs(Text, { color: "#94A3B8", children: [" v", version] })] }), _jsxs(Text, { children: [_jsx(Text, { backgroundColor: "#854D0E", color: "#FFFFFF", bold: true, children: ` ${mode.toUpperCase()} ` }), _jsx(Text, { color: "#94A3B8", children: " MODE" })] })] }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "green", children: provider }), _jsx(Text, { dimColor: true, children: " / " }), _jsx(Text, { color: "cyan", children: model }), _jsx(Text, { dimColor: true, children: `  ·  ${safeCwd()}` }), offset > 0 ? _jsx(Text, { color: "yellow", children: `  ·  ▲ ${offset}` }) : null] })] }), overlay.kind === "pager" ? (_jsx(Pager, { title: overlay.title, body: overlay.body, height: viewportH, onClose: closeOverlay })) : overlay.kind === "jobs" ? (_jsx(JobsPanel, { jobs: jobs, onClose: closeOverlay })) : overlay.kind === "picker" ? (_jsx(PickerPanel, { title: overlay.title, options: overlay.options, height: viewportH, onSelect: overlay.onSelect, onClose: closeOverlay })) : (_jsx(Box, { flexDirection: "column", height: viewportH, children: visible.map((line, i) => (_jsx(Text, { wrap: "wrap", children: line === "" ? " " : line }, i))) })), slashMenuOpen && !modalActive
                 ? visibleSlashSuggestions.map((cmd, i) => {
                     const absoluteIndex = slashWindowStart + i;
-                    return (_jsxs(Text, { wrap: "truncate-end", backgroundColor: absoluteIndex === selected ? "#2563EB" : absoluteIndex % 2 === 0 ? "#1E293B" : "#0F172A", children: [_jsxs(Text, { color: absoluteIndex === selected ? "#FFFFFF" : "#67E8F9", bold: true, children: [absoluteIndex === selected ? " ❯ " : "   ", cmd.command.padEnd(14)] }), cmd.usage ? _jsxs(Text, { color: absoluteIndex === selected ? "#FFFFFF" : "#CBD5E1", children: [cmd.usage, " "] }) : null, _jsxs(Text, { color: "#F8FAFC", children: ["  ", cmd.description] }), i === visibleSlashSuggestions.length - 1 && slashWindowStart + menuH < suggestions.length
-                                ? _jsx(Text, { dimColor: true, children: `  · ${suggestions.length - slashWindowStart - menuH} more ↓` })
-                                : null] }, cmd.command));
+                    return (_jsxs(Text, { wrap: "truncate-end", backgroundColor: absoluteIndex === selected
+                            ? "#2563EB"
+                            : absoluteIndex % 2 === 0
+                                ? "#1E293B"
+                                : "#0F172A", children: [_jsxs(Text, { color: absoluteIndex === selected ? "#FFFFFF" : "#67E8F9", bold: true, children: [absoluteIndex === selected ? " ❯ " : "   ", cmd.command.padEnd(14)] }), cmd.usage ? (_jsxs(Text, { color: absoluteIndex === selected ? "#FFFFFF" : "#CBD5E1", children: [cmd.usage, " "] })) : null, _jsxs(Text, { color: "#F8FAFC", children: ["  ", cmd.description] }), i === visibleSlashSuggestions.length - 1 &&
+                                slashWindowStart + menuH < suggestions.length ? (_jsx(Text, { dimColor: true, children: `  · ${suggestions.length - slashWindowStart - menuH} more ↓` })) : null] }, cmd.command));
                 })
                 : null, fileMenuOpen && !modalActive
-                ? fileSuggestions.map((file, i) => (_jsxs(Text, { wrap: "truncate-end", backgroundColor: i === selected ? "#2563EB" : i % 2 === 0 ? "#1E293B" : "#0F172A", children: [_jsxs(Text, { color: i === selected ? "#FFFFFF" : file.isDir ? "#67E8F9" : "#F8FAFC", bold: i === selected, children: [i === selected ? "❯ " : "  ", file.isDir ? "▸ " : "· ", file.value] }), _jsx(Text, { dimColor: true, children: file.isDir ? "  directory" : "  attach file" })] }, file.value)))
-                : null, secretRequest ? (_jsx(SecretInputPanel, { title: secretRequest.title, prompt: secretRequest.prompt, onSubmit: (value) => answerSecret(value), onCancel: () => answerSecret(undefined) })) : state.pendingConfirm ? (_jsx(ConfirmModal, { confirm: state.pendingConfirm, onAnswer: answerConfirm })) : (_jsx(Box, { children: compacting ? (_jsxs(Text, { children: [_jsxs(Text, { color: "magenta", children: [spinner, " "] }), _jsx(Text, { color: "yellow", children: "compacting conversation\u2026" })] })) : state.status.running ? (_jsxs(Text, { children: [_jsxs(Text, { color: "magenta", children: [spinner, " "] }), _jsx(Text, { color: "yellow", children: state.status.activity || "working" }), state.status.step > 0 ? _jsx(Text, { dimColor: true, children: ` · step ${state.status.step}` }) : null, _jsx(Text, { dimColor: true, children: ` · ${elapsed}s · esc to cancel` }), state.queued.length > 0 ? _jsx(Text, { dimColor: true, children: ` · ${state.queued.length} queued` }) : null] })) : null })), _jsxs(Box, { borderStyle: "round", borderColor: state.pendingConfirm || secretRequest ? "yellow" : state.status.running ? "yellow" : "magenta", paddingX: 1, children: [_jsx(Text, { color: state.status.running ? "yellow" : "magenta", bold: true, children: state.pendingConfirm || secretRequest ? "! " : "❯ " }), secretRequest ? (_jsx(Text, { bold: true, children: "Input locked \u00B7 complete the secure input above" })) : state.pendingConfirm ? (_jsx(Text, { bold: true, children: "Input locked \u00B7 answer the confirmation above with Y or N" })) : input.length === 0 ? (_jsx(Text, { dimColor: true, children: state.status.running
+                ? fileSuggestions.map((file, i) => (_jsxs(Text, { wrap: "truncate-end", backgroundColor: i === selected ? "#2563EB" : i % 2 === 0 ? "#1E293B" : "#0F172A", children: [_jsxs(Text, { color: i === selected
+                                ? "#FFFFFF"
+                                : file.isDir
+                                    ? "#67E8F9"
+                                    : "#F8FAFC", bold: i === selected, children: [i === selected ? "❯ " : "  ", file.isDir ? "▸ " : "· ", file.value] }), _jsx(Text, { dimColor: true, children: file.isDir ? "  directory" : "  attach file" })] }, file.value)))
+                : null, secretRequest ? (_jsx(SecretInputPanel, { title: secretRequest.title, prompt: secretRequest.prompt, onSubmit: (value) => answerSecret(value), onCancel: () => answerSecret(undefined) })) : state.pendingConfirm ? (_jsx(ConfirmModal, { confirm: state.pendingConfirm, onAnswer: answerConfirm })) : (_jsx(Box, { children: compacting ? (_jsxs(Text, { children: [_jsxs(Text, { color: "magenta", children: [spinner, " "] }), _jsx(Text, { color: "yellow", children: "compacting conversation\u2026" })] })) : state.status.running ? (_jsxs(Text, { children: [_jsxs(Text, { color: "magenta", children: [spinner, " "] }), _jsx(Text, { color: "yellow", children: state.status.activity || "working" }), state.status.step > 0 ? (_jsx(Text, { dimColor: true, children: ` · step ${state.status.step}` })) : null, _jsx(Text, { dimColor: true, children: ` · ${elapsed}s · esc to cancel` }), state.queued.length > 0 ? (_jsx(Text, { dimColor: true, children: ` · ${state.queued.length} queued` })) : null] })) : null })), _jsxs(Box, { borderStyle: "round", borderColor: state.pendingConfirm || secretRequest
+                    ? "yellow"
+                    : state.status.running
+                        ? "yellow"
+                        : "cyan", paddingX: 1, children: [_jsx(Text, { color: state.status.running ? "yellow" : "cyan", bold: true, children: state.pendingConfirm || secretRequest ? "! " : "❯ " }), secretRequest ? (_jsx(Text, { bold: true, children: "Input locked \u00B7 complete the secure input above" })) : state.pendingConfirm ? (_jsx(Text, { bold: true, children: "Input locked \u00B7 answer the confirmation above with Y or N" })) : input.length === 0 ? (_jsx(Text, { dimColor: true, children: state.status.running
                             ? "type to queue a message…"
-                            : "ask anything · / for commands · @file to attach · esc to cancel" })) : (_jsxs(Text, { wrap: "truncate-start", children: [before, _jsx(Text, { inverse: true, children: at }), after] }))] }), !secretRequest && !state.pendingConfirm && !state.status.running && !compacting ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { backgroundColor: "#166534", color: "#FFFFFF", bold: true, children: " READY " }), state.queued.length > 0 ? _jsx(Text, { backgroundColor: "#854D0E", color: "#FFFFFF", bold: true, children: ` ${state.queued.length} QUEUED ` }) : null, _jsx(Text, { children: " " }), _jsx(Text, { backgroundColor: "#334155", color: "#F8FAFC", children: " / COMMANDS " }), _jsx(Text, { children: " " }), _jsx(Text, { backgroundColor: "#334155", color: "#F8FAFC", children: " CTRL+T THINKING " }), _jsx(Text, { children: " " }), _jsx(Text, { backgroundColor: "#334155", color: "#F8FAFC", children: " CTRL+O OUTPUT " })] })) : null] }));
+                            : "ask anything · / for commands · @file to attach · esc to cancel" })) : (_jsxs(Text, { wrap: "truncate-start", children: [_jsx(Text, { color: "#F8FAFC", children: before }), _jsx(Text, { backgroundColor: "#22D3EE", color: "#020617", bold: true, children: at }), _jsx(Text, { color: "#F8FAFC", children: after })] }))] }), !secretRequest &&
+                !state.pendingConfirm &&
+                !state.status.running &&
+                !compacting ? (_jsxs(Box, { paddingX: 1, justifyContent: "center", children: [_jsxs(Text, { backgroundColor: "#166534", color: "#FFFFFF", bold: true, children: [" ", "READY", " "] }), state.queued.length > 0 ? (_jsx(Text, { backgroundColor: "#854D0E", color: "#FFFFFF", bold: true, children: ` ${state.queued.length} QUEUED ` })) : null, _jsx(Text, { children: " " }), _jsxs(Text, { backgroundColor: "#334155", color: "#F8FAFC", children: [" ", "/ COMMANDS", " "] }), _jsx(Text, { children: " " }), _jsxs(Text, { backgroundColor: "#334155", color: "#F8FAFC", children: [" ", "CTRL+T THINKING", " "] }), _jsx(Text, { children: " " }), _jsxs(Text, { backgroundColor: "#334155", color: "#F8FAFC", children: [" ", "CTRL+O OUTPUT", " "] }), _jsx(Text, { children: " " }), _jsx(Text, { backgroundColor: mouseMode ? "#155E75" : "#334155", color: "#F8FAFC", children: ` MOUSE ${mouseMode ? "ON" : "OFF"} ` })] })) : null] }));
 }
 //# sourceMappingURL=App.js.map