zerg-ztc 0.1.0

package/src/App.tsx

@@ -0,0 +1,576 @@
+import React, { useState, useCallback, useMemo, useRef } from 'react';
+import { Box, useApp, useInput } from 'ink';
+import { Header, MessageList, InputArea, StatusBar, FullScreen, 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 } from './types.js';
+import { InputState } from './ui/core/input_state.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';
+
+// --- 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 [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 [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 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;
+
+  React.useEffect(() => {
+    renderCount.current += 1;
+    debugLog(`App render #${renderCount.current} (messages=${messages.length}, state=${agentState.status})`);
+  });
+  const [debug, setDebug] = useState(false);
+
+  const inputHeight = 5; // 1 input line + 4 suggestion lines
+  const headerHeight = 1;
+  const statusHeight = 1;
+
+  // Calculate content height (total - header - input - status)
+  const contentHeight = useMemo(
+    () => Math.max(rows - (headerHeight + inputHeight + statusHeight), 5),
+    [rows]
+  );
+
+  // 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()
+    }]);
+  }, []);
+
+  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;
+      return next;
+    },
+    run: async (command: string) => runShellCommand(command, shellCwdRef.current)
+  }), []);
+
+  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) => {
+    const maxRetries = 3;
+    let attempt = 0;
+    setRetryAvailable(false);
+    while (attempt < maxRetries) {
+      attempt += 1;
+      try {
+        streamedResponse.current = false;
+        const result = await runAgent.run(requestMessages);
+        if (!streamedResponse.current) {
+          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 (!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;
+    }
+    setAgentState({ status: 'thinking', startedAt: new Date() });
+    void runWithRetry(last.messages, last.agent, true).catch((err) => {
+      const message = (err as Error).message || 'Agent error';
+      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()
+    }
+  }), [addMessage, clearMessages, getMessages, reloadAgent, exit, shellController, retryLast]);
+
+  // 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) {
+        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;
+    }
+
+    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 = [...messages, userMsg];
+    lastRequestRef.current = { messages: requestMessages, agent: currentAgent };
+
+    setAgentState({ status: 'thinking', startedAt: new Date() });
+
+    const cleanup = currentAgent.on((event) => {
+      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 => 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') {
+            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);
+    } catch (err) {
+      const errorMsg = (err as Error).message;
+      
+      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 {
+      streamedResponse.current = false;
+      streamingMessageId.current = null;
+      cleanup();
+    }
+  }, [messages, agent, addMessage, isRetryableError, runWithRetry]);
+
+  const layoutTree = useMemo(() => {
+    if (!mirrorEnabled) return null;
+    return buildAppView({
+      messages,
+      agentState,
+      inputState: inputSnapshot,
+      sessionId,
+      cols: columns,
+      rows,
+      commands,
+      hasApiKey: configStore.hasApiKey(),
+      contextLength,
+      contextEstimated,
+      provider,
+      model,
+      emulationId,
+      toast,
+      debug,
+      expandToolOutputs
+    });
+  }, [mirrorEnabled, messages, agentState, inputSnapshot, sessionId, rows, contextLength, contextEstimated, provider, model, emulationId, toast, debug, expandToolOutputs]);
+
+  const showToast = useCallback((message: string) => {
+    setToast(message);
+    if (toastTimerRef.current) {
+      clearTimeout(toastTimerRef.current);
+    }
+    toastTimerRef.current = setTimeout(() => {
+      setToast(null);
+    }, 2500);
+  }, []);
+
+  useMirror(layoutTree, inputBus);
+
+  return (
+    <FullScreen debug={debug}>
+      <Header version="0.1.0" debug={debug} />
+      
+      <MessageList 
+        messages={messages} 
+        height={contentHeight}
+        debug={debug}
+        expandToolOutputs={expandToolOutputs}
+      />
+      
+      <InputArea 
+        onSubmit={handleSubmit}
+        onCommand={handleCommand}
+        commands={commands}
+        onStateChange={mirrorEnabled ? setInputSnapshot : undefined}
+        onToast={showToast}
+        cols={columns}
+        inputBus={inputBus}
+        disabled={agentState.status !== 'idle' && agentState.status !== 'error'}
+        debug={debug}
+        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="0.1.0"
+        connectionStatus={configStore.hasApiKey() ? 'connected' : 'disconnected'}
+        contextLength={contextLength}
+        contextEstimated={contextEstimated}
+        provider={provider}
+        model={model}
+        emulationId={emulationId}
+        toast={toast}
+        debug={debug}
+      />
+    </FullScreen>
+  );
+};
+
+export default App;