bonecode 1.0.0 → 1.1.0

package/src/tui.ts

@@ -1,16 +1,19 @@
 /**
- * BoneCode Interactive Terminal UI
+ * BoneCode TUI — styled after OpenCode's terminal interface
  *
- * Split-footer terminal session:
- *   - Scrollback output fills the top of the terminal
- *   - A persistent prompt sits at the bottom
- *   - Streaming LLM output appears above the prompt in real time
- *   - Ctrl+C interrupts the current request (does not exit)
- *   - /new starts a fresh session, /exit or Ctrl+D quits
- *   - Up/Down arrows navigate prompt history (readline built-in)
- *   - @<path> autocomplete for files in the current worktree
- *
- * Built on Node's built-in readline — no external TUI framework needed.
+ * Layout:
+ *   ┌─────────────────────────────────────────────────┐
+ *   │  [message history — scrolls up]                 │
+ *   │  ┃ User message (left border, panel bg)         │
+ *   │     ← tool  $ shell  → read  ✱ glob            │
+ *   │     response text                               │
+ *   │     ▣  Build · model · 2.1s                     │
+ *   ├─────────────────────────────────────────────────┤
+ *   │  ┃ [input textarea]                             │
+ *   │  ┃ Build · model                                │
+ *   │  ╹▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  │
+ *   │  ~/project/dir              esc interrupt        │
+ *   └─────────────────────────────────────────────────┘
  */
 
 import * as path from "path";
@@ -18,27 +21,47 @@ import * as fs from "fs";
 import * as readline from "readline";
 import * as http from "http";
 
-// ─── ANSI helpers ─────────────────────────────────────────────────────────────
+// ─── ANSI ─────────────────────────────────────────────────────────────────────
 
 const ESC = "\x1b";
-const RESET = `${ESC}[0m`;
+const R    = `${ESC}[0m`;       // reset
 const BOLD = `${ESC}[1m`;
