wispy-cli 1.2.3 → 1.4.0

package/lib/wispy-tui.mjs

@@ -1,68 +1,76 @@
 #!/usr/bin/env node
 /**
- * wispy-tui.mjs — Ink-based TUI for Wispy
- * v1.2: Trust UX — Approval dialogs, receipts, action timeline, diff views
+ * wispy-tui.mjs — Workspace OS TUI for Wispy v2.0
  *
- * Features:
- *  - Status bar: provider / model / workstream / session cost / permission mode
- *  - Message list with basic markdown rendering
- *  - Tool execution display
- *  - Approval dialog (inline keyboard: Y/N/D)
- *  - Receipt view after tool execution
- *  - Action timeline
- *  - Diff view with color
- *  - Input box (single-line with submit)
- *  - Loading spinner while AI is thinking
+ * Multi-panel workspace interface:
+ *   - Left sidebar: Workstreams, Agents, Memory, Cron, Sync
+ *   - Main area: Chat / Overview / Agents / Memory / Audit / Settings
+ *   - Bottom: Action Timeline bar + Input
+ *   - Overlays: Approval dialogs, Diff views
  */
 
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import { render, Box, Text, useApp, Newline, useInput } from "ink";
+import React, { useState, useEffect, useRef, useCallback, useReducer } from "react";
+import { render, Box, Text, useApp, Newline, useInput, useStdout } from "ink";
 import Spinner from "ink-spinner";
 import TextInput from "ink-text-input";
 
 import os from "node:os";
 import path from "node:path";
-import { readFile, writeFile, mkdir } from "node:fs/promises";
+import { readFile, writeFile, readdir, stat, mkdir } from "node:fs/promises";
 
-import { WispyEngine, CONVERSATIONS_DIR, PROVIDERS } from "../core/index.mjs";
+import { WispyEngine, CONVERSATIONS_DIR, PROVIDERS, WISPY_DIR, MEMORY_DIR } from "../core/index.mjs";
 
-// -----------------------------------------------------------------------
-// Parse workstream from args
-// -----------------------------------------------------------------------
+// ─── Parse CLI args ──────────────────────────────────────────────────────────
 
 const rawArgs = process.argv.slice(2);
 const wsIdx = rawArgs.findIndex((a) => a === "-w" || a === "--workstream");
-const ACTIVE_WORKSTREAM =
+const INITIAL_WORKSTREAM =
   process.env.WISPY_WORKSTREAM ??
   (wsIdx !== -1 ? rawArgs[wsIdx + 1] : null) ??
   "default";
 
-const HISTORY_FILE = path.join(CONVERSATIONS_DIR, `${ACTIVE_WORKSTREAM}.json`);
+// ─── Constants ───────────────────────────────────────────────────────────────
 
-// -----------------------------------------------------------------------
-// Conversation persistence
-// -----------------------------------------------------------------------
+const VIEWS = ["chat", "overview", "agents", "memory", "audit", "settings"];
+const SIDEBAR_WIDTH = 16;
+const TIMELINE_LINES = 3;
 
-async function readFileOr(p, fallback = null) {
-  try { return await readFile(p, "utf8"); } catch { return fallback; }
+const TOOL_ICONS = {
+  read_file: "📖", write_file: "✏️", file_edit: "✏️", run_command: "⚙️",
+  git: "🌿", web_search: "🔍", web_fetch: "🌐", list_directory: "📁",
+  spawn_subagent: "🤖", spawn_agent: "🤖", memory_save: "💾",
+  memory_search: "🔍", memory_list: "📝", delete_file: "🗑️",
+  node_execute: "🖥️", update_work_context: "📝",
+};
+
+// ─── 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 ""; }
 }
 
-async function loadConversation() {
-  const raw = await readFileOr(HISTORY_FILE);
-  if (!raw) return [];
-  try { return JSON.parse(raw); } 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 ""; }
 }
 
-async function saveConversation(messages) {
-  await mkdir(CONVERSATIONS_DIR, { recursive: true });
-  await writeFile(HISTORY_FILE, JSON.stringify(messages.slice(-50), null, 2) + "\n", "utf8");
+function truncate(str, n) {
+  if (!str) return "";
+  return str.length > n ? str.slice(0, n - 1) + "…" : str;
 }
 
-// -----------------------------------------------------------------------
-// Simple markdown → Ink renderer
-// -----------------------------------------------------------------------
+// ─── Markdown renderer ───────────────────────────────────────────────────────
 
-function renderMarkdown(text) {
+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);
@@ -71,13 +79,13 @@ function renderMarkdown(text) {
     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, { color: "green" }, "• "),
         React.createElement(Text, null, 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, { color: "yellow" }, match[1]),
         React.createElement(Text, null, match[2]));
     }
     if (line.includes("**")) {
@@ -88,164 +96,492 @@ function renderMarkdown(text) {
           : 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(50));
-    if (line === "") return React.createElement(Newline, { key: i });
-    return React.createElement(Text, { key: i }, line);
+    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);
   });
 }
 
-// -----------------------------------------------------------------------
-// ── Trust UX Components ──────────────────────────────────────────────────
-// -----------------------------------------------------------------------
+// ─── Status Bar ──────────────────────────────────────────────────────────────
 
