wispy-cli 2.7.17 → 2.7.19

package/lib/wispy-tui.mjs

@@ -1,16 +1,16 @@
 #!/usr/bin/env node
 /**
- * wispy-tui.mjs — Workspace OS TUI for Wispy v2.0
+ * wispy-tui.mjs — Workspace OS TUI for Wispy v2.7+
  *
  * Multi-panel workspace interface:
- *   - Left sidebar: Workstreams, Agents, Memory, Cron, Sync
+ *   - 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, Diff views
+ *   - Overlays: Approval dialogs, Help, Command Palette
  */
 
-import React, { useState, useEffect, useRef, useCallback, useReducer } from "react";
-import { render, Box, Text, useApp, Newline, useInput, useStdout } from "ink";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { render, Box, Text, useApp, useInput, useStdout } from "ink";
 import Spinner from "ink-spinner";
 import TextInput from "ink-text-input";
 
@@ -19,9 +19,21 @@ 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);
@@ -34,13 +46,13 @@ const INITIAL_WORKSTREAM =
 // ─── Constants ───────────────────────────────────────────────────────────────
 
 const VIEWS = ["chat", "overview", "agents", "memory", "audit", "settings"];
-const SIDEBAR_WIDTH = 16;
+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-agent]", spawn_agent: "[agent]", memory_save: "[save]",
+  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]",
 };
@@ -64,6 +76,13 @@ function fmtRelTime(iso) {
   } 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;
@@ -82,13 +101,13 @@ function renderMarkdown(text, maxWidth = 60) {
     if (line.startsWith("- ") || line.startsWith("* ")) {
       return React.createElement(Box, { key: i },
         React.createElement(Text, { color: "green" }, "• "),
-        React.createElement(Text, null, line.slice(2)));
+        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, null, match[2]));
+        React.createElement(Text, { wrap: "wrap" }, match[2]));
     }
     if (line.includes("**")) {
       const parts = line.split(/(\*\*[^*]+\*\*)/g);
@@ -109,119 +128,111 @@ function renderMarkdown(text, maxWidth = 60) {
 // ─── Status Bar ──────────────────────────────────────────────────────────────
 
 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, { paddingX: 1, backgroundColor: "green", width: "100%" },
-    React.createElement(Text, { color: "black", bold: true }, "🌿 Wispy"),
+    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,
+    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`)
+      ? React.createElement(Text, { color: "black", bold: true }, ` ─ ! ${pendingApprovals} pending`)
       : null,
-    React.createElement(Text, { color: "black", dimColor: true }, `  [${viewLabel}]  ? for help`),
+    React.createElement(Text, { color: "black", dimColor: true }, `  [${view.toUpperCase()}]  ? for help`),
   );
 }
 
 // ─── 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 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";
-
+function Sidebar({ workstreams, activeWorkstream, activeAgent, agents, memoryCount, userModelLoaded, cronCount, syncStatus, browserStatus, budgetSpent, maxBudget, onSelectWorkstream }) {
   const rows = [];
 
-  // Section: STREAMS
-  rows.push(React.createElement(
-    Box, { key: "streams-header", paddingLeft: 1 },
-    React.createElement(Text, { bold: true, dimColor: true }, "STREAMS"),
-  ));
+  const divider = (key) => React.createElement(Box, {
+    key, borderStyle: "single",
+    borderTop: false, borderRight: false, borderLeft: false, borderBottom: true,
+    borderColor: "gray", width: SIDEBAR_WIDTH,
+  });
 
-  workstreams.forEach((ws, i) => {
+  // ── 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 },
+    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)}`),
+        `${isActive ? "●" : "◯"} ${truncate(ws, SIDEBAR_WIDTH - 3)}`),
     ));
   });
 
-  // 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"),
-  ));
+  // ── 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: "no-agents", paddingLeft: 1 },
+    rows.push(React.createElement(Box, { key: "sub-none", 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)}`),
+      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)),
       ));
     });
   }
 
-  // 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 ? "✅" : "❌"}`),
+  // ── 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}`),
   ));
 
-  // 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`),
+  // ── 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"),
+    ));
+  }
 
