clarity-ai 3.3.0 → 4.0.0

package/bin/clarity.js

@@ -1,23 +1,17 @@
 #!/usr/bin/env node
-import { showBanner } from '../src/ui/banner.js';
-import { isFirstRun, loadConfig } from '../src/config/settings.js';
-import { runSetupWizard } from '../src/core/setup.js';
-import { startChat } from '../src/main.js';
+import React from 'react';
+import { render } from 'ink';
+import { App } from '../ui/App.js';
+import { loadConfig } from '../core/config.js';
+import { ensureApiKey } from '../core/keyCheck.js';
 
 async function main() {
-  const firstRun = isFirstRun();
-  let config = firstRun ? {} : loadConfig();
-
-  await showBanner(config.version, config.provider, config.model);
-
-  if (firstRun) {
-    config = await runSetupWizard();
-  }
-
-  await startChat(config);
+  const config = loadConfig();
+  await ensureApiKey(config.provider || 'groq');
+  render(React.createElement(App, { config }), { fullscreen: true });
 }
 
 main().catch(err => {
-  console.error('\x1b[31mFatal error:\x1b[0m', err.message);
+  console.error('\n\x1b[31mFatal error:\x1b[0m', err.message);
   process.exit(1);
 });

package/core/agent.js

@@ -0,0 +1,52 @@
+import { callAI } from './providers/index.js';
+import { TOOLS, executeTool } from './tools.js';
+import { extractCommandFromText } from './intentDetect.js';
+
+export async function runAgent({ messages, model, provider, agentMode, onToolCall }) {
+  let history = [...messages];
+  const MAX_ITERATIONS = 10;
+
+  for (let i = 0; i < MAX_ITERATIONS; i++) {
+    const response = await callAI({
+      model, provider,
+      messages: history,
+      tools: agentMode ? TOOLS : undefined,
+    });
+
+    const { content, tool_calls, finish_reason } = response;
+
+    if (!tool_calls || tool_calls.length === 0 || finish_reason === 'stop') {
+      if (agentMode) {
+        const cmd = extractCommandFromText(content || '');
+        if (cmd) {
+          onToolCall?.('bash(' + cmd.slice(0, 60) + ')');
+          const result = await executeTool('bash', { command: cmd });
+          history.push({ role: 'assistant', content });
+          history.push({ role: 'tool', name: 'bash', content: String(result) });
+          continue;
+        }
+      }
+      return content;
+    }
+
+    history.push({ role: 'assistant', content, tool_calls });
+
+    for (const call of tool_calls) {
+      const name = call.function.name;
+      const args = JSON.parse(call.function.arguments || '{}');
+
+      onToolCall?.(name + '(' + JSON.stringify(args).slice(0, 80) + ')');
+
+      const result = await executeTool(name, args);
+
+      history.push({
+        role: 'tool',
+        tool_call_id: call.id,
+        name,
+        content: String(result),
+      });
+    }
+  }
+
+  return 'Max iterations reached.';
+}

package/core/config.js

@@ -0,0 +1,39 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
+
+const CONFIG_DIR = join(homedir(), '.clarity');
+const CONFIG_FILE = join(CONFIG_DIR, 'config.json');
+
+const DEFAULTS = {
+  provider: 'groq',
+  model: 'groq/llama-3.3-70b-versatile',
+  keys: {},
+  agentMode: true,
+  maxTokens: 4096,
+  temperature: 0.7,
+};
+
+export function loadConfig() {
+  if (!existsSync(CONFIG_FILE)) {
+    return { ...DEFAULTS };
+  }
+  try {
+    const raw = readFileSync(CONFIG_FILE, 'utf-8');
+    return { ...DEFAULTS, ...JSON.parse(raw) };
+  } catch {
+    return { ...DEFAULTS };
+  }
+}
+
+export function saveConfig(config) {
+  if (!existsSync(CONFIG_DIR)) mkdirSync(CONFIG_DIR, { recursive: true });
+  writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2), 'utf-8');
+}
+
+export function saveKey(provider, key) {
+  const config = loadConfig();
+  config.keys = config.keys || {};
+  config.keys[provider] = key;
+  saveConfig(config);
+}

package/core/intentDetect.js