-/**
- * DiffView — shows unified diff with +/- coloring
- */
-function DiffView({ before, after, filePath, unified }) {
-  const diffLines = unified ? unified.split("\n") : [];
-  if (diffLines.length === 0) return null;
+function StatusBar({ workstream, model, provider, permMode, syncStatus, tokens, cost, pendingApprovals, view, termWidth }) {
+  const providerLabel = PROVIDERS[provider]?.label?.split(" ")[0] ?? provider ?? "?";
+  const costStr = cost > 0 ? `$${cost.toFixed(4)}` : "";
+  const permIcon = permMode === "approve" ? "🔐" : permMode === "notify" ? "📋" : "✅";
+  const syncIcon = syncStatus === "auto" ? "💾" : syncStatus === "manual" ? "⏸" : "🔴";
+  const viewLabel = view.toUpperCase();
+
+  const wide = termWidth >= 100;
 
   return React.createElement(
-    Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0 },
-    React.createElement(Text, { dimColor: true }, "─".repeat(40)),
-    React.createElement(Text, { bold: true, color: "cyan" }, `Diff: ${filePath ?? "file"}`),
-    ...diffLines.slice(0, 40).map((line, i) => {
-      if (line.startsWith("+++") || line.startsWith("---")) {
-        return React.createElement(Text, { key: i, dimColor: true }, line);
-      }
-      if (line.startsWith("@@")) {
-        return React.createElement(Text, { key: i, color: "cyan" }, line);
-      }
-      if (line.startsWith("+")) {
-        return React.createElement(Text, { key: i, color: "green" }, line);
-      }
-      if (line.startsWith("-")) {
-        return React.createElement(Text, { key: i, color: "red" }, line);
-      }
-      return React.createElement(Text, { key: i, dimColor: true }, line);
-    }),
-    React.createElement(Text, { dimColor: true }, "─".repeat(40)),
+    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" }, ` ─ ${permIcon}${permMode ?? "auto"}`) : null,
+    wide && syncIcon ? React.createElement(Text, { color: "black" }, ` ─ ${syncIcon}synced`) : null,
+    wide && costStr ? React.createElement(Text, { color: "black", dimColor: true }, ` ─ ${costStr}`) : null,
+    pendingApprovals > 0
+      ? React.createElement(Text, { color: "black", bold: true }, ` ─ ⚠️ ${pendingApprovals} pending`)
+      : null,
+    React.createElement(Text, { color: "black", dimColor: true }, `  [${viewLabel}]  ? for help`),
   );
 }
 
