bonecode 1.0.0 → 1.2.0

package/src/tui.ts

@@ -1,16 +1,16 @@
-/**
- * BoneCode Interactive Terminal UI
+/**
+ * BoneCode TUI — terminal interface modeled after OpenCode
+ *
+ * Three core behaviours:
+ *   1. Tool activity is displayed as concise status lines
+ *      (← Edit src/foo.ts, → Read package.json, $ npm test) — never raw code dumps.
+ *      Assistant text is shown inline; tool calls and tool outputs are summarized.
  *
- * 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
+ *   2. Typing "/" shows an inline command menu above the prompt with
+ *      arrow-key selection and tab/enter to insert.
  *
- * Built on Node's built-in readline — no external TUI framework needed.
+ *   3. Ctrl+C aborts the in-flight LLM stream by aborting the fetch
+ *      AND notifying the server to cancel the agent loop.
  */
 
 import * as path from "path";
@@ -18,67 +18,144 @@ 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 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, "");
+const R     = `${ESC}[0m`;
+const BOLD  = `${ESC}[1m`;
+const DIM   = `${ESC}[2m`;
+const CYAN  = `${ESC}[96m`;
+const GREEN = `${ESC}[92m`;
+const YELLOW= `${ESC}[93m`;
+const RED   = `${ESC}[91m`;
+const GRAY  = `${ESC}[90m`;
+const WHITE = `${ESC}[97m`;
+const BLUE  = `${ESC}[94m`;
+
+// Box drawing
+const VERT  = "┃";
+const CORN  = "╹";
+const SHADE = "▀";
+const BLOCK = "▣";
+const ARROW_R = "→";
+const ARROW_L = "←";
+const DOLLAR  = "$";
+const STAR    = "✱";
+const PCT     = "%";
+const GEAR    = "⚙";
+const HASH    = "#";
+
+function cols(): number { return process.stdout.columns || 80; }
+function out(s: string) { process.stdout.write(s); }
+function nl(s = "") { process.stdout.write(s + "\n"); }
+function clearLine() { out(`\r${ESC}[2K`); }
+
+// ─── Logo ─────────────────────────────────────────────────────────────────────
+
+function printLogo() {
+  nl();
+  nl(`${GRAY}${BOLD}█▀▀▄ █▀▀█ █▀▀█ █▀▀▀ █▀▀▀ █▀▀█ █▀▀▄ █▀▀▀${R}`);
+  nl(`${GRAY}${BOLD}█▀▀▄ █  █ █  █ █▀▀  █    █  █ █  █ █▀▀ ${R}`);
+  nl(`${GRAY}${BOLD}▀▀▀  ▀▀▀▀ ▀  ▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀  ▀▀▀▀${R}`);
+  nl();
 }
 
