acmecode 1.0.0

package/packages/tui/src/App.tsx

@@ -0,0 +1,1702 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Box, Text, Static, useStdout } from "ink";
+import TextInput, { type PastedPart } 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, AgentEvent } from "@acmecode/core/agent/index.js";
+import { getSystemPrompt } from "@acmecode/core/prompt/index.js";
+import {
+  ProviderType,
+  getContextWindow,
+  estimateTokens,
+  fetchModelsDevCache,
+  getAvailableProviders,
+  getProviders,
+} from "@acmecode/core/llm/provider.js";
+import { loadSession, saveMessages } from "@acmecode/core/session/index.js";
+import { loadSkills, Skill } from "@acmecode/core/skills/index.js";
+import { getProjectContext } from "@acmecode/core/context/index.js";
+import {
+  loadModelConfig,
+  loadLangConfig,
+  loadThemeConfig,
+  loadReasoningLevel,
+  loadAgentModeConfig,
+  saveProjectModelConfig,
+  saveAgentModeConfig,
+  saveGlobalModelConfig,
+  saveGlobalLangConfig,
+  saveGlobalThemeConfig,
+  saveGlobalReasoningLevel,
+  saveProviderConfig,
+  loadCustomProviders,
+  getProviderKey,
+  getProviderBaseUrl,
+  getProviderProtocol,
+  ReasoningLevel,
+  AgentMode,
+} from "@acmecode/core/config/index.js";
+import {
+  theme,
+  formatToolIcon,
+  formatToolName,
+  formatBorder,
+  setTheme,
+  listThemes,
+  getThemeName,
+  onThemeChange,
+} from "./theme.js";
+import { t, setLang, listLangs, getLang, Language } from "./i18n.js";
+
+export interface ChatMessage {
+  role: "user" | "assistant" | "system" | "tool";
+  content: any;
+}
+
+interface AppProps {
+  sessionId: string;
+  onExit: () => void;
+}
+
+interface DisplayItem {
+  id: string;
+  role: "user" | "assistant" | "system" | "tool";
+  text: string;
+  rendered?: React.ReactNode; // Pre-rendered content for Static items
+}
+
+let cachedModels: { id: string }[] = [];
+let itemCounter = 0;
+
+function windowText(
+  text: string,
+  maxLines: number,
+): { content: string; truncated: boolean } {
+  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: string): boolean {
+  return READ_ONLY_TOOLS.has(name);
+}
+
+function truncateToolResult(result: string, maxLen = 500): string {
+  // 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: any): string {
+  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: string[] = [];
+
+  // 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: any[] = [];
+    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: any): string {
+  if (typeof msg.content === "string") return msg.content;
+  if (Array.isArray(msg.content)) {
+    return msg.content
+      .map((c: any) => {
+        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,
+}: AppProps): React.ReactElement | null {
+  const [themeName, setThemeName] = useState(() => getThemeName());
+
+  useEffect(() => {
+    onThemeChange((name) => {
+      setThemeName(name);
+    });
+  }, []);
+
+  const [displayItems, setDisplayItems] = useState<DisplayItem[]>(() => {
+    try {
+      const saved = loadSession(sessionId) || [];
+      return saved
+        .filter((m: any) => m.role !== "tool" && m.role !== "system")
+        .map((m: any) => {
+          const text = extractContent(m);
+          if (!text && m.role === "assistant") return null;
+          return { id: String(itemCounter++), role: m.role, text };
+        })
+        .filter(Boolean) as DisplayItem[];
+    } catch (e) {
+      return [];
+    }
+  });
+
+  const pendingToolCallsRef = useRef<
+    Map<
+      string,
+      {
+        icon: string;
+        humanName: string;
+        detail: string;
+        timestamp: number;
+      }
+    >
+  >(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<Map<string, string>>(
+    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<Skill | null>(null);
+  const [tempProvider, setTempProvider] = useState<ProviderType | null>(null);
+  useEffect(() => {
+    // Fetch dynamic model limits from models.dev in the background
+    fetchModelsDevCache().catch(() => {});
+  }, []);
+
+  // Support aborting generation
+  const abortRef = useRef<AbortController | null>(null);
+  const [provider, setProvider] = useState<string>(
+    () => loadModelConfig().provider,
+  );
+  const [modelName, setModelName] = useState<string>(
+    () => loadModelConfig().model,
+  );
+  const [visionProvider, setVisionProvider] = useState<string | undefined>(
+    () => loadModelConfig().visionProvider,
+  );
+  const [visionModel, setVisionModel] = useState<string | undefined>(
+    () => loadModelConfig().visionModel,
+  );
+  const [reasoningLevel, setReasoningLevel] =
+    useState<ReasoningLevel>(loadReasoningLevel());
+  const [agentMode, setAgentMode] = useState<AgentMode>(
+    () => loadAgentModeConfig().mode,
+  );
+  const [activePlanFile, setActivePlanFile] = useState<string | undefined>(
+    () => loadAgentModeConfig().planFile,
+  );
+
+  const [activeSelection, setActiveSelection] = useState<{
+    type:
+      | "model"
+      | "theme"
+      | "lang"
+      | "reason"
+      | "mode"
+      | "provider"
+      | "config_provider"
+      | "config_protocol"
+      | "vision_provider"
+      | "vision_model";
+    options: { id: string; label: string }[];
+    title: string;
+    currentId?: string;
+  } | null>(null);
+
+  const [setupStep, setSetupStep] = useState<
+    "none" | "naming" | "entering_key" | "entering_url" | "entering_protocol"
+  >("none");
+  const [setupContext, setSetupContext] = useState<{
+    providerId: string;
+    isCustom: boolean;
+    name?: string;
+    protocol?: string;
+    apiKey?: string;
+    baseUrl?: string;
+  } | null>(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<any[]>(
+    (() => {
+      try {
+        return loadSession(sessionId) || [];
+      } catch {
+        return [];
+      }
+    })(),
+  );
+
+  const addDisplayItem = (
+    role: "user" | "assistant" | "tool",
+    text: string,
+  ) => {
+    // Pre-render Markdown for assistant/user messages to prevent re-parsing in Static
+    const rendered =
+      role === "assistant" || role === "user"
+        ? renderMarkdown(text)
+        : undefined;
+    const item: DisplayItem = {
+      id: String(itemCounter++),
+      role,
+      text,
+      rendered,
+    };
+    setDisplayItems((prev) => [...prev, item]);
+    return item;
+  };
+
+  const { toast, show: showToast, dismiss: dismissToast } = useToast();
+
+  const handleSubmit = async (value: string) => {
+    // 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: any) => 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 as Language)) {
+        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: ReasoningLevel[] = [
+        "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 as ReasoningLevel)) {
+        setReasoningLevel(args as ReasoningLevel);
+        saveGlobalReasoningLevel(args as ReasoningLevel);
+        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: AgentMode[] = ["plan", "code", "agent", "zen"];
+      if (!args) {
+        setActiveSelection({
+          type: "mode",
+          options: modes.map((m) => ({ id: m, label: t(`mode.${m}` as any) })),
+          title: t("status.available_modes"),
+          currentId: agentMode,
+        });
+      } else if (modes.includes(args as AgentMode)) {
+        setAgentMode(args as AgentMode);
+        setActivePlanFile(undefined);
+        saveAgentModeConfig(args as AgentMode, 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: any[] = 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 || []) as any[];
+              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 as any,
+          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: boolean | undefined = undefined;
+        let lastToolName = "";
+
+        setStatusText(t("status.thinking"));
+
+        let idleTimer: ReturnType<typeof setTimeout> | null = null;
+        const resetIdle = (forceThinking: boolean = 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 as AgentEvent;
+          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}` as any)
+              : "";
+            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<boolean>((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 as any)._approvalResolver = (opt: any) => {
+                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 as any).name);
+            const humanName = formatToolName((event as any).name);
+            const detail = extractToolDetail((event as any).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: [string, any] | undefined;
+            let matchedKey: string | undefined;
+
+            // 先用 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: any) {
+        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 (
+    <Box flexDirection="column" width="100%">
+      {/* Scrollable History Area */}
+      <Static items={displayItems}>
+        {(item) => {
+          const hasText = !!item.text.trim();
+          if (!hasText && item.role !== "user") return null;
+
+          return (
+            <Box
+              key={item.id}
+              flexDirection="column"
+              marginBottom={!hasText || item.role === "tool" ? 0 : 1}
+              width="100%"
+            >
+              {item.role !== "tool" ? (
+                <Box flexDirection="row">
+                  <Text bold color={item.role === "user" ? "green" : "blue"}>
+                    {item.role === "user" ? "❯ " : "󱨊 "}
+                  </Text>
+                  <Box paddingLeft={1} flexDirection="column" width="100%">
+                    <Text>{item.rendered || renderMarkdown(item.text)}</Text>
+                  </Box>
+                </Box>
+              ) : (
+                <Box paddingLeft={3}>
+                  <Text>{item.text}</Text>
+                </Box>
+              )}
+            </Box>
+          );
+        }}
+      </Static>
+
+      {/* Live UI Area */}
+      <Box flexDirection="column" marginTop={1} width="100%">
+        {/* Header card */}
+        <Box
+          flexDirection="row"
+          justifyContent="space-between"
+          paddingLeft={2}
+          paddingRight={2}
+          paddingTop={1}
+          paddingBottom={1}
+          marginBottom={1}
+          backgroundColor="#1a1a2e"
+          width="100%"
+        >
+          <Box flexDirection="row" gap={1}>
+            <Text bold color="cyan">
+              AcmeCode
+            </Text>
+            <Text color="gray">·</Text>
+            <Text>
+              {agentMode === "plan"
+                ? theme.highlight(agentMode)
+                : agentMode === "code"
+                  ? theme.success(agentMode)
+                  : theme.primary(agentMode)}
+            </Text>
+            {activePlanFile && (
+              <>
+                <Text color="gray">·</Text>
+                <Text color="yellow">{activePlanFile}</Text>
+              </>
+            )}
+            <Text color="gray">·</Text>
+            <Text color="white">{modelName}</Text>
+            {activeSkill ? (
+              <>
+                <Text color="gray">·</Text>
+                <Text color="yellow">{activeSkill.name}</Text>
+              </>
+            ) : null}
+          </Box>
+          <Box flexDirection="row" gap={1}>
+            <Text color="gray">{reasoningLevel}</Text>
+            <Text color="gray">·</Text>
+            <Text color="gray">{contextUsage}</Text>
+          </Box>
+        </Box>
+
+        {/* Interactive Selection List (Below Logo, in live area) */}
+        {activeSelection && (
+          <OptionList
+            title={activeSelection.title}
+            options={activeSelection.options}
+            currentId={activeSelection.currentId}
+            onSelect={(opt) => {
+              if (activeSelection.type === "lang") {
+                setLang(opt.id as Language);
+                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 as ReasoningLevel);
+                saveGlobalReasoningLevel(opt.id as ReasoningLevel);
+                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 as any)._approvalResolver) {
+                  (globalThis as any)._approvalResolver(opt);
+                  delete (globalThis as any)._approvalResolver;
+                  return;
+                }
+                setAgentMode(opt.id as AgentMode);
+                setActivePlanFile(undefined);
+                saveAgentModeConfig(opt.id as AgentMode, 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 as ProviderType;
+                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: { id: string }[] = [];
+                    let fetchError = "";
+
+                    // 1. Try Official Endpoint
+                    try {
+                      let url = "";
+                      let headers: any = {};
+
+                      // 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 || []) as any[];
+                          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 ||
+                            []) as any[];
+                          models = list.map((m) => ({
+                            id:
+                              m.id || m.name?.replace("models/", "") || m.model,
+                          }));
+                        } else {
+                          fetchError = `HTTP ${res.status}`;
+                        }
+                      }
+                    } catch (e: any) {
+                      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 ||
+                              []) as any[];
+                            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: any) => ({
+                          id: m.id,
+                          label: m.label || m.id,
+                        })),
+                        title: `${t("status.available_models")} (${selectedProvider})`,
+                        currentId: currentModelId,
+                      });
+                    }
+                  } catch (err: any) {
+                    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 as ProviderType;
+                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: { id: string }[] = [];
+                    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 ||
+                            []) as any[];
+                          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: any) {
+                    addDisplayItem(
+                      "assistant",
+                      theme.danger(`Error: ${err.message}`),
+                    );
+                  }
+                })();
+                return;
+              } else if (activeSelection.type === "vision_model") {
+                const p = tempProvider || (provider as any);
+                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);
+            }}
+          />
+        )}
+
+        {/* Streaming Assistant Response */}
+        {setupStep !== "none" && (
+          <Box flexDirection="column" marginBottom={1}>
+            {setupStep === "naming" && (
+              <Text color="yellow">󱔗 {t("ui.enter_custom_name")}</Text>
+            )}
+            {setupStep === "entering_key" && (
+              <Text color="yellow">
+                󱔗{" "}
+                {t("ui.enter_api_key", {
+                  name: setupContext?.name || setupContext?.providerId || "",
+                })}
+              </Text>
+            )}
+            {setupStep === "entering_url" && (
+              <Text color="yellow">
+                󱔗{" "}
+                {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",
+                })}
+              </Text>
+            )}
+          </Box>
+        )}
+
+        {streamingText ? (
+          <Box flexDirection="column" marginBottom={1}>
+            <Box>
+              <Text bold color="blue">
+                󱨊{" "}
+              </Text>
+              <Box paddingLeft={1} flexDirection="column">
+                {(() => {
+                  const { content, truncated } = windowText(streamingText, 25);
+                  return (
+                    <>
+                      {truncated && (
+                        <Text dimColor italic>
+                          ... (
+                          {t("ui.output_truncated") ||
+                            "Previous lines hidden for stability"}
+                          )
+                        </Text>
+                      )}
+                      <Text>{renderMarkdown(content)}</Text>
+                    </>
+                  );
+                })()}
+              </Box>
+            </Box>
+          </Box>
+        ) : null}
+
+        {/* Spinner */}
+        {isGenerating && statusText ? (
+          <Box marginBottom={1} paddingLeft={3}>
+            <Spinner label={statusText} color="cyan" />
+          </Box>
+        ) : null}
+      </Box>
+
+      {/* Input & Footer */}
+      {!activeSelection ? (
+        <Box flexDirection="column">
+          {/* Autocomplete Menu */}
+          {!isGenerating && visibleCommands.length > 0 && (
+            <Box marginBottom={1} paddingX={2} flexDirection="column">
+              {visibleCommands.map((cmd, i) => {
+                const isSelected =
+                  i === Math.min(autocompleteIndex, visibleCommands.length - 1);
+                return (
+                  <Text key={cmd.id}>
+                    {isSelected ? theme.success("❯ ") : "  "}
+                    {isSelected
+                      ? theme.highlight(cmd.id)
+                      : theme.primary(cmd.id)}{" "}
+                    {theme.muted(`- ${cmd.label}`)}
+                  </Text>
+                );
+              })}
+            </Box>
+          )}
+
+          {/* Prompt card */}
+          <Box flexDirection="row" width="100%">
+            {/* Accent bar - full height */}
+            <Box width={1} backgroundColor={isGenerating ? "yellow" : "cyan"} />
+            {/* Card body */}
+            <Box
+              flexDirection="column"
+              flexGrow={1}
+              paddingLeft={2}
+              paddingRight={2}
+              paddingTop={1}
+              paddingBottom={1}
+              backgroundColor="#16213e"
+            >
+              <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: PastedPart) => {
+                  setPastedParts((prev) => {
+                    const next = new Map(prev);
+                    next.set(part.label, part.text);
+                    return next;
+                  });
+                }}
+              />
+              {/* Model info row */}
+              <Box flexDirection="row" marginTop={1} gap={1}>
+                <Text color="cyan">{agentMode.toUpperCase()}</Text>
+                <Text color="gray">·</Text>
+                <Text color="white">{modelName}</Text>
+                <Text color="gray">{provider}</Text>
+                {activeSkill && (
+                  <>
+                    <Text color="gray">·</Text>
+                    <Text color="yellow">{activeSkill!.name}</Text>
+                  </>
+                )}
+              </Box>
+            </Box>
+          </Box>
+
+          {/* Footer */}
+          <Box
+            flexDirection="row"
+            justifyContent="space-between"
+            marginTop={1}
+            paddingLeft={2}
+            paddingRight={2}
+          >
+            <Text color="gray">{process.cwd()}</Text>
+            <Box flexDirection="row" gap={2}>
+              {isGenerating ? (
+                <Text color="gray">
+                  esc <Text color="gray">interrupt</Text>
+                </Text>
+              ) : (
+                <>
+                  <Text color="gray">
+                    / <Text color="gray">commands</Text>
+                  </Text>
+                  <Text color="gray">/exit</Text>
+                </>
+              )}
+            </Box>
+          </Box>
+
+          {!isGenerating && (
+            <Box marginTop={1} paddingLeft={2}>
+              <Tips />
+            </Box>
+          )}
+        </Box>
+      ) : null}
+
+      {/* Toast notification */}
+      <Toast toast={toast} onDismiss={dismissToast} />
+    </Box>
+  );
+}