-/**
- * ReceiptView — shows after tool execution
- */
-function ReceiptView({ receipt }) {
-  if (!receipt) return null;
-  const icon = receipt.success ? "✅" : "❌";
-  const dryTag = receipt.dryRun ? " [DRY RUN]" : "";
+// ─── Left Sidebar ─────────────────────────────────────────────────────────────
+
+function Sidebar({ workstreams, activeWorkstream, agents, memoryCount, userModelLoaded, cronCount, syncStatus, sidebarHeight, onSelectWorkstream }) {
+  const agentRunning = agents.filter(a => a.status === "running");
+  const agentPending = agents.filter(a => a.status === "pending");
 
-  const lines = [
+  const agentIcon = (status) => {
+    if (status === "running") return "🟢";
+    if (status === "pending") return "🟡";
+    if (status === "completed" || status === "done") return "✅";
+    return "❌";
+  };
+
+  const syncIcon = syncStatus === "auto" ? "🔄 auto" : syncStatus === "manual" ? "⏸ manual" : "❌ off";
+
+  const rows = [];
+
+  // Section: STREAMS
+  rows.push(React.createElement(
+    Box, { key: "streams-header", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "STREAMS"),
+  ));
+
+  workstreams.forEach((ws, i) => {
+    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 - 2)}`),
+    ));
+  });
+
+  // Section: AGENTS
+  rows.push(React.createElement(Box, { key: "div1", borderStyle: "single", borderTop: false, borderRight: false, borderLeft: false, borderBottom: true, borderColor: "gray", width: SIDEBAR_WIDTH }));
+  rows.push(React.createElement(
+    Box, { key: "agents-header", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "AGENTS"),
+  ));
+
+  if (agents.length === 0) {
+    rows.push(React.createElement(
+      Box, { key: "no-agents", paddingLeft: 1 },
+      React.createElement(Text, { dimColor: true }, " (none)"),
+    ));
+  } else {
+    agents.slice(0, 4).forEach((a, i) => {
+      rows.push(React.createElement(
+        Box, { key: `agent-${i}`, paddingLeft: 1 },
+        React.createElement(Text, {}, `${agentIcon(a.status)}${truncate(a.label ?? a.role ?? "agent", SIDEBAR_WIDTH - 3)}`),
+      ));
+    });
+  }
+
+  // Section: MEMORY
+  rows.push(React.createElement(Box, { key: "div2", borderStyle: "single", borderTop: false, borderRight: false, borderLeft: false, borderBottom: true, borderColor: "gray", width: SIDEBAR_WIDTH }));
+  rows.push(React.createElement(
+    Box, { key: "mem-header", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "MEMORY"),
+  ));
+  rows.push(React.createElement(
+    Box, { key: "mem-files", paddingLeft: 1 },
+    React.createElement(Text, {}, `📝${memoryCount} files`),
+  ));
+  rows.push(React.createElement(
+    Box, { key: "mem-model", paddingLeft: 1 },
+    React.createElement(Text, {}, `🧠model ${userModelLoaded ? "✅" : "❌"}`),
+  ));
+
+  // Section: CRON
+  rows.push(React.createElement(Box, { key: "div3", borderStyle: "single", borderTop: false, borderRight: false, borderLeft: false, borderBottom: true, borderColor: "gray", width: SIDEBAR_WIDTH }));
+  rows.push(React.createElement(
+    Box, { key: "cron-header", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "CRON"),
+  ));
+  rows.push(React.createElement(
+    Box, { key: "cron-jobs", paddingLeft: 1 },
+    React.createElement(Text, {}, `⏰${cronCount} jobs`),
+  ));
+
+  // Section: SYNC
+  rows.push(React.createElement(Box, { key: "div4", borderStyle: "single", borderTop: false, borderRight: false, borderLeft: false, borderBottom: true, borderColor: "gray", width: SIDEBAR_WIDTH }));
+  rows.push(React.createElement(
+    Box, { key: "sync-header", paddingLeft: 1 },
+    React.createElement(Text, { bold: true, dimColor: true }, "SYNC"),
+  ));
+  rows.push(React.createElement(
+    Box, { key: "sync-status", paddingLeft: 1 },
+    React.createElement(Text, {}, syncIcon),
+  ));
+
+  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] ?? "🔧";
+  const primaryArg = args?.path ?? args?.command ?? args?.query ?? args?.task ?? args?.key ?? "";
+  const statusIcon = receipt
+    ? (receipt.success ? "✅" : "❌")
+    : "⏳";
+
+  return React.createElement(
+    Box, { flexDirection: "column", paddingLeft: 3 },
     React.createElement(
-      Box, { key: "header" },
-      React.createElement(Text, { bold: true, color: receipt.success ? "green" : "red" },
-        `${icon} ${receipt.toolName}${dryTag}`),
-      React.createElement(Text, { dimColor: true }, ` (${receipt.duration}ms)`),
+      Box, {},
+      React.createElement(Text, { color: "cyan", dimColor: true },
+        `${statusIcon} ${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,
+  );
+}
 
-  if (receipt.error) {
-    lines.push(React.createElement(Text, { key: "err", color: "red" }, `  Error: ${receipt.error}`));
+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,
+  );
+}
 
-  if (receipt.diff?.unified) {
-    const stats = (() => {
-      let added = 0; let removed = 0;
-      for (const l of receipt.diff.unified.split("\n")) {
-        if (l.startsWith("+") && !l.startsWith("+++")) added++;
-        else if (l.startsWith("-") && !l.startsWith("---")) removed++;
-      }
-      return { added, removed };
-    })();
-    lines.push(
-      React.createElement(Text, { key: "stats", color: "yellow" },
-        `  Changes: +${stats.added} lines, -${stats.removed} lines`),
-      React.createElement(DiffView, {
-        key: "diff",
-        filePath: receipt.args?.path,
-        unified: receipt.diff.unified,
-      }),
+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 }, "🧑 "),
+        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 }, "🤖"),
+      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 }, "🌿 Welcome to Wispy"),
+          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, mainWidth }) {
   return React.createElement(
-    Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0 },
-    ...lines,
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    React.createElement(Text, { bold: true, color: "green" }, "Workstream Overview"),
+    React.createElement(Box, { height: 1 }),
+    ...workstreams.map((ws, i) => {
+      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" }, ws),
+          React.createElement(Text, { dimColor: true }, "  "),
+          data.lastActivity
+            ? React.createElement(Text, { dimColor: true }, `Last: ${fmtRelTime(data.lastActivity)}`)
+            : null,
+          data.agents > 0
+            ? React.createElement(Text, { color: "yellow" }, `  Agents: ${data.agents} running`)
+            : 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 }, "└── work.md: "),
+              React.createElement(Text, { dimColor: true, italic: true }, `"${truncate(data.workMd, mainWidth - 20)}"`),
+            )
+          : null,
+      );
+    }),
   );
 }
 
