@mohanscodex/spectra-code 0.4.6 → 0.4.8

package/dist/src/tui/app.js

@@ -1,43 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useRef, useCallback, useEffect, useMemo, useState } from "react";
-import { useTerminalDimensions } from "@opentui/react";
-import { execSync } from "child_process";
-import { c, SPINNER } from "./theme.js";
-import { ChatArea } from "./components/chat-area.js";
-import { CommandPalette } from "./components/command-palette.js";
-import { PromptBar } from "./prompt-bar.js";
-import { Tips } from "./tips.js";
-import { titlecase } from "./utils.js";
-import { SessionStore } from "../services/session-store.js";
-import { SnapshotManager } from "../services/snapshot-manager.js";
-import { ProviderDialog } from "./ui/provider-dialog.js";
-import { SessionList } from "./ui/session-list.js";
-import { ModelSwitcher } from "./ui/model-switcher.js";
-import { ManageProvidersDialog } from "./ui/manage-providers-dialog.js";
-import { DoctorDialog } from "./ui/doctor-dialog.js";
-import { AboutDialog } from "./ui/about-dialog.js";
-import { AgentSwitcher } from "./ui/agent-switcher.js";
-import { ThinkingEffortDialog } from "./ui/thinking-effort-dialog.js";
-import { McpToggleDialog } from "./ui/mcp-toggle-dialog.js";
-import { DebugDialog } from "./ui/debug-dialog.js";
-import { MessageControls } from "./ui/message-controls.js";
-import { ToastContainer, showToast } from "./components/toast.js";
-import clipboard from "clipboardy";
-import { buildCmdItems, collectSlashNames } from "./commands.js";
-import { slashHead } from "./slash-commands.js";
-import { SlashAutocomplete } from "./components/slash-autocomplete.js";
-import { loadConfig } from "../services/config.js";
-import { registerAllCustomProviders } from "../services/custom-providers.js";
-import { PermissionDialog } from "./ui/permission-dialog.js";
-import { PLACEHOLDERS } from "./app-constants.js";
-import { loadSavedConfig, saveModelConfig, fmtCtx, lookupContextWindow } from "./utils/model-config.js";
-import { sdkMessagesToChatMessages } from "./utils/session-messages.js";
-import { usePermissionQueue } from "./hooks/use-permission-queue.js";
-import { useRevert } from "./hooks/use-revert.js";
-import { useAgent } from "./hooks/use-agent.js";
-import { useChatSubmit } from "./hooks/use-chat-submit.js";
-import { useAppKeyboard } from "./hooks/use-app-keyboard.js";
-import { cycleEffort } from "./variant-cycle.js";
+import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTerminalDimensions } from '@opentui/react';
+import { execFileSync } from 'child_process';
+import { c, SPINNER } from './theme.js';
+import { ChatArea } from './components/chat-area.js';
+import { CommandPalette } from './components/command-palette.js';
+import { PromptBar } from './prompt-bar.js';
+import { Tips } from './tips.js';
+import { titlecase } from './utils.js';
+import { SessionStore } from '../services/session-store.js';
+import { SnapshotManager } from '../services/snapshot-manager.js';
+import { ProviderDialog } from './ui/provider-dialog.js';
+import { SessionList } from './ui/session-list.js';
+import { ModelSwitcher } from './ui/model-switcher.js';
+import { ManageProvidersDialog } from './ui/manage-providers-dialog.js';
+import { DoctorDialog } from './ui/doctor-dialog.js';
+import { AboutDialog } from './ui/about-dialog.js';
+import { AgentSwitcher } from './ui/agent-switcher.js';
+import { ThinkingEffortDialog } from './ui/thinking-effort-dialog.js';
+import { McpToggleDialog } from './ui/mcp-toggle-dialog.js';
+import { DebugDialog } from './ui/debug-dialog.js';
+import { UpdateDialog } from './ui/update-dialog.js';
+import { MessageControls } from './ui/message-controls.js';
+import { ToastContainer, showToast } from './components/toast.js';
+import clipboard from 'clipboardy';
+import { buildCmdItems, collectSlashNames } from './commands.js';
+import { slashHead } from './slash-commands.js';
+import { SlashAutocomplete } from './components/slash-autocomplete.js';
+import { checkForUpdate } from './utils/update-check.js';
+import { VERSION } from './utils/version.js';
+import { loadConfig } from '../services/config.js';
+import { registerAllCustomProviders } from '../services/custom-providers.js';
+import { PermissionDialog } from './ui/permission-dialog.js';
+import { PLACEHOLDERS } from './app-constants.js';
+import { loadSavedConfig, saveModelConfig, fmtCtx, lookupContextWindow } from './utils/model-config.js';
+import { sdkMessagesToChatMessages } from './utils/session-messages.js';
+import { usePermissionQueue } from './hooks/use-permission-queue.js';
+import { useRevert } from './hooks/use-revert.js';
+import { useAgent } from './hooks/use-agent.js';
+import { useChatSubmit } from './hooks/use-chat-submit.js';
+import { useAppKeyboard } from './hooks/use-app-keyboard.js';
+import { cycleEffort } from './variant-cycle.js';
 export function App({ renderer }) {
     const { width: termWidth, height: termHeight } = useTerminalDimensions();
     // --- State ---
@@ -51,13 +54,13 @@ export function App({ renderer }) {
     const [selectedModel, setSelectedModel] = useState(savedConfig.model);
     const [selectedProvider, setSelectedProvider] = useState(savedConfig.provider);
     const [thinkingEffort, setThinkingEffort] = useState(undefined);
-    const [route, setRoute] = useState("home");
+    const [route, setRoute] = useState('home');
     const [messages, setMessages] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    const [status, setStatus] = useState("Ready");
+    const [status, setStatus] = useState('Ready');
     const [spinnerFrame, setSpinnerFrame] = useState(0);
     const [showCmd, setShowCmd] = useState(false);
-    const [cmdFilter, setCmdFilter] = useState("");
+    const [cmdFilter, setCmdFilter] = useState('');
     const [cmdSelected, setCmdSelected] = useState(0);
     const [elapsedMs, setElapsedMs] = useState(null);
     const [tokPerSec, setTokPerSec] = useState(null);
@@ -65,9 +68,10 @@ export function App({ renderer }) {
     const [showThinking, setShowThinking] = useState(true);
     const [showToolCalls, setShowToolCalls] = useState(true);
     const [copiedMsg, setCopiedMsg] = useState(false);
-    const [selectedAgent, setSelectedAgent] = useState("build");
+    const [selectedAgent, setSelectedAgent] = useState('build');
     const [submitKey, setSubmitKey] = useState(0);
     const [dialogStep, setDialogStep] = useState(null);
+    const [updateVersion, setUpdateVersion] = useState(null);
     const [placeholderIdx, setPlaceholderIdx] = useState(0);
     const [promptHistory, setPromptHistory] = useState([]);
     const [historyIdx, setHistoryIdx] = useState(-1);
@@ -76,7 +80,7 @@ export function App({ renderer }) {
     const [interruptKey, setInterruptKey] = useState(0);
     const [msgControls, setMsgControls] = useState(null);
     const [revertPoint, setRevertPoint] = useState(null);
-    const [draftText, setDraftText] = useState("");
+    const [draftText, setDraftText] = useState('');
     const [slashSelected, setSlashSelected] = useState(0);
     const [promptPosition, setPromptPosition] = useState({ top: 0, left: 0, width: 0 });
     // --- Refs ---
@@ -98,10 +102,14 @@ export function App({ renderer }) {
     const mcpCount = 0;
     const customProviderCount = Object.keys(customProviders).length;
     const cwdLabel = useMemo(() => {
-        const home = process.env.HOME || process.env.USERPROFILE || "";
-        const dir = process.cwd().replace(home, "~");
+        const home = process.env.HOME || process.env.USERPROFILE || '';
+        const dir = process.cwd().replace(home, '~');
         try {
-            const branch = execSync("git rev-parse --abbrev-ref HEAD 2>/dev/null", { encoding: "utf-8", timeout: 2000 }).toString().trim();
+            const branch = execFileSync('git', ['rev-parse', '--abbrev-ref', 'HEAD'], {
+                encoding: 'utf-8',
+                timeout: 2000,
+                stdio: ['pipe', 'pipe', 'ignore'],
+            }).trim();
             if (branch)
                 return `${dir}:${branch}`;
         }
@@ -113,12 +121,21 @@ export function App({ renderer }) {
         const id = setInterval(() => setPlaceholderIdx((p) => (p + 1) % PLACEHOLDERS.length), 4000);
         return () => clearInterval(id);
     }, []);
+    useEffect(() => {
+        checkForUpdate().then((version) => {
+            if (version)
+                setUpdateVersion(version);
+        });
+    }, []);
     useEffect(() => {
         if (!isLoading)
             return;
         const id = setInterval(() => setSpinnerFrame((f) => (f + 1) % SPINNER.length), 80);
         renderer.requestLive();
-        return () => { clearInterval(id); renderer.dropLive(); };
+        return () => {
+            clearInterval(id);
+            renderer.dropLive();
+        };
     }, [isLoading, renderer]);
     useEffect(() => {
         const handler = (selection) => {
@@ -134,8 +151,10 @@ export function App({ renderer }) {
                 catch { }
             }, 2000);
         };
-        renderer.on("selection", handler);
-        return () => { renderer.off?.("selection", handler); };
+        renderer.on('selection', handler);
+        return () => {
+            renderer.off?.('selection', handler);
+        };
     }, [renderer]);
     // --- Stable callbacks ---
     const addMessage = useCallback((msg) => setMessages((p) => [...p, msg]), []);
@@ -143,30 +162,59 @@ export function App({ renderer }) {
     // --- Hooks (order matters for ref lifecycle) ---
     const securityRef = useRef(null);
     const { permissionRequest, enqueuePermission, resolvePermission } = usePermissionQueue(securityRef);
-    const { agentRef, loadedSessionMessages, getOrCreateAgent, resetAgentForModelSwitch, } = useAgent({ securityRef, securityConfig, enqueuePermission });
-    const { revertedMessagesRef, revertDraftRef, runRevert, runRedo, runRollbackFiles, discardRevert, } = useRevert({
-        sessionStore, sessionId, agentRef, loadedSessionMessages,
-        setMessages, setRevertPoint, setHistoryIdx, setNavKey, snapshotManager,
+    const { agentRef, loadedSessionMessages, getOrCreateAgent, resetAgentForModelSwitch } = useAgent({
+        securityRef,
+        securityConfig,
+        enqueuePermission,
+    });
+    const { revertedMessagesRef, revertDraftRef, runRevert, runRedo, runRollbackFiles, discardRevert } = useRevert({
+        sessionStore,
+        sessionId,
+        agentRef,
+        loadedSessionMessages,
+        setMessages,
+        setRevertPoint,
+        setHistoryIdx,
+        setNavKey,
+        snapshotManager,
     });
     const handleCycleVariant = useCallback(() => {
         if (!provider) {
-            showToast("No provider configured", "warn");
+            showToast('No provider configured', 'warn');
             return;
         }
         const nextEffort = cycleEffort(provider, thinkingEffort);
         if (!nextEffort) {
-            showToast("No variants available", "info");
+            showToast('No variants available', 'info');
             return;
         }
         setThinkingEffort(nextEffort);
         agentRef.current = null;
-        showToast(nextEffort === "none" ? "Thinking: off" : `Thinking: ${nextEffort}`, "info");
+        showToast(nextEffort === 'none' ? 'Thinking: off' : `Thinking: ${nextEffort}`, 'info');
     }, [provider, thinkingEffort, agentRef]);
     const cmdItems = useMemo(() => buildCmdItems({
-        renderer, sessionStore: sessionStore.current, sessionIdRef: sessionId,
-        hasModel, selectedModel, provider, mcpCount, customProviderCount, messagesLength: messages.length,
-        showThinking, showToolCalls,
-        setRoute, setMessages, setStatus, setElapsedMs, setTokPerSec, setTokenUsage, setShowThinking, setShowToolCalls, setHomeKey, setNavKey, setDialogStep,
+        renderer,
+        sessionStore: sessionStore.current,
+        sessionIdRef: sessionId,
+        hasModel,
+        selectedModel,
+        provider,
+        mcpCount,
+        customProviderCount,
+        messagesLength: messages.length,
+        showThinking,
+        showToolCalls,
+        setRoute,
+        setMessages,
+        setStatus,
+        setElapsedMs,
+        setTokPerSec,
+        setTokenUsage,
+        setShowThinking,
+        setShowToolCalls,
+        setHomeKey,
+        setNavKey,
+        setDialogStep,
         onCycleVariant: handleCycleVariant,
         currentEffort: thinkingEffort,
         selectedAgent,
@@ -174,23 +222,81 @@ export function App({ renderer }) {
             securityRef.current?.getReadTracker().reset();
             securityRef.current?.getDoomLoop().reset();
         },
-    }), [renderer, hasModel, selectedModel, provider, mcpCount, customProviderCount, messages.length, showThinking, showToolCalls, handleCycleVariant, thinkingEffort, selectedAgent, sessionStore, sessionId, setRoute, setMessages, setStatus, setElapsedMs, setTokPerSec, setTokenUsage, setShowThinking, setShowToolCalls, setHomeKey, setNavKey, setDialogStep, securityRef]);
+    }), [
+        renderer,
+        hasModel,
+        selectedModel,
+        provider,
+        mcpCount,
+        customProviderCount,
+        messages.length,
+        showThinking,
+        showToolCalls,
+        handleCycleVariant,
+        thinkingEffort,
+        selectedAgent,
+        sessionStore,
+        sessionId,
+        setRoute,
+        setMessages,
+        setStatus,
+        setElapsedMs,
+        setTokPerSec,
+        setTokenUsage,
+        setShowThinking,
+        setShowToolCalls,
+        setHomeKey,
+        setNavKey,
+        setDialogStep,
+        securityRef,
+    ]);
     const slashNames = useMemo(() => collectSlashNames(cmdItems), [cmdItems]);
-    const { handleSubmit, updateLastAssistantMeta, } = useChatSubmit({
-        sessionStore, sessionId, agentRef, securityRef, loadedSessionMessages,
-        snapshotManager, lastAgentRef: useRef(null), isStreamingRef, currentTurnStartRef,
-        currentTurnMsgIdRef, revertPoint, getOrCreateAgent,
-        selectedModel, provider, selectedAgent, customProviders, thinkingEffort,
-        cmdItems, slashNames, addMessage, updateMessage, setMessages,
-        setIsLoading, setStatus, setRoute, setElapsedMs, setTokPerSec,
-        setTokenUsage, setDraftText, setSlashSelected, setSubmitKey,
-        setPromptHistory, setHistoryIdx, setInterruptKey, setRevertPoint,
+    const { handleSubmit, updateLastAssistantMeta } = useChatSubmit({
+        sessionStore,
+        sessionId,
+        agentRef,
+        securityRef,
+        loadedSessionMessages,
+        snapshotManager,
+        lastAgentRef: useRef(null),
+        isStreamingRef,
+        currentTurnStartRef,
+        currentTurnMsgIdRef,
+        revertPoint,
+        getOrCreateAgent,
+        selectedModel,
+        provider,
+        selectedAgent,
+        customProviders,
+        thinkingEffort,
+        cmdItems,
+        slashNames,
+        addMessage,
+        updateMessage,
+        setMessages,
+        setIsLoading,
+        setStatus,
+        setRoute,
+        setElapsedMs,
+        setTokPerSec,
+        setTokenUsage,
+        setDraftText,
+        setSlashSelected,
+        setSubmitKey,
+        setPromptHistory,
+        setHistoryIdx,
+        setInterruptKey,
+        setRevertPoint,
         discardRevert,
     });
     // --- cmdFiltered + slash ---
     const cmdFiltered = useMemo(() => {
         const q = cmdFilter.toLowerCase();
-        return !q ? cmdItems : cmdItems.filter((i) => i.label.toLowerCase().includes(q) || i.desc.toLowerCase().includes(q) || (i.cat && i.cat.toLowerCase().includes(q)));
+        return !q
+            ? cmdItems
+            : cmdItems.filter((i) => i.label.toLowerCase().includes(q) ||
+                i.desc.toLowerCase().includes(q) ||
+                (i.cat && i.cat.toLowerCase().includes(q)));
     }, [cmdItems, cmdFilter]);
     const slashFiltered = useMemo(() => {
         const head = slashHead(draftText);
@@ -208,54 +314,98 @@ export function App({ renderer }) {
         });
     }, [cmdItems, draftText]);
     const slashActive = useMemo(() => slashHead(draftText) !== undefined, [draftText]);
-    useEffect(() => { setSlashSelected(0); }, [draftText]);
-    useEffect(() => { if (cmdSelected >= cmdFiltered.length && cmdFiltered.length > 0)
-        setCmdSelected(cmdFiltered.length - 1); }, [cmdSelected, cmdFiltered.length]);
-    const execCmd = useCallback((item) => { item.action(); setShowCmd(false); }, [setShowCmd]);
+    useEffect(() => {
+        setSlashSelected(0);
+    }, [draftText]);
+    useEffect(() => {
+        if (cmdSelected >= cmdFiltered.length && cmdFiltered.length > 0)
+            setCmdSelected(cmdFiltered.length - 1);
+    }, [cmdSelected, cmdFiltered.length]);
+    const execCmd = useCallback((item) => {
+        item.action();
+        setShowCmd(false);
+    }, [setShowCmd]);
     // --- Keyboard ---
     useAppKeyboard({
-        renderer, isStreamingRef, currentTurnStartRef, currentTurnMsgIdRef,
-        revertPoint, revertedMessagesRef, runRedo, runRollbackFiles,
-        dialogStep, msgControls, permissionRequest, dialogKeyHandler,
-        showCmd, cmdFilter, cmdSelected, cmdFiltered,
-        draftText, slashActive, slashFiltered, slashSelected,
-        promptHistory, historyIdx, interruptKey,
-        selectedAgent, thinkingEffort, provider,
-        agentRef, securityRef, promptTextareaRef,
-        setShowCmd, setCmdFilter, setCmdSelected,
-        setDraftText, setSlashSelected, setHistoryIdx, setNavKey,
-        setInterruptKey, setSelectedAgent, setMessages, setStatus,
-        setThinkingEffort, updateMessage, updateLastAssistantMeta,
-        execCmd, handleCycleVariant,
+        renderer,
+        isStreamingRef,
+        currentTurnStartRef,
+        currentTurnMsgIdRef,
+        revertPoint,
+        revertedMessagesRef,
+        runRedo,
+        runRollbackFiles,
+        dialogStep,
+        msgControls,
+        permissionRequest,
+        dialogKeyHandler,
+        showCmd,
+        cmdFilter,
+        cmdSelected,
+        cmdFiltered,
+        draftText,
+        slashActive,
+        slashFiltered,
+        slashSelected,
+        promptHistory,
+        historyIdx,
+        interruptKey,
+        selectedAgent,
+        thinkingEffort,
+        provider,
+        agentRef,
+        securityRef,
+        promptTextareaRef,
+        setShowCmd,
+        setCmdFilter,
+        setCmdSelected,
+        setDraftText,
+        setSlashSelected,
+        setHistoryIdx,
+        setNavKey,
+        setInterruptKey,
+        setSelectedAgent,
+        setMessages,
+        setStatus,
+        setThinkingEffort,
+        updateMessage,
+        updateLastAssistantMeta,
+        execCmd,
+        handleCycleVariant,
     });
     // --- JSX ---
-    return (_jsxs("box", { flexDirection: "column", height: termHeight, backgroundColor: c.bg, children: [route === "home" ? (_jsxs("box", { flexDirection: "column", flexGrow: 1, children: [_jsx("box", { flexGrow: 1 }), _jsxs("box", { flexDirection: "column", alignItems: "center", flexShrink: 0, children: [_jsx("ascii-font", { text: "SPECTRA", font: "block", color: c.accent }), _jsx("box", { height: 1 }), _jsx(PromptBar, { isLoading: isLoading, spinnerFrame: spinnerFrame, inputKey: `h-${submitKey}-${navKey}`, placeholder: `Ask anything... "${PLACEHOLDERS[placeholderIdx]}"`, onSubmit: handleSubmit, hasModel: hasModel, agent: selectedAgent, model: selectedModel || "", provider: provider || "", thinkingEffort: thinkingEffort, initialValue: revertDraftRef.current || (historyIdx >= 0 ? promptHistory[historyIdx] : ""), width: Math.min(68, termWidth - 8), focused: !dialogStep && !showCmd && !msgControls && !permissionRequest, onTextChange: (t) => setDraftText(t), onGetTextarea: (r) => { promptTextareaRef.current = r; }, onPositionChange: setPromptPosition }), _jsx("box", { height: 1 }), _jsx("box", { flexDirection: "row", justifyContent: "flex-end", width: Math.min(68, termWidth - 8), children: _jsxs("box", { flexDirection: "row", gap: 2, children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "tab" }), _jsx("text", { fg: c.dim, children: " agent" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+t" }), _jsx("text", { fg: c.dim, children: " effort" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+p" }), _jsx("text", { fg: c.dim, children: " commands" })] })] }) }), _jsx("box", { height: 1 }), _jsx("box", { flexDirection: "row", gap: 4, alignItems: "center", children: [
-                                    { icon: "◈", label: `${sessionStore.current.list().length} sessions` },
-                                    { icon: "◉", label: "3 agents" },
-                                    { icon: "◆", label: "7 tools" },
-                                    { icon: "⬢", label: `${mcpCount} MCP` },
-                                ].map((s) => (_jsxs("box", { flexDirection: "row", gap: 1, alignItems: "center", children: [_jsx("text", { fg: c.accent, children: s.icon }), _jsx("text", { fg: c.dim, children: s.label })] }, s.label))) }), _jsx(Tips, {})] }), _jsx("box", { flexGrow: 1 }), _jsxs("box", { flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, height: 1, marginBottom: 1, children: [_jsx("box", { flexDirection: "row", gap: 4, children: _jsx("text", { fg: c.dim, overflow: "hidden", wrapMode: "none", children: cwdLabel }) }), _jsx("text", { fg: c.dim, flexShrink: 0, children: "Spectra Code" })] })] }, `home-${homeKey}`)) : (_jsxs("box", { flexDirection: "column", height: termHeight, paddingLeft: 2, paddingRight: 2, children: [revertPoint && (_jsxs("box", { flexDirection: "column", alignItems: "center", paddingY: 1, children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.warn, children: "Messages reverted. " }), _jsx("text", { fg: c.accent, children: "Ctrl+Y" }), _jsx("text", { fg: c.dim, children: " to restore" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.dim, children: "Files unchanged. " }), _jsx("text", { fg: c.accent, children: "Ctrl+Shift+Y" }), _jsx("text", { fg: c.dim, children: " to rollback files" })] })] })), _jsx("box", { flexDirection: "column", flexGrow: 1, paddingBottom: 1, children: _jsx(ChatArea, { messages: messages, showThinking: showThinking, showToolCalls: showToolCalls, revertPoint: revertPoint, onMessageClick: (msg) => setMsgControls(msg) }) }), _jsxs("box", { flexShrink: 0, children: [_jsx(PromptBar, { isLoading: isLoading, spinnerFrame: spinnerFrame, inputKey: `c-${submitKey}-${navKey}`, placeholder: "Reply...", onSubmit: handleSubmit, hasModel: hasModel, agent: selectedAgent, model: selectedModel || "", provider: provider || "", thinkingEffort: thinkingEffort, initialValue: revertDraftRef.current || (historyIdx >= 0 ? promptHistory[historyIdx] : ""), elapsedMs: elapsedMs, tokenUsage: tokenUsage, width: termWidth - 4, focused: !dialogStep && !showCmd && !msgControls && !permissionRequest, onTextChange: (t) => setDraftText(t), onGetTextarea: (r) => { promptTextareaRef.current = r; }, onPositionChange: setPromptPosition }), _jsx("box", { height: 1 }), _jsxs("box", { flexDirection: "row", justifyContent: "space-between", alignItems: "center", height: 1, paddingLeft: 3, paddingRight: 1, children: [_jsxs("box", { flexDirection: "row", gap: 2, alignItems: "center", overflow: "hidden", children: [isLoading ? (_jsxs("box", { flexDirection: "row", gap: 2, alignItems: "center", children: [_jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: c.warn, children: SPINNER[spinnerFrame] }), _jsx("text", { fg: c.dim, children: "Streaming..." })] }), _jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: c.accent, children: "esc" }), _jsx("text", { fg: c.dim, children: "interrupt" })] })] })) : (_jsx("text", { fg: c.dim, children: "Ready" })), (tokenUsage.input + tokenUsage.output) > 0 && (() => {
-                                                const used = tokenUsage.input + tokenUsage.output;
-                                                const cw = lookupContextWindow(selectedModel || "", provider);
-                                                const pct = cw ? Math.round((used / cw) * 100) : null;
-                                                return (_jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: c.subtext, children: fmtCtx(used) }), pct !== null && _jsxs("text", { fg: pct > 80 ? c.warn : c.dim, children: ["(", pct, "%)"] })] }));
-                                            })()] }), _jsxs("box", { flexDirection: "row", gap: 2, alignItems: "center", children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "tab" }), _jsx("text", { fg: c.dim, children: " agent" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+t" }), _jsx("text", { fg: c.dim, children: " effort" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+p" }), _jsx("text", { fg: c.dim, children: " commands" })] })] })] })] })] })), showCmd && _jsx(CommandPalette, { filter: cmdFilter, selected: cmdSelected, items: cmdFiltered, termWidth: termWidth, termHeight: termHeight }), slashActive && slashFiltered.length > 0 && (_jsx(SlashAutocomplete, { query: slashHead(draftText)?.name || "", selected: slashSelected, items: slashFiltered, termWidth: termWidth, termHeight: termHeight, route: route, promptTop: promptPosition.top, promptLeft: promptPosition.left, promptWidth: promptPosition.width })), dialogStep?.type === "provider" && (_jsx(ProviderDialog, { termWidth: termWidth, termHeight: termHeight, keyHandlerRef: dialogKeyHandler, onModelSelected: (modelId, providerId) => {
+    return (_jsxs("box", { flexDirection: "column", height: termHeight, backgroundColor: c.bg, children: [route === 'home' ? (_jsxs("box", { flexDirection: "column", flexGrow: 1, children: [_jsx("box", { flexGrow: 1 }), _jsxs("box", { flexDirection: "column", alignItems: "center", flexShrink: 0, children: [_jsx("ascii-font", { text: "SPECTRA", font: "block", color: c.accent }), _jsx("box", { height: 1 }), _jsx(PromptBar, { isLoading: isLoading, spinnerFrame: spinnerFrame, inputKey: `h-${submitKey}-${navKey}`, placeholder: `Ask anything... "${PLACEHOLDERS[placeholderIdx]}"`, onSubmit: handleSubmit, hasModel: hasModel, agent: selectedAgent, model: selectedModel || '', provider: provider || '', thinkingEffort: thinkingEffort, initialValue: revertDraftRef.current || (historyIdx >= 0 ? promptHistory[historyIdx] : ''), width: Math.min(68, termWidth - 8), focused: !dialogStep && !showCmd && !msgControls && !permissionRequest, onTextChange: (t) => setDraftText(t), onGetTextarea: (r) => {
+                                    promptTextareaRef.current = r;
+                                }, onPositionChange: setPromptPosition }), _jsx("box", { height: 1 }), _jsx("box", { flexDirection: "row", justifyContent: "flex-end", width: Math.min(68, termWidth - 8), children: _jsxs("box", { flexDirection: "row", gap: 2, children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "tab" }), _jsx("text", { fg: c.dim, children: " agent" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+t" }), _jsx("text", { fg: c.dim, children: " effort" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+p" }), _jsx("text", { fg: c.dim, children: " commands" })] })] }) }), _jsx("box", { height: 1 }), _jsx("box", { flexDirection: "row", gap: 4, alignItems: "center", children: [
+                                    { icon: '◈', label: `${sessionStore.current.list().length} sessions` },
+                                    { icon: '◉', label: '3 agents' },
+                                    { icon: '◆', label: '7 tools' },
+                                    { icon: '⬢', label: `${mcpCount} MCP` },
+                                ].map((s) => (_jsxs("box", { flexDirection: "row", gap: 1, alignItems: "center", children: [_jsx("text", { fg: c.accent, children: s.icon }), _jsx("text", { fg: c.dim, children: s.label })] }, s.label))) }), _jsx(Tips, {})] }), _jsx("box", { flexGrow: 1 }), _jsxs("box", { flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, height: 1, marginBottom: 1, children: [_jsx("box", { flexDirection: "row", gap: 4, children: _jsx("text", { fg: c.dim, overflow: "hidden", wrapMode: "none", children: cwdLabel }) }), _jsx("text", { fg: c.dim, flexShrink: 0, children: "Spectra Code" })] })] }, `home-${homeKey}`)) : (_jsxs("box", { flexDirection: "column", height: termHeight, paddingLeft: 2, paddingRight: 2, children: [revertPoint && (_jsxs("box", { flexDirection: "column", alignItems: "center", paddingY: 1, children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.warn, children: "Messages reverted. " }), _jsx("text", { fg: c.accent, children: "Ctrl+Y" }), _jsx("text", { fg: c.dim, children: " to restore" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.dim, children: "Files unchanged. " }), _jsx("text", { fg: c.accent, children: "Ctrl+Shift+Y" }), _jsx("text", { fg: c.dim, children: " to rollback files" })] })] })), _jsx("box", { flexDirection: "column", flexGrow: 1, paddingBottom: 1, children: _jsx(ChatArea, { messages: messages, showThinking: showThinking, showToolCalls: showToolCalls, revertPoint: revertPoint, onMessageClick: (msg) => setMsgControls(msg) }) }), _jsxs("box", { flexShrink: 0, children: [_jsx(PromptBar, { isLoading: isLoading, spinnerFrame: spinnerFrame, inputKey: `c-${submitKey}-${navKey}`, placeholder: "Reply...", onSubmit: handleSubmit, hasModel: hasModel, agent: selectedAgent, model: selectedModel || '', provider: provider || '', thinkingEffort: thinkingEffort, initialValue: revertDraftRef.current || (historyIdx >= 0 ? promptHistory[historyIdx] : ''), elapsedMs: elapsedMs, tokenUsage: tokenUsage, width: termWidth - 4, focused: !dialogStep && !showCmd && !msgControls && !permissionRequest, onTextChange: (t) => setDraftText(t), onGetTextarea: (r) => {
+                                    promptTextareaRef.current = r;
+                                }, onPositionChange: setPromptPosition }), _jsx("box", { height: 1 }), _jsxs("box", { flexDirection: "row", justifyContent: "space-between", alignItems: "center", height: 1, paddingLeft: 3, paddingRight: 1, children: [_jsxs("box", { flexDirection: "row", gap: 2, alignItems: "center", overflow: "hidden", children: [isLoading ? (_jsxs("box", { flexDirection: "row", gap: 2, alignItems: "center", children: [_jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: c.warn, children: SPINNER[spinnerFrame] }), _jsx("text", { fg: c.dim, children: "Streaming..." })] }), _jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: c.accent, children: "esc" }), _jsx("text", { fg: c.dim, children: "interrupt" })] })] })) : (_jsx("text", { fg: c.dim, children: "Ready" })), tokenUsage.input + tokenUsage.output > 0 &&
+                                                (() => {
+                                                    const used = tokenUsage.input + tokenUsage.output;
+                                                    const cw = lookupContextWindow(selectedModel || '', provider);
+                                                    const pct = cw ? Math.round((used / cw) * 100) : null;
+                                                    return (_jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: c.subtext, children: fmtCtx(used) }), pct !== null && _jsxs("text", { fg: pct > 80 ? c.warn : c.dim, children: ["(", pct, "%)"] })] }));
+                                                })()] }), _jsxs("box", { flexDirection: "row", gap: 2, alignItems: "center", children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "tab" }), _jsx("text", { fg: c.dim, children: " agent" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+t" }), _jsx("text", { fg: c.dim, children: " effort" })] }), _jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: c.text, children: "ctrl+p" }), _jsx("text", { fg: c.dim, children: " commands" })] })] })] })] })] })), showCmd && (_jsx(CommandPalette, { filter: cmdFilter, selected: cmdSelected, items: cmdFiltered, termWidth: termWidth, termHeight: termHeight })), slashActive && slashFiltered.length > 0 && (_jsx(SlashAutocomplete, { query: slashHead(draftText)?.name || '', selected: slashSelected, items: slashFiltered, termWidth: termWidth, termHeight: termHeight, route: route, promptTop: promptPosition.top, promptLeft: promptPosition.left, promptWidth: promptPosition.width })), dialogStep?.type === 'provider' && (_jsx(ProviderDialog, { termWidth: termWidth, termHeight: termHeight, keyHandlerRef: dialogKeyHandler, onModelSelected: (modelId, providerId) => {
                     resetAgentForModelSwitch();
                     setSelectedModel(modelId);
                     setSelectedProvider(providerId);
                     setDialogStep(null);
                     saveModelConfig(modelId, providerId);
-                    showToast(`Model set`, "success");
-                }, onClose: () => setDialogStep(null) })), dialogStep?.type === "session-list" && (_jsx(SessionList, { store: sessionStore.current, termWidth: termWidth, termHeight: termHeight, mode: dialogStep.mode || "load", onLoad: (data) => {
+                    showToast(`Model set`, 'success');
+                }, onClose: () => setDialogStep(null) })), dialogStep?.type === 'session-list' && (_jsx(SessionList, { store: sessionStore.current, termWidth: termWidth, termHeight: termHeight, mode: dialogStep.mode || 'load', onLoad: (data) => {
                     const { messages: loadedMsgs, tokenUsage: tu } = sdkMessagesToChatMessages(data);
                     setTokenUsage(tu);
                     setMessages(() => loadedMsgs);
                     sessionId.current = data.id;
                     setSelectedModel(data.model);
-                    setSelectedProvider(data.provider || data.model.split("/")[0]);
+                    setSelectedProvider(data.provider || data.model.split('/')[0]);
                     setSelectedAgent(data.agent);
                     setThinkingEffort(data.thinkingEffort || undefined);
-                    setRoute("chat");
+                    setRoute('chat');
                     setDialogStep(null);
                     loadedSessionMessages.current = data.messages;
                     if (agentRef.current) {
@@ -264,47 +414,80 @@ export function App({ renderer }) {
                     }
                     securityRef.current?.getReadTracker().reset();
                     securityRef.current?.getDoomLoop().reset();
-                    showToast(`Loaded: ${data.title.slice(0, 40)}`, "info");
+                    showToast(`Loaded: ${data.title.slice(0, 40)}`, 'info');
                 }, onDelete: (id) => {
                     sessionStore.current.delete(id);
                     if (sessionId.current === id) {
                         sessionId.current = null;
                         setMessages([]);
-                        setRoute("home");
+                        setRoute('home');
                         setHomeKey((k) => k + 1);
                     }
-                    showToast("Session deleted", "success");
+                    showToast('Session deleted', 'success');
                 }, onRename: (id, title) => {
                     sessionStore.current.rename(id, title);
-                    showToast("Session renamed", "success");
-                }, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "switch-model" && (_jsx(ModelSwitcher, { providerId: provider || "", termWidth: termWidth, termHeight: termHeight, onModelSelected: (modelId, providerId) => {
+                    showToast('Session renamed', 'success');
+                }, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'switch-model' && (_jsx(ModelSwitcher, { providerId: provider || '', termWidth: termWidth, termHeight: termHeight, onModelSelected: (modelId, providerId) => {
                     resetAgentForModelSwitch();
                     setSelectedModel(modelId);
                     setSelectedProvider(providerId);
                     setDialogStep(null);
                     saveModelConfig(modelId, providerId);
-                    showToast(`Switched model`, "info");
-                }, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "manage-providers" && (_jsx(ManageProvidersDialog, { termWidth: termWidth, termHeight: termHeight, providers: customProviders, onProvidersChange: (updated) => {
+                    showToast(`Switched model`, 'info');
+                }, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'manage-providers' && (_jsx(ManageProvidersDialog, { termWidth: termWidth, termHeight: termHeight, providers: customProviders, onProvidersChange: (updated) => {
                     setCustomProviders(updated);
                     resetAgentForModelSwitch();
-                    showToast("Providers updated", "success");
-                }, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "doctor" && dialogStep.result && (_jsx(DoctorDialog, { result: dialogStep.result, termWidth: termWidth, termHeight: termHeight, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "about" && (_jsx(AboutDialog, { termWidth: termWidth, termHeight: termHeight, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "switch-agent" && (_jsx(AgentSwitcher, { currentAgent: selectedAgent, termWidth: termWidth, termHeight: termHeight, onAgentSelected: (agent) => {
+                    showToast('Providers updated', 'success');
+                }, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'doctor' && dialogStep.result && (_jsx(DoctorDialog, { result: dialogStep.result, termWidth: termWidth, termHeight: termHeight, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'about' && (_jsx(AboutDialog, { termWidth: termWidth, termHeight: termHeight, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), updateVersion && (_jsx(UpdateDialog, { newVersion: updateVersion, currentVersion: VERSION, termWidth: termWidth, termHeight: termHeight, onClose: () => setUpdateVersion(null), onInstall: () => {
+                    try {
+                        clipboard.writeSync('bun update -g @mohanscodex/spectra-code');
+                        showToast('Command copied to clipboard', 'success');
+                    }
+                    catch { }
+                    setUpdateVersion(null);
+                }, registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'switch-agent' && (_jsx(AgentSwitcher, { currentAgent: selectedAgent, termWidth: termWidth, termHeight: termHeight, onAgentSelected: (agent) => {
                     setSelectedAgent(agent);
                     resetAgentForModelSwitch();
                     setDialogStep(null);
-                    showToast(`Switched to ${titlecase(agent)} agent`, "info");
-                }, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "thinking-effort" && (_jsx(ThinkingEffortDialog, { provider: provider, currentEffort: thinkingEffort, termWidth: termWidth, termHeight: termHeight, onEffortSelected: (effort) => {
+                    showToast(`Switched to ${titlecase(agent)} agent`, 'info');
+                }, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'thinking-effort' && (_jsx(ThinkingEffortDialog, { provider: provider, currentEffort: thinkingEffort, termWidth: termWidth, termHeight: termHeight, onEffortSelected: (effort) => {
                     setThinkingEffort(effort);
                     resetAgentForModelSwitch();
                     setDialogStep(null);
-                    showToast(effort === "none" ? "Thinking: off" : `Thinking: ${effort}`, "info");
-                }, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "toggle-mcp" && (_jsx(McpToggleDialog, { termWidth: termWidth, termHeight: termHeight, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), dialogStep?.type === "debug" && (_jsx(DebugDialog, { termWidth: termWidth, termHeight: termHeight, selectedModel: selectedModel, provider: provider, selectedAgent: selectedAgent, thinkingEffort: thinkingEffort, sessionStore: sessionStore.current, mcpCount: mcpCount, onClose: () => setDialogStep(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), msgControls && sessionId.current && (_jsx(MessageControls, { message: msgControls, sessionId: sessionId.current, messages: messages, termWidth: termWidth, termHeight: termHeight, revertPoint: revertPoint, onRevert: (msgId) => { runRevert(messages, msgId); setMsgControls(null); }, onRedo: () => { runRedo(); setMsgControls(null); }, onFork: (msgId) => {
+                    showToast(effort === 'none' ? 'Thinking: off' : `Thinking: ${effort}`, 'info');
+                }, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'toggle-mcp' && (_jsx(McpToggleDialog, { termWidth: termWidth, termHeight: termHeight, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), dialogStep?.type === 'debug' && (_jsx(DebugDialog, { termWidth: termWidth, termHeight: termHeight, selectedModel: selectedModel, provider: provider, selectedAgent: selectedAgent, thinkingEffort: thinkingEffort, sessionStore: sessionStore.current, mcpCount: mcpCount, onClose: () => setDialogStep(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), msgControls && sessionId.current && (_jsx(MessageControls, { message: msgControls, sessionId: sessionId.current, messages: messages, termWidth: termWidth, termHeight: termHeight, revertPoint: revertPoint, onRevert: (msgId) => {
+                    runRevert(messages, msgId);
+                    setMsgControls(null);
+                }, onRedo: () => {
+                    runRedo();
+                    setMsgControls(null);
+                }, onFork: (msgId) => {
                     const forked = sessionStore.current.fork(sessionId.current);
                     if (forked) {
-                        const msgIdx = messages.findIndex(m => m.id === msgId);
+                        const msgIdx = messages.findIndex((m) => m.id === msgId);
                         if (msgIdx >= 0) {
                             forked.messages = forked.messages.slice(0, msgIdx + 1);
-                            forked.title = `${forked.title.split(" (fork)")[0]} (fork)`;
+                            forked.title = `${forked.title.split(' (fork)')[0]} (fork)`;
                             sessionStore.current.save(forked);
                         }
                         const data = sessionStore.current.get(forked.id);
@@ -313,10 +496,20 @@ export function App({ renderer }) {
                             setMessages(loadedMsgs);
                             sessionId.current = forked.id;
                             loadedSessionMessages.current = data.messages;
-                            showToast("Session forked", "success");
+                            showToast('Session forked', 'success');
                         }
                     }
                     setMsgControls(null);
-                }, onClose: () => setMsgControls(null), registerHandler: (fn) => { dialogKeyHandler.current = fn; } })), permissionRequest && (_jsx(PermissionDialog, { request: permissionRequest, termWidth: termWidth, termHeight: termHeight, onAllow: (id) => { resolvePermission(id, { action: "once" }); }, onAllowAlways: (id) => { resolvePermission(id, { action: "always" }); }, onDeny: (id) => { resolvePermission(id, { action: "deny" }); }, onClose: () => { resolvePermission(permissionRequest.id, { action: "deny" }); } })), _jsx(ToastContainer, {})] }));
+                }, onClose: () => setMsgControls(null), registerHandler: (fn) => {
+                    dialogKeyHandler.current = fn;
+                } })), permissionRequest && (_jsx(PermissionDialog, { request: permissionRequest, termWidth: termWidth, termHeight: termHeight, onAllow: (id) => {
+                    resolvePermission(id, { action: 'once' });
+                }, onAllowAlways: (id) => {
+                    resolvePermission(id, { action: 'always' });
+                }, onDeny: (id) => {
+                    resolvePermission(id, { action: 'deny' });
+                }, onClose: () => {
+                    resolvePermission(permissionRequest.id, { action: 'deny' });
+                } })), _jsx(ToastContainer, {})] }));
 }
 //# sourceMappingURL=app.js.map