acmecode 1.0.0

package/dist/tui/src/App.js

@@ -0,0 +1,1211 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Box, Text, Static } from "ink";
+import TextInput from "./TextInput.js";
+import Spinner from "./Spinner.js";
+import Tips from "./Tips.js";
+import OptionList from "./OptionList.js";
+import Toast, { useToast } from "./Toast.js";
+import { renderMarkdown } from "./markdown.js";
+import { runAgent } from "@acmecode/core/agent/index.js";
+import { getContextWindow, fetchModelsDevCache, getProviders, } from "@acmecode/core/llm/provider.js";
+import { loadSession, saveMessages } from "@acmecode/core/session/index.js";
+import { loadSkills } from "@acmecode/core/skills/index.js";
+import { loadModelConfig, loadReasoningLevel, loadAgentModeConfig, saveProjectModelConfig, saveAgentModeConfig, saveGlobalReasoningLevel, saveProviderConfig, getProviderKey, getProviderBaseUrl, getProviderProtocol, } from "@acmecode/core/config/index.js";
+import { theme, formatToolIcon, formatToolName, formatBorder, setTheme, listThemes, getThemeName, onThemeChange, } from "./theme.js";
+import { t, setLang, listLangs, getLang } from "./i18n.js";
+let cachedModels = [];
+let itemCounter = 0;
+function windowText(text, maxLines) {
+    const lines = text.split("\n");
+    if (lines.length <= maxLines)
+        return { content: text, truncated: false };
+    let content = lines.slice(-maxLines).join("\n");
+    // Check for open code blocks to maintain Markdown integrity
+    const codeBlockCount = (content.match(/^```/gm) || []).length;
+    if (codeBlockCount % 2 !== 0) {
+        // Find if the original text had an opening block that was truncated
+        const originalCodeBlocks = (text.match(/^```/gm) || []).length;
+        if (originalCodeBlocks % 2 === 0) {
+            // We are inside a block that started earlier, prepend a fake opener to satisfy parser
+            content = "```\n" + content;
+        }
+        else {
+            // The block is genuinely open and should be closed for safety
+            content = content + "\n```";
+        }
+    }
+    return { content, truncated: true };
+}
+// Tools that only read data — show a brief call line, suppress result output
+const READ_ONLY_TOOLS = new Set([
+    "read_file",
+    "list_dir",
+    "grep_search",
+    "codesearch",
+    "webfetch",
+    "websearch",
+    "lsp",
+    "batch",
+]);
+function isReadOnlyTool(name) {
+    return READ_ONLY_TOOLS.has(name);
+}
+function truncateToolResult(result, maxLen = 500) {
+    // If result contains a diff block, show it fully — that's the whole point
+    if (result.includes("```diff") || result.includes("```patch"))
+        return result;
+    if (result.length <= maxLen)
+        return result;
+    return result.slice(0, maxLen) + `\n${theme.muted("... (truncated)")}`;
+}
+function extractToolDetail(args) {
+    let argsObj = args || {};
+    if (typeof argsObj === "string") {
+        try {
+            argsObj = JSON.parse(argsObj);
+        }
+        catch {
+            return argsObj ? ` ${argsObj}` : "";
+        }
+    }
+    // Primary argument — shown inline after tool name
+    const primaryKeys = [
+        "command",
+        "commandLine",
+        "CommandLine",
+        "cmd",
+        "filePath",
+        "path",
+        "url",
+        "query",
+        "pattern",
+        "prompt",
+    ];
+    let primary = "";
+    const extras = [];
+    // Special handling for batch tool - check for array format first
+    if (Array.isArray(argsObj)) {
+        return `${argsObj.length}个工具调用`;
+    }
+    // Special handling for batch tool
+    if (argsObj.tools || argsObj.calls) {
+        let callsArray = [];
+        const toolsData = argsObj.tools || argsObj.calls;
+        if (typeof toolsData === "string") {
+            try {
+                callsArray = JSON.parse(toolsData);
+            }
+            catch {
+                callsArray = [];
+            }
+        }
+        else if (Array.isArray(toolsData)) {
+            callsArray = toolsData;
+        }
+        if (callsArray.length > 0) {
+            return `${callsArray.length}个工具调用`;
+        }
+    }
+    for (const key of primaryKeys) {
+        if (argsObj[key]) {
+            primary = String(argsObj[key]);
+            break;
+        }
+    }
+    // Secondary arguments — shown in [key=val, ...] brackets
+    const secondaryKeys = [
+        "limit",
+        "offset",
+        "recursive",
+        "replaceAll",
+        "include",
+        "exclude",
+    ];
+    for (const key of secondaryKeys) {
+        if (argsObj[key] !== undefined && argsObj[key] !== null) {
+            extras.push(`${key}=${argsObj[key]}`);
+        }
+    }
+    // Fallback: if no primary found, use first key's value
+    if (!primary && Object.keys(argsObj).length > 0) {
+        const firstKey = Object.keys(argsObj)[0];
+        const firstVal = argsObj[firstKey];
+        if (typeof firstVal === "string" || typeof firstVal === "number") {
+            primary = String(firstVal);
+        }
+    }
+    if (!primary && extras.length === 0)
+        return "";
+    const extrasStr = extras.length > 0 ? ` [${extras.join(", ")}]` : "";
+    return primary ? ` ${primary}${extrasStr}` : extrasStr;
+}
+function extractContent(msg) {
+    if (typeof msg.content === "string")
+        return msg.content;
+    if (Array.isArray(msg.content)) {
+        return msg.content
+            .map((c) => {
+            if (c.type === "text")
+                return c.text;
+            if (c.type === "tool-call") {
+                const icon = formatToolIcon(c.toolName);
+                const name = formatToolName(c.toolName);
+                const detail = extractToolDetail(c.args);
+                return `${icon} ${theme.muted(name)}${detail ? " " + theme.muted("→") + " " + theme.muted(detail.trim()) : ""}\n`;
+            }
+            if (c.type === "tool-result") {
+                const r = typeof c.result === "string"
+                    ? c.result
+                    : JSON.stringify(c.result, null, 2);
+                return `${theme.success("✔")} ${theme.muted(truncateToolResult(r))}\n`;
+            }
+            return "";
+        })
+            .join("");
+    }
+    return "";
+}
+export default function App({ sessionId, onExit, }) {
+    const [themeName, setThemeName] = useState(() => getThemeName());
+    useEffect(() => {
+        onThemeChange((name) => {
+            setThemeName(name);
+        });
+    }, []);
+    const [displayItems, setDisplayItems] = useState(() => {
+        try {
+            const saved = loadSession(sessionId) || [];
+            return saved
+                .filter((m) => m.role !== "tool" && m.role !== "system")
+                .map((m) => {
+                const text = extractContent(m);
+                if (!text && m.role === "assistant")
+                    return null;
+                return { id: String(itemCounter++), role: m.role, text };
+            })
+                .filter(Boolean);
+        }
+        catch (e) {
+            return [];
+        }
+    });
+    const pendingToolCallsRef = useRef(new Map());
+    // Refresh pre-rendered Markdown when theme changes
+    useEffect(() => {
+        setDisplayItems((prev) => prev.map((item) => {
+            if (item.role === "assistant" || item.role === "user") {
+                return {
+                    ...item,
+                    rendered: renderMarkdown(item.text),
+                };
+            }
+            return item;
+        }));
+    }, [themeName]);
+    const [currentInput, setCurrentInput] = useState("");
+    // Stores collapsed paste parts: label → full text mapping
+    const [pastedParts, setPastedParts] = useState(new Map());
+    // Clear paste tokens whenever the input is fully cleared
+    useEffect(() => {
+        if (currentInput === "")
+            setPastedParts(new Map());
+    }, [currentInput]);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [streamingText, setStreamingText] = useState("");
+    const [statusText, setStatusText] = useState("");
+    const [activeSkill, setActiveSkill] = useState(null);
+    const [tempProvider, setTempProvider] = useState(null);
+    useEffect(() => {
+        // Fetch dynamic model limits from models.dev in the background
+        fetchModelsDevCache().catch(() => { });
+    }, []);
+    // Support aborting generation
+    const abortRef = useRef(null);
+    const [provider, setProvider] = useState(() => loadModelConfig().provider);
+    const [modelName, setModelName] = useState(() => loadModelConfig().model);
+    const [visionProvider, setVisionProvider] = useState(() => loadModelConfig().visionProvider);
+    const [visionModel, setVisionModel] = useState(() => loadModelConfig().visionModel);
+    const [reasoningLevel, setReasoningLevel] = useState(loadReasoningLevel());
+    const [agentMode, setAgentMode] = useState(() => loadAgentModeConfig().mode);
+    const [activePlanFile, setActivePlanFile] = useState(() => loadAgentModeConfig().planFile);
+    const [activeSelection, setActiveSelection] = useState(null);
+    const [setupStep, setSetupStep] = useState("none");
+    const [setupContext, setSetupContext] = useState(null);
+    // Exact length of the system prompt (including hidden specs/instructions)
+    const [activePromptLength, setActivePromptLength] = useState(0);
+    // List of available slash commands for autocomplete
+    const slashCommands = [
+        { id: "/mode", label: t("command.mode") },
+        { id: "/model", label: t("command.model") },
+        { id: "/vision", label: "Configure Vision Model (AcmeVision)" },
+        { id: "/config", label: t("command.config") },
+        { id: "/reason", label: t("command.reason") },
+        { id: "/skill", label: t("command.skill") },
+        { id: "/theme", label: t("command.theme") },
+        { id: "/lang", label: t("command.lang") },
+        { id: "/clear", label: t("command.clear") },
+        { id: "/exit", label: t("command.exit") },
+    ];
+    // Autocomplete state
+    const [autocompleteIndex, setAutocompleteIndex] = useState(0);
+    const visibleCommands = currentInput.startsWith("/") && !currentInput.includes(" ")
+        ? slashCommands.filter((cmd) => cmd.id.startsWith(currentInput.toLowerCase()))
+        : [];
+    const messagesRef = useRef((() => {
+        try {
+            return loadSession(sessionId) || [];
+        }
+        catch {
+            return [];
+        }
+    })());
+    const addDisplayItem = (role, text) => {
+        // Pre-render Markdown for assistant/user messages to prevent re-parsing in Static
+        const rendered = role === "assistant" || role === "user"
+            ? renderMarkdown(text)
+            : undefined;
+        const item = {
+            id: String(itemCounter++),
+            role,
+            text,
+            rendered,
+        };
+        setDisplayItems((prev) => [...prev, item]);
+        return item;
+    };
+    const { toast, show: showToast, dismiss: dismissToast } = useToast();
+    const handleSubmit = async (value) => {
+        // Expand any collapsed paste tokens before processing
+        let expandedValue = value;
+        if (pastedParts.size > 0) {
+            for (const [label, text] of pastedParts.entries()) {
+                expandedValue = expandedValue.split(label).join(text);
+            }
+            setPastedParts(new Map());
+        }
+        const input = expandedValue.trim();
+        // If the autocomplete menu is open and the user presses Enter, autocomplete instead of submitting
+        // EXCEPT if the input is already an exact match of a command
+        if (visibleCommands.length > 0) {
+            const selected = visibleCommands[Math.min(autocompleteIndex, visibleCommands.length - 1)];
+            if (selected && selected.id !== input.toLowerCase()) {
+                setCurrentInput(selected.id + " ");
+                setAutocompleteIndex(0);
+                return;
+            }
+        }
+        if (input === "/exit" || input === "/quit") {
+            onExit();
+            return;
+        }
+        if (input === "/clear") {
+            setDisplayItems([]);
+            setCurrentInput("");
+            setActiveSkill(null);
+            messagesRef.current = [];
+            showToast("info", t("command.clear"));
+            return;
+        }
+        if (input === "/cancel" && isGenerating) {
+            if (abortRef.current) {
+                abortRef.current.abort();
+            }
+            setCurrentInput("");
+            return;
+        }
+        const [cmdRaw, ...argsParts] = input.split(/\s+/);
+        const cmd = cmdRaw.toLowerCase();
+        const args = argsParts.join(" ").trim();
+        if (cmd === "/skill") {
+            setCurrentInput("");
+            if (!args) {
+                const skills = await loadSkills();
+                addDisplayItem("assistant", `${t("command.skill")}:\n${skills.length ? skills.map((s) => `- ${theme.primary(s.name)}: ${s.description}`).join("\n") : t("status.no_skills")}`);
+                return;
+            }
+            const skills = await loadSkills();
+            const skill = skills.find((s) => s.name === args);
+            if (skill) {
+                setActiveSkill(skill);
+                addDisplayItem("assistant", t("status.skill_activated", { name: theme.primary(skill.name) }));
+            }
+            else {
+                addDisplayItem("assistant", t("status.skill_not_found", { name: args }));
+            }
+            return;
+        }
+        if (cmd === "/lang") {
+            setCurrentInput("");
+            const all = listLangs();
+            if (!args) {
+                setActiveSelection({
+                    type: "lang",
+                    options: all.map((l) => ({ id: l, label: l })),
+                    title: t("status.available_langs"),
+                    currentId: getLang(),
+                });
+            }
+            else if (setLang(args)) {
+                showToast("success", t("status.switched_lang", { name: args }), t("command.lang"));
+                addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_lang", { name: theme.primary(args) })}`);
+            }
+            else {
+                addDisplayItem("assistant", t("status.lang_not_found", { name: args }));
+            }
+            return;
+        }
+        if (cmd === "/theme") {
+            setCurrentInput("");
+            const all = listThemes();
+            if (!args) {
+                setActiveSelection({
+                    type: "theme",
+                    options: all.map((tn) => ({ id: tn, label: tn })),
+                    title: t("status.available_themes"),
+                    currentId: getThemeName(),
+                });
+            }
+            else if (setTheme(args)) {
+                showToast("success", t("status.switched_theme", { name: args }), t("command.theme"));
+                addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_theme", { name: theme.primary(args) })}`);
+            }
+            else {
+                addDisplayItem("assistant", t("status.theme_not_found", { name: args }));
+            }
+            return;
+        }
+        if (cmd === "/model") {
+            setCurrentInput("");
+            const all = getProviders();
+            setActiveSelection({
+                type: "provider",
+                options: all.map((p) => ({ id: p.id, label: p.name })),
+                title: t("status.select_provider"),
+                currentId: provider,
+            });
+            return;
+        }
+        if (cmd === "/vision") {
+            setCurrentInput("");
+            const all = getProviders();
+            setActiveSelection({
+                type: "vision_provider",
+                options: all.map((p) => ({ id: p.id, label: p.name })),
+                title: "Select Vision Delegate Provider",
+                currentId: visionProvider,
+            });
+            return;
+        }
+        if (cmd === "/reason") {
+            setCurrentInput("");
+            const levels = [
+                "low",
+                "medium",
+                "high",
+                "max",
+                "xhigh",
+            ];
+            if (!args) {
+                setActiveSelection({
+                    type: "reason",
+                    options: levels.map((l) => ({ id: l, label: l })),
+                    title: t("status.available_reasoning"),
+                    currentId: reasoningLevel,
+                });
+            }
+            else if (levels.includes(args)) {
+                setReasoningLevel(args);
+                saveGlobalReasoningLevel(args);
+                showToast("success", t("status.switched_reasoning", { name: args }), t("command.reason"));
+                addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_reasoning", { name: theme.primary(args) })}`);
+            }
+            else {
+                addDisplayItem("assistant", t("status.reasoning_not_found", { name: args }));
+            }
+            return;
+        }
+        if (cmd === "/mode") {
+            setCurrentInput("");
+            const modes = ["plan", "code", "agent", "zen"];
+            if (!args) {
+                setActiveSelection({
+                    type: "mode",
+                    options: modes.map((m) => ({ id: m, label: t(`mode.${m}`) })),
+                    title: t("status.available_modes"),
+                    currentId: agentMode,
+                });
+            }
+            else if (modes.includes(args)) {
+                setAgentMode(args);
+                setActivePlanFile(undefined);
+                saveAgentModeConfig(args, undefined);
+                showToast("success", t("status.switched_mode", { name: args }), t("command.mode"));
+                addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_mode", { name: theme.primary(args) })}`);
+            }
+            else {
+                addDisplayItem("assistant", `Invalid mode: ${args}`);
+            }
+            return;
+        }
+        if (cmd === "/config") {
+            setCurrentInput("");
+            const providers = getProviders();
+            setActiveSelection({
+                type: "config_provider",
+                options: [
+                    ...providers.map((p) => ({ id: p.id, label: p.name })),
+                    { id: "ADD_CUSTOM", label: t("ui.add_custom_provider") },
+                ],
+                title: t("ui.config_title"),
+            });
+            return;
+        }
+        // Handle Setup Wizard Input
+        if (setupStep !== "none") {
+            const val = input.trim();
+            if (!val)
+                return;
+            setCurrentInput("");
+            if (setupStep === "naming") {
+                setSetupContext((prev) => ({
+                    ...prev,
+                    providerId: val.toLowerCase(),
+                    name: val,
+                    isCustom: true,
+                }));
+                // Show protocol selection
+                setActiveSelection({
+                    type: "config_protocol",
+                    options: [
+                        { id: "openai", label: "OpenAI (Standard)" },
+                        { id: "anthropic", label: "Anthropic" },
+                        { id: "google", label: "Google (Gemini)" },
+                        { id: "mistral", label: "Mistral" },
+                        { id: "groq", label: "Groq" },
+                    ],
+                    title: t("ui.select_protocol", { name: val }),
+                });
+                setSetupStep("entering_protocol");
+            }
+            else if (setupStep === "entering_key") {
+                if (setupContext?.isCustom) {
+                    setSetupContext((prev) => ({ ...prev, apiKey: val }));
+                    setSetupStep("entering_url");
+                }
+                else {
+                    // Official provider - save immediately
+                    saveProviderConfig(setupContext.providerId, { apiKey: val });
+                    addDisplayItem("assistant", `${theme.success("✔")} ${t("status.config_saved", { name: theme.primary(setupContext.providerId) })}`);
+                    setSetupStep("none");
+                    setSetupContext(null);
+                }
+            }
+            else if (setupStep === "entering_url") {
+                saveProviderConfig(setupContext.providerId, {
+                    apiKey: setupContext.apiKey,
+                    baseUrl: val,
+                    isCustom: true,
+                    protocol: setupContext.protocol,
+                });
+                addDisplayItem("assistant", `${theme.success("✔")} Custom provider ${theme.primary(setupContext.name)} configured.`);
+                setSetupStep("none");
+                setSetupContext(null);
+            }
+            return;
+        }
+        if (value.trim() && !isGenerating) {
+            addDisplayItem("user", value);
+            setCurrentInput("");
+            setIsGenerating(true);
+            setStreamingText("");
+            const currentMessages = Array.isArray(messagesRef.current)
+                ? messagesRef.current
+                : [];
+            const newMessages = [
+                ...currentMessages,
+                { role: "user", content: value },
+            ];
+            try {
+                abortRef.current = new AbortController();
+                // Auto-select first model if not set
+                let effectiveModelName = modelName;
+                if (!effectiveModelName) {
+                    try {
+                        const apiKey = getProviderKey(provider);
+                        const baseUrl = getProviderBaseUrl(provider);
+                        const res = await fetch(`${baseUrl}/models`, {
+                            headers: { Authorization: `Bearer ${apiKey}` },
+                        });
+                        if (res.ok) {
+                            const data = await res.json();
+                            const models = (data.data || data.models || []);
+                            if (models.length > 0) {
+                                effectiveModelName =
+                                    models[0].id ||
+                                        models[0].name?.replace("models/", "") ||
+                                        models[0].model;
+                                setModelName(effectiveModelName);
+                            }
+                        }
+                    }
+                    catch {
+                        // ignore fetch error
+                    }
+                }
+                if (!effectiveModelName) {
+                    addDisplayItem("assistant", theme.danger("No model available. Please select a provider and model."));
+                    return;
+                }
+                const generator = runAgent(provider, effectiveModelName, newMessages, undefined, // Let runAgent build system prompt dynamically
+                abortRef.current.signal, reasoningLevel, agentMode, activePlanFile, activeSkill?.content);
+                let fullResponse = "";
+                let lastFlush = Date.now();
+                let didGetMessages = false;
+                let generatorInstance = generator;
+                let nextApproval = undefined;
+                let lastToolName = "";
+                setStatusText(t("status.thinking"));
+                let idleTimer = null;
+                const resetIdle = (forceThinking = true) => {
+                    if (idleTimer)
+                        clearTimeout(idleTimer);
+                    idleTimer = setTimeout(() => {
+                        setStreamingText(fullResponse);
+                        if (forceThinking)
+                            setStatusText(t("status.thinking"));
+                    }, 500);
+                };
+                resetIdle();
+                while (true) {
+                    const next = await generatorInstance.next(nextApproval);
+                    nextApproval = undefined; // Reset
+                    if (next.done) {
+                        break;
+                    }
+                    const event = next.value;
+                    resetIdle();
+                    if (event.type === "text") {
+                        setStatusText("");
+                        fullResponse += event.text;
+                        const now = Date.now();
+                        // Throttle streaming updates to 200ms to reduce render-flicker
+                        if (now - lastFlush > 200) {
+                            setStreamingText(fullResponse);
+                            lastFlush = now;
+                        }
+                    }
+                    else if (event.type === "tool-approval-required") {
+                        const icon = formatToolIcon(event.name);
+                        const humanName = formatToolName(event.name);
+                        const detail = extractToolDetail(event.args);
+                        const riskLabel = event.riskLevel
+                            ? t(`ui.risk_${event.riskLevel}`)
+                            : "";
+                        const localWarning = event.isLocalGuard
+                            ? `\n${theme.danger("! " + t("ui.local_guard_hit"))}`
+                            : "";
+                        setStatusText(`${theme.danger("⚠ ")} ${humanName} ${theme.danger(t("ui.approval_required"))}`);
+                        const approved = await new Promise((resolve) => {
+                            setActiveSelection({
+                                type: "mode",
+                                title: `${icon} ${theme.danger(t("ui.dangerous_command_warning"))}${localWarning}\n${theme.muted(formatBorder(40))}\n${theme.primary(detail)}\n${theme.muted(formatBorder(40))}\n${theme.highlight(t("ui.risk_level", { level: riskLabel }))}\n${t("ui.approve_execution_q")}`,
+                                options: [
+                                    { id: "deny", label: theme.danger(t("ui.deny")) },
+                                    { id: "approve", label: theme.success(t("ui.approve")) },
+                                ],
+                                currentId: "deny",
+                            });
+                            globalThis._approvalResolver = (opt) => {
+                                setActiveSelection(null);
+                                resolve(opt.id === "approve");
+                            };
+                        });
+                        nextApproval = approved;
+                    }
+                    else if (event.type === "tool-call") {
+                        const icon = formatToolIcon(event.name);
+                        const humanName = formatToolName(event.name);
+                        let detail = extractToolDetail(event.args);
+                        // Default detail for tools without arguments
+                        if (!detail) {
+                            if (event.name === "list_dir")
+                                detail = ".";
+                            else if (event.name === "read_file")
+                                detail = "(未指定文件)";
+                        }
+                        lastToolName = event.name;
+                        setStatusText(`${icon} ${humanName}${detail}`);
+                        if (idleTimer)
+                            clearTimeout(idleTimer);
+                        if (fullResponse.trim()) {
+                            addDisplayItem("assistant", fullResponse);
+                            fullResponse = "";
+                            setStreamingText("");
+                        }
+                        const toolDetail = detail;
+                        const key = event.toolCallId || `${event.name}:${toolDetail}`;
+                        pendingToolCallsRef.current.set(key, {
+                            icon,
+                            humanName,
+                            detail: toolDetail,
+                            timestamp: Date.now(),
+                        });
+                    }
+                    else if (event.type === "tool-call-delta") {
+                        const icon = formatToolIcon(event.name);
+                        const humanName = formatToolName(event.name);
+                        const detail = extractToolDetail(event.args);
+                        setStatusText(`${icon} ${humanName}${detail} ${theme.muted("(streaming...)")}`);
+                    }
+                    else if (event.type === "tool-generating") {
+                        const icon = formatToolIcon(event.name);
+                        const humanName = formatToolName(event.name);
+                        const detail = extractToolDetail(event.args);
+                        // Only update the spinner status — tool-call already added the display item
+                        setStatusText(`${icon} ${humanName}${detail}`);
+                    }
+                    else if (event.type === "tool-result") {
+                        const resultStr = typeof event.result === "string"
+                            ? event.result
+                            : JSON.stringify(event.result, null, 2);
+                        let matchedEntry;
+                        let matchedKey;
+                        // 先用 toolCallId 匹配 key
+                        if (event.toolCallId) {
+                            const entry = Array.from(pendingToolCallsRef.current.entries()).find(([k]) => k.startsWith(event.toolCallId));
+                            if (entry) {
+                                matchedEntry = entry;
+                                matchedKey = entry[0];
+                            }
+                        }
+                        // 否则用工具名匹配 key（key 格式是 "toolName:detail"）
+                        if (!matchedEntry) {
+                            for (const [key, value,] of pendingToolCallsRef.current.entries()) {
+                                if (key.startsWith(event.name + ":") ||
+                                    key.startsWith(event.name.toLowerCase() + ":")) {
+                                    matchedEntry = [key, value];
+                                    matchedKey = key;
+                                    break;
+                                }
+                            }
+                        }
+                        if (matchedEntry) {
+                            const { humanName, detail } = matchedEntry[1];
+                            const isReadOnly = isReadOnlyTool(event.name);
+                            const isReadFile = event.name === "read_file";
+                            const isBatch = event.name === "batch";
+                            const separator = isReadFile ? " ~ " : " → ";
+                            if (isBatch) {
+                                // Batch tool: show summary
+                                const callCount = (resultStr.match(/\[Call \d+:/g) || [])
+                                    .length;
+                                const errorCount = (resultStr.match(/Error:/g) || []).length;
+                                const summary = errorCount > 0
+                                    ? `${callCount}个调用, ${errorCount}个失败`
+                                    : `${callCount}个调用成功`;
+                                addDisplayItem("tool", `${theme.muted(humanName)}${detail ? theme.muted(separator) + theme.muted(detail.trim()) : ""} ${theme.success("✔")} ${theme.muted(summary)}`);
+                            }
+                            else if (isReadOnly) {
+                                addDisplayItem("tool", `${theme.muted(humanName)}${detail ? theme.muted(separator) + theme.muted(detail.trim()) : ""} ${theme.success("✔")}`);
+                            }
+                            else {
+                                addDisplayItem("tool", `${theme.muted(humanName)}${detail ? theme.muted(separator) + theme.muted(detail.trim()) : ""}\n${theme.success("✔")} ${theme.muted(truncateToolResult(resultStr || "OK"))}`);
+                            }
+                            pendingToolCallsRef.current.delete(matchedKey);
+                        }
+                        else {
+                            addDisplayItem("tool", `${theme.success("✔")} ${theme.muted(truncateToolResult(resultStr || "OK"))}`);
+                        }
+                        setStatusText(t("status.thinking"));
+                        resetIdle();
+                    }
+                    else if (event.type === "step") {
+                        setStatusText(`${t("status.thinking")} (${event.step}/${event.maxSteps})`);
+                    }
+                    else if (event.type === "mode-changed") {
+                        // Autonomous mode switch initiated by the agent
+                        setAgentMode(event.mode);
+                        setActivePlanFile(event.planFile);
+                        saveAgentModeConfig(event.mode, event.planFile);
+                        showToast("success", t("status.switched_mode", { name: event.mode }), t("command.mode"));
+                        addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_mode", { name: theme.primary(event.mode) })}${event.planFile ? ` (${event.planFile})` : ""}`);
+                    }
+                    else if (event.type === "messages") {
+                        messagesRef.current = event.messages;
+                        if (event.promptLength !== undefined) {
+                            setActivePromptLength(event.promptLength);
+                        }
+                        saveMessages(sessionId, messagesRef.current);
+                        didGetMessages = true;
+                    }
+                }
+                if (idleTimer)
+                    clearTimeout(idleTimer);
+                setStatusText("");
+                if (fullResponse) {
+                    addDisplayItem("assistant", fullResponse);
+                }
+                if (!didGetMessages) {
+                    const fallback = [
+                        ...newMessages,
+                        { role: "assistant", content: fullResponse },
+                    ];
+                    messagesRef.current = fallback;
+                    saveMessages(sessionId, fallback);
+                }
+                setStreamingText("");
+            }
+            catch (err) {
+                addDisplayItem("assistant", theme.danger(`Error: ${err.message}`));
+                setStreamingText("");
+            }
+            finally {
+                setIsGenerating(false);
+                abortRef.current = null;
+            }
+        }
+    };
+    // ── Context Usage Calculation ──
+    const contextUsage = (() => {
+        const windowSize = getContextWindow(modelName);
+        let historyLength = 0;
+        if (messagesRef.current && Array.isArray(messagesRef.current)) {
+            for (const msg of messagesRef.current) {
+                if (typeof msg.content === "string") {
+                    historyLength += msg.content.length;
+                }
+                else if (Array.isArray(msg.content)) {
+                    historyLength += JSON.stringify(msg.content).length;
+                }
+            }
+        }
+        // Account for hidden system prompts, specs, and environment details
+        // activePromptLength covers selectBasePrompt + mode_instructions + language_preference + environment + specs
+        const totalTextLength = historyLength + streamingText.length + (activePromptLength || 4000);
+        // 1 token ≈ 3.0 characters (safer ratio for heavily formatted code/Chinese)
+        const tokens = Math.ceil(totalTextLength / 3.0);
+        let windowStr = windowSize >= 1000000
+            ? `${(windowSize / 1000000).toFixed(1).replace(".0", "")}M`
+            : `${Math.round(windowSize / 1000)}k`;
+        const percent = Math.min((tokens / windowSize) * 100, 100);
+        const pStr = percent > 0 && percent < 0.01 ? "<0.01" : percent.toFixed(2);
+        return `${tokens}/${windowStr} (${pStr}%)`;
+    })();
+    return (React.createElement(Box, { flexDirection: "column", width: "100%" },
+        React.createElement(Static, { items: displayItems }, (item) => {
+            const hasText = !!item.text.trim();
+            if (!hasText && item.role !== "user")
+                return null;
+            return (React.createElement(Box, { key: item.id, flexDirection: "column", marginBottom: !hasText || item.role === "tool" ? 0 : 1, width: "100%" }, item.role !== "tool" ? (React.createElement(Box, { flexDirection: "row" },
+                React.createElement(Text, { bold: true, color: item.role === "user" ? "green" : "blue" }, item.role === "user" ? "❯ " : "󱨊 "),
+                React.createElement(Box, { paddingLeft: 1, flexDirection: "column", width: "100%" },
+                    React.createElement(Text, null, item.rendered || renderMarkdown(item.text))))) : (React.createElement(Box, { paddingLeft: 3 },
+                React.createElement(Text, null, item.text)))));
+        }),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1, width: "100%" },
+            React.createElement(Box, { flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, marginBottom: 1, backgroundColor: "#1a1a2e", width: "100%" },
+                React.createElement(Box, { flexDirection: "row", gap: 1 },
+                    React.createElement(Text, { bold: true, color: "cyan" }, "AcmeCode"),
+                    React.createElement(Text, { color: "gray" }, "\u00B7"),
+                    React.createElement(Text, null, agentMode === "plan"
+                        ? theme.highlight(agentMode)
+                        : agentMode === "code"
+                            ? theme.success(agentMode)
+                            : theme.primary(agentMode)),
+                    activePlanFile && (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { color: "gray" }, "\u00B7"),
+                        React.createElement(Text, { color: "yellow" }, activePlanFile))),
+                    React.createElement(Text, { color: "gray" }, "\u00B7"),
+                    React.createElement(Text, { color: "white" }, modelName),
+                    activeSkill ? (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { color: "gray" }, "\u00B7"),
+                        React.createElement(Text, { color: "yellow" }, activeSkill.name))) : null),
+                React.createElement(Box, { flexDirection: "row", gap: 1 },
+                    React.createElement(Text, { color: "gray" }, reasoningLevel),
+                    React.createElement(Text, { color: "gray" }, "\u00B7"),
+                    React.createElement(Text, { color: "gray" }, contextUsage))),
+            activeSelection && (React.createElement(OptionList, { title: activeSelection.title, options: activeSelection.options, currentId: activeSelection.currentId, onSelect: (opt) => {
+                    if (activeSelection.type === "lang") {
+                        setLang(opt.id);
+                        showToast("success", t("status.switched_lang", { name: opt.id }), t("command.lang"));
+                        addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_lang", { name: theme.primary(opt.id) })}`);
+                    }
+                    else if (activeSelection.type === "theme") {
+                        setTheme(opt.id);
+                        showToast("success", t("status.switched_theme", { name: opt.id }), t("command.theme"));
+                        addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_theme", { name: theme.primary(opt.id) })}`);
+                    }
+                    else if (activeSelection.type === "reason") {
+                        setReasoningLevel(opt.id);
+                        saveGlobalReasoningLevel(opt.id);
+                        showToast("success", t("status.switched_reasoning", { name: opt.id }), t("command.reason"));
+                        addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_reasoning", { name: theme.primary(opt.id) })}`);
+                    }
+                    else if (activeSelection.type === "mode") {
+                        if (globalThis._approvalResolver) {
+                            globalThis._approvalResolver(opt);
+                            delete globalThis._approvalResolver;
+                            return;
+                        }
+                        setAgentMode(opt.id);
+                        setActivePlanFile(undefined);
+                        saveAgentModeConfig(opt.id, undefined);
+                        showToast("success", t("status.switched_mode", { name: opt.id }), t("command.mode"));
+                        addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_mode", { name: theme.primary(opt.id) })}`);
+                    }
+                    else if (activeSelection.type === "provider") {
+                        const selectedProvider = opt.id;
+                        setActiveSelection(null);
+                        setTempProvider(selectedProvider);
+                        // Fetch models for the selected provider
+                        addDisplayItem("assistant", `Fetching available models (${selectedProvider})...`);
+                        (async () => {
+                            try {
+                                const apiKey = getProviderKey(selectedProvider);
+                                const baseUrl = getProviderBaseUrl(selectedProvider);
+                                const protocol = getProviderProtocol(selectedProvider);
+                                if (!apiKey) {
+                                    addDisplayItem("assistant", theme.danger(`Error: API key for ${selectedProvider} not found.`));
+                                    return;
+                                }
+                                let models = [];
+                                let fetchError = "";
+                                // 1. Try Official Endpoint
+                                try {
+                                    let url = "";
+                                    let headers = {};
+                                    // Special handling for Extralink: fetch from Git repo
+                                    if (selectedProvider === "extralink") {
+                                        url =
+                                            "https://cnb.cool/acmecloud/acmecode-models/-/git/raw/main/v1/models";
+                                        const res = await fetch(url);
+                                        if (res.ok) {
+                                            const data = await res.json();
+                                            const list = (data.data || []);
+                                            models = list.map((m) => ({
+                                                id: m.id,
+                                                label: m.name || m.id,
+                                            }));
+                                        }
+                                        else {
+                                            fetchError = `HTTP ${res.status}`;
+                                        }
+                                    }
+                                    else {
+                                        // Standard provider model fetching
+                                        url = `${baseUrl}/models`;
+                                        headers = { Authorization: `Bearer ${apiKey}` };
+                                        if (protocol === "google") {
+                                            // Google uses key in query param
+                                            const cleanBase = baseUrl?.replace(/\/+$/, "");
+                                            url = `${cleanBase}/models?key=${apiKey}`;
+                                            headers = {};
+                                        }
+                                        else if (protocol === "anthropic") {
+                                            // Anthropic doesn't have a public model list API usually,
+                                            // but some proxies might. We'll skip official and hit fallback directly.
+                                            throw new Error("Anthropic official has no list API");
+                                        }
+                                        const res = await fetch(url, { headers });
+                                        if (res.ok) {
+                                            const data = await res.json();
+                                            const list = (data.data ||
+                                                data.models ||
+                                                []);
+                                            models = list.map((m) => ({
+                                                id: m.id || m.name?.replace("models/", "") || m.model,
+                                            }));
+                                        }
+                                        else {
+                                            fetchError = `HTTP ${res.status}`;
+                                        }
+                                    }
+                                }
+                                catch (e) {
+                                    fetchError = e.message;
+                                }
+                                // 2. Fallback: Try multiple OpenAI-compatible candidates if first attempt failed or was empty
+                                if (models.length === 0 &&
+                                    selectedProvider !== "extralink") {
+                                    const cleanBase = baseUrl
+                                        ?.replace(/\/+$/, "")
+                                        .replace(/\/(v1|v1beta)$/, "");
+                                    const candidates = [
+                                        `${cleanBase}/models`,
+                                        `${cleanBase}/v1/models`,
+                                        `${cleanBase}/v1beta/models`,
+                                    ];
+                                    for (const fallbackUrl of candidates) {
+                                        try {
+                                            const res = await fetch(fallbackUrl, {
+                                                headers: { Authorization: `Bearer ${apiKey}` },
+                                            });
+                                            if (res.ok) {
+                                                const data = await res.json();
+                                                const list = (data.data ||
+                                                    data.models ||
+                                                    []);
+                                                if (list.length > 0) {
+                                                    models = list.map((m) => ({
+                                                        id: m.id ||
+                                                            m.name?.replace("models/", "") ||
+                                                            m.model,
+                                                    }));
+                                                    break; // Success!
+                                                }
+                                            }
+                                        }
+                                        catch (e) {
+                                            // Continue to next candidate
+                                        }
+                                    }
+                                }
+                                if (models.length === 0) {
+                                    addDisplayItem("assistant", theme.danger(`No models found or fetch failed: ${fetchError}`));
+                                }
+                                else {
+                                    // Auto-select first model if none selected
+                                    const currentModelId = selectedProvider === provider
+                                        ? modelName || models[0]?.id
+                                        : undefined;
+                                    setActiveSelection({
+                                        type: "model",
+                                        options: models.map((m) => ({
+                                            id: m.id,
+                                            label: m.label || m.id,
+                                        })),
+                                        title: `${t("status.available_models")} (${selectedProvider})`,
+                                        currentId: currentModelId,
+                                    });
+                                }
+                            }
+                            catch (err) {
+                                addDisplayItem("assistant", theme.danger(`Error fetching models: ${err.message}`));
+                            }
+                        })();
+                        return; // Don't close selection yet, we're transitioning
+                    }
+                    else if (activeSelection.type === "vision_provider") {
+                        const selectedProvider = opt.id;
+                        setActiveSelection(null);
+                        setTempProvider(selectedProvider);
+                        addDisplayItem("assistant", `Fetching vision models (${selectedProvider})...`);
+                        (async () => {
+                            try {
+                                const apiKey = getProviderKey(selectedProvider);
+                                const baseUrl = getProviderBaseUrl(selectedProvider);
+                                const protocol = getProviderProtocol(selectedProvider);
+                                if (!apiKey) {
+                                    addDisplayItem("assistant", theme.danger(`Error: API key for ${selectedProvider} not found.`));
+                                    return;
+                                }
+                                // Reuse model fetching logic (extracted or duplicated for now)
+                                let models = [];
+                                const cleanBase = baseUrl
+                                    ?.replace(/\/+$/, "")
+                                    .replace(/\/(v1|v1beta)$/, "");
+                                const candidates = [
+                                    `${cleanBase}/models`,
+                                    `${cleanBase}/v1/models`,
+                                    `${cleanBase}/v1beta/models`,
+                                ];
+                                for (const fallbackUrl of candidates) {
+                                    try {
+                                        const res = await fetch(fallbackUrl, {
+                                            headers: { Authorization: `Bearer ${apiKey}` },
+                                        });
+                                        if (res.ok) {
+                                            const data = await res.json();
+                                            const list = (data.data ||
+                                                data.models ||
+                                                []);
+                                            if (list.length > 0) {
+                                                models = list.map((m) => ({
+                                                    id: m.id ||
+                                                        m.name?.replace("models/", "") ||
+                                                        m.model,
+                                                }));
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    catch { }
+                                }
+                                if (models.length === 0) {
+                                    addDisplayItem("assistant", theme.danger(`No vision models found for ${selectedProvider}.`));
+                                }
+                                else {
+                                    setActiveSelection({
+                                        type: "vision_model",
+                                        options: models.map((m) => ({ id: m.id, label: m.id })),
+                                        title: `Select Vision Model (${selectedProvider})`,
+                                        currentId: visionModel,
+                                    });
+                                }
+                            }
+                            catch (err) {
+                                addDisplayItem("assistant", theme.danger(`Error: ${err.message}`));
+                            }
+                        })();
+                        return;
+                    }
+                    else if (activeSelection.type === "vision_model") {
+                        const p = tempProvider || provider;
+                        setVisionProvider(p);
+                        setVisionModel(opt.id);
+                        saveProjectModelConfig(provider, modelName, p, opt.id);
+                        showToast("success", `Vision delegate set to ${opt.id}`);
+                        addDisplayItem("assistant", `${theme.success("✔")} Vision Delegate: ${theme.primary(opt.id)}`);
+                        setActiveSelection(null);
+                        setTempProvider(null);
+                        return;
+                    }
+                    else if (activeSelection.type === "model") {
+                        const p = tempProvider || provider;
+                        setProvider(p);
+                        setModelName(opt.id);
+                        saveProjectModelConfig(p, opt.id);
+                        addDisplayItem("assistant", `${theme.success("✔")} ${t("status.switched_model", { name: theme.primary(`${p}:${opt.id}`) })}`);
+                        setTempProvider(null);
+                    }
+                    else if (activeSelection.type === "config_provider") {
+                        if (opt.id === "ADD_CUSTOM") {
+                            setSetupStep("naming");
+                            setSetupContext({ providerId: "", isCustom: true });
+                            addDisplayItem("assistant", t("ui.enter_custom_name"));
+                        }
+                        else {
+                            const providerInfo = getProviders().find((p) => p.id === opt.id);
+                            const isCustom = providerInfo?.envKey === "CUSTOM";
+                            if (isCustom) {
+                                setSetupContext({
+                                    providerId: opt.id,
+                                    name: opt.label,
+                                    isCustom: true,
+                                });
+                                setActiveSelection({
+                                    type: "config_protocol",
+                                    options: [
+                                        { id: "openai", label: "OpenAI (Standard)" },
+                                        { id: "anthropic", label: "Anthropic" },
+                                        { id: "google", label: "Google (Gemini)" },
+                                        { id: "mistral", label: "Mistral" },
+                                        { id: "groq", label: "Groq" },
+                                    ],
+                                    title: t("ui.select_protocol", { name: opt.label }),
+                                });
+                                setSetupStep("entering_protocol");
+                                return; // Don't close selection, transitioning to protocols
+                            }
+                            else {
+                                setSetupContext({ providerId: opt.id, isCustom: false });
+                                setSetupStep("entering_key");
+                                addDisplayItem("assistant", t("ui.enter_api_key", { name: opt.label }));
+                            }
+                        }
+                    }
+                    else if (activeSelection.type === "config_protocol") {
+                        setSetupContext((prev) => ({ ...prev, protocol: opt.id }));
+                        setSetupStep("entering_key");
+                        addDisplayItem("assistant", t("ui.enter_api_key", { name: setupContext?.name || "" }));
+                    }
+                    setActiveSelection(null);
+                }, onCancel: () => {
+                    setActiveSelection(null);
+                    setTempProvider(null);
+                    setSetupStep("none");
+                    setSetupContext(null);
+                } })),
+            setupStep !== "none" && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                setupStep === "naming" && (React.createElement(Text, { color: "yellow" },
+                    "\uDB85\uDD17 ",
+                    t("ui.enter_custom_name"))),
+                setupStep === "entering_key" && (React.createElement(Text, { color: "yellow" },
+                    "\uDB85\uDD17",
+                    " ",
+                    t("ui.enter_api_key", {
+                        name: setupContext?.name || setupContext?.providerId || "",
+                    }))),
+                setupStep === "entering_url" && (React.createElement(Text, { color: "yellow" },
+                    "\uDB85\uDD17",
+                    " ",
+                    t("ui.enter_base_url", {
+                        name: setupContext?.name || setupContext?.providerId || "",
+                        example: setupContext?.protocol === "anthropic"
+                            ? "https://api.anthropic.com"
+                            : setupContext?.protocol === "google"
+                                ? "https://generativelanguage.googleapis.com"
+                                : setupContext?.protocol === "mistral"
+                                    ? "https://api.mistral.ai"
+                                    : setupContext?.protocol === "groq"
+                                        ? "https://api.groq.com/openai/v1"
+                                        : "https://api.openai.com/v1",
+                    }))))),
+            streamingText ? (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { bold: true, color: "blue" },
+                        "\uDB86\uDE0A",
+                        " "),
+                    React.createElement(Box, { paddingLeft: 1, flexDirection: "column" }, (() => {
+                        const { content, truncated } = windowText(streamingText, 25);
+                        return (React.createElement(React.Fragment, null,
+                            truncated && (React.createElement(Text, { dimColor: true, italic: true },
+                                "... (",
+                                t("ui.output_truncated") ||
+                                    "Previous lines hidden for stability",
+                                ")")),
+                            React.createElement(Text, null, renderMarkdown(content))));
+                    })())))) : null,
+            isGenerating && statusText ? (React.createElement(Box, { marginBottom: 1, paddingLeft: 3 },
+                React.createElement(Spinner, { label: statusText, color: "cyan" }))) : null),
+        !activeSelection ? (React.createElement(Box, { flexDirection: "column" },
+            !isGenerating && visibleCommands.length > 0 && (React.createElement(Box, { marginBottom: 1, paddingX: 2, flexDirection: "column" }, visibleCommands.map((cmd, i) => {
+                const isSelected = i === Math.min(autocompleteIndex, visibleCommands.length - 1);
+                return (React.createElement(Text, { key: cmd.id },
+                    isSelected ? theme.success("❯ ") : "  ",
+                    isSelected
+                        ? theme.highlight(cmd.id)
+                        : theme.primary(cmd.id),
+                    " ",
+                    theme.muted(`- ${cmd.label}`)));
+            }))),
+            React.createElement(Box, { flexDirection: "row", width: "100%" },
+                React.createElement(Box, { width: 1, backgroundColor: isGenerating ? "yellow" : "cyan" }),
+                React.createElement(Box, { flexDirection: "column", flexGrow: 1, paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, backgroundColor: "#16213e" },
+                    React.createElement(TextInput, { value: currentInput, focus: !activeSelection, onChange: (val) => {
+                            setCurrentInput(val);
+                            setAutocompleteIndex(0);
+                        }, onSubmit: handleSubmit, onUp: () => setAutocompleteIndex((prev) => Math.max(0, prev - 1)), onDown: () => setAutocompleteIndex((prev) => Math.min(visibleCommands.length - 1, prev + 1)), onTab: () => {
+                            if (visibleCommands.length > 0) {
+                                const selected = visibleCommands[Math.min(autocompleteIndex, visibleCommands.length - 1)];
+                                if (selected)
+                                    setCurrentInput(selected.id + " ");
+                            }
+                        }, placeholder: isGenerating ? t("command.cancel") : t("ui.input_placeholder"), onPaste: (part) => {
+                            setPastedParts((prev) => {
+                                const next = new Map(prev);
+                                next.set(part.label, part.text);
+                                return next;
+                            });
+                        } }),
+                    React.createElement(Box, { flexDirection: "row", marginTop: 1, gap: 1 },
+                        React.createElement(Text, { color: "cyan" }, agentMode.toUpperCase()),
+                        React.createElement(Text, { color: "gray" }, "\u00B7"),
+                        React.createElement(Text, { color: "white" }, modelName),
+                        React.createElement(Text, { color: "gray" }, provider),
+                        activeSkill && (React.createElement(React.Fragment, null,
+                            React.createElement(Text, { color: "gray" }, "\u00B7"),
+                            React.createElement(Text, { color: "yellow" }, activeSkill.name)))))),
+            React.createElement(Box, { flexDirection: "row", justifyContent: "space-between", marginTop: 1, paddingLeft: 2, paddingRight: 2 },
+                React.createElement(Text, { color: "gray" }, process.cwd()),
+                React.createElement(Box, { flexDirection: "row", gap: 2 }, isGenerating ? (React.createElement(Text, { color: "gray" },
+                    "esc ",
+                    React.createElement(Text, { color: "gray" }, "interrupt"))) : (React.createElement(React.Fragment, null,
+                    React.createElement(Text, { color: "gray" },
+                        "/ ",
+                        React.createElement(Text, { color: "gray" }, "commands")),
+                    React.createElement(Text, { color: "gray" }, "/exit"))))),
+            !isGenerating && (React.createElement(Box, { marginTop: 1, paddingLeft: 2 },
+                React.createElement(Tips, null))))) : null,
+        React.createElement(Toast, { toast: toast, onDismiss: dismissToast })));
+}