-/**
- * ActionTimeline — shows a running log of tool actions
- */
-function ActionTimeline({ events }) {
-  if (!events || events.length === 0) return null;
-
-  const TOOL_ICONS = {
-    read_file: "📖",
-    write_file: "✏️",
-    file_edit: "✏️",
-    run_command: "🔧",
-    git: "🌿",
-    web_search: "🔍",
-    web_fetch: "🌐",
-    list_directory: "📁",
-    spawn_subagent: "🤖",
-    memory_save: "💾",
+// ─── Agents View ─────────────────────────────────────────────────────────────
+
+function AgentsView({ agents }) {
+  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 "❌";
   };
 
   return React.createElement(
-    Box, { flexDirection: "column", paddingLeft: 1, marginTop: 0 },
-    React.createElement(Text, { bold: true, dimColor: true }, "── Actions ──"),
-    ...events.slice(-8).map((evt, i) => {
-      const icon = TOOL_ICONS[evt.toolName] ?? "🔧";
-      const ts = evt.timestamp
-        ? new Date(evt.timestamp).toLocaleTimeString("en-US", { hour12: false })
-        : "";
-      const status = evt.denied ? "❌" : evt.dryRun ? "👁️" : evt.success ? "✅" : "⏳";
-      const arg = evt.primaryArg ? ` → ${evt.primaryArg.slice(0, 30)}` : "";
-      const approvedTag = evt.approved === true ? " (approved ✅)" : evt.approved === false ? " (denied ❌)" : "";
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    React.createElement(Text, { bold: true, color: "green" }, "Active Agents"),
+    React.createElement(Box, { height: 1 }),
+    agents.length === 0
+      ? React.createElement(Text, { dimColor: true }, "No agents running.")
+      : React.createElement(Box, { flexDirection: "column" },
+          ...agents.map((a, i) => React.createElement(
+            Box, { key: i, flexDirection: "column", marginBottom: 1 },
+            React.createElement(Box, {},
+              React.createElement(Text, {}, `${statusIcon(a.status)} `),
+              React.createElement(Text, { bold: true, color: statusColor(a.status) }, a.label ?? a.id),
+              React.createElement(Text, { dimColor: true }, `  [${a.model ?? "?"}]`),
+              a.createdAt
+                ? React.createElement(Text, { dimColor: true }, `  started ${fmtRelTime(a.createdAt)}`)
+                : null,
+            ),
+            a.task
+              ? React.createElement(
+                  Box, { paddingLeft: 3 },
+                  React.createElement(Text, { dimColor: true, wrap: "wrap" }, truncate(a.task, 60)),
+                )
+              : 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] ?? "🔧";
+            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, 30)}` : "";
+            return React.createElement(
+              Box, { key: i },
+              React.createElement(Text, { dimColor: true }, `${ts} `),
+              React.createElement(Text, {}, `${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);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const { loadConfig } = await import("../core/config.mjs");
+        const cfg = await loadConfig();
+        setConfig(cfg);
+      } catch {}
+    })();
+  }, []);
+
+  const rows = config ? [
+    ["Provider", engine.provider ?? "?"],
+    ["Model", engine.model ?? "?"],
+    ["Workstream", engine.activeWorkstream ?? "default"],
+    ["Permission mode", engine.permissions?.getPolicy?.("run_command") ?? "approve"],
+    ["Version", "2.0.0"],
+    ["Config", path.join(os.homedir(), ".wispy", "config.json")],
+  ] : [];
+
+  return React.createElement(
+    Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+    React.createElement(Text, { bold: true, color: "green" }, "Settings"),
+    React.createElement(Box, { height: 1 }),
+    ...rows.map(([k, v], i) => React.createElement(
+      Box, { key: i, marginBottom: 0 },
+      React.createElement(Text, { color: "cyan", bold: true }, `${k}: `),
+      React.createElement(Text, {}, v),
+    )),
+    React.createElement(Box, { height: 1 }),
+    React.createElement(Text, { dimColor: true }, "Commands: /model <name>  /clear  /timeline  /cost  /help"),
+  );
+}
+
+// ─── 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] ?? "🔧";
+      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, {}, `${icon} `),
         React.createElement(Text, { color: "cyan" }, evt.toolName),
-        React.createElement(Text, { dimColor: true }, `${arg}${approvedTag} ${status}`),
+        React.createElement(Text, { dimColor: true }, arg),
+        React.createElement(Text, { color }, ` ${statusIcon}`),
       );
     }),
   );
 }
 
-/**
- * ApprovalDialog — intercepts "approve" policy tools
- *
- * Resolves the pending approval and calls onApprove / onDeny / onDryRun
- */
+// ─── 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",
+    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" : risk === "MEDIUM" ? "yellow" : "green";
+  const riskColor = risk === "HIGH" ? "red" : "yellow";
 
-  // Format args summary
-  let argSummary = "";
   const args = action?.args ?? {};
-  if (args.command) argSummary = `Command: ${args.command}`;
-  else if (args.path) argSummary = `Path: ${args.path}`;
-  else argSummary = JSON.stringify(args).slice(0, 60);
+  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?.(); }
+    if (ch === "y") onApprove?.();
+    else if (ch === "n" || key.escape) onDeny?.();
+    else if (ch === "d") onDryRun?.();
   });
 
   return React.createElement(
@@ -256,181 +592,351 @@ function ApprovalDialog({ action, onApprove, onDeny, onDryRun }) {
       paddingX: 2,
       paddingY: 1,
       marginY: 1,
+      marginX: 2,
     },
     React.createElement(Text, { bold: true, color: "yellow" }, "⚠️  Permission Required"),
-    React.createElement(Text, {}, ""),
-    React.createElement(
-      Box, {},
+    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, { bold: true }, action?.toolName ?? "?")),
+    argSummary ? React.createElement(Box, {},
       React.createElement(Text, { dimColor: true }, "Action:  "),
-      React.createElement(Text, {}, argSummary),
-    ) : null,
-    React.createElement(
-      Box, {},
+      React.createElement(Text, {}, argSummary)) : null,
+    React.createElement(Box, {},
       React.createElement(Text, { dimColor: true }, "Risk:    "),
-      React.createElement(Text, { bold: true, color: riskColor }, risk),
-    ),
-    React.createElement(Text, {}, ""),
-    React.createElement(
-      Box, { gap: 2 },
+      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 first"),
-    ),
+      React.createElement(Text, { color: "cyan", bold: true }, "[D] Dry-run")),
   );
 }
 