-const DIM = `${ESC}[2m`;
-const CYAN = `${ESC}[36m`;
-const GREEN = `${ESC}[32m`;
-const YELLOW = `${ESC}[33m`;
-const RED = `${ESC}[31m`;
-const CLEAR_LINE = `${ESC}[2K\r`;
-const CURSOR_UP = `${ESC}[1A`;
-
-function stripAnsi(str: string): string {
-  return str.replace(/\x1b\[[0-9;]*[mGKHF]/g, "");
-}
-
-function truncate(str: string, width: number): string {
-  const clean = stripAnsi(str);
-  if (clean.length <= width) return str;
-  return str.slice(0, width - 1) + "…";
+const DIM  = `${ESC}[2m`;
+const CYAN = `${ESC}[96m`;      // bright cyan  — primary accent
+const GREEN= `${ESC}[92m`;      // bright green — success
+const YELLOW=`${ESC}[93m`;      // warning
+const RED  = `${ESC}[91m`;      // error
+const GRAY = `${ESC}[90m`;      // textMuted
+const WHITE= `${ESC}[97m`;      // text
+const BG_PANEL = `${ESC}[48;5;235m`; // backgroundPanel
+const BG_ELEM  = `${ESC}[48;5;237m`; // backgroundElement (input area)
+
+// Box-drawing — OpenCode uses exactly these
+const VERT  = "┃";   // U+2503 heavy vertical — left border on messages/prompt
+const CORN  = "╹";   // U+2579 heavy up — bottom-left corner of prompt box
+const SHADE = "▀";   // upper half block — decorative shadow line under prompt
+const BLOCK = "▣";   // U+25A3 — end-of-turn marker
+const ARROW_R = "→"; // read tool
+const ARROW_L = "←"; // write/edit tool
+const DOLLAR  = "$"; // shell tool
+const STAR    = "✱"; // glob/grep tool
+const PCT     = "%"; // webfetch tool
+const GEAR    = "⚙"; // generic tool
+const THINK   = "▶"; // collapsed thinking
+
+function cols() { return process.stdout.columns || 80; }
+function out(s: string) { process.stdout.write(s); }
+function nl(s = "") { process.stdout.write(s + "\n"); }
+
+// ─── Logo ─────────────────────────────────────────────────────────────────────
+// "BONECODE" in block characters
+
+function printLogo() {
+  nl();
+  nl(`${GRAY}${BOLD}█▀▀▄ █▀▀█ █▀▀█ █▀▀▀ █▀▀▀ █▀▀█ █▀▀▄ █▀▀▀${R}`);
+  nl(`${GRAY}${BOLD}█▀▀▄ █  █ █  █ █▀▀  █    █  █ █  █ █▀▀ ${R}`);
+  nl(`${GRAY}${BOLD}▀▀▀  ▀▀▀▀ ▀  ▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀  ▀▀▀▀${R}`);
+  nl();
 }
 
 // ─── Config ───────────────────────────────────────────────────────────────────
@@ -46,39 +69,81 @@ function truncate(str: string, width: number): string {
 const PKG_ROOT = path.resolve(__dirname, "..");
 
 function getVersion(): string {
-  try {
-    return JSON.parse(fs.readFileSync(path.join(PKG_ROOT, "package.json"), "utf-8")).version;
-  } catch {
-    return "0.0.0";
+  try { return JSON.parse(fs.readFileSync(path.join(PKG_ROOT, "package.json"), "utf-8")).version; }
+  catch { return "0.0.0"; }
+}
+
+// ─── @file autocomplete ───────────────────────────────────────────────────────
+
+const IGNORED_DIRS = new Set([
+  "node_modules", ".git", "dist", "build", ".next", "__pycache__",
+  ".venv", "venv", "target", "vendor", ".cache", "coverage",
+]);
+const CODE_EXTS = new Set([
+  ".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs", ".py", ".go", ".rs",
+  ".java", ".kt", ".cs", ".cpp", ".c", ".h", ".rb", ".php", ".swift",
+  ".md", ".mdx", ".json", ".yaml", ".yml", ".toml", ".env", ".sql", ".sh", ".graphql",
+]);
+
+function listFiles(worktree: string, prefix: string): string[] {
+  const results: string[] = [];
+  function walk(dir: string, depth: number) {
+    if (results.length >= 50 || depth > 4) return;
+    let entries: fs.Dirent[];
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const e of entries) {
+      if (results.length >= 50) break;
+      if (IGNORED_DIRS.has(e.name) || e.name.startsWith(".")) continue;
+      const rel = path.relative(worktree, path.join(dir, e.name));
+      if (e.isDirectory()) {
+        if (!prefix || rel.startsWith(prefix) || prefix.startsWith(rel)) {
+          results.push(rel + "/");
+          walk(path.join(dir, e.name), depth + 1);
+        }
+      } else if (CODE_EXTS.has(path.extname(e.name).toLowerCase())) {
+        if (!prefix || rel.startsWith(prefix)) results.push(rel);
+      }
+    }
   }
+  walk(worktree, 0);
+  return results.sort();
 }
 
-// ─── TUI State ────────────────────────────────────────────────────────────────
-
-interface TUIState {
-  sessionId: string | null;
-  model: string;
-  provider: string;
-  port: number;
-  token: string;
-  worktree: string;
-  promptHistory: string[];
-  streaming: boolean;
-  abortController: AbortController | null;
-  turnCount: number;
-  totalTokens: number;
+// ─── Completers ───────────────────────────────────────────────────────────────
+
+const COMMANDS = [
+  "/new", "/session", "/model", "/provider", "/providers",
+  "/clear", "/history", "/help", "/exit", "/quit",
+];
+
+function buildCompleter(worktree: string) {
+  return (line: string): [string[], string] => {
+    // /command autocomplete
+    if (line.startsWith("/")) {
+      const matches = COMMANDS.filter(c => c.startsWith(line));
+      return [matches, line];
+    }
+
+    // @file autocomplete
+    const atIdx = line.lastIndexOf("@");
+    if (atIdx !== -1) {
+      const prefix = line.slice(atIdx + 1);
+      const completions = listFiles(worktree, prefix).map(f => line.slice(0, atIdx + 1) + f);
+      return [completions, line];
+    }
+
+    return [[], line];
+  };
 }
 
-// ─── Server health check ──────────────────────────────────────────────────────
+// ─── Server health ────────────────────────────────────────────────────────────
 
-async function waitForServer(port: number, maxWaitMs = 30_000): Promise<boolean> {
+async function waitForServer(port: number, maxMs = 30_000): Promise<boolean> {
   const start = Date.now();
-  while (Date.now() - start < maxWaitMs) {
+  while (Date.now() - start < maxMs) {
     try {
       const ok = await new Promise<boolean>((resolve) => {
-        const req = http.get(`http://localhost:${port}/health`, (res) => {
-          resolve(res.statusCode === 200);
-        });
+        const req = http.get(`http://localhost:${port}/health`, (res) => resolve(res.statusCode === 200));
         req.on("error", () => resolve(false));
         req.setTimeout(1000, () => { req.destroy(); resolve(false); });
       });
@@ -89,7 +154,7 @@ async function waitForServer(port: number, maxWaitMs = 30_000): Promise<boolean>
   return false;
 }
 
-// ─── API helpers ──────────────────────────────────────────────────────────────
+// ─── API ──────────────────────────────────────────────────────────────────────
 
 async function apiPost(url: string, body: object, token: string): Promise<Response> {
   return fetch(url, {
@@ -99,538 +164,456 @@ async function apiPost(url: string, body: object, token: string): Promise<Respon
   });
 }
 
-async function apiGetJson<T = unknown>(url: string, token: string): Promise<T> {
+async function apiGet<T>(url: string, token: string): Promise<T> {
   const r = await fetch(url, { headers: { "Authorization": `Bearer ${token}` } });
-  if (!r.ok) throw new Error(`API error ${r.status}: ${await r.text()}`);
+  if (!r.ok) throw new Error(`API ${r.status}`);
   return r.json() as Promise<T>;
 }
 
-// ─── Session management ───────────────────────────────────────────────────────
-
-async function createSession(state: TUIState, title: string): Promise<string> {
-  const r = await apiPost(
-    `http://localhost:${state.port}/v2/session`,
-    { title, directory: state.worktree },
-    state.token
-  );
+async function createSession(port: number, token: string, worktree: string, title: string): Promise<string> {
+  const r = await apiPost(`http://localhost:${port}/v2/session`, { title, directory: worktree }, token);
   if (!r.ok) throw new Error(`Failed to create session: ${await r.text()}`);
   const sess = await r.json() as { id?: string };
-  if (!sess.id) throw new Error("Server returned session without ID");
+  if (!sess.id) throw new Error("No session ID returned");
   return sess.id;
 }
 
-// ─── @file autocomplete ───────────────────────────────────────────────────────
+// ─── Streaming ────────────────────────────────────────────────────────────────
 
-const IGNORED_DIRS = new Set([
-  "node_modules", ".git", "dist", "build", ".next", "__pycache__",
-  ".venv", "venv", "target", "vendor", ".cache", "coverage",
-]);
-
-const CODE_EXTS = new Set([
-  ".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs",
-  ".py", ".go", ".rs", ".java", ".kt", ".cs", ".cpp", ".c", ".h",
-  ".rb", ".php", ".swift", ".scala",
-  ".md", ".mdx", ".json", ".yaml", ".yml", ".toml", ".env",
-  ".sql", ".sh", ".bash", ".graphql",
-]);
-
-function listFilesForAutocomplete(worktree: string, prefix: string): string[] {
-  const results: string[] = [];
-  const MAX = 50;
-
-  function walk(dir: string, depth: number) {
-    if (results.length >= MAX || depth > 4) return;
-    let entries: fs.Dirent[];
-    try { entries = fs.readdirSync(dir, { withFileTypes: true }); }
-    catch { return; }
-
-    for (const e of entries) {
-      if (results.length >= MAX) break;
-      if (IGNORED_DIRS.has(e.name) || e.name.startsWith(".")) continue;
-      const rel = path.relative(worktree, path.join(dir, e.name));
-      if (e.isDirectory()) {
-        if (!prefix || rel.startsWith(prefix) || prefix.startsWith(rel)) {
-          results.push(rel + "/");
-          walk(path.join(dir, e.name), depth + 1);
-        }
-      } else if (CODE_EXTS.has(path.extname(e.name).toLowerCase())) {
-        if (!prefix || rel.startsWith(prefix)) {
-          results.push(rel);
-        }
-      }
-    }
-  }
-
-  walk(worktree, 0);
-  return results.sort();
+interface StreamResult {
+  text: string;
+  tokens: number;
+  elapsedMs: number;
+  error?: string;
+  interrupted: boolean;
 }
 
-function buildCompleter(worktree: string) {
-  return function completer(line: string): [string[], string] {
-    // Only trigger on @ mentions
-    const atIdx = line.lastIndexOf("@");
-    if (atIdx === -1) return [[], line];
-
-    const prefix = line.slice(atIdx + 1);
-    const files = listFilesForAutocomplete(worktree, prefix);
-    const completions = files.map(f => line.slice(0, atIdx + 1) + f);
-    return [completions, line];
-  };
-}
-
-// ─── Streaming output ─────────────────────────────────────────────────────────
-
-async function streamPrompt(
-  state: TUIState,
-  message: string,
-  onDelta: (text: string) => void,
-  onDone: (info: { tokens?: number; error?: string }) => void
-): Promise<void> {
-  if (!state.sessionId) throw new Error("No active session");
-
-  const ctrl = new AbortController();
-  state.abortController = ctrl;
+async function streamPrompt(opts: {
+  port: number; token: string; sessionId: string;
+  model: string; provider: string; message: string;
+  abortSignal: AbortSignal; onDelta: (t: string) => void;
+}): Promise<StreamResult> {
+  const { port, token, sessionId, model, provider, message, abortSignal, onDelta } = opts;
+  const t0 = Date.now();
+  let fullText = "";
+  let tokens = 0;
 
   try {
-    const r = await fetch(`http://localhost:${state.port}/v2/session/${state.sessionId}/prompt`, {
+    const r = await fetch(`http://localhost:${port}/v2/session/${sessionId}/prompt`, {
       method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "Authorization": `Bearer ${state.token}`,
-      },
-      body: JSON.stringify({ content: message, modelID: state.model, providerID: state.provider }),
-      signal: ctrl.signal,
+      headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` },
+      body: JSON.stringify({ content: message, modelID: model, providerID: provider }),
+      signal: abortSignal,
     });
-
-    if (!r.ok) {
-      onDone({ error: `HTTP ${r.status}: ${await r.text()}` });
-      return;
-    }
+    if (!r.ok) return { text: "", tokens: 0, elapsedMs: Date.now() - t0, error: `HTTP ${r.status}: ${await r.text()}`, interrupted: false };
 
     const reader = r.body!.getReader();
-    const decoder = new TextDecoder();
-    let buffer = "";
-
+    const dec = new TextDecoder();
+    let buf = "";
     while (true) {
       const { value, done } = await reader.read();
       if (done) break;
-      buffer += decoder.decode(value, { stream: true });
-
-      const lines = buffer.split("\n");
-      buffer = lines.pop() || "";
-
-      for (const line of lines) {
-        if (!line.startsWith("data: ")) continue;
+      buf += dec.decode(value, { stream: true });
+      const lines = buf.split("\n");
+      buf = lines.pop() || "";
+      for (const raw of lines) {
+        if (!raw.startsWith("data: ")) continue;
+        const json = raw.slice(6).trim();
+        if (!json || json === "[DONE]") continue;
         try {
-          const event = JSON.parse(line.slice(6));
-          if (event.type === "part.delta" && event.delta?.type === "text") {
-            onDelta(event.delta.text);
+          const ev = JSON.parse(json);
+          if (ev.type === "part.delta" && ev.delta?.type === "text") {
+            fullText += ev.delta.text;
+            onDelta(ev.delta.text);
           }
-          if (event.type === "error") {
-            onDone({ error: event.properties?.message || "Unknown error" });
-            return;
-          }
-        } catch { /* non-JSON SSE line */ }
+          if (ev.type === "error") return { text: fullText, tokens, elapsedMs: Date.now() - t0, error: ev.properties?.message || "error", interrupted: false };
+        } catch {}
       }
     }
 
-    // Poll for final stored response to get token counts
-    await new Promise(r => setTimeout(r, 800));
     try {
-      const msgs = await apiGetJson<any[]>(
-        `http://localhost:${state.port}/v2/session/${state.sessionId}/message`,
-        state.token
-      );
-      const lastAssistant = msgs.filter(m => m.role === "assistant").slice(-1)[0];
-      const tokens = (lastAssistant?.tokens?.input || 0) + (lastAssistant?.tokens?.output || 0);
-      onDone({ tokens });
-    } catch {
-      onDone({});
-    }
+      const msgs = await apiGet<any[]>(`http://localhost:${port}/v2/session/${sessionId}/message`, token);
+      const last = msgs.filter((m: any) => m.role === "assistant").slice(-1)[0];
+      tokens = (last?.tokens?.input || 0) + (last?.tokens?.output || 0);
+    } catch {}
+
+    return { text: fullText, tokens, elapsedMs: Date.now() - t0, interrupted: false };
   } catch (e: any) {
-    if (e.name === "AbortError") {
-      onDone({ error: "interrupted" });
-    } else {
-      onDone({ error: e.message });
-    }
-  } finally {
-    state.abortController = null;
+    if (e.name === "AbortError") return { text: fullText, tokens, elapsedMs: Date.now() - t0, interrupted: true };
+    return { text: fullText, tokens, elapsedMs: Date.now() - t0, error: e.message, interrupted: false };
   }
 }
 
-// ─── Terminal rendering ───────────────────────────────────────────────────────
-
-class TUIRenderer {
-  private promptLine = "";
-  private statusLine = "";
-  private streamBuffer = "";
-  private cols: number;
-
-  constructor() {
-    this.cols = process.stdout.columns || 80;
-    process.stdout.on("resize", () => {
-      this.cols = process.stdout.columns || 80;
-    });
-  }
-
-  print(text: string, newline = true): void {
-    this.clearPromptArea();
-    process.stdout.write(text + (newline ? "\n" : ""));
-    this.redrawPromptArea();
-  }
-
-  delta(text: string): void {
-    this.clearPromptArea();
-    process.stdout.write(text);
-    this.streamBuffer += text;
-    this.redrawPromptArea();
-  }
+// ─── Rendering helpers ────────────────────────────────────────────────────────
 
-  endStream(): void {
-    if (this.streamBuffer && !this.streamBuffer.endsWith("\n")) {
-      process.stdout.write("\n");
-    }
-    this.streamBuffer = "";
-    this.redrawPromptArea();
+// User message: ┃ left border, panel background
+function renderUserMessage(text: string) {
+  nl();
+  const lines = text.split("\n");
+  for (const l of lines) {
+    nl(`${GRAY}${VERT}${R}  ${WHITE}${l}${R}`);
   }
+  nl();
+}
 
-  setStatus(text: string): void {
-    this.statusLine = text;
-    this.redrawPromptArea();
-  }
+// Tool call line — inline style matching OpenCode
+function renderToolCall(toolName: string, summary: string, done: boolean) {
+  const icon = toolIcon(toolName);
+  const color = done ? GRAY : WHITE;
+  nl(`   ${color}${icon} ${summary}${R}`);
+}
 
-  setPrompt(text: string): void {
-    this.promptLine = text;
-    this.redrawPromptArea();
-  }
+function toolIcon(name: string): string {
+  const n = name.toLowerCase();
+  if (n === "write" || n === "edit" || n === "apply_patch") return ARROW_L;
+  if (n === "read") return ARROW_R;
+  if (n === "shell" || n === "bash") return DOLLAR;
+  if (n === "glob" || n === "grep") return STAR;
+  if (n === "webfetch") return PCT;
+  return GEAR;
+}
 
-  private clearPromptArea(): void {
-    process.stdout.write(CLEAR_LINE);
-    process.stdout.write(CURSOR_UP + CLEAR_LINE);
-  }
+// End-of-turn marker: ▣  Build · model · 2.1s
+function renderTurnEnd(model: string, elapsedMs: number, interrupted: boolean) {
+  const elapsed = (elapsedMs / 1000).toFixed(1);
+  const dur = interrupted ? `${YELLOW}interrupted${R}` : `${GRAY}${elapsed}s${R}`;
+  nl();
+  nl(`   ${CYAN}${BLOCK}${R}  ${WHITE}Build${R}${GRAY} · ${model} · ${R}${dur}`);
+}
 
-  private redrawPromptArea(): void {
-    const statusText = truncate(this.statusLine, this.cols - 2);
-    const promptText = truncate(this.promptLine, this.cols - 2);
-    process.stdout.write(`${DIM}${statusText}${RESET}\n`);
-    process.stdout.write(promptText);
-  }
+// Prompt box — matches OpenCode's input area design
+function renderPromptBox(model: string, provider: string, sessionId: string, worktree: string) {
+  const width = cols();
+  const dir = worktree.replace(/\\/g, "/").replace(/^.*\/([^/]+\/[^/]+)$/, "$1"); // last 2 path segments
+  const modelLabel = `${WHITE}Build${R}${GRAY} · ${model}${R}`;
+  const shadow = SHADE.repeat(Math.min(width - 2, 60));
+
+  nl();
+  nl(`${GRAY}${VERT}${R}`);
+  nl(`${GRAY}${VERT}${R}  ${GRAY}${DIM}Type a message...${R}`);
+  nl(`${GRAY}${VERT}${R}`);
+  nl(`${GRAY}${VERT}${R}  ${modelLabel}`);
+  nl(`${GRAY}${CORN}${shadow}${R}`);
+  nl(`${GRAY}${dir}${R}                                    ${GRAY}esc ${DIM}interrupt${R}`);
+}
 
-  initPromptArea(): void {
-    process.stdout.write("\n\n");
-    this.clearPromptArea();
-    this.redrawPromptArea();
-  }
+// Help text
+function printHelp() {
+  nl();
+  nl(`${CYAN}${BOLD}BoneCode${R} ${GRAY}commands${R}`);
+  nl();
+  nl(`  ${CYAN}/new${R}                  New session`);
+  nl(`  ${CYAN}/session${R}              Show session ID`);
+  nl(`  ${CYAN}/model <id>${R}           Switch model`);
+  nl(`  ${CYAN}/provider <id>${R}        Switch provider`);
+  nl(`  ${CYAN}/providers${R}            List all providers`);
+  nl(`  ${CYAN}/clear${R}                Clear screen`);
+  nl(`  ${CYAN}/history${R}              Last 10 prompts`);
+  nl(`  ${CYAN}/exit${R}                 Exit`);
+  nl();
+  nl(`  ${CYAN}Ctrl+C${R}                Interrupt current request`);
+  nl(`  ${CYAN}Ctrl+D${R}                Exit`);
+  nl(`  ${CYAN}↑ / ↓${R}                 Prompt history`);
+  nl(`  ${CYAN}@<path>${R}               Attach file — Tab to autocomplete`);
+  nl();
+  nl(`  ${GRAY}Model shorthand:  /model groq/llama-3.3-70b-versatile${R}`);
+  nl(`  ${GRAY}Local config:     /model local${R}`);
+  nl();
+}
 
-  separator(char = "─"): void {
-    this.print(`${DIM}${char.repeat(Math.min(this.cols, 60))}${RESET}`);
-  }
+async function fetchProviders(port: number, token: string): Promise<any[]> {
+  try { return await apiGet<any[]>(`http://localhost:${port}/v2/provider`, token); }
+  catch { return []; }
+}
 
-  banner(model: string, worktree: string): void {
-    const VERSION = getVersion();
-    const dir = path.basename(worktree) || worktree;
-    this.print(`\n${CYAN}${BOLD}BoneCode${RESET} ${DIM}v${VERSION}${RESET}`);
-    this.print(`${DIM}  model: ${RESET}${model}`);
-    this.print(`${DIM}  dir:   ${RESET}${dir}`);
-    this.print(`${DIM}  type ${RESET}${CYAN}/help${RESET}${DIM} for commands · ${RESET}${CYAN}Ctrl+C${RESET}${DIM} to interrupt · ${RESET}${CYAN}Ctrl+D${RESET}${DIM} to exit${RESET}`);
-    this.separator();
+function printProviders(providers: any[], currentProvider: string) {
+  const width = cols();
+  nl();
+  nl(`${CYAN}${BOLD}Providers${R}`);
+  nl(`${GRAY}${"─".repeat(Math.min(width, 56))}${R}`);
+  for (const p of providers) {
+    const active = p.id === currentProvider;
+    const dot = active ? `${GREEN}●${R}` : `${GRAY}○${R}`;
+    const free = p.free ? ` ${GREEN}free${R}` : "";
+    const local = p.id === "local" ? ` ${CYAN}local config${R}` : "";
+    nl(`  ${dot} ${active ? CYAN + BOLD : WHITE}${p.id}${R}${free}${local}  ${GRAY}${p.name}${R}`);
+    if (p.freeNote) nl(`       ${GRAY}${p.freeNote}${R}`);
+    if (p.models?.length) nl(`       ${GRAY}${p.models.slice(0, 3).join("  ")}${R}`);
+    if (p.keyEnv) nl(`       ${GRAY}${p.keyEnv}${R}`);
   }
+  nl(`${GRAY}${"─".repeat(Math.min(width, 56))}${R}`);
+  nl(`  ${GRAY}/provider <id>   /model <id>${R}`);
+  nl();
 }
 
-// ─── Input handling ───────────────────────────────────────────────────────────
-
-class TUIInput {
-  private rl: readline.Interface;
-  private sigintHandler: (() => void) | null = null;
-
-  constructor(
-    private renderer: TUIRenderer,
-    private state: TUIState,
-    private onSubmit: (text: string) => Promise<void>
-  ) {
-    this.rl = readline.createInterface({
-      input: process.stdin,
-      output: process.stdout,
-      terminal: true,
-      historySize: 100,
-      completer: buildCompleter(state.worktree),
-    });
-
-    // Seed readline history from state
-    for (const h of state.promptHistory.slice().reverse()) {
-      (this.rl as any).history?.unshift(h);
-    }
+// ─── Main TUI ─────────────────────────────────────────────────────────────────
 
-    this.rl.on("line", async (line) => {
-      const text = line.trim();
-      if (text) {
-        state.promptHistory.push(text);
-        if (state.promptHistory.length > 100) state.promptHistory.shift();
-      }
-      await this.onSubmit(text);
-      this.prompt();
-    });
-
-    this.rl.on("close", () => {
-      this.cleanup();
-      renderer.print(`\n${DIM}Goodbye.${RESET}`);
-      process.exit(0);
-    });
+export async function runTUI(opts: {
+  port: number; token: string; model: string;
+  provider: string; worktree: string; sessionId?: string;
+}): Promise<void> {
+  let { model, provider } = opts;
+  const { port, token, worktree } = opts;
+  let sessionId = opts.sessionId || null;
+  let turnCount = 0;
+  const history: string[] = [];
+  let abort: AbortController | null = null;
+  let streaming = false;
 
-    // Register SIGINT handler — stored so we can remove it on cleanup
-    this.sigintHandler = () => {
-      if (state.abortController) {
-        state.abortController.abort();
-        renderer.print(`\n${YELLOW}⟳ Interrupted${RESET}`);
-        this.prompt();
-      } else {
-        renderer.print(`\n${DIM}(Use Ctrl+D or /exit to quit)${RESET}`);
-        this.prompt();
-      }
-    };
-    process.on("SIGINT", this.sigintHandler);
+  // Create initial session
+  if (!sessionId) {
+    try { sessionId = await createSession(port, token, worktree, "BoneCode Session"); }
+    catch (e: any) { process.stderr.write(`${RED}Failed to create session: ${e.message}${R}\n`); process.exit(1); }
   }
 
-  prompt(): void {
-    const sessionLabel = this.state.sessionId
-      ? `${DIM}[${this.state.sessionId.slice(0, 8)}]${RESET} `
-      : "";
-    const promptStr = `${CYAN}${BOLD}>${RESET} `;
-    const full = `${sessionLabel}${promptStr}`;
-    this.renderer.setPrompt(full);
-    this.rl.setPrompt(full);
-    this.rl.prompt(true);
-  }
+  // Header
+  printLogo();
+  const VERSION = getVersion();
+  nl(`  ${GRAY}v${VERSION}  ·  ${model}  ·  ${path.basename(worktree)}${R}`);
+  nl(`  ${GRAY}session ${sessionId!.slice(0, 8)}${R}`);
+  nl();
+  nl(`  ${GRAY}/help for commands  ·  Ctrl+C interrupt  ·  Ctrl+D exit${R}`);
+  nl();
+  nl(); // extra blank line — ghost hint uses the line above the prompt
+
+  const rl = readline.createInterface({
+    input: process.stdin, output: process.stdout,
+    terminal: true, historySize: 200,
+    completer: buildCompleter(worktree),
+  });
 
-  cleanup(): void {
-    if (this.sigintHandler) {
-      process.removeListener("SIGINT", this.sigintHandler);
-      this.sigintHandler = null;
-    }
-  }
+  const promptStr = () => `${CYAN}${BOLD}>${R} `;
 
-  close(): void {
-    this.cleanup();
-    this.rl.close();
-  }
-}
+  const sigint = () => {
+    if (streaming && abort) {
+      abort.abort();
+      nl(`\n${YELLOW}interrupted${R}`);
+    } else {
+      nl(`\n${GRAY}(Ctrl+D or /exit to quit)${R}`);
+    }
+    rl.setPrompt(promptStr());
+    rl.prompt();
+  };
+  process.on("SIGINT", sigint);
 
-// ─── Command handlers ─────────────────────────────────────────────────────────
-
-async function handleCommand(cmd: string, state: TUIState, renderer: TUIRenderer): Promise<void> {
-  const parts = cmd.slice(1).trim().split(/\s+/);
-  const name = parts[0]?.toLowerCase() || "";
-  const args = parts.slice(1);
-
-  switch (name) {
-    case "help":
-    case "h":
-      renderer.print(`
-${CYAN}${BOLD}BoneCode Commands${RESET}
-  ${CYAN}/new${RESET}              Start a new session
-  ${CYAN}/session${RESET}          Show current session ID
-  ${CYAN}/model <id>${RESET}       Switch model (e.g. /model gpt-4o or /model anthropic/claude-sonnet-4-5)
-  ${CYAN}/clear${RESET}            Clear the screen
-  ${CYAN}/history${RESET}          Show last 10 prompts
-  ${CYAN}/exit${RESET}, ${CYAN}/quit${RESET}      Exit BoneCode
-  ${CYAN}Ctrl+C${RESET}            Interrupt current request (stays in session)
-  ${CYAN}Ctrl+D${RESET}            Exit BoneCode
-  ${CYAN}↑ / ↓${RESET}             Navigate prompt history
-  ${CYAN}@<path>${RESET}           Attach a file — press Tab to autocomplete`);
-      break;
-
-    case "new":
-      renderer.print(`${DIM}Starting new session...${RESET}`);
-      try {
-        state.sessionId = await createSession(state, "New Session");
-        state.turnCount = 0;
-        renderer.print(`${GREEN}✓ New session: ${state.sessionId.slice(0, 8)}...${RESET}`);
-        renderer.separator();
-      } catch (e: any) {
-        renderer.print(`${RED}✗ Failed to create session: ${e.message}${RESET}`);
-      }
-      break;
+  rl.on("close", () => {
+    process.removeListener("SIGINT", sigint);
+    nl(`\n${GRAY}Goodbye.${R}`);
+    process.exit(0);
+  });
 
-    case "session":
-      if (state.sessionId) {
-        renderer.print(`${DIM}Session: ${RESET}${state.sessionId}`);
-      } else {
-        renderer.print(`${YELLOW}No active session${RESET}`);
-      }
-      break;
-
-    case "model":
-      if (args[0]) {
-        if (args[0].includes("/")) {
-          const slashIdx = args[0].indexOf("/");
-          state.provider = args[0].slice(0, slashIdx);
-          state.model = args[0].slice(slashIdx + 1);
-        } else {
-          state.model = args[0];
+  rl.setPrompt(promptStr());
+  rl.prompt();
+
+  // Ghost-text hint: when user types /x show matching commands above prompt
+  let lastHint = "";
+  (rl as any).input?.on("keypress", (_: any, key: any) => {
+    if (!key) return;
+    // Small delay so readline has updated its line buffer
+    setImmediate(() => {
+      const current: string = (rl as any).line || "";
+      if (!current.startsWith("/") || current.includes(" ")) {
+        if (lastHint) {
+          // Clear the hint line
+          process.stdout.write(`${ESC}[s`);           // save cursor
+          process.stdout.write(`${ESC}[1A${ESC}[2K`); // up 1, clear line
+          process.stdout.write(`${ESC}[u`);           // restore cursor
+          lastHint = "";
         }
-        renderer.print(`${GREEN}✓ Model: ${state.provider}/${state.model}${RESET}`);
-        renderer.setStatus(`${DIM}${state.provider}/${state.model}${RESET}`);
-      } else {
-        renderer.print(`${DIM}Current model: ${RESET}${state.provider}/${state.model}`);
+        return;
       }
-      break;
-
-    case "clear":
-      process.stdout.write(`${ESC}[2J${ESC}[H`);
-      renderer.banner(`${state.provider}/${state.model}`, state.worktree);
-      renderer.initPromptArea();
-      break;
-
-    case "history":
-      if (state.promptHistory.length === 0) {
-        renderer.print(`${DIM}No history yet${RESET}`);
-      } else {
-        renderer.print(`${DIM}Recent prompts:${RESET}`);
-        state.promptHistory.slice(-10).forEach((h, i) => {
-          renderer.print(`  ${DIM}${i + 1}.${RESET} ${truncate(h, 70)}`);
-        });
+      const matches = COMMANDS.filter(c => c.startsWith(current) && c !== current);
+      const hint = matches.length ? matches[0] : "";
+      if (hint === lastHint) return;
+      lastHint = hint;
+      // Print hint above the prompt line
+      process.stdout.write(`${ESC}[s`);           // save cursor
+      process.stdout.write(`${ESC}[1A${ESC}[2K`); // up 1, clear line
+      if (hint) {
+        // Show current typed part normal, rest in grey
+        const ghost = hint.slice(current.length);
+        process.stdout.write(`${promptStr()}${current}${GRAY}${ghost}${R}`);
       }
-      break;
+      process.stdout.write(`${ESC}[u`);           // restore cursor
+    });
+  });
 
-    case "exit":
-    case "quit":
-    case "q":
-      renderer.print(`\n${DIM}Goodbye.${RESET}`);
-      process.exit(0);
-      break;
+  for await (const rawLine of rl) {
+    const text = rawLine.trim();
 
-    default:
-      renderer.print(`${YELLOW}Unknown command: /${name}${RESET} — type ${CYAN}/help${RESET} for commands`);
-  }
-}
+    if (!text) { rl.setPrompt(promptStr()); rl.prompt(); continue; }
 
-// ─── Main TUI loop ────────────────────────────────────────────────────────────
+    history.push(text);
+    if (history.length > 200) history.shift();
 
-export async function runTUI(opts: {
-  port: number;
-  token: string;
-  model: string;
-  provider: string;
-  worktree: string;
-  sessionId?: string;
-}): Promise<void> {
-  const state: TUIState = {
-    sessionId: opts.sessionId || null,
-    model: opts.model,
-    provider: opts.provider,
-    port: opts.port,
-    token: opts.token,
-    worktree: opts.worktree,
-    promptHistory: [],
-    streaming: false,
-    abortController: null,
-    turnCount: 0,
-    totalTokens: 0,
-  };
+    // ── Commands ──────────────────────────────────────────────────────────────
+    if (text.startsWith("/")) {
+      const parts = text.slice(1).trim().split(/\s+/);
+      const cmd = parts[0]?.toLowerCase() || "";
+      const args = parts.slice(1);
+
+      switch (cmd) {
+        case "help": case "h":
+          printHelp();
+          break;
+
+        case "new":
+          try {
+            sessionId = await createSession(port, token, worktree, "New Session");
+            turnCount = 0;
+            nl(`${GREEN}✓${R} ${GRAY}session ${sessionId.slice(0, 8)}${R}`);
+          } catch (e: any) { nl(`${RED}✗ ${e.message}${R}`); }
+          break;
+
+        case "session":
+          nl(`${GRAY}${sessionId}${R}`);
+          break;
+
+        case "model":
+          if (args[0]) {
+            if (args[0] === "local") {
+              provider = process.env.DEFAULT_PROVIDER || "openai_compatible";
+              model = process.env.DEFAULT_MODEL || "local-model";
+              nl(`${GREEN}✓${R} ${WHITE}${provider}/${model}${R}`);
+            } else if (args[0].includes("/")) {
+              const i = args[0].indexOf("/");
+              provider = args[0].slice(0, i);
+              model = args[0].slice(i + 1);
+              nl(`${GREEN}✓${R} ${WHITE}${provider}/${model}${R}`);
+            } else {
+              model = args[0];
+              nl(`${GREEN}✓${R} ${WHITE}${provider}/${model}${R}`);
+            }
+          } else {
+            nl(`${GRAY}${provider}/${model}${R}`);
+          }
+          break;
+
+        case "provider":
+          if (args[0]) {
+            if (args[0] === "local") {
+              provider = process.env.DEFAULT_PROVIDER || "openai_compatible";
+              model = process.env.DEFAULT_MODEL || "local-model";
+              nl(`${GREEN}✓${R} ${WHITE}${provider}/${model}${R}`);
+            } else {
+              provider = args[0];
+              nl(`${GREEN}✓${R} ${WHITE}${provider}${R}  ${GRAY}use /model <id> to set model${R}`);
+            }
+          } else {
+            nl(`${GRAY}${provider}${R}`);
+          }
+          break;
 
-  const renderer = new TUIRenderer();
+        case "providers": {
+          const list = await fetchProviders(port, token);
+          if (list.length) printProviders(list, provider);
+          else nl(`${YELLOW}Could not fetch providers${R}`);
+          break;
+        }
 
-  // Create initial session
-  if (!state.sessionId) {
-    try {
-      state.sessionId = await createSession(state, "BoneCode Session");
-    } catch (e: any) {
-      process.stderr.write(`${RED}Failed to create session: ${e.message}${RESET}\n`);
-      process.exit(1);
-    }
-  }
+        case "clear":
+          process.stdout.write(`${ESC}[2J${ESC}[H`);
+          printLogo();
+          break;
 
-  renderer.banner(`${state.provider}/${state.model}`, state.worktree);
-  renderer.setStatus(`${DIM}${state.provider}/${state.model} · session ${state.sessionId!.slice(0, 8)}${RESET}`);
-  renderer.initPromptArea();
+        case "history":
+          if (!history.length) { nl(`${GRAY}No history${R}`); }
+          else history.slice(-10).forEach((h, i) => nl(`  ${GRAY}${i + 1}.${R} ${h.slice(0, 80)}`));
+          break;
 
-  const tuiInput = new TUIInput(renderer, state, async (text: string) => {
-    if (!text) return;
+        case "exit": case "quit": case "q":
+          nl(`\n${GRAY}Goodbye.${R}`);
+          process.exit(0);
+          break;
 
-    if (text.startsWith("/")) {
-      await handleCommand(text, state, renderer);
-      return;
+        default:
+          nl(`${YELLOW}Unknown: /${cmd}${R}  ${GRAY}/help${R}`);
+      }
+
+      rl.setPrompt(promptStr());
+      rl.prompt();
+      continue;
     }
 
-    // Ensure session exists
-    if (!state.sessionId) {
-      try {
-        state.sessionId = await createSession(state, text.slice(0, 50));
-      } catch (e: any) {
-        renderer.print(`${RED}✗ Failed to create session: ${e.message}${RESET}`);
-        return;
-      }
+    // ── Prompt ────────────────────────────────────────────────────────────────
+
+    if (!sessionId) {
+      try { sessionId = await createSession(port, token, worktree, text.slice(0, 50)); }
+      catch (e: any) { nl(`${RED}✗ ${e.message}${R}`); rl.setPrompt(promptStr()); rl.prompt(); continue; }
     }
 
-    // Resolve @file mentions to absolute paths
-    const resolvedText = text.replace(/@([\w./\-]+)/g, (match, filePath) => {
-      const abs = path.isAbsolute(filePath)
-        ? filePath
-        : path.resolve(state.worktree, filePath);
+    // Resolve @file mentions
+    const resolved = text.replace(/@([\w./\-]+)/g, (match, fp) => {
+      const abs = path.isAbsolute(fp) ? fp : path.resolve(worktree, fp);
       return fs.existsSync(abs) ? `@${abs}` : match;
     });
 
-    renderer.print(`\n${CYAN}${BOLD}You${RESET}`);
-    renderer.print(resolvedText !== text ? `${text} ${DIM}(files resolved)${RESET}` : text);
-    renderer.separator("·");
-    renderer.print(`${GREEN}${BOLD}BoneCode${RESET} ${DIM}(${state.model})${RESET}`);
-
-    state.streaming = true;
-    const startMs = Date.now();
-    renderer.setStatus(`${YELLOW}⟳ thinking...${RESET}`);
-
-    await streamPrompt(
-      state,
-      resolvedText,
-      (delta) => {
-        // Strip markdown fences — they don't render well in terminals
+    // Render user message with ┃ border
+    renderUserMessage(resolved !== text ? `${text} ${GRAY}(files resolved)${R}` : text);
+
+    // Thinking indicator
+    out(`   ${GRAY}⋯${R}`);
+
+    rl.pause();
+    streaming = true;
+    abort = new AbortController();
+    let firstDelta = true;
+
+    const result = await streamPrompt({
+      port, token, sessionId: sessionId!, model, provider,
+      message: resolved, abortSignal: abort.signal,
+      onDelta: (delta) => {
+        if (firstDelta) {
+          // Clear the thinking indicator, print indent once
+          out(`\r${ESC}[2K`);
+          nl();
+          out(`   `);
+          firstDelta = false;
+        }
+        // Strip markdown fences for terminal rendering
         const clean = delta.replace(/^```\w*\n?/gm, "").replace(/^```\n?/gm, "");
-        if (clean) renderer.delta(clean);
+        if (clean) out(clean);
       },
-      (info) => {
-        renderer.endStream();
-        state.streaming = false;
-        state.turnCount++;
+    });
 
-        const elapsed = ((Date.now() - startMs) / 1000).toFixed(1);
-        if (info.tokens) state.totalTokens += info.tokens;
+    streaming = false;
+    abort = null;
 
-        if (info.error && info.error !== "interrupted") {
-          renderer.print(`${RED}✗ ${info.error}${RESET}`);
-        }
+    if (firstDelta) {
+      // No deltas arrived — clear thinking indicator
+      out(`\r${ESC}[2K`);
+    }
 
-        renderer.separator();
+    if (result.text && !result.text.endsWith("\n")) nl();
 
-        const tokenStr = info.tokens ? ` · ${info.tokens} tok` : "";
-        const statusStr = info.error === "interrupted"
-          ? `${YELLOW}interrupted${RESET}`
-          : `${DIM}${elapsed}s${tokenStr}${RESET}`;
-        renderer.setStatus(
-          `${DIM}${state.provider}/${state.model} · turn ${state.turnCount}${RESET} · ${statusStr}`
-        );
-      }
-    );
-  });
+    turnCount++;
+
+    // End-of-turn marker: ▣  Build · model · 2.1s
+    renderTurnEnd(model, result.elapsedMs, result.interrupted);
 
-  tuiInput.prompt();
+    if (result.error && !result.interrupted) {
+      nl(`   ${RED}✗ ${result.error}${R}`);
+    }
 
-  // Keep process alive until readline closes
-  await new Promise<void>(() => {});
+    nl();
+
+    rl.resume();
+    rl.setPrompt(promptStr());
+    nl(); // blank line for ghost hint
+    rl.prompt();
+  }
 }
 
 // ─── Entry point ──────────────────────────────────────────────────────────────
 
 export async function startInteractiveTUI(opts: {
-  port: number;
-  token: string;
-  model: string;
-  provider: string;
-  worktree: string;
+  port: number; token: string; model: string;
+  provider: string; worktree: string;
 }): Promise<void> {
-  const serverReady = await waitForServer(opts.port, 30_000);
-  if (!serverReady) {
-    process.stderr.write(`${RED}Error: BoneCode server not responding on port ${opts.port}${RESET}\n`);
-    process.stderr.write(`${DIM}Start it with: bonecode serve${RESET}\n`);
+  const ready = await waitForServer(opts.port, 30_000);
+  if (!ready) {
+    process.stderr.write(`${RED}BoneCode server not responding on port ${opts.port}${R}\n`);
+    process.stderr.write(`${GRAY}Start with: bonecode serve${R}\n`);
     process.exit(1);
   }
   await runTUI(opts);