-function truncate(str: string, width: number): string {
-  const clean = stripAnsi(str);
-  if (clean.length <= width) return str;
-  return str.slice(0, width - 1) + "…";
+// ─── Package version ──────────────────────────────────────────────────────────
+
+const PKG_ROOT = (() => {
+  const fromSrc = path.resolve(__dirname, "..");
+  const fromDist = path.resolve(__dirname, "..", "..");
+  if (fs.existsSync(path.join(fromDist, "package.json"))) return fromDist;
+  return fromSrc;
+})();
+
+function getVersion(): string {
+  try { return JSON.parse(fs.readFileSync(path.join(PKG_ROOT, "package.json"), "utf-8")).version; }
+  catch { return "0.0.0"; }
 }
 
-// ─── Config ───────────────────────────────────────────────────────────────────
+// ─── Slash command catalog ────────────────────────────────────────────────────
 
-const PKG_ROOT = path.resolve(__dirname, "..");
+interface Command {
+  name: string;
+  description: string;
+  args?: string;
+}
 
-function getVersion(): string {
-  try {
-    return JSON.parse(fs.readFileSync(path.join(PKG_ROOT, "package.json"), "utf-8")).version;
-  } catch {
-    return "0.0.0";
+const COMMANDS: Command[] = [
+  { name: "/new",        description: "Start a new session" },
+  { name: "/session",    description: "Show current session ID" },
+  { name: "/sessions",   description: "List recent sessions" },
+  { name: "/model",      description: "Switch model",          args: "<provider/model>" },
+  { name: "/provider",   description: "Switch provider",       args: "<id>" },
+  { name: "/providers",  description: "List all providers" },
+  { name: "/clear",      description: "Clear screen" },
+  { name: "/history",    description: "Show last 10 prompts" },
+  { name: "/help",       description: "Show this help" },
+  { name: "/exit",       description: "Exit BoneCode" },
+];
+
+// ─── @file autocomplete helpers ───────────────────────────────────────────────
+
+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;
+function buildCompleter(worktree: string) {
+  return (line: string): [string[], string] => {
+    if (line.startsWith("/")) {
+      // Tab-complete commands too (in addition to the inline menu)
+      const matches = COMMANDS.map(c => c.name).filter(c => c.startsWith(line));
+      return [matches, line];
+    }
+    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 +166,13 @@ async function waitForServer(port: number, maxWaitMs = 30_000): Promise<boolean>
   return false;
 }
 
-// ─── API helpers ──────────────────────────────────────────────────────────────
+// ─── API ──────────────────────────────────────────────────────────────────────
+
+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 ${r.status}`);
+  return r.json() as Promise<T>;
+}
 
 async function apiPost(url: string, body: object, token: string): Promise<Response> {
   return fetch(url, {
@@ -99,538 +182,939 @@ async function apiPost(url: string, body: object, token: string): Promise<Respon
   });
 }
 
-async function apiGetJson<T = unknown>(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()}`);
-  return r.json() as Promise<T>;
+async function apiDelete(url: string, token: string): Promise<void> {
+  await fetch(url, { method: "DELETE", headers: { "Authorization": `Bearer ${token}` } });
 }
 
-// ─── 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 ───────────────────────────────────────────────────────
+// ─── Tool display rules — modeled after opencode's tool.ts ────────────────────
 
-const IGNORED_DIRS = new Set([
-  "node_modules", ".git", "dist", "build", ".next", "__pycache__",
-  ".venv", "venv", "target", "vendor", ".cache", "coverage",
-]);
+interface ToolDisplay {
+  icon: string;
+  color: string;
+  title: string;
+  detail?: string;
+}
 
-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 relPath(p: string | undefined, worktree: string): string {
+  if (!p) return "";
+  try {
+    if (path.isAbsolute(p)) {
+      const rel = path.relative(worktree, p);
+      if (!rel.startsWith("..")) return rel.replace(/\\/g, "/");
+    }
+    return p.replace(/\\/g, "/");
+  } catch { return p; }
+}
 
-function listFilesForAutocomplete(worktree: string, prefix: string): string[] {
-  const results: string[] = [];
-  const MAX = 50;
+function describeTool(toolName: string, input: any, worktree: string): ToolDisplay {
+  const n = (toolName || "").toLowerCase();
+  const inp = input || {};
+
+  // Map BoneCode's tool names AND opencode's names
+  const isWrite = n === "write" || n === "write_file";
+  const isEdit = n === "edit" || n === "edit_file";
+  const isRead = n === "read" || n === "read_file";
+  const isShell = n === "bash" || n === "shell" || n === "run_command";
+  const isGlob = n === "glob";
+  const isGrep = n === "grep" || n === "search_files";
+  const isList = n === "list_directory" || n === "list" || n === "ls";
+  const isWebfetch = n === "webfetch";
+  const isWebsearch = n === "websearch";
+  const isPatch = n === "apply_patch" || n === "patch";
+  const isTodo = n === "todo_write" || n === "todowrite" || n === "todo";
+  const isTask = n === "task" || n === "subagent";
+
+  if (isWrite) {
+    return { icon: ARROW_L, color: CYAN, title: "Write", detail: relPath(inp.path || inp.filePath, worktree) };
+  }
+  if (isEdit) {
+    return { icon: ARROW_L, color: CYAN, title: "Edit", detail: relPath(inp.path || inp.filePath, worktree) };
+  }
+  if (isPatch) {
+    return { icon: PCT, color: CYAN, title: "Patch", detail: inp.patch ? `${String(inp.patch).split("\n").length} lines` : "" };
+  }
+  if (isRead) {
+    let detail = relPath(inp.path || inp.filePath, worktree);
+    if (inp.start_line || inp.end_line) {
+      detail += ` ${GRAY}[${inp.start_line || 1}-${inp.end_line || ""}]${R}`;
+    }
+    return { icon: ARROW_R, color: GRAY, title: "Read", detail };
+  }
+  if (isShell) {
+    const cmd = String(inp.command || "").trim();
+    const short = cmd.length > 60 ? cmd.slice(0, 57) + "..." : cmd;
+    return { icon: DOLLAR, color: YELLOW, title: short || "Shell" };
+  }
+  if (isGlob) {
+    return { icon: STAR, color: GRAY, title: "Glob", detail: inp.pattern || "" };
+  }
+  if (isGrep) {
+    const pattern = inp.pattern || "";
+    const glob = inp.glob ? ` in ${inp.glob}` : "";
+    return { icon: STAR, color: GRAY, title: "Grep", detail: `"${pattern}"${glob}` };
+  }
+  if (isList) {
+    return { icon: ARROW_R, color: GRAY, title: "List", detail: relPath(inp.path, worktree) };
+  }
+  if (isWebfetch) {
+    return { icon: PCT, color: BLUE, title: "WebFetch", detail: inp.url || "" };
+  }
+  if (isWebsearch) {
+    return { icon: PCT, color: BLUE, title: "WebSearch", detail: inp.query ? `"${inp.query}"` : "" };
+  }
+  if (isTodo) {
+    const todos = Array.isArray(inp.todos) ? inp.todos : [];
+    const done = todos.filter((t: any) => t.status === "completed").length;
+    return { icon: HASH, color: GRAY, title: "Todos", detail: `${done}/${todos.length} done` };
+  }
+  if (isTask) {
+    return { icon: HASH, color: CYAN, title: "Task", detail: inp.description || "" };
+  }
 
-  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; }
+  // Fallback
+  return { icon: GEAR, color: GRAY, title: toolName };
+}
 
-    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);
-        }
-      }
-    }
+function renderToolStart(d: ToolDisplay) {
+  const detail = d.detail ? ` ${GRAY}${d.detail}${R}` : "";
+  nl(`   ${d.color}${d.icon}${R} ${WHITE}${d.title}${R}${detail}`);
+}
+
+function renderToolDone(d: ToolDisplay, ms?: number) {
+  const detail = d.detail ? ` ${GRAY}${d.detail}${R}` : "";
+  const time = ms !== undefined ? `  ${GRAY}${(ms / 1000).toFixed(1)}s${R}` : "";
+  // Replace the "..." with a checkmark (or just write a new line if not interactive)
+  nl(`   ${GREEN}✓${R} ${GRAY}${d.title}${R}${detail}${time}`);
+}
+
+function renderToolError(d: ToolDisplay, err: string) {
+  const detail = d.detail ? ` ${GRAY}${d.detail}${R}` : "";
+  nl(`   ${RED}✗${R} ${GRAY}${d.title}${R}${detail}  ${RED}${err}${R}`);
+}
+
+// ─── User message rendering ───────────────────────────────────────────────────
+
+function renderUserMessage(text: string) {
+  nl();
+  for (const line of text.split("\n")) {
+    nl(`${GRAY}${VERT}${R}  ${WHITE}${line}${R}`);
+  }
+  nl();
+}
+
+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}`);
+}
+
+// ─── Help / providers / commands menu ─────────────────────────────────────────
+
+function printHelp() {
+  nl();
+  nl(`${CYAN}${BOLD}BoneCode${R} ${GRAY}commands${R}`);
+  nl();
+  for (const c of COMMANDS) {
+    const args = c.args ? ` ${GRAY}${c.args}${R}` : "";
+    nl(`  ${CYAN}${c.name.padEnd(12)}${R}${args.padEnd(20)}  ${GRAY}${c.description}${R}`);
   }
+  nl();
+  nl(`  ${CYAN}Ctrl+C${R}        ${GRAY}Interrupt current request${R}`);
+  nl(`  ${CYAN}Ctrl+D${R}        ${GRAY}Exit BoneCode${R}`);
+  nl(`  ${CYAN}↑ / ↓${R}         ${GRAY}Prompt history${R}`);
+  nl(`  ${CYAN}@<path>${R}       ${GRAY}Attach a file (Tab completes)${R}`);
+  nl();
+}
 
-  walk(worktree, 0);
-  return results.sort();
+async function fetchProviders(port: number, token: string): Promise<any[]> {
+  try { return await apiGet<any[]>(`http://localhost:${port}/v2/provider`, token); }
+  catch { return []; }
 }
 
