thatgfsj-code 0.5.0 → 0.6.0

package/install.ps1

@@ -1,238 +1,217 @@
 # Thatgfsj Code Installer for Windows
-# Usage: 
-#   powershell -c "irm https://raw.githubusercontent.com/Thatgfsj/thatgfsj-code/main/install.ps1 | iex"
-#   powershell -c "& ([scriptblock]::Create((irm https://raw.githubusercontent.com/Thatgfsj/thatgfsj-code/main/install.ps1)))"
-
-param(
-    [switch]$NoOpen,
-    [switch]$DryRun
-)
+# Works on any Windows machine - auto-downloads Node.js if needed
+#
+# Usage:
+#   irm https://raw.githubusercontent.com/Thatgfsj/thatgfsj-code/master/install.ps1 | iex
 
 $ErrorActionPreference = "Stop"
 
-# Colors
-function Write-Step { param($msg) Write-Host "[*] $msg" -ForegroundColor Yellow }
-function Write-Success { param($msg) Write-Host "[✓] $msg" -ForegroundColor Green }
-function Write-Error { param($msg) Write-Host "[✗] $msg" -ForegroundColor Red }
-function Write-Info { param($msg) Write-Host "    $msg" -ForegroundColor Gray }
+function Log($msg)  { Write-Host "  $msg" -ForegroundColor Gray }
+function Step($msg) { Write-Host "  > $msg" -ForegroundColor Cyan }
+function Ok($msg)   { Write-Host "  OK $msg" -ForegroundColor Green }
+function Fail($msg) { Write-Host "  !! $msg" -ForegroundColor Red }
 
 Write-Host ""
-Write-Host "  Thatgfsj Code 安装向导" -ForegroundColor Cyan
-Write-Host "  =======================" -ForegroundColor Cyan
+Write-Host "  Thatgfsj Code Installer" -ForegroundColor Cyan
+Write-Host "  ────────────────────────" -ForegroundColor DarkGray
 Write-Host ""
 
-if ($DryRun) {
-    Write-Host "[DRY RUN] 仅显示将要执行的操作" -ForegroundColor Yellow
-    Write-Host ""
-}
-
-# ============== Step 1: Check PowerShell ==============
-Write-Step "检查 PowerShell 版本..."
+# ── Helper: Refresh PATH from registry ────────────────────
 