-  // 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"),
+  // ── 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: "sync-status", paddingLeft: 1 },
-    React.createElement(Text, {}, syncIcon),
+  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(
@@ -241,18 +252,19 @@ function Sidebar({ workstreams, activeWorkstream, agents, memoryCount, userModel
 // ─── Chat View ───────────────────────────────────────────────────────────────
 
 function ToolLine({ name, args, receipt }) {
-  const icon = TOOL_ICONS[name] ?? "🔧";
+  const icon = TOOL_ICONS[name] ?? "[tool]";
   const primaryArg = args?.path ?? args?.command ?? args?.query ?? args?.task ?? args?.key ?? "";
   const statusIcon = receipt
-    ? (receipt.success ? "✅" : "❌")
-    : "⏳";
+    ? (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: "cyan", dimColor: true },
-        `${statusIcon} ${icon} ${name}`),
+      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,
@@ -280,7 +292,7 @@ function ChatMessage({ msg, mainWidth }) {
     return React.createElement(
       Box, { flexDirection: "column", paddingLeft: 1, marginTop: 1 },
       React.createElement(Box, {},
-        React.createElement(Text, { color: "green", bold: true }, "🧑 "),
+        React.createElement(Text, { color: "green", bold: true }, "you › "),
         React.createElement(Text, { color: "white", wrap: "wrap" }, msg.content)));
   }
   if (msg.role === "tool_call") {
@@ -289,7 +301,7 @@ function ChatMessage({ msg, mainWidth }) {
   if (msg.role === "assistant") {
     return React.createElement(
       Box, { flexDirection: "column", paddingLeft: 1, marginTop: 1 },
-      React.createElement(Text, { color: "cyan", bold: true }, "🤖"),
+      React.createElement(Text, { color: "cyan", bold: true }, "wispy ›"),
       React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
         ...renderMarkdown(msg.content, mainWidth - 4)),
     );
@@ -310,7 +322,7 @@ function ChatView({ messages, loading, pendingApproval, onApprove, onDeny, onDry
     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 }, "Wispy — AI workspace assistant"),
           React.createElement(Text, { dimColor: true }, "Type a message to start. ? for help."),
         )
       : React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
@@ -336,24 +348,36 @@ function ChatView({ messages, loading, pendingApproval, onApprove, onDeny, onDry
 
 // ─── Overview View ────────────────────────────────────────────────────────────
 
-function OverviewView({ workstreams, activeWorkstream, overviewData, mainWidth }) {
+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 }),
-    ...workstreams.map((ws, i) => {
+    // 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" }, ws),
-          React.createElement(Text, { dimColor: true }, "  "),
+          React.createElement(Text, { bold: true, color: isActive ? "green" : "white" },
+            `${isActive ? "●" : "◯"} ${ws}`),
           data.lastActivity
-            ? React.createElement(Text, { dimColor: true }, `Last: ${fmtRelTime(data.lastActivity)}`)
+            ? React.createElement(Text, { dimColor: true }, `  ${fmtRelTime(data.lastActivity)}`)
             : null,
           data.agents > 0
-            ? React.createElement(Text, { color: "yellow" }, `  Agents: ${data.agents} running`)
+            ? React.createElement(Text, { color: "yellow" }, `  ${data.agents} agents`)
             : null,
         ),
         data.lastMessage
@@ -366,7 +390,7 @@ function OverviewView({ workstreams, activeWorkstream, overviewData, mainWidth }
         data.workMd
           ? React.createElement(
               Box, { paddingLeft: 2 },
-              React.createElement(Text, { dimColor: true }, "└── work.md: "),
+              React.createElement(Text, { dimColor: true }, "└── "),
               React.createElement(Text, { dimColor: true, italic: true }, `"${truncate(data.workMd, mainWidth - 20)}"`),
             )
           : null,
@@ -377,7 +401,19 @@ function OverviewView({ workstreams, activeWorkstream, overviewData, mainWidth }
 
 // ─── Agents View ─────────────────────────────────────────────────────────────
 
-function AgentsView({ agents }) {
+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";
@@ -385,36 +421,67 @@ function AgentsView({ agents }) {
     return "red";
   };
   const statusIcon = (s) => {
-    if (s === "running") return "🟢";
-    if (s === "pending") return "🟡";
-    if (s === "completed" || s === "done") return "✅";
-    return "❌";
+    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 },
-    React.createElement(Text, { bold: true, color: "green" }, "Active Agents"),
+    // ── 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 agents running.")
+      ? React.createElement(Text, { dimColor: true }, "No sub-agents recorded.")
       : 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)}`)
+          ...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,
-            ),
-            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,
+            );
+          })),
   );
 }
 
@@ -474,15 +541,15 @@ function AuditView({ timeline, mainWidth }) {
       ? 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 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, 30)}` : "";
+            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, { dimColor: true }, `${icon} `),
               React.createElement(Text, { color: "cyan" }, evt.toolName),
               React.createElement(Text, { dimColor: true }, arg),
               React.createElement(Text, { color }, ` ${statusIcon}`),
@@ -495,37 +562,117 @@ function AuditView({ timeline, mainWidth }) {
 
 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();
-        setConfig(cfg);
+        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 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")],
-  ] : [];
+  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 }),
-    ...rows.map(([k, v], i) => React.createElement(
-      Box, { key: i, marginBottom: 0 },
-      React.createElement(Text, { color: "cyan", bold: true }, `${k}: `),
-      React.createElement(Text, {}, v),
-    )),
+
+    // ── 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 }, "Commands: /model <name>  /clear  /timeline  /cost  /help"),
+    React.createElement(Text, { dimColor: true },
+      "Keys: /model <n>  /trust <level>  /agent <n>  /features enable <n>  /cost"),
   );
 }
 
@@ -546,15 +693,15 @@ function TimelineBar({ events }) {
       paddingX: 1,
     },
     ...last.map((evt, i) => {
-      const icon = TOOL_ICONS[evt.toolName] ?? "🔧";
-      const statusIcon = evt.denied ? "❌" : evt.dryRun ? "👁️" : evt.success === null ? "⏳" : evt.success ? "✅" : "❌";
+      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, {}, `${icon} `),
+        React.createElement(Text, { dimColor: true }, `${icon} `),
         React.createElement(Text, { color: "cyan" }, evt.toolName),
         React.createElement(Text, { dimColor: true }, arg),
         React.createElement(Text, { color }, ` ${statusIcon}`),
@@ -596,14 +743,14 @@ function ApprovalDialog({ action, onApprove, onDeny, onDryRun }) {
       marginY: 1,
       marginX: 2,
     },
-    React.createElement(Text, { bold: true, color: "yellow" }, "⚠️  Permission Required"),
+    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, {}, argSummary)) : null,
+      React.createElement(Text, { wrap: "wrap" }, argSummary)) : null,
     React.createElement(Box, {},
       React.createElement(Text, { dimColor: true }, "Risk:    "),
       React.createElement(Text, { bold: true, color: riskColor }, risk)),