-// -----------------------------------------------------------------------
-// Status Bar (enhanced)
-// -----------------------------------------------------------------------
-
-function StatusBar({ provider, model, workstream, tokens, cost, permMode, pendingApprovals, auditCount, workMdLoaded }) {
-  const providerLabel = PROVIDERS[provider]?.label ?? provider ?? "?";
-  const costStr = cost > 0 ? `$${cost.toFixed(4)}` : "$0.0000";
-  const tokStr = tokens > 0 ? `${tokens}t` : "0t";
-  const permIcon = permMode === "approve" ? "🔐" : permMode === "notify" ? "📋" : "✅";
+// ─── Help Overlay ─────────────────────────────────────────────────────────────
 
-  return React.createElement(
-    Box, { paddingX: 1, backgroundColor: "blue", width: "100%", flexWrap: "wrap" },
-    React.createElement(Text, { color: "white", bold: true }, "🌿 Wispy"),
-    React.createElement(Text, { color: "white" }, "  "),
-    React.createElement(Text, { color: "cyan" }, providerLabel),
-    React.createElement(Text, { color: "white" }, " / "),
-    React.createElement(Text, { color: "yellow" }, model ?? "?"),
-    React.createElement(Text, { color: "white" }, "  ·  ws: "),
-    React.createElement(Text, { color: "green" }, workstream ?? "default"),
-    workMdLoaded ? React.createElement(Text, { color: "green" }, " 📝") : null,
-    React.createElement(Text, { color: "white" }, "  ·  "),
-    React.createElement(Text, { color: "white", dimColor: true }, `${tokStr} ${costStr}`),
-    React.createElement(Text, { color: "white" }, "  ·  "),
-    React.createElement(Text, { color: "white" }, `${permIcon} ${permMode ?? "auto"}`),
-    pendingApprovals > 0
-      ? React.createElement(Text, { color: "yellow", bold: true }, `  ⚠️ ${pendingApprovals} pending`)
-      : null,
-    auditCount > 0
-      ? React.createElement(Text, { dimColor: true, color: "white" }, `  ${auditCount} events`)
-      : null,
-  );
-}
+function HelpOverlay({ onClose }) {
+  useInput((input, key) => {
+    if (input === "?" || input === "q" || key.escape) onClose?.();
+  });
 
-// -----------------------------------------------------------------------
-// Tool line & Message components
-// -----------------------------------------------------------------------
+  const shortcuts = [
+    ["Tab", "Switch view (chat/overview/agents/memory/audit/settings)"],
+    ["1-9", "Switch workstream by number"],
+    ["n", "New workstream (in chat: prompts for name)"],
+    ["o", "Overview view"],
+    ["a", "Agents view"],
+    ["m", "Memory view"],
+    ["u", "Audit view"],
+    ["s", "Settings view"],
+    ["t", "Toggle timeline expansion"],
+    ["Ctrl+L", "Clear chat"],
+    ["q / Ctrl+C", "Quit"],
+    ["?", "Toggle this help"],
+    ["/help", "Commands help (in input)"],
+    ["/model <n>", "Switch model"],
+    ["/clear", "Clear conversation"],
+    ["/overview", "Overview view"],
+  ];
 
-function ToolLine({ name, args, result }) {
-  const argsStr = Object.values(args ?? {}).join(", ").slice(0, 40);
-  const status = result ? (result.success ? "✅" : "❌") : "⏳";
   return React.createElement(
-    Box, { paddingLeft: 2 },
-    React.createElement(Text, { color: "cyan", dimColor: true }, `${status} 🔧 ${name}`),
-    React.createElement(Text, { dimColor: true }, `(${argsStr})`),
+    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(15)),
+      React.createElement(Text, { dimColor: true }, desc),
+    )),
+    React.createElement(Box, { height: 1 }),
+    React.createElement(Text, { dimColor: true }, "Press ? or q to close"),
   );
 }
 
-function Message({ msg }) {
-  if (msg.role === "user") {
-    return React.createElement(
-      Box, { flexDirection: "column", paddingLeft: 1 },
-      React.createElement(Box, {},
-        React.createElement(Text, { color: "green", bold: true }, "› "),
-        React.createElement(Text, { color: "white" }, msg.content)));
-  }
-  if (msg.role === "tool_call") {
-    return React.createElement(
-      Box, { flexDirection: "column" },
-      React.createElement(ToolLine, { name: msg.name, args: msg.args, result: msg.result }),
-      msg.receipt ? React.createElement(ReceiptView, { receipt: msg.receipt }) : null,
-    );
-  }
-  if (msg.role === "assistant") {
-    return React.createElement(
-      Box, { flexDirection: "column", paddingLeft: 1, marginTop: 0 },
-      React.createElement(Box, { flexDirection: "column" },
-        React.createElement(Text, { color: "cyan", bold: true }, "🌿 "),
-        ...renderMarkdown(msg.content)),
-      React.createElement(Box, { height: 1 }));
-  }
-  return null;
-}
+// ─── Input Area ───────────────────────────────────────────────────────────────
 
-// -----------------------------------------------------------------------
-// Input Area
-// -----------------------------------------------------------------------
+function InputArea({ value, onChange, onSubmit, loading, workstream, view }) {
+  const prompt = `${workstream} › `;
+  const placeholder = loading
+    ? "waiting for response..."
+    : view !== "chat"
+    ? `${view} mode — press Tab for chat`
+    : "Type a message… (/help for commands)";
 
-function InputArea({ value, onChange, onSubmit, loading }) {
   return React.createElement(
-    Box, { borderStyle: "single", borderColor: loading ? "yellow" : "green", paddingX: 1 },
+    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" }, "  thinking..."))
+          React.createElement(Text, { color: "yellow" }, `  ${prompt}thinking...`))
       : React.createElement(Box, {},
-          React.createElement(Text, { color: "green" }, "› "),
+          React.createElement(Text, { color: view === "chat" ? "green" : "gray" }, prompt),
           React.createElement(TextInput, {
             value, onChange, onSubmit,
-            placeholder: "Type a message... (Ctrl+C to exit, /help for commands)",
-          })));
+            placeholder,
+          })),
+  );
 }
 