-function buildCompleter(worktree: string) {
-  return function completer(line: string): [string[], string] {
-    // Only trigger on @ mentions
-    const atIdx = line.lastIndexOf("@");
-    if (atIdx === -1) return [[], line];
+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();
+}
 
-    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 ────────────────────────────────────────────────────────────────
+
+interface StreamResult {
+  text: string;
+  tokens: number;
+  elapsedMs: number;
+  error?: string;
+  interrupted: boolean;
 }
 
-// ─── Streaming output ─────────────────────────────────────────────────────────
+interface ToolTrack {
+  callId: string;
+  display: ToolDisplay;
+  startedAt: number;
+}
 
-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");
+/**
+ * Stateful code-fence collapser.
+ *
+ * The LLM streams text token-by-token, including ```python\n...\n``` blocks.
+ * We don't want to dump that raw to the terminal because:
+ *   (a) The code is going to be saved via a tool call anyway, so showing it
+ *       twice (raw stream + saved file path) is redundant.
+ *   (b) It can be 100s of lines long and overwhelms the TUI.
+ *
+ * Strategy: buffer everything between ``` and ```. When the closing fence
+ * arrives, emit a one-line marker like  [code: python, 42 lines]
+ * instead of the buffered content.
+ *
+ * State machine:
+ *   "text"  — pass deltas through verbatim (with partial-fence detection)
+ *   "fence" — buffer everything; emit marker on close fence
+ */
+function makeCodeFenceCollapser() {
+  let mode: "text" | "fence" = "text";
+  let lang = "";
+  let buffered = ""; // bytes accumulated inside a fence
+  let pending = "";  // partial-fence buffer (when we see backticks but don't know yet)
+
+  const lines = (s: string) => s.split("\n").length;
+
+  function flushPending(): string {
+    const out = pending;
+    pending = "";
+    return out;
+  }
+
+  return {
+    feed(chunk: string): string {
+      let result = "";
+      let i = 0;
+      const buf = pending + chunk;
+      pending = "";
+
+      while (i < buf.length) {
+        if (mode === "text") {
+          // Look for ``` to enter fence mode
+          const fenceIdx = buf.indexOf("```", i);
+          if (fenceIdx === -1) {
+            // No fence in remaining text — emit it all, but hold the last 2 chars
+            // in case they're part of an upcoming fence.
+            const safeEnd = Math.max(i, buf.length - 2);
+            result += buf.slice(i, safeEnd);
+            pending = buf.slice(safeEnd);
+            i = buf.length;
+            break;
+          }
+          // Emit text up to the fence
+          result += buf.slice(i, fenceIdx);
+          // Read the language (everything until newline)
+          const nlIdx = buf.indexOf("\n", fenceIdx + 3);
+          if (nlIdx === -1) {
+            // Don't have the full opening line yet — buffer
+            pending = buf.slice(fenceIdx);
+            i = buf.length;
+            break;
+          }
+          lang = buf.slice(fenceIdx + 3, nlIdx).trim() || "code";
+          i = nlIdx + 1;
+          mode = "fence";
+          buffered = "";
+          // Print a leading marker (will be amended when we close)
+          result += `${GRAY}┃ code: ${lang}…${R}`;
+          continue;
+        }
+
+        // mode === "fence" — look for closing ```
+        const closeIdx = buf.indexOf("```", i);
+        if (closeIdx === -1) {
+          buffered += buf.slice(i);
+          // Hold last 2 chars in case they're part of an upcoming close fence
+          const safeEnd = Math.max(i, buf.length - 2);
+          buffered = buffered.slice(0, buffered.length - (buf.length - safeEnd));
+          pending = buf.slice(safeEnd);
+          i = buf.length;
+          break;
+        }
+        // Closing fence found
+        buffered += buf.slice(i, closeIdx);
+        const lineCount = lines(buffered.replace(/\n+$/, ""));
+        // Replace the placeholder we already wrote with the final marker.
+        // Carriage return + clear line + reprint marker.
+        result += `\r${ESC}[2K   ${GRAY}┃ code: ${lang}, ${lineCount} line${lineCount === 1 ? "" : "s"}${R}\n`;
+        i = closeIdx + 3;
+        // Skip optional newline after closing fence
+        if (buf[i] === "\n") i++;
+        mode = "text";
+        lang = "";
+        buffered = "";
+      }
+
+      return result;
+    },
+    flush(): string {
+      const tail = flushPending();
+      if (mode === "fence") {
+        // Stream ended mid-fence — close it with an approximate count
+        const lineCount = lines(buffered.replace(/\n+$/, ""));
+        mode = "text";
+        return tail + `\r${ESC}[2K   ${GRAY}┃ code: ${lang}, ${lineCount}+ lines${R}\n`;
+      }
+      return tail;
+    },
+  };
+}
 
-  const ctrl = new AbortController();
-  state.abortController = ctrl;
+async function streamPrompt(opts: {
+  port: number; token: string; sessionId: string;
+  model: string; provider: string; message: string;
+  worktree: string;
+  abortSignal: AbortSignal;
+}): Promise<StreamResult> {
+  const { port, token, sessionId, model, provider, message, worktree, abortSignal } = opts;
+  const t0 = Date.now();
+  let fullText = "";
+  let tokens = 0;
+  let inAssistantText = false;
+  let tools = new Map<string, ToolTrack>();
+
+  // Code-fence collapser — replaces ```...``` blocks with [code: lang, N lines]
+  // markers across delta boundaries.
+  const fence = makeCodeFenceCollapser();
+  const collapseCodeFences = (chunk: string): string => fence.feed(chunk);
+
+  // Track which message the deltas belong to so we can detect tool boundaries
+  // The compat adapter emits these event types:
+  //   part.delta       — text chunk
+  //   tool.requested   — tool call started
+  //   message.updated  — message saved
+  //   session.updated  — session state changed
+  //   error            — error event
+
+  const flushTextLine = () => {
+    if (inAssistantText) {
+      // Make sure assistant text ends with a newline before the next thing
+      if (fullText && !fullText.endsWith("\n")) out("\n");
+      inAssistantText = false;
+    }
+  };
 
   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;
+      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 });
+      buf += dec.decode(value, { stream: true });
+      const lines = buf.split("\n");
+      buf = lines.pop() || "";
 
