@benzsiangco/jarvis 1.0.2 → 1.1.0

package/src/tui/index.tsx

@@ -0,0 +1,784 @@
+/** @jsxImportSource @opentui/react */
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { createRoot, useKeyboard, useTerminalDimensions } from '@opentui/react';
+import { createCliRenderer, TextAttributes } from '@opentui/core';
+import { marked } from 'marked';
+import TerminalRenderer from 'marked-terminal';
+import { exec } from 'child_process';
+import type { Session, AgentConfig } from '../core/types.js';
+import { createSession, getSession } from '../sessions/index.js';
+import { getAgent, getPrimaryAgents, initializeAgents } from '../agents/index.js';
+import { executeAgent } from '../core/executor.js';
+import { loadConfig, getModelConfig, saveGlobalConfig, type JarvisConfig } from '../config/index.js';
+import { initializeProviders, getAvailableModels, getProvidersWithStatus } from '../providers/index.js';
+import { getActiveAccount, getAccountStats, startAntigravityLogin } from '../providers/antigravity.js';
+import { runInteractiveAuth, providers as authProviders, saveApiKey, removeApiKey, getApiKeyStatus } from '../utils/auth-prompt.js';
+import { loadSkills, addSkill, hasSkillsFile, type Skill } from '../utils/skills.js';
+import { initializeTools } from '../tools/index.js';
+
+// Configure marked to use terminal renderer
+marked.setOptions({
+  renderer: new (TerminalRenderer as any)()
+});
+
+interface AppProps {
+  initialPrompt?: string;
+  model?: string;
+  variant?: string;
+  runInteractive?: (task: () => Promise<void>) => Promise<void>;
+}
+
+interface ToolCall {
+  name: string;
+  description?: string;
+  command?: string;
+  output?: string;
+  expanded?: boolean;
+}
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+  thinking?: string;
+  agentName?: string;
+  modelName?: string;
+  duration?: number;
+  toolCalls?: ToolCall[];
+  usage?: {
+    promptTokens?: number;
+    completionTokens?: number;
+    totalTokens?: number;
+  };
+}
+
+interface Command {
+  id: string;
+  name: string;
+  description?: string;
+  shortcut?: string;
+  category: string;
+  action: () => void;
+}
+
+interface ModelWithVariants {
+  id: string;
+  name: string;
+  provider?: string;
+  variants?: Record<string, any>;
+}
+
+// Markdown Text Component - Fixed line-by-line rendering to prevent overlap
+function MarkdownText({ content, fg = "#ffffff" }: { content: string, fg?: string }) {
+  const { width } = useTerminalDimensions();
+  const lines = useMemo(() => {
+    try {
+      const renderer = new (TerminalRenderer as any)({
+        width: Math.max(20, width - 15),
+        reflowText: true,
+        showSectionPrefix: false,
+      });
+      const formatted = (marked.parse(content, { renderer }) as string).trim();
+      return formatted.split('\n');
+    } catch (e) {
+      return [content];
+    }
+  }, [content, width]);
+
+  return (
+    <box style={{ flexDirection: 'column' }}>{lines.map((line, i) => (<text key={i} fg={fg}>{String(line)}</text>))}</box>
+  );
+}
+
+// Thinking Block - OpenCode style
+function ThinkingBlock({ thinking }: { thinking: string }) {
+  const lines = useMemo(() => thinking.split('\n'), [thinking]);
+  return (
+    <box style={{ marginBottom: 1, flexDirection: 'column' }}><box style={{ border: ['left'], borderStyle: 'single', borderColor: '#d97706', paddingLeft: 1, flexDirection: 'column' }}><text fg="#d97706" style={{ attributes: TextAttributes.ITALIC }}>Thinking:</text>{lines.map((line, i) => (
+          <text key={i} fg="#888888">{String(line)}</text>
+        ))}</box></box>
+  );
+}
+
+// Tool Block - Expandable terminal
+function ToolBlock({ tool, isExpanded, isHovered, onHover, onToggle }: { tool: ToolCall; isExpanded: boolean; isHovered: boolean; onHover: () => void; onToggle: () => void; }) {
+  const outputLines = tool.output?.split('\n') || [];
+  const maxLines = 10;
+  const hasMore = outputLines.length > maxLines;
+  const displayLines = isExpanded ? outputLines : outputLines.slice(0, maxLines);
+
+  return (
+    <box 
+      style={{ marginBottom: 1, backgroundColor: isHovered ? '#1a1a1a' : '#0d1117', flexDirection: 'column' }} 
+      onMouseMove={onHover} 
+      onMouseDown={onToggle}
+    ><box style={{ flexDirection: 'column', border: ['left'], borderStyle: 'single', borderColor: isHovered ? '#22d3ee' : '#06b6d4', paddingLeft: 1 }}>{tool.description ? <text fg="#666666"># {String(tool.description)}</text> : null}<box style={{ flexDirection: 'row' }}><text fg="#22c55e">$ </text><text fg="#ffffff">{String(tool.command || tool.name)}</text></box>{displayLines.length > 0 ? (
+          <box style={{ flexDirection: 'column', marginTop: 1 }}>{displayLines.map((line, i) => (
+              <text key={i} fg="#888888">{String(line)}</text>
+            ))}{!isExpanded && hasMore ? <text fg="#666666">...</text> : null}</box>
+        ) : null}{hasMore ? (
+          <box style={{ marginTop: 1 }}><text fg="#06b6d4">{isExpanded ? 'Click to collapse' : 'Click to expand'}</text></box>
+        ) : null}</box></box>
+  );
+}
+
+// User Message - Cyan border text
+function UserMessage({ content }: { content: string }) {
+  return (
+    <box style={{ marginBottom: 1 }}><box style={{ border: ['left'], borderStyle: 'single', borderColor: '#06b6d4', paddingLeft: 1 }}><MarkdownText content={content} /></box></box>
+  );
+}
+
+// Assistant Message - Metadata and Content
+function AssistantMessage({ message, expandedTools, onToggleTool, hoveredToolIndex, onHoverTool }: { message: Message; expandedTools: Set<number>; onToggleTool: (index: number) => void; hoveredToolIndex: number | null; onHoverTool: (index: number | null) => void; }) {
+  return (
+    <box style={{ flexDirection: 'column', marginBottom: 1 }}>
+      {message.thinking ? <ThinkingBlock thinking={message.thinking} /> : null}
+      {message.toolCalls ? message.toolCalls.map((tool, i) => (
+        <ToolBlock key={i} tool={tool} isExpanded={expandedTools.has(i)} isHovered={hoveredToolIndex === i} onHover={() => onHoverTool(i)} onToggle={() => onToggleTool(i)} />
+      )) : null}
+      <MarkdownText content={message.content} />
+      <box style={{ marginTop: 1, flexDirection: 'row' }}>
+        <text fg="#22c55e">■ </text>
+        <text fg="#22c55e">{String(message.agentName || 'Jarvis')} </text>
+        <text fg="#666666">· {String(message.modelName || 'unknown')}</text>
+        {message.duration ? <text fg="#666666"> · {String((message.duration / 1000).toFixed(1))}s</text> : null}
+      </box>
+    </box>
+  );
+}
+
+// Modal Component - Clean OpenCode layout
+function Modal({ title, width, height, onClose, children }: { title: string; width: number; height: number; onClose: () => void; children: React.ReactNode }) {
+  const modalWidth = Math.min(60, width - 8);
+  const modalLeft = Math.floor((width - modalWidth) / 2);
+  const modalHeight = Math.min(24, height - 4);
+  const modalTop = Math.floor((height - modalHeight) / 2);
+
+  return (
+    <>
+      <box style={{ position: 'absolute', top: 0, left: 0, width, height, backgroundColor: '#000000aa' }} onMouseDown={onClose} />
+      <box style={{ position: 'absolute', top: modalTop, left: modalLeft, width: modalWidth, height: modalHeight, flexDirection: 'column', backgroundColor: '#1c1c1c', border: ['top', 'bottom', 'left', 'right'], borderStyle: 'single', borderColor: '#3a3a3a' }}><box style={{ flexDirection: 'row', paddingLeft: 1, paddingRight: 1, height: 1, borderStyle: 'single', border: ['bottom'], borderColor: '#3a3a3a' }}><box style={{ flexGrow: 1 }}><text fg="#ffffff" style={{ attributes: TextAttributes.BOLD }}>{String(title)}</text></box><box><text fg="#666666">esc</text></box></box><box style={{ flexDirection: 'column', flexGrow: 1, overflow: 'hidden' }}>{children}</box></box>
+    </>
+  );
+}
+
+// Command Item - Same line name and shortcut
+function CommandItem({ name, description, shortcut, isSelected, onHover, onClick }: { name: string; description?: string; shortcut?: string; isSelected: boolean; onHover: () => void; onClick: () => void }) {
+  return (
+    <box onMouseMove={onHover} onMouseDown={onClick} style={{ flexDirection: 'row', backgroundColor: isSelected ? '#f97316' : 'transparent', paddingLeft: 1, paddingRight: 1 }}><box style={{ flexGrow: 1, flexDirection: 'row' }}><text fg={isSelected ? '#000000' : '#ffffff'} style={{ attributes: isSelected ? TextAttributes.BOLD : 0 }}>{String(name)}</text>{description ? <text fg={isSelected ? '#000000' : '#888888'}> {String(description)}</text> : null}</box><box style={{ flexShrink: 0 }}>{shortcut ? <text fg={isSelected ? '#000000' : '#666666'}>{String(shortcut)}</text> : null}</box></box>
+  );
+}
+
+// Helper to read clipboard
+function getClipboard(): Promise<string> {
+  return new Promise((resolve) => {
+    const platform = process.platform;
+    let command = '';
+    if (platform === 'win32') command = 'powershell -command "Get-Clipboard"';
+    else if (platform === 'darwin') command = 'pbpaste';
+    else command = 'xclip -o -selection clipboard'; 
+
+    exec(command, (err, stdout) => {
+      if (err) resolve('');
+      else resolve(stdout.trim());
+    });
+  });
+}
+
+function App({ initialPrompt, variant: initialVariant, runInteractive }: AppProps) {
+  const [config, setConfig] = useState<JarvisConfig | null>(null);
+  const [currentSession, setCurrentSession] = useState<Session | null>(null);
+  const [agent, setAgent] = useState<AgentConfig | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [variant, setVariant] = useState<string | undefined>(initialVariant);
+  const [pastedContent, setPastedContent] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState<number>(-1);
+  const [tempInput, setTempInput] = useState('');
+  const [streamingText, setStreamingText] = useState('');
+  const [streamingThinking, setStreamingThinking] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [mode, setMode] = useState<'chat' | 'commands' | 'models' | 'agents' | 'variants' | 'providers' | 'auth' | 'settings' | 'skills'>('chat');
+  const [authStep, setAuthStep] = useState<'list' | 'method' | 'apikey'>('list');
+  const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null);
+  const [selectionIndex, setSelectionIndex] = useState(0);
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [skillStep, setSkillStep] = useState<'list' | 'create'>('list');
+  const [newSkillName, setNewSkillName] = useState('');
+  const [newSkillDesc, setNewSkillDesc] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [totalTokens, setTotalTokens] = useState(0);
+  const [sessionName, setSessionName] = useState('New session');
+  const [hoveredToolIndex, setHoveredToolIndex] = useState<number | null>(null);
+  const [expandedTools, setExpandedTools] = useState<Set<number>>(new Set());
+  const [searchValue, setSearchValue] = useState('');
+  const [accountStats, setAccountStats] = useState({ active: '', count: 0, total: 0 });
+  const scrollRef = useRef<any>(null);
+  const appStartTime = useRef(Date.now());
+  const [shutdownState, setShutdownState] = useState<'none' | 'summary' | 'closing'>('none');
+
+  const { width, height } = useTerminalDimensions();
+
+  const settingsList = useMemo(() => [
+    { id: 'bash', name: 'Execute Commands' },
+    { id: 'read', name: 'Read Files' },
+    { id: 'edit', name: 'Edit Files' },
+    { id: 'webfetch', name: 'Web Access' },
+  ], []);
+
+  const togglePermission = useCallback((id: string) => {
+    if (!config) return;
+    // @ts-ignore
+    const current = config.permission?.[id] || 'ask';
+    const next = current === 'ask' ? 'allow' : current === 'allow' ? 'deny' : 'ask';
+    
+    const newConfig = {
+      ...config,
+      permission: {
+        ...config.permission,
+        [id]: next
+      }
+    };
+    setConfig(newConfig);
+    saveGlobalConfig(newConfig);
+  }, [config]);
+
+  useEffect(() => {
+    if (shutdownState === 'summary') {
+      const timer = setTimeout(() => setShutdownState('closing'), 3500);
+      return () => clearTimeout(timer);
+    }
+    if (shutdownState === 'closing') {
+      const timer = setTimeout(() => {
+        process.stdout.write('\u001b[?25h');
+        process.stdout.write('\u001b[2J\u001b[3J\u001b[H');
+        process.exit(0);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [shutdownState]);
+
+  useEffect(() => {
+    const updateStats = () => {
+      try {
+        const active = getActiveAccount();
+        const stats = getAccountStats();
+        setAccountStats({
+          active: active?.email || '',
+          count: stats.available,
+          total: stats.total
+        });
+        setSkills(loadSkills());
+      } catch (e) {
+        // Ignore errors
+      }
+    };
+    
+    updateStats();
+    const interval = setInterval(updateStats, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const buildCommands = useCallback((): Command[] => [
+    { id: 'login', name: 'Jarvis Auth Login', category: 'Account', action: () => { setMode('auth'); setAuthStep('list'); setSelectionIndex(0); } },
+    { id: 'skills', name: 'Skills', category: 'General', action: () => { setMode('skills'); setSkillStep('list'); setSelectionIndex(0); } },
+    { id: 'settings', name: 'Settings', category: 'General', action: () => { setMode('settings'); setSelectionIndex(0); } },
+    { id: 'show-providers', name: 'Show Providers', category: 'System', action: () => { setMode('providers'); setSelectionIndex(0); } },
+    { id: 'switch-model', name: 'Switch model', shortcut: 'ctrl+x m', category: 'Model', action: () => { setMode('models'); setSelectionIndex(0); } },
+    { id: 'open-editor', name: 'Open editor', shortcut: 'ctrl+x e', category: 'Session', action: () => {} },
+    { id: 'rename-session', name: 'Rename session', shortcut: 'ctrl+r', category: 'Session', action: () => {} },
+    { id: 'undo-previous', name: 'Undo previous message', shortcut: 'ctrl+x u', category: 'Session', action: () => {} },
+    { id: 'clear', name: 'Clear chat', shortcut: 'ctrl+l', category: 'Quick', action: () => { setMessages([]); setTotalTokens(0); setMode('chat'); } },
+    { id: 'new-session', name: 'New session', shortcut: 'ctrl+n', category: 'Quick', action: () => { setCurrentSession(null); setMessages([]); setTotalTokens(0); setSessionName('New session'); setMode('chat'); } },
+    { id: 'exit', name: 'Exit', shortcut: 'ctrl+c', category: 'System', action: () => setShutdownState('summary') },
+  ], []);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const cfg = loadConfig(); setConfig(cfg);
+        await initializeProviders(cfg); initializeAgents(cfg.agent); initializeTools();
+        const primaryAgents = getPrimaryAgents(); const initialAgent = primaryAgents[0] || getAgent('build');
+        if (initialAgent) setAgent(initialAgent);
+        if (initialPrompt) setInputValue(initialPrompt);
+      } catch (err) { setError(`Init Error: ${(err as Error).message}`); }
+    };
+    init();
+  }, [initialPrompt]);
+
+  const availableModels: ModelWithVariants[] = config ? getAvailableModels(config).map(m => ({ ...m, variants: getModelConfig(config, m.id)?.variants })) : [];
+  const providersList = getProvidersWithStatus();
+  const primaryAgents = getPrimaryAgents();
+  const commands = buildCommands();
+  const filteredCommands = commands;
+
+  const currentVariants = useMemo(() => {
+    if (!config?.model) return [];
+    const modelCfg = getModelConfig(config, config.model);
+    return modelCfg?.variants ? Object.keys(modelCfg.variants) : [];
+  }, [config]);
+
+  const getModelDisplayName = useCallback((modelId: string) => {
+    if (!config) return modelId;
+    return getModelConfig(config, modelId)?.name || modelId.split('/').pop() || 'unknown';
+  }, [config]);
+
+  const getProviderDisplayName = useCallback((modelId: string) => {
+    if (modelId.includes('google')) return 'Google';
+    if (modelId.includes('anthropic')) return 'Antigravity';
+    return 'OpenAI';
+  }, []);
+
+  useKeyboard((key) => {
+    if (key.ctrl && key.name === 'c') {
+      setShutdownState('summary');
+      return;
+    }
+    if (key.ctrl && key.name === 'v') { handlePaste(); return; }
+    if (mode === 'chat') {
+      if (key.ctrl && key.name === 'p') { setMode('commands'); setSelectionIndex(0); setSearchValue(''); return; }
+      if (key.ctrl && key.name === 'm') { setMode('models'); setSelectionIndex(0); return; }
+      if (key.ctrl && key.name === 't') { setMode('variants'); setSelectionIndex(0); return; }
+      if (key.name === 'tab') { const next = agent?.id === 'build' ? getAgent('plan') : getAgent('build'); if (next) setAgent(next); return; }
+      
+      if (key.name === 'up') {
+        if (history.length === 0) return;
+        const newIndex = historyIndex === -1 ? history.length - 1 : Math.max(0, historyIndex - 1);
+        if (historyIndex === -1) setTempInput(inputValue);
+        setHistoryIndex(newIndex);
+        setInputValue(history[newIndex] || '');
+        return;
+      }
+      if (key.name === 'down') {
+        if (historyIndex === -1) return;
+        const newIndex = historyIndex + 1;
+        if (newIndex >= history.length) {
+          setHistoryIndex(-1);
+          setInputValue(tempInput);
+        } else {
+          setHistoryIndex(newIndex);
+          setInputValue(history[newIndex] || '');
+        }
+        return;
+      }
+    }
+    if (mode === 'commands' || mode === 'models' || mode === 'agents' || mode === 'variants' || mode === 'providers' || mode === 'auth' || mode === 'settings' || mode === 'skills') {
+      if (key.name === 'escape') { setMode('chat'); setSearchValue(''); return; }
+      if (key.name === 'up') { setSelectionIndex((i) => Math.max(0, i - 1)); return; }
+      if (key.name === 'down') {
+        const max = mode === 'commands' ? filteredCommands.length - 1 
+          : mode === 'models' ? availableModels.length - 1 
+          : mode === 'agents' ? primaryAgents.length - 1 
+          : mode === 'variants' ? currentVariants.length - 1 
+          : mode === 'providers' ? providersList.length - 1
+          : mode === 'auth' ? (authStep === 'list' ? authProviders.length : authStep === 'method' ? 1 : 0)
+          : mode === 'settings' ? 3
+          : mode === 'skills' ? (skillStep === 'list' ? skills.length : 0)
+          : 0;
+        setSelectionIndex((i) => Math.min(max, i + 1)); return;
+      }
+      if (key.name === 'return') {
+        if (mode === 'commands') { const cmd = filteredCommands[selectionIndex]; if (cmd) cmd.action(); }
+        else if (mode === 'models') { const m = availableModels[selectionIndex]; if (m && config) { config.model = m.id; setConfig({ ...config }); setMode('chat'); } }
+        else if (mode === 'agents') { const a = primaryAgents[selectionIndex]; if (a) { setAgent(a); setMode('chat'); } }
+        else if (mode === 'variants') { const v = currentVariants[selectionIndex]; if (v) { setVariant(v); setMode('chat'); } }
+        else if (mode === 'providers') { setMode('chat'); }
+        else if (mode === 'settings') {
+           const s = settingsList[selectionIndex];
+           if (s) togglePermission(s.id);
+        }
+        else if (mode === 'skills') {
+          if (skillStep === 'list') {
+            if (selectionIndex === 0) { // Create New
+              setSkillStep('create');
+              setNewSkillName('');
+              setNewSkillDesc('');
+              setInputValue('');
+            } else {
+              const s = skills[selectionIndex - 1];
+              if (s) {
+                setInputValue((prev) => prev + (prev ? '\n' : '') + `Use skill: ${s.name}`);
+                setMode('chat');
+              }
+            }
+          }
+        }
+        else if (mode === 'auth') {
+          if (authStep === 'list') {
+            const p = authProviders[selectionIndex];
+            if (p) {
+              setSelectedProviderId(p.id);
+              if (p.id === 'google') { 
+                setAuthStep('method');
+                setSelectionIndex(0);
+              } else {
+                setAuthStep('apikey');
+                setInputValue('');
+              }
+            }
+          } else if (authStep === 'method') {
+            if (selectionIndex === 0) {
+              setMode('chat');
+              startAntigravityLogin().catch(e => setError(e.message));
+            } else {
+              setAuthStep('apikey');
+              setInputValue('');
+            }
+          }
+        }
+        setSearchValue('');
+      }
+    }
+  });
+
+  const handlePaste = useCallback(async () => {
+    const text = await getClipboard();
+    if (!text) return;
+    const lines = text.split('\n');
+    if (lines.length > 1 || text.length > 100) {
+      setPastedContent(text);
+      setInputValue(`Pasted ${lines.length} lines (${text.length} chars). Press Enter to send.`);
+    } else {
+      setInputValue((prev) => prev + text);
+    }
+  }, []);
+
+  const handleSubmit = useCallback(async (text: string) => {
+    if (mode === 'skills' && skillStep === 'create') {
+      if (!newSkillName) {
+        setNewSkillName(text);
+        setInputValue('');
+        return;
+      }
+      addSkill(newSkillName, text);
+      setSkills(loadSkills());
+      setMode('chat');
+      setInputValue('');
+      setSkillStep('list');
+      return;
+    }
+
+    if (mode === 'auth' && authStep === 'apikey' && selectedProviderId) {
+      saveApiKey(selectedProviderId, text.trim());
+      setMode('chat');
+      setInputValue('');
+      setAuthStep('list');
+      return;
+    }
+
+    let contentToSend = text;
+    if (pastedContent && text.startsWith('Pasted ')) {
+      contentToSend = pastedContent;
+      setPastedContent(null);
+    }
+    if (!agent || isLoading || !contentToSend.trim()) return;
+    setHistory(prev => [...prev, contentToSend]);
+    setHistoryIndex(-1);
+    setTempInput('');
+    let sess = currentSession; if (!sess) { sess = createSession(agent.id); setCurrentSession(sess); setSessionName(contentToSend.split('\n')[0]?.slice(0, 50) || 'New session'); }
+    setMessages((prev) => [...prev, { role: 'user', content: contentToSend }]); setInputValue(''); setIsLoading(true); setStreamingText(''); setStreamingThinking(''); setError(null);
+    const startTime = Date.now();
+    try {
+      const result = await executeAgent(contentToSend, { session: sess, agent: { ...agent, model: config?.model }, modelOptions: { variant }, onText: (chunk) => setStreamingText((prev) => prev + chunk), onThinking: (thought) => setStreamingThinking((prev) => prev + thought) });
+      const updated = getSession(sess.id);
+      if (updated) {
+        setCurrentSession({ ...updated }); const lastMsg = updated.messages.filter((m) => m.role === 'assistant').pop();
+        if (lastMsg) {
+          setMessages((prev) => [...prev, { role: 'assistant', content: lastMsg.content as string, thinking: streamingThinking || undefined, agentName: agent.name, modelName: config?.model?.split('/').pop() || 'unknown', duration: Date.now() - startTime, usage: result.usage }]);
+          if (result.usage?.totalTokens) setTotalTokens(prev => prev + result.usage.totalTokens);
+        }
+      }
+    } catch (err) { setError((err as Error).message); } finally { setIsLoading(false); setStreamingText(''); setStreamingThinking(''); }
+  }, [agent, isLoading, currentSession, config, streamingThinking, pastedContent, variant]);
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages.length, streamingText, streamingThinking, expandedTools]);
+
+  const costEstimate = (totalTokens / 1000000) * 0.15;
+  const usagePercent = Math.round((totalTokens / 100000) * 100) || 0;
+  const displaySessionName = sessionName.length > 25 ? sessionName.slice(0, 22) + '...' : sessionName;
+
+  const subAgentCount = useMemo(() => {
+    let count = 0;
+    for (const msg of messages) {
+      if (msg.role === 'assistant' && msg.toolCalls) {
+        for (const tc of msg.toolCalls) {
+          if (tc.name === 'task') count++;
+        }
+      }
+    }
+    return count;
+  }, [messages]);
+
+  if (!config || !agent) return <box style={{ width, height, alignItems: 'center', justifyContent: 'center' }}><text fg="#06b6d4">Initializing J.A.R.V.I.S. systems...</text></box>;
+
+  return (
+    <box style={{ flexDirection: 'column', width, height, backgroundColor: '#0a0a0a' }}>
+      <box style={{ paddingLeft: 1, paddingRight: 1, paddingTop: 1, height: 1, flexDirection: 'row' }}>
+        <box style={{ flexGrow: 1, overflow: 'hidden' }}>
+          <text fg="#888888"># {String(displaySessionName)}</text>
+        </box>
+        <box style={{ flexDirection: 'row', flexShrink: 0 }}>
+          <text fg="#666666">{String(totalTokens.toLocaleString())}  </text>
+          <text fg="#666666">{String(usagePercent)}% </text>
+          <text fg="#666666">(${String(costEstimate.toFixed(2))}) </text>
+          <text fg="#666666">v1.0.3</text>
+        </box>
+      </box>
+      <scrollbox ref={scrollRef} style={{ flexGrow: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1 }} focused={false}>
+        <box style={{ flexDirection: 'column', minHeight: 1 }}>
+          {messages.map((msg, i) => (
+            msg.role === 'user' ? (
+              <UserMessage key={i} content={msg.content} />
+            ) : (
+              <AssistantMessage key={i} message={msg} expandedTools={expandedTools} onToggleTool={(idx) => setExpandedTools(prev => {const n = new Set(prev); if(n.has(idx)) n.delete(idx); else n.add(idx); return n;})} hoveredToolIndex={hoveredToolIndex} onHoverTool={setHoveredToolIndex} />
+            )
+          ))}
+          {streamingThinking ? (
+            <box style={{ marginBottom: 1 }}>
+              <box style={{ border: ['left'], borderStyle: 'single', borderColor: '#d97706', paddingLeft: 1, flexDirection: 'column' }}>
+                <text fg="#d97706" style={{ attributes: TextAttributes.ITALIC }}>Thinking:</text>
+                {String(streamingThinking).split('\n').map((line, i) => <text key={i} fg="#888888">{String(line)}</text>)}
+              </box>
+            </box>
+          ) : null}
+          {streamingText ? (
+            <box style={{ marginBottom: 1 }}>
+              <MarkdownText content={streamingText} />
+            </box>
+          ) : null}
+        </box>
+      </scrollbox>
+      {error ? <box style={{ padding: 1, backgroundColor: '#7f1d1d' }}><text fg="#fca5a5">{String(error)}</text></box> : null}
+      <box style={{ 
+        flexDirection: 'column', 
+        backgroundColor: '#1a1a1a', 
+        border: ['left'],
+        borderStyle: 'single',
+        borderColor: '#06b6d4',
+        marginLeft: 1,
+        marginRight: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 1,
+        paddingBottom: 1,
+        height: 5
+      }} onMouseDown={(e: any) => { if (e.button === 2) handlePaste(); }}>
+        <box style={{ height: 1 }}>
+          <input 
+            focused={mode === 'chat' || (mode === 'auth' && authStep === 'apikey')} 
+            value={inputValue} 
+            onInput={(v) => { if (pastedContent) setPastedContent(null); setInputValue(v || ''); }} 
+            onSubmit={handleSubmit} 
+            placeholder={
+              mode === 'auth' && authStep === 'apikey' ? `Enter API Key for ${selectedProviderId}` :
+              isLoading ? 'Responding...' : ''
+            }
+            onMouseDown={(e: any) => { if (e.button === 2) handlePaste(); }}
+          />
+        </box>
+        <box style={{ height: 1 }} onMouseDown={(e: any) => { if (e.button === 2) handlePaste(); }} />
+        <box style={{ flexDirection: 'row', height: 1 }}>
+          <text fg="#06b6d4" style={{ attributes: TextAttributes.BOLD }}>{String(agent.name.toUpperCase())} </text>
+          <text fg="#ffffff">{String(getModelDisplayName(config.model || ''))} </text>
+          <text fg="#666666">{String(getProviderDisplayName(config.model || ''))}</text>
+          {accountStats.total > 0 ? <text fg="#666666"> · </text> : null}
+          {accountStats.total > 0 ? <text fg="#eab308">{String(accountStats.active)}</text> : null}
+          {accountStats.total > 0 ? <text fg="#666666"> ({String(accountStats.count)}/{String(accountStats.total)})</text> : null}
+          {skills.length > 0 ? <text fg="#666666"> · Skills: {String(skills.length)}</text> : null}
+          {subAgentCount > 0 ? <text fg="#666666"> · Sub-agents: {String(subAgentCount)}</text> : null}
+        </box>
+      </box>
+      <box style={{ flexDirection: 'row', justifyContent: 'flex-end', marginRight: 2, marginBottom: 1, height: 1 }}>
+        <box style={{ flexDirection: 'row' }}>
+          <text fg="#ffffff" style={{ attributes: TextAttributes.BOLD }}>ctrl+t</text><text fg="#666666"> variants   </text>
+          <text fg="#ffffff" style={{ attributes: TextAttributes.BOLD }}>tab</text><text fg="#666666"> agents   </text>
+          <text fg="#ffffff" style={{ attributes: TextAttributes.BOLD }}>ctrl+p</text><text fg="#666666"> commands</text>
+        </box>
+      </box>
+      {mode === 'commands' ? (
+        <Modal title="Commands" width={width} height={height} onClose={() => { setMode('chat'); setSearchValue(''); }}>
+          <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused={mode === 'commands'}>
+            {filteredCommands.map((cmd, i) => <CommandItem key={cmd.id} name={cmd.name} shortcut={cmd.shortcut} isSelected={i === selectionIndex} onHover={() => setSelectionIndex(i)} onClick={cmd.action} />)}
+          </scrollbox>
+        </Modal>
+      ) : null}
+      {mode === 'models' ? (
+        <Modal title="Models" width={width} height={height} onClose={() => setMode('chat')}>
+          <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused>
+            {availableModels.map((m, i) => <CommandItem key={m.id} name={m.name} isSelected={i === selectionIndex} onHover={() => setSelectionIndex(i)} onClick={() => { if(config){ config.model = m.id; setConfig({...config}); setMode('chat'); } }} />)}
+          </scrollbox>
+        </Modal>
+      ) : null}
+      {mode === 'variants' ? (
+        <Modal title="Variants" width={width} height={height} onClose={() => setMode('chat')}>
+          <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused>
+            {currentVariants.map((v, i) => <CommandItem key={v} name={v} isSelected={i === selectionIndex} onHover={() => setSelectionIndex(i)} onClick={() => { if(v) { setVariant(v); setMode('chat'); } }} />)}
+          </scrollbox>
+        </Modal>
+      ) : null}
+      {mode === 'providers' ? (
+        <Modal title="Providers" width={width} height={height} onClose={() => setMode('chat')}>
+          <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused>
+            {providersList.map((p, i) => (
+              <CommandItem 
+                key={p.id} 
+                name={p.name} 
+                description={p.isAvailable ? 'Connected' : `Missing ${p.envVar}`} 
+                isSelected={i === selectionIndex} 
+                onHover={() => setSelectionIndex(i)} 
+                onClick={() => setMode('chat')} 
+              />
+            ))}
+          </scrollbox>
+        </Modal>
+      ) : null}
+      {mode === 'settings' ? (
+        <Modal title="Privacy & Security" width={width} height={height} onClose={() => setMode('chat')}>
+          <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused>
+            {settingsList.map((s, i) => (
+              <CommandItem 
+                key={s.id} 
+                name={s.name} 
+                description={String((config?.permission as any)?.[s.id] || 'ask')} 
+                isSelected={i === selectionIndex} 
+                onHover={() => setSelectionIndex(i)} 
+                onClick={() => togglePermission(s.id)} 
+              />
+            ))}
+          </scrollbox>
+        </Modal>
+      ) : null}
+      {mode === 'auth' ? (
+        <Modal title="Connect Account" width={width} height={height} onClose={() => { setMode('chat'); setAuthStep('list'); }}>
+          {authStep === 'list' ? (
+            <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused>
+              {authProviders.map((p, i) => (
+                <CommandItem 
+                  key={p.id} 
+                  name={p.name + (p.id === 'google' ? ' (Recommended)' : '')}
+                  description={p.description} 
+                  isSelected={i === selectionIndex} 
+                  onHover={() => setSelectionIndex(i)} 
+                  onClick={() => {
+                    setSelectedProviderId(p.id);
+                    if (p.id === 'google') {
+                      setAuthStep('method');
+                      setSelectionIndex(0);
+                    } else {
+                      setAuthStep('apikey');
+                      setInputValue('');
+                    }
+                  }} 
+                />
+              ))}
+            </scrollbox>
+          ) : authStep === 'method' ? (
+            <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused>
+              <CommandItem 
+                name="OAuth with Google (Recommended)"
+                description="Uses Google account, no API key needed"
+                isSelected={selectionIndex === 0}
+                onHover={() => setSelectionIndex(0)}
+                onClick={() => { setMode('chat'); startAntigravityLogin().catch(e => setError(e.message)); }}
+              />
+              <CommandItem 
+                name="Enter API Key"
+                description="Use your own Google AI Studio API key"
+                isSelected={selectionIndex === 1}
+                onHover={() => setSelectionIndex(1)}
+                onClick={() => { setAuthStep('apikey'); setInputValue(''); }}
+              />
+            </scrollbox>
+          ) : (
+            <box style={{ padding: 1, flexDirection: 'column' }}>
+              <text fg="#ffffff">Enter your API key below for {String(selectedProviderId)}:</text>
+              <text fg="#666666">Press Enter to save.</text>
+            </box>
+          )}
+        </Modal>
+      ) : null}
+      {mode === 'skills' ? (
+        <Modal title="Skills" width={width} height={height} onClose={() => setMode('chat')}>
+          {skillStep === 'list' ? (
+            <scrollbox style={{ flexDirection: 'column', flexGrow: 1, paddingTop: 1 }} focused>
+              <CommandItem 
+                name="+ Create New Skill" 
+                description="Add a new capability" 
+                isSelected={selectionIndex === 0} 
+                onHover={() => setSelectionIndex(0)} 
+                onClick={() => {
+                  setSkillStep('create');
+                  setNewSkillName('');
+                  setNewSkillDesc('');
+                  setInputValue('');
+                }} 
+              />
+              {skills.map((s, i) => (
+                <CommandItem 
+                  key={s.name} 
+                  name={s.name} 
+                  description={s.description.slice(0, 50)} 
+                  isSelected={i + 1 === selectionIndex} 
+                  onHover={() => setSelectionIndex(i + 1)} 
+                  onClick={() => {
+                    setInputValue((prev) => prev + (prev ? '\n' : '') + `Use skill: ${s.name}`);
+                    setMode('chat');
+                  }} 
+                />
+              ))}
+            </scrollbox>
+          ) : (
+            <box style={{ padding: 1, flexDirection: 'column' }}>
+              <text fg="#ffffff">{!newSkillName ? 'Enter Skill Name:' : 'Enter Skill Description:'}</text>
+              <text fg="#666666">Type in the main input box below and press Enter.</text>
+              {newSkillName ? <text fg="#06b6d4" style={{ marginTop: 1 }}>Name: {String(newSkillName)}</text> : null}
+            </box>
+          )}
+        </Modal>
+      ) : null}
+      {shutdownState !== 'none' ? (
+        <box style={{ position: 'absolute', top: 0, left: 0, width, height, alignItems: 'center', justifyContent: 'center', backgroundColor: '#000000', zIndex: 999, flexDirection: 'column' }}>
+           {shutdownState === 'summary' ? (
+             <box style={{ flexDirection: 'column', alignItems: 'center', borderStyle: 'double', borderColor: '#06b6d4', padding: 2 }}>
+               <text fg="#06b6d4" style={{ attributes: TextAttributes.BOLD }}>SESSION COMPLETE</text>
+               <box style={{ height: 1 }} />
+               <text fg="#ffffff">Duration: {String(Math.floor((Date.now() - appStartTime.current) / 1000))}s</text>
+               <text fg="#ffffff">Tokens: {String(totalTokens.toLocaleString())}</text>
+               <text fg="#ffffff">Cost: ${String(costEstimate.toFixed(4))}</text>
+               <box style={{ height: 1 }} />
+               <text fg="#666666">Have a good evening.</text>
+             </box>
+           ) : (
+             <text fg="#06b6d4">Powering down...</text>
+           )}
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+export async function startTui(props: AppProps) {
+  const renderer = await createCliRenderer({ 
+    useMouse: true, 
+    enableMouseMovement: true,
+    onDestroy: () => {
+      process.stdout.write('\u001b[?25h'); // Show cursor
+      process.stdout.write('\u001b[2J\u001b[3J\u001b[H'); // Clear screen
+    }
+  });
+
+  const runInteractive = async (task: () => Promise<void>) => {
+    renderer.suspend();
+    process.stdout.write('\u001b[2J\u001b[3J\u001b[H');
+    try {
+      await task();
+    } finally {
+      renderer.resume();
+    }
+  };
+
+  createRoot(renderer).render(<App {...props} runInteractive={runInteractive} />);
+}