-// -----------------------------------------------------------------------
-// Main App Component
-// -----------------------------------------------------------------------
+// ─── 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 []; }
+}
 
-function WispyTUI({ engine }) {
+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 work.md
+    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);
+
+  // 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 state
-  const [pendingApproval, setPendingApproval] = useState(null); // { action, resolve }
-  const [actionTimeline, setActionTimeline] = useState([]);
-  const [auditCount, setAuditCount] = useState(0);
-  const [workMdLoaded, setWorkMdLoaded] = useState(false);
+  // Trust UX
+  const [pendingApproval, setPendingApproval] = useState(null);
+  const [timeline, setTimeline] = useState([]);
 
-  // Conversation history for persistence
-  const conversationRef = useRef([]);
+  // Sidebar data
+  const [agents, setAgents] = useState([]);
+  const [memoryFiles, setMemoryFiles] = useState([]);
+  const [memoryQuery, setMemoryQuery] = useState("");
+  const [cronCount, setCronCount] = useState(0);
+  const [userModelLoaded, setUserModelLoaded] = useState(false);
+
+  // Overview data
+  const [overviewData, setOverviewData] = useState({});
+
+  // Refs
   const approvalResolverRef = useRef(null);
+  const conversationRef = useRef([]);
+  const engineRef = useRef(engine);
+
+  // ── 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(),
+      ]);
+
+      // Make sure active workstream is in list
+      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"));
+    };
+    loadAll();
+
+    // Refresh periodically
+    const interval = setInterval(loadAll, 15_000);
+    return () => clearInterval(interval);
+  }, [initialWorkstream]);
+
+  // ── Load overview data ──
+  useEffect(() => {
+    const refresh = async () => {
+      const data = await loadOverviewData(workstreams);
+      setOverviewData(data);
+    };
+    refresh();
+    const interval = setInterval(refresh, 20_000);
+    return () => clearInterval(interval);
+  }, [workstreams]);
 
-  // Wire harness events to TUI state
+  // ── 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"
+        ).slice(-5));
+      } 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 ?? "";
-      setActionTimeline(prev => [...prev.slice(-20), {
-        toolName,
-        args,
-        primaryArg,
+      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,
+        success: null, denied: false, dryRun: false,
       }]);
-      setAuditCount(c => c + 1);
     };
 
     const onComplete = ({ toolName, receipt }) => {
-      setActionTimeline(prev => {
+      setTimeline(prev => {
         const updated = [...prev];
-        // Update the last entry for this tool
         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,
-              approved: receipt?.approved,
-              dryRun: receipt?.dryRun ?? false,
-            };
+            updated[i] = { ...updated[i], success: receipt?.success ?? true, dryRun: receipt?.dryRun ?? false };
             break;
           }
         }
@@ -438,8 +944,8 @@ function WispyTUI({ engine }) {
       });
     };
 