-      const lines = buffer.split("\n");
-      buffer = lines.pop() || "";
+      for (const raw of lines) {
+        if (!raw.startsWith("data: ")) continue;
+        const json = raw.slice(6).trim();
+        if (!json || json === "[DONE]") continue;
 
-      for (const line of lines) {
-        if (!line.startsWith("data: ")) 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);
+
+          // Text delta — assistant is generating prose
+          if (ev.type === "part.delta" && ev.delta?.type === "text") {
+            const text = ev.delta.text || "";
+            if (!text) continue;
+            if (!inAssistantText) {
+              // Start of assistant text — print the indent prefix once
+              out(`   `);
+              inAssistantText = true;
+            }
+            // Process the delta through the code-fence collapser so streaming
+            // code blocks appear as "[code: lang]" placeholders instead of
+            // dumping raw source.
+            const piece = collapseCodeFences(text);
+            // Print with leading-newline indenting (so each new line gets the 3-space prefix)
+            const indented = piece.replace(/\n/g, `\n   `);
+            out(indented);
+            fullText += text;
+            continue;
+          }
+
+          // Tool requested — show concise activity line
+          if (ev.type === "tool.requested") {
+            flushTextLine();
+            const callId = ev.tool_call_id || ev.id || `${ev.tool_name}-${Date.now()}`;
+            const display = describeTool(ev.tool_name || "tool", ev.tool_input || {}, worktree);
+            tools.set(callId, { callId, display, startedAt: Date.now() });
+            renderToolStart(display);
+            continue;
+          }
+
+          // Tool completed
+          if (ev.type === "tool.completed" || ev.type === "tool.success") {
+            flushTextLine();
+            const callId = ev.tool_call_id || ev.id || "";
+            const tracked = tools.get(callId);
+            if (tracked) {
+              const ms = Date.now() - tracked.startedAt;
+              renderToolDone(tracked.display, ms);
+              tools.delete(callId);
+            }
+            continue;
+          }
+
+          // Tool failed
+          if (ev.type === "tool.failed" || ev.type === "tool.error") {
+            flushTextLine();
+            const callId = ev.tool_call_id || ev.id || "";
+            const tracked = tools.get(callId);
+            const err = ev.error || ev.message || "failed";
+            if (tracked) {
+              renderToolError(tracked.display, err);
+              tools.delete(callId);
+            } else {
+              nl(`   ${RED}✗ ${err}${R}`);
+            }
+            continue;
+          }
+
+          // Retry notification
+          if (ev.type === "session.retry") {
+            flushTextLine();
+            nl(`   ${YELLOW}⟳ Retry ${ev.attempt || ""}: ${ev.message || ""}${R}`);
+            continue;
+          }
+
+          // Server-side error
+          if (ev.type === "error") {
+            flushTextLine();
+            return {
+              text: fullText,
+              tokens,
+              elapsedMs: Date.now() - t0,
+              error: ev.properties?.message || "error",
+              interrupted: false,
+            };
           }
-          if (event.type === "error") {
-            onDone({ error: event.properties?.message || "Unknown error" });
-            return;
+
+          // Compaction
+          if (ev.type === "session.compacted") {
+            flushTextLine();
+            nl(`   ${BLUE}⊕ Context compacted${R}`);
+            continue;
           }
-        } catch { /* non-JSON SSE line */ }
+        } catch {
+          // Ignore malformed events
+        }
       }
     }
 
