wispy-cli 2.7.27 → 2.7.29

package/lib/wispy-tui-ink.mjs

@@ -0,0 +1,1643 @@
+#!/usr/bin/env node
+/**
+ * wispy-tui.mjs — Workspace OS TUI for Wispy v2.7+
+ *
+ * Multi-panel workspace interface:
+ *   - Left sidebar: Workstreams, Agent, Sub-agents, Memory, Browser, Budget
+ *   - Main area: Chat / Overview / Agents / Memory / Audit / Settings
+ *   - Bottom: Action Timeline bar + Input
+ *   - Overlays: Approval dialogs, Help, Command Palette
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { render, Box, Text, useApp, useInput, useStdout } from "ink";
+import { PassThrough } from "node:stream";
+import Spinner from "ink-spinner";
+import { ReadlineInput } from "./readline-input.mjs";
+// TextInput is used only for the Memory search box (non-critical, no IME needed)
+import CJKTextInput from "./cjk-text-input.mjs";
+const TextInput = CJKTextInput;
+
+import { COMMANDS, filterCommands } from "./command-registry.mjs";
+
+import os from "node:os";
+import path from "node:path";
+import { readFile, writeFile, readdir, stat, mkdir } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
+
+import { WispyEngine, CONVERSATIONS_DIR, PROVIDERS, WISPY_DIR, MEMORY_DIR } from "../core/index.mjs";
+
+// ─── Version ──────────────────────────────────────────────────────────────────
+
+let PKG_VERSION = "?";
+try {
+  const __dirname = path.dirname(fileURLToPath(import.meta.url));
+  const pkgPath = path.join(__dirname, "..", "package.json");
+  const pkgRaw = await readFile(pkgPath, "utf8");
+  PKG_VERSION = JSON.parse(pkgRaw).version ?? "?";
+} catch {}
+
+// ─── Parse CLI args ──────────────────────────────────────────────────────────
+
+const rawArgs = process.argv.slice(2);
+const wsIdx = rawArgs.findIndex((a) => a === "-w" || a === "--workstream");
+const INITIAL_WORKSTREAM =
+  process.env.WISPY_WORKSTREAM ??
+  (wsIdx !== -1 ? rawArgs[wsIdx + 1] : null) ??
+  "default";
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+
+const VIEWS = ["chat", "overview", "agents", "memory", "audit", "settings"];
+const SIDEBAR_WIDTH = 18;
+const TIMELINE_LINES = 3;
+
+const TOOL_ICONS = {
+  read_file: "[file]", write_file: "[edit]", file_edit: "[edit]", run_command: "[exec]",
+  git: "[git]", web_search: "[search]", web_fetch: "[web]", list_directory: "[dir]",
+  spawn_subagent: "[sub]", spawn_agent: "[agent]", memory_save: "[save]",
+  memory_search: "[find]", memory_list: "[list]", delete_file: "[delete]",
+  node_execute: "[run]", update_work_context: "[update]",
+};
+
+// ─── Utilities ───────────────────────────────────────────────────────────────
+
+function fmtTime(iso) {
+  if (!iso) return "";
+  try { return new Date(iso).toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit" }); }
+  catch { return ""; }
+}
+
+function fmtRelTime(iso) {
+  if (!iso) return "";
+  try {
+    const diff = Date.now() - new Date(iso).getTime();
+    if (diff < 60_000) return "just now";
+    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}min ago`;
+    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}hr ago`;
+    return "yesterday";
+  } catch { return ""; }
+}
+
+function fmtDuration(ms) {
+  if (!ms || ms < 0) return "";
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.floor(ms / 60_000)}m${Math.floor((ms % 60_000) / 1000)}s`;
+}
+
+function truncate(str, n) {
+  if (!str) return "";
+  return str.length > n ? str.slice(0, n - 1) + "…" : str;
+}
+
+// ─── Markdown renderer ───────────────────────────────────────────────────────
+
+function renderMarkdown(text, maxWidth = 60) {
+  if (!text) return [];
+  const lines = text.split("\n");
+  return lines.map((line, i) => {
+    if (line.startsWith("```")) return React.createElement(Text, { key: i, dimColor: true }, line);
+    if (line.startsWith("### ")) return React.createElement(Text, { key: i, bold: true, color: "cyan" }, line.slice(4));
+    if (line.startsWith("## ")) return React.createElement(Text, { key: i, bold: true, color: "blue" }, line.slice(3));
+    if (line.startsWith("# ")) return React.createElement(Text, { key: i, bold: true, color: "magenta" }, line.slice(2));
+    if (line.startsWith("- ") || line.startsWith("* ")) {
+      return React.createElement(Box, { key: i },
+        React.createElement(Text, { color: "green" }, "• "),
+        React.createElement(Text, { wrap: "wrap" }, line.slice(2)));
+    }
+    if (/^\d+\.\s/.test(line)) {
+      const match = line.match(/^(\d+\.\s)(.*)/);
+      return React.createElement(Box, { key: i },
+        React.createElement(Text, { color: "yellow" }, match[1]),
+        React.createElement(Text, { wrap: "wrap" }, match[2]));
+    }
+    if (line.includes("**")) {
+      const parts = line.split(/(\*\*[^*]+\*\*)/g);
+      const children = parts.map((p, j) =>
+        p.startsWith("**") && p.endsWith("**")
+          ? React.createElement(Text, { key: j, bold: true }, p.slice(2, -2))
+          : React.createElement(Text, { key: j }, p));
+      return React.createElement(Box, { key: i }, ...children);
+    }
+    if (line.startsWith("---") || line.startsWith("===")) {
+      return React.createElement(Text, { key: i, dimColor: true }, "─".repeat(Math.min(50, maxWidth)));
+    }
+    if (line === "") return React.createElement(Box, { key: i, height: 1 });
+    return React.createElement(Text, { key: i, wrap: "wrap" }, line);
+  });
+}
+
+// ─── Status Bar ──────────────────────────────────────────────────────────────
+
+function StatusBar({ workstream, model, provider, permMode, syncStatus, tokens, cost, pendingApprovals, view, termWidth }) {
+  const wide = termWidth >= 100;
+
+  return React.createElement(
+    Box, { paddingX: 1, backgroundColor: "green", width: "100%" },
+    React.createElement(Text, { color: "black", bold: true }, "Wispy"),
+    React.createElement(Text, { color: "black" }, " ─ "),
+    React.createElement(Text, { color: "black", bold: true }, workstream),
+    React.createElement(Text, { color: "black" }, " ─ "),
+    React.createElement(Text, { color: "black" }, truncate(model ?? "?", 20)),
+    wide ? React.createElement(Text, { color: "black" }, ` ─ ${permMode ?? "approve"}`) : null,
+    wide && cost > 0 ? React.createElement(Text, { color: "black", dimColor: true }, ` ─ $${cost.toFixed(4)}`) : null,
+    pendingApprovals > 0
+      ? React.createElement(Text, { color: "black", bold: true }, ` ─ ! ${pendingApprovals} pending`)
+      : null,
+    React.createElement(Text, { color: "black", dimColor: true }, `  [${view.toUpperCase()}]  ? for help`),
+  );
+}
+
+// ─── Left Sidebar ─────────────────────────────────────────────────────────────
+
+function Sidebar({ workstreams, activeWorkstream, activeAgent, agents, memoryCount, userModelLoaded, cronCount, syncStatus, browserStatus, budgetSpent, maxBudget, onSelectWorkstream }) {
+  const rows = [];
+
+  const divider = (key) => React.createElement(Box, {
+    key, borderStyle: "single",
+    borderTop: false, borderRight: false, borderLeft: false, borderBottom: true,
+    borderColor: "gray", width: SIDEBAR_WIDTH,
+  });
+
+  // ── WORKSTREAMS ──
+  rows.push(React.createElement(Box, { key: "ws-h", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "WORKSTREAMS"),
+  ));
+  workstreams.forEach((ws) => {
+    const isActive = ws === activeWorkstream;
+    rows.push(React.createElement(Box, { key: `ws-${ws}`, paddingLeft: 1 },
+      React.createElement(Text, { color: isActive ? "green" : undefined, bold: isActive },
+        `${isActive ? "●" : "◯"} ${truncate(ws, SIDEBAR_WIDTH - 3)}`),
+    ));
+  });
+
+  // ── ACTIVE AGENT ──
+  if (activeAgent && activeAgent !== "default") {
+    rows.push(divider("d-agent"));
+    rows.push(React.createElement(Box, { key: "agent-h", paddingLeft: 1 },
+      React.createElement(Text, { bold: true, dimColor: true }, "AGENT"),
+    ));
+    rows.push(React.createElement(Box, { key: "agent-v", paddingLeft: 1 },
+      React.createElement(Text, { color: "cyan" }, truncate(activeAgent, SIDEBAR_WIDTH - 2)),
+    ));
+  }
+
+  // ── SUB-AGENTS ──
+  rows.push(divider("d-sub"));
+  rows.push(React.createElement(Box, { key: "sub-h", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, `AGENTS  `),
+    React.createElement(Text, { color: agents.length > 0 ? "yellow" : "gray" }, `${agents.length}`),
+  ));
+  if (agents.length === 0) {
+    rows.push(React.createElement(Box, { key: "sub-none", paddingLeft: 1 },
+      React.createElement(Text, { dimColor: true }, " (none)"),
+    ));
+  } else {
+    agents.slice(0, 4).forEach((a, i) => {
+      const isRunning = a.status === "running";
+      rows.push(React.createElement(Box, { key: `sub-${i}`, paddingLeft: 1 },
+        React.createElement(Text, { color: isRunning ? "green" : "gray" }, isRunning ? "● " : "◯ "),
+        React.createElement(Text, { dimColor: !isRunning }, truncate(a.label ?? a.role ?? "agent", SIDEBAR_WIDTH - 4)),
+      ));
+    });
+  }
+
+  // ── MEMORY ──
+  rows.push(divider("d-mem"));
+  rows.push(React.createElement(Box, { key: "mem-h", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "MEMORY  "),
+    React.createElement(Text, { color: "cyan" }, `${memoryCount}`),
+  ));
+
+  // ── BROWSER ──
+  rows.push(divider("d-br"));
+  rows.push(React.createElement(Box, { key: "br-h", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "BROWSER"),
+  ));
+  if (browserStatus?.session) {
+    rows.push(React.createElement(Box, { key: "br-v", paddingLeft: 1 },
+      React.createElement(Text, { color: "green" }, "● "),
+      React.createElement(Text, {}, truncate(browserStatus.session.browser ?? "connected", SIDEBAR_WIDTH - 4)),
+    ));
+  } else {
+    rows.push(React.createElement(Box, { key: "br-v", paddingLeft: 1 },
+      React.createElement(Text, { dimColor: true }, "◯ off"),
+    ));
+  }
+
+  // ── BUDGET ──
+  rows.push(divider("d-bud"));
+  rows.push(React.createElement(Box, { key: "bud-h", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "BUDGET"),
+  ));
+  rows.push(React.createElement(Box, { key: "bud-v", paddingLeft: 1 },
+    React.createElement(Text, { color: budgetSpent > 0 ? "yellow" : "gray" },
+      budgetSpent > 0
+        ? `$${budgetSpent.toFixed(3)}${maxBudget ? `/$${maxBudget.toFixed(2)}` : ""}`
+        : "$0.000"),
+  ));
+
+  return React.createElement(
+    Box, {
+      flexDirection: "column",
+      width: SIDEBAR_WIDTH,
+      borderStyle: "single",
+      borderColor: "gray",
+      borderTop: false,
+      borderBottom: false,
+      borderLeft: false,
+    },
+    ...rows,
+  );
+}
+
+// ─── Chat View ───────────────────────────────────────────────────────────────
+
+function ToolLine({ name, args, receipt }) {
+  const icon = TOOL_ICONS[name] ?? "[tool]";
+  const primaryArg = args?.path ?? args?.command ?? args?.query ?? args?.task ?? args?.key ?? "";
+  const statusIcon = receipt
+    ? (receipt.success ? "✓" : "✗")
+    : "●";
+  const statusColor = receipt ? (receipt.success ? "green" : "red") : "yellow";
+
+  return React.createElement(
+    Box, { flexDirection: "column", paddingLeft: 3 },
+    React.createElement(
+      Box, {},
+      React.createElement(Text, { color: statusColor }, statusIcon + " "),
+      React.createElement(Text, { color: "cyan", dimColor: true }, `${icon} ${name}`),
+      primaryArg ? React.createElement(Text, { dimColor: true }, ` → ${truncate(primaryArg, 35)}`) : null,
+    ),
+    receipt?.diff?.unified ? React.createElement(MiniDiff, { unified: receipt.diff.unified, filePath: args?.path }) : null,
+  );
+}
+
+function MiniDiff({ unified, filePath }) {
+  const lines = unified.split("\n").filter(l => l);
+  let added = 0; let removed = 0;
+  for (const l of lines) {
+    if (l.startsWith("+") && !l.startsWith("+++")) added++;
+    else if (l.startsWith("-") && !l.startsWith("---")) removed++;
+  }
+  return React.createElement(
+    Box, { paddingLeft: 2 },
+    React.createElement(Text, { color: "green" }, `+${added}`),
+    React.createElement(Text, { dimColor: true }, "/"),
+    React.createElement(Text, { color: "red" }, `-${removed}`),
+    filePath ? React.createElement(Text, { dimColor: true }, ` ${path.basename(filePath)}`) : null,
+  );
+}
+
+function ChatMessage({ msg, mainWidth }) {
+  if (msg.role === "user") {
+    return React.createElement(
+      Box, { flexDirection: "column", paddingLeft: 1, marginTop: 1 },
+      React.createElement(Box, {},
+        React.createElement(Text, { color: "green", bold: true }, "you › "),
+        React.createElement(Text, { color: "white", wrap: "wrap" }, msg.content)));
+  }
+  if (msg.role === "tool_call") {
+    return React.createElement(ToolLine, { name: msg.name, args: msg.args, receipt: msg.receipt });
+  }
+  if (msg.role === "assistant") {
+    return React.createElement(
+      Box, { flexDirection: "column", paddingLeft: 1, marginTop: 1 },
+      React.createElement(Text, { color: "cyan", bold: true }, "wispy ›"),
+      React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+        ...renderMarkdown(msg.content, mainWidth - 4)),
+    );
+  }
+  if (msg.role === "system_info") {
+    return React.createElement(
+      Box, { paddingLeft: 2 },
+      React.createElement(Text, { dimColor: true, italic: true }, msg.content));
+  }
+  return null;
+}
+
+function ChatView({ messages, loading, pendingApproval, onApprove, onDeny, onDryRun, mainWidth }) {
+  const displayMessages = messages.slice(-25);
+
+  return React.createElement(
+    Box, { flexDirection: "column", flexGrow: 1, overflowY: "hidden" },
+    displayMessages.length === 0
+      ? React.createElement(
+          Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", flexDirection: "column" },
+          React.createElement(Text, { dimColor: true }, "Wispy — AI workspace assistant"),
+          React.createElement(Text, { dimColor: true }, "Type a message to start. ? for help."),
+        )
+      : React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+          ...displayMessages.map((msg, i) =>
+            React.createElement(ChatMessage, { key: i, msg, mainWidth }))),
+
+    loading
+      ? React.createElement(
+          Box, { paddingLeft: 2, marginTop: 1 },
+          React.createElement(Spinner, { type: "dots" }),
+          React.createElement(Text, { color: "yellow" }, "  thinking..."),
+        )
+      : null,
+
+    pendingApproval
+      ? React.createElement(ApprovalDialog, {
+          action: pendingApproval.action,
+          onApprove, onDeny, onDryRun,
+        })
+      : null,
+  );
+}
+
+// ─── Overview View ────────────────────────────────────────────────────────────
+
+function OverviewView({ workstreams, activeWorkstream, overviewData, browserStatus, mainWidth }) {
+  return React.createElement(
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    React.createElement(Text, { bold: true, color: "green" }, "Workstream Overview"),
+    React.createElement(Box, { height: 1 }),
+    // Browser status section
+    React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+      React.createElement(Text, { bold: true, color: "cyan" }, "Browser"),
+      browserStatus?.session
+        ? React.createElement(Box, { paddingLeft: 2 },
+            React.createElement(Text, { color: "green" }, "● "),
+            React.createElement(Text, {}, `Connected — ${browserStatus.session.browser ?? "unknown"}`))
+        : React.createElement(Box, { paddingLeft: 2 },
+            React.createElement(Text, { dimColor: true }, "◯ Not connected")),
+    ),
+    React.createElement(Text, { dimColor: true }, "─".repeat(Math.min(40, mainWidth - 4))),
+    React.createElement(Box, { height: 1 }),
+    ...workstreams.map((ws) => {
+      const data = overviewData[ws] ?? {};
+      const isActive = ws === activeWorkstream;
+      return React.createElement(
+        Box, { key: ws, flexDirection: "column", marginBottom: 1 },
+        React.createElement(Box, {},
+          React.createElement(Text, { bold: true, color: isActive ? "green" : "white" },
+            `${isActive ? "●" : "◯"} ${ws}`),
+          data.lastActivity
+            ? React.createElement(Text, { dimColor: true }, `  ${fmtRelTime(data.lastActivity)}`)
+            : null,
+          data.agents > 0
+            ? React.createElement(Text, { color: "yellow" }, `  ${data.agents} agents`)
+            : null,
+        ),
+        data.lastMessage
+          ? React.createElement(
+              Box, { paddingLeft: 2 },
+              React.createElement(Text, { dimColor: true }, "└── "),
+              React.createElement(Text, { wrap: "wrap" }, truncate(data.lastMessage, mainWidth - 10)),
+            )
+          : null,
+        data.workMd
+          ? React.createElement(
+              Box, { paddingLeft: 2 },
+              React.createElement(Text, { dimColor: true }, "└── "),
+              React.createElement(Text, { dimColor: true, italic: true }, `"${truncate(data.workMd, mainWidth - 20)}"`),
+            )
+          : null,
+      );
+    }),
+  );
+}
+
+// ─── Agents View ─────────────────────────────────────────────────────────────
+
+function AgentsView({ agents, agentManager }) {
+  const [builtinAgents, setBuiltinAgents] = useState([]);
+  const [progressMap, setProgressMap] = useState({});
+
+  useEffect(() => {
+    if (agentManager) {
+      try {
+        const list = agentManager.list();
+        setBuiltinAgents(list);
+      } catch {}
+    }
+  }, [agentManager]);
+
+  const statusColor = (s) => {
+    if (s === "running") return "green";
+    if (s === "pending") return "yellow";
+    if (s === "completed" || s === "done") return "cyan";
+    return "red";
+  };
+  const statusIcon = (s) => {
+    if (s === "running") return "●";
+    if (s === "pending") return "◯";
+    if (s === "completed" || s === "done") return "✓";
+    return "✗";
+  };
+
+  const running = agents.filter(a => a.status === "running");
+  const completed = agents.filter(a => a.status === "completed" || a.status === "done");
+
+  return React.createElement(
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    // ── Custom / Built-in Agents ──
+    React.createElement(Text, { bold: true, color: "green" }, "Agent Profiles"),
+    React.createElement(Box, { height: 1 }),
+    builtinAgents.length === 0
+      ? React.createElement(Text, { dimColor: true }, "No agents loaded.")
+      : React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+          ...builtinAgents.slice(0, 10).map((a, i) => React.createElement(
+            Box, { key: i },
+            React.createElement(Text, { color: a.builtin ? "cyan" : "magenta" },
+              a.builtin ? "  [built-in] " : "  [custom]  "),
+            React.createElement(Text, { bold: true }, a.name),
+            React.createElement(Text, { dimColor: true }, `  — ${truncate(a.description, 45)}`),
+          ))),
+
+    React.createElement(Text, { dimColor: true }, "─".repeat(40)),
+    React.createElement(Box, { height: 1 }),
+
+    // ── Running Sub-Agents ──
+    React.createElement(Text, { bold: true, color: "green" },
+      `Sub-Agents  (${running.length} running, ${completed.length} completed)`),
+    React.createElement(Box, { height: 1 }),
+    agents.length === 0
+      ? React.createElement(Text, { dimColor: true }, "No sub-agents recorded.")
+      : React.createElement(Box, { flexDirection: "column" },
+          ...agents.map((a, i) => {
+            const runtime = a.createdAt && a.completedAt
+              ? fmtDuration(new Date(a.completedAt) - new Date(a.createdAt))
+              : a.createdAt ? `${fmtRelTime(a.createdAt)}` : "";
+            return React.createElement(
+              Box, { key: i, flexDirection: "column", marginBottom: 1 },
+              React.createElement(Box, {},
+                React.createElement(Text, { color: statusColor(a.status) }, `${statusIcon(a.status)} `),
+                React.createElement(Text, { bold: true, color: statusColor(a.status) }, truncate(a.label ?? a.id ?? "agent", 20)),
+                React.createElement(Text, { dimColor: true }, `  [${a.model ?? "?"}]`),
+                runtime ? React.createElement(Text, { dimColor: true }, `  ${runtime}`) : null,
+              ),
+              a.task
+                ? React.createElement(
+                    Box, { paddingLeft: 3 },
+                    React.createElement(Text, { dimColor: true, wrap: "wrap" }, truncate(a.task, 60)),
+                  )
+                : null,
+              progressMap[a.id]
+                ? React.createElement(Box, { paddingLeft: 3 },
+                    React.createElement(Text, { color: "yellow" }, "… "),
+                    React.createElement(Text, { dimColor: true, wrap: "wrap" }, truncate(progressMap[a.id], 55)),
+                  )
+                : null,
+            );
+          })),
+  );
+}
+
+// ─── Memory View ──────────────────────────────────────────────────────────────
+
+function MemoryView({ memoryFiles, memoryQuery, onQueryChange }) {
+  const filtered = memoryQuery
+    ? memoryFiles.filter(f =>
+        f.key.toLowerCase().includes(memoryQuery.toLowerCase()) ||
+        (f.preview ?? "").toLowerCase().includes(memoryQuery.toLowerCase()))
+    : memoryFiles;
+
+  return React.createElement(
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    React.createElement(Text, { bold: true, color: "green" }, "Memory Files"),
+    React.createElement(Box, { marginTop: 1 },
+      React.createElement(Text, { dimColor: true }, "Search: "),
+      React.createElement(TextInput, {
+        value: memoryQuery,
+        onChange: onQueryChange,
+        placeholder: "filter files...",
+      }),
+    ),
+    React.createElement(Box, { height: 1 }),
+    filtered.length === 0
+      ? React.createElement(Text, { dimColor: true }, "No memory files found.")
+      : React.createElement(Box, { flexDirection: "column" },
+          ...filtered.slice(0, 20).map((f, i) => React.createElement(
+            Box, { key: i, flexDirection: "column", marginBottom: 0 },
+            React.createElement(Box, {},
+              React.createElement(Text, { color: "cyan" }, f.key),
+              f.size
+                ? React.createElement(Text, { dimColor: true }, `  (${(f.size / 1024).toFixed(1)}KB)`)
+                : null,
+              f.updatedAt
+                ? React.createElement(Text, { dimColor: true }, `  ${fmtRelTime(f.updatedAt)}`)
+                : null,
+            ),
+            f.preview
+              ? React.createElement(
+                  Box, { paddingLeft: 2 },
+                  React.createElement(Text, { dimColor: true, wrap: "wrap" }, truncate(f.preview, 70)),
+                )
+              : null,
+          ))),
+  );
+}
+
+// ─── Audit View ───────────────────────────────────────────────────────────────
+
+function AuditView({ timeline, mainWidth }) {
+  return React.createElement(
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    React.createElement(Text, { bold: true, color: "green" }, "Action Timeline"),
+    React.createElement(Box, { height: 1 }),
+    timeline.length === 0
+      ? React.createElement(Text, { dimColor: true }, "No actions recorded yet.")
+      : React.createElement(Box, { flexDirection: "column" },
+          ...timeline.slice().reverse().slice(0, 30).map((evt, i) => {
+            const icon = TOOL_ICONS[evt.toolName] ?? "[tool]";
+            const statusIcon = evt.denied ? "✗" : evt.dryRun ? "◯" : evt.success ? "✓" : "●";
+            const color = evt.denied ? "red" : evt.dryRun ? "blue" : evt.success ? "green" : "yellow";
+            const ts = fmtTime(evt.timestamp);
+            const arg = evt.primaryArg ? ` → ${truncate(evt.primaryArg, 28)}` : "";
+            return React.createElement(
+              Box, { key: i },
+              React.createElement(Text, { dimColor: true }, `${ts} `),
+              React.createElement(Text, { dimColor: true }, `${icon} `),
+              React.createElement(Text, { color: "cyan" }, evt.toolName),
+              React.createElement(Text, { dimColor: true }, arg),
+              React.createElement(Text, { color }, ` ${statusIcon}`),
+            );
+          })),
+  );
+}
+
+// ─── Settings View ────────────────────────────────────────────────────────────
+
+function SettingsView({ engine }) {
+  const [config, setConfig] = useState(null);
+  const [features, setFeatures] = useState([]);
+  const [browserSt, setBrowserSt] = useState(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const { loadConfig } = await import("../core/config.mjs");
+        const cfg = await loadConfig();
+        if (mounted) setConfig(cfg);
+      } catch {}
+
+      // Load features
+      try {
+        const { getFeatureManager } = await import("../core/features.mjs");
+        const fm = getFeatureManager();
+        const list = await fm.list();
+        if (mounted) setFeatures(list);
+      } catch {}
+
+      // Load browser status
+      try {
+        const bs = engine?.browser?.status?.() ?? null;
+        if (mounted) setBrowserSt(bs);
+      } catch {}
+    })();
+    return () => { mounted = false; };
+  }, [refreshKey]);
+
+  const budget = engine?.budget;
+  const budgetSpent = budget?.sessionSpend ?? 0;
+  const maxBudget = budget?.maxBudgetUsd ?? null;
+
+  const personality = engine?._personality ?? config?.personality ?? "default";
+  const effort = engine?._effort ?? config?.effort ?? "medium";
+  const permMode = engine?.permissions?.getPolicy?.("run_command") ?? "approve";
+  const activeWorkstream = engine?.activeWorkstream ?? engine?._activeWorkstream ?? "default";
+  const activeAgent = engine?._activeAgent ?? config?.defaultAgent ?? "default";
+
+  const configDir = path.join(os.homedir(), ".wispy");
+  const providerLabel = config?.provider ?? engine?.provider ?? "?";
+  const modelLabel = config?.model ?? engine?.model ?? "?";
+
+  return React.createElement(
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    React.createElement(Text, { bold: true, color: "green" }, "Settings"),
+    React.createElement(Box, { height: 1 }),
+
+    // ── General ──
+    React.createElement(Text, { bold: true, color: "cyan" }, "General"),
+    React.createElement(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1 },
+      ...([
+        ["Version", PKG_VERSION],
+        ["Config dir", configDir],
+        ["Provider", providerLabel],
+        ["Model", modelLabel],
+        ["Personality", personality],
+        ["Effort", effort],
+        ["Security", permMode],
+      ]).map(([k, v], i) => React.createElement(
+        Box, { key: i },
+        React.createElement(Text, { color: "white", dimColor: true }, k.padEnd(14)),
+        React.createElement(Text, { color: "white" }, v ?? "?"),
+      )),
+    ),
+
+    // ── Active Session ──
+    React.createElement(Text, { bold: true, color: "cyan" }, "Active Session"),
+    React.createElement(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1 },
+      React.createElement(Box, {},
+        React.createElement(Text, { dimColor: true }, "Agent".padEnd(14)),
+        React.createElement(Text, {}, activeAgent ?? "default"),
+      ),
+      React.createElement(Box, {},
+        React.createElement(Text, { dimColor: true }, "Workstream".padEnd(14)),
+        React.createElement(Text, {}, activeWorkstream),
+      ),
+      React.createElement(Box, {},
+        React.createElement(Text, { dimColor: true }, "Budget".padEnd(14)),
+        React.createElement(Text, { color: budgetSpent > 0 ? "yellow" : "white" },
+          `$${budgetSpent.toFixed(4)}${maxBudget != null ? ` / $${maxBudget.toFixed(2)}` : " (no limit)"}`),
+      ),
+    ),
+
+    // ── Features ──
+    features.length > 0 ? React.createElement(React.Fragment, null,
+      React.createElement(Text, { bold: true, color: "cyan" }, "Features"),
+      React.createElement(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1 },
+        ...features.map((f, i) => React.createElement(
+          Box, { key: i },
+          React.createElement(Text, { color: f.enabled ? "green" : "red" }, f.enabled ? "✓ " : "✗ "),
+          React.createElement(Text, { color: f.enabled ? "white" : "gray" }, f.name),
+          React.createElement(Text, { dimColor: true }, `  [${f.stage}]`),
+        )),
+      ),
+    ) : null,
+
+    // ── Browser ──
+    React.createElement(Text, { bold: true, color: "cyan" }, "Browser"),
+    React.createElement(Box, { paddingLeft: 2, marginBottom: 1 },
+      React.createElement(Text, { dimColor: true }, "Status".padEnd(14)),
+      browserSt?.session
+        ? React.createElement(Text, { color: "green" }, `connected (${browserSt.session.browser ?? "unknown"})`)
+        : React.createElement(Text, { dimColor: true }, "disconnected"),
+    ),
+
+    // ── Keys ──
+    React.createElement(Box, { height: 1 }),
+    React.createElement(Text, { dimColor: true },
+      "Keys: /model <n>  /trust <level>  /agent <n>  /features enable <n>  /cost"),
+  );
+}
+
+// ─── Action Timeline Bar ─────────────────────────────────────────────────────
+
+function TimelineBar({ events }) {
+  const last = events.slice(-TIMELINE_LINES);
+  if (last.length === 0) return null;
+
+  return React.createElement(
+    Box, {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: "gray",
+      borderBottom: false,
+      borderLeft: false,
+      borderRight: false,
+      paddingX: 1,
+    },
+    ...last.map((evt, i) => {
+      const icon = TOOL_ICONS[evt.toolName] ?? "[tool]";
+      const statusIcon = evt.denied ? "✗" : evt.dryRun ? "◯" : evt.success === null ? "●" : evt.success ? "✓" : "✗";
+      const color = evt.denied ? "red" : evt.success === null ? "yellow" : evt.success ? "green" : "red";
+      const ts = fmtTime(evt.timestamp);
+      const arg = evt.primaryArg ? ` ${truncate(evt.primaryArg, 28)}` : "";
+      return React.createElement(
+        Box, { key: i },
+        React.createElement(Text, { dimColor: true }, `${ts} `),
+        React.createElement(Text, { dimColor: true }, `${icon} `),
+        React.createElement(Text, { color: "cyan" }, evt.toolName),
+        React.createElement(Text, { dimColor: true }, arg),
+        React.createElement(Text, { color }, ` ${statusIcon}`),
+      );
+    }),
+  );
+}
+
+// ─── Approval Dialog ─────────────────────────────────────────────────────────
+
+function ApprovalDialog({ action, onApprove, onDeny, onDryRun }) {
+  const riskMap = {
+    run_command: "HIGH", git: "HIGH", keychain: "HIGH", delete_file: "HIGH",
+    write_file: "MEDIUM", file_edit: "MEDIUM", node_execute: "HIGH",
+  };
+  const risk = riskMap[action?.toolName] ?? "MEDIUM";
+  const riskColor = risk === "HIGH" ? "red" : "yellow";
+
+  const args = action?.args ?? {};
+  let argSummary = "";
+  if (args.command) argSummary = truncate(args.command, 50);
+  else if (args.path) argSummary = truncate(args.path, 50);
+  else argSummary = truncate(JSON.stringify(args), 50);
+
+  useInput((input, key) => {
+    const ch = input.toLowerCase();
+    if (ch === "y") onApprove?.();
+    else if (ch === "n" || key.escape) onDeny?.();
+    else if (ch === "d") onDryRun?.();
+  });
+
+  return React.createElement(
+    Box, {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "yellow",
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+      marginX: 2,
+    },
+    React.createElement(Text, { bold: true, color: "yellow" }, "! Permission Required"),
+    React.createElement(Box, { height: 1 }),
+    React.createElement(Box, {},
+      React.createElement(Text, { dimColor: true }, "Tool:    "),
+      React.createElement(Text, { bold: true }, action?.toolName ?? "?")),
+    argSummary ? React.createElement(Box, {},
+      React.createElement(Text, { dimColor: true }, "Action:  "),
+      React.createElement(Text, { wrap: "wrap" }, argSummary)) : null,
+    React.createElement(Box, {},
+      React.createElement(Text, { dimColor: true }, "Risk:    "),
+      React.createElement(Text, { bold: true, color: riskColor }, risk)),
+    React.createElement(Box, { height: 1 }),
+    React.createElement(Box, { gap: 2 },
+      React.createElement(Text, { color: "green", bold: true }, "[Y] Approve"),
+      React.createElement(Text, { color: "red", bold: true }, "[N] Deny"),
+      React.createElement(Text, { color: "cyan", bold: true }, "[D] Dry-run")),
+  );
+}
+
+// ─── Help Overlay ─────────────────────────────────────────────────────────────
+
+function HelpOverlay({ onClose }) {
+  useInput((input, key) => {
+    if (input === "?" || input === "q" || key.escape) onClose?.();
+  });
+
+  const shortcuts = [
+    ["Tab", "Switch view"],
+    ["1-6", "Jump to view (1=chat 2=overview 3=agents 4=memory 5=audit 6=settings)"],
+    ["o", "Overview view"],
+    ["a", "Agents view"],
+    ["m", "Memory view"],
+    ["u", "Audit view"],
+    ["s", "Settings view"],
+    ["t", "Toggle timeline"],
+    ["?", "Toggle this help"],
+    ["Ctrl+L", "Clear chat"],
+    ["Ctrl+C / q", "Quit"],
+    ["/help", "Show all slash commands"],
+    ["/model <n>", "Change model"],
+    ["/trust <level>", "Change security level"],
+    ["/agent <n>", "Switch agent"],
+    ["/features enable <n>", "Toggle feature"],
+    ["/cost", "Show budget"],
+    ["/clear", "Clear conversation"],
+    ["/ws <name>", "Switch workstream"],
+  ];
+
+  return React.createElement(
+    Box, {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "cyan",
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+      marginX: 2,
+    },
+    React.createElement(Text, { bold: true, color: "cyan" }, "Wispy — Keyboard Shortcuts"),
+    React.createElement(Box, { height: 1 }),
+    ...shortcuts.map(([key, desc], i) => React.createElement(
+      Box, { key: i },
+      React.createElement(Text, { color: "yellow", bold: true }, key.padEnd(22)),
+      React.createElement(Text, { dimColor: true, wrap: "wrap" }, desc),
+    )),
+    React.createElement(Box, { height: 1 }),
+    React.createElement(Text, { dimColor: true }, "Press ? or q to close"),
+  );
+}
+
+// ─── Command Palette (autocomplete dropdown) ──────────────────────────────────
+
+function CommandPalette({ query, onSelect, onDismiss }) {
+  const [selectedIdx, setSelectedIdx] = useState(0);
+
+  const matches = filterCommands(query, COMMANDS, 8);
+
+  useEffect(() => { setSelectedIdx(0); }, [query]);
+
+  useInput((input, key) => {
+    if (matches.length === 0) return;
+    if (key.upArrow) { setSelectedIdx(i => Math.max(0, i - 1)); return; }
+    if (key.downArrow) { setSelectedIdx(i => Math.min(matches.length - 1, i + 1)); return; }
+    if (key.return) { onSelect?.(matches[selectedIdx]?.cmd ?? query); return; }
+    if (key.escape || (key.ctrl && input === "c")) { onDismiss?.(); return; }
+  });
+
+  if (matches.length === 0) return null;
+
+  const maxCmdLen = Math.max(...matches.map(m => m.cmd.length));
+
+  return React.createElement(
+    Box, {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: "cyan",
+      paddingX: 1,
+      marginBottom: 0,
+    },
+    React.createElement(
+      Box, { paddingX: 1 },
+      React.createElement(Text, { bold: true, color: "cyan" }, "Commands "),
+      React.createElement(Text, { dimColor: true }, "↑↓ navigate  Enter select  Esc dismiss"),
+    ),
+    ...matches.map((cmd, i) => {
+      const isActive = i === selectedIdx;
+      const cmdStr = cmd.cmd.padEnd(maxCmdLen);
+      return React.createElement(
+        Box, { key: cmd.cmd },
+        isActive
+          ? React.createElement(Text, { color: "black", backgroundColor: "cyan" },
+              ` ${cmdStr}  ${cmd.desc} `)
+          : React.createElement(Box, {},
+              React.createElement(Text, { color: "cyan" }, ` ${cmd.cmd}`),
+              React.createElement(Text, { dimColor: true },
+                " ".repeat(Math.max(1, maxCmdLen - cmd.cmd.length + 2)) + cmd.desc),
+            ),
+      );
+    }),
+  );
+}
+
+// ─── Input Area ───────────────────────────────────────────────────────────────
+// NOTE: This area shows the current input value as static text.
+// The REAL cursor and input are managed by ReadlineInput (readline-based) for
+// proper Korean/CJK IME support. Ink rendering is decoupled from input.
+
+function InputArea({ value, loading, workstream, view }) {
+  const prompt = `${workstream} › `;
+  const placeholder = loading
+    ? "waiting for response..."
+    : view !== "chat"
+    ? `${view} mode — Tab to switch to chat`
+    : "Type a message… (/help for commands | Tab to switch views)";
+
+  return React.createElement(
+    Box, {
+      borderStyle: "single",
+      borderColor: loading ? "yellow" : view === "chat" ? "green" : "gray",
+      paddingX: 1,
+    },
+    loading
+      ? React.createElement(Box, {},
+          React.createElement(Spinner, { type: "dots" }),
+          React.createElement(Text, { color: "yellow" }, `  ${prompt}thinking...`))
+      : React.createElement(Box, {},
+          React.createElement(Text, { color: view === "chat" ? "green" : "gray" }, prompt),
+          value
+            ? React.createElement(Text, {}, value)
+            : React.createElement(Text, { dimColor: true }, placeholder)),
+  );
+}
+
+// ─── Persistence helpers ──────────────────────────────────────────────────────
+
+async function loadConversation(workstream) {
+  const file = path.join(CONVERSATIONS_DIR, `${workstream}.json`);
+  try {
+    const raw = await readFile(file, "utf8");
+    return JSON.parse(raw);
+  } catch { return []; }
+}
+
+async function saveConversation(workstream, messages) {
+  await mkdir(CONVERSATIONS_DIR, { recursive: true });
+  const file = path.join(CONVERSATIONS_DIR, `${workstream}.json`);
+  await writeFile(file, JSON.stringify(messages.slice(-50), null, 2) + "\n", "utf8");
+}
+
+// ─── Sidebar Data Loaders ─────────────────────────────────────────────────────
+
+async function loadWorkstreams() {
+  try {
+    const wsDir = path.join(WISPY_DIR, "workstreams");
+    const dirs = await readdir(wsDir);
+    const result = [];
+    for (const d of dirs) {
+      try {
+        const s = await stat(path.join(wsDir, d));
+        if (s.isDirectory()) result.push(d);
+      } catch {}
+    }
+    return result.length ? result : ["default"];
+  } catch { return ["default"]; }
+}
+
+async function loadMemoryFiles() {
+  try {
+    const files = await readdir(MEMORY_DIR);
+    const result = [];
+    for (const f of files) {
+      if (!f.endsWith(".md")) continue;
+      const fp = path.join(MEMORY_DIR, f);
+      try {
+        const s = await stat(fp);
+        const raw = await readFile(fp, "utf8");
+        result.push({
+          key: f.replace(".md", ""),
+          preview: raw.split("\n").find(l => l.trim() && !l.startsWith("_")) ?? "",
+          size: s.size,
+          updatedAt: s.mtime.toISOString(),
+        });
+      } catch {}
+    }
+    return result;
+  } catch { return []; }
+}
+
+async function loadCronCount() {
+  try {
+    const jobsFile = path.join(WISPY_DIR, "cron", "jobs.json");
+    const raw = await readFile(jobsFile, "utf8");
+    const jobs = JSON.parse(raw);
+    return Array.isArray(jobs) ? jobs.filter(j => j.enabled !== false).length : 0;
+  } catch { return 0; }
+}
+
+async function loadSyncStatus() {
+  try {
+    const syncFile = path.join(WISPY_DIR, "sync.json");
+    const raw = await readFile(syncFile, "utf8");
+    const cfg = JSON.parse(raw);
+    return cfg.auto ? "auto" : "manual";
+  } catch { return "off"; }
+}
+
+async function loadOverviewData(workstreams) {
+  const result = {};
+  for (const ws of workstreams) {
+    try {
+      const convFile = path.join(CONVERSATIONS_DIR, `${ws}.json`);
+      const raw = await readFile(convFile, "utf8");
+      const conv = JSON.parse(raw);
+      const lastMsg = conv.filter(m => m.role === "assistant").pop();
+      const lastUser = conv.filter(m => m.role === "user").pop();
+      const lastActivityFile = await stat(convFile).catch(() => null);
+      result[ws] = {
+        lastActivity: lastActivityFile?.mtime?.toISOString() ?? null,
+        lastMessage: lastMsg?.content?.slice(0, 80) ?? lastUser?.content?.slice(0, 80) ?? null,
+        agents: 0,
+      };
+    } catch {
+      result[ws] = { lastActivity: null, lastMessage: null, agents: 0 };
+    }
+
+    try {
+      const workMdPath = path.join(WISPY_DIR, "workstreams", ws, "work.md");
+      const wmd = await readFile(workMdPath, "utf8");
+      const firstLine = wmd.split("\n").find(l => l.trim());
+      result[ws].workMd = firstLine?.slice(0, 60);
+    } catch {}
+  }
+  return result;
+}
+
+// ─── Main App ─────────────────────────────────────────────────────────────────
+
+function WispyWorkspaceApp({ engine, initialWorkstream }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+
+  // Terminal dimensions
+  const [termWidth, setTermWidth] = useState(stdout?.columns ?? 80);
+  const [termHeight, setTermHeight] = useState(stdout?.rows ?? 24);
+
+  // View state
+  const [view, setView] = useState("chat");
+  const [showHelp, setShowHelp] = useState(false);
+  const [showTimeline, setShowTimeline] = useState(false);
+
+  // Workstream state
+  const [activeWorkstream, setActiveWorkstream] = useState(initialWorkstream);
+  const [workstreams, setWorkstreams] = useState([initialWorkstream]);
+
+  // Chat state
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  // Command palette
+  const [showPalette, setShowPalette] = useState(false);
+
+  // Engine stats
+  const [model, setModel] = useState(engine.model ?? "?");
+  const [provider, setProvider] = useState(engine.provider ?? "?");
+  const [totalTokens, setTotalTokens] = useState(0);
+  const [totalCost, setTotalCost] = useState(0);
+  const [syncStatus, setSyncStatus] = useState("off");
+
+  // Trust UX
+  const [pendingApproval, setPendingApproval] = useState(null);
+  const [timeline, setTimeline] = useState([]);
+
+  // Sidebar data
+  const [agents, setAgents] = useState([]);
+  const [memoryFiles, setMemoryFiles] = useState([]);
+  const [memoryQuery, setMemoryQuery] = useState("");
+  const [cronCount, setCronCount] = useState(0);
+  const [userModelLoaded, setUserModelLoaded] = useState(false);
+  const [browserStatus, setBrowserStatus] = useState(null);
+  const [budgetSpent, setBudgetSpent] = useState(0);
+  const [maxBudget, setMaxBudget] = useState(null);
+
+  // Overview data
+  const [overviewData, setOverviewData] = useState({});
+
+  // Refs
+  const approvalResolverRef = useRef(null);
+  const conversationRef = useRef([]);
+
+  // ── Terminal resize ──
+  useEffect(() => {
+    const onResize = () => {
+      setTermWidth(stdout?.columns ?? 80);
+      setTermHeight(stdout?.rows ?? 24);
+    };
+    stdout?.on?.("resize", onResize);
+    return () => stdout?.off?.("resize", onResize);
+  }, [stdout]);
+
+  // ── Load initial conversation ──
+  useEffect(() => {
+    loadConversation(initialWorkstream).then(msgs => {
+      conversationRef.current = msgs;
+      setMessages(msgs.map(m => ({ ...m, _loaded: true })));
+    });
+  }, [initialWorkstream]);
+
+  // ── Load sidebar data ──
+  useEffect(() => {
+    const loadAll = async () => {
+      const [wsList, memFiles, cron, sync] = await Promise.all([
+        loadWorkstreams(),
+        loadMemoryFiles(),
+        loadCronCount(),
+        loadSyncStatus(),
+      ]);
+
+      const wsSet = new Set(wsList);
+      wsSet.add(initialWorkstream);
+      const wsFinal = Array.from(wsSet);
+
+      setWorkstreams(wsFinal);
+      setMemoryFiles(memFiles);
+      setCronCount(cron);
+      setSyncStatus(sync);
+      setUserModelLoaded(memFiles.some(f => f.key === "user"));
+
+      // Browser status
+      try {
+        const bs = engine?.browser?.status?.() ?? null;
+        setBrowserStatus(bs);
+      } catch {}
+
+      // Budget
+      try {
+        const bud = engine?.budget;
+        if (bud) {
+          setBudgetSpent(bud.sessionSpend ?? 0);
+          setMaxBudget(bud.maxBudgetUsd ?? null);
+        }
+      } catch {}
+    };
+    loadAll();
+    const interval = setInterval(loadAll, 15_000);
+    return () => clearInterval(interval);
+  }, [initialWorkstream, engine]);
+
+  // ── Load overview data — refresh when view switches to overview ──
+  useEffect(() => {
+    const refresh = async () => {
+      const data = await loadOverviewData(workstreams);
+      setOverviewData(data);
+    };
+    refresh();
+    const interval = setInterval(refresh, 20_000);
+    return () => clearInterval(interval);
+  }, [workstreams]);
+
+  // ── Refresh view data on view switch ──
+  useEffect(() => {
+    if (view === "overview") {
+      loadOverviewData(workstreams).then(setOverviewData);
+      try { setBrowserStatus(engine?.browser?.status?.() ?? null); } catch {}
+    }
+    if (view === "memory") {
+      loadMemoryFiles().then(setMemoryFiles);
+    }
+    if (view === "settings") {
+      try {
+        const bud = engine?.budget;
+        if (bud) {
+          setBudgetSpent(bud.sessionSpend ?? 0);
+          setMaxBudget(bud.maxBudgetUsd ?? null);
+        }
+        setBrowserStatus(engine?.browser?.status?.() ?? null);
+      } catch {}
+    }
+  }, [view]);
+
+  // ── Load agents ──
+  useEffect(() => {
+    const loadAgents = async () => {
+      try {
+        const agentsFile = path.join(WISPY_DIR, "agents.json");
+        const raw = await readFile(agentsFile, "utf8");
+        const all = JSON.parse(raw);
+        setAgents(all.filter(a =>
+          a.status === "running" || a.status === "pending" || a.status === "completed" || a.status === "done"
+        ).slice(-10));
+      } catch { setAgents([]); }
+    };
+    loadAgents();
+    const interval = setInterval(loadAgents, 10_000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // ── Wire harness events ──
+  useEffect(() => {
+    const harness = engine.harness;
+    if (!harness) return;
+
+    const onStart = ({ toolName, args }) => {
+      const primaryArg = args?.path ?? args?.command ?? args?.query ?? args?.task ?? args?.key ?? "";
+      setTimeline(prev => [...prev.slice(-50), {
+        toolName, args, primaryArg,
+        timestamp: new Date().toISOString(),
+        success: null, denied: false, dryRun: false,
+      }]);
+    };
+
+    const onComplete = ({ toolName, receipt }) => {
+      setTimeline(prev => {
+        const updated = [...prev];
+        for (let i = updated.length - 1; i >= 0; i--) {
+          if (updated[i].toolName === toolName && updated[i].success === null) {
+            updated[i] = { ...updated[i], success: receipt?.success ?? true, dryRun: receipt?.dryRun ?? false };
+            break;
+          }
+        }
+        return updated;
+      });
+    };
+
+    const onDenied = ({ toolName }) => {
+      setTimeline(prev => {
+        const updated = [...prev];
+        for (let i = updated.length - 1; i >= 0; i--) {
+          if (updated[i].toolName === toolName && updated[i].success === null) {
+            updated[i] = { ...updated[i], success: false, denied: true };
+            break;
+          }
+        }
+        return updated;
+      });
+    };
+
+    harness.on("tool:start", onStart);
+    harness.on("tool:complete", onComplete);
+    harness.on("tool:denied", onDenied);
+    return () => {
+      harness.off("tool:start", onStart);
+      harness.off("tool:complete", onComplete);
+      harness.off("tool:denied", onDenied);
+    };
+  }, [engine]);
+
+  // ── Wire approval handler ──
+  useEffect(() => {
+    engine.permissions.setApprovalHandler(async (action) => {
+      return new Promise((resolve) => {
+        approvalResolverRef.current = resolve;
+        setPendingApproval({ action });
+      });
+    });
+    return () => { engine.permissions.setApprovalHandler(null); };
+  }, [engine]);
+
+  // ── Keyboard shortcut handler (called from ReadlineInput keypress) ──
+  const handleKeypress = useCallback((str, key) => {
+    if (pendingApproval || showHelp) return;
+
+    if (key.name === "tab" && !loading) {
+      const idx = VIEWS.indexOf(view);
+      setView(VIEWS[(idx + 1) % VIEWS.length]);
+      return;
+    }
+
+    // Only handle single-char shortcuts when no text is being typed
+    const input = str ?? "";
+    if (input === "?" && !inputValue) { setShowHelp(true); return; }
+    if (input === "1" && !inputValue && !loading) { setView("chat"); return; }
+    if (input === "2" && !inputValue && !loading) { setView("overview"); return; }
+    if (input === "3" && !inputValue && !loading) { setView("agents"); return; }
+    if (input === "4" && !inputValue && !loading) { setView("memory"); return; }
+    if (input === "5" && !inputValue && !loading) { setView("audit"); return; }
+    if (input === "6" && !inputValue && !loading) { setView("settings"); return; }
+    if (input === "o" && !inputValue && !loading) { setView("overview"); return; }
+    if (input === "a" && !inputValue && !loading) { setView("agents"); return; }
+    if (input === "m" && !inputValue && !loading) { setView("memory"); return; }
+    if (input === "u" && !inputValue && !loading) { setView("audit"); return; }
+    if (input === "s" && !inputValue && !loading) { setView("settings"); return; }
+    if (input === "t" && !inputValue) { setShowTimeline(prev => !prev); return; }
+
+    // Workstream number switch (7-9 and beyond 6)
+    if (/^[7-9]$/.test(input) && !inputValue && !loading) {
+      const idx = parseInt(input) - 1;
+      if (idx < workstreams.length) {
+        switchWorkstream(workstreams[idx]);
+      }
+      return;
+    }
+
+    if (input === "q" && !inputValue && !loading) {
+      exit();
+      process.exit(0);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingApproval, showHelp, loading, view, inputValue, workstreams, exit]);
+
+  // ── Wire ReadlineInput — the source of all keyboard input ──
+  const rlRef = useRef(null);
+
+  // Keep stable refs so the ReadlineInput closure always calls current callbacks
+  // without needing to restart readline.
+  const handleKeypressRef = useRef(null);
+  const handleSubmitRef = useRef(null);
+  const handleInputChangeRef = useRef(null);
+  useEffect(() => { handleKeypressRef.current = handleKeypress; }, [handleKeypress]);
+
+  useEffect(() => {
+    const rl = new ReadlineInput({
+      onSubmit: (line) => { handleSubmitRef.current?.(line); },
+      onUpdate: (text) => { handleInputChangeRef.current?.(text); },
+      onKeypress: (str, key) => { handleKeypressRef.current?.(str, key); },
+      onCtrlC: () => { exit(); process.exit(0); },
+      onCtrlL: () => {
+        conversationRef.current = [];
+        setMessages([]);
+        saveConversation(initialWorkstream, []).catch(() => {});
+      },
+      prompt: `${initialWorkstream} › `,
+    });
+    rl.start();
+    rlRef.current = rl;
+    return () => rl.stop();
+  // Only run once on mount — refs keep callbacks up to date.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── Switch workstream ──
+  const switchWorkstream = useCallback(async (ws) => {
+    if (ws === activeWorkstream) return;
+    setActiveWorkstream(ws);
+    setMessages([]);
+    setInputValue("");
+    conversationRef.current = [];
+    const msgs = await loadConversation(ws);
+    conversationRef.current = msgs;
+    setMessages(msgs);
+    setView("chat");
+    engine._activeWorkstream = ws;
+    engine._workMdLoaded = false;
+    engine._workMdContent = null;
+  }, [activeWorkstream, engine]);
+
+  // ── Approval handlers ──
+  const handleApprove = useCallback(() => {
+    approvalResolverRef.current?.(true);
+    approvalResolverRef.current = null;
+    setPendingApproval(null);
+  }, []);
+
+  const handleDeny = useCallback(() => {
+    approvalResolverRef.current?.(false);
+    approvalResolverRef.current = null;
+    setPendingApproval(null);
+  }, []);
+
+  const handleDryRun = useCallback(async () => {
+    const action = pendingApproval?.action;
+    approvalResolverRef.current?.(false);
+    approvalResolverRef.current = null;
+    setPendingApproval(null);
+    if (action) {
+      setMessages(prev => [...prev, {
+        role: "assistant",
+        content: `**Dry-run preview**\n\nWould execute: \`${action.toolName}\`\n\`\`\`\n${JSON.stringify(action.args, null, 2).slice(0, 300)}\n\`\`\`\n*(Approve to run.)*`,
+      }]);
+    }
+  }, [pendingApproval]);
+
+  // ── Palette visibility ──
+  const handleInputChange = useCallback((val) => {
+    setInputValue(val);
+    setShowPalette(val.startsWith("/") && val.length >= 2);
+  }, []);
+
+  // Keep refs up to date
+  useEffect(() => { handleInputChangeRef.current = handleInputChange; }, [handleInputChange]);
+
+  const handlePaletteSelect = useCallback((cmd) => {
+    const base = cmd.replace(/<[^>]+>/g, "").trimEnd();
+    setInputValue(base);
+    setShowPalette(false);
+  }, []);
+
+  const handlePaletteDismiss = useCallback(() => {
+    setShowPalette(false);
+  }, []);
+
+  // ── Message submit ──
+  const handleSubmit = useCallback(async (value) => {
+    // Clear readline's internal line buffer after we consume the value
+    if (rlRef.current?._rl) {
+      rlRef.current._rl.line = "";
+    }
+    if (pendingApproval) return;
+    const input = value.trim();
+    if (!input || loading) return;
+    setInputValue("");
+    setShowPalette(false);
+
+    if (view !== "chat") setView("chat");
+
+    // Slash commands
+    if (input.startsWith("/")) {
+      const parts = input.split(/\s+/);
+      const cmd = parts[0].toLowerCase();
+
+      if (cmd === "/quit" || cmd === "/exit") { exit(); process.exit(0); return; }
+      if (cmd === "/clear") {
+        conversationRef.current = [];
+        setMessages([{ role: "system_info", content: "Conversation cleared." }]);
+        await saveConversation(activeWorkstream, []);
+        return;
+      }
+      if (cmd === "/cost") {
+        const bud = engine?.budget;
+        const spent = bud?.sessionSpend ?? totalCost;
+        const max = bud?.maxBudgetUsd;
+        setMessages(prev => [...prev, {
+          role: "system_info",
+          content: `Budget: $${spent.toFixed(4)}${max ? ` / $${max.toFixed(2)}` : ""} — ${totalTokens} tokens`,
+        }]);
+        return;
+      }
+      if (cmd === "/timeline") { setView("audit"); return; }
+      if (cmd === "/overview" || cmd === "/o") { setView("overview"); return; }
+      if (cmd === "/agents" || cmd === "/a") { setView("agents"); return; }
+      if (cmd === "/memories" || cmd === "/m") { setView("memory"); return; }
+      if (cmd === "/audit" || cmd === "/u") { setView("audit"); return; }
+      if (cmd === "/settings" || cmd === "/s") { setView("settings"); return; }
+      if (cmd === "/model" && parts[1]) {
+        engine.providers.setModel(parts[1]);
+        setModel(parts[1]);
+        setMessages(prev => [...prev, { role: "system_info", content: `Model → ${parts[1]}` }]);
+        return;
+      }
+      if (cmd === "/workstream" && parts[1]) { await switchWorkstream(parts[1]); return; }
+      if (cmd === "/ws" && parts[1]) { await switchWorkstream(parts[1]); return; }
+      if (cmd === "/help") { setShowHelp(true); return; }
+      if (cmd === "/trust" && parts[1]) {
+        try {
+          engine.permissions.setPolicy("run_command", parts[1]);
+          setMessages(prev => [...prev, { role: "system_info", content: `Security level → ${parts[1]}` }]);
+        } catch (e) {
+          setMessages(prev => [...prev, { role: "system_info", content: `Error: ${e.message}` }]);
+        }
+        return;
+      }
+    }
+
+    // Add user message
+    const userMsg = { role: "user", content: input };
+    setMessages(prev => [...prev, userMsg]);
+    conversationRef.current.push(userMsg);
+    setLoading(true);
+
+    try {
+      const result = await engine.processMessage(null, input, {
+        onChunk: () => {},
+        onToolCall: (name, args) => {
+          setMessages(prev => [...prev, { role: "tool_call", name, args, result: null, receipt: null }]);
+        },
+        onToolResult: (name, toolResult) => {
+          setMessages(prev => {
+            const updated = [...prev];
+            for (let i = updated.length - 1; i >= 0; i--) {
+              if (updated[i].role === "tool_call" && updated[i].name === name && updated[i].result === null) {
+                updated[i] = { ...updated[i], result: toolResult };
+                break;
+              }
+            }
+            return updated;
+          });
+        },
+        onReceipt: (receipt) => {
+          if (!receipt?.toolName) return;
+          setMessages(prev => {
+            const updated = [...prev];
+            for (let i = updated.length - 1; i >= 0; i--) {
+              if (updated[i].role === "tool_call" && updated[i].name === receipt.toolName) {
+                updated[i] = { ...updated[i], receipt };
+                break;
+              }
+            }
+            return updated;
+          });
+        },
+        noSave: true,
+      });
+
+      const responseText = result.content;
+
+      // Update token/cost tracking
+      const { input: inputToks = 0, output: outputToks = 0 } = engine.providers.sessionTokens ?? {};
+      setTotalTokens(inputToks + outputToks);
+
+      // Use budget manager if available
+      const bud = engine?.budget;
+      if (bud) {
+        setBudgetSpent(bud.sessionSpend ?? 0);
+        setMaxBudget(bud.maxBudgetUsd ?? null);
+        setTotalCost(bud.sessionSpend ?? 0);
+      } else {
+        const MODEL_PRICING = {
+          "gemini-2.5-flash": { input: 0.15, output: 0.60 },
+          "gemini-2.5-pro":   { input: 1.25, output: 10.0 },
+          "claude-sonnet-4-20250514": { input: 3.0, output: 15.0 },
+          "gpt-4o":           { input: 2.50, output: 10.0 },
+          "gpt-4.1":          { input: 2.0, output: 8.0 },
+        };
+        const pricing = MODEL_PRICING[model] ?? { input: 1.0, output: 3.0 };
+        const cost = (inputToks * pricing.input + outputToks * pricing.output) / 1_000_000;
+        setTotalCost(cost);
+      }
+      setModel(engine.model ?? model);
+
+      const assistantMsg = { role: "assistant", content: responseText };
+      conversationRef.current.push(assistantMsg);
+      setMessages(prev => [...prev, assistantMsg]);
+      await saveConversation(activeWorkstream, conversationRef.current.filter(m => m.role !== "system"));
+    } catch (err) {
+      const errMsg = { role: "assistant", content: `Error: ${err.message.slice(0, 200)}` };
+      setMessages(prev => [...prev, errMsg]);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading, model, totalCost, totalTokens, engine, exit, pendingApproval, activeWorkstream, view, switchWorkstream]);
+
+  // Keep ref up to date
+  useEffect(() => { handleSubmitRef.current = handleSubmit; }, [handleSubmit]);
+
+  // ── Layout ──
+  const showSidebar = termWidth >= 80;
+  const mainWidth = showSidebar ? termWidth - SIDEBAR_WIDTH - 2 : termWidth;
+  const permMode = engine.permissions?.getPolicy?.("run_command") ?? "approve";
+  const activeAgent = engine?._personality ?? engine?._activeAgent ?? null;
+
+  // ── Main content ──
+  const mainContent = showHelp
+    ? React.createElement(HelpOverlay, { onClose: () => setShowHelp(false) })
+    : view === "chat"
+    ? React.createElement(ChatView, {
+        messages, loading, pendingApproval,
+        onApprove: handleApprove, onDeny: handleDeny, onDryRun: handleDryRun,
+        mainWidth,
+      })
+    : view === "overview"
+    ? React.createElement(OverviewView, { workstreams, activeWorkstream, overviewData, browserStatus, mainWidth })
+    : view === "agents"
+    ? React.createElement(AgentsView, { agents, agentManager: engine?.agentManager })
+    : view === "memory"
+    ? React.createElement(MemoryView, { memoryFiles, memoryQuery, onQueryChange: setMemoryQuery })
+    : view === "audit"
+    ? React.createElement(AuditView, { timeline, mainWidth })
+    : view === "settings"
+    ? React.createElement(SettingsView, { engine })
+    : null;
+
+  return React.createElement(
+    Box, { flexDirection: "column", height: "100%" },
+
+    // Status bar
+    React.createElement(StatusBar, {
+      workstream: activeWorkstream,
+      model, provider,
+      permMode,
+      syncStatus,
+      tokens: totalTokens,
+      cost: totalCost,
+      pendingApprovals: pendingApproval ? 1 : 0,
+      view,
+      termWidth,
+    }),
+
+    // Main body
+    React.createElement(
+      Box, { flexDirection: "row", flexGrow: 1 },
+
+      showSidebar
+        ? React.createElement(Sidebar, {
+            workstreams,
+            activeWorkstream,
+            activeAgent,
+            agents,
+            memoryCount: memoryFiles.length,
+            userModelLoaded,
+            cronCount,
+            syncStatus,
+            browserStatus,
+            budgetSpent,
+            maxBudget,
+            onSelectWorkstream: switchWorkstream,
+          })
+        : null,
+
+      React.createElement(
+        Box, { flexDirection: "column", flexGrow: 1 },
+        mainContent,
+      ),
+    ),
+
+    // Timeline bar
+    (showTimeline || view === "chat") && timeline.length > 0
+      ? React.createElement(TimelineBar, { events: timeline })
+      : null,
+
+    // Command palette
+    !showHelp && showPalette && inputValue.startsWith("/")
+      ? React.createElement(CommandPalette, {
+          query: inputValue,
+          onSelect: handlePaletteSelect,
+          onDismiss: handlePaletteDismiss,
+        })
+      : null,
+
+    // Input (static display only — real input handled by ReadlineInput)
+    !showHelp
+      ? React.createElement(InputArea, {
+          value: inputValue,
+          loading,
+          workstream: activeWorkstream,
+          view,
+        })
+      : null,
+  );
+}
+
+// ─── Entry point ──────────────────────────────────────────────────────────────
+
+async function main() {
+  if (!process.stdin.isTTY) {
+    console.error("Error: wispy --tui requires a TTY terminal");
+    process.exit(1);
+  }
+
+  const engine = new WispyEngine({ workstream: INITIAL_WORKSTREAM });
+  const initResult = await engine.init();
+
+  if (!initResult) {
+    console.error("No API key found. Run `wispy` first to set up your provider.");
+    process.exit(1);
+  }
+
+  process.stdout.write("\x1b[2J\x1b[H");
+
+  // Give Ink a fake stdin so it doesn't fight with readline for raw-mode control.
+  // All actual input is handled by ReadlineInput inside WispyWorkspaceApp.
+  const fakeStdin = new PassThrough();
+  fakeStdin.isTTY = false;
+  fakeStdin.setRawMode = () => {}; // no-op so Ink doesn't crash trying to set raw mode
+
+  const { waitUntilExit } = render(
+    React.createElement(WispyWorkspaceApp, {
+      engine,
+      initialWorkstream: INITIAL_WORKSTREAM,
+    }),
+    {
+      exitOnCtrlC: false, // ReadlineInput handles Ctrl+C
+      stdin: fakeStdin,
+    }
+  );
+
+  await waitUntilExit();
+  engine.destroy();
+}
+
+main().catch(err => {
+  console.error("TUI error:", err.message);
+  if (process.env.WISPY_DEBUG) console.error(err.stack);
+  process.exit(1);
+});