@@ -623,22 +770,25 @@ function HelpOverlay({ onClose }) {
   });
 
   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)"],
+    ["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 expansion"],
-    ["Ctrl+L", "Clear chat"],
-    ["q / Ctrl+C", "Quit"],
+    ["t", "Toggle timeline"],
     ["?", "Toggle this help"],
-    ["/help", "Commands help (in input)"],
-    ["/model <n>", "Switch model"],
+    ["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"],
-    ["/overview", "Overview view"],
+    ["/ws <name>", "Switch workstream"],
   ];
 
   return React.createElement(
@@ -651,12 +801,12 @@ function HelpOverlay({ onClose }) {
       marginY: 1,
       marginX: 2,
     },
-    React.createElement(Text, { bold: true, color: "cyan" }, "🌿 Wispy Keyboard Shortcuts"),
+    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(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"),
@@ -670,46 +820,32 @@ function CommandPalette({ query, onSelect, onDismiss }) {
 
   const matches = filterCommands(query, COMMANDS, 8);
 
-  // Reset selection when query changes
   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 (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));
-  const width = Math.min(60, maxCmdLen + 30);
 
   return React.createElement(
     Box, {
-      flexDirection: 'column',
-      borderStyle: 'single',
-      borderColor: 'cyan',
+      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'),
+      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;
@@ -717,11 +853,12 @@ function CommandPalette({ query, onSelect, onDismiss }) {
       return React.createElement(
         Box, { key: cmd.cmd },
         isActive
-          ? React.createElement(Text, { color: 'black', backgroundColor: 'cyan' },
+          ? 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),
+              React.createElement(Text, { color: "cyan" }, ` ${cmd.cmd}`),
+              React.createElement(Text, { dimColor: true },
+                " ".repeat(Math.max(1, maxCmdLen - cmd.cmd.length + 2)) + cmd.desc),
             ),
       );
     }),
@@ -735,8 +872,8 @@ function InputArea({ value, onChange, onSubmit, loading, workstream, view }) {
   const placeholder = loading
     ? "waiting for response..."
     : view !== "chat"
-    ? `${view} mode — press Tab for chat`
-    : "Type a message… (/help for commands)";
+    ? `${view} mode — Tab to switch to chat`
+    : "Type a message… (/help for commands | Tab to switch views)";
 
   return React.createElement(
     Box, {
@@ -849,7 +986,6 @@ async function loadOverviewData(workstreams) {
       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");
@@ -884,7 +1020,7 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
   const [inputValue, setInputValue] = useState("");
   const [loading, setLoading] = useState(false);
 
-  // Command palette (autocomplete)
+  // Command palette
   const [showPalette, setShowPalette] = useState(false);
 
   // Engine stats
@@ -904,6 +1040,9 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
   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({});
@@ -911,7 +1050,6 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
   // Refs
   const approvalResolverRef = useRef(null);
   const conversationRef = useRef([]);
-  const engineRef = useRef(engine);
 
   // ── Terminal resize ──
   useEffect(() => {
@@ -941,7 +1079,6 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
         loadSyncStatus(),
       ]);
 
-      // Make sure active workstream is in list
       const wsSet = new Set(wsList);
       wsSet.add(initialWorkstream);
       const wsFinal = Array.from(wsSet);
@@ -951,15 +1088,28 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       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();
-
-    // Refresh periodically
     const interval = setInterval(loadAll, 15_000);
     return () => clearInterval(interval);
-  }, [initialWorkstream]);
+  }, [initialWorkstream, engine]);
 
-  // ── Load overview data ──
+  // ── Load overview data — refresh when view switches to overview ──
   useEffect(() => {
     const refresh = async () => {
       const data = await loadOverviewData(workstreams);
@@ -970,6 +1120,27 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     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 () => {
@@ -978,8 +1149,8 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
         const raw = await readFile(agentsFile, "utf8");
         const all = JSON.parse(raw);
         setAgents(all.filter(a =>
-          a.status === "running" || a.status === "pending"
-        ).slice(-5));
+          a.status === "running" || a.status === "pending" || a.status === "completed" || a.status === "done"
+        ).slice(-10));
       } catch { setAgents([]); }
     };
     loadAgents();
@@ -1050,16 +1221,20 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
 
   // ── 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 === "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; }
@@ -1067,7 +1242,6 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     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([]);
@@ -1075,8 +1249,8 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       return;
     }
 
-    // Workstream number switch
-    if (/^[1-9]$/.test(input) && !inputValue && !loading) {
+    // 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]);
@@ -1084,7 +1258,6 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       return;
     }
 
-    // q = quit (only when input is empty)
     if (input === "q" && !inputValue && !loading) {
       exit();
       process.exit(0);
@@ -1128,24 +1301,19 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     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*(Real execution denied. Approve to run.)* 🌿`,
+        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: show when typing slash commands ──
+  // ── Palette visibility ──
   const handleInputChange = useCallback((val) => {
     setInputValue(val);
-    if (val.startsWith('/') && val.length >= 2) {
-      setShowPalette(true);
-    } else {
-      setShowPalette(false);
-    }
+    setShowPalette(val.startsWith("/") && val.length >= 2);
   }, []);
 
   const handlePaletteSelect = useCallback((cmd) => {
-    // Fill in base command (strip template args like <name>)
-    const base = cmd.replace(/<[^>]+>/g, '').trimEnd();
+    const base = cmd.replace(/<[^>]+>/g, "").trimEnd();
     setInputValue(base);
     setShowPalette(false);
   }, []);
@@ -1162,7 +1330,6 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     setInputValue("");
     setShowPalette(false);
 
-    // Switch to chat if not there
     if (view !== "chat") setView("chat");
 
     // Slash commands
@@ -1173,18 +1340,21 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       if (cmd === "/quit" || cmd === "/exit") { exit(); process.exit(0); return; }
       if (cmd === "/clear") {
         conversationRef.current = [];
-        setMessages([{ role: "system_info", content: "Conversation cleared. 🌿" }]);
+        setMessages([{ role: "system_info", content: "Conversation cleared." }]);
         await saveConversation(activeWorkstream, []);
         return;
       }
       if (cmd === "/cost") {
-        setMessages(prev => [...prev, { role: "system_info", content: `${totalTokens}t · $${totalCost.toFixed(4)}` }]);
-        return;
-      }
-      if (cmd === "/timeline") {
-        setView("audit");
+        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; }
@@ -1193,19 +1363,19 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       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 === "/help") {
-        setShowHelp(true);
+        setMessages(prev => [...prev, { role: "system_info", content: `Model → ${parts[1]}` }]);
         return;
       }
-      if (cmd === "/ws" && parts[1]) {
-        await switchWorkstream(parts[1]);
+      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;
       }
     }
@@ -1255,18 +1425,25 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       // Update token/cost tracking
       const { input: inputToks = 0, output: outputToks = 0 } = engine.providers.sessionTokens ?? {};
       setTotalTokens(inputToks + outputToks);
-      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 },
-        "llama-3.3-70b-versatile": { input: 0.59, output: 0.79 },
-        "deepseek-chat":    { input: 0.27, output: 1.10 },
-      };
-      const pricing = MODEL_PRICING[model] ?? { input: 1.0, output: 3.0 };
-      const cost = (inputToks * pricing.input + outputToks * pricing.output) / 1_000_000;
-      setTotalCost(cost);
+
+      // 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 };
@@ -1274,19 +1451,20 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       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)} 🌿` };
+      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]);
 