-    const onDenied = ({ toolName, receipt }) => {
-      setActionTimeline(prev => {
+    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) {
@@ -454,7 +960,6 @@ function WispyTUI({ engine }) {
     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);
@@ -462,14 +967,7 @@ function WispyTUI({ engine }) {
     };
   }, [engine]);
 
-  // Check if work.md is loaded
-  useEffect(() => {
-    engine._loadWorkMd?.().then(content => {
-      setWorkMdLoaded(!!content);
-    }).catch(() => {});
-  }, [engine]);
-
-  // Wire approval handler to TUI
+  // ── Wire approval handler ──
   useEffect(() => {
     engine.permissions.setApprovalHandler(async (action) => {
       return new Promise((resolve) => {
@@ -477,12 +975,69 @@ function WispyTUI({ engine }) {
         setPendingApproval({ action });
       });
     });
-
-    return () => {
-      engine.permissions.setApprovalHandler(null);
-    };
+    return () => { engine.permissions.setApprovalHandler(null); };
   }, [engine]);
 
+  // ── Keyboard shortcuts ──
+  useInput((input, key) => {
+    // Don't intercept when typing in input or approval dialog is up
+    if (pendingApproval || showHelp) return;
+
+    // View switches
+    if (key.tab && !loading) {
+      const idx = VIEWS.indexOf(view);
+      setView(VIEWS[(idx + 1) % VIEWS.length]);
+      return;
+    }
+    if (input === "?" && !inputValue) { setShowHelp(true); 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; }
+
+    // Ctrl+L = clear chat
+    if (key.ctrl && input === "l") {
+      conversationRef.current = [];
+      setMessages([]);
+      saveConversation(activeWorkstream, []).catch(() => {});
+      return;
+    }
+
+    // Workstream number switch
+    if (/^[1-9]$/.test(input) && !inputValue && !loading) {
+      const idx = parseInt(input) - 1;
+      if (idx < workstreams.length) {
+        switchWorkstream(workstreams[idx]);
+      }
+      return;
+    }
+
+    // q = quit (only when input is empty)
+    if (input === "q" && !inputValue && !loading) {
+      exit();
+      process.exit(0);
+    }
+  });
+
+  // ── 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;
@@ -496,83 +1051,86 @@ function WispyTUI({ engine }) {
   }, []);
 
   const handleDryRun = useCallback(async () => {
-    // Deny the real execution, then re-run as dry-run (shown as a system message)
     const action = pendingApproval?.action;
     approvalResolverRef.current?.(false);
     approvalResolverRef.current = null;
     setPendingApproval(null);
-
     if (action) {
-      // Show dry-run result inline
-      try {
-        const { simulateDryRun } = await import("../core/harness.mjs").catch(() => ({}));
-        const preview = simulateDryRun
-          ? simulateDryRun(action.toolName, action.args ?? {})
-          : { preview: `Would execute: ${action.toolName}` };
-        setMessages(prev => [...prev, {
-          role: "assistant",
-          content: `👁️ **Dry-run preview**\n\n\`\`\`\n${preview.preview ?? JSON.stringify(preview, null, 2)}\n\`\`\`\n\n*(Real execution was denied. Approve to run for real.)* 🌿`,
-        }]);
-      } catch {}
+      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*(Real execution denied. Approve to run.)* 🌿`,
+      }]);
     }
   }, [pendingApproval]);
 
+  // ── Message submit ──
   const handleSubmit = useCallback(async (value) => {
-    // If there's a pending approval, don't submit new messages
     if (pendingApproval) return;
-
     const input = value.trim();
     if (!input || loading) return;
     setInputValue("");
 
+    // Switch to chat if not there
+    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([]);
-        await saveConversation([]);
-        setMessages([{ role: "assistant", content: "Conversation cleared. 🌿" }]);
+        setMessages([{ role: "system_info", content: "Conversation cleared. 🌿" }]);
+        await saveConversation(activeWorkstream, []);
         return;
       }
       if (cmd === "/cost") {
-        setMessages(prev => [...prev, { role: "assistant", content: `Session: ${totalTokens} tokens (~$${totalCost.toFixed(4)}) 🌿` }]);
+        setMessages(prev => [...prev, { role: "system_info", content: `${totalTokens}t · $${totalCost.toFixed(4)}` }]);
         return;
       }
       if (cmd === "/timeline") {
-        const tl = actionTimeline.map(e => `- ${e.toolName}: ${e.success ? "✅" : e.denied ? "❌" : "⏳"}`).join("\n");
-        setMessages(prev => [...prev, { role: "assistant", content: `**Action Timeline:**\n${tl || "(empty)"} 🌿` }]);
+        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: "assistant", content: `Model changed to ${parts[1]} 🌿` }]);
+        setMessages(prev => [...prev, { role: "system_info", content: `Model → ${parts[1]} 🌿` }]);
         return;
       }
-      if (cmd === "/dryrun") {
-        setMessages(prev => [...prev, { role: "assistant", content: "Dry-run mode is set per tool call. Use `/dryrun <toolname> <json_args>` to simulate. 🌿" }]);
+      if (cmd === "/workstream" && parts[1]) {
+        await switchWorkstream(parts[1]);
+        return;
+      }
+      if (cmd === "/help") {
+        setShowHelp(true);
+        return;
+      }
+      if (cmd === "/ws" && parts[1]) {
+        await switchWorkstream(parts[1]);
         return;
       }
     }
 
-    setMessages(prev => [...prev, { role: "user", content: input }]);
-    conversationRef.current.push({ role: "user", content: input });
+    // Add user message
+    const userMsg = { role: "user", content: input };
+    setMessages(prev => [...prev, userMsg]);
+    conversationRef.current.push(userMsg);
     setLoading(true);
 
     try {
-      let lastReceipt = null;
-
       const result = await engine.processMessage(null, input, {
         onChunk: () => {},
         onToolCall: (name, args) => {
-          const toolMsg = { role: "tool_call", name, args, result: null, receipt: null };
-          setMessages(prev => [...prev, toolMsg]);
+          setMessages(prev => [...prev, { role: "tool_call", name, args, result: null, receipt: null }]);
         },
         onToolResult: (name, toolResult) => {
-          // Update the last tool_call message with result
           setMessages(prev => {
             const updated = [...prev];
             for (let i = updated.length - 1; i >= 0; i--) {
@@ -585,34 +1143,26 @@ function WispyTUI({ engine }) {
           });
         },
         onReceipt: (receipt) => {
-          lastReceipt = receipt;
-          // Attach receipt to the last matching tool_call message
-          if (receipt?.toolName) {
-            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;
-                }
+          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;
-            });
-          }
-          if (receipt?.diff?.unified) {
-            setWorkMdLoaded(!!engine._workMdContent);
-          }
+            }
+            return updated;
+          });
         },
         noSave: true,
       });
 
       const responseText = result.content;
 
-      // Update token tracking
-      const { input: inputToks = 0, output: outputToks = 0 } = engine.providers.sessionTokens;
+      // Update token/cost tracking
+      const { input: inputToks = 0, output: outputToks = 0 } = engine.providers.sessionTokens ?? {};
       setTotalTokens(inputToks + outputToks);
-
-      // Estimate cost
       const MODEL_PRICING = {
         "gemini-2.5-flash": { input: 0.15, output: 0.60 },
         "gemini-2.5-pro":   { input: 1.25, output: 10.0 },
@@ -621,81 +1171,111 @@ function WispyTUI({ engine }) {
         "gpt-4.1":          { input: 2.0, output: 8.0 },
         "llama-3.3-70b-versatile": { input: 0.59, output: 0.79 },
         "deepseek-chat":    { input: 0.27, output: 1.10 },
-        "llama3.2":         { input: 0, output: 0 },
       };
       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);
 
-      conversationRef.current.push({ role: "assistant", content: responseText });
-      setMessages(prev => [...prev, { role: "assistant", content: responseText }]);
-      await saveConversation(conversationRef.current.filter(m => m.role !== "system"));
+      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) {
-      setMessages(prev => [...prev, { role: "assistant", content: `❌ Error: ${err.message.slice(0, 200)} 🌿` }]);
+      const errMsg = { role: "assistant", content: `❌ Error: ${err.message.slice(0, 200)} 🌿` };
+      setMessages(prev => [...prev, errMsg]);
     } finally {
       setLoading(false);
     }
-  }, [loading, model, totalTokens, totalCost, engine, exit, pendingApproval, actionTimeline]);
+  }, [loading, model, totalCost, totalTokens, engine, exit, pendingApproval, activeWorkstream, view, switchWorkstream]);
 
-  const displayMessages = messages.slice(-30);
-  // Determine permission mode from engine's policies
+  // ── Layout computation ──
+  const showSidebar = termWidth >= 80;
+  const mainWidth = showSidebar ? termWidth - SIDEBAR_WIDTH - 2 : termWidth;
   const permMode = engine.permissions?.getPolicy?.("run_command") ?? "approve";
 
+  // ── Render ──
+  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, mainWidth })
+    : view === "agents"
+    ? React.createElement(AgentsView, { agents })
+    : 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, {
-      provider: engine.provider,
-      model,
-      workstream: ACTIVE_WORKSTREAM,
+      workstream: activeWorkstream,
+      model, provider,
+      permMode,
+      syncStatus,
       tokens: totalTokens,
       cost: totalCost,
-      permMode,
       pendingApprovals: pendingApproval ? 1 : 0,
-      auditCount,
-      workMdLoaded,
+      view,
+      termWidth,
     }),
 
-    // Message list
+    // Main body
     React.createElement(
-      Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, overflowY: "hidden" },
-      displayMessages.length === 0
-        ? React.createElement(Box, { marginY: 1 },
-            React.createElement(Text, { dimColor: true }, "  🌿 Type a message to start chatting. /help for commands, /timeline for action history."))
-        : displayMessages.map((msg, i) => React.createElement(Message, { key: i, msg })),
+      Box, { flexDirection: "row", flexGrow: 1 },
+
+      // Left sidebar
+      showSidebar
+        ? React.createElement(Sidebar, {
+            workstreams,
+            activeWorkstream,
+            agents,
+            memoryCount: memoryFiles.length,
+            userModelLoaded,
+            cronCount,
+            syncStatus,
+            onSelectWorkstream: switchWorkstream,
+          })
+        : null,
+
+      // Main view
+      React.createElement(
+        Box, { flexDirection: "column", flexGrow: 1 },
+        mainContent,
+      ),
     ),
 
-    // Action timeline (always visible at bottom, above input)
-    actionTimeline.length > 0
-      ? React.createElement(ActionTimeline, { events: actionTimeline })
-      : null,
-
-    // Approval dialog (shown above input when pending)
-    pendingApproval
-      ? React.createElement(ApprovalDialog, {
-          action: pendingApproval.action,
-          onApprove: handleApprove,
-          onDeny: handleDeny,
-          onDryRun: handleDryRun,
-        })
+    // Timeline bar (only in chat view, last 3 events)
+    (showTimeline || view === "chat") && timeline.length > 0
+      ? React.createElement(TimelineBar, { events: timeline })
       : null,
 
-    // Input area (hidden when approval dialog is shown)
-    !pendingApproval
+    // Input area (always at bottom; hidden when help shown)
+    !showHelp
       ? React.createElement(InputArea, {
           value: inputValue,
           onChange: setInputValue,
           onSubmit: handleSubmit,
           loading,
+          workstream: activeWorkstream,
+          view,
         })
       : null,
   );
 }
 
-// -----------------------------------------------------------------------
-// Entry point
-// -----------------------------------------------------------------------
+// ─── Entry point ──────────────────────────────────────────────────────────────
 
 async function main() {
   if (!process.stdin.isTTY) {
@@ -703,8 +1283,7 @@ async function main() {
     process.exit(1);
   }
 
-  // Initialize engine
-  const engine = new WispyEngine({ workstream: ACTIVE_WORKSTREAM });
+  const engine = new WispyEngine({ workstream: INITIAL_WORKSTREAM });
   const initResult = await engine.init();
 
   if (!initResult) {
@@ -712,10 +1291,14 @@ async function main() {
     process.exit(1);
   }
 
+  // Clear screen
   process.stdout.write("\x1b[2J\x1b[H");
 
   const { waitUntilExit } = render(
-    React.createElement(WispyTUI, { engine }),
+    React.createElement(WispyWorkspaceApp, {
+      engine,
+      initialWorkstream: INITIAL_WORKSTREAM,
+    }),
     { exitOnCtrlC: true }
   );
 
@@ -725,5 +1308,6 @@ async function main() {
 
 main().catch(err => {
   console.error("TUI error:", err.message);
+  if (process.env.WISPY_DEBUG) console.error(err.stack);
   process.exit(1);
 });