@@ -0,0 +1,13 @@
+export function extractCommandFromText(text) {
+  const patterns = [
+    /```(?:bash|sh)\n([\s\S]+?)```/,
+    /Run(?:: | the following)?\s*`([^`]+)`/i,
+    /execute[:\s]+`([^`]+)`/i,
+    /run (?:this |the following )?command[:\s]*`([^`]+)`/i,
+  ];
+  for (const p of patterns) {
+    const m = text.match(p);
+    if (m) return m[1].trim();
+  }
+  return null;
+}

package/core/keyCheck.js

@@ -0,0 +1,21 @@
+import { createInterface } from 'readline';
+import { loadConfig, saveKey } from './config.js';
+
+export function ensureApiKey(provider) {
+  const config = loadConfig();
+  const key = config.keys?.[provider];
+  if (key) return key;
+
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(
+      '\n\x1b[33m No ' + provider + ' API key found.\x1b[0m\n Enter your ' + provider + ' key: ',
+      (answer) => {
+        rl.close();
+        const trimmed = answer.trim();
+        saveKey(provider, trimmed);
+        resolve(trimmed);
+      }
+    );
+  });
+}

package/core/providers/index.js

@@ -0,0 +1,79 @@
+import Groq from 'groq-sdk';
+
+export async function callAI({ model, provider, messages, tools }) {
+  const providerName = provider || 'groq';
+  const modelName = model.replace(/^[^/]+\//, '');
+
+  switch (providerName.toLowerCase()) {
+    case 'groq': {
+      const { loadConfig } = await import('../config.js');
+      const config = loadConfig();
+      const apiKey = config.keys?.groq;
+      if (!apiKey) throw new Error('No Groq API key set. Use /keys groq <key>.');
+
+      const client = new Groq({ apiKey });
+      const res = await client.chat.completions.create({
+        model: modelName,
+        messages,
+        tools: tools && tools.length > 0 ? tools : undefined,
+        tool_choice: tools && tools.length > 0 ? 'auto' : undefined,
+      });
+      const choice = res.choices[0];
+      return {
+        content: choice.message.content || '',
+        tool_calls: choice.message.tool_calls || null,
+        finish_reason: choice.finish_reason,
+      };
+    }
+
+    case 'openrouter': {
+      const { loadConfig } = await import('../config.js');
+      const config = loadConfig();
+      const apiKey = config.keys?.openrouter;
+      if (!apiKey) throw new Error('No OpenRouter API key set.');
+
+      const res = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer ' + apiKey,
+          'HTTP-Referer': 'https://clarity-ai.local',
+          'X-Title': 'CLARITY AI',
+        },
+        body: JSON.stringify({
+          model: modelName,
+          messages,
+          tools: tools && tools.length > 0 ? tools : undefined,
+        }),
+      });
+      const data = await res.json();
+      const choice = data.choices?.[0];
+      return {
+        content: choice?.message?.content || '',
+        tool_calls: choice?.message?.tool_calls || null,
+        finish_reason: choice?.finish_reason,
+      };
+    }
+
+    case 'gemini': {
+      const { GoogleGenerativeAI } = await import('@google/generative-ai');
+      const { loadConfig } = await import('../config.js');
+      const config = loadConfig();
+      const apiKey = config.keys?.gemini;
+      if (!apiKey) throw new Error('No Gemini API key set.');
+
+      const genAI = new GoogleGenerativeAI(apiKey);
+      const model_ = genAI.getGenerativeModel({ model: modelName });
+      const chat = model_.startChat({ messages });
+      const result = await chat.sendMessage(messages[messages.length - 1]?.content || '');
+      return {
+        content: result.response.text() || '',
+        tool_calls: null,
+        finish_reason: 'stop',
+      };
+    }
+
+    default:
+      throw new Error('Unknown provider: ' + providerName);
+  }
+}

package/core/tools.js

@@ -0,0 +1,178 @@
+import { exec } from 'child_process';
+import { readFile, writeFile, readdir, mkdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { dirname } from 'path';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+async function outputFile(path, content) {
+  const dir = dirname(path);
+  if (!existsSync(dir)) await mkdir(dir, { recursive: true });
+  await writeFile(path, content, 'utf-8');
+}
+
+export const TOOLS = [
+  {
+    type: 'function',
+    function: {
+      name: 'bash',
+      description: 'Execute a bash command in the Termux shell and return stdout/stderr',
+      parameters: {
+        type: 'object',
+        properties: {
+          command: { type: 'string', description: 'The bash command to run' },
+        },
+        required: ['command'],
+      },
+    },
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'read_file',
+      description: 'Read a file from the filesystem',
+      parameters: {
+        type: 'object',
+        properties: {
+          path: { type: 'string' },
+          offset: { type: 'number', description: 'Line offset to start reading' },
+          limit: { type: 'number', description: 'Max lines to read' },
+        },
+        required: ['path'],
+      },
+    },
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'write_file',
+      description: 'Write content to a file',
+      parameters: {
+        type: 'object',
+        properties: {
+          path: { type: 'string' },
+          content: { type: 'string' },
+        },
+        required: ['path', 'content'],
+      },
+    },
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'list_dir',
+      description: 'List files in a directory',
+      parameters: {
+        type: 'object',
+        properties: {
+          path: { type: 'string', default: '.' },
+        },
+      },
+    },
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'grep',
+      description: 'Search for a pattern in files',
+      parameters: {
+        type: 'object',
+        properties: {
+          pattern: { type: 'string' },
+          path: { type: 'string' },
+          flags: { type: 'string', default: '-r' },
+        },
+        required: ['pattern', 'path'],
+      },
+    },
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'web_search',
+      description: 'Search the web for information',
+      parameters: {
+        type: 'object',
+        properties: {
+          query: { type: 'string' },
+        },
+        required: ['query'],
+      },
+    },
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'web_fetch',
+      description: 'Fetch a URL and return its text content',
+      parameters: {
+        type: 'object',
+        properties: {
+          url: { type: 'string', format: 'uri' },
+        },
+        required: ['url'],
+      },
+    },
+  },
+];
+
+export async function executeTool(name, args) {
+  switch (name) {
+    case 'bash': {
+      try {
+        const { stdout, stderr } = await execAsync(args.command, { timeout: 30000 });
+        return stdout || stderr || '(no output)';
+      } catch (e) {
+        return 'Error: ' + (e.stderr || e.message);
+      }
+    }
+    case 'read_file': {
+      const content = await readFile(args.path, 'utf8');
+      const lines = content.split('\n');
+      const start = args.offset || 0;
+      const end = args.limit ? start + args.limit : lines.length;
+      return lines.slice(start, end).join('\n');
+    }
+    case 'write_file': {
+      await outputFile(args.path, args.content);
+      return 'Written to ' + args.path;
+    }
+    case 'list_dir': {
+      const files = await readdir(args.path || '.');
+      return files.join('\n');
+    }
+    case 'grep': {
+      try {
+        const { stdout } = await execAsync(
+          'grep ' + (args.flags || '-r') + ' "' + args.pattern + '" "' + args.path + '"',
+          { timeout: 10000 }
+        );
+        return stdout || '(no matches)';
+      } catch (e) {
+        return e.stdout || '(no matches)';
+      }
+    }
+    case 'web_search': {
+      try {
+        const url = 'https://api.duckduckgo.com/?q=' + encodeURIComponent(args.query) + '&format=json&no_html=1';
+        const res = await fetch(url);
+        const data = await res.json();
+        return data.AbstractText || data.RelatedTopics?.slice(0,3)?.map(t => t.Text).join('\n') || 'No results';
+      } catch (e) {
+        return 'Search error: ' + e.message;
+      }
+    }
+    case 'web_fetch': {
+      try {
+        const res = await fetch(args.url);
+        const text = await res.text();
+        return text.slice(0, 5000);
+      } catch (e) {
+        return 'Fetch error: ' + e.message;
+      }
+    }
+    default:
+      return 'Unknown tool: ' + name;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "3.3.0",
-  "description": "Autonomous AI Agent CLI for Termux",
+  "version": "4.0.0",
+  "description": "Ink+React TUI Autonomous AI Agent CLI for Termux",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"
@@ -14,18 +14,15 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "chalk": "^5.3.0",
-    "figlet": "^1.7.0",
-    "gradient-string": "^2.0.2",
-    "ora": "^8.1.0",
-    "inquirer": "^9.2.12",
-    "cli-table3": "^0.6.3",
-    "glob": "^10.3.10",
-    "chokidar": "^3.5.3",
-    "marked": "^9.1.6",
-    "marked-terminal": "^6.1.0",
-    "diff": "^5.1.0",
-    "archiver": "^6.0.1",
-    "strip-ansi": "^7.1.0"
+    "@google/generative-ai": "^0.24.1",
+    "@inkjs/ui": "^2.0.0",
+    "@langchain/langgraph": "^1.3.5",
+    "groq-sdk": "^1.2.1",
+    "ink": "^7.0.5",
+    "ink-big-text": "^2.0.0",
+    "ink-gradient": "^4.0.1",
+    "ink-select-input": "^6.2.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0"
   }
 }

package/ui/App.js

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Box, Text, useApp } from 'ink';
+import { Banner } from './Banner.js';
+import { MessageList } from './MessageList.js';
+import { InputBar } from './InputBar.js';
+import { StatusBar } from './StatusBar.js';
+import { CommandPicker } from './CommandPicker.js';
+import { ModelPicker } from './ModelPicker.js';
+import { runAgent } from '../core/agent.js';
+import { saveKey } from '../core/config.js';
+const { createElement: h } = React;
+
+function extractModelProvider(modelId) {
+  const parts = String(modelId).split('/');
+  return { provider: parts[0] || 'groq', model: parts[1] || modelId };
+}
+
+export function App({ config: initialConfig }) {
+  const [messages, setMessages] = useState([]);
+  const [thinking, setThinking] = useState(false);
+  const [showCommands, setShowCommands] = useState(false);
+  const [showModels, setShowModels] = useState(false);
+  const [model, setModel] = useState(initialConfig.model || 'groq/llama-3.3-70b-versatile');
+  const [provider, setProvider] = useState(initialConfig.provider || 'groq');
+  const [agentMode, setAgentMode] = useState(initialConfig.agentMode !== false);
+  const { exit } = useApp();
+
+  async function handleSubmit(input) {
+    if (!input.trim()) return;
+
+    if (input.startsWith('/')) {
+      handleCommand(input);
+      return;
+    }
+
+    setMessages(m => [...m, { role: 'user', content: input }]);
+    setThinking(true);
+
+    try {
+      const response = await runAgent({
+        messages: [...messages.filter(m => m.role !== 'tool'), { role: 'user', content: input }],
+        model,
+        provider,
+        agentMode,
+        onToolCall: (tool) => {
+          setMessages(m => [...m, { role: 'tool', content: tool }]);
+        },
+      });
+      setMessages(m => [...m, { role: 'assistant', content: response }]);
+    } catch (err) {
+      setMessages(m => [...m, { role: 'error', content: err.message }]);
+    } finally {
+      setThinking(false);
+    }
+  }
+
+  function handleCommand(input) {
+    const parts = input.trim().split(/\s+/);
+    const cmd = parts[0];
+    const args = parts.slice(1);
+
+    switch (cmd) {
+      case '/model':
+      case '/models':
+        setShowModels(true);
+        break;
+      case '/agent':
+        setAgentMode(a => !a);
+        setMessages(m => [...m, { role: 'system', content: 'Agent mode ' + (!agentMode ? 'ON' : 'OFF') }]);
+        break;
+      case '/clear':
+        setMessages([]);
+        break;
+      case '/keys': {
+        if (args.length >= 2) {
+          saveKey(args[0], args[1]);
+          setMessages(m => [...m, { role: 'system', content: 'Key saved for ' + args[0] }]);
+        } else {
+          setMessages(m => [...m, { role: 'error', content: 'Usage: /keys <provider> <key>' }]);
+        }
+        break;
+      }
+      case '/provider':
+        setShowModels(true);
+        break;
+      case '/help':
+        setShowCommands(true);
+        break;
+      case '/exit':
+        exit();
+        break;
+      default:
+        setMessages(m => [...m, { role: 'error', content: 'Unknown command: ' + cmd + '. Type / to see all commands.' }]);
+    }
+  }
+
+  function handleModelSelect(modelId) {
+    const { provider: p, model: m } = extractModelProvider(modelId);
+    setProvider(p);
+    setModel(modelId);
+    setShowModels(false);
+    setMessages(msgs => [...msgs, { role: 'system', content: 'Switched to ' + p + '/' + m }]);
+  }
+
+  return h(Box, { flexDirection: 'column', height: '100%' },
+    h(Banner),
+    h(Box, { flexGrow: 1, flexDirection: 'column', overflowY: 'hidden' },
+      h(MessageList, { messages, thinking })
+    ),
+    showCommands ? h(CommandPicker, {
+      onSelect: (cmd) => { setShowCommands(false); handleCommand(cmd); },
+      onClose: () => setShowCommands(false),
+    }) : null,
+    showModels ? h(ModelPicker, {
+      current: model,
+      onSelect: handleModelSelect,
+      onClose: () => setShowModels(false),
+    }) : null,
+    h(InputBar, {
+      onSubmit: handleSubmit,
+      model,
+      provider,
+      agentMode,
+      thinking,
+      onSlash: () => setShowCommands(true),
+    }),
+    h(StatusBar, { provider, model, agentMode })
+  );
+}

package/ui/Banner.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import BigText from 'ink-big-text';
+import Gradient from 'ink-gradient';
+const { createElement: h } = React;
+
+export function Banner() {
+  return h(Box, { justifyContent: 'center', marginBottom: 0 },
+    h(Gradient, { name: 'cristal' },
+      h(BigText, { text: 'CLARITY', font: 'block' })
+    )
+  );
+}

package/ui/CommandPicker.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+const { createElement: h } = React;
+
+const COMMANDS = [
+  { cmd: '/agent',   desc: 'Toggle agent mode on/off' },
+  { cmd: '/model',    desc: 'Switch model' },
+  { cmd: '/provider', desc: 'Connect provider' },
+  { cmd: '/compact',  desc: 'Compact session' },
+  { cmd: '/copy',     desc: 'Copy session transcript' },
+  { cmd: '/diff',     desc: 'Open diff viewer' },
+  { cmd: '/export',   desc: 'Export session transcript' },
+  { cmd: '/keys',     desc: 'Manage API keys' },
+  { cmd: '/history',  desc: 'View conversation history' },
+  { cmd: '/clear',    desc: 'Clear screen' },
+  { cmd: '/memory',   desc: 'View or clear memory' },
+  { cmd: '/config',   desc: 'View or edit settings' },
+  { cmd: '/search',   desc: 'Web search' },
+  { cmd: '/fetch',    desc: 'Fetch a URL' },
+  { cmd: '/run',      desc: 'Execute a script file' },
+  { cmd: '/undo',     desc: 'Revert last AI file change' },
+  { cmd: '/help',     desc: 'Show help' },
+  { cmd: '/exit',     desc: 'Exit CLARITY' },
+];
+
+export function CommandPicker({ onSelect, onClose }) {
+  const [cursor, setCursor] = useState(0);
+  const [filter, setFilter] = useState('');
+
+  const filtered = COMMANDS.filter(c =>
+    c.cmd.includes(filter) || c.desc.toLowerCase().includes(filter)
+  );
+
+  useInput((input, key) => {
+    if (key.escape) { onClose(); return; }
+    if (key.upArrow) setCursor(c => Math.max(0, c - 1));
+    if (key.downArrow) setCursor(c => Math.min(filtered.length - 1, c + 1));
+    if (key.return) { onSelect(filtered[cursor]?.cmd); return; }
+    if (key.backspace) setFilter(f => f.slice(0, -1));
+    else if (input && !key.ctrl && !key.meta) setFilter(f => f + input);
+  });
+
+  return h(Box, {
+    borderStyle: 'round',
+    borderColor: 'cyan',
+    flexDirection: 'column',
+    paddingX: 1,
+  },
+    h(Box, { justifyContent: 'space-between' },
+      h(Text, { bold: true, color: 'white' }, 'Commands'),
+      h(Text, { color: 'gray' }, 'esc')
+    ),
+    h(Box, null,
+      h(Text, { color: 'gray' }, 'Search '),
+      h(Text, { color: filter ? 'white' : 'gray' }, filter || ''),
+      h(Text, { color: 'gray' }, '\u2588')
+    ),
+    h(Box, { flexDirection: 'column', marginTop: 1 },
+      filtered.map((c, i) =>
+        h(Box, { key: c.cmd, gap: 2 },
+          h(Text, {
+            color: i === cursor ? 'black' : 'cyan',
+            backgroundColor: i === cursor ? 'cyan' : undefined,
+            bold: i === cursor,
+          }, c.cmd.padEnd(14)),
+          h(Text, {
+            color: i === cursor ? 'black' : 'gray',
+            backgroundColor: i === cursor ? 'cyan' : undefined,
+          }, c.desc)
+        )
+      )
+    )
+  );
+}

package/ui/InputBar.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+const { createElement: h } = React;
+
+export function InputBar({ onSubmit, model, provider, agentMode, thinking, onSlash }) {
+  const [value, setValue] = useState('');
+
+  return h(Box, {
+    borderStyle: 'round',
+    borderColor: thinking ? 'yellow' : 'cyan',
+    paddingX: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+    h(Text, { color: 'magenta', bold: true }, '> '),
+    h(TextInput, {
+      value,
+      onChange: (val) => {
+        setValue(val);
+        if (val === '/') {
+          setValue('');
+          onSlash?.();
+        }
+      },
+      onSubmit: (val) => {
+        setValue('');
+        onSubmit(val);
+      },
+      placeholder: thinking ? 'Thinking...' : 'Ask anything or type / for commands',
+    })
+  );
+}

package/ui/MessageList.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+const { createElement: h } = React;
+
+export function MessageList({ messages, thinking }) {
+  return h(Box, { flexDirection: 'column', gap: 1, paddingX: 1 },
+    messages.map((msg, i) => {
+      if (msg.role === 'user') {
+        return h(Box, { key: i, flexDirection: 'column' },
+          h(Text, { color: 'magenta', bold: true }, 'YOU \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500'),
+          h(Box, { borderStyle: 'single', borderColor: 'magenta', paddingX: 1 },
+            h(Text, null, msg.content)
+          )
+        );
+      }
+      if (msg.role === 'assistant') {
+        return h(Box, { key: i, flexDirection: 'column' },
+          h(Text, { color: 'cyan', bold: true }, 'CLARITY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500'),
+          h(Text, null, msg.content)
+        );
+      }
+      if (msg.role === 'tool') {
+        return h(Box, { key: i, gap: 1 },
+          h(Text, { color: 'green' }, '\u223c'),
+          h(Text, { color: 'gray' }, msg.content)
+        );
+      }
+      if (msg.role === 'error') {
+        return h(Box, { key: i, gap: 1 },
+          h(Text, { color: 'red' }, '\u2717'),
+          h(Text, { color: 'red' }, msg.content)
+        );
+      }
+      if (msg.role === 'system') {
+        return h(Box, { key: i, gap: 1 },
+          h(Text, { color: 'yellow' }, '\u2714'),
+          h(Text, { color: 'yellow' }, msg.content)
+        );
+      }
+      return null;
+    }),
+    thinking ? h(Box, { gap: 1 },
+      h(Text, { color: 'yellow' },
+        h(Spinner, { type: 'dots' })
+      ),
+      h(Text, { color: 'yellow' }, 'Thinking')
+    ) : null
+  );
+}

package/ui/ModelPicker.js

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+const { createElement: h } = React;
+
+const MODEL_GROUPS = {
+  Recent: [
+    { id: 'groq/llama-3.3-70b-versatile', label: 'Llama 3.3 70B Versatile', badge: 'Free' },
+  ],
+  Groq: [
+    { id: 'groq/llama-3.3-70b-versatile', label: 'Llama 3.3 70B Versatile' },
+    { id: 'groq/llama-3.1-8b-instant', label: 'Llama 3.1 8B Instant' },
+    { id: 'groq/llama-4-scout-17b-16e-instruct', label: 'Llama 4 Scout 17B' },
+    { id: 'groq/compound-beta', label: 'Compound' },
+    { id: 'groq/compound-beta-mini', label: 'Compound Mini' },
+    { id: 'groq/kimi-k2-instruct', label: 'Kimi K2 Instruct 0905' },
+    { id: 'groq/allam-2-7b', label: 'ALLaM-2-7b' },
+  ],
+  Gemini: [
+    { id: 'gemini/gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
+    { id: 'gemini/gemini-2.5-flash-preview', label: 'Gemini 2.5 Flash Preview' },
+    { id: 'gemini/gemini-2.5-pro-preview', label: 'Gemini 2.5 Pro Preview' },
+  ],
+  OpenRouter: [
+    { id: 'openrouter/deepseek/deepseek-r1:free', label: 'DeepSeek R1 Free', badge: 'Free' },
+    { id: 'openrouter/meta-llama/llama-3.3-70b-instruct:free', label: 'Llama 3.3 70B Free', badge: 'Free' },
+  ],
+};
+
+export function ModelPicker({ current, onSelect, onClose }) {
+  const [filter, setFilter] = useState('');
+  const allItems = Object.entries(MODEL_GROUPS).flatMap(([group, models]) =>
+    models.map(m => ({ ...m, group }))
+  );
+  const filtered = filter
+    ? allItems.filter(m => m.label.toLowerCase().includes(filter.toLowerCase()))
+    : allItems;
+
+  const [cursor, setCursor] = useState(0);
+
+  useInput((input, key) => {
+    if (key.escape) { onClose(); return; }
+    if (key.upArrow) setCursor(c => Math.max(0, c - 1));
+    if (key.downArrow) setCursor(c => Math.min(filtered.length - 1, c + 1));
+    if (key.return) { onSelect(filtered[cursor]?.id); return; }
+    if (key.backspace) setFilter(f => f.slice(0, -1));
+    else if (input && !key.ctrl && !key.meta) setFilter(f => f + input);
+  });
+
+  const grouped = {};
+  for (const item of filtered) {
+    if (!grouped[item.group]) grouped[item.group] = [];
+    grouped[item.group].push(item);
+  }
+
+  let globalIdx = 0;
+
+  return h(Box, {
+    borderStyle: 'round',
+    borderColor: 'cyan',
+    flexDirection: 'column',
+    paddingX: 1,
+  },
+    h(Box, { justifyContent: 'space-between' },
+      h(Text, { bold: true }, 'Select model'),
+      h(Text, { color: 'gray' }, 'esc')
+    ),
+    h(Box, null,
+      h(Text, { color: filter ? 'white' : 'gray' }, filter || 'Search')
+    ),
+    h(Box, { flexDirection: 'column', marginTop: 1 },
+      Object.entries(grouped).map(([group, models]) =>
+        h(Box, { key: group, flexDirection: 'column' },
+          h(Text, { color: 'cyan', bold: true }, group),
+          models.map((m) => {
+            const idx = globalIdx++;
+            const selected = idx === cursor;
+            return h(Box, { key: m.id, justifyContent: 'space-between' },
+              h(Text, {
+                backgroundColor: selected ? 'cyan' : undefined,
+                color: selected ? 'black' : 'white',
+              }, ' ' + m.label),
+              m.badge ? h(Text, {
+                color: selected ? 'black' : 'gray',
+                backgroundColor: selected ? 'cyan' : undefined,
+              }, m.badge) : null
+            );
+          })
+        )
+      )
+    ),
+    h(Box, { marginTop: 1, gap: 3 },
+      h(Text, { color: 'gray' }, 'Connect provider ', h(Text, { color: 'white' }, 'ctrl+a')),
+      h(Text, { color: 'gray' }, 'Favorite ', h(Text, { color: 'white' }, 'ctrl+f'))
+    )
+  );
+}

package/ui/StatusBar.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+const { createElement: h } = React;
+
+export function StatusBar({ provider, model, agentMode, contextPct }) {
+  return h(Box, { justifyContent: 'space-between', paddingX: 1 },
+    h(Box, { gap: 2 },
+      h(Text, { color: 'blue', bold: true }, provider),
+      h(Text, { color: 'white' }, '\u00b7'),
+      h(Text, { color: 'cyan' }, model),
+      h(Text, { color: 'white' }, '\u00b7'),
+      h(Text, { color: agentMode ? 'green' : 'gray' },
+        'agent:' + (agentMode ? 'ON' : 'OFF')
+      )
+    ),
+    h(Box, { gap: 2 },
+      contextPct ? h(Text, { color: 'gray' }, String(contextPct) + 'K') : null,
+      h(Text, { color: 'gray', dimColor: true }, 'ctrl+p commands')
+    )
+  );
+}