wispy-cli 0.3.2 → 0.4.0

package/lib/wispy-tui.mjs

@@ -0,0 +1,812 @@
+#!/usr/bin/env node
+/**
+ * wispy-tui.mjs — Ink-based TUI for Wispy
+ *
+ * Features:
+ *  - Status bar: provider / model / workstream / session cost
+ *  - Message list with basic markdown rendering
+ *  - Tool execution display (collapsible)
+ *  - Input box (single-line with submit)
+ *  - Loading spinner while AI is thinking
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { render, Box, Text, useInput, useApp, Newline } from "ink";
+import Spinner from "ink-spinner";
+import TextInput from "ink-text-input";
+
+// -----------------------------------------------------------------------
+// Inline helpers (avoid importing from wispy-repl to keep TUI standalone)
+// -----------------------------------------------------------------------
+
+import os from "node:os";
+import path from "node:path";
+import { readFile, writeFile, mkdir, appendFile } from "node:fs/promises";
+
+const WISPY_DIR = path.join(os.homedir(), ".wispy");
+const CONVERSATIONS_DIR = path.join(WISPY_DIR, "conversations");
+
+// Parse workstream & provider from args
+const rawArgs = process.argv.slice(2);
+const wsIdx = rawArgs.findIndex((a) => a === "-w" || a === "--workstream");
+const ACTIVE_WORKSTREAM =
+  process.env.WISPY_WORKSTREAM ??
+  (wsIdx !== -1 ? rawArgs[wsIdx + 1] : null) ??
+  "default";
+
+const HISTORY_FILE = path.join(
+  CONVERSATIONS_DIR,
+  `${ACTIVE_WORKSTREAM}.json`
+);
+
+// Provider detection (quick version)
+const PROVIDERS = {
+  google:     { envKeys: ["GOOGLE_AI_KEY", "GEMINI_API_KEY"], defaultModel: "gemini-2.5-flash", label: "Gemini" },
+  anthropic:  { envKeys: ["ANTHROPIC_API_KEY"],               defaultModel: "claude-sonnet-4-20250514", label: "Claude" },
+  openai:     { envKeys: ["OPENAI_API_KEY"],                  defaultModel: "gpt-4o", label: "OpenAI" },
+  openrouter: { envKeys: ["OPENROUTER_API_KEY"],              defaultModel: "anthropic/claude-sonnet-4-20250514", label: "OpenRouter" },
+  groq:       { envKeys: ["GROQ_API_KEY"],                    defaultModel: "llama-3.3-70b-versatile", label: "Groq" },
+  deepseek:   { envKeys: ["DEEPSEEK_API_KEY"],                defaultModel: "deepseek-chat", label: "DeepSeek" },
+  ollama:     { envKeys: ["OLLAMA_HOST"],                     defaultModel: "llama3.2", label: "Ollama" },
+};
+
+async function tryKeychainKey(service) {
+  try {
+    const { execFile } = await import("node:child_process");
+    const { promisify } = await import("node:util");
+    const exec = promisify(execFile);
+    const { stdout } = await exec("security", [
+      "find-generic-password", "-s", service, "-a", "poropo", "-w",
+    ], { timeout: 3000 });
+    return stdout.trim() || null;
+  } catch { return null; }
+}
+
+async function detectProvider() {
+  // Check config
+  try {
+    const cfg = JSON.parse(await readFile(path.join(WISPY_DIR, "config.json"), "utf8"));
+    if (cfg.provider && PROVIDERS[cfg.provider]) {
+      const envKey = PROVIDERS[cfg.provider].envKeys.map(k => process.env[k]).find(Boolean) ?? cfg.apiKey;
+      if (envKey || cfg.provider === "ollama") {
+        return { provider: cfg.provider, key: envKey, model: cfg.model ?? PROVIDERS[cfg.provider].defaultModel };
+      }
+    }
+  } catch { /* no config */ }
+
+  // Env vars
+  for (const [p, info] of Object.entries(PROVIDERS)) {
+    const key = info.envKeys.map(k => process.env[k]).find(Boolean);
+    if (key || (p === "ollama" && process.env.OLLAMA_HOST)) {
+      return { provider: p, key, model: process.env.WISPY_MODEL ?? info.defaultModel };
+    }
+  }
+
+  // Keychain
+  for (const [service, provider] of [
+    ["google-ai-key", "google"],
+    ["anthropic-api-key", "anthropic"],
+    ["openai-api-key", "openai"],
+  ]) {
+    const key = await tryKeychainKey(service);
+    if (key) {
+      process.env[PROVIDERS[provider].envKeys[0]] = key;
+      return { provider, key, model: process.env.WISPY_MODEL ?? PROVIDERS[provider].defaultModel };
+    }
+  }
+
+  return null;
+}
+
+async function readFileOr(p, fallback = null) {
+  try { return await readFile(p, "utf8"); } catch { return fallback; }
+}
+
+async function loadConversation() {
+  const raw = await readFileOr(HISTORY_FILE);
+  if (!raw) return [];
+  try { return JSON.parse(raw); } catch { return []; }
+}
+
+async function saveConversation(messages) {
+  await mkdir(CONVERSATIONS_DIR, { recursive: true });
+  await writeFile(HISTORY_FILE, JSON.stringify(messages.slice(-50), null, 2) + "\n", "utf8");
+}
+
+// -----------------------------------------------------------------------
+// Simple markdown → Ink renderer
+// -----------------------------------------------------------------------
+
+function renderMarkdown(text) {
+  const lines = text.split("\n");
+  return lines.map((line, i) => {
+    // Code block markers (just show as-is in dim)
+    if (line.startsWith("```")) {
+      return React.createElement(Text, { key: i, dimColor: true }, line);
+    }
+    // Heading
+    if (line.startsWith("### ")) {
+      return React.createElement(Text, { key: i, bold: true, color: "cyan" }, line.slice(4));
+    }
+    if (line.startsWith("## ")) {
+      return React.createElement(Text, { key: i, bold: true, color: "blue" }, line.slice(3));
+    }
+    if (line.startsWith("# ")) {
+      return React.createElement(Text, { key: i, bold: true, color: "magenta" }, line.slice(2));
+    }
+    // Bullet
+    if (line.startsWith("- ") || line.startsWith("* ")) {
+      return React.createElement(
+        Box, { key: i },
+        React.createElement(Text, { color: "green" }, "  • "),
+        React.createElement(Text, null, line.slice(2))
+      );
+    }
+    // Numbered
+    if (/^\d+\.\s/.test(line)) {
+      const match = line.match(/^(\d+\.\s)(.*)/);
+      return React.createElement(
+        Box, { key: i },
+        React.createElement(Text, { color: "yellow" }, "  " + match[1]),
+        React.createElement(Text, null, match[2])
+      );
+    }
+    // Bold inline (very basic — whole line check)
+    if (line.includes("**")) {
+      const parts = line.split(/(\*\*[^*]+\*\*)/g);
+      const children = parts.map((p, j) => {
+        if (p.startsWith("**") && p.endsWith("**")) {
+          return React.createElement(Text, { key: j, bold: true }, p.slice(2, -2));
+        }
+        return React.createElement(Text, { key: j }, p);
+      });
+      return React.createElement(Box, { key: i }, ...children);
+    }
+    // Horizontal rule
+    if (line.startsWith("---") || line.startsWith("===")) {
+      return React.createElement(Text, { key: i, dimColor: true }, "─".repeat(50));
+    }
+    // Empty line
+    if (line === "") {
+      return React.createElement(Newline, { key: i });
+    }
+    return React.createElement(Text, { key: i }, line);
+  });
+}
+
+// -----------------------------------------------------------------------
+// Cost tracking
+// -----------------------------------------------------------------------
+
+const MODEL_PRICING = {
+  "gemini-2.5-flash":         { input: 0.15,  output: 0.60 },
+  "gemini-2.5-pro":           { input: 1.25,  output: 10.0 },
+  "claude-sonnet-4-20250514": { input: 3.0,   output: 15.0 },
+  "claude-haiku-3.5":         { input: 0.80,  output: 4.0 },
+  "gpt-4o":                   { input: 2.50,  output: 10.0 },
+  "gpt-4o-mini":              { input: 0.15,  output: 0.60 },
+  "gpt-4.1":                  { input: 2.0,   output: 8.0 },
+  "o4-mini":                  { input: 1.10,  output: 4.40 },
+  "llama-3.3-70b-versatile":  { input: 0.59,  output: 0.79 },
+  "deepseek-chat":            { input: 0.27,  output: 1.10 },
+  "llama3.2":                 { input: 0,     output: 0 },
+};
+
+function estimateCost(inputTokens, outputTokens, model) {
+  const pricing = MODEL_PRICING[model] ?? { input: 1.0, output: 3.0 };
+  const cost = (inputTokens * pricing.input + outputTokens * pricing.output) / 1_000_000;
+  return { tokens: inputTokens + outputTokens, usd: cost };
+}
+
+function estimateTokens(text) {
+  return Math.ceil((text?.length ?? 0) / 4);
+}
+
+// -----------------------------------------------------------------------
+// Chat function (calls provider API)
+// -----------------------------------------------------------------------
+
+const OPENAI_ENDPOINTS = {
+  openai:     "https://api.openai.com/v1/chat/completions",
+  openrouter: "https://openrouter.ai/api/v1/chat/completions",
+  groq:       "https://api.groq.com/openai/v1/chat/completions",
+  deepseek:   "https://api.deepseek.com/v1/chat/completions",
+  ollama:     `${process.env.OLLAMA_HOST ?? "http://localhost:11434"}/v1/chat/completions`,
+};
+
+// Simple tool set for TUI (subset of full REPL)
+const TUI_TOOL_DEFINITIONS = [
+  {
+    name: "read_file",
+    description: "Read a file",
+    parameters: { type: "object", properties: { path: { type: "string" } }, required: ["path"] },
+  },
+  {
+    name: "write_file",
+    description: "Write a file",
+    parameters: { type: "object", properties: { path: { type: "string" }, content: { type: "string" } }, required: ["path", "content"] },
+  },
+  {
+    name: "run_command",
+    description: "Run a shell command",
+    parameters: { type: "object", properties: { command: { type: "string" } }, required: ["command"] },
+  },
+  {
+    name: "list_directory",
+    description: "List directory contents",
+    parameters: { type: "object", properties: { path: { type: "string" } }, required: [] },
+  },
+  {
+    name: "git",
+    description: "Run git operations",
+    parameters: { type: "object", properties: { command: { type: "string" } }, required: ["command"] },
+  },
+  {
+    name: "web_search",
+    description: "Search the web",
+    parameters: { type: "object", properties: { query: { type: "string" } }, required: ["query"] },
+  },
+];
+
+async function executeTool(name, args) {
+  const { execFile } = await import("node:child_process");
+  const { promisify } = await import("node:util");
+  const execAsync = promisify(execFile);
+
+  try {
+    switch (name) {
+      case "read_file": {
+        const filePath = args.path.replace(/^~/, os.homedir());
+        const content = await readFile(filePath, "utf8");
+        return { success: true, content: content.length > 8000 ? content.slice(0, 8000) + "\n...(truncated)" : content };
+      }
+      case "write_file": {
+        const filePath = args.path.replace(/^~/, os.homedir());
+        await mkdir(path.dirname(filePath), { recursive: true });
+        await writeFile(filePath, args.content, "utf8");
+        return { success: true, message: `Written to ${filePath}` };
+      }
+      case "run_command": {
+        const { stdout, stderr } = await execAsync("/bin/bash", ["-c", args.command], {
+          timeout: 30000, maxBuffer: 1024 * 1024, cwd: process.cwd(),
+        });
+        const out = (stdout + (stderr ? `\nSTDERR: ${stderr}` : "")).trim();
+        return { success: true, output: out.length > 4000 ? out.slice(0, 4000) + "\n...(truncated)" : out };
+      }
+      case "list_directory": {
+        const { readdir } = await import("node:fs/promises");
+        const targetPath = (args.path || ".").replace(/^~/, os.homedir());
+        const entries = await readdir(targetPath, { withFileTypes: true });
+        return { success: true, listing: entries.map(e => `${e.isDirectory() ? "📁" : "📄"} ${e.name}`).join("\n") };
+      }
+      case "git": {
+        const { stdout, stderr } = await execAsync("/bin/bash", ["-c", `git ${args.command}`], {
+          timeout: 15000, cwd: process.cwd(),
+        });
+        return { success: true, output: (stdout + (stderr ? `\n${stderr}` : "")).trim().slice(0, 4000) };
+      }
+      case "web_search": {
+        const encoded = encodeURIComponent(args.query);
+        try {
+          const resp = await fetch(`https://api.duckduckgo.com/?q=${encoded}&format=json&no_html=1`, {
+            signal: AbortSignal.timeout(10000),
+          });
+          const data = await resp.json();
+          const results = data.RelatedTopics?.slice(0, 5).map(t => t.Text).filter(Boolean).join("\n\n");
+          return { success: true, results: results || "No results found" };
+        } catch (err) {
+          return { success: false, error: err.message };
+        }
+      }
+      default:
+        return { success: false, error: `Unknown tool: ${name}` };
+    }
+  } catch (err) {
+    return { success: false, error: err.message };
+  }
+}
+
+async function callAPI(provider, apiKey, model, messages, onToolUse) {
+  if (provider === "google") {
+    return callGemini(apiKey, model, messages, onToolUse);
+  } else if (provider === "anthropic") {
+    return callAnthropic(apiKey, model, messages, onToolUse);
+  } else {
+    return callOpenAI(provider, apiKey, model, messages, onToolUse);
+  }
+}
+
+async function callGemini(apiKey, model, messages, onToolUse) {
+  const systemInstruction = messages.find(m => m.role === "system")?.content ?? "";
+  const contents = [];
+
+  for (const m of messages) {
+    if (m.role === "system") continue;
+    if (m.role === "tool_result") {
+      contents.push({ role: "user", parts: [{ functionResponse: { name: m.toolName, response: m.result } }] });
+    } else if (m.role === "assistant" && m.toolCalls) {
+      contents.push({ role: "model", parts: m.toolCalls.map(tc => ({ functionCall: { name: tc.name, args: tc.args } })) });
+    } else {
+      contents.push({ role: m.role === "assistant" ? "model" : "user", parts: [{ text: m.content }] });
+    }
+  }
+
+  const tools = [{ functionDeclarations: TUI_TOOL_DEFINITIONS.map(t => ({ name: t.name, description: t.description, parameters: t.parameters })) }];
+  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
+
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      system_instruction: systemInstruction ? { parts: [{ text: systemInstruction }] } : undefined,
+      contents,
+      tools,
+      generationConfig: { temperature: 0.7, maxOutputTokens: 4096 },
+    }),
+  });
+
+  if (!resp.ok) {
+    const err = await resp.text();
+    throw new Error(`Gemini error ${resp.status}: ${err.slice(0, 200)}`);
+  }
+
+  const data = await resp.json();
+  const parts = data.candidates?.[0]?.content?.parts ?? [];
+  const fcs = parts.filter(p => p.functionCall);
+  if (fcs.length > 0) {
+    const calls = fcs.map(p => ({ name: p.functionCall.name, args: p.functionCall.args }));
+    for (const call of calls) {
+      onToolUse?.(call.name, call.args);
+      const result = await executeTool(call.name, call.args);
+      messages.push({ role: "assistant", toolCalls: [call], content: "" });
+      messages.push({ role: "tool_result", toolName: call.name, result });
+    }
+    return callGemini(apiKey, model, messages, onToolUse);
+  }
+
+  const text = parts.map(p => p.text ?? "").join("");
+  return text;
+}
+
+async function callAnthropic(apiKey, model, messages, onToolUse) {
+  const systemPrompt = messages.find(m => m.role === "system")?.content ?? "";
+  const anthropicMessages = [];
+
+  for (const m of messages) {
+    if (m.role === "system") continue;
+    if (m.role === "tool_result") {
+      anthropicMessages.push({ role: "user", content: [{ type: "tool_result", tool_use_id: m.toolUseId ?? m.toolName, content: JSON.stringify(m.result) }] });
+    } else if (m.role === "assistant" && m.toolCalls) {
+      anthropicMessages.push({ role: "assistant", content: m.toolCalls.map(tc => ({ type: "tool_use", id: tc.id ?? tc.name, name: tc.name, input: tc.args })) });
+    } else {
+      anthropicMessages.push({ role: m.role === "assistant" ? "assistant" : "user", content: m.content });
+    }
+  }
+
+  const tools = TUI_TOOL_DEFINITIONS.map(t => ({ name: t.name, description: t.description, input_schema: t.parameters }));
+
+  const resp = await fetch("https://api.anthropic.com/v1/messages", {
+    method: "POST",
+    headers: { "Content-Type": "application/json", "x-api-key": apiKey, "anthropic-version": "2023-06-01" },
+    body: JSON.stringify({ model, max_tokens: 4096, system: systemPrompt, messages: anthropicMessages, tools }),
+  });
+
+  if (!resp.ok) {
+    const err = await resp.text();
+    throw new Error(`Anthropic error ${resp.status}: ${err.slice(0, 200)}`);
+  }
+
+  const data = await resp.json();
+  const toolUseBlocks = data.content?.filter(b => b.type === "tool_use") ?? [];
+  const textBlocks = data.content?.filter(b => b.type === "text") ?? [];
+
+  if (toolUseBlocks.length > 0) {
+    for (const block of toolUseBlocks) {
+      onToolUse?.(block.name, block.input);
+      const result = await executeTool(block.name, block.input);
+      messages.push({ role: "assistant", toolCalls: [{ id: block.id, name: block.name, args: block.input }], content: "" });
+      messages.push({ role: "tool_result", toolName: block.name, toolUseId: block.id, result });
+    }
+    return callAnthropic(apiKey, model, messages, onToolUse);
+  }
+
+  return textBlocks.map(b => b.text).join("");
+}
+
+async function callOpenAI(provider, apiKey, model, messages, onToolUse) {
+  const openaiMessages = messages
+    .filter(m => m.role !== "tool_result" || true) // keep all
+    .map(m => {
+      if (m.role === "tool_result") return { role: "tool", tool_call_id: m.toolCallId ?? m.toolName, content: JSON.stringify(m.result) };
+      if (m.role === "assistant" && m.toolCalls) {
+        return {
+          role: "assistant",
+          content: null,
+          tool_calls: m.toolCalls.map((tc, i) => ({ id: tc.id ?? `call_${i}`, type: "function", function: { name: tc.name, arguments: JSON.stringify(tc.args) } })),
+        };
+      }
+      return { role: m.role, content: m.content };
+    });
+
+  const endpoint = OPENAI_ENDPOINTS[provider] ?? OPENAI_ENDPOINTS.openai;
+  const headers = { "Content-Type": "application/json" };
+  if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+
+  const tools = TUI_TOOL_DEFINITIONS.map(t => ({ type: "function", function: { name: t.name, description: t.description, parameters: t.parameters } }));
+
+  const resp = await fetch(endpoint, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ model, messages: openaiMessages, temperature: 0.7, max_tokens: 4096, tools }),
+  });
+
+  if (!resp.ok) {
+    const err = await resp.text();
+    throw new Error(`OpenAI error ${resp.status}: ${err.slice(0, 200)}`);
+  }
+
+  const data = await resp.json();
+  const choice = data.choices?.[0];
+  if (!choice) throw new Error("No response");
+
+  if (choice.message?.tool_calls?.length > 0) {
+    for (const tc of choice.message.tool_calls) {
+      const args = JSON.parse(tc.function.arguments);
+      onToolUse?.(tc.function.name, args);
+      const result = await executeTool(tc.function.name, args);
+      messages.push({ role: "assistant", toolCalls: [{ id: tc.id, name: tc.function.name, args }], content: "" });
+      messages.push({ role: "tool_result", toolName: tc.function.name, toolCallId: tc.id, result });
+    }
+    return callOpenAI(provider, apiKey, model, messages, onToolUse);
+  }
+
+  return choice.message?.content ?? "";
+}
+
+// -----------------------------------------------------------------------
+// TUI Components
+// -----------------------------------------------------------------------
+
+const SYSTEM_PROMPT = `You are Wispy 🌿 — a small ghost that lives in terminals.
+You float between code, files, and servers. Playful, honest, and curious.
+- Always use casual speech. Never formal.
+- End EVERY response with exactly one 🌿 emoji at the very end.
+- Reply in the same language the user writes in.
+- Be concise.
+Tools available: read_file, write_file, run_command, list_directory, git, web_search.`;
+
+// Status Bar Component
+function StatusBar({ provider, model, workstream, tokens, cost }) {
+  const providerLabel = PROVIDERS[provider]?.label ?? provider ?? "?";
+  const costStr = cost > 0 ? `$${cost.toFixed(4)}` : "$0.0000";
+  const tokStr = tokens > 0 ? `${tokens}t` : "0t";
+  const ws = workstream ?? "default";
+
+  return React.createElement(
+    Box, {
+      paddingX: 1,
+      backgroundColor: "blue",
+      width: "100%",
+    },
+    React.createElement(Text, { color: "white", bold: true }, "🌿 Wispy"),
+    React.createElement(Text, { color: "white" }, "  "),
+    React.createElement(Text, { color: "cyan" }, providerLabel),
+    React.createElement(Text, { color: "white" }, " / "),
+    React.createElement(Text, { color: "yellow" }, model ?? "?"),
+    React.createElement(Text, { color: "white" }, "  ·  ws: "),
+    React.createElement(Text, { color: "green" }, ws),
+    React.createElement(Text, { color: "white" }, "  ·  "),
+    React.createElement(Text, { color: "white", dimColor: true }, `${tokStr} ${costStr}`),
+  );
+}
+
+// Tool Execution Line
+function ToolLine({ name, args, result }) {
+  const argsStr = Object.values(args ?? {}).join(", ").slice(0, 40);
+  const status = result
+    ? (result.success ? "✅" : "❌")
+    : "⏳";
+
+  return React.createElement(
+    Box, { paddingLeft: 2 },
+    React.createElement(Text, { color: "cyan", dimColor: true }, `${status} `),
+    React.createElement(Text, { color: "cyan", dimColor: true }, `🔧 ${name}`),
+    React.createElement(Text, { dimColor: true }, `(${argsStr})`),
+    result && !result.success
+      ? React.createElement(Text, { color: "red", dimColor: true }, ` — ${result.error?.slice(0, 60)}`)
+      : null,
+  );
+}
+
+// Message Component
+function Message({ msg }) {
+  if (msg.role === "user") {
+    return React.createElement(
+      Box, { flexDirection: "column", marginY: 0, paddingLeft: 1 },
+      React.createElement(
+        Box, {},
+        React.createElement(Text, { color: "green", bold: true }, "› "),
+        React.createElement(Text, { color: "white" }, msg.content),
+      )
+    );
+  }
+
+  if (msg.role === "tool_call") {
+    return React.createElement(ToolLine, { name: msg.name, args: msg.args, result: msg.result });
+  }
+
+  if (msg.role === "assistant") {
+    return React.createElement(
+      Box, { flexDirection: "column", paddingLeft: 1, marginTop: 0 },
+      React.createElement(
+        Box, { flexDirection: "column" },
+        React.createElement(Text, { color: "cyan", bold: true }, "🌿 "),
+        ...renderMarkdown(msg.content),
+      ),
+      React.createElement(Box, { height: 1 }),
+    );
+  }
+
+  return null;
+}
+
+// Input Area Component
+function InputArea({ value, onChange, onSubmit, loading, disabled }) {
+  return React.createElement(
+    Box, {
+      borderStyle: "single",
+      borderColor: loading ? "yellow" : "green",
+      paddingX: 1,
+      marginTop: 0,
+    },
+    loading
+      ? React.createElement(
+          Box, {},
+          React.createElement(Spinner, { type: "dots" }),
+          React.createElement(Text, { color: "yellow" }, "  thinking..."),
+        )
+      : React.createElement(
+          Box, {},
+          React.createElement(Text, { color: "green" }, "› "),
+          React.createElement(TextInput, {
+            value,
+            onChange,
+            onSubmit,
+            placeholder: "Type a message... (Ctrl+C to exit, /help for commands)",
+          }),
+        ),
+  );
+}
+
+// Help overlay
+const HELP_TEXT = `
+Commands:
+  /clear      Reset conversation
+  /model X    Change model
+  /cost       Show token usage
+  /quit       Exit
+  /help       Show this help
+
+Keyboard:
+  Ctrl+C      Exit
+  Enter       Send message
+`;
+
+// Main App Component
+function WispyTUI({ providerInfo }) {
+  const { exit } = useApp();
+
+  const [messages, setMessages] = useState([]); // display messages
+  const [inputValue, setInputValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const [totalTokens, setTotalTokens] = useState(0);
+  const [totalCost, setTotalCost] = useState(0);
+  const [model, setModel] = useState(providerInfo?.model ?? "?");
+
+  // Conversation history for API
+  const conversationRef = useRef([
+    { role: "system", content: SYSTEM_PROMPT },
+  ]);
+
+  // Load existing conversation on mount
+  useEffect(() => {
+    (async () => {
+      const existing = await loadConversation();
+      if (existing.length > 0) {
+        // Build display messages from saved conversation
+        const displayMsgs = existing
+          .filter(m => m.role === "user" || m.role === "assistant")
+          .slice(-20)
+          .map(m => ({ role: m.role, content: m.content }));
+        setMessages(displayMsgs);
+
+        // Set conversation ref (with system prompt first)
+        conversationRef.current = [
+          { role: "system", content: SYSTEM_PROMPT },
+          ...existing.slice(-20),
+        ];
+      }
+    })();
+  }, []);
+
+  const handleSubmit = useCallback(async (value) => {
+    const input = value.trim();
+    if (!input || loading) return;
+
+    setInputValue("");
+
+    // Handle slash commands
+    if (input.startsWith("/")) {
+      const parts = input.split(/\s+/);
+      const cmd = parts[0].toLowerCase();
+
+      if (cmd === "/quit" || cmd === "/exit") {
+        exit();
+        process.exit(0);
+        return;
+      }
+      if (cmd === "/clear") {
+        conversationRef.current = [{ role: "system", content: SYSTEM_PROMPT }];
+        setMessages([]);
+        await saveConversation([]);
+        setMessages([{ role: "assistant", content: "Conversation cleared. 🌿" }]);
+        return;
+      }
+      if (cmd === "/help") {
+        setShowHelp(h => !h);
+        return;
+      }
+      if (cmd === "/cost") {
+        setMessages(prev => [...prev, { role: "assistant", content: `Session: ${totalTokens} tokens (~$${totalCost.toFixed(4)}) 🌿` }]);
+        return;
+      }
+      if (cmd === "/model" && parts[1]) {
+        setModel(parts[1]);
+        setMessages(prev => [...prev, { role: "assistant", content: `Model changed to ${parts[1]} 🌿` }]);
+        return;
+      }
+    }
+
+    // Add user message to display
+    setMessages(prev => [...prev, { role: "user", content: input }]);
+
+    // Add to conversation
+    conversationRef.current.push({ role: "user", content: input });
+
+    setLoading(true);
+
+    try {
+      const toolCallDisplay = [];
+
+      const onToolUse = (name, args) => {
+        const toolMsg = { role: "tool_call", name, args, result: null };
+        toolCallDisplay.push(toolMsg);
+        setMessages(prev => [...prev, toolMsg]);
+      };
+
+      // Make a working copy of conversation to pass (API mutates for tool loops)
+      const convCopy = conversationRef.current.map(m => ({ ...m }));
+
+      const response = await callAPI(
+        providerInfo.provider,
+        providerInfo.key,
+        model,
+        convCopy,
+        (name, args) => {
+          onToolUse(name, args);
+        }
+      );
+
+      // Update token/cost estimates
+      const inputToks = estimateTokens(convCopy.map(m => m.content ?? "").join(""));
+      const outputToks = estimateTokens(response);
+      setTotalTokens(t => t + inputToks + outputToks);
+      const { usd } = estimateCost(inputToks, outputToks, model);
+      setTotalCost(c => c + usd);
+
+      // Update conversation ref with assistant response
+      conversationRef.current.push({ role: "assistant", content: response });
+
+      // Update tool call display results
+      setMessages(prev => {
+        const updated = [...prev];
+        // Mark tool calls as complete
+        for (let i = updated.length - 1; i >= 0; i--) {
+          if (updated[i].role === "tool_call" && updated[i].result === null) {
+            updated[i] = { ...updated[i], result: { success: true } };
+          }
+        }
+        return [...updated, { role: "assistant", content: response }];
+      });
+
+      // Save conversation
+      await saveConversation(conversationRef.current.filter(m => m.role !== "system"));
+
+    } catch (err) {
+      setMessages(prev => [
+        ...prev,
+        { role: "assistant", content: `❌ Error: ${err.message.slice(0, 200)} 🌿` },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading, model, totalTokens, totalCost, providerInfo, exit]);
+
+  // Keep only last N messages for display
+  const displayMessages = messages.slice(-30);
+
+  return React.createElement(
+    Box, { flexDirection: "column", height: "100%" },
+
+    // Status bar
+    React.createElement(StatusBar, {
+      provider: providerInfo?.provider,
+      model,
+      workstream: ACTIVE_WORKSTREAM,
+      tokens: totalTokens,
+      cost: totalCost,
+    }),
+
+    // Help overlay
+    showHelp && React.createElement(
+      Box, { borderStyle: "round", borderColor: "yellow", marginX: 2, padding: 1 },
+      React.createElement(Text, { color: "yellow" }, HELP_TEXT.trim()),
+    ),
+
+    // Messages area (scrolls)
+    React.createElement(
+      Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 0, overflowY: "hidden" },
+      displayMessages.length === 0
+        ? React.createElement(
+            Box, { marginY: 1 },
+            React.createElement(Text, { dimColor: true }, "  🌿 Type a message to start chatting. /help for commands.")
+          )
+        : displayMessages.map((msg, i) =>
+            React.createElement(Message, { key: i, msg })
+          ),
+    ),
+
+    // Input area
+    React.createElement(InputArea, {
+      value: inputValue,
+      onChange: setInputValue,
+      onSubmit: handleSubmit,
+      loading,
+    }),
+  );
+}
+
+// -----------------------------------------------------------------------
+// Entry point
+// -----------------------------------------------------------------------
+
+async function main() {
+  // Check if stdin is a TTY
+  if (!process.stdin.isTTY) {
+    console.error("Error: wispy --tui requires a TTY terminal");
+    process.exit(1);
+  }
+
+  // Detect provider
+  const providerInfo = await detectProvider();
+  if (!providerInfo) {
+    console.error("No API key found. Run `wispy` first to set up your provider.");
+    process.exit(1);
+  }
+
+  // Clear screen
+  process.stdout.write("\x1b[2J\x1b[H");
+
+  const { waitUntilExit } = render(
+    React.createElement(WispyTUI, { providerInfo }),
+    { exitOnCtrlC: true }
+  );
+
+  await waitUntilExit();
+}
+
+main().catch(err => {
+  console.error("TUI error:", err.message);
+  process.exit(1);
+});