grok-dev 1.0.0-rc1

package/dist/ui/app.js

@@ -0,0 +1,1720 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { decodePasteBytes } from "@opentui/core";
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import os from "os";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Agent } from "../agent/agent";
+import { getModelInfo, MODELS } from "../grok/models";
+import { createTelegramBridge } from "../telegram/bridge";
+import { approvePairingCode } from "../telegram/pairing";
+import { createTurnCoordinator } from "../telegram/turn-coordinator";
+import { MODES } from "../types/index";
+import { copyTextToHostClipboard } from "../utils/host-clipboard";
+import { getApiKey, getTelegramBotToken, loadUserSettings, saveProjectSettings, saveUserSettings, } from "../utils/settings";
+import { discoverSkills, formatSkillsForChat } from "../utils/skills";
+import { Markdown } from "./markdown";
+import { formatPlanAnswers, initialPlanQuestionsState, PlanQuestionsPanel, PlanView, } from "./plan";
+import { getCompactTuiSelectionText } from "./terminal-selection-text";
+import { dark } from "./theme";
+const STAR_PALETTE = ["#777777", "#666666", "#4a4a4a", "#333333", "#222222"];
+const LOADING_SPINNER_FRAMES = ["⬒", "⬔", "⬓", "⬕"];
+const HERO_ROWS = [
+    {
+        stars: [
+            { col: 0, ch: "·" },
+            { col: 13, ch: "*" },
+            { col: 21, ch: "·" },
+            { col: 34, ch: "·" },
+        ],
+    },
+    {
+        stars: [
+            { col: 3, ch: "*" },
+            { col: 11, ch: "·" },
+            { col: 17, ch: "·" },
+            { col: 25, ch: "*" },
+        ],
+    },
+    {
+        stars: [
+            { col: 6, ch: "·" },
+            { col: 12, ch: "·" },
+            { col: 15, ch: "·" },
+            { col: 18, ch: "·" },
+            { col: 24, ch: "·" },
+        ],
+    },
+    {
+        stars: [
+            { col: 2, ch: "·" },
+            { col: 10, ch: "·" },
+            { col: 19, ch: "·" },
+            { col: 27, ch: "·" },
+        ],
+        grok: 13,
+    },
+    {
+        stars: [
+            { col: 6, ch: "·" },
+            { col: 12, ch: "·" },
+            { col: 15, ch: "·" },
+            { col: 18, ch: "·" },
+            { col: 24, ch: "·" },
+        ],
+    },
+    {
+        stars: [
+            { col: 3, ch: "·" },
+            { col: 11, ch: "*" },
+            { col: 17, ch: "·" },
+            { col: 25, ch: "·" },
+        ],
+    },
+    {
+        stars: [
+            { col: 0, ch: "*" },
+            { col: 13, ch: "·" },
+            { col: 21, ch: "*" },
+            { col: 34, ch: "·" },
+        ],
+    },
+];
+function HeroLogo({ t }) {
+    const [tick, setTick] = useState(0);
+    const starIdx = useRef(0);
+    useEffect(() => {
+        const id = setInterval(() => setTick((n) => n + 1), 900);
+        return () => clearInterval(id);
+    }, []);
+    starIdx.current = 0;
+    const nextColor = () => {
+        const i = starIdx.current++;
+        return STAR_PALETTE[(i * 7 + tick * 3 + i * tick) % STAR_PALETTE.length];
+    };
+    return (_jsx("box", { flexDirection: "column", alignItems: "center", children: HERO_ROWS.map((row, r) => {
+            const els = [];
+            let cursor = 0;
+            for (const star of row.stars) {
+                if (row.grok !== undefined && cursor <= row.grok && star.col > row.grok) {
+                    els.push(" ".repeat(row.grok - cursor));
+                    els.push(_jsx("span", { style: { fg: t.primary }, children: "Grok" }, "grok"));
+                    cursor = row.grok + 4;
+                }
+                const gap = star.col - cursor;
+                if (gap > 0)
+                    els.push(" ".repeat(gap));
+                els.push(_jsx("span", { style: { fg: nextColor() }, children: star.ch }, `s-${star.col}`));
+                cursor = star.col + 1;
+            }
+            if (row.grok !== undefined && cursor <= row.grok) {
+                els.push(" ".repeat(row.grok - cursor));
+                els.push(_jsx("span", { style: { fg: t.primary }, children: "Grok" }, "grok"));
+                cursor = row.grok + 4;
+            }
+            els.push(" ".repeat(Math.max(0, 35 - cursor)));
+            // biome-ignore lint/suspicious/noArrayIndexKey: static constant array that never reorders
+            return _jsx("text", { children: els }, r);
+        }) }));
+}
+const SPLIT = {
+    topLeft: "",
+    bottomLeft: "",
+    vertical: "┃",
+    topRight: "",
+    bottomRight: "",
+    horizontal: " ",
+    bottomT: "",
+    topT: "",
+    cross: "",
+    leftT: "",
+    rightT: "",
+};
+const _SPLIT_END = { ...SPLIT, bottomLeft: "╹" };
+const _EMPTY = {
+    topLeft: "",
+    bottomLeft: "",
+    vertical: "",
+    topRight: "",
+    bottomRight: "",
+    horizontal: " ",
+    bottomT: "",
+    topT: "",
+    cross: "",
+    leftT: "",
+    rightT: "",
+};
+const _LINE = {
+    topLeft: "━",
+    bottomLeft: "━",
+    vertical: "",
+    topRight: "━",
+    bottomRight: "━",
+    horizontal: "━",
+    bottomT: "━",
+    topT: "━",
+    cross: "━",
+    leftT: "━",
+    rightT: "━",
+};
+const SLASH_MENU_ITEMS = [
+    { id: "exit", label: "exit", description: "Quit the CLI" },
+    { id: "help", label: "help", description: "Show available commands" },
+    { id: "remote-control", label: "remote-control", description: "Remote control" },
+    { id: "mcps", label: "mcps", description: "Manage MCP servers" },
+    { id: "models", label: "models", description: "Select a model" },
+    { id: "new", label: "new session", description: "Start a new session" },
+    { id: "review", label: "review", description: "Review recent changes" },
+    { id: "skills", label: "skills", description: "Manage skills" },
+];
+const CONNECT_CHANNELS = [
+    { id: "telegram", label: "Telegram", description: "Chat with Grok from Telegram" },
+];
+export function App({ agent, startupConfig, initialMessage, onExit }) {
+    const t = dark;
+    const renderer = useRenderer();
+    const initialHasApiKey = agent.hasApiKey();
+    const [hasApiKey, setHasApiKey] = useState(initialHasApiKey);
+    const [messages, setMessages] = useState(() => agent.getChatEntries());
+    const [streamContent, setStreamContent] = useState("");
+    const [_streamReasoning, setStreamReasoning] = useState("");
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [model, setModel] = useState(agent.getModel());
+    const [mode, setModeState] = useState(agent.getMode());
+    const [showModelPicker, setShowModelPicker] = useState(false);
+    const [modelPickerIndex, setModelPickerIndex] = useState(0);
+    const [modelSearchQuery, setModelSearchQuery] = useState("");
+    const [activeToolCalls, setActiveToolCalls] = useState([]);
+    const [sessionTitle, setSessionTitle] = useState(() => agent.getSessionTitle());
+    const [sessionId, setSessionId] = useState(() => agent.getSessionId());
+    const [showApiKeyModal, setShowApiKeyModal] = useState(() => !initialHasApiKey);
+    const [apiKeyError, setApiKeyError] = useState(null);
+    const [showSlashMenu, setShowSlashMenu] = useState(false);
+    const [slashMenuIndex, setSlashMenuIndex] = useState(0);
+    const [slashSearchQuery, setSlashSearchQuery] = useState("");
+    const [pasteBlocks, setPasteBlocks] = useState([]);
+    const [activePlan, setActivePlan] = useState(null);
+    /** Incremented on each successful TUI copy; drives a brief "Copied" banner. */
+    const [copyFlashId, setCopyFlashId] = useState(0);
+    const [activeSubagent, setActiveSubagent] = useState(null);
+    const [pqs, setPqs] = useState(initialPlanQuestionsState());
+    const imageCounterRef = useRef(0);
+    const pasteCounterRef = useRef(0);
+    const apiKeyInputRef = useRef(null);
+    const inputRef = useRef(null);
+    const scrollRef = useRef(null);
+    const { width, height } = useTerminalDimensions();
+    const processedInitial = useRef(false);
+    const contentAccRef = useRef("");
+    const startTimeRef = useRef(0);
+    const isProcessingRef = useRef(false);
+    const hasApiKeyRef = useRef(initialHasApiKey);
+    const showApiKeyModalRef = useRef(!initialHasApiKey);
+    const queuedMessagesRef = useRef([]);
+    const [queuedMessages, setQueuedMessages] = useState([]);
+    const modeInfoRef = useRef(MODES[0]);
+    const activeRunIdRef = useRef(0);
+    const interruptedRunIdRef = useRef(null);
+    const coordinatorRef = useRef(createTurnCoordinator());
+    const bridgeRef = useRef(null);
+    const telegramAgentsRef = useRef(new Map());
+    const [showConnectModal, setShowConnectModal] = useState(false);
+    const [showTelegramTokenModal, setShowTelegramTokenModal] = useState(false);
+    const [showTelegramPairModal, setShowTelegramPairModal] = useState(false);
+    const [telegramTokenError, setTelegramTokenError] = useState(null);
+    const [telegramPairError, setTelegramPairError] = useState(null);
+    const [connectModalIndex, setConnectModalIndex] = useState(0);
+    const telegramTokenInputRef = useRef(null);
+    const telegramPairInputRef = useRef(null);
+    const showConnectModalRef = useRef(false);
+    const showTelegramTokenModalRef = useRef(false);
+    const showTelegramPairModalRef = useRef(false);
+    const setMode = useCallback((m) => {
+        if (m === "agent" && mode === "plan" && activePlan) {
+            const planText = [
+                `# ${activePlan.title}`,
+                activePlan.summary,
+                "",
+                ...activePlan.steps.map((s, i) => `${i + 1}. ${s.title}: ${s.description}${s.filePaths?.length ? ` (${s.filePaths.join(", ")})` : ""}`),
+            ].join("\n");
+            agent.setPlanContext(planText);
+        }
+        agent.setMode(m);
+        setModeState(m);
+    }, [agent, mode, activePlan]);
+    const cycleMode = useCallback(() => {
+        const idx = MODES.findIndex((m) => m.id === mode);
+        setMode(MODES[(idx + 1) % MODES.length].id);
+    }, [mode, setMode]);
+    const modeInfo = MODES.find((m) => m.id === mode);
+    modeInfoRef.current = modeInfo;
+    const modelInfo = getModelInfo(model);
+    const contextStats = modelInfo ? agent.getContextStats(modelInfo.contextWindow, streamContent) : null;
+    const _flatModels = MODELS.map((m) => m.id);
+    const filteredModels = modelSearchQuery
+        ? MODELS.filter((m) => m.name.toLowerCase().includes(modelSearchQuery.toLowerCase()) ||
+            m.id.toLowerCase().includes(modelSearchQuery.toLowerCase()))
+        : MODELS;
+    const filteredModelIds = filteredModels.map((m) => m.id);
+    const filteredSlashItems = slashSearchQuery
+        ? SLASH_MENU_ITEMS.filter((item) => item.label.toLowerCase().includes(slashSearchQuery.toLowerCase()) ||
+            item.description.toLowerCase().includes(slashSearchQuery.toLowerCase()))
+        : SLASH_MENU_ITEMS;
+    const scrollToBottom = useCallback(() => {
+        try {
+            scrollRef.current?.scrollTo(scrollRef.current?.scrollHeight ?? 99999);
+        }
+        catch {
+            /* */
+        }
+    }, []);
+    const getTelegramAgent = useCallback((userId) => {
+        const map = telegramAgentsRef.current;
+        const existing = map.get(userId);
+        if (existing)
+            return existing;
+        const apiKey = getApiKey();
+        if (!apiKey) {
+            throw new Error("Grok API key required. Add it in the CLI or set GROK_API_KEY.");
+        }
+        const u = loadUserSettings();
+        const sid = u.telegram?.sessionsByUserId?.[String(userId)];
+        const a = new Agent(apiKey, startupConfig.baseURL, startupConfig.model, startupConfig.maxToolRounds, {
+            session: sid,
+        });
+        if (!sid && a.getSessionId()) {
+            saveUserSettings({
+                telegram: {
+                    ...u.telegram,
+                    sessionsByUserId: {
+                        ...u.telegram?.sessionsByUserId,
+                        [String(userId)]: a.getSessionId(),
+                    },
+                },
+            });
+        }
+        map.set(userId, a);
+        return a;
+    }, [startupConfig]);
+    const appendTelegramUserMessage = useCallback((event) => {
+        setMessages((prev) => [
+            ...prev,
+            {
+                type: "user",
+                content: event.content,
+                timestamp: new Date(),
+                sourceLabel: `Telegram user ${event.userId}`,
+            },
+        ]);
+        setTimeout(scrollToBottom, 10);
+    }, [scrollToBottom]);
+    const upsertTelegramAssistantMessage = useCallback((event) => {
+        const content = sanitizeContent(event.content);
+        if (!content && !event.done)
+            return;
+        setMessages((prev) => {
+            const next = [...prev];
+            const idx = next.findIndex((entry) => entry.type === "assistant" && entry.remoteKey === event.turnKey);
+            const entry = {
+                type: "assistant",
+                content: content || "(no text output)",
+                timestamp: new Date(),
+                remoteKey: event.turnKey,
+                sourceLabel: `Telegram Grok • user ${event.userId}`,
+            };
+            if (idx === -1) {
+                next.push(entry);
+            }
+            else {
+                next[idx] = {
+                    ...next[idx],
+                    content: entry.content,
+                    timestamp: entry.timestamp,
+                    sourceLabel: entry.sourceLabel,
+                };
+            }
+            return next;
+        });
+        if (event.done) {
+            setActiveToolCalls([]);
+        }
+        setTimeout(scrollToBottom, 10);
+    }, [scrollToBottom]);
+    const showTelegramToolCalls = useCallback((event) => {
+        setActiveToolCalls(event.toolCalls);
+        setTimeout(scrollToBottom, 10);
+    }, [scrollToBottom]);
+    const appendTelegramToolResult = useCallback((event) => {
+        setMessages((prev) => [
+            ...prev,
+            {
+                type: "tool_result",
+                content: event.toolResult.success ? event.toolResult.output || "Success" : event.toolResult.error || "Error",
+                timestamp: new Date(),
+                toolCall: event.toolCall,
+                toolResult: event.toolResult,
+            },
+        ]);
+        if (event.toolResult.plan?.questions?.length) {
+            setActivePlan(event.toolResult.plan);
+            setPqs(initialPlanQuestionsState());
+        }
+        setActiveToolCalls([]);
+        setTimeout(scrollToBottom, 10);
+    }, [scrollToBottom]);
+    const startTelegramBridge = useCallback(() => {
+        const token = getTelegramBotToken();
+        if (!token || !getApiKey())
+            return;
+        if (bridgeRef.current)
+            return;
+        const bridge = createTelegramBridge({
+            token,
+            getApprovedUserIds: () => loadUserSettings().telegram?.approvedUserIds ?? [],
+            coordinator: coordinatorRef.current,
+            getTelegramAgent,
+            onUserMessage: appendTelegramUserMessage,
+            onAssistantMessage: upsertTelegramAssistantMessage,
+            onToolCalls: showTelegramToolCalls,
+            onToolResult: appendTelegramToolResult,
+            onError: (msg) => {
+                setMessages((p) => [...p, { type: "assistant", content: `Telegram: ${msg}`, timestamp: new Date() }]);
+            },
+        });
+        bridgeRef.current = bridge;
+        bridge.start();
+    }, [
+        appendTelegramToolResult,
+        appendTelegramUserMessage,
+        getTelegramAgent,
+        showTelegramToolCalls,
+        upsertTelegramAssistantMessage,
+    ]);
+    /** Start long polling when a bot token is already saved (pairing UI is optional if already approved). */
+    useEffect(() => {
+        if (!hasApiKey)
+            return;
+        if (!getTelegramBotToken())
+            return;
+        startTelegramBridge();
+    }, [hasApiKey, startTelegramBridge]);
+    const handleExit = useCallback(() => {
+        void bridgeRef.current?.stop();
+        bridgeRef.current = null;
+        onExit?.();
+    }, [onExit]);
+    const showCopyBanner = useCallback(() => {
+        setCopyFlashId((n) => n + 1);
+    }, []);
+    /** Match OpenCode: OSC 52 + real OS clipboard; used from keyboard and root onMouseUp. */
+    const copyTuiSelectionToHost = useCallback(() => {
+        if (!renderer.hasSelection)
+            return false;
+        const sel = renderer.getSelection();
+        const text = sel ? getCompactTuiSelectionText(sel) : "";
+        if (!text)
+            return false;
+        renderer.copyToClipboardOSC52(text);
+        copyTextToHostClipboard(text);
+        renderer.clearSelection();
+        showCopyBanner();
+        return true;
+    }, [renderer, showCopyBanner]);
+    const handleRootMouseUp = useCallback(() => {
+        copyTuiSelectionToHost();
+    }, [copyTuiSelectionToHost]);
+    useEffect(() => {
+        if (copyFlashId === 0)
+            return;
+        const id = setTimeout(() => setCopyFlashId(0), 2000);
+        return () => clearTimeout(id);
+    }, [copyFlashId]);
+    const openApiKeyModal = useCallback(() => {
+        showApiKeyModalRef.current = true;
+        setApiKeyError(null);
+        setShowApiKeyModal(true);
+    }, []);
+    const closeApiKeyModal = useCallback(() => {
+        showApiKeyModalRef.current = false;
+        setApiKeyError(null);
+        setShowApiKeyModal(false);
+    }, []);
+    const submitApiKey = useCallback(() => {
+        const apiKey = (apiKeyInputRef.current?.plainText || "").trim();
+        if (!apiKey) {
+            setApiKeyError("Enter an API key to continue.");
+            return;
+        }
+        if (!apiKey.startsWith("xai-")) {
+            setApiKeyError("API keys should start with xai-.");
+            return;
+        }
+        saveUserSettings({ apiKey });
+        agent.setApiKey(apiKey);
+        hasApiKeyRef.current = true;
+        showApiKeyModalRef.current = false;
+        setHasApiKey(true);
+        setApiKeyError(null);
+        setShowApiKeyModal(false);
+        apiKeyInputRef.current?.clear();
+        if (getTelegramBotToken()) {
+            startTelegramBridge();
+        }
+    }, [agent, startTelegramBridge]);
+    useEffect(() => {
+        hasApiKeyRef.current = hasApiKey;
+    }, [hasApiKey]);
+    useEffect(() => {
+        showApiKeyModalRef.current = showApiKeyModal;
+    }, [showApiKeyModal]);
+    useEffect(() => {
+        showConnectModalRef.current = showConnectModal;
+    }, [showConnectModal]);
+    useEffect(() => {
+        showTelegramTokenModalRef.current = showTelegramTokenModal;
+    }, [showTelegramTokenModal]);
+    useEffect(() => {
+        showTelegramPairModalRef.current = showTelegramPairModal;
+    }, [showTelegramPairModal]);
+    useEffect(() => {
+        return () => {
+            void bridgeRef.current?.stop();
+            bridgeRef.current = null;
+        };
+    }, []);
+    const submitTelegramToken = useCallback(() => {
+        const token = (telegramTokenInputRef.current?.plainText || "").trim();
+        if (!token) {
+            setTelegramTokenError("Paste your bot token from @BotFather.");
+            return;
+        }
+        if (!getApiKey()) {
+            setTelegramTokenError("Add a Grok API key first.");
+            return;
+        }
+        const u = loadUserSettings();
+        saveUserSettings({ telegram: { ...u.telegram, botToken: token } });
+        telegramTokenInputRef.current?.clear();
+        setShowTelegramTokenModal(false);
+        setTelegramTokenError(null);
+        startTelegramBridge();
+        setShowTelegramPairModal(true);
+        setTelegramPairError(null);
+        setMessages((p) => [
+            ...p,
+            {
+                type: "assistant",
+                content: "Telegram polling started. In Telegram, DM your bot and send /pair. Copy the code, then enter it below.",
+                timestamp: new Date(),
+            },
+        ]);
+    }, [startTelegramBridge]);
+    const submitTelegramPair = useCallback(async () => {
+        const code = (telegramPairInputRef.current?.plainText || "").trim();
+        if (!code) {
+            setTelegramPairError("Enter the pairing code.");
+            return;
+        }
+        const result = approvePairingCode(code);
+        if (!result.ok) {
+            setTelegramPairError(result.error);
+            return;
+        }
+        const u = loadUserSettings();
+        const ids = new Set(u.telegram?.approvedUserIds ?? []);
+        ids.add(result.userId);
+        saveUserSettings({ telegram: { ...u.telegram, approvedUserIds: [...ids] } });
+        telegramPairInputRef.current?.clear();
+        setShowTelegramPairModal(false);
+        setTelegramPairError(null);
+        setMessages((p) => [
+            ...p,
+            {
+                type: "assistant",
+                content: `Telegram user ${result.userId} paired. Keep this CLI open while you use the bot.`,
+                timestamp: new Date(),
+            },
+        ]);
+        try {
+            await bridgeRef.current?.sendDm(result.userId, "Pairing approved. You can message Grok here.");
+        }
+        catch {
+            /* optional DM */
+        }
+    }, []);
+    const beginTelegramFromConnect = useCallback(() => {
+        setShowConnectModal(false);
+        if (!getApiKey()) {
+            setMessages((p) => [...p, { type: "assistant", content: "Add a Grok API key first.", timestamp: new Date() }]);
+            openApiKeyModal();
+            return;
+        }
+        if (!getTelegramBotToken()) {
+            setShowTelegramTokenModal(true);
+            setTelegramTokenError(null);
+            return;
+        }
+        startTelegramBridge();
+        const alreadyPaired = (loadUserSettings().telegram?.approvedUserIds?.length ?? 0) > 0;
+        if (!alreadyPaired) {
+            setShowTelegramPairModal(true);
+            setTelegramPairError(null);
+            setMessages((p) => [
+                ...p,
+                {
+                    type: "assistant",
+                    content: "Telegram polling started. In Telegram, DM your bot and send /pair. Copy the code, then enter it below.",
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        else {
+            setMessages((p) => [
+                ...p,
+                {
+                    type: "assistant",
+                    content: "Telegram polling is running. Your chat is already paired.",
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+    }, [openApiKeyModal, startTelegramBridge]);
+    const invalidateActiveRun = useCallback(() => {
+        activeRunIdRef.current += 1;
+        setActiveToolCalls([]);
+        setActiveSubagent(null);
+        setStreamContent("");
+        setStreamReasoning("");
+    }, []);
+    const resetToNewSession = useCallback(() => {
+        const snapshot = agent.startNewSession();
+        setMessages(snapshot?.entries ?? []);
+        setStreamContent("");
+        setStreamReasoning("");
+        setSessionTitle(snapshot?.session.title ?? null);
+        setSessionId(snapshot?.session.id ?? agent.getSessionId());
+        setActiveToolCalls([]);
+        setActiveSubagent(null);
+        setActivePlan(null);
+        setPqs(initialPlanQuestionsState());
+        setPasteBlocks([]);
+        queuedMessagesRef.current = [];
+        setQueuedMessages([]);
+        imageCounterRef.current = 0;
+    }, [agent]);
+    const processMessage = useCallback(async (text) => {
+        if (!text.trim() || isProcessingRef.current)
+            return;
+        const runId = ++activeRunIdRef.current;
+        const isStale = () => activeRunIdRef.current !== runId;
+        isProcessingRef.current = true;
+        setIsProcessing(true);
+        if (!sessionTitle)
+            agent
+                .generateTitle(text.trim())
+                .then(setSessionTitle)
+                .catch(() => { });
+        await coordinatorRef.current.run(async () => {
+            setStreamContent("");
+            setStreamReasoning("");
+            setActiveToolCalls([]);
+            setActiveSubagent(null);
+            contentAccRef.current = "";
+            startTimeRef.current = Date.now();
+            const color = modeInfoRef.current.color;
+            setMessages((prev) => [
+                ...prev,
+                { type: "user", content: text.trim(), timestamp: new Date(), modeColor: color },
+            ]);
+            setTimeout(scrollToBottom, 50);
+            try {
+                for await (const chunk of agent.processMessage(text.trim())) {
+                    if (isStale()) {
+                        break;
+                    }
+                    switch (chunk.type) {
+                        case "content":
+                            contentAccRef.current += chunk.content || "";
+                            setStreamContent(sanitizeContent(contentAccRef.current));
+                            setTimeout(scrollToBottom, 10);
+                            break;
+                        case "reasoning":
+                            setStreamReasoning((p) => p + (chunk.content || ""));
+                            break;
+                        case "tool_calls":
+                            if (chunk.toolCalls) {
+                                const cleaned = sanitizeContent(contentAccRef.current);
+                                if (cleaned) {
+                                    setMessages((p) => [
+                                        ...p,
+                                        {
+                                            type: "assistant",
+                                            content: cleaned,
+                                            timestamp: new Date(),
+                                            modeColor: modeInfoRef.current.color,
+                                        },
+                                    ]);
+                                }
+                                contentAccRef.current = "";
+                                setStreamContent("");
+                                setActiveToolCalls(chunk.toolCalls);
+                            }
+                            break;
+                        case "tool_result":
+                            if (chunk.toolCall && chunk.toolResult) {
+                                setMessages((p) => [
+                                    ...p,
+                                    {
+                                        type: "tool_result",
+                                        content: chunk.toolResult.success
+                                            ? chunk.toolResult.output || "Success"
+                                            : chunk.toolResult.error || "Error",
+                                        timestamp: new Date(),
+                                        modeColor: modeInfoRef.current.color,
+                                        toolCall: chunk.toolCall,
+                                        toolResult: chunk.toolResult,
+                                    },
+                                ]);
+                                if (chunk.toolResult.plan?.questions?.length) {
+                                    setActivePlan(chunk.toolResult.plan);
+                                    setPqs(initialPlanQuestionsState());
+                                }
+                                setActiveToolCalls([]);
+                                setTimeout(scrollToBottom, 10);
+                            }
+                            break;
+                        case "error":
+                            contentAccRef.current += `\n${chunk.content || "Unknown error"}`;
+                            setStreamContent(contentAccRef.current);
+                            break;
+                        case "done":
+                            break;
+                    }
+                }
+            }
+            catch {
+                if (!isStale()) {
+                    contentAccRef.current += "\nAn unexpected error occurred.";
+                    setStreamContent(contentAccRef.current);
+                }
+            }
+            const wasInterrupted = interruptedRunIdRef.current === runId;
+            const finalContent = sanitizeContent(contentAccRef.current);
+            if (isStale()) {
+                contentAccRef.current = "";
+                return;
+            }
+            if (!wasInterrupted && finalContent) {
+                setMessages((p) => [
+                    ...p,
+                    { type: "assistant", content: finalContent, timestamp: new Date(), modeColor: modeInfoRef.current.color },
+                ]);
+            }
+            contentAccRef.current = "";
+            if (!isStale()) {
+                setStreamContent("");
+                setStreamReasoning("");
+                setActiveToolCalls([]);
+                setActiveSubagent(null);
+            }
+            if (wasInterrupted) {
+                interruptedRunIdRef.current = null;
+            }
+            const nextQueued = queuedMessagesRef.current.shift();
+            if (nextQueued) {
+                setQueuedMessages([...queuedMessagesRef.current]);
+                isProcessingRef.current = false;
+                processMessage(nextQueued);
+            }
+            else {
+                isProcessingRef.current = false;
+                if (!isStale()) {
+                    setIsProcessing(false);
+                }
+            }
+            setTimeout(scrollToBottom, 50);
+        });
+    }, [agent, scrollToBottom, sessionTitle]);
+    useEffect(() => {
+        if (initialMessage && hasApiKey && !processedInitial.current) {
+            processedInitial.current = true;
+            processMessage(initialMessage);
+        }
+    }, [hasApiKey, initialMessage, processMessage]);
+    useEffect(() => agent.onSubagentStatus(setActiveSubagent), [agent]);
+    useEffect(() => {
+        let active = true;
+        const id = setInterval(() => {
+            agent
+                .consumeBackgroundNotifications()
+                .then((notifications) => {
+                if (!active || notifications.length === 0)
+                    return;
+                setMessages((prev) => [
+                    ...prev,
+                    ...notifications.map((message) => ({
+                        type: "assistant",
+                        content: message,
+                        timestamp: new Date(),
+                    })),
+                ]);
+                setTimeout(scrollToBottom, 10);
+            })
+                .catch(() => { });
+        }, 2000);
+        return () => {
+            active = false;
+            clearInterval(id);
+        };
+    }, [agent, scrollToBottom]);
+    const handleCommand = useCallback((cmd) => {
+        const c = cmd.trim().toLowerCase();
+        if (c === "/clear") {
+            resetToNewSession();
+            return true;
+        }
+        if (c === "/model" || c === "/models") {
+            setShowModelPicker(true);
+            setModelPickerIndex(0);
+            setModelSearchQuery("");
+            return true;
+        }
+        if (c === "/remote-control") {
+            setConnectModalIndex(0);
+            setShowConnectModal(true);
+            return true;
+        }
+        if (c === "/quit" || c === "/exit" || c === "/q") {
+            handleExit();
+            return true;
+        }
+        return false;
+    }, [handleExit, resetToNewSession]);
+    const handleSlashMenuSelect = useCallback((item) => {
+        setShowSlashMenu(false);
+        inputRef.current?.clear();
+        switch (item.id) {
+            case "new":
+                resetToNewSession();
+                break;
+            case "models":
+                setShowModelPicker(true);
+                setModelPickerIndex(0);
+                setModelSearchQuery("");
+                break;
+            case "remote-control":
+                setConnectModalIndex(0);
+                setShowConnectModal(true);
+                break;
+            case "exit":
+                handleExit();
+                break;
+            case "help":
+                setMessages((p) => [
+                    ...p,
+                    {
+                        type: "assistant",
+                        content: SLASH_MENU_ITEMS.map((i) => `/${i.label} — ${i.description}`).join("\n"),
+                        timestamp: new Date(),
+                    },
+                ]);
+                break;
+            case "skills":
+                setMessages((p) => [
+                    ...p,
+                    {
+                        type: "assistant",
+                        content: formatSkillsForChat(discoverSkills(agent.getCwd()), agent.getCwd()),
+                        timestamp: new Date(),
+                    },
+                ]);
+                break;
+            case "mcps":
+                setMessages((p) => [
+                    ...p,
+                    { type: "assistant", content: "MCP server management coming soon.", timestamp: new Date() },
+                ]);
+                break;
+            case "review":
+                setMessages((p) => [
+                    ...p,
+                    { type: "assistant", content: "Review feature coming soon.", timestamp: new Date() },
+                ]);
+                break;
+        }
+    }, [agent, handleExit, resetToNewSession]);
+    const blockPrompt = showConnectModal || showTelegramTokenModal || showTelegramPairModal;
+    const showPlanPanel = !!activePlan?.questions?.length;
+    const planQuestions = activePlan?.questions ?? [];
+    const isSinglePlan = planQuestions.length === 1 && planQuestions[0]?.type !== "multiselect";
+    const planTabCount = isSinglePlan ? 1 : planQuestions.length + 1;
+    const isPlanConfirmTab = !isSinglePlan && pqs.tab === planQuestions.length;
+    const dismissPlan = useCallback(() => {
+        setActivePlan(null);
+        setPqs(initialPlanQuestionsState());
+    }, []);
+    const submitPlanAnswers = useCallback(() => {
+        if (!activePlan?.questions?.length)
+            return;
+        const text = formatPlanAnswers(activePlan.questions, pqs.answers);
+        setActivePlan(null);
+        setPqs(initialPlanQuestionsState());
+        processMessage(text);
+    }, [activePlan, pqs.answers, processMessage]);
+    const handlePlanSelect = useCallback((q, idx, options, showCustom) => {
+        const isCustom = showCustom && idx === options.length;
+        if (isCustom) {
+            if (q.type === "multiselect") {
+                const customVal = pqs.customInputs[q.id] ?? "";
+                if (customVal) {
+                    const existing = pqs.answers[q.id] ?? [];
+                    if (existing.includes(customVal)) {
+                        setPqs((s) => ({ ...s, answers: { ...s.answers, [q.id]: existing.filter((x) => x !== customVal) } }));
+                    }
+                    else {
+                        setPqs((s) => ({ ...s, editing: true }));
+                    }
+                }
+                else {
+                    setPqs((s) => ({ ...s, editing: true }));
+                }
+            }
+            else {
+                setPqs((s) => ({ ...s, editing: true }));
+            }
+            return;
+        }
+        const opt = options[idx];
+        if (!opt)
+            return;
+        if (q.type === "multiselect") {
+            setPqs((s) => {
+                const existing = s.answers[q.id] ?? [];
+                const next = existing.includes(opt.id) ? existing.filter((x) => x !== opt.id) : [...existing, opt.id];
+                return { ...s, answers: { ...s.answers, [q.id]: next } };
+            });
+        }
+        else {
+            setPqs((s) => ({ ...s, answers: { ...s.answers, [q.id]: opt.id } }));
+            if (isSinglePlan) {
+                submitPlanAnswers();
+                return;
+            }
+            setPqs((s) => ({ ...s, tab: s.tab + 1, selected: 0 }));
+        }
+    }, [pqs, isSinglePlan, submitPlanAnswers]);
+    const handleKey = useCallback((key) => {
+        if (showPlanPanel) {
+            const q = planQuestions[pqs.tab];
+            // Escape always dismisses
+            if (key.name === "escape") {
+                dismissPlan();
+                return;
+            }
+            // When editing custom text input
+            if (pqs.editing && !isPlanConfirmTab) {
+                if (key.name === "return") {
+                    const qId = q?.id;
+                    if (qId) {
+                        const text = (pqs.customInputs[qId] ?? "").trim();
+                        if (text) {
+                            if (q.type === "multiselect") {
+                                const existing = pqs.answers[qId] ?? [];
+                                const next = existing.includes(text) ? existing : [...existing, text];
+                                setPqs((s) => ({ ...s, editing: false, answers: { ...s.answers, [qId]: next } }));
+                            }
+                            else if (q.type === "text") {
+                                setPqs((s) => ({ ...s, editing: false, answers: { ...s.answers, [qId]: text } }));
+                                if (isSinglePlan) {
+                                    submitPlanAnswers();
+                                    return;
+                                }
+                                setPqs((s) => ({ ...s, tab: s.tab + 1, selected: 0 }));
+                            }
+                            else {
+                                setPqs((s) => ({ ...s, editing: false, answers: { ...s.answers, [qId]: text } }));
+                                if (isSinglePlan) {
+                                    submitPlanAnswers();
+                                    return;
+                                }
+                                setPqs((s) => ({ ...s, tab: s.tab + 1, selected: 0 }));
+                            }
+                        }
+                        else {
+                            setPqs((s) => ({ ...s, editing: false }));
+                        }
+                    }
+                    return;
+                }
+                if (key.name === "backspace") {
+                    const qId = q?.id;
+                    if (qId)
+                        setPqs((s) => ({
+                            ...s,
+                            customInputs: { ...s.customInputs, [qId]: (s.customInputs[qId] ?? "").slice(0, -1) },
+                        }));
+                    return;
+                }
+                if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+                    const qId = q?.id;
+                    if (qId)
+                        setPqs((s) => ({
+                            ...s,
+                            customInputs: { ...s.customInputs, [qId]: (s.customInputs[qId] ?? "") + key.sequence },
+                        }));
+                    return;
+                }
+                return;
+            }
+            // Tab / left / right — switch between question tabs
+            if (key.name === "tab") {
+                const dir = key.shift ? -1 : 1;
+                setPqs((s) => ({ ...s, tab: (s.tab + dir + planTabCount) % planTabCount, selected: 0 }));
+                return;
+            }
+            if (key.name === "left" || key.name === "h") {
+                setPqs((s) => ({ ...s, tab: (s.tab - 1 + planTabCount) % planTabCount, selected: 0 }));
+                return;
+            }
+            if (key.name === "right" || key.name === "l") {
+                setPqs((s) => ({ ...s, tab: (s.tab + 1) % planTabCount, selected: 0 }));
+                return;
+            }
+            // Confirm tab
+            if (isPlanConfirmTab) {
+                if (key.name === "return") {
+                    submitPlanAnswers();
+                    return;
+                }
+                return;
+            }
+            if (!q)
+                return;
+            // Text-only question (no options)
+            if (q.type === "text") {
+                setPqs((s) => ({ ...s, editing: true }));
+                return;
+            }
+            // Up/down — navigate options
+            const options = q.options ?? [];
+            const showCustom = true;
+            const totalItems = options.length + 1;
+            if (key.name === "up" || key.name === "k") {
+                setPqs((s) => ({ ...s, selected: (s.selected - 1 + totalItems) % totalItems }));
+                return;
+            }
+            if (key.name === "down" || key.name === "j") {
+                setPqs((s) => ({ ...s, selected: (s.selected + 1) % totalItems }));
+                return;
+            }
+            // Number keys 1-9 for quick selection
+            const digit = Number(key.name);
+            if (!Number.isNaN(digit) && digit >= 1 && digit <= Math.min(totalItems, 9)) {
+                const idx = digit - 1;
+                setPqs((s) => ({ ...s, selected: idx }));
+                handlePlanSelect(q, idx, options, showCustom);
+                return;
+            }
+            // Enter — select current option
+            if (key.name === "return") {
+                handlePlanSelect(q, pqs.selected, options, showCustom);
+                return;
+            }
+            return;
+        }
+        if (showTelegramTokenModalRef.current) {
+            if (key.name === "escape") {
+                setShowTelegramTokenModal(false);
+                setTelegramTokenError(null);
+                return;
+            }
+            if (key.name === "return") {
+                submitTelegramToken();
+            }
+            return;
+        }
+        if (showTelegramPairModalRef.current) {
+            if (key.name === "escape") {
+                setShowTelegramPairModal(false);
+                setTelegramPairError(null);
+                return;
+            }
+            if (key.name === "return") {
+                void submitTelegramPair();
+            }
+            return;
+        }
+        if (showConnectModalRef.current) {
+            if (key.name === "escape") {
+                setShowConnectModal(false);
+                return;
+            }
+            if (key.name === "up") {
+                setConnectModalIndex((i) => Math.max(0, i - 1));
+                return;
+            }
+            if (key.name === "down") {
+                setConnectModalIndex((i) => Math.min(CONNECT_CHANNELS.length - 1, i + 1));
+                return;
+            }
+            if (key.name === "return") {
+                const ch = CONNECT_CHANNELS[connectModalIndex];
+                if (ch?.id === "telegram")
+                    beginTelegramFromConnect();
+                return;
+            }
+            return;
+        }
+        if (showApiKeyModalRef.current) {
+            if (key.name === "escape") {
+                closeApiKeyModal();
+                return;
+            }
+            if (key.name === "return") {
+                submitApiKey();
+            }
+            return;
+        }
+        if (showSlashMenu) {
+            if (key.name === "escape") {
+                setShowSlashMenu(false);
+                setSlashSearchQuery("");
+                inputRef.current?.clear();
+                return;
+            }
+            if (key.name === "up") {
+                setSlashMenuIndex((i) => Math.max(0, i - 1));
+                return;
+            }
+            if (key.name === "down") {
+                setSlashMenuIndex((i) => Math.min(filteredSlashItems.length - 1, i + 1));
+                return;
+            }
+            if (key.name === "return") {
+                const item = filteredSlashItems[slashMenuIndex];
+                if (item)
+                    handleSlashMenuSelect(item);
+                setSlashSearchQuery("");
+                return;
+            }
+            if (key.name === "backspace") {
+                setSlashSearchQuery((q) => q.slice(0, -1));
+                setSlashMenuIndex(0);
+                return;
+            }
+            if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+                setSlashSearchQuery((q) => q + key.sequence);
+                setSlashMenuIndex(0);
+                return;
+            }
+            return;
+        }
+        if (showModelPicker) {
+            if (key.name === "escape") {
+                setShowModelPicker(false);
+                setModelSearchQuery("");
+                return;
+            }
+            if (key.name === "up") {
+                setModelPickerIndex((i) => Math.max(0, i - 1));
+                return;
+            }
+            if (key.name === "down") {
+                setModelPickerIndex((i) => Math.min(filteredModelIds.length - 1, i + 1));
+                return;
+            }
+            if (key.name === "return") {
+                const sel = filteredModelIds[modelPickerIndex];
+                if (sel) {
+                    agent.setModel(sel);
+                    setModel(sel);
+                    saveProjectSettings({ model: sel });
+                    saveUserSettings({ defaultModel: sel });
+                }
+                setShowModelPicker(false);
+                setModelSearchQuery("");
+                return;
+            }
+            if (key.name === "backspace") {
+                setModelSearchQuery((q) => q.slice(0, -1));
+                setModelPickerIndex(0);
+                return;
+            }
+            if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+                setModelSearchQuery((q) => q + key.sequence);
+                setModelPickerIndex(0);
+                return;
+            }
+            return;
+        }
+        if (!hasApiKeyRef.current && shouldOpenApiKeyModalForKey(key)) {
+            openApiKeyModal();
+            return;
+        }
+        if (isProcessing && key.name === "escape") {
+            invalidateActiveRun();
+            if (queuedMessagesRef.current.length > 0) {
+                queuedMessagesRef.current = [];
+                setQueuedMessages([]);
+            }
+            else {
+                agent.abort();
+            }
+            return;
+        }
+        if (key.sequence === "/" && !isProcessing) {
+            const text = inputRef.current?.plainText || "";
+            if (!text.trim()) {
+                setShowSlashMenu(true);
+                setSlashMenuIndex(0);
+                setSlashSearchQuery("");
+                return;
+            }
+        }
+        if (key.name === "c" && key.ctrl && key.shift) {
+            if (copyTuiSelectionToHost()) {
+                key.preventDefault();
+                key.stopPropagation();
+            }
+            return;
+        }
+        if (key.name === "y" && key.ctrl && copyTuiSelectionToHost()) {
+            key.preventDefault();
+            key.stopPropagation();
+            return;
+        }
+        // ⌘C: Kitty / iTerm report Command as `super`; some setups use `meta` instead.
+        if (key.name === "c" && !key.ctrl && (key.meta || key.super)) {
+            if (copyTuiSelectionToHost()) {
+                key.preventDefault();
+                key.stopPropagation();
+                return;
+            }
+        }
+        if (key.name === "c" && key.ctrl) {
+            if (copyTuiSelectionToHost()) {
+                key.preventDefault();
+                key.stopPropagation();
+                return;
+            }
+            const text = inputRef.current?.plainText || "";
+            if (text.trim()) {
+                inputRef.current?.clear();
+                setPasteBlocks([]);
+            }
+            else {
+                handleExit();
+            }
+            return;
+        }
+        if (key.name === "tab" && !isProcessing) {
+            cycleMode();
+            return;
+        }
+    }, [
+        agent,
+        beginTelegramFromConnect,
+        closeApiKeyModal,
+        connectModalIndex,
+        cycleMode,
+        dismissPlan,
+        filteredModelIds,
+        filteredSlashItems,
+        handleExit,
+        handlePlanSelect,
+        handleSlashMenuSelect,
+        invalidateActiveRun,
+        isPlanConfirmTab,
+        isProcessing,
+        isSinglePlan,
+        modelPickerIndex,
+        openApiKeyModal,
+        submitTelegramPair,
+        submitTelegramToken,
+        planQuestions,
+        planTabCount,
+        pqs,
+        showModelPicker,
+        showPlanPanel,
+        showSlashMenu,
+        slashMenuIndex,
+        submitApiKey,
+        submitPlanAnswers,
+        copyTuiSelectionToHost,
+    ]);
+    useKeyboard(handleKey);
+    const handlePaste = useCallback((event) => {
+        if (!hasApiKeyRef.current) {
+            event.preventDefault();
+            openApiKeyModal();
+            return;
+        }
+        const text = decodePasteBytes(event.bytes);
+        const trimmed = text.trim();
+        const imageExts = /\.(png|jpe?g|gif|webp|svg|bmp|ico|tiff?)$/i;
+        if (imageExts.test(trimmed) && !trimmed.includes("\n")) {
+            event.preventDefault();
+            const id = ++pasteCounterRef.current;
+            const imgNum = ++imageCounterRef.current;
+            setPasteBlocks((prev) => [...prev, { id, content: trimmed, lines: 1, isImage: true }]);
+            inputRef.current?.insertText(`[Image ${imgNum}]`);
+            return;
+        }
+        const lineCount = text.split("\n").length;
+        if (lineCount < 2)
+            return;
+        event.preventDefault();
+        const id = ++pasteCounterRef.current;
+        setPasteBlocks((prev) => [...prev, { id, content: text, lines: lineCount }]);
+        inputRef.current?.insertText(`[Pasted ~${lineCount} lines]`);
+    }, [openApiKeyModal]);
+    const handleSubmit = useCallback(() => {
+        const raw = inputRef.current?.plainText || "";
+        if (!raw.trim() && pasteBlocks.length === 0) {
+            if (queuedMessagesRef.current.length > 0 && isProcessingRef.current) {
+                interruptedRunIdRef.current = activeRunIdRef.current;
+                setStreamContent("");
+                setStreamReasoning("");
+                setActiveToolCalls([]);
+                setActiveSubagent(null);
+                agent.abort();
+            }
+            return;
+        }
+        inputRef.current?.clear();
+        let message = raw;
+        const blocks = [...pasteBlocks];
+        let imgIdx = 0;
+        setPasteBlocks([]);
+        for (const block of blocks) {
+            if (block.isImage) {
+                imgIdx++;
+                message = message.replace(`[Image ${imgIdx}]`, block.content);
+            }
+            else {
+                message = message.replace(`[Pasted ~${block.lines} lines]`, block.content);
+            }
+        }
+        if (!message.trim())
+            return;
+        if (!hasApiKeyRef.current) {
+            openApiKeyModal();
+            return;
+        }
+        if (handleCommand(message))
+            return;
+        if (isProcessingRef.current) {
+            queuedMessagesRef.current.push(message.trim());
+            setQueuedMessages([...queuedMessagesRef.current]);
+            setTimeout(scrollToBottom, 10);
+            return;
+        }
+        processMessage(message);
+    }, [agent, handleCommand, openApiKeyModal, processMessage, pasteBlocks, scrollToBottom]);
+    const hasMessages = messages.length > 0 || streamContent || isProcessing;
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: OpenCode-style copy-on-mouse-up on root surface
+    _jsxs("box", { width: width, height: height, backgroundColor: t.background, flexDirection: "column", onMouseUp: handleRootMouseUp, children: [copyFlashId > 0 ? _jsx(CopyFlashBanner, { t: t, width: width }) : null, hasMessages ? (_jsxs("box", { flexGrow: 1, paddingBottom: 1, paddingTop: 1, paddingLeft: 2, paddingRight: 2, gap: 1, children: [_jsx(SessionHeader, { t: t, modeInfo: modeInfo, sessionTitle: sessionTitle, sessionId: sessionId }), _jsxs("scrollbox", { ref: scrollRef, flexGrow: 1, stickyScroll: true, stickyStart: "bottom", children: [messages.map((msg, i) => (
+                            // biome-ignore lint/suspicious/noArrayIndexKey: append-only message list without stable IDs
+                            _jsx(MessageView, { entry: msg, index: i, t: t, modeColor: modeInfo.color }, i))), activeToolCalls.map((tc) => tc.function.name === "task" ? (_jsx(SubagentTaskLine, { t: t, label: toolArgs(tc) || "Working", pending: true }, tc.id)) : tc.function.name === "delegate" ? (_jsx(DelegationTaskLine, { t: t, label: toolArgs(tc) || "Background research", pending: true, id: undefined }, tc.id)) : (_jsx(InlineTool, { t: t, pending: true, children: toolLabel(tc) }, tc.id))), activeSubagent && _jsx(SubagentActivity, { t: t, status: activeSubagent }), streamContent && (_jsx("box", { paddingLeft: 3, marginTop: 1, flexShrink: 0, children: _jsx(Markdown, { content: streamContent, t: t }) })), isProcessing && !streamContent && activeToolCalls.length === 0 && (_jsx(ShimmerText, { t: t, text: "Planning next moves" })), showPlanPanel && _jsx(PlanQuestionsPanel, { t: t, questions: planQuestions, state: pqs })] }), _jsx("box", { flexShrink: 0, children: _jsx(PromptBox, { t: t, inputRef: inputRef, isProcessing: isProcessing, showModelPicker: showModelPicker, showSlashMenu: showSlashMenu, showPlanQuestions: showPlanPanel, showApiKeyModal: showApiKeyModal, blockPrompt: blockPrompt, onSubmit: handleSubmit, onPaste: handlePaste, pasteBlocks: pasteBlocks, modeInfo: modeInfo, model: model, modelInfo: modelInfo, contextStats: contextStats, queuedCount: queuedMessages.length, queuedMessages: queuedMessages }) })] })) : (
+            /* ── Home ───────────────────────────────────────── */
+            _jsxs(_Fragment, { children: [_jsxs("box", { flexGrow: 1, alignItems: "center", paddingLeft: 2, paddingRight: 2, children: [_jsx("box", { flexGrow: 1, minHeight: 0 }), _jsx("box", { flexShrink: 0, alignItems: "center", children: _jsx(HeroLogo, { t: t }) }), _jsx("box", { height: 1, minHeight: 0, flexShrink: 1 }), _jsx("box", { width: "100%", maxWidth: 75, flexShrink: 0, children: _jsx(PromptBox, { t: t, inputRef: inputRef, isProcessing: isProcessing, showModelPicker: showModelPicker, showSlashMenu: showSlashMenu, showPlanQuestions: showPlanPanel, showApiKeyModal: showApiKeyModal, blockPrompt: blockPrompt, onSubmit: handleSubmit, onPaste: handlePaste, pasteBlocks: pasteBlocks, modeInfo: modeInfo, model: model, modelInfo: modelInfo, contextStats: contextStats, placeholder: "What are we building?" }) }), _jsx("box", { height: 2, minHeight: 0, flexShrink: 1 }), _jsx("box", { flexGrow: 1, minHeight: 0 })] }), _jsxs("box", { paddingLeft: 2, paddingRight: 2, paddingBottom: 1, flexDirection: "row", flexShrink: 0, children: [_jsx("text", { fg: t.textDim, children: agent.getCwd().replace(os.homedir(), "~") }), _jsx("box", { flexGrow: 1 }), _jsx("text", { fg: t.textDim, children: "v1.0.0" })] })] })), showApiKeyModal && (_jsx(ApiKeyModal, { t: t, width: width, height: height, inputRef: apiKeyInputRef, error: apiKeyError, onSubmit: submitApiKey })), showSlashMenu && (_jsx(SlashMenuModal, { t: t, selectedIndex: slashMenuIndex, width: width, height: height, searchQuery: slashSearchQuery, filteredItems: filteredSlashItems })), showModelPicker && (_jsx(ModelPickerModal, { t: t, currentModel: model, selectedIndex: modelPickerIndex, width: width, height: height, searchQuery: modelSearchQuery, filteredModels: filteredModels })), showConnectModal && (_jsx(ConnectModal, { t: t, width: width, height: height, selectedIndex: connectModalIndex, channels: CONNECT_CHANNELS })), showTelegramTokenModal && (_jsx(TelegramTokenModal, { t: t, width: width, height: height, inputRef: telegramTokenInputRef, error: telegramTokenError, onSubmit: submitTelegramToken })), showTelegramPairModal && (_jsx(TelegramPairModal, { t: t, width: width, height: height, inputRef: telegramPairInputRef, error: telegramPairError, onSubmit: () => void submitTelegramPair() }))] }));
+}
+/* ── Session Header ──────────────────────────────────────────── */
+function SessionHeader({ t, modeInfo, sessionTitle, sessionId, }) {
+    return (_jsx("box", { flexShrink: 0, children: _jsx("box", { paddingTop: 1, paddingBottom: 1, paddingLeft: 2, paddingRight: 1, border: ["left"], customBorderChars: SPLIT, borderColor: t.border, backgroundColor: t.backgroundPanel, children: _jsxs("box", { flexDirection: "row", width: "100%", children: [_jsxs("text", { children: [_jsx("span", { style: { fg: modeInfo.color }, children: _jsx("b", { children: modeInfo.label }) }), sessionTitle ? (_jsx("span", { style: { fg: t.text }, children: _jsxs("b", { children: [": ", sessionTitle] }) })) : null] }), _jsx("box", { flexGrow: 1 }), sessionId ? _jsx("text", { fg: t.textDim, children: sessionId }) : null] }) }) }));
+}
+/* ── Prompt Box ──────────────────────────────────────────────── */
+const TEXTAREA_KEYBINDINGS = [
+    { name: "return", action: "submit" },
+    { name: "return", shift: true, action: "newline" },
+];
+function formatTokenCount(tokens) {
+    if (tokens >= 1_000_000)
+        return `${(tokens / 1_000_000).toFixed(1).replace(/\.0$/, "")}M`;
+    if (tokens >= 1_000)
+        return `${Math.round(tokens / 1_000)}K`;
+    return String(tokens);
+}
+function ContextMeter({ t, stats }) {
+    return (_jsxs("text", { children: [_jsx("span", { style: { fg: t.textMuted }, children: `${Math.round(stats.ratioRemaining * 100)}%` }), _jsx("span", { style: { fg: t.textDim }, children: ` ${formatTokenCount(stats.remainingTokens)}` })] }));
+}
+function PromptBox({ t, inputRef, isProcessing, showModelPicker, showSlashMenu, showPlanQuestions, showApiKeyModal, blockPrompt, onSubmit, onPaste, pasteBlocks: _pasteBlocks, modeInfo, model, modelInfo, contextStats, placeholder, queuedCount, queuedMessages, }) {
+    const hasQueue = (queuedMessages?.length ?? 0) > 0;
+    return (_jsxs("box", { backgroundColor: t.backgroundPanel, children: [_jsxs("box", { children: [hasQueue && (_jsxs("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, backgroundColor: t.queueBg, flexShrink: 0, children: [queuedMessages.map((msg, i) => (
+                            // biome-ignore lint/suspicious/noArrayIndexKey: append-only queue of plain strings
+                            _jsxs("text", { fg: t.text, children: ["→ ", msg] }, i))), _jsx("box", { height: 1 }), _jsxs("text", { children: [_jsx("span", { style: { fg: t.primary }, children: "enter " }), _jsx("span", { style: { fg: t.textMuted }, children: "send now" }), _jsx("span", { style: { fg: t.textDim }, children: " · " }), _jsx("span", { style: { fg: t.primary }, children: "↑ " }), _jsx("span", { style: { fg: t.textMuted }, children: "edit" }), _jsx("span", { style: { fg: t.textDim }, children: " · " }), _jsx("span", { style: { fg: t.primary }, children: "esc " }), _jsx("span", { style: { fg: t.textMuted }, children: "cancel" })] })] })), _jsxs("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, backgroundColor: t.backgroundElement, flexDirection: "row", gap: 2, alignItems: "flex-start", flexShrink: 0, children: [_jsx("text", { fg: modeInfo.color, children: _jsx("b", { children: modeInfo.label }) }), _jsx("box", { flexGrow: 1, children: _jsx("textarea", { ref: inputRef, focused: !showModelPicker && !showSlashMenu && !showPlanQuestions && !showApiKeyModal && !blockPrompt, placeholder: isProcessing ? "Queue a follow-up... (esc to interrupt)" : placeholder || "Message Grok...", textColor: t.text, backgroundColor: t.backgroundElement, placeholderColor: t.textMuted, minHeight: 1, maxHeight: 10, wrapMode: "word", keyBindings: TEXTAREA_KEYBINDINGS, onSubmit: onSubmit, onPaste: onPaste }) })] })] }), _jsxs("box", { flexDirection: "row", justifyContent: "space-between", alignItems: "center", paddingLeft: 2, paddingRight: 2, height: 1, flexShrink: 0, children: [_jsxs("box", { flexDirection: "row", gap: 1, alignItems: "center", height: 1, children: [_jsx("text", { fg: t.text, children: modelInfo?.name || model }), contextStats ? _jsx(ContextMeter, { t: t, stats: contextStats }) : null] }), _jsx("box", { flexDirection: "row", gap: 3, alignItems: "center", height: 1, children: isProcessing ? (_jsxs("box", { flexDirection: "row", gap: 3, children: [_jsxs("text", { fg: t.text, children: ["enter ", _jsx("span", { style: { fg: t.textMuted }, children: "queue" })] }), _jsxs("text", { fg: t.text, children: ["esc ", _jsx("span", { style: { fg: t.textMuted }, children: (queuedCount ?? 0) > 0 ? "clear queue" : "interrupt" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("text", { fg: t.text, children: ["shift+enter ", _jsx("span", { style: { fg: t.textMuted }, children: "new line" })] }), _jsxs("text", { fg: t.text, children: ["tab ", _jsx("span", { style: { fg: t.textMuted }, children: "modes" })] })] })) })] })] }));
+}
+function CopyFlashBanner({ t, width }) {
+    return (_jsx("box", { position: "absolute", left: 0, top: 1, width: width, zIndex: 500, alignItems: "center", flexShrink: 0, backgroundColor: t.background, shouldFill: false, children: _jsx("box", { height: 3, paddingLeft: 2, paddingRight: 2, backgroundColor: t.queueBg, justifyContent: "center", alignItems: "center", children: _jsxs("text", { children: [_jsx("span", { style: { fg: t.accent }, children: "✓ " }), _jsx("span", { style: { fg: t.text }, children: "Copied to clipboard" })] }) }) }));
+}
+function ApiKeyModal({ t, width, height, inputRef, error, onSubmit, }) {
+    const overlayBg = "#000000cc";
+    const panelWidth = Math.min(68, width - 6);
+    const panelHeight = 13;
+    const top = bottomAlignedModalTop(height, panelHeight);
+    return (_jsx("box", { position: "absolute", left: 0, top: 0, width: width, height: height, alignItems: "center", paddingTop: top, backgroundColor: overlayBg, children: _jsxs("box", { width: panelWidth, height: panelHeight, backgroundColor: t.backgroundPanel, paddingTop: 1, paddingBottom: 1, flexDirection: "column", children: [_jsxs("box", { flexShrink: 0, flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, children: [_jsx("text", { fg: t.primary, children: _jsx("b", { children: "Add API key" }) }), _jsx("text", { fg: t.textMuted, children: "esc" })] }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: _jsx("text", { fg: t.text, children: "Paste your xAI API key to unlock chat. You can hide this prompt with esc." }) }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: _jsx("box", { backgroundColor: t.backgroundElement, paddingLeft: 1, paddingRight: 1, width: "100%", children: _jsx("textarea", { ref: inputRef, focused: true, placeholder: "xai-...", textColor: t.text, backgroundColor: t.backgroundElement, placeholderColor: t.textMuted, minHeight: 1, maxHeight: 3, wrapMode: "word", keyBindings: TEXTAREA_KEYBINDINGS, onSubmit: onSubmit }) }) }), _jsx("box", { flexGrow: 1, minHeight: 0 }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 2, paddingBottom: 1, children: error ? (_jsx("text", { fg: t.diffRemovedFg, children: error })) : (_jsxs("text", { children: [_jsx("span", { style: { fg: t.primary }, children: "enter " }), _jsx("span", { style: { fg: t.textMuted }, children: "save key  ·  " }), _jsx("span", { style: { fg: t.primary }, children: "esc " }), _jsx("span", { style: { fg: t.textMuted }, children: "hide" })] })) })] }) }));
+}
+/* ── Messages ────────────────────────────────────────────────── */
+function MessageView({ entry, index, t, modeColor }) {
+    switch (entry.type) {
+        case "user":
+            return (_jsx("box", { border: ["left"], customBorderChars: SPLIT, borderColor: entry.modeColor || modeColor, marginTop: index === 0 ? 0 : 1, marginBottom: 1, children: _jsxs("box", { paddingTop: 1, paddingBottom: 1, paddingLeft: 2, backgroundColor: t.backgroundPanel, flexShrink: 0, flexDirection: "column", children: [entry.sourceLabel ? _jsx("text", { fg: t.textMuted, children: entry.sourceLabel }) : null, _jsx("text", { fg: t.text, children: entry.content })] }) }));
+        case "assistant":
+            return (_jsxs("box", { paddingLeft: 3, marginTop: 1, flexShrink: 0, flexDirection: "column", children: [entry.sourceLabel ? _jsx("text", { fg: t.textMuted, children: entry.sourceLabel }) : null, _jsx(Markdown, { content: entry.content, t: t })] }));
+        case "tool_call":
+            return (_jsx("box", { paddingLeft: 3, marginTop: 1, children: _jsxs("text", { children: [_jsx("span", { style: { fg: entry.modeColor || modeColor }, children: "▣ " }), _jsx("span", { style: { fg: t.textMuted }, children: entry.content.replace("▣  ", "") })] }) }));
+        case "tool_result": {
+            const name = entry.toolCall?.function.name || "tool";
+            const args = toolArgs(entry.toolCall);
+            const diff = entry.toolResult?.diff;
+            const plan = entry.toolResult?.plan;
+            if (name === "generate_plan" && plan) {
+                return _jsx(PlanView, { plan: plan, t: t });
+            }
+            if (name === "task" && entry.toolResult?.task) {
+                return _jsx(TaskResultView, { t: t, entry: entry });
+            }
+            if (name === "delegate" && entry.toolResult?.delegation) {
+                return _jsx(DelegationResultView, { t: t, entry: entry });
+            }
+            if (name === "delegation_list") {
+                return _jsx(DelegationListView, { t: t, content: entry.content });
+            }
+            if (name === "delegation_read") {
+                return _jsx(ToolTextOutputView, { t: t, label: toolLabel(entry.toolCall), content: entry.content });
+            }
+            if (name === "write_file" || name === "edit_file") {
+                const filePath = diff?.filePath || tryParseArg(entry.toolCall, "path") || args;
+                const label = name === "write_file" ? `Write ${filePath}` : `Edit ${filePath}`;
+                return (_jsxs("box", { gap: 0, children: [_jsx(InlineTool, { t: t, pending: false, children: label }), diff && _jsx(DiffView, { t: t, diff: diff })] }));
+            }
+            if (name === "bash" && entry.toolResult?.backgroundProcess) {
+                const bp = entry.toolResult.backgroundProcess;
+                return _jsx(BackgroundProcessLine, { t: t, id: bp.id, pid: bp.pid, command: bp.command });
+            }
+            if (name === "process_logs") {
+                return _jsx(ProcessLogsView, { t: t, content: entry.content });
+            }
+            if (name === "process_stop" || name === "process_list") {
+                return (_jsx(InlineTool, { t: t, pending: false, children: entry.content }));
+            }
+            if (name === "read_file")
+                return (_jsx(InlineTool, { t: t, pending: false, children: `Read ${trunc(tryParseArg(entry.toolCall, "path") || args, 60)}` }));
+            if (name === "search_web" || name === "search_x")
+                return (_jsxs(InlineTool, { t: t, pending: false, children: [name === "search_web" ? "Web" : "X", ` Search "${trunc(args, 60)}"`] }));
+            return (_jsx(InlineTool, { t: t, pending: false, children: trunc(name === "bash" ? args : `${name} ${args}`, 80) }));
+        }
+        default:
+            return _jsx("text", { fg: t.textMuted, children: entry.content });
+    }
+}
+const MAX_DIFF_ROWS = 20;
+const LINE_NUM_WIDTH = 4;
+function parsePatch(patch) {
+    const lines = patch.split("\n");
+    const rows = [];
+    let oldLine = 0;
+    let newLine = 0;
+    let prevOldEnd = 0;
+    for (const line of lines) {
+        const hunkMatch = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+        if (hunkMatch) {
+            oldLine = parseInt(hunkMatch[1], 10);
+            newLine = parseInt(hunkMatch[2], 10);
+            const skipped = oldLine - prevOldEnd - 1;
+            if (skipped > 0) {
+                rows.push({ kind: "separator", count: skipped });
+            }
+            continue;
+        }
+        if (line.startsWith("---") || line.startsWith("+++") || line.startsWith("\\"))
+            continue;
+        if (line.startsWith("Index:") || line.startsWith("===="))
+            continue;
+        if (line.startsWith("-")) {
+            rows.push({ kind: "removed", oldNum: oldLine, text: line.slice(1) });
+            oldLine++;
+            prevOldEnd = oldLine - 1;
+        }
+        else if (line.startsWith("+")) {
+            rows.push({ kind: "added", newNum: newLine, text: line.slice(1) });
+            newLine++;
+        }
+        else if (line.length > 0 || (oldLine > 0 && newLine > 0)) {
+            const content = line.startsWith(" ") ? line.slice(1) : line;
+            rows.push({ kind: "context", oldNum: oldLine, newNum: newLine, text: content });
+            oldLine++;
+            newLine++;
+            prevOldEnd = oldLine - 1;
+        }
+    }
+    return rows;
+}
+function DiffView({ t, diff }) {
+    const rows = parsePatch(diff.patch);
+    if (rows.length === 0)
+        return null;
+    const truncated = rows.length > MAX_DIFF_ROWS;
+    const visible = truncated ? rows.slice(0, MAX_DIFF_ROWS) : rows;
+    const pad = (n) => n !== undefined ? String(n).padStart(LINE_NUM_WIDTH) : " ".repeat(LINE_NUM_WIDTH);
+    return (_jsx("box", { paddingLeft: 5, marginTop: 0, flexShrink: 0, children: _jsxs("box", { flexDirection: "column", children: [_jsx("box", { backgroundColor: t.diffHeader, paddingLeft: 1, paddingRight: 1, children: _jsxs("text", { children: [_jsx("span", { style: { fg: t.diffHeaderFg }, children: diff.filePath }), _jsx("span", { style: { fg: t.textDim }, children: "  " }), _jsx("span", { style: { fg: t.diffRemovedFg }, children: `-${diff.removals}` }), _jsx("span", { style: { fg: t.textDim }, children: " " }), _jsx("span", { style: { fg: t.diffAddedFg }, children: `+${diff.additions}` })] }) }), visible.map((row, i) => {
+                    if (row.kind === "separator") {
+                        return (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: separator rows lack unique identifiers
+                        _jsx("box", { backgroundColor: t.diffSeparator, paddingLeft: 1, children: _jsxs("text", { fg: t.diffSeparatorFg, children: ["⌃  ", row.count, " unmodified lines"] }) }, `sep-${i}`));
+                    }
+                    if (row.kind === "removed") {
+                        return (_jsxs("box", { backgroundColor: t.diffRemoved, flexDirection: "row", children: [_jsx("text", { fg: t.diffRemovedLineNum, children: pad(row.oldNum) }), _jsx("text", { fg: t.diffRemovedFg, children: ` ${row.text}` })] }, `rm-${row.oldNum}`));
+                    }
+                    if (row.kind === "added") {
+                        return (_jsxs("box", { backgroundColor: t.diffAdded, flexDirection: "row", children: [_jsx("text", { fg: t.diffAddedLineNum, children: pad(row.newNum) }), _jsx("text", { fg: t.diffAddedFg, children: ` ${row.text}` })] }, `add-${row.newNum}`));
+                    }
+                    return (_jsxs("box", { backgroundColor: t.diffContext, flexDirection: "row", children: [_jsx("text", { fg: t.diffLineNumber, children: pad(row.oldNum) }), _jsx("text", { fg: t.diffContextFg, children: ` ${row.text}` })] }, `ctx-${row.oldNum}`));
+                }), truncated && (_jsx("box", { backgroundColor: t.diffSeparator, paddingLeft: 1, children: _jsxs("text", { fg: t.diffSeparatorFg, children: ["⌃  ", rows.length - MAX_DIFF_ROWS, " more lines"] }) }))] }) }));
+}
+function ShimmerText({ t, text }) {
+    return (_jsx("box", { paddingLeft: 3, children: _jsxs("text", { children: [_jsx("span", { style: { fg: t.textMuted }, children: _jsx(LoadingSpinner, {}) }), _jsxs("span", { style: { fg: t.textMuted }, children: [" ", text] })] }) }));
+}
+function InlineTool({ t, pending: _pending, children }) {
+    return (_jsx("box", { paddingLeft: 3, children: _jsxs("text", { fg: t.textMuted, children: ["→ ", children] }) }));
+}
+function SubagentTaskLine({ t, label, pending }) {
+    const displayLabel = compactTaskLabel(label);
+    return (_jsx("box", { paddingLeft: 3, children: _jsxs("text", { children: [pending ? (_jsx("span", { style: { fg: t.subagentAccent }, children: _jsx(LoadingSpinner, {}) })) : null, pending ? " " : "", _jsx("span", { style: { fg: t.subagentAccent }, children: _jsx("b", { children: `Sub-agent: ${displayLabel}` }) })] }) }));
+}
+function DelegationTaskLine({ t, label, pending, id }) {
+    const displayLabel = compactTaskLabel(label);
+    return (_jsx("box", { paddingLeft: 3, children: _jsxs("text", { children: [pending ? (_jsx("span", { style: { fg: t.subagentAccent }, children: _jsx(LoadingSpinner, {}) })) : (_jsx("span", { style: { fg: t.subagentAccent }, children: "◆" })), " ", _jsx("span", { style: { fg: t.subagentAccent }, children: _jsx("b", { children: "Background" }) }), _jsxs("span", { style: { fg: t.textMuted }, children: [" — ", displayLabel] }), id ? _jsx("span", { style: { fg: t.textDim }, children: `  (${id})` }) : null] }) }));
+}
+function LoadingSpinner() {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => setFrame((n) => (n + 1) % LOADING_SPINNER_FRAMES.length), 120);
+        return () => clearInterval(id);
+    }, []);
+    return _jsx(_Fragment, { children: LOADING_SPINNER_FRAMES[frame] });
+}
+function SubagentActivity({ t, status }) {
+    return (_jsx("box", { paddingLeft: 5, children: _jsxs("text", { fg: t.textMuted, children: ["→ ", truncateLine(status.detail, 100)] }) }));
+}
+function TaskResultView({ t, entry }) {
+    const task = entry.toolResult?.task;
+    if (!task)
+        return null;
+    return (_jsxs("box", { gap: 0, children: [_jsx(SubagentTaskLine, { t: t, label: task.description, pending: false }), _jsx("box", { paddingLeft: 5, children: _jsxs("text", { fg: t.text, children: [task.agent, ": ", truncateLine(task.summary, 90)] }) })] }));
+}
+function DelegationResultView({ t, entry }) {
+    const delegation = entry.toolResult?.delegation;
+    if (!delegation)
+        return null;
+    return _jsx(DelegationTaskLine, { t: t, label: delegation.description, pending: false, id: delegation.id });
+}
+function DelegationListView({ t, content }) {
+    const items = parseDelegationList(content);
+    if (items.length === 0) {
+        return (_jsx(InlineTool, { t: t, pending: false, children: "No background delegations" }));
+    }
+    return (_jsx("box", { paddingLeft: 3, gap: 0, children: items.map((item) => {
+            const statusColor = item.status === "complete"
+                ? "#8adf8a"
+                : item.status === "running"
+                    ? t.subagentAccent
+                    : item.status === "error"
+                        ? "#df8a8a"
+                        : t.textMuted;
+            return (_jsx("box", { children: _jsxs("text", { children: [_jsx("span", { style: { fg: statusColor }, children: "◆ " }), _jsx("span", { style: { fg: t.text }, children: item.id }), _jsx("span", { style: { fg: statusColor }, children: ` ${item.status}` }), _jsxs("span", { style: { fg: t.textMuted }, children: [" — ", truncateLine(item.label, 60)] })] }) }, item.id));
+        }) }));
+}
+function parseDelegationList(content) {
+    const items = [];
+    for (const line of content.split("\n")) {
+        const match = line.match(/`([^`]+)`\s+\[(\w+)]\s+(.*)/);
+        if (match) {
+            items.push({ id: match[1], status: match[2], label: match[3].trim() });
+        }
+    }
+    return items;
+}
+function BackgroundProcessLine({ t, id, pid, command }) {
+    return (_jsx("box", { paddingLeft: 3, children: _jsxs("text", { children: [_jsx("span", { style: { fg: t.subagentAccent }, children: "◆ " }), _jsx("span", { style: { fg: t.subagentAccent }, children: _jsx("b", { children: "Background process" }) }), _jsx("span", { style: { fg: t.textMuted }, children: ` id:${id} pid:${pid}` }), _jsxs("span", { style: { fg: t.textDim }, children: [" — ", truncateLine(command, 60)] })] }) }));
+}
+function ProcessLogsView({ t, content }) {
+    const lines = content.split("\n");
+    const header = lines[0] || "";
+    const body = lines.slice(1).join("\n").trim();
+    return (_jsxs("box", { paddingLeft: 3, gap: 0, children: [_jsxs("text", { fg: t.textMuted, children: ["→ ", header] }), body ? (_jsx("box", { paddingLeft: 2, marginTop: 0, children: _jsx("box", { backgroundColor: t.mdCodeBlockBg, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: t.mdCodeBlockFg, children: truncateBlock(body, 15) }) }) })) : null] }));
+}
+function truncateBlock(text, maxLines) {
+    const lines = text.split("\n");
+    if (lines.length <= maxLines)
+        return text;
+    return [...lines.slice(0, maxLines), `… ${lines.length - maxLines} more lines`].join("\n");
+}
+function ToolTextOutputView({ t, label, content }) {
+    return (_jsxs("box", { gap: 0, children: [_jsx(InlineTool, { t: t, pending: false, children: label }), _jsx("box", { paddingLeft: 5, marginTop: 1, flexShrink: 0, children: _jsx(Markdown, { content: content, t: t }) })] }));
+}
+/* ── Slash Menu ──────────────────────────────────────────────── */
+function bottomAlignedModalTop(height, panelHeight) {
+    return Math.max(2, Math.floor((height - panelHeight) / 2));
+}
+function SlashMenuModal({ t, selectedIndex, width, height, searchQuery, filteredItems, }) {
+    const listRef = useRef(null);
+    useEffect(() => {
+        const item = filteredItems[selectedIndex];
+        if (item)
+            listRef.current?.scrollChildIntoView(`slash-${item.id}`);
+    }, [selectedIndex, filteredItems]);
+    const itemCount = Math.max(filteredItems.length, 1);
+    const contentHeight = itemCount + 5;
+    const maxH = Math.floor(height * 0.6);
+    const panelHeight = Math.min(contentHeight, maxH);
+    const top = bottomAlignedModalTop(height, panelHeight);
+    const overlayBg = "#000000cc";
+    return (_jsx("box", { position: "absolute", left: 0, top: 0, width: width, height: height, alignItems: "center", paddingTop: top, backgroundColor: overlayBg, children: _jsxs("box", { width: Math.min(50, width - 6), height: panelHeight, backgroundColor: t.backgroundPanel, paddingTop: 1, paddingBottom: 1, flexDirection: "column", children: [_jsxs("box", { flexShrink: 0, flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, children: [_jsx("text", { fg: t.primary, children: _jsx("b", { children: "Commands" }) }), _jsx("text", { fg: t.textMuted, children: "esc" })] }), _jsx("box", { flexShrink: 0, paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: _jsx("text", { fg: t.text, children: searchQuery || _jsx("span", { style: { fg: t.textMuted }, children: "Search..." }) }) }), _jsxs("scrollbox", { ref: listRef, flexGrow: 1, minHeight: 0, children: [filteredItems.map((item, idx) => (_jsx("box", { id: `slash-${item.id}`, backgroundColor: idx === selectedIndex ? t.selectedBg : undefined, paddingLeft: 2, paddingRight: 2, children: _jsxs("box", { flexDirection: "row", justifyContent: "space-between", children: [_jsxs("text", { fg: idx === selectedIndex ? t.selected : t.text, children: ["/", item.label] }), _jsx("text", { fg: t.textMuted, children: item.description })] }) }, item.id))), filteredItems.length === 0 && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.textMuted, children: "No commands match your search" }) }))] })] }) }));
+}
+function ConnectModal({ t, width, height, selectedIndex, channels, }) {
+    const listRef = useRef(null);
+    useEffect(() => {
+        const ch = channels[selectedIndex];
+        if (ch)
+            listRef.current?.scrollChildIntoView(`connect-${ch.id}`);
+    }, [selectedIndex, channels]);
+    const panelHeight = Math.min(channels.length + 9, Math.floor(height * 0.5));
+    const top = bottomAlignedModalTop(height, panelHeight);
+    const overlayBg = "#000000cc";
+    return (_jsx("box", { position: "absolute", left: 0, top: 0, width: width, height: height, alignItems: "center", paddingTop: top, backgroundColor: overlayBg, children: _jsxs("box", { width: Math.min(56, width - 6), height: panelHeight, backgroundColor: t.backgroundPanel, paddingTop: 1, paddingBottom: 1, flexDirection: "column", children: [_jsxs("box", { flexShrink: 0, flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, children: [_jsx("text", { fg: t.primary, children: _jsx("b", { children: "Connect" }) }), _jsx("text", { fg: t.textMuted, children: "esc" })] }), _jsx("box", { flexShrink: 0, paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: _jsx("text", { fg: t.textMuted, children: "Choose a channel" }) }), _jsx("scrollbox", { ref: listRef, flexGrow: 1, minHeight: 0, children: channels.map((ch, idx) => (_jsx("box", { id: `connect-${ch.id}`, backgroundColor: idx === selectedIndex ? t.selectedBg : undefined, paddingLeft: 2, paddingRight: 2, children: _jsxs("box", { flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: idx === selectedIndex ? t.selected : t.text, children: ch.label }), _jsx("text", { fg: t.textMuted, children: ch.description })] }) }, ch.id))) }), _jsx("box", { flexShrink: 0, paddingLeft: 2, paddingRight: 2, paddingTop: 2, paddingBottom: 1, children: _jsxs("text", { children: [_jsx("span", { style: { fg: t.primary }, children: "enter " }), _jsx("span", { style: { fg: t.textMuted }, children: "select  ·  " }), _jsx("span", { style: { fg: t.primary }, children: "↑↓ " }), _jsx("span", { style: { fg: t.textMuted }, children: "navigate  ·  " }), _jsx("span", { style: { fg: t.primary }, children: "esc " }), _jsx("span", { style: { fg: t.textMuted }, children: "close" })] }) })] }) }));
+}
+function TelegramTokenModal({ t, width, height, inputRef, error, onSubmit, }) {
+    const overlayBg = "#000000cc";
+    const panelWidth = Math.min(68, width - 6);
+    const panelHeight = 14;
+    const top = bottomAlignedModalTop(height, panelHeight);
+    return (_jsx("box", { position: "absolute", left: 0, top: 0, width: width, height: height, alignItems: "center", paddingTop: top, backgroundColor: overlayBg, children: _jsxs("box", { width: panelWidth, height: panelHeight, backgroundColor: t.backgroundPanel, paddingTop: 1, paddingBottom: 1, flexDirection: "column", children: [_jsxs("box", { flexShrink: 0, flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, children: [_jsx("text", { fg: t.primary, children: _jsx("b", { children: "Telegram bot token" }) }), _jsx("text", { fg: t.textMuted, children: "esc" })] }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: _jsx("text", { fg: t.text, children: "From @BotFather: /newbot, then paste the token here. Stored in ~/.grok/user-settings.json." }) }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: _jsx("box", { backgroundColor: t.backgroundElement, paddingLeft: 1, paddingRight: 1, width: "100%", children: _jsx("textarea", { ref: inputRef, focused: true, placeholder: "123456:ABC...", textColor: t.text, backgroundColor: t.backgroundElement, placeholderColor: t.textMuted, minHeight: 1, maxHeight: 3, wrapMode: "word", keyBindings: TEXTAREA_KEYBINDINGS, onSubmit: onSubmit }) }) }), _jsx("box", { flexGrow: 1, minHeight: 0 }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 2, paddingBottom: 1, children: error ? (_jsx("text", { fg: t.diffRemovedFg, children: error })) : (_jsxs("text", { children: [_jsx("span", { style: { fg: t.primary }, children: "enter " }), _jsx("span", { style: { fg: t.textMuted }, children: "save token  ·  " }), _jsx("span", { style: { fg: t.primary }, children: "esc " }), _jsx("span", { style: { fg: t.textMuted }, children: "close" })] })) })] }) }));
+}
+function TelegramPairModal({ t, width, height, inputRef, error, onSubmit, }) {
+    const overlayBg = "#000000cc";
+    const panelWidth = Math.min(68, width - 6);
+    const panelHeight = 13;
+    const top = bottomAlignedModalTop(height, panelHeight);
+    return (_jsx("box", { position: "absolute", left: 0, top: 0, width: width, height: height, alignItems: "center", paddingTop: top, backgroundColor: overlayBg, children: _jsxs("box", { width: panelWidth, height: panelHeight, backgroundColor: t.backgroundPanel, paddingTop: 1, paddingBottom: 1, flexDirection: "column", children: [_jsxs("box", { flexShrink: 0, flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, children: [_jsx("text", { fg: t.primary, children: _jsx("b", { children: "Pairing code" }) }), _jsx("text", { fg: t.textMuted, children: "esc" })] }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: _jsx("text", { fg: t.text, children: "DM your bot with /pair, then paste the 6-character code." }) }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: _jsx("box", { backgroundColor: t.backgroundElement, paddingLeft: 1, paddingRight: 1, width: "100%", children: _jsx("textarea", { ref: inputRef, focused: true, placeholder: "ABC123", textColor: t.text, backgroundColor: t.backgroundElement, placeholderColor: t.textMuted, minHeight: 1, maxHeight: 2, wrapMode: "word", keyBindings: TEXTAREA_KEYBINDINGS, onSubmit: onSubmit }) }) }), _jsx("box", { flexGrow: 1, minHeight: 0 }), _jsx("box", { paddingLeft: 2, paddingRight: 2, paddingTop: 2, paddingBottom: 1, children: error ? (_jsx("text", { fg: t.diffRemovedFg, children: error })) : (_jsxs("text", { children: [_jsx("span", { style: { fg: t.primary }, children: "enter " }), _jsx("span", { style: { fg: t.textMuted }, children: "approve pairing  ·  " }), _jsx("span", { style: { fg: t.primary }, children: "esc " }), _jsx("span", { style: { fg: t.textMuted }, children: "close" })] })) })] }) }));
+}
+/* ── Model Picker ────────────────────────────────────────────── */
+function ModelPickerModal({ t, currentModel, selectedIndex, width, height, searchQuery, filteredModels, }) {
+    const listRef = useRef(null);
+    useEffect(() => {
+        const m = filteredModels[selectedIndex];
+        if (m)
+            listRef.current?.scrollChildIntoView(`model-${m.id}`);
+    }, [selectedIndex, filteredModels]);
+    const itemCount = Math.max(filteredModels.length, 1);
+    const contentHeight = itemCount + 5;
+    const maxH = Math.floor(height * 0.6);
+    const panelHeight = Math.min(contentHeight, maxH);
+    const top = bottomAlignedModalTop(height, panelHeight);
+    const overlayBg = "#000000cc";
+    return (_jsx("box", { position: "absolute", left: 0, top: 0, width: width, height: height, alignItems: "center", paddingTop: top, backgroundColor: overlayBg, children: _jsxs("box", { width: Math.min(60, width - 6), height: panelHeight, backgroundColor: t.backgroundPanel, paddingTop: 1, paddingBottom: 1, flexDirection: "column", children: [_jsxs("box", { flexShrink: 0, flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, children: [_jsx("text", { fg: t.primary, children: _jsx("b", { children: "Select model" }) }), _jsx("text", { fg: t.textMuted, children: "esc" })] }), _jsx("box", { flexShrink: 0, paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: _jsx("text", { fg: t.text, children: searchQuery || _jsx("span", { style: { fg: t.textMuted }, children: "Search..." }) }) }), _jsxs("scrollbox", { ref: listRef, flexGrow: 1, minHeight: 0, children: [filteredModels.map((m, idx) => {
+                            const selected = idx === selectedIndex;
+                            const current = m.id === currentModel;
+                            return (_jsx("box", { id: `model-${m.id}`, backgroundColor: selected ? t.selectedBg : undefined, paddingLeft: 2, paddingRight: 2, children: _jsx("text", { fg: current ? t.accent : selected ? t.selected : t.text, children: m.name }) }, m.id));
+                        }), filteredModels.length === 0 && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.textMuted, children: "No models match your search" }) }))] })] }) }));
+}
+/* ── Helpers ──────────────────────────────────────────────────── */
+function toolArgs(tc) {
+    if (!tc)
+        return "";
+    try {
+        const a = JSON.parse(tc.function.arguments);
+        if (tc.function.name === "bash")
+            return a.command || "";
+        if (tc.function.name === "read_file" || tc.function.name === "write_file" || tc.function.name === "edit_file")
+            return a.path || "";
+        if (tc.function.name === "task")
+            return a.description || "";
+        if (tc.function.name === "delegate")
+            return a.description || "";
+        if (tc.function.name === "delegation_read")
+            return a.id || "";
+        if (tc.function.name === "process_logs" || tc.function.name === "process_stop")
+            return a.id != null ? String(a.id) : "";
+        return a.query || "";
+    }
+    catch {
+        return "";
+    }
+}
+function tryParseArg(tc, key) {
+    if (!tc)
+        return "";
+    try {
+        return JSON.parse(tc.function.arguments)[key] || "";
+    }
+    catch {
+        return "";
+    }
+}
+function toolLabel(tc) {
+    const args = toolArgs(tc);
+    if (tc.function.name === "bash") {
+        try {
+            const parsed = JSON.parse(tc.function.arguments);
+            if (parsed.background)
+                return `Background: ${trunc(args || "Starting process...", 70)}`;
+        }
+        catch {
+            /* */
+        }
+        return trunc(args || "Running command...", 80);
+    }
+    if (tc.function.name === "read_file")
+        return `Read ${trunc(args, 60)}`;
+    if (tc.function.name === "write_file")
+        return `Write ${trunc(args, 60)}`;
+    if (tc.function.name === "edit_file")
+        return `Edit ${trunc(args, 60)}`;
+    if (tc.function.name === "search_web")
+        return `Web Search "${trunc(args, 60)}"`;
+    if (tc.function.name === "search_x")
+        return `X Search "${trunc(args, 60)}"`;
+    if (tc.function.name === "task")
+        return `Task ${trunc(args, 60)}`;
+    if (tc.function.name === "delegate")
+        return `Background ${trunc(args, 60)}`;
+    if (tc.function.name === "delegation_read")
+        return `Read delegation ${trunc(args, 60)}`;
+    if (tc.function.name === "delegation_list")
+        return "List delegations";
+    if (tc.function.name === "process_logs")
+        return `Logs for process ${args}`;
+    if (tc.function.name === "process_stop")
+        return `Stop process ${args}`;
+    if (tc.function.name === "process_list")
+        return "List processes";
+    if (tc.function.name === "generate_plan")
+        return "Generating plan...";
+    return trunc(`${tc.function.name} ${args}`, 80);
+}
+function sanitizeContent(raw) {
+    let s = raw.replace(/^[\s\n]*assistant:\s*/gi, "");
+    s = s.replace(/\{"success"\s*:\s*(true|false)\s*,\s*"output"\s*:\s*"[\s\S]*$/m, "");
+    return s.trim();
+}
+function shouldOpenApiKeyModalForKey(key) {
+    if (key.ctrl || key.meta)
+        return false;
+    if (key.name === "return" || key.name === "backspace")
+        return true;
+    return !!(key.sequence && key.sequence.length === 1);
+}
+function compactTaskLabel(label) {
+    const words = label.trim().split(/\s+/).filter(Boolean);
+    if (words.length <= 3)
+        return label.trim() || "Working";
+    return `${words.slice(0, 3).join(" ")}...`;
+}
+function trunc(s, n) {
+    return s.length <= n ? s : `${s.slice(0, n)}…`;
+}
+function truncateLine(s, n) {
+    return trunc(s.replace(/\s+/g, " ").trim(), n);
+}
+//# sourceMappingURL=app.js.map