-  // ── Layout computation ──
+  // ── 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;
 
-  // ── Render ──
+  // ── Main content ──
   const mainContent = showHelp
     ? React.createElement(HelpOverlay, { onClose: () => setShowHelp(false) })
     : view === "chat"
@@ -1296,9 +1474,9 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
         mainWidth,
       })
     : view === "overview"
-    ? React.createElement(OverviewView, { workstreams, activeWorkstream, overviewData, mainWidth })
+    ? React.createElement(OverviewView, { workstreams, activeWorkstream, overviewData, browserStatus, mainWidth })
     : view === "agents"
-    ? React.createElement(AgentsView, { agents })
+    ? React.createElement(AgentsView, { agents, agentManager: engine?.agentManager })
     : view === "memory"
     ? React.createElement(MemoryView, { memoryFiles, memoryQuery, onQueryChange: setMemoryQuery })
     : view === "audit"
@@ -1327,34 +1505,36 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     React.createElement(
       Box, { flexDirection: "row", flexGrow: 1 },
 
-      // Left sidebar
       showSidebar
         ? React.createElement(Sidebar, {
             workstreams,
             activeWorkstream,
+            activeAgent,
             agents,
             memoryCount: memoryFiles.length,
             userModelLoaded,
             cronCount,
             syncStatus,
+            browserStatus,
+            budgetSpent,
+            maxBudget,
             onSelectWorkstream: switchWorkstream,
           })
         : null,
 
-      // Main view
       React.createElement(
         Box, { flexDirection: "column", flexGrow: 1 },
         mainContent,
       ),
     ),
 
-    // Timeline bar (only in chat view, last 3 events)
+    // Timeline bar
     (showTimeline || view === "chat") && timeline.length > 0
       ? React.createElement(TimelineBar, { events: timeline })
       : null,
 
-    // Command palette (autocomplete) — shown above input when typing /command
-    !showHelp && showPalette && inputValue.startsWith('/')
+    // Command palette
+    !showHelp && showPalette && inputValue.startsWith("/")
       ? React.createElement(CommandPalette, {
           query: inputValue,
           onSelect: handlePaletteSelect,
@@ -1362,7 +1542,7 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
         })
       : null,
 
-    // Input area (always at bottom; hidden when help shown)
+    // Input
     !showHelp
       ? React.createElement(InputArea, {
           value: inputValue,
@@ -1392,7 +1572,6 @@ async function main() {
     process.exit(1);
   }
 
-  // Clear screen
   process.stdout.write("\x1b[2J\x1b[H");
 
   const { waitUntilExit } = render(