-    // 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({});
+    flushTextLine();
+
+    // Drain any tools that didn't get a completion event
+    for (const tracked of tools.values()) {
+      const ms = Date.now() - tracked.startedAt;
+      renderToolDone(tracked.display, ms);
     }
+    tools.clear();
+
+    // Flush any unclosed code fence
+    const tail = fence.flush();
+    if (tail) out(tail);
+
+    // Fetch the final message to get token totals
+    try {
+      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);
+      // If we didn't get any text deltas but the stored message has text, render it now
+      if (!fullText && last?.parts) {
+        for (const p of last.parts) {
+          if (p.type === "text" && p.text) {
+            out(`   ${p.text.replace(/\n/g, `\n   `)}\n`);
+            fullText = p.text;
+            break;
+          }
+        }
+      }
+    } catch {}
+
+    return { text: fullText, tokens, elapsedMs: Date.now() - t0, interrupted: false };
   } catch (e: any) {
+    flushTextLine();
     if (e.name === "AbortError") {
-      onDone({ error: "interrupted" });
-    } else {
-      onDone({ error: e.message });
+      return { text: fullText, tokens, elapsedMs: Date.now() - t0, interrupted: true };
     }
-  } finally {
-    state.abortController = null;
+    return { text: fullText, tokens, elapsedMs: Date.now() - t0, error: e.message, interrupted: false };
   }
 }
 
-// ─── Terminal rendering ───────────────────────────────────────────────────────
+// ─── Slash command menu — inline, above the prompt ────────────────────────────
 
