zerg-ztc 0.1.10 → 0.1.12

package/src/App.tsx

@@ -1,813 +0,0 @@
-import React, { useState, useCallback, useMemo, useRef } from 'react';
-import { Box, useApp, useInput, Static } from 'ink';
-import { Header, MessageList, SingleMessage, InputArea, StatusBar, FullScreen, ActivityLine, useScreenSize } from './components/index.js';
-import { buildAppView } from './ui/views/app.js';
-import { useMirror } from './web/mirror_hook.js';
-import { Agent } from './agent/index.js';
-import { commands, type CommandContext } from './agent/commands/index.js';
-import { Message, AgentState, InputMode } from './types.js';
-import { InputState } from './ui/core/input_state.js';
-import { estimateInputLines } from './ui/views/input_area.js';
-import { configStore } from './config.js';
-import { createInputBus } from './ui/core/input.js';
-import { loadEmulationProfiles, getEmulationProfile } from './emulation/catalog.js';
-import { debugLog } from './debug/logger.js';
-import { runShellCommand, resolveWorkingDir } from './utils/shell.js';
-import { writeClipboard } from './utils/clipboard.js';
-import { listModels } from './utils/models.js';
-import { formatToolStart, formatToolEnd, formatToolError, buildToolOutputMessage } from './utils/tool_trace.js';
-import { getTraceStyle } from './emulation/trace_style.js';
-import { autoActivateSkills, buildSkillPrompt } from './skills/index.js';
-import { getSkillRegistry } from './skills/registry.js';
-import { Skill } from './skills/types.js';
-import { createAgentFromConfig } from './agent/factory.js';
-import { checkForUpdate } from './utils/update.js';
-import { getVersion } from './utils/version.js';
-import { DEFAULT_SPINNER_VERBS } from './utils/spinner_verbs.js';
-import { SPINNER_FRAMES } from './utils/spinner_frames.js';
-
-// --- Utilities ---
-
-const generateId = () => Math.random().toString(36).slice(2, 11);
-
-// --- Initial welcome message ---
-
-function getWelcomeMessage(): Message {
-  const hasKey = configStore.hasApiKey();
-  return {
-    id: generateId(),
-    role: 'system',
-    content: hasKey 
-      ? 'Welcome to ZTC - Zerg Terminal Client.\nType a message to begin, or /help for commands.'
-      : 'Welcome to ZTC - Zerg Terminal Client.\n\n⚠️  No API key configured.\n\nSet your Anthropic API key with:\n  /config key sk-ant-your-key-here\n\nOr set the ANTHROPIC_API_KEY environment variable.',
-    timestamp: new Date()
-  };
-}
-
-// --- Create agent if possible ---
-
-function createAgent(): Agent | null {
-  if (!configStore.hasApiKey()) return null;
-  const provider = configStore.getProvider();
-  const apiKey = configStore.getApiKey(provider);
-  return createAgentFromConfig({
-    config: configStore.get(),
-    provider,
-    apiKey,
-    openaiCompatibleBaseUrl: configStore.getOpenAICompatibleBaseUrl(),
-    emulationId: configStore.getEmulationId()
-  });
-}
-
-// --- Main App ---
-
-export const App: React.FC = () => {
-  const renderCount = React.useRef(0);
-  const { exit } = useApp();
-  const { rows, columns } = useScreenSize();
-  const mirrorEnabled = process.env.ZTC_WEB_MIRROR === '1';
-  const provider = configStore.getProvider();
-  const model = configStore.get().model;
-  const emulationId = configStore.getEmulationId();
-  const shellCwdRef = React.useRef(process.cwd());
-  
-  // State
-  const [messages, setMessages] = useState<Message[]>([getWelcomeMessage()]);
-  const messagesRef = useRef<Message[]>(messages);
-  const [agentState, setAgentState] = useState<AgentState>({ status: 'idle' });
-  const [sessionId] = useState(generateId());
-  const [agent, setAgent] = useState<Agent | null>(createAgent);
-  const [expandToolOutputs, setExpandToolOutputs] = useState(false);
-  const [skills, setSkills] = useState<Skill[]>([]);
-  const [inputMode, setInputMode] = useState<InputMode>('queue');
-  const queueRef = useRef<string[]>([]);
-  const activeRunIdRef = useRef<string | null>(null);
-  const runCounterRef = useRef(0);
-  const lastRunDurationRef = useRef<number | null>(null);
-
-  React.useEffect(() => {
-    let active = true;
-    configStore.load(true).then(() => {
-      if (!active) return;
-      setMessages(prev => {
-        if (
-          prev.length === 1 &&
-          prev[0]?.role === 'system' &&
-          prev[0].content.startsWith('Welcome to ZTC')
-        ) {
-          return [getWelcomeMessage()];
-        }
-        return prev;
-      });
-    }).catch(() => {});
-    return () => { active = false; };
-  }, []);
-  const [inputSnapshot, setInputSnapshot] = useState<InputState>({
-    segments: [],
-    cursor: { index: 0, offset: 0 },
-    history: [],
-    historyIdx: -1
-  });
-  const lastRequestRef = useRef<{ messages: Message[]; agent: Agent } | null>(null);
-  const [retryAvailable, setRetryAvailable] = useState(false);
-  const [toast, setToast] = useState<string | null>(null);
-  const toastTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const [spinnerLabel, setSpinnerLabel] = useState<string | null>(null);
-  const [spinnerFrame, setSpinnerFrame] = useState<string | null>(null);
-  const streamingMessageId = React.useRef<string | null>(null);
-  const streamedResponse = React.useRef(false);
-  const toolStartTimes = React.useRef<Map<string, number[]>>(new Map());
-  const activeSkillIds = React.useRef<string[]>([]);
-  const inputBus = useMemo(() => createInputBus(), []);
-  const fallbackContextLength = useMemo(
-    () => messages.reduce((sum, msg) => sum + msg.content.length, 0),
-    [messages]
-  );
-  const contextLength = agentState.contextTokens ?? fallbackContextLength;
-  const contextEstimated = agentState.contextTokens ? agentState.tokensEstimated : true;
-  const spinnerVerbs = configStore.get().spinnerVerbs || DEFAULT_SPINNER_VERBS;
-  const spinnerVerbsKey = spinnerVerbs.join('|');
-
-  React.useEffect(() => {
-    renderCount.current += 1;
-    debugLog(`App render #${renderCount.current} (messages=${messages.length}, state=${agentState.status})`);
-  });
-  React.useEffect(() => {
-    messagesRef.current = messages;
-  }, [messages]);
-  const [debug, setDebug] = useState(false);
-  const scrollback = process.env.ZTC_SCROLLBACK === '1' || process.env.ZTC_ALT_SCREEN !== '1';
-
-  React.useEffect(() => {
-    if (agentState.status !== 'thinking' && agentState.status !== 'streaming') {
-      setSpinnerLabel(null);
-      setSpinnerFrame(null);
-      return;
-    }
-    if (spinnerVerbs.length === 0) {
-      setSpinnerLabel(null);
-      setSpinnerFrame(null);
-      return;
-    }
-    const verb = spinnerVerbs[Math.floor(Math.random() * spinnerVerbs.length)];
-    setSpinnerLabel(verb);
-  }, [agentState.status, spinnerVerbsKey]);
-
-  React.useEffect(() => {
-    if (agentState.status !== 'thinking' && agentState.status !== 'streaming') {
-      setSpinnerFrame(null);
-      return;
-    }
-    // Animation is now safe in scrollback mode because we use Ink's Static component
-    // for completed messages - only the live section below Static re-renders
-    let index = 0;
-    setSpinnerFrame(SPINNER_FRAMES[index]);
-    const interval = setInterval(() => {
-      index = (index + 1) % SPINNER_FRAMES.length;
-      setSpinnerFrame(SPINNER_FRAMES[index]);
-    }, 120);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [agentState.status]);
-
-  const headerHeight = scrollback ? 0 : 4; // border (2) + content (1) + margin (1)
-  const statusHeight = 1;
-  const suggestionLines = 4;
-
-  const estimateBadgePreviewLines = useCallback((state: InputState): number => {
-    const segment = state.segments[state.cursor.index];
-    if (!segment || segment.type === 'text') return 0;
-    if (segment.type === 'paste') {
-      const lines = segment.text.split('\n');
-      return Math.min(3, lines.length) + (lines.length > 3 ? 1 : 0);
-    }
-    if (segment.type === 'image') {
-      return 16;
-    }
-    return 1;
-  }, []);
-
-  const inputHeight = useMemo(() => {
-    const inputLineCount = estimateInputLines(inputSnapshot.segments, columns);
-    const previewLines = estimateBadgePreviewLines(inputSnapshot);
-    const maxInputLines = Math.max(1, rows - (headerHeight + statusHeight + suggestionLines + 5));
-    return Math.min(Math.max(1, inputLineCount + previewLines), maxInputLines) + suggestionLines;
-  }, [columns, estimateBadgePreviewLines, inputSnapshot, rows]);
-
-  // Calculate content height (total - header - input - status)
-  const contentHeight = useMemo(
-    () => scrollback ? undefined : Math.max(rows - (headerHeight + inputHeight + statusHeight), 5),
-    [rows, scrollback, inputHeight]
-  );
-
-  // Reload agent when config changes
-  const reloadAgent = useCallback(() => {
-    setAgent(createAgent());
-  }, []);
-
-  React.useEffect(() => {
-    let active = true;
-    getSkillRegistry()
-      .then(registry => {
-        if (!active) return;
-        setSkills(registry);
-      })
-      .catch(() => {});
-    return () => { active = false; };
-  }, []);
-
-  // Keyboard shortcuts
-  useInput((input, key) => {
-    if (key.ctrl && input === 'c') {
-      exit();
-    }
-    if (key.ctrl && input === 'l') {
-      setMessages([{
-        id: generateId(),
-        role: 'system',
-        content: 'Screen cleared.',
-        timestamp: new Date()
-      }]);
-    }
-    if (key.ctrl && input === 'o') {
-      setExpandToolOutputs(prev => !prev);
-    }
-  });
-
-  // Message helpers
-  const addMessage = useCallback((msg: Omit<Message, 'id' | 'timestamp'>) => {
-    setMessages(prev => [...prev, {
-      ...msg,
-      id: generateId(),
-      timestamp: new Date()
-    }]);
-  }, []);
-
-  React.useEffect(() => {
-    if (process.env.ZTC_DISABLE_UPDATE === '1') return;
-    if (process.env.ZTC_WEB_MIRROR === '1') return;
-    let active = true;
-    const current = getVersion();
-    checkForUpdate(current).then(info => {
-      if (!active || !info.hasUpdate) return;
-      addMessage({
-        role: 'system',
-        content: `Update available: v${info.latest} (current v${info.current}). Run /update to install.`
-      });
-    }).catch(() => {});
-    return () => { active = false; };
-  }, [addMessage]);
-
-  const clearMessages = useCallback(() => {
-    setMessages([]);
-  }, []);
-
-  const getMessages = useCallback(() => messages, [messages]);
-
-  const shellController = useMemo(() => ({
-    getCwd: () => shellCwdRef.current,
-    setCwd: async (path: string) => {
-      const next = await resolveWorkingDir(shellCwdRef.current, path);
-      shellCwdRef.current = next;
-      // Also update agent's working directory so tools use it
-      if (agent) {
-        agent.setCwd(next);
-      }
-      return next;
-    },
-    run: async (command: string) => runShellCommand(command, shellCwdRef.current)
-  }), [agent]);
-
-  const isRetryableError = useCallback((message: string) => {
-    const lower = message.toLowerCase();
-    return lower.includes('overloaded') || lower.includes('529') || lower.includes('429') || lower.includes('rate limit');
-  }, []);
-
-  const runWithRetry = useCallback(async (
-    requestMessages: Message[],
-    runAgent: Agent,
-    isManual = false,
-    isActive?: () => boolean
-  ) => {
-    const maxRetries = 3;
-    let attempt = 0;
-    setRetryAvailable(false);
-    while (attempt < maxRetries) {
-      attempt += 1;
-      if (isActive && !isActive()) return;
-      try {
-        streamedResponse.current = false;
-        const result = await runAgent.run(requestMessages);
-        if (isActive && !isActive()) return;
-        if (!streamedResponse.current) {
-          // Only add assistant message if there's actual text content.
-          // Tool calls are already displayed via tool_start/tool_end events.
-          // When the model returns empty content after tool execution, don't show empty message.
-          const hasContent = result.content && result.content.trim().length > 0;
-          if (hasContent) {
-            addMessage({
-              role: 'assistant',
-              content: result.content,
-              toolCalls: result.toolCalls.length > 0 ? result.toolCalls : undefined,
-              metadata: result.usage ? { usage: result.usage } : undefined
-            });
-          }
-        }
-        setAgentState({
-          status: 'idle',
-          tokensUsed: result.usage?.totalTokens || 0,
-          contextTokens: result.usage?.inputTokens,
-          tokensEstimated: result.usage?.estimated,
-          authError: false
-        });
-        return;
-      } catch (err) {
-        const errorMsg = (err as Error).message || 'Agent error';
-        if (isActive && !isActive()) return;
-        if (!isRetryableError(errorMsg) || attempt >= maxRetries) {
-          throw err;
-        }
-        const delayMs = 500 * Math.pow(2, attempt - 1);
-        addMessage({
-          role: 'system',
-          content: `Overloaded. Retrying in ${Math.round(delayMs / 100) / 10}s... (attempt ${attempt + 1}/${maxRetries})`
-        });
-        await new Promise(resolve => setTimeout(resolve, delayMs));
-        if (isManual) {
-          setAgentState({ status: 'thinking', startedAt: new Date() });
-        }
-      }
-    }
-  }, [addMessage, isRetryableError, setAgentState]);
-
-  const retryLast = useCallback(() => {
-    const last = lastRequestRef.current;
-    if (!last) {
-      addMessage({ role: 'system', content: 'No previous request to retry.' });
-      return;
-    }
-    const runId = `${Date.now()}_${runCounterRef.current++}`;
-    activeRunIdRef.current = runId;
-    const isActive = () => activeRunIdRef.current === runId;
-    const runStartedAt = Date.now();
-    setAgentState({ status: 'thinking', startedAt: new Date() });
-    void runWithRetry(last.messages, last.agent, true, isActive).catch((err) => {
-      const message = (err as Error).message || 'Agent error';
-      if (!isActive()) return;
-      addMessage({ role: 'system', content: `Error: ${message}` });
-      if (isRetryableError(message)) {
-        addMessage({ role: 'system', content: 'Retries exhausted. Use /retry to try again.' });
-        setRetryAvailable(true);
-      }
-      setAgentState({ status: 'error', error: message });
-    });
-  }, [addMessage, isRetryableError, runWithRetry, setAgentState]);
-
-  // App context for commands
-  const appContext: CommandContext = useMemo(() => ({
-    addMessage,
-    clearMessages,
-    getMessages,
-    setAgentState,
-    reloadAgent,
-    setDebug,
-    retry: retryLast,
-    exit,
-    config: configStore,
-    emulation: {
-      list: loadEmulationProfiles,
-      get: getEmulationProfile
-    },
-    shell: shellController,
-    clipboard: {
-      writeText: writeClipboard
-    },
-    models: {
-      list: async (provider?: string) => listModels({
-        provider: provider || configStore.getProvider(),
-        apiKey: configStore.getApiKey(provider || configStore.getProvider()),
-        baseUrl: configStore.getOpenAICompatibleBaseUrl()
-      })
-    },
-    skills: {
-      list: async () => getSkillRegistry()
-    },
-    getInputMode: () => inputMode,
-    setInputMode: (mode) => setInputMode(mode)
-  }), [addMessage, clearMessages, getMessages, reloadAgent, exit, shellController, retryLast, inputMode]);
-
-  // Handle commands
-  const handleCommand = useCallback((cmd: string, args: string[]) => {
-    const command = commands.find(c => c.name === cmd.toLowerCase());
-    if (command) {
-      const result = command.handler(args, appContext);
-      if (result && typeof (result as Promise<void>).catch === 'function') {
-        (result as Promise<void>).catch((err) => {
-          const message = err instanceof Error ? err.message : 'Command failed';
-          addMessage({ role: 'system', content: `Command failed: ${message}` });
-        });
-      }
-    } else {
-      addMessage({
-        role: 'system',
-        content: `Unknown command: /${cmd}. Type /help for available commands.`
-      });
-    }
-  }, [appContext, addMessage]);
-
-  // Handle message submission
-  const handleSubmit = useCallback(async (text: string) => {
-    if (text.startsWith('!')) {
-      const commandText = text.slice(1).trim();
-      if (commandText) {
-        // Intercept 'cd' commands to use the proper /cd handler that persists
-        if (commandText === 'cd' || commandText.startsWith('cd ')) {
-          const path = commandText.slice(2).trim();
-          handleCommand('cd', path ? [path] : []);
-        } else {
-          handleCommand('shell', [commandText]);
-        }
-      }
-      return;
-    }
-    if (!configStore.hasApiKey()) {
-      addMessage({ role: 'user', content: text });
-      addMessage({
-        role: 'system',
-        content: '⚠️  No API key configured.\n\nSet your key with: /config key sk-ant-your-key-here'
-      });
-      return;
-    }
-
-    const busy = agentState.status !== 'idle' && agentState.status !== 'error';
-    if (busy) {
-      if (inputMode === 'queue') {
-        queueRef.current.push(text);
-        addMessage({
-          role: 'system',
-          content: `Queued (${queueRef.current.length})`
-        });
-        return;
-      }
-      addMessage({
-        role: 'system',
-        content: 'Interrupting current response...'
-      });
-    }
-
-    let currentAgent = agent;
-
-    if (skills.length > 0) {
-      const activated = autoActivateSkills(text, skills);
-      const ids = activated.map(skill => skill.id).sort();
-      const previous = activeSkillIds.current.join(',');
-      const next = ids.join(',');
-      if (previous !== next) {
-        activeSkillIds.current = ids;
-        const prompt = buildSkillPrompt(activated);
-        const nextAgent = createAgentFromConfig({
-          config: configStore.get(),
-          provider: configStore.getProvider(),
-          apiKey: configStore.getApiKey(configStore.getProvider()),
-          openaiCompatibleBaseUrl: configStore.getOpenAICompatibleBaseUrl(),
-          emulationId: configStore.getEmulationId(),
-          skillPrompt: prompt
-        });
-        if (nextAgent) {
-          setAgent(nextAgent);
-          currentAgent = nextAgent;
-        }
-        if (ids.length > 0) {
-          addMessage({
-            role: 'system',
-            content: `Skills activated: ${activated.map(skill => skill.name).join(', ')}`
-          });
-        }
-      }
-    }
-
-    if (!currentAgent) {
-      currentAgent = createAgent();
-      setAgent(currentAgent);
-    }
-
-    if (!currentAgent) {
-      addMessage({
-        role: 'system',
-        content: 'Failed to initialize agent. Please check your configuration.'
-      });
-      return;
-    }
-
-    const userMsg: Message = {
-      id: generateId(),
-      role: 'user',
-      content: text,
-      timestamp: new Date()
-    };
-    setMessages(prev => [...prev, userMsg]);
-    const requestMessages = [...messagesRef.current, userMsg];
-    lastRequestRef.current = { messages: requestMessages, agent: currentAgent };
-
-    const runId = `${Date.now()}_${runCounterRef.current++}`;
-    activeRunIdRef.current = runId;
-    const isActive = () => activeRunIdRef.current === runId;
-    const runStartedAt = Date.now();
-    setAgentState({ status: 'thinking', startedAt: new Date() });
-    streamingMessageId.current = null;
-    streamedResponse.current = false;
-
-    const cleanup = currentAgent.on((event) => {
-      if (!isActive()) return;
-      switch (event.type) {
-        case 'thinking_start':
-          setAgentState(s => ({ ...s, status: 'thinking' }));
-          break;
-        case 'tool_start':
-          setAgentState(s => ({ ...s, status: 'tool_use', currentTool: event.tool }));
-          {
-            const key = event.tool;
-            const bucket = toolStartTimes.current.get(key) || [];
-            bucket.push(Date.now());
-            toolStartTimes.current.set(key, bucket);
-            addMessage({
-              role: 'tool',
-              content: formatToolStart(event.tool, event.args, configStore.getEmulationId())
-            });
-          }
-          break;
-        case 'stream_start':
-          streamedResponse.current = true;
-          setAgentState(s => ({ ...s, status: 'streaming' }));
-          if (!streamingMessageId.current) {
-            const id = generateId();
-            streamingMessageId.current = id;
-            setMessages(prev => [...prev, {
-              id,
-              role: 'assistant',
-              content: '',
-              timestamp: new Date(),
-              isStreaming: true
-            }]);
-          }
-          break;
-        case 'stream_delta':
-          setAgentState(s => ({ ...s, status: 'streaming' }));
-          if (streamingMessageId.current) {
-            setMessages(prev => prev.map(msg => {
-              if (msg.id !== streamingMessageId.current) return msg;
-              return { ...msg, content: `${msg.content}${event.content}`, isStreaming: true };
-            }));
-          }
-          break;
-        case 'stream_end':
-          if (streamingMessageId.current) {
-            setMessages(prev => {
-              // Remove the streaming message if it ended up empty (tool-only response)
-              const streamingMsg = prev.find(m => m.id === streamingMessageId.current);
-              if (streamingMsg && (!streamingMsg.content || streamingMsg.content.trim() === '')) {
-                return prev.filter(m => m.id !== streamingMessageId.current);
-              }
-              // Otherwise mark it as no longer streaming
-              return prev.map(msg => {
-                if (msg.id !== streamingMessageId.current) return msg;
-                return { ...msg, isStreaming: false };
-              });
-            });
-          }
-          streamingMessageId.current = null;
-          break;
-        case 'tool_end': {
-          const key = event.tool;
-          const bucket = toolStartTimes.current.get(key) || [];
-          const started = bucket.shift();
-          toolStartTimes.current.set(key, bucket);
-          const duration = started ? Date.now() - started : undefined;
-          const emulationId = configStore.getEmulationId();
-          if (getTraceStyle(emulationId) === 'claude_code' || getTraceStyle(emulationId) === 'codex') {
-            const output = buildToolOutputMessage(event.tool, event.result, duration, emulationId);
-            addMessage({
-              role: 'tool',
-              content: output.preview,
-              metadata: {
-                toolOutput: output
-              }
-            });
-          } else {
-            addMessage({
-              role: 'tool',
-              content: formatToolEnd(event.tool, event.result, duration, emulationId)
-            });
-          }
-          break;
-        }
-        case 'tool_error': {
-          addMessage({
-            role: 'tool',
-            content: formatToolError(event.tool, event.error, configStore.getEmulationId())
-          });
-          break;
-        }
-        case 'token_usage':
-          setAgentState(s => ({
-            ...s,
-            tokensUsed: event.usage.totalTokens,
-            contextTokens: event.usage.inputTokens,
-            tokensEstimated: event.usage.estimated
-          }));
-          break;
-        case 'error':
-          setAgentState({ status: 'error', error: event.error });
-          break;
-      }
-    });
-
-    try {
-      await runWithRetry(requestMessages, currentAgent, false, isActive);
-    } catch (err) {
-      const errorMsg = (err as Error).message;
-      if (!isActive()) return;
-      
-      const isAuthError = errorMsg.includes('401') || errorMsg.includes('authentication');
-      if (isAuthError) {
-        addMessage({
-          role: 'system',
-          content: `Authentication failed. Your API key may be invalid.\n\nUpdate it with: /config key sk-ant-your-key-here`
-        });
-      } else {
-        addMessage({
-          role: 'system',
-          content: `Error: ${errorMsg}`
-        });
-        if (isRetryableError(errorMsg)) {
-          addMessage({
-            role: 'system',
-            content: 'Retries exhausted. Use /retry to try again.'
-          });
-          setRetryAvailable(true);
-        }
-      }
-      setAgentState({ status: 'error', error: errorMsg, authError: isAuthError });
-      
-      setTimeout(() => {
-        setAgentState({ status: 'idle' });
-      }, 3000);
-    } finally {
-      if (isActive()) {
-        streamedResponse.current = false;
-        streamingMessageId.current = null;
-        activeRunIdRef.current = null;
-        lastRunDurationRef.current = Date.now() - runStartedAt;
-        if (getTraceStyle(configStore.getEmulationId()) === 'codex') {
-          const seconds = Math.max(0, Math.round((lastRunDurationRef.current || 0) / 1000));
-          addMessage({
-            role: 'tool',
-            content: `✻ Worked for ${seconds}s`
-          });
-        }
-        cleanup();
-        if (inputMode === 'queue' && queueRef.current.length > 0) {
-          const next = queueRef.current.shift();
-          if (next) {
-            void handleSubmit(next);
-          }
-        }
-      } else {
-        cleanup();
-      }
-    }
-  }, [agent, agentState.status, addMessage, handleCommand, inputMode, isRetryableError, runWithRetry]);
-
-  const layoutTree = useMemo(() => {
-    if (!mirrorEnabled) return null;
-    return buildAppView({
-      messages,
-      agentState,
-      inputState: inputSnapshot,
-      sessionId,
-      cols: columns,
-      rows,
-      commands,
-      hasApiKey: configStore.hasApiKey(),
-      version: getVersion(),
-      contextLength,
-      contextEstimated,
-      provider,
-      model,
-      emulationId,
-      inputMode,
-      toast,
-      spinnerLabel,
-      spinnerFrame,
-      debug,
-      expandToolOutputs
-    });
-  }, [mirrorEnabled, messages, agentState, inputSnapshot, sessionId, rows, contextLength, contextEstimated, provider, model, emulationId, inputMode, toast, spinnerLabel, spinnerFrame, debug, expandToolOutputs]);
-
-  const showToast = useCallback((message: string) => {
-    setToast(message);
-    if (toastTimerRef.current) {
-      clearTimeout(toastTimerRef.current);
-    }
-    toastTimerRef.current = setTimeout(() => {
-      setToast(null);
-    }, 2500);
-  }, []);
-
-  useMirror(layoutTree, inputBus);
-
-  // Compute messages for Static (completed) vs live (streaming)
-  // Static component handles deduplication by key - it only renders new items
-  const { staticMessages, streamingMessage } = useMemo(() => {
-    if (!scrollback) {
-      return { staticMessages: [], streamingMessage: null };
-    }
-
-    // Completed messages go to Static (rendered once, kept in scrollback)
-    const completed = messages.filter(m => !m.isStreaming);
-    // Streaming message stays in live section (can update)
-    const streaming = messages.find(m => m.isStreaming) || null;
-
-    return {
-      staticMessages: completed,
-      streamingMessage: streaming
-    };
-  }, [messages, scrollback]);
-
-  return (
-    <FullScreen debug={debug} scrollback={scrollback}>
-      {!scrollback && <Header version={getVersion()} debug={debug} />}
-
-      {scrollback ? (
-        <Box flexDirection="column">
-          {/* Static: each message rendered ONCE, stays in scrollback buffer */}
-          <Static items={staticMessages}>
-            {(msg: Message) => (
-              <Box key={msg.id} flexDirection="column">
-                <SingleMessage message={msg} expandToolOutputs={expandToolOutputs} />
-              </Box>
-            )}
-          </Static>
-
-          {/* Live section: streaming message can update */}
-          {streamingMessage && (
-            <SingleMessage message={streamingMessage} expandToolOutputs={expandToolOutputs} />
-          )}
-        </Box>
-      ) : (
-        <MessageList
-          messages={messages}
-          height={contentHeight}
-          debug={debug}
-          expandToolOutputs={expandToolOutputs}
-          scrollback={scrollback}
-        />
-      )}
-
-      <ActivityLine
-        state={agentState}
-        spinnerLabel={spinnerLabel}
-        spinnerFrame={spinnerFrame}
-        inputMode={inputMode}
-      />
-
-      <InputArea
-        onSubmit={handleSubmit}
-        onCommand={handleCommand}
-        commands={commands}
-        onStateChange={setInputSnapshot}
-        onToast={showToast}
-        cols={columns}
-        inputBus={inputBus}
-        disabled={false}
-        debug={debug}
-        cwd={shellCwdRef.current}
-        placeholder={
-          !configStore.hasApiKey() ? 'Set API key with /config key <key>' :
-          agentState.status === 'thinking' ? 'Thinking...' :
-          agentState.status === 'tool_use' ? `Running ${agentState.currentTool}...` :
-          agentState.status === 'streaming' ? 'Streaming response...' :
-          'Type a message or /help for commands...'
-        }
-      />
-
-      <StatusBar 
-        state={agentState} 
-        sessionId={sessionId}
-        version={getVersion()}
-        connectionStatus={configStore.hasApiKey() ? 'connected' : 'disconnected'}
-        contextLength={contextLength}
-        contextEstimated={contextEstimated}
-        provider={provider}
-        model={model}
-        emulationId={emulationId}
-        inputMode={inputMode}
-        toast={toast}
-        debug={debug}
-      />
-    </FullScreen>
-  );
-};
-
-export default App;