-if ($PSVersionTable.PSVersion.Major -lt 5) {
-    Write-Error "需要 PowerShell 5.0 或更高版本"
-    Write-Host "请升级您的 PowerShell: https://aka.ms/powershell" -ForegroundColor Gray
-    exit 1
+function Refresh-Path {
+    $machinePath = [System.Environment]::GetEnvironmentVariable("Path", "Machine")
+    $userPath = [System.Environment]::GetEnvironmentVariable("Path", "User")
+    $env:Path = "$machinePath;$userPath"
 }
-Write-Success "PowerShell $($PSVersionTable.PSVersion) 检测正常"
 
-# ============== Step 2: Check/Fetch Node.js ==============
-Write-Step "检查 Node.js..."
+# ── Helper: Download file with progress ───────────────────
 
-function Test-NodeInstalled {
+function Download-File {
+    param($url, $dest)
+    Log "Downloading $url ..."
     try {
-        $nodeVersion = node --version 2>$null
-        if ($nodeVersion) {
-            $version = [int]($nodeVersion -replace 'v(\d+)\..*', '$1')
-            return @{ installed = $true; version = $nodeVersion; major = $version }
-        }
-    } catch {}
-    return @{ installed = $false; version = $null; major = 0 }
+        $wc = New-Object System.Net.WebClient
+        $wc.DownloadFile($url, $dest)
+    } catch {
+        # Fallback to Invoke-WebRequest
+        Invoke-WebRequest -Uri $url -OutFile $dest -UseBasicParsing
+    }
 }
 
-$nodeStatus = Test-NodeInstalled
-if ($nodeStatus.installed -and $nodeStatus.major -ge 18) {
-    Write-Success "Node.js $($nodeStatus.version) 已安装"
-} else {
-    Write-Host "    未检测到 Node.js 18+，开始安装..." -ForegroundColor Gray
-    
-    # Try winget first
-    if (Get-Command winget -ErrorAction SilentlyContinue) {
-        Write-Info "使用 winget 安装..."
-        winget install OpenJS.NodeJS.LTS --source winget --accept-package-agreements --accept-source-agreements
-        
-        # Refresh PATH
-        $env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")
-        
-        $nodeStatus = Test-NodeInstalled
-        if ($nodeStatus.installed) {
-            Write-Success "Node.js 安装完成"
-        } else {
-            Write-Host "    需要重启 PowerShell 后重新运行安装" -ForegroundColor Yellow
-            exit 0
-        }
-    }
-    # Try choco
-    elseif (Get-Command choco -ErrorAction SilentlyContinue) {
-        Write-Info "使用 Chocolatey 安装..."
-        choco install nodejs-lts -y
-        Write-Success "Node.js 安装完成 (可能需要重启)"
+# ── Helper: Install Node.js by downloading binary ─────────
+
+function Install-NodeJs-Binary {
+    Log "Downloading Node.js LTS binary..."
+
+    $nodeVersion = "v22.16.0"
+    $arch = if ([Environment]::Is64BitOperatingSystem) { "x64" } else { "x86" }
+    $filename = "node-$nodeVersion-win-$arch"
+    $zipUrl = "https://nodejs.org/dist/$nodeVersion/$filename.zip"
+
+    $tempDir = Join-Path $env:TEMP "gfcode-node-install"
+    $zipFile = Join-Path $tempDir "$filename.zip"
+    $extractDir = Join-Path $tempDir $filename
+
+    # Clean up previous attempts
+    if (Test-Path $tempDir) { Remove-Item $tempDir -Recurse -Force }
+    New-Item -ItemType Directory -Path $tempDir -Force | Out-Null
+
+    # Download
+    Download-File $zipUrl $zipFile
+
+    # Extract
+    Log "Extracting..."
+    Expand-Archive -Path $zipFile -DestinationPath $tempDir -Force
+
+    # Move to install location
+    $installBase = Join-Path $env:USERPROFILE ".gfcode-node"
+    if (Test-Path $installBase) { Remove-Item $installBase -Recurse -Force }
+    Move-Item $extractDir $installBase
+
+    # Add to PATH (current session + user env)
+    $nodeBin = $installBase
+    $env:Path = "$nodeBin;$env:Path"
+
+    # Persist to user PATH
+    $userPath = [System.Environment]::GetEnvironmentVariable("Path", "User")
+    if ($userPath -notlike "*$nodeBin*") {
+        [System.Environment]::SetEnvironmentVariable("Path", "$nodeBin;$userPath", "User")
     }
-    # Manual fallback
-    else {
-        Write-Host ""
-        Write-Error "未检测到包管理器 (winget/choco/scoop)"
-        Write-Host ""
-        Write-Host "请手动安装 Node.js:" -ForegroundColor Yellow
-        Write-Host "  1. 访问 https://nodejs.org" -ForegroundColor Gray
-        Write-Host "  2. 下载 LTS 版本 (推荐 v20 或 v22)" -ForegroundColor Gray
-        Write-Host "  3. 运行安装程序" -ForegroundColor Gray
-        Write-Host "  4. 重新运行此安装脚本" -ForegroundColor Gray
-        Write-Host ""
-        exit 1
+
+    # Cleanup
+    Remove-Item $tempDir -Recurse -Force -ErrorAction SilentlyContinue
+
+    # Verify
+    try {
+        $ver = & "$nodeBin\node.exe" --version
+        Ok "Node.js $ver (portable)"
+        return $true
+    } catch {
+        return $false
     }
 }
 
-# ============== Step 3: Clone/Update Repository ==============
-Write-Step "准备安装 Thatgfsj Code..."
+# ── Step 1: Check / Install Node.js ───────────────────────
+
+Step "Checking Node.js..."
 
-$installDir = Join-Path $env:USERPROFILE "thatgfsj-code"
+$nodeOk = $false
 
-if (Test-Path $installDir) {
-    Write-Info "检测到已有安装，正在更新..."
-    if (-not $DryRun) {
-        Set-Location $installDir
-        git pull origin main 2>$null
-        if ($LASTEXITCODE -ne 0) {
-            # If pull fails, re-clone
-            Remove-Item $installDir -Recurse -Force
+# Check if node is available
+try {
+    $ver = node --version 2>$null
+    if ($ver) {
+        $major = [int]($ver -replace 'v(\d+)\..*', '$1')
+        if ($major -ge 18) {
+            Ok "Node.js $ver"
+            $nodeOk = $true
+        } else {
+            Log "Node.js $ver found but too old (need 18+)"
         }
     }
-} else {
-    if (-not $DryRun) {
-        Write-Info "正在克隆仓库..."
-        git clone https://github.com/Thatgfsj/thatgfsj-code.git $installDir
-        Set-Location $installDir
+} catch {}
+
+if (-not $nodeOk) {
+    Log "Node.js 18+ not found."
+
+    # Try 1: winget
+    if (-not $nodeOk -and (Get-Command winget -ErrorAction SilentlyContinue)) {
+        Log "Trying winget..."
+        try {
+            winget install OpenJS.NodeJS.LTS --accept-package-agreements --accept-source-agreements 2>&1 | Out-Null
+            Refresh-Path
+            $ver = node --version 2>$null
+            if ($ver -and [int]($ver -replace 'v(\d+)\..*', '$1') -ge 18) {
+                Ok "Node.js $ver via winget"
+                $nodeOk = $true
+            }
+        } catch {}
     }
-}
-
-if (-not (Test-Path (Join-Path $installDir "package.json"))) {
-    Write-Error "安装目录无效: $installDir"
-    exit 1
-}
-
-Write-Success "代码准备完成: $installDir"
 
-# ============== Step 4: Install Dependencies ==============
-Write-Step "安装依赖..."
+    # Try 2: choco
+    if (-not $nodeOk -and (Get-Command choco -ErrorAction SilentlyContinue)) {
+        Log "Trying Chocolatey..."
+        try {
+            choco install nodejs-lts -y 2>&1 | Out-Null
+            Refresh-Path
+            $ver = node --version 2>$null
+            if ($ver -and [int]($ver -replace 'v(\d+)\..*', '$1') -ge 18) {
+                Ok "Node.js $ver via Chocolatey"
+                $nodeOk = $true
+            }
+        } catch {}
+    }
 
-if (-not $DryRun) {
-    Set-Location $installDir
-    npm install
-    if ($LASTEXITCODE -ne 0) {
-        Write-Error "npm install 失败"
-        exit 1
+    # Try 3: Direct download (works on any machine)
+    if (-not $nodeOk) {
+        $nodeOk = Install-NodeJs-Binary
     }
-    
-    Write-Info "编译 TypeScript..."
-    npm run build
-    if ($LASTEXITCODE -ne 0) {
-        Write-Error "编译失败"
+
+    if (-not $nodeOk) {
+        Fail "Failed to install Node.js"
+        Log "Please install manually: https://nodejs.org"
         exit 1
     }
 }
-Write-Success "依赖安装完成"
 
-# ============== Step 5: Link Command ==============
-Write-Step "设置命令..."
+# ── Step 2: Install gfcode via npm ────────────────────────
+
+Step "Installing thatgfsj-code..."
+
+$npmPath = Join-Path (Split-Path (Get-Command node).Source) "npm.cmd"
+$npmGlobalPrefix = & node -e "console.log(require('path').resolve(process.execPath, '..','..'))" 2>$null
+$npmBinDir = Join-Path $npmGlobalPrefix "bin"
 
-if (-not $DryRun) {
-    npm link
+# Install globally
+$env:npm_config_prefix = $npmGlobalPrefix
+& node (Join-Path (Split-Path (Get-Command node).Source) "node_modules\npm\bin\npm-cli.js") install -g thatgfsj-code 2>&1 | Out-Null
+
+if ($LASTEXITCODE -ne 0) {
+    # Fallback: try npm directly
+    npm install -g thatgfsj-code 2>&1 | Out-Null
 }
-Write-Success "命令 'gfcode' 已可用"
 
-# ============== Step 6: Setup API Key ==============
-Write-Host ""
-Write-Step "配置 API Key (可选)..."
-
-$apiKeySet = $false
-$providers = @{
-    "1" = @{name="SiliconFlow (推荐)"; var="SILICONFLOW_API_KEY"; url="https://siliconflow.cn"}
-    "2" = @{name="MiniMax"; var="MINIMAX_API_KEY"; url="https://platform.minimax.io"}
-    "3" = @{name="OpenAI"; var="OPENAI_API_KEY"; url="https://platform.openai.com"}
-    "4" = @{name="Anthropic"; var="ANTHROPIC_API_KEY"; url="https://www.anthropic.com"}
-    "5" = @{name="Google Gemini"; var="GEMINI_API_KEY"; url="https://aistudio.google.com/app/apikey"}
-    "6" = @{name="跳过 (稍后配置)"; var=""; url=""}
+if ($LASTEXITCODE -ne 0) {
+    Fail "npm install failed"
+    exit 1
 }
 
-Write-Host ""
-Write-Host "    选择 AI Provider:" -ForegroundColor White
-Write-Host ""
-foreach ($key in $providers.Keys | Sort-Object) {
-    $p = $providers[$key]
-    Write-Host "    $key. $($p.name)" -ForegroundColor Gray
+Ok "thatgfsj-code installed"
+
+# Make sure gfcode is in PATH for this session
+$npmBin = Join-Path $npmGlobalPrefix "bin"
+if (Test-Path $npmBin) {
+    $env:Path = "$npmBin;$env:Path"
 }
-Write-Host ""
 
-if ($NoOpen) {
-    Write-Host "    使用 --NoOpen 跳过配置" -ForegroundColor Gray
+# ── Step 3: Verify ────────────────────────────────────────
+
+Step "Verifying..."
+
+$gfcodePath = Get-Command gfcode -ErrorAction SilentlyContinue
+if ($gfcodePath) {
+    $cliVer = gfcode --version 2>$null
+    Ok "gfcode v$cliVer"
 } else {
-    $choice = Read-Host "    请选择 (1-6, 直接回车跳过)"
-    
-    if ($choice -and $providers.ContainsKey($choice)) {
-        $selected = $providers[$choice]
-        if ($selected.var) {
-            Write-Host ""
-            Write-Host "    访问 $($selected.url) 获取 API Key" -ForegroundColor Cyan
-            Write-Host "    获取后粘贴到下方" -ForegroundColor Gray
-            Write-Host ""
-            
-            $key = Read-Host "    请输入 API Key (输入后回车)"
-            
-            if ($key) {
-                # Save to config file
-                $configDir = Join-Path $env:USERPROFILE ".thatgfsj"
-                if (-not (Test-Path $configDir)) {
-                    New-Item -ItemType Directory -Path $configDir -Force | Out-Null
-                }
-                
-                $configFile = Join-Path $configDir "config.json"
-                $config = @{
-                    model = "Qwen/Qwen2.5-7B-Instruct"
-                    apiKey = $key
-                    provider = "siliconflow"
-                    temperature = 0.7
-                    maxTokens = 4096
-                }
-                
-                # Set provider-specific defaults
-                switch ($choice) {
-                    "1" { $config.provider = "siliconflow"; $config.model = "Qwen/Qwen2.5-7B-Instruct" }
-                    "2" { $config.provider = "minimax"; $config.model = "MiniMax-M2.5" }
-                    "3" { $config.provider = "openai"; $config.model = "gpt-4o-mini" }
-                    "4" { $config.provider = "anthropic"; $config.model = "claude-3-haiku-20240307" }
-                    "5" { $config.provider = "gemini"; $config.model = "gemini-1.5-flash-8b" }
-                }
-                
-                $config | ConvertTo-Json | Set-Content $configFile -Encoding UTF8
-                Write-Success "配置已保存到: $configFile"
-            }
-        }
+    # Try direct path
+    $directPath = Join-Path $npmGlobalPrefix "bin\gfcode.cmd"
+    if (Test-Path $directPath) {
+        Ok "gfcode installed at $directPath"
+        Log "You may need to restart your terminal."
+    } else {
+        Ok "gfcode installed (restart terminal if command not found)"
     }
 }
 
-# ============== Done ==============
+# ── Done ──────────────────────────────────────────────────
+
 Write-Host ""
-Write-Host "  ======================================" -ForegroundColor Cyan
-Write-Success "  安装完成!"
-Write-Host "  ======================================" -ForegroundColor Cyan
+Write-Host "  ────────────────────────────────" -ForegroundColor DarkGray
+Write-Host "  Done!" -ForegroundColor Green
 Write-Host ""
-Write-Host "  使用方法:" -ForegroundColor White
-Write-Host "    gfcode init          - 重新配置" -ForegroundColor Gray
-Write-Host "    gfcode               - 启动交互模式" -ForegroundColor Gray
-Write-Host "    gfcode '你的问题'    - 直接提问" -ForegroundColor Gray
-Write-Host "    gfcode explain '代码' - 解释代码" -ForegroundColor Gray
-Write-Host "    gfcode debug '代码'   - 调试代码" -ForegroundColor Gray
+Write-Host "  Next steps:" -ForegroundColor White
+Write-Host "    gfcode init            " -ForegroundColor Cyan -NoNewline; Write-Host "# Configure API key" -ForegroundColor DarkGray
+Write-Host "    gfcode                 " -ForegroundColor Cyan -NoNewline; Write-Host "# Start coding" -ForegroundColor DarkGray
 Write-Host ""
-Write-Host "  文档: https://github.com/Thatgfsj/thatgfsj-code" -ForegroundColor Gray
+Write-Host "  Docs: https://github.com/Thatgfsj/thatgfsj-code" -ForegroundColor DarkGray
 Write-Host ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thatgfsj-code",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Thatgfsj Code - AI Coding Assistant",
   "main": "dist/cmd/index.js",
   "type": "module",
@@ -25,12 +25,20 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^11.1.0",
+    "ink": "^7.1.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
     "inquirer": "^13.3.2",
+    "marked": "^15.0.12",
+    "marked-terminal": "^7.3.0",
     "ora": "^7.0.1",
+    "react": "^19.2.7",
     "readline": "^1.3.0"
   },
   "devDependencies": {
+    "@types/marked-terminal": "^6.1.1",
     "@types/node": "^20.10.0",
+    "@types/react": "^19.2.17",
     "typescript": "^5.3.0"
   }
 }

package/src/app/index.ts

@@ -40,7 +40,7 @@ export class App {
     const aiConfig = config.getAIConfig();
 
     const llm = LLMService.fromConfig(aiConfig);
-    const session = new SessionManager();
+    const session = new SessionManager(config.get().contextLength || 50);
     const tools = new ToolRegistry();
     const hooks = new HookManager();
     const prompts = new SystemPromptBuilder({

package/src/cmd/{index.ts → index.tsx}

@@ -2,10 +2,9 @@
 
 /**
  * Thatgfsj Code - CLI Entry Point
- * Simplified from old src/index.ts (655 lines → ~60 lines)
  *
  * Two modes:
- *   gfcode              → Interactive REPL
+ *   gfcode              → Interactive TUI (Ink)
  *   gfcode "prompt"     → Single prompt mode
  *   gfcode init         → Setup wizard
  */
@@ -20,18 +19,18 @@ if (process.platform === 'win32') {
 import { program } from 'commander';
 import chalk from 'chalk';
 import { App } from '../app/index.js';
-import { REPL } from '../tui/repl.js';
 import { WelcomeScreen } from '../tui/welcome.js';
+import { REPLOutput } from '../tui/output.js';
 
 // ==================== Error Handling ====================
 
 process.on('uncaughtException', (error) => {
-  console.error(chalk.red('\n❌ Error:'), error.message);
+  console.error(chalk.red('\n  Error:'), error.message);
   process.exit(1);
 });
 
 process.on('unhandledRejection', (reason) => {
-  console.error(chalk.red('\n❌ Error:'), reason);
+  console.error(chalk.red('\n  Error:'), reason);
   process.exit(1);
 });
 
@@ -39,15 +38,13 @@ process.on('unhandledRejection', (reason) => {
 
 program
   .name('gfcode')
-  .description('🤖 Thatgfsj Code - AI Coding Assistant')
-  .version('0.5.0')
+  .description('Thatgfsj Code - AI Coding Assistant')
+  .version('0.6.0')
   .argument('[prompt]', 'Task to execute (omit to start interactive mode)')
   .option('-m, --model <model>', 'Specify model')
   .option('-i, --interactive', 'Force interactive mode')
-  .option('--hooks', 'Enable audit logging hooks')
-  .action(async (prompt: string | undefined, options: { model?: string; interactive?: boolean; hooks?: boolean }) => {
+  .action(async (prompt: string | undefined, options: { model?: string; interactive?: boolean }) => {
     try {
-      // Initialize app
       const app = await App.create();
 
       // Show welcome if no API key
@@ -58,21 +55,27 @@ program
         await app.config.save({ model: options.model });
       }
 
-      // Enable hooks if requested
-      if (options.hooks) {
-        const { auditLogHook } = await import('../hooks/index.js');
-        app.hooks.register('afterToolCall', auditLogHook);
-      }
-
       if (!prompt || options.interactive) {
-        // Interactive REPL mode
-        const repl = new REPL(app);
-        await repl.start();
+        // Interactive mode - use Ink TUI
+        const { render } = await import('ink');
+        const { TuiApp } = await import('../tui/app.js');
+
+        const { unmount } = render(<TuiApp app={app} />);
+
+        // Wait for the app to exit
+        await new Promise<void>((resolve) => {
+          const check = setInterval(() => {
+            // Ink will call process.exit or we detect it
+          }, 1000);
+          process.on('exit', () => {
+            clearInterval(check);
+            unmount();
+            resolve();
+          });
+        });
       } else {
-        // Single prompt mode - use same UI as REPL
-        const { REPLOutput } = await import('../tui/output.js');
+        // Single prompt mode - use simple output
         const out = new REPLOutput();
-
         out.printBanner();
         out.printUserInput(prompt);
         out.startThinking();
@@ -111,7 +114,6 @@ program
               if (!hasStarted) { out.beginAssistant(); hasStarted = true; }
               out.writeChunk(chunk);
             }
-
             fullResponse += chunk;
           }
           if (hasStarted) out.endAssistant();
@@ -124,18 +126,17 @@ program
         app.session.addMessage('assistant', fullResponse);
       }
     } catch (error: any) {
-      console.error(chalk.red(`\n❌ ${error.message}`));
+      console.error(chalk.red(`\n  ${error.message}`));
       process.exit(1);
     }
   });
 
-// Init command - setup wizard
+// Init command
 program
   .command('init')
-  .description('配置 API Key 和模型')
+  .description('Configure API key and model')
   .action(async () => {
     await WelcomeScreen.interactiveSetup();
   });
 
-// Parse and run
 program.parse(process.argv);

package/src/config/index.ts

@@ -14,6 +14,7 @@ const DEFAULT_CONFIG: Config = {
   apiKey: '',
   temperature: 0.7,
   maxTokens: 4096,
+  contextLength: 50,
   provider: 'siliconflow',
 };
 

package/src/config/types.ts

@@ -32,6 +32,7 @@ export interface Config {
   apiKey: string;
   temperature: number;
   maxTokens: number;
+  contextLength: number;
   provider: ProviderName;
   baseUrl?: string;
 }

package/src/tui/app.tsx

@@ -0,0 +1,60 @@
+/** @jsxImportSource react */
+import React, { useState, useCallback, useEffect } from 'react';
+import { Box, Text, useApp, useStdout } from 'ink';
+import { Header } from './components/Header.js';
+import { ChatList } from './components/ChatList.js';
+import { Thinking } from './components/Thinking.js';
+import { UserInput } from './components/UserInput.js';
+import { useChat } from './hooks/useChat.js';
+import { useCommands } from './hooks/useCommands.js';
+import type { App } from '../app/index.js';
+import type { MessageData } from './components/ChatMessage.js';
+
+interface Props {
+  app: App;
+}
+
+export function TuiApp({ app }: Props) {
+  const config = app.config.get();
+  const { messages, isThinking, streaming, streamingToolCalls, sendMessage } = useChat(app);
+  const { handleCommand } = useCommands(app);
+  const [systemMessages, setSystemMessages] = useState<MessageData[]>([]);
+  const { exit } = useApp();
+
+  const onSubmit = useCallback(async (input: string) => {
+    // Check for built-in commands first
+    const result = handleCommand(input);
+    if (result.handled) {
+      if (result.output) {
+        setSystemMessages(prev => [
+          ...prev,
+          { role: 'user', content: input },
+          { role: 'assistant', content: result.output! },
+        ]);
+      }
+      // Handle clear
+      if (input.toLowerCase().trim() === 'clear') {
+        setSystemMessages([]);
+      }
+      return;
+    }
+
+    // Send to AI
+    await sendMessage(input);
+  }, [handleCommand, sendMessage]);
+
+  const allMessages = [...systemMessages, ...messages];
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Header provider={config.provider} model={config.model} />
+      <ChatList
+        messages={allMessages}
+        streaming={streaming}
+        streamingToolCalls={streamingToolCalls}
+      />
+      {isThinking && <Thinking />}
+      <UserInput onSubmit={onSubmit} disabled={isThinking} />
+    </Box>
+  );
+}