-class TUIRenderer {
-  private promptLine = "";
-  private statusLine = "";
-  private streamBuffer = "";
-  private cols: number;
+interface MenuState {
+  visible: boolean;
+  options: Command[];
+  selected: number;
+  rowsRendered: number;
+}
 
-  constructor() {
-    this.cols = process.stdout.columns || 80;
-    process.stdout.on("resize", () => {
-      this.cols = process.stdout.columns || 80;
-    });
-  }
+function filterCommands(query: string): Command[] {
+  if (!query || query === "/") return COMMANDS;
+  const q = query.toLowerCase();
+  return COMMANDS.filter(c => c.name.toLowerCase().startsWith(q));
+}
 
-  print(text: string, newline = true): void {
-    this.clearPromptArea();
-    process.stdout.write(text + (newline ? "\n" : ""));
-    this.redrawPromptArea();
+function renderCommandMenu(state: MenuState): number {
+  if (!state.visible || state.options.length === 0) return 0;
+  const max = Math.min(state.options.length, 8);
+  for (let i = 0; i < max; i++) {
+    const c = state.options[i]!;
+    const selected = i === state.selected;
+    const prefix = selected ? `${CYAN}▌${R} ` : `  `;
+    const name = selected ? `${CYAN}${BOLD}${c.name}${R}` : `${WHITE}${c.name}${R}`;
+    const args = c.args ? ` ${GRAY}${c.args}${R}` : "";
+    const desc = `${GRAY}${c.description}${R}`;
+    nl(`${prefix}${name}${args}  ${desc}`);
   }
-
-  delta(text: string): void {
-    this.clearPromptArea();
-    process.stdout.write(text);
-    this.streamBuffer += text;
-    this.redrawPromptArea();
+  if (state.options.length > max) {
+    nl(`  ${GRAY}... ${state.options.length - max} more (keep typing)${R}`);
+    return max + 1;
   }
+  return max;
+}
 
-  endStream(): void {
-    if (this.streamBuffer && !this.streamBuffer.endsWith("\n")) {
-      process.stdout.write("\n");
-    }
-    this.streamBuffer = "";
-    this.redrawPromptArea();
+function clearMenu(rows: number) {
+  if (rows <= 0) return;
+  // Move up `rows` lines and clear each one
+  for (let i = 0; i < rows; i++) {
+    out(`${ESC}[1A${ESC}[2K`);
   }
+}
 
-  setStatus(text: string): void {
-    this.statusLine = text;
-    this.redrawPromptArea();
-  }
+// ─── Main TUI loop ────────────────────────────────────────────────────────────
 
-  setPrompt(text: string): void {
-    this.promptLine = text;
-    this.redrawPromptArea();
+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;
+  const history: string[] = [];
+  let abort: AbortController | null = null;
+  let streaming = false;
+
+  // 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);
+    }
   }
 
-  private clearPromptArea(): void {
-    process.stdout.write(CLEAR_LINE);
-    process.stdout.write(CURSOR_UP + CLEAR_LINE);
-  }
+  // Header
+  printLogo();
+  nl(`  ${GRAY}v${getVersion()}  ·  ${model}  ·  ${path.basename(worktree)}${R}`);
+  nl(`  ${GRAY}session ${sessionId.slice(0, 8)}${R}`);
+  nl();
+  nl(`  ${GRAY}Type ${R}${CYAN}/${R}${GRAY} to see commands  ·  Ctrl+C interrupt  ·  Ctrl+D exit${R}`);
+  nl();
+
+  // ─── Slash command menu state ──────────────────────────────────────────────
+  const menu: MenuState = {
+    visible: false,
+    options: [],
+    selected: 0,
+    rowsRendered: 0,
+  };
 
-  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);
-  }
+  // Set up readline AFTER setting up SIGINT so we control it
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+    terminal: true,
+    historySize: 200,
+    completer: buildCompleter(worktree),
+  });
 
-  initPromptArea(): void {
-    process.stdout.write("\n\n");
-    this.clearPromptArea();
-    this.redrawPromptArea();
-  }
+  const promptStr = () => `${CYAN}${BOLD}>${R} `;
 
-  separator(char = "─"): void {
-    this.print(`${DIM}${char.repeat(Math.min(this.cols, 60))}${RESET}`);
-  }
+  // ─── Ctrl+C handling ──────────────────────────────────────────────────────
+  // When streaming: abort the request AND notify server
+  // When idle: clear menu/input or hint to use /exit
+  const onSigint = async () => {
+    if (streaming && abort) {
+      abort.abort();
+      // Also tell the server to cancel the agent loop
+      try {
+        await fetch(`http://localhost:${port}/v2/session/${sessionId}/cancel`, {
+          method: "POST",
+          headers: { "Authorization": `Bearer ${token}` },
+        });
+      } catch { /* server may not have the endpoint, abort is enough */ }
+      // Don't reprompt here — the streamPrompt finally block will handle UI
+      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();
-  }
-}
+    // Idle: clear menu if visible, else hint
+    if (menu.visible) {
+      clearMenu(menu.rowsRendered);
+      menu.visible = false;
+      menu.rowsRendered = 0;
+      menu.selected = 0;
+    }
+    out(`\n${GRAY}(Ctrl+D or /exit to quit)${R}\n`);
+    rl.setPrompt(promptStr());
+    rl.prompt();
+  };
 
-// ─── 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),
-    });
+  // Detach readline's default SIGINT (which closes the line buffer)
+  // and route it to our handler.
+  rl.on("SIGINT", onSigint);
+
+  rl.on("close", () => {
+    if (streaming && abort) abort.abort();
+    nl(`\n${GRAY}Goodbye.${R}`);
+    process.exit(0);
+  });
 
-    // Seed readline history from state
-    for (const h of state.promptHistory.slice().reverse()) {
-      (this.rl as any).history?.unshift(h);
+  // ─── Live menu update on every keystroke ──────────────────────────────────
+  // We hook into the keypress events of stdin to redraw the menu.
+  // The menu sits ABOVE the prompt line.
+  const stdin: any = (rl as any).input;
+
+  const updateMenu = () => {
+    if (streaming) return;
+
+    const line: string = (rl as any).line || "";
+    const startsWithSlash = line.startsWith("/");
+    const shouldShow = startsWithSlash && !line.includes(" ");
+
+    if (!shouldShow) {
+      if (menu.visible) {
+        // Need to clear the menu — but we need to preserve the current input line.
+        // Strategy: save current line content & cursor, clear menu lines above,
+        // then restore the prompt and content.
+        const cursor = (rl as any).cursor || 0;
+        out(`\r${ESC}[2K`);                // clear current prompt line
+        clearMenu(menu.rowsRendered);       // clear menu lines above
+        menu.visible = false;
+        menu.rowsRendered = 0;
+        menu.selected = 0;
+        // Redraw prompt + line
+        out(promptStr() + line);
+        // Restore cursor position
+        const drawn = line.length;
+        if (cursor < drawn) {
+          out(`${ESC}[${drawn - cursor}D`);
+        }
+      }
+      return;
     }
 
-    this.rl.on("line", async (line) => {
-      const text = line.trim();
-      if (text) {
-        state.promptHistory.push(text);
-        if (state.promptHistory.length > 100) state.promptHistory.shift();
+    // Filter and reset selection if list changed
+    const newOptions = filterCommands(line);
+    if (newOptions.length === 0) {
+      // Clear menu if visible
+      if (menu.visible) {
+        const cursor = (rl as any).cursor || 0;
+        out(`\r${ESC}[2K`);
+        clearMenu(menu.rowsRendered);
+        menu.visible = false;
+        menu.rowsRendered = 0;
+        out(promptStr() + line);
+        if (cursor < line.length) out(`${ESC}[${line.length - cursor}D`);
       }
-      await this.onSubmit(text);
-      this.prompt();
-    });
+      return;
+    }
 
-    this.rl.on("close", () => {
-      this.cleanup();
-      renderer.print(`\n${DIM}Goodbye.${RESET}`);
-      process.exit(0);
-    });
+    // Save current input line
+    const cursor = (rl as any).cursor || 0;
+    out(`\r${ESC}[2K`);                  // clear prompt line
+    clearMenu(menu.rowsRendered);         // clear old menu
 
-    // 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);
-  }
+    menu.options = newOptions;
+    menu.selected = Math.min(menu.selected, newOptions.length - 1);
+    if (menu.selected < 0) menu.selected = 0;
+    menu.visible = true;
 
-  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);
-  }
+    // Render the menu (each item ends in newline)
+    menu.rowsRendered = renderCommandMenu(menu);
 
-  cleanup(): void {
-    if (this.sigintHandler) {
-      process.removeListener("SIGINT", this.sigintHandler);
-      this.sigintHandler = null;
+    // Redraw prompt + line
+    out(promptStr() + line);
+    if (cursor < line.length) {
+      out(`${ESC}[${line.length - cursor}D`);
     }
-  }
+  };
 
-  close(): void {
-    this.cleanup();
-    this.rl.close();
-  }
-}
+  // Capture special keys for menu navigation
+  const onKeypress = (_chunk: any, key: any) => {
+    if (!key) return;
+    if (streaming) return;
 
-// ─── 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}`);
+    if (menu.visible && menu.options.length > 0) {
+      // Arrow up/down navigate the menu
+      if (key.name === "up") {
+        menu.selected = (menu.selected - 1 + menu.options.length) % menu.options.length;
+        updateMenu();
+        return;
       }
-      break;
-
-    case "session":
-      if (state.sessionId) {
-        renderer.print(`${DIM}Session: ${RESET}${state.sessionId}`);
-      } else {
-        renderer.print(`${YELLOW}No active session${RESET}`);
+      if (key.name === "down") {
+        menu.selected = (menu.selected + 1) % menu.options.length;
+        updateMenu();
+        return;
       }
-      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];
+      // Tab: replace input with the selected command
+      if (key.name === "tab") {
+        const sel = menu.options[menu.selected];
+        if (sel) {
+          // Replace the line buffer with the command + space
+          (rl as any).line = sel.name + " ";
+          (rl as any).cursor = sel.name.length + 1;
+          updateMenu();
+          out(`\r${ESC}[2K`);
+          out(promptStr() + (rl as any).line);
         }
-        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}`);
-      }
-      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)}`);
-        });
+        return;
       }
-      break;
+    }
 
-    case "exit":
-    case "quit":
-    case "q":
-      renderer.print(`\n${DIM}Goodbye.${RESET}`);
-      process.exit(0);
-      break;
+    // Default: trigger menu update on the next tick (after readline updates the buffer)
+    setImmediate(updateMenu);
+  };
 
-    default:
-      renderer.print(`${YELLOW}Unknown command: /${name}${RESET} — type ${CYAN}/help${RESET} for commands`);
-  }
-}
+  stdin.on("keypress", onKeypress);
 
-// ─── Main TUI loop ────────────────────────────────────────────────────────────
+  rl.setPrompt(promptStr());
+  rl.prompt();
 
-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,
-  };
-
-  const renderer = new TUIRenderer();
+  // ─── Main input loop ──────────────────────────────────────────────────────
+  for await (const rawLine of rl) {
+    const text = rawLine.trim();
 
-  // 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);
+    // Clear any visible menu before processing
+    if (menu.visible) {
+      menu.visible = false;
+      menu.rowsRendered = 0;
+      menu.selected = 0;
     }
-  }
 
-  renderer.banner(`${state.provider}/${state.model}`, state.worktree);
-  renderer.setStatus(`${DIM}${state.provider}/${state.model} · session ${state.sessionId!.slice(0, 8)}${RESET}`);
-  renderer.initPromptArea();
+    if (!text) {
+      rl.setPrompt(promptStr());
+      rl.prompt();
+      continue;
+    }
 
-  const tuiInput = new TUIInput(renderer, state, async (text: string) => {
-    if (!text) return;
+    history.push(text);
+    if (history.length > 200) history.shift();
 
+    // ── Slash commands ──────────────────────────────────────────────────────
     if (text.startsWith("/")) {
-      await handleCommand(text, state, renderer);
-      return;
+      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");
+            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 "sessions": {
+          try {
+            const list = await apiGet<any[]>(`http://localhost:${port}/v2/session?limit=10`, token);
+            if (!list.length) { nl(`${GRAY}No sessions${R}`); break; }
+            nl();
+            for (const s of list) {
+              const active = s.id === sessionId;
+              const dot = active ? `${GREEN}●${R}` : `${GRAY}○${R}`;
+              const t = new Date(s.time?.updated || Date.now()).toLocaleString();
+              nl(`  ${dot} ${WHITE}${(s.title || "untitled").slice(0, 50).padEnd(50)}${R}  ${GRAY}${t}${R}`);
+            }
+            nl();
+          } catch (e: any) { nl(`${RED}✗ ${e.message}${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";
+            } else if (args[0].includes("/")) {
+              const i = args[0].indexOf("/");
+              provider = args[0].slice(0, i);
+              model = args[0].slice(i + 1);
+            } 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;
+
+        case "providers": {
+          const list = await fetchProviders(port, token);
+          if (list.length) printProviders(list, provider);
+          else nl(`${YELLOW}Could not fetch providers${R}`);
+          break;
+        }
+
+        case "clear":
+          process.stdout.write(`${ESC}[2J${ESC}[H`);
+          printLogo();
+          break;
+
+        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;
+
+        case "exit": case "quit": case "q":
+          nl(`\n${GRAY}Goodbye.${R}`);
+          process.exit(0);
+          break;
+
+        default:
+          nl(`${YELLOW}Unknown: /${cmd}${R}  ${GRAY}Type /help for available commands${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 to the agent ─────────────────────────────────────────────────
+    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);
+    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
-        const clean = delta.replace(/^```\w*\n?/gm, "").replace(/^```\n?/gm, "");
-        if (clean) renderer.delta(clean);
-      },
-      (info) => {
-        renderer.endStream();
-        state.streaming = false;
-        state.turnCount++;
-
-        const elapsed = ((Date.now() - startMs) / 1000).toFixed(1);
-        if (info.tokens) state.totalTokens += info.tokens;
-
-        if (info.error && info.error !== "interrupted") {
-          renderer.print(`${RED}✗ ${info.error}${RESET}`);
-        }
+    renderUserMessage(text);
 
-        renderer.separator();
+    // Show "..." spinner so the user knows something is happening
+    out(`   ${GRAY}thinking...${R}`);
 
-        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}`
-        );
-      }
-    );
-  });
+    rl.pause();
+    streaming = true;
+    abort = new AbortController();
+
+    const t0 = Date.now();
+    const result = await streamPrompt({
+      port, token, sessionId,
+      model, provider,
+      message: resolved,
+      worktree,
+      abortSignal: abort.signal,
+    });
+
+    streaming = false;
+    abort = null;
 
-  tuiInput.prompt();
+    // Clear the thinking spinner if no output happened
+    if (!result.text && !result.error) {
+      clearLine();
+    } else {
+      // Make sure the next render starts on a clean line
+      const cur = (process.stdout as any).cursor;
+      if (cur && cur.col !== 0) out("\n");
+    }
 
-  // Keep process alive until readline closes
-  await new Promise<void>(() => {});
+    renderTurnEnd(model, result.elapsedMs, result.interrupted);
+
+    if (result.error && !result.interrupted) {
+      nl(`   ${RED}✗ ${result.error}${R}`);
+    }
+
+    nl();
+
+    rl.resume();
+    rl.setPrompt(promptStr());
+    rl.prompt();
+  }
+
+  stdin.removeListener("keypress", onKeypress);
 }
 
 // ─── 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);