@astroanywhere/cli 0.2.0 → 0.2.1

package/dist/tui.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   AstroClient
-} from "./chunk-7H7WD7QX.js";
+} from "./chunk-SYY2HHOY.js";
 
 // src/tui/index.tsx
 import "react";
@@ -12,7 +12,7 @@ import { useMemo, useCallback as useCallback5 } from "react";
 
 // src/tui/components/layout/main-layout.tsx
 import "react";
-import { Box as Box10, useStdout } from "ink";
+import { Box as Box12, useStdout as useStdout3 } from "ink";
 
 // src/tui/components/layout/status-bar.tsx
 import "react";
@@ -20,7 +20,7 @@ import { Box, Text } from "ink";
 
 // src/tui/stores/tui-store.ts
 import { create } from "zustand";
-var PANEL_ORDER = ["projects", "plan", "machines", "output"];
+var PANEL_ORDER = ["projects", "plan", "machines", "output", "chat"];
 var useTuiStore = create((set, get) => ({
   mode: "normal",
   commandBuffer: "",
@@ -32,18 +32,21 @@ var useTuiStore = create((set, get) => ({
   selectedNodeId: null,
   selectedMachineId: null,
   selectedExecutionId: null,
-  scrollIndex: { projects: 0, plan: 0, machines: 0, output: 0 },
+  scrollIndex: { projects: 0, plan: 0, machines: 0, output: 0, chat: 0 },
   showHelp: false,
   showSearch: false,
   showDetail: false,
+  showChat: false,
   detailType: null,
   detailId: null,
   connected: false,
   machineCount: 0,
   todayCost: 0,
+  activeView: "dashboard",
+  paletteIndex: 0,
   lastError: null,
   setMode: (mode) => set({ mode }),
-  setCommandBuffer: (commandBuffer) => set({ commandBuffer }),
+  setCommandBuffer: (commandBuffer) => set({ commandBuffer, paletteIndex: 0 }),
   setSearchQuery: (searchQuery) => set({ searchQuery }),
   setPendingKeys: (pendingKeys) => set({ pendingKeys }),
   focusPanel: (panel) => set({ focusedPanel: panel }),
@@ -113,12 +116,15 @@ var useTuiStore = create((set, get) => ({
   },
   toggleHelp: () => set((s) => ({ showHelp: !s.showHelp, showSearch: false })),
   toggleSearch: () => set((s) => ({ showSearch: !s.showSearch, showHelp: false })),
+  toggleChat: () => set((s) => ({ showChat: !s.showChat })),
   openDetail: (type, id) => set({ showDetail: true, detailType: type, detailId: id, showHelp: false, showSearch: false }),
   closeDetail: () => set({ showDetail: false, detailType: null, detailId: null }),
-  closeOverlays: () => set({ showHelp: false, showSearch: false, showDetail: false, detailType: null, detailId: null }),
+  closeOverlays: () => set({ showHelp: false, showSearch: false, showDetail: false, showChat: false, detailType: null, detailId: null }),
   setConnected: (connected) => set({ connected }),
   setMachineCount: (machineCount) => set({ machineCount }),
   setTodayCost: (todayCost) => set({ todayCost }),
+  setActiveView: (activeView) => set({ activeView }),
+  setPaletteIndex: (paletteIndex) => set({ paletteIndex }),
   setLastError: (lastError) => set({ lastError })
 }));
 
@@ -149,153 +155,42 @@ function truncate(str, maxLen) {
 
 // src/tui/components/layout/status-bar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var VIEW_LABELS = {
+  dashboard: "Dashboard",
+  "plan-gen": "Plan",
+  projects: "Projects",
+  playground: "Playground",
+  output: "Output"
+};
 function StatusBar() {
   const connected = useTuiStore((s) => s.connected);
   const machineCount = useTuiStore((s) => s.machineCount);
   const todayCost = useTuiStore((s) => s.todayCost);
   const lastError = useTuiStore((s) => s.lastError);
+  const activeView = useTuiStore((s) => s.activeView);
   return /* @__PURE__ */ jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [
     /* @__PURE__ */ jsxs(Box, { gap: 2, children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Astro TUI" }),
-      /* @__PURE__ */ jsx(Text, { color: connected ? "green" : "red", children: connected ? "\u25CF connected" : "\u25CB disconnected" }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Astro" }),
+      /* @__PURE__ */ jsx(Text, { color: connected ? "green" : "red", children: connected ? "\u25CF" : "\u25CB" }),
       /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         machineCount,
         " machine",
         machineCount !== 1 ? "s" : ""
       ] }),
-      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-        formatCost(todayCost),
-        " today"
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: formatCost(todayCost) }),
+      /* @__PURE__ */ jsxs(Text, { bold: true, color: "yellow", children: [
+        "[",
+        VIEW_LABELS[activeView],
+        "]"
       ] })
     ] }),
-    lastError && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: "red", children: lastError.length > 60 ? lastError.slice(0, 57) + "..." : lastError }) })
+    lastError && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: "red", children: lastError.length > 50 ? lastError.slice(0, 47) + "..." : lastError }) })
   ] });
 }
 
 // src/tui/components/layout/command-line.tsx
 import "react";
-import { Box as Box2, Text as Text2 } from "ink";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var MODE_LABELS = {
-  normal: { label: "NORMAL", color: "blue" },
-  command: { label: "COMMAND", color: "yellow" },
-  search: { label: "SEARCH", color: "green" },
-  insert: { label: "INSERT", color: "magenta" }
-};
-function CommandLine() {
-  const mode = useTuiStore((s) => s.mode);
-  const commandBuffer = useTuiStore((s) => s.commandBuffer);
-  const searchQuery = useTuiStore((s) => s.searchQuery);
-  const pendingKeys = useTuiStore((s) => s.pendingKeys);
-  const modeInfo = MODE_LABELS[mode] ?? MODE_LABELS.normal;
-  let content = "";
-  let prefix = "";
-  switch (mode) {
-    case "command":
-      prefix = ":";
-      content = commandBuffer;
-      break;
-    case "search":
-      prefix = "/";
-      content = searchQuery;
-      break;
-    case "normal":
-      if (pendingKeys) {
-        content = pendingKeys;
-      } else {
-        content = "Press : for commands, / to search, ? for help";
-      }
-      break;
-    case "insert":
-      content = "-- INSERT MODE -- (Esc to exit)";
-      break;
-  }
-  return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, justifyContent: "space-between", children: /* @__PURE__ */ jsxs2(Box2, { gap: 1, children: [
-    /* @__PURE__ */ jsxs2(Text2, { bold: true, color: modeInfo.color, inverse: true, children: [
-      " ",
-      modeInfo.label,
-      " "
-    ] }),
-    mode === "command" || mode === "search" ? /* @__PURE__ */ jsxs2(Text2, { children: [
-      /* @__PURE__ */ jsx2(Text2, { bold: true, children: prefix }),
-      /* @__PURE__ */ jsx2(Text2, { children: content }),
-      /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: "\u2588" })
-    ] }) : /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: content })
-  ] }) });
-}
-
-// src/tui/components/layout/help-overlay.tsx
-import "react";
-import { Box as Box3, Text as Text3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var KEYBINDINGS = [
-  ["Navigation", [
-    ["j / \u2193", "Move down"],
-    ["k / \u2191", "Move up"],
-    ["h / \u2190", "Focus left panel"],
-    ["l / \u2192", "Focus right panel"],
-    ["Tab", "Cycle panel focus"],
-    ["1-4", "Jump to panel"],
-    ["gg", "Scroll to top"],
-    ["G", "Scroll to bottom"],
-    ["Ctrl+u", "Page up"],
-    ["Ctrl+d", "Page down"],
-    ["Enter", "Select / expand"]
-  ]],
-  ["Actions", [
-    ["d", "Dispatch selected task"],
-    ["c", "Cancel running task"],
-    ["r", "Refresh all data"],
-    ["q", "Quit"]
-  ]],
-  ["Modes", [
-    [":", "Command mode"],
-    ["/", "Search mode"],
-    ["i", "Insert mode (steer)"],
-    ["?", "Toggle this help"],
-    ["Esc", "Return to normal mode"]
-  ]],
-  ["Commands", [
-    [":project list/create/delete", "Project management"],
-    [":plan tree/create-node", "Plan operations"],
-    [":dispatch <nodeId>", "Dispatch task"],
-    [":cancel <execId>", "Cancel execution"],
-    [":steer <message>", "Steer running task"],
-    [":watch <execId>", "Watch execution output"],
-    [":env list/status", "Machine management"],
-    [":activity", "Activity feed"],
-    [":refresh / :r", "Force refresh"],
-    [":quit / :q", "Exit TUI"]
-  ]]
-];
-function HelpOverlay() {
-  return /* @__PURE__ */ jsxs3(
-    Box3,
-    {
-      flexDirection: "column",
-      borderStyle: "round",
-      borderColor: "yellow",
-      paddingX: 2,
-      paddingY: 1,
-      children: [
-        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: " Keybindings Reference " }),
-        /* @__PURE__ */ jsx3(Text3, { children: " " }),
-        KEYBINDINGS.map(([section, bindings]) => /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginBottom: 1, children: [
-          /* @__PURE__ */ jsx3(Text3, { bold: true, underline: true, children: section }),
-          bindings.map(([key, desc]) => /* @__PURE__ */ jsxs3(Box3, { gap: 2, children: [
-            /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: key.padEnd(28) }),
-            /* @__PURE__ */ jsx3(Text3, { children: desc })
-          ] }, key))
-        ] }, section)),
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Press Esc or ? to close" })
-      ]
-    }
-  );
-}
-
-// src/tui/components/layout/search-overlay.tsx
-import "react";
-import { Box as Box4, Text as Text4, useInput } from "ink";
+import { Box as Box2, Text as Text2, useStdout } from "ink";
 
 // src/tui/stores/search-store.ts
 import { create as create2 } from "zustand";
@@ -321,6 +216,20 @@ var useSearchStore = create2((set, get) => ({
   close: () => set({ isOpen: false, query: "", results: [], selectedIndex: 0 })
 }));
 
+// src/tui/stores/projects-store.ts
+import { create as create3 } from "zustand";
+var useProjectsStore = create3((set) => ({
+  projects: [],
+  loading: false,
+  error: null,
+  setProjects: (projects) => set({ projects, loading: false, error: null }),
+  setLoading: (loading) => set({ loading }),
+  setError: (error) => set({ error, loading: false })
+}));
+
+// src/tui/stores/plan-store.ts
+import { create as create4 } from "zustand";
+
 // src/tui/lib/status-colors.ts
 var STATUS_COLOR_MAP = {
   // Project statuses
@@ -386,248 +295,6 @@ function getStatusSymbol(status) {
   }
 }
 
-// src/tui/components/layout/search-overlay.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function SearchOverlay() {
-  const isOpen = useSearchStore((s) => s.isOpen);
-  const query = useSearchStore((s) => s.query);
-  const results = useSearchStore((s) => s.results);
-  const selectedIndex = useSearchStore((s) => s.selectedIndex);
-  const { setQuery, moveUp, moveDown, close } = useSearchStore();
-  const { setSelectedProject, setSelectedNode, setSelectedMachine, focusPanel } = useTuiStore();
-  useInput((input, key) => {
-    if (!isOpen) return;
-    if (key.escape) {
-      close();
-      return;
-    }
-    if (key.upArrow) {
-      moveUp();
-      return;
-    }
-    if (key.downArrow) {
-      moveDown();
-      return;
-    }
-    if (key.return && results.length > 0) {
-      const item = results[selectedIndex];
-      if (item) {
-        switch (item.type) {
-          case "project":
-            setSelectedProject(item.id);
-            focusPanel("projects");
-            break;
-          case "task":
-            setSelectedNode(item.id);
-            focusPanel("plan");
-            break;
-          case "machine":
-            setSelectedMachine(item.id);
-            focusPanel("machines");
-            break;
-        }
-      }
-      close();
-      return;
-    }
-    if (key.backspace || key.delete) {
-      setQuery(query.slice(0, -1));
-      return;
-    }
-    if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      setQuery(query + input);
-    }
-  }, { isActive: isOpen });
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs4(
-    Box4,
-    {
-      flexDirection: "column",
-      borderStyle: "round",
-      borderColor: "cyan",
-      paddingX: 1,
-      paddingY: 0,
-      width: "60%",
-      height: Math.min(results.length + 4, 15),
-      children: [
-        /* @__PURE__ */ jsxs4(Box4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "Search: " }),
-          /* @__PURE__ */ jsx4(Text4, { children: query }),
-          /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "\u2588" })
-        ] }),
-        /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: 1, children: [
-          results.length === 0 && query.length > 0 && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  No results" }),
-          results.slice(0, 10).map((item, i) => /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(
-            Text4,
-            {
-              inverse: i === selectedIndex,
-              bold: i === selectedIndex,
-              color: i === selectedIndex ? "cyan" : void 0,
-              children: [
-                i === selectedIndex ? " \u25B6 " : "   ",
-                /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
-                  "[",
-                  item.type,
-                  "]"
-                ] }),
-                " ",
-                item.title,
-                item.status && /* @__PURE__ */ jsxs4(Text4, { color: getStatusColor(item.status), children: [
-                  " [",
-                  item.status,
-                  "]"
-                ] })
-              ]
-            }
-          ) }, item.id))
-        ] })
-      ]
-    }
-  );
-}
-
-// src/tui/components/panels/projects-panel.tsx
-import "react";
-import { Text as Text8 } from "ink";
-
-// src/tui/components/layout/panel.tsx
-import "react";
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function Panel({ title, isFocused, children, width, height }) {
-  const borderColor = isFocused ? "cyan" : "gray";
-  return /* @__PURE__ */ jsxs5(
-    Box5,
-    {
-      flexDirection: "column",
-      borderStyle: "single",
-      borderColor,
-      width,
-      height,
-      flexGrow: 1,
-      children: [
-        /* @__PURE__ */ jsx5(Box5, { paddingX: 1, children: /* @__PURE__ */ jsx5(Text5, { bold: true, color: isFocused ? "cyan" : "white", children: title }) }),
-        /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", paddingX: 1, flexGrow: 1, children })
-      ]
-    }
-  );
-}
-
-// src/tui/components/shared/scrollable-list.tsx
-import "react";
-import { Box as Box6, Text as Text6 } from "ink";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function ScrollableList({ items, selectedIndex, height, isFocused }) {
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx6(Box6, { children: /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "  No items." }) });
-  }
-  const visibleHeight = Math.max(1, height - 1);
-  let start = 0;
-  if (selectedIndex >= visibleHeight) {
-    start = selectedIndex - visibleHeight + 1;
-  }
-  const visibleItems = items.slice(start, start + visibleHeight);
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
-    visibleItems.map((item, i) => {
-      const actualIndex = start + i;
-      const isSelected = actualIndex === selectedIndex && isFocused;
-      return /* @__PURE__ */ jsxs6(Box6, { children: [
-        /* @__PURE__ */ jsxs6(
-          Text6,
-          {
-            color: isSelected ? "cyan" : item.color ?? void 0,
-            bold: isSelected,
-            inverse: isSelected,
-            children: [
-              isSelected ? " \u25B6 " : "   ",
-              item.label,
-              item.sublabel ? ` ${item.sublabel}` : ""
-            ]
-          }
-        ),
-        item.rightLabel && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-          " ",
-          item.rightLabel
-        ] })
-      ] }, item.id);
-    }),
-    items.length > visibleHeight && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-      "  [",
-      start + 1,
-      "-",
-      Math.min(start + visibleHeight, items.length),
-      "/",
-      items.length,
-      "]"
-    ] })
-  ] });
-}
-
-// src/tui/components/shared/spinner.tsx
-import { useState, useEffect } from "react";
-import { Text as Text7 } from "ink";
-import { jsxs as jsxs7 } from "react/jsx-runtime";
-var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
-function Spinner({ label }) {
-  const [frame, setFrame] = useState(0);
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setFrame((f) => (f + 1) % FRAMES.length);
-    }, 80);
-    return () => clearInterval(timer);
-  }, []);
-  return /* @__PURE__ */ jsxs7(Text7, { color: "cyan", children: [
-    FRAMES[frame],
-    label ? ` ${label}` : ""
-  ] });
-}
-
-// src/tui/stores/projects-store.ts
-import { create as create3 } from "zustand";
-var useProjectsStore = create3((set) => ({
-  projects: [],
-  loading: false,
-  error: null,
-  setProjects: (projects) => set({ projects, loading: false, error: null }),
-  setLoading: (loading) => set({ loading }),
-  setError: (error) => set({ error, loading: false })
-}));
-
-// src/tui/components/panels/projects-panel.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function ProjectsPanel({ height }) {
-  const projects = useProjectsStore((s) => s.projects);
-  const loading = useProjectsStore((s) => s.loading);
-  const error = useProjectsStore((s) => s.error);
-  const focusedPanel = useTuiStore((s) => s.focusedPanel);
-  const scrollIndex = useTuiStore((s) => s.scrollIndex.projects);
-  const selectedProjectId = useTuiStore((s) => s.selectedProjectId);
-  const isFocused = focusedPanel === "projects";
-  const items = projects.map((p) => ({
-    id: p.id,
-    label: p.name,
-    sublabel: p.status,
-    rightLabel: formatRelativeTime(p.updatedAt),
-    color: p.id === selectedProjectId ? "cyan" : getStatusColor(p.status)
-  }));
-  return /* @__PURE__ */ jsx7(Panel, { title: "PROJECTS", isFocused, height, children: loading && projects.length === 0 ? /* @__PURE__ */ jsx7(Spinner, { label: "Loading projects..." }) : error ? /* @__PURE__ */ jsx7(Text8, { color: "red", children: error }) : /* @__PURE__ */ jsx7(
-    ScrollableList,
-    {
-      items,
-      selectedIndex: scrollIndex,
-      height: height - 3,
-      isFocused
-    }
-  ) });
-}
-
-// src/tui/components/panels/plan-panel.tsx
-import "react";
-import { Box as Box7, Text as Text9 } from "ink";
-
-// src/tui/stores/plan-store.ts
-import { create as create4 } from "zustand";
-
 // src/tui/lib/tree-builder.ts
 function buildTree(nodes, edges) {
   const adj = /* @__PURE__ */ new Map();
@@ -742,84 +409,1029 @@ var usePlanStore = create4((set, get) => ({
   })
 }));
 
-// src/tui/components/panels/plan-panel.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function PlanPanel({ height }) {
-  const treeLines = usePlanStore((s) => s.treeLines);
-  const loading = usePlanStore((s) => s.loading);
-  const error = usePlanStore((s) => s.error);
-  const focusedPanel = useTuiStore((s) => s.focusedPanel);
-  const scrollIndex = useTuiStore((s) => s.scrollIndex.plan);
-  const selectedProjectId = useTuiStore((s) => s.selectedProjectId);
-  const projects = useProjectsStore((s) => s.projects);
-  const isFocused = focusedPanel === "plan";
-  const projectName = projects.find((p) => p.id === selectedProjectId)?.name ?? "none";
-  const visibleHeight = Math.max(1, height - 4);
+// src/tui/stores/machines-store.ts
+import { create as create5 } from "zustand";
+var useMachinesStore = create5((set, get) => ({
+  machines: [],
+  loading: false,
+  error: null,
+  setMachines: (machines) => set({ machines, loading: false, error: null }),
+  updateMachine: (id, patch) => {
+    set((s) => ({
+      machines: s.machines.map((m) => m.id === id ? { ...m, ...patch } : m)
+    }));
+  },
+  removeMachine: (id) => {
+    set((s) => ({ machines: s.machines.filter((m) => m.id !== id) }));
+  },
+  addMachine: (machine) => {
+    const { machines } = get();
+    const existing = machines.findIndex((m) => m.id === machine.id);
+    if (existing >= 0) {
+      set({ machines: machines.map((m, i) => i === existing ? machine : m) });
+    } else {
+      set({ machines: [...machines, machine] });
+    }
+  },
+  setLoading: (loading) => set({ loading }),
+  setError: (error) => set({ error, loading: false })
+}));
+
+// src/tui/stores/execution-store.ts
+import { create as create6 } from "zustand";
+var MAX_LINES = 5e3;
+function flushToolDots(output) {
+  if (output.pendingToolCount === 0) return output.lines;
+  const dots = "\xB7".repeat(output.pendingToolCount);
+  const line = `[Tool Call] ${dots}`;
+  const lines = [...output.lines, line];
+  output.pendingToolCount = 0;
+  return lines;
+}
+function trimRingBuffer(lines) {
+  if (lines.length > MAX_LINES) {
+    lines.splice(0, lines.length - MAX_LINES);
+  }
+  return lines;
+}
+var useExecutionStore = create6((set, get) => ({
+  outputs: /* @__PURE__ */ new Map(),
+  watchingId: null,
+  pendingApproval: null,
+  initExecution: (executionId, nodeId) => {
+    const { outputs } = get();
+    const next = new Map(outputs);
+    next.set(executionId, {
+      executionId,
+      nodeId,
+      lines: [],
+      status: "running",
+      startedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      pendingToolCount: 0
+    });
+    set({ outputs: next });
+  },
+  appendToolCall: (executionId) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, pendingToolCount: current.pendingToolCount + 1 });
+    set({ outputs: next });
+  },
+  appendFileChange: (executionId, path, action, added, removed) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    const stats = [
+      added != null && added > 0 ? `+${added}` : null,
+      removed != null && removed > 0 ? `-${removed}` : null
+    ].filter(Boolean).join(" ");
+    lines.push(`[${action}] ${path}${stats ? ` (${stats})` : ""}`);
+    trimRingBuffer(lines);
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  appendLine: (executionId, line) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    lines.push(line);
+    trimRingBuffer(lines);
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  appendText: (executionId, text) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    const newLines = text.split("\n");
+    if (lines.length > 0 && newLines.length > 0) {
+      lines[lines.length - 1] += newLines[0];
+      for (let i = 1; i < newLines.length; i++) {
+        lines.push(newLines[i]);
+      }
+    } else {
+      lines.push(...newLines);
+    }
+    trimRingBuffer(lines);
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  setStatus: (executionId, status) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, status, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  setWatching: (watchingId) => set({ watchingId }),
+  setPendingApproval: (pendingApproval) => set({ pendingApproval }),
+  clear: (executionId) => {
+    const { outputs } = get();
+    const next = new Map(outputs);
+    next.delete(executionId);
+    set({ outputs: next });
+  }
+}));
+
+// src/tui/commands/handlers.ts
+var PALETTE_COMMANDS = [
+  { name: "project list", description: "List all projects" },
+  { name: "project show", description: "Show project details", usage: "project show <id>" },
+  { name: "project create", description: "Create a new project", usage: "project create <name>" },
+  { name: "project delete", description: "Delete a project", usage: "project delete <id>" },
+  { name: "plan tree", description: "Show plan tree for selected project" },
+  { name: "plan create-node", description: "Create a plan node", usage: "plan create-node <title>" },
+  { name: "plan update-node", description: "Update a plan node field", usage: "plan update-node <id> <field> <value>" },
+  { name: "dispatch", description: "Dispatch selected task for execution", usage: "dispatch [nodeId]" },
+  { name: "cancel", description: "Cancel running execution", usage: "cancel [executionId]" },
+  { name: "steer", description: "Send guidance to running task", usage: "steer <message>" },
+  { name: "watch", description: "Watch execution output", usage: "watch <executionId>" },
+  { name: "env list", description: "List machines/environments" },
+  { name: "env status", description: "Show relay status" },
+  { name: "search", description: "Search projects and tasks", usage: "search <query>" },
+  { name: "activity", description: "Show recent activity feed" },
+  { name: "playground", description: "Start a playground (Cloud Code) session", usage: "playground <description>" },
+  { name: "plan generate", description: "Generate a plan using AI", usage: "plan generate <description>" },
+  { name: "refresh", description: "Refresh all data" },
+  { name: "help", description: "Toggle keybinding reference" },
+  { name: "quit", description: "Exit the TUI" }
+];
+var handlers = {
+  // ── Quit ──
+  q: async () => {
+    process.exit(0);
+  },
+  quit: async () => {
+    process.exit(0);
+  },
+  // ── Refresh ──
+  r: async (_args, client) => {
+    await refreshAll(client);
+  },
+  refresh: async (_args, client) => {
+    await refreshAll(client);
+  },
+  // ── Project commands ──
+  "project list": async (_args, client) => {
+    const projects = await client.listProjects();
+    useProjectsStore.getState().setProjects(projects);
+  },
+  "project show": async (args, client) => {
+    const id = args[0];
+    if (!id) return;
+    try {
+      const project = await client.resolveProject(id);
+      useTuiStore.getState().openDetail("project", project.id);
+    } catch {
+      useTuiStore.getState().setLastError(`Project not found: ${id}`);
+    }
+  },
+  "project create": async (args, client) => {
+    const name = args.join(" ");
+    if (!name) {
+      useTuiStore.getState().setLastError("Usage: :project create <name>");
+      return;
+    }
+    await client.createProject({ name });
+    const projects = await client.listProjects();
+    useProjectsStore.getState().setProjects(projects);
+  },
+  "project delete": async (args, client) => {
+    const id = args[0];
+    if (!id) return;
+    try {
+      const project = await client.resolveProject(id);
+      await client.deleteProject(project.id);
+      const projects = await client.listProjects();
+      useProjectsStore.getState().setProjects(projects);
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Plan commands ──
+  "plan tree": async (_args, client) => {
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    const { nodes, edges } = await client.getPlan(projectId);
+    usePlanStore.getState().setPlan(projectId, nodes, edges);
+    useTuiStore.getState().focusPanel("plan");
+  },
+  "plan create-node": async (args, client) => {
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    const title = args.join(" ");
+    if (!title) {
+      useTuiStore.getState().setLastError("Usage: :plan create-node <title>");
+      return;
+    }
+    const id = `node-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    await client.createPlanNode({ id, projectId, title });
+    const { nodes, edges } = await client.getPlan(projectId);
+    usePlanStore.getState().setPlan(projectId, nodes, edges);
+  },
+  "plan update-node": async (args, client) => {
+    const [nodeId, field, ...rest] = args;
+    if (!nodeId || !field) {
+      useTuiStore.getState().setLastError("Usage: :plan update-node <nodeId> <field> <value>");
+      return;
+    }
+    const value = rest.join(" ");
+    await client.updatePlanNode(nodeId, { [field]: value });
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (projectId) {
+      const { nodes, edges } = await client.getPlan(projectId);
+      usePlanStore.getState().setPlan(projectId, nodes, edges);
+    }
+  },
+  // ── Dispatch ──
+  d: async (args, client) => {
+    await handlers.dispatch(args, client);
+  },
+  dispatch: async (args, client) => {
+    const nodeId = args[0] ?? useTuiStore.getState().selectedNodeId;
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!nodeId || !projectId) {
+      useTuiStore.getState().setLastError("No node/project selected for dispatch");
+      return;
+    }
+    try {
+      const response = await client.dispatchTask({ nodeId, projectId });
+      const execId = `exec-${Date.now()}`;
+      useExecutionStore.getState().initExecution(execId, nodeId);
+      useExecutionStore.getState().setWatching(execId);
+      useTuiStore.getState().focusPanel("output");
+      if (response.body) {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              try {
+                const event = JSON.parse(line.slice(6));
+                const eventType = event.type;
+                if (eventType === "text") {
+                  useExecutionStore.getState().appendText(execId, event.content ?? "");
+                } else if (eventType === "tool_use") {
+                  useExecutionStore.getState().appendToolCall(execId, event.name ?? "");
+                } else if (eventType === "result") {
+                  useExecutionStore.getState().setStatus(execId, event.status ?? "completed");
+                } else if (eventType === "error") {
+                  useExecutionStore.getState().appendLine(execId, `[error] ${event.message}`);
+                  useExecutionStore.getState().setStatus(execId, "failure");
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Cancel ──
+  c: async (args, client) => {
+    await handlers.cancel(args, client);
+  },
+  cancel: async (args, client) => {
+    const executionId = args[0] ?? useExecutionStore.getState().watchingId;
+    if (!executionId) {
+      useTuiStore.getState().setLastError("No execution to cancel");
+      return;
+    }
+    try {
+      await client.cancelTask({ executionId });
+      useExecutionStore.getState().setStatus(executionId, "cancelled");
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Steer ──
+  s: async (args, client) => {
+    await handlers.steer(args, client);
+  },
+  steer: async (args, client) => {
+    const message = args.join(" ");
+    if (!message) {
+      useTuiStore.getState().setLastError("Usage: :steer <message>");
+      return;
+    }
+    const executionId = useExecutionStore.getState().watchingId;
+    const selectedMachineId = useTuiStore.getState().selectedMachineId;
+    if (!executionId || !selectedMachineId) {
+      useTuiStore.getState().setLastError("No active execution/machine to steer");
+      return;
+    }
+    try {
+      await client.steerTask({ taskId: executionId, machineId: selectedMachineId, message });
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Watch ──
+  watch: async (args) => {
+    const executionId = args[0];
+    if (!executionId) {
+      useTuiStore.getState().setLastError("Usage: :watch <executionId>");
+      return;
+    }
+    useExecutionStore.getState().setWatching(executionId);
+    useTuiStore.getState().focusPanel("output");
+  },
+  // ── Env ──
+  "env list": async (_args, client) => {
+    const machines = await client.listMachines();
+    useMachinesStore.getState().setMachines(machines);
+    useTuiStore.getState().focusPanel("machines");
+  },
+  "env status": async (_args, client) => {
+    const status = await client.getRelayStatus();
+    useTuiStore.getState().setLastError(JSON.stringify(status, null, 2));
+  },
+  // ── Search ──
+  search: async (args, client) => {
+    const query = args.join(" ");
+    if (!query) return;
+    try {
+      await client.search(query);
+      useTuiStore.getState().toggleSearch();
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Activity ──
+  activity: async (_args, client) => {
+    const projectId = useTuiStore.getState().selectedProjectId;
+    try {
+      const activities = await client.listActivities(projectId ? { projectId } : void 0);
+      for (const a of activities.slice(0, 20)) {
+        useExecutionStore.getState().appendLine("activity", `[${a.type}] ${a.title}`);
+      }
+      useExecutionStore.getState().setWatching("activity");
+      useTuiStore.getState().focusPanel("output");
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Playground ──
+  playground: async (args, client) => {
+    const description = args.join(" ");
+    if (!description) {
+      useTuiStore.getState().setLastError("Usage: playground <description>");
+      return;
+    }
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected. Select a project first.");
+      return;
+    }
+    const nodeId = `playground-${projectId}-${Date.now()}`;
+    try {
+      const response = await client.dispatchTask({
+        nodeId,
+        projectId,
+        skipSafetyCheck: true,
+        description,
+        title: `Playground: ${description.slice(0, 50)}`
+      });
+      useExecutionStore.getState().initExecution(nodeId, nodeId);
+      useExecutionStore.getState().setWatching(nodeId);
+      useTuiStore.getState().setActiveView("playground");
+      await streamExecution(nodeId, response);
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Plan Generate ──
+  "plan generate": async (args, client) => {
+    const description = args.join(" ");
+    if (!description) {
+      useTuiStore.getState().setLastError("Usage: plan generate <description>");
+      return;
+    }
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected. Select a project first.");
+      return;
+    }
+    const nodeId = `plan-${projectId}`;
+    try {
+      const response = await client.dispatchTask({
+        nodeId,
+        projectId,
+        isInteractivePlan: true,
+        description
+      });
+      useExecutionStore.getState().initExecution(nodeId, nodeId);
+      useExecutionStore.getState().setWatching(nodeId);
+      useTuiStore.getState().setActiveView("plan-gen");
+      await streamExecution(nodeId, response);
+      useExecutionStore.getState().appendLine(nodeId, "[plan] Refreshing plan...");
+      const { nodes, edges } = await client.getPlan(projectId);
+      usePlanStore.getState().setPlan(projectId, nodes, edges);
+      useTuiStore.getState().setActiveView("dashboard");
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Help ──
+  help: async () => {
+    useTuiStore.getState().toggleHelp();
+  },
+  "?": async () => {
+    useTuiStore.getState().toggleHelp();
+  }
+};
+async function streamExecution(executionId, response) {
+  if (!response.body) return;
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+    for (const line of lines) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const event = JSON.parse(line.slice(6));
+        const eventType = event.type;
+        if (eventType === "text") {
+          useExecutionStore.getState().appendText(executionId, event.content ?? "");
+        } else if (eventType === "tool_use") {
+          useExecutionStore.getState().appendToolCall(executionId, event.name ?? "");
+        } else if (eventType === "file_change") {
+          useExecutionStore.getState().appendFileChange(
+            executionId,
+            event.path ?? "",
+            event.action ?? "modified",
+            event.linesAdded,
+            event.linesRemoved
+          );
+        } else if (eventType === "result" || eventType === "done") {
+          useExecutionStore.getState().setStatus(executionId, event.status ?? "completed");
+        } else if (eventType === "error") {
+          useExecutionStore.getState().appendLine(executionId, `[error] ${event.message}`);
+          useExecutionStore.getState().setStatus(executionId, "failure");
+        } else if (eventType === "plan_result") {
+          useExecutionStore.getState().appendLine(executionId, "[plan] Plan generated successfully");
+        } else if (eventType === "approval_request") {
+          useExecutionStore.getState().setPendingApproval({
+            requestId: event.requestId,
+            question: event.question,
+            options: event.options,
+            machineId: event.machineId,
+            taskId: event.taskId
+          });
+        }
+      } catch {
+      }
+    }
+  }
+}
+async function refreshAll(client) {
+  try {
+    const [projects, machines] = await Promise.all([
+      client.listProjects(),
+      client.listMachines()
+    ]);
+    useProjectsStore.getState().setProjects(projects);
+    useMachinesStore.getState().setMachines(machines);
+    useTuiStore.getState().setMachineCount(machines.filter((m) => m.isConnected).length);
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (projectId) {
+      const { nodes, edges } = await client.getPlan(projectId);
+      usePlanStore.getState().setPlan(projectId, nodes, edges);
+    }
+  } catch (err) {
+    useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+  }
+}
+
+// src/tui/commands/palette-filter.ts
+function getFilteredPaletteCommands(query) {
+  if (!query) return PALETTE_COMMANDS;
+  const lower = query.toLowerCase();
+  return PALETTE_COMMANDS.filter(
+    (cmd) => cmd.name.toLowerCase().includes(lower) || cmd.description.toLowerCase().includes(lower)
+  );
+}
+
+// src/tui/components/layout/command-line.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SHORTCUTS = [
+  { key: "1", label: "Dashboard" },
+  { key: "2", label: "Plan" },
+  { key: "3", label: "Projects" },
+  { key: "4", label: "Playground" },
+  { key: "5", label: "Output" },
+  { key: "/", label: "Search" },
+  { key: "C-p", label: "Commands" },
+  { key: "d", label: "Dispatch" },
+  { key: "?", label: "Help" },
+  { key: "q", label: "Quit" }
+];
+var TYPE_LABELS = {
+  project: { label: "proj", color: "cyan" },
+  task: { label: "task", color: "yellow" },
+  machine: { label: "env", color: "green" },
+  execution: { label: "exec", color: "magenta" }
+};
+function CommandLine({ height }) {
+  const mode = useTuiStore((s) => s.mode);
+  const commandBuffer = useTuiStore((s) => s.commandBuffer);
+  const paletteIndex = useTuiStore((s) => s.paletteIndex);
+  const searchOpen = useSearchStore((s) => s.isOpen);
+  const searchQuery = useSearchStore((s) => s.query);
+  const searchResults = useSearchStore((s) => s.results);
+  const searchItems = useSearchStore((s) => s.items);
+  const searchIndex = useSearchStore((s) => s.selectedIndex);
+  const { stdout } = useStdout();
+  const termWidth = stdout?.columns ?? 80;
+  const listHeight = Math.max(1, height - 3);
+  if (searchOpen) {
+    const displayList = searchQuery.length > 0 ? searchResults : searchItems;
+    const visible = displayList.slice(0, listHeight);
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", height, borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "/ " }),
+        /* @__PURE__ */ jsx2(Text2, { children: searchQuery }),
+        /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: "\u2588" }),
+        /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  (",
+          "\u2191\u2193",
+          " navigate, Enter to go, Esc to close)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: 1, children: [
+        visible.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: searchQuery.length > 0 ? "  No results" : "  No items" }) : visible.map((item, i) => {
+          const isSelected = i === searchIndex;
+          const typeInfo = TYPE_LABELS[item.type] ?? { label: item.type, color: "white" };
+          return /* @__PURE__ */ jsxs2(Box2, { children: [
+            /* @__PURE__ */ jsx2(Text2, { inverse: isSelected, bold: isSelected, color: isSelected ? "cyan" : void 0, children: isSelected ? " > " : "   " }),
+            /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, color: isSelected ? "cyan" : typeInfo.color, children: [
+              "[",
+              typeInfo.label,
+              "]"
+            ] }),
+            /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, bold: isSelected, wrap: "truncate", children: [
+              " ",
+              item.title
+            ] }),
+            item.status && /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, color: isSelected ? void 0 : getStatusColor(item.status), dimColor: !isSelected, children: [
+              " ",
+              item.status
+            ] })
+          ] }, `${item.type}-${item.id}`);
+        }),
+        displayList.length > listHeight && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  ...and ",
+          displayList.length - listHeight,
+          " more"
+        ] })
+      ] })
+    ] });
+  }
+  if (mode === "palette") {
+    const filtered = getFilteredPaletteCommands(commandBuffer);
+    const visible = filtered.slice(0, listHeight);
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", height, borderStyle: "single", borderColor: "yellow", paddingX: 1, children: [
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "yellow", children: "> " }),
+        /* @__PURE__ */ jsx2(Text2, { children: commandBuffer }),
+        /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: "\u2588" }),
+        /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  (",
+          "\u2191\u2193",
+          " navigate, Enter to run, Esc to cancel)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: 1, children: [
+        visible.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "  No matching commands" }) : visible.map((cmd, i) => {
+          const isSelected = i === paletteIndex;
+          return /* @__PURE__ */ jsxs2(Box2, { children: [
+            /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, bold: isSelected, color: isSelected ? "yellow" : void 0, children: [
+              isSelected ? " > " : "   ",
+              cmd.name.padEnd(20)
+            ] }),
+            /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, color: isSelected ? "white" : void 0, children: [
+              " ",
+              cmd.description
+            ] })
+          ] }, cmd.name);
+        }),
+        filtered.length > listHeight && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  ...and ",
+          filtered.length - listHeight,
+          " more"
+        ] })
+      ] })
+    ] });
+  }
+  if (mode === "input") {
+    return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, height, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Input active \u2014 press Esc to exit" }) });
+  }
+  return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, gap: 1, height, children: SHORTCUTS.map(({ key, label }) => /* @__PURE__ */ jsxs2(Box2, { children: [
+    /* @__PURE__ */ jsx2(Text2, { inverse: true, bold: true, children: ` ${key} ` }),
+    /* @__PURE__ */ jsx2(Text2, { children: label })
+  ] }, key)) });
+}
+
+// src/tui/components/layout/help-overlay.tsx
+import "react";
+import { Box as Box3, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var KEYBINDINGS = [
+  ["Navigation", [
+    ["\u2191 / k", "Move up"],
+    ["\u2193 / j", "Move down"],
+    ["\u2190 / h", "Focus left panel"],
+    ["\u2192 / l", "Focus right panel"],
+    ["Tab", "Cycle panel focus"],
+    ["PgUp / PgDn", "Page up / down"],
+    ["Home / End", "Scroll to top / bottom"],
+    ["Enter", "Select / open detail view"],
+    ["d", "Dispatch selected task"]
+  ]],
+  ["Views", [
+    ["1", "Dashboard (default)"],
+    ["2", "Plan Generation"],
+    ["3", "Projects & Plan"],
+    ["4", "Playground"],
+    ["5", "Output"]
+  ]],
+  ["Shortcuts", [
+    ["Ctrl+P / :", "Open command palette (searchable)"],
+    ["Ctrl+F / /", "Open search"],
+    ["Ctrl+R", "Refresh all data"],
+    ["?", "Toggle this help"],
+    ["q / Ctrl+C", "Quit"],
+    ["Esc", "Close overlay / cancel input"]
+  ]],
+  ["Commands (via Ctrl+P)", [
+    ["project list / create / delete", "Project management"],
+    ["plan create-node", "Create a plan node"],
+    ["dispatch <nodeId>", "Dispatch task for execution"],
+    ["cancel <execId>", "Cancel execution"],
+    ["steer <message>", "Steer running task"],
+    ["watch <execId>", "Watch execution output"],
+    ["env list / status", "Machine management"],
+    ["activity", "Show activity feed"],
+    ["refresh / r", "Force refresh"],
+    ["quit / q", "Exit TUI"]
+  ]],
+  ["Terminal Compatibility", [
+    ["tmux", "Ctrl+B prefix is not captured \u2014 safe"],
+    ["screen", "Ctrl+A prefix is not captured \u2014 safe"],
+    ["vscode", "All bindings work in integrated terminal"]
+  ]]
+];
+function HelpOverlay() {
+  return /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "yellow",
+      paddingX: 2,
+      paddingY: 1,
+      children: [
+        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: " Keybindings Reference " }),
+        /* @__PURE__ */ jsx3(Text3, { children: " " }),
+        KEYBINDINGS.map(([section, bindings]) => /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginBottom: 1, children: [
+          /* @__PURE__ */ jsx3(Text3, { bold: true, underline: true, children: section }),
+          bindings.map(([key, desc]) => /* @__PURE__ */ jsxs3(Box3, { gap: 2, children: [
+            /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: key.padEnd(34) }),
+            /* @__PURE__ */ jsx3(Text3, { children: desc })
+          ] }, key))
+        ] }, section)),
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Press Esc or ? to close" })
+      ]
+    }
+  );
+}
+
+// src/tui/components/layout/search-overlay.tsx
+import { useInput } from "ink";
+function SearchOverlay() {
+  const isOpen = useSearchStore((s) => s.isOpen);
+  const query = useSearchStore((s) => s.query);
+  const results = useSearchStore((s) => s.results);
+  const items = useSearchStore((s) => s.items);
+  const selectedIndex = useSearchStore((s) => s.selectedIndex);
+  const { setQuery, moveUp, moveDown, close } = useSearchStore();
+  const { setSelectedProject, setSelectedNode, setSelectedMachine, focusPanel, openDetail } = useTuiStore();
+  useInput((input, key) => {
+    if (!isOpen) return;
+    if (key.escape) {
+      close();
+      return;
+    }
+    if (key.upArrow) {
+      moveUp();
+      return;
+    }
+    if (key.downArrow || key.tab) {
+      moveDown();
+      return;
+    }
+    if (key.return) {
+      const displayList = query.length > 0 ? results : items;
+      const item = displayList[selectedIndex];
+      if (item) {
+        switch (item.type) {
+          case "project":
+            setSelectedProject(item.id);
+            focusPanel("projects");
+            break;
+          case "task":
+            setSelectedNode(item.id);
+            focusPanel("plan");
+            openDetail("node", item.id);
+            break;
+          case "machine":
+            setSelectedMachine(item.id);
+            focusPanel("machines");
+            break;
+        }
+      }
+      close();
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setQuery(query.slice(0, -1));
+      return;
+    }
+    if (input && input.length === 1 && !key.ctrl && !key.meta) {
+      setQuery(query + input);
+    }
+  }, { isActive: isOpen });
+  return null;
+}
+
+// src/tui/components/panels/projects-panel.tsx
+import "react";
+import { Box as Box5, Text as Text6 } from "ink";
+
+// src/tui/components/layout/panel.tsx
+import "react";
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Panel({ title, isFocused, children, width, height }) {
+  const borderColor = isFocused ? "cyan" : "gray";
+  return /* @__PURE__ */ jsxs4(
+    Box4,
+    {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor,
+      width,
+      height,
+      flexGrow: 1,
+      children: [
+        /* @__PURE__ */ jsx4(Box4, { paddingX: 1, children: /* @__PURE__ */ jsx4(Text4, { bold: true, color: isFocused ? "cyan" : "white", children: title }) }),
+        /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", paddingX: 1, flexGrow: 1, children })
+      ]
+    }
+  );
+}
+
+// src/tui/components/shared/spinner.tsx
+import { useState, useEffect } from "react";
+import { Text as Text5 } from "ink";
+import { jsxs as jsxs5 } from "react/jsx-runtime";
+var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+function Spinner({ label }) {
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame((f) => (f + 1) % FRAMES.length);
+    }, 80);
+    return () => clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ jsxs5(Text5, { color: "cyan", children: [
+    FRAMES[frame],
+    label ? ` ${label}` : ""
+  ] });
+}
+
+// src/tui/components/panels/projects-panel.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
+function statusSymbol(status) {
+  if (status === "running") return "\u25B6";
+  if (status === "success") return "\u2713";
+  if (status === "failure" || status === "error") return "\u2717";
+  return "\xB7";
+}
+function ProjectsPanel({ height }) {
+  const projects = useProjectsStore((s) => s.projects);
+  const loading = useProjectsStore((s) => s.loading);
+  const error = useProjectsStore((s) => s.error);
+  const focusedPanel = useTuiStore((s) => s.focusedPanel);
+  const scrollIndex = useTuiStore((s) => s.scrollIndex.projects);
+  const selectedProjectId = useTuiStore((s) => s.selectedProjectId);
+  const outputs = useExecutionStore((s) => s.outputs);
+  const isFocused = focusedPanel === "projects";
+  const visibleHeight = Math.max(1, height - 3);
+  const planGenEntries = [];
+  const playgroundEntries = [];
+  for (const [id, exec] of outputs) {
+    if (exec.nodeId.startsWith("plan-")) {
+      planGenEntries.push({ id, label: exec.nodeId, status: exec.status });
+    } else if (exec.nodeId.startsWith("playground-")) {
+      playgroundEntries.push({ id, label: exec.nodeId.replace(/^playground-/, "").slice(0, 30), status: exec.status });
+    }
+  }
+  const projectCount = projects.length;
+  const clampedIndex = Math.min(scrollIndex, Math.max(0, projectCount - 1));
+  const sectionLineCount = (planGenEntries.length > 0 ? 1 + planGenEntries.length : 0) + (playgroundEntries.length > 0 ? 1 + playgroundEntries.length : 0);
+  const projectVisibleHeight = Math.max(1, visibleHeight - sectionLineCount);
   let start = 0;
-  if (scrollIndex >= visibleHeight) {
-    start = scrollIndex - visibleHeight + 1;
+  if (projectCount > projectVisibleHeight) {
+    start = Math.max(0, Math.min(clampedIndex - Math.floor(projectVisibleHeight / 2), projectCount - projectVisibleHeight));
   }
-  const visibleLines = treeLines.slice(start, start + visibleHeight);
-  return /* @__PURE__ */ jsx8(Panel, { title: `PLAN (${projectName})`, isFocused, height, children: loading && treeLines.length === 0 ? /* @__PURE__ */ jsx8(Spinner, { label: "Loading plan..." }) : error ? /* @__PURE__ */ jsx8(Text9, { color: "red", children: error }) : !selectedProjectId ? /* @__PURE__ */ jsx8(Text9, { dimColor: true, children: "  Select a project to view its plan" }) : treeLines.length === 0 ? /* @__PURE__ */ jsx8(Text9, { dimColor: true, children: "  No plan nodes. Use :plan create-node <title>" }) : /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", children: [
-    visibleLines.map((line, i) => {
+  const visibleProjects = projects.slice(start, start + projectVisibleHeight);
+  return /* @__PURE__ */ jsx5(Panel, { title: "PROJECTS", isFocused, height, children: loading && projects.length === 0 ? /* @__PURE__ */ jsx5(Spinner, { label: "Loading projects..." }) : error ? /* @__PURE__ */ jsx5(Text6, { color: "red", children: error }) : /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", children: [
+    visibleProjects.length === 0 && planGenEntries.length === 0 && playgroundEntries.length === 0 && /* @__PURE__ */ jsx5(Text6, { dimColor: true, children: "  No projects yet" }),
+    visibleProjects.map((p, i) => {
       const actualIndex = start + i;
-      const isSelected = actualIndex === scrollIndex && isFocused;
-      return /* @__PURE__ */ jsx8(Box7, { children: /* @__PURE__ */ jsx8(
-        Text9,
-        {
-          color: isSelected ? "cyan" : getStatusColor(line.status),
-          bold: isSelected,
-          inverse: isSelected,
-          children: line.text
-        }
-      ) }, line.id + "-" + actualIndex);
+      const isSelected = isFocused && clampedIndex === actualIndex;
+      const isActive = p.id === selectedProjectId;
+      return /* @__PURE__ */ jsxs6(Box5, { children: [
+        /* @__PURE__ */ jsxs6(
+          Text6,
+          {
+            inverse: isSelected,
+            bold: isSelected,
+            color: isActive ? "cyan" : void 0,
+            wrap: "truncate",
+            children: [
+              isSelected ? " > " : "   ",
+              truncate(p.name, 30)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: !isSelected, children: [
+          " ",
+          formatRelativeTime(p.updatedAt)
+        ] })
+      ] }, p.id);
     }),
-    treeLines.length > visibleHeight && /* @__PURE__ */ jsxs8(Text9, { dimColor: true, children: [
+    projectCount > projectVisibleHeight && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
       "  [",
       start + 1,
       "-",
-      Math.min(start + visibleHeight, treeLines.length),
+      Math.min(start + projectVisibleHeight, projectCount),
       "/",
-      treeLines.length,
+      projectCount,
       "]"
+    ] }),
+    planGenEntries.length > 0 && /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx5(Text6, { bold: true, color: "yellow", children: " Plan Generation" }),
+      planGenEntries.map((item) => /* @__PURE__ */ jsxs6(Text6, { dimColor: true, wrap: "truncate", children: [
+        "   ",
+        statusSymbol(item.status),
+        " ",
+        truncate(item.label, 28),
+        " ",
+        item.status
+      ] }, item.id))
+    ] }),
+    playgroundEntries.length > 0 && /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx5(Text6, { bold: true, color: "green", children: " Playground" }),
+      playgroundEntries.map((item) => /* @__PURE__ */ jsxs6(Text6, { dimColor: true, wrap: "truncate", children: [
+        "   ",
+        statusSymbol(item.status),
+        " ",
+        truncate(item.label, 28),
+        " ",
+        item.status
+      ] }, item.id))
     ] })
   ] }) });
 }
 
-// src/tui/components/panels/machines-panel.tsx
+// src/tui/components/panels/plan-panel.tsx
+import "react";
+import { Text as Text8 } from "ink";
+
+// src/tui/components/shared/scrollable-list.tsx
 import "react";
-import { Text as Text10 } from "ink";
+import { Box as Box6, Text as Text7, useStdout as useStdout2 } from "ink";
+import { jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
+function ScrollableList({ items, selectedIndex, height, isFocused }) {
+  const { stdout } = useStdout2();
+  const termWidth = stdout?.columns ?? 80;
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx6(Box6, { children: /* @__PURE__ */ jsx6(Text7, { dimColor: true, children: "  No items." }) });
+  }
+  const visibleHeight = Math.max(1, height - 1);
+  let start = 0;
+  if (selectedIndex >= visibleHeight) {
+    start = selectedIndex - visibleHeight + 1;
+  }
+  const visibleItems = items.slice(start, start + visibleHeight);
+  return /* @__PURE__ */ jsxs7(Box6, { flexDirection: "column", children: [
+    visibleItems.map((item, i) => {
+      const actualIndex = start + i;
+      const isSelected = actualIndex === selectedIndex && isFocused;
+      const prefix = isSelected ? " \u25B6 " : "   ";
+      const sublabel = item.sublabel ? ` ${item.sublabel}` : "";
+      const rightLabel = item.rightLabel ?? "";
+      const maxLabelWidth = Math.max(10, termWidth - prefix.length - sublabel.length - rightLabel.length - 10);
+      const truncatedLabel = item.label.length > maxLabelWidth ? item.label.slice(0, maxLabelWidth - 1) + "\u2026" : item.label;
+      return /* @__PURE__ */ jsxs7(Box6, { children: [
+        /* @__PURE__ */ jsxs7(
+          Text7,
+          {
+            color: isSelected ? "cyan" : item.color ?? void 0,
+            bold: isSelected,
+            inverse: isSelected,
+            wrap: "truncate",
+            children: [
+              prefix,
+              truncatedLabel,
+              sublabel
+            ]
+          }
+        ),
+        rightLabel && /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
+          " ",
+          rightLabel
+        ] })
+      ] }, item.id);
+    }),
+    items.length > visibleHeight && /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
+      "  [",
+      start + 1,
+      "-",
+      Math.min(start + visibleHeight, items.length),
+      "/",
+      items.length,
+      "]"
+    ] })
+  ] });
+}
 
-// src/tui/stores/machines-store.ts
-import { create as create5 } from "zustand";
-var useMachinesStore = create5((set, get) => ({
-  machines: [],
-  loading: false,
-  error: null,
-  setMachines: (machines) => set({ machines, loading: false, error: null }),
-  updateMachine: (id, patch) => {
-    set((s) => ({
-      machines: s.machines.map((m) => m.id === id ? { ...m, ...patch } : m)
-    }));
-  },
-  removeMachine: (id) => {
-    set((s) => ({ machines: s.machines.filter((m) => m.id !== id) }));
-  },
-  addMachine: (machine) => {
-    const { machines } = get();
-    const existing = machines.findIndex((m) => m.id === machine.id);
-    if (existing >= 0) {
-      set({ machines: machines.map((m, i) => i === existing ? machine : m) });
-    } else {
-      set({ machines: [...machines, machine] });
+// src/tui/components/panels/plan-panel.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function PlanPanel({ height }) {
+  const nodes = usePlanStore((s) => s.nodes);
+  const loading = usePlanStore((s) => s.loading);
+  const error = usePlanStore((s) => s.error);
+  const focusedPanel = useTuiStore((s) => s.focusedPanel);
+  const scrollIndex = useTuiStore((s) => s.scrollIndex.plan);
+  const selectedProjectId = useTuiStore((s) => s.selectedProjectId);
+  const selectedNodeId = useTuiStore((s) => s.selectedNodeId);
+  const projects = useProjectsStore((s) => s.projects);
+  const isFocused = focusedPanel === "plan";
+  const projectName = projects.find((p) => p.id === selectedProjectId)?.name ?? "none";
+  const visibleNodes = nodes.filter((n) => !n.deletedAt);
+  const items = visibleNodes.map((n) => ({
+    id: n.id,
+    label: `${getStatusSymbol(n.status)} ${n.title}`,
+    sublabel: `[${n.status}]`,
+    color: n.id === selectedNodeId ? "cyan" : getStatusColor(n.status)
+  }));
+  return /* @__PURE__ */ jsx7(Panel, { title: `PLAN (${projectName})  d:dispatch`, isFocused, height, children: loading && nodes.length === 0 ? /* @__PURE__ */ jsx7(Spinner, { label: "Loading plan..." }) : error ? /* @__PURE__ */ jsx7(Text8, { color: "red", children: error }) : !selectedProjectId ? /* @__PURE__ */ jsx7(Text8, { dimColor: true, children: "  Select a project to view its plan" }) : visibleNodes.length === 0 ? /* @__PURE__ */ jsx7(Text8, { dimColor: true, children: "  No plan nodes. Use Ctrl+P \u2192 plan create-node" }) : /* @__PURE__ */ jsx7(
+    ScrollableList,
+    {
+      items,
+      selectedIndex: scrollIndex,
+      height: height - 3,
+      isFocused
     }
-  },
-  setLoading: (loading) => set({ loading }),
-  setError: (error) => set({ error, loading: false })
-}));
+  ) });
+}
 
 // src/tui/components/panels/machines-panel.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import "react";
+import { Text as Text9 } from "ink";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function MachinesPanel({ height }) {
   const machines = useMachinesStore((s) => s.machines);
   const loading = useMachinesStore((s) => s.loading);
@@ -835,7 +1447,7 @@ function MachinesPanel({ height }) {
     rightLabel: m.isConnected ? "\u25CF online" : "\u25CB offline",
     color: m.isConnected ? "green" : "gray"
   }));
-  return /* @__PURE__ */ jsx9(Panel, { title: "MACHINES", isFocused, height, children: loading && machines.length === 0 ? /* @__PURE__ */ jsx9(Spinner, { label: "Loading machines..." }) : error ? /* @__PURE__ */ jsx9(Text10, { color: "red", children: error }) : /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(Panel, { title: "MACHINES", isFocused, height, children: loading && machines.length === 0 ? /* @__PURE__ */ jsx8(Spinner, { label: "Loading machines..." }) : error ? /* @__PURE__ */ jsx8(Text9, { color: "red", children: error }) : /* @__PURE__ */ jsx8(
     ScrollableList,
     {
       items,
@@ -848,114 +1460,8 @@ function MachinesPanel({ height }) {
 
 // src/tui/components/panels/output-panel.tsx
 import "react";
-import { Box as Box8, Text as Text11 } from "ink";
-
-// src/tui/stores/execution-store.ts
-import { create as create6 } from "zustand";
-var MAX_LINES = 5e3;
-function flushToolDots(output) {
-  if (output.pendingToolCount === 0) return output.lines;
-  const dots = "\xB7".repeat(output.pendingToolCount);
-  const line = `[Tool Call] ${dots}`;
-  const lines = [...output.lines, line];
-  output.pendingToolCount = 0;
-  return lines;
-}
-function trimRingBuffer(lines) {
-  if (lines.length > MAX_LINES) {
-    lines.splice(0, lines.length - MAX_LINES);
-  }
-  return lines;
-}
-var useExecutionStore = create6((set, get) => ({
-  outputs: /* @__PURE__ */ new Map(),
-  watchingId: null,
-  initExecution: (executionId, nodeId) => {
-    const { outputs } = get();
-    const next = new Map(outputs);
-    next.set(executionId, {
-      executionId,
-      nodeId,
-      lines: [],
-      status: "running",
-      startedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      pendingToolCount: 0
-    });
-    set({ outputs: next });
-  },
-  appendToolCall: (executionId) => {
-    const { outputs } = get();
-    const current = outputs.get(executionId);
-    if (!current) return;
-    const next = new Map(outputs);
-    next.set(executionId, { ...current, pendingToolCount: current.pendingToolCount + 1 });
-    set({ outputs: next });
-  },
-  appendFileChange: (executionId, path, action, added, removed) => {
-    const { outputs } = get();
-    const current = outputs.get(executionId);
-    if (!current) return;
-    const lines = flushToolDots({ ...current });
-    const stats = [
-      added != null && added > 0 ? `+${added}` : null,
-      removed != null && removed > 0 ? `-${removed}` : null
-    ].filter(Boolean).join(" ");
-    lines.push(`[${action}] ${path}${stats ? ` (${stats})` : ""}`);
-    trimRingBuffer(lines);
-    const next = new Map(outputs);
-    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
-    set({ outputs: next });
-  },
-  appendLine: (executionId, line) => {
-    const { outputs } = get();
-    const current = outputs.get(executionId);
-    if (!current) return;
-    const lines = flushToolDots({ ...current });
-    lines.push(line);
-    trimRingBuffer(lines);
-    const next = new Map(outputs);
-    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
-    set({ outputs: next });
-  },
-  appendText: (executionId, text) => {
-    const { outputs } = get();
-    const current = outputs.get(executionId);
-    if (!current) return;
-    const lines = flushToolDots({ ...current });
-    const newLines = text.split("\n");
-    if (lines.length > 0 && newLines.length > 0) {
-      lines[lines.length - 1] += newLines[0];
-      for (let i = 1; i < newLines.length; i++) {
-        lines.push(newLines[i]);
-      }
-    } else {
-      lines.push(...newLines);
-    }
-    trimRingBuffer(lines);
-    const next = new Map(outputs);
-    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
-    set({ outputs: next });
-  },
-  setStatus: (executionId, status) => {
-    const { outputs } = get();
-    const current = outputs.get(executionId);
-    if (!current) return;
-    const lines = flushToolDots({ ...current });
-    const next = new Map(outputs);
-    next.set(executionId, { ...current, lines, status, pendingToolCount: 0 });
-    set({ outputs: next });
-  },
-  setWatching: (watchingId) => set({ watchingId }),
-  clear: (executionId) => {
-    const { outputs } = get();
-    const next = new Map(outputs);
-    next.delete(executionId);
-    set({ outputs: next });
-  }
-}));
-
-// src/tui/components/panels/output-panel.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box7, Text as Text10 } from "ink";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function lineColor(line) {
   if (line.startsWith("[Tool Call]")) return "gray";
   if (line.startsWith("[error]")) return "red";
@@ -977,7 +1483,7 @@ function OutputPanel({ height }) {
     title = `OUTPUT (${shortId}) [${execution.status}]`;
   }
   if (!execution) {
-    return /* @__PURE__ */ jsx10(Panel, { title, isFocused, height, children: /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: "  No active execution. Dispatch a task with 'd' or :dispatch" }) });
+    return /* @__PURE__ */ jsx9(Panel, { title, isFocused, height, children: /* @__PURE__ */ jsx9(Text10, { dimColor: true, children: "  No active execution. Dispatch a task with 'd' or :dispatch" }) });
   }
   const lines = execution.lines;
   const isRunning = execution.status === "running";
@@ -989,11 +1495,11 @@ function OutputPanel({ height }) {
     start = Math.max(0, scrollIndex);
   }
   const visibleLines = lines.slice(start, start + visibleHeight);
-  return /* @__PURE__ */ jsx10(Panel, { title, isFocused, height, children: /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", children: [
-    visibleLines.map((line, i) => /* @__PURE__ */ jsx10(Text11, { color: lineColor(line), dimColor: line.startsWith("[Tool Call]"), wrap: "truncate", children: truncate(line, 200) }, start + i)),
-    hasPendingTools && /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: "[Tool Call] " + "\xB7".repeat(execution.pendingToolCount) }),
-    isRunning && !hasPendingTools && /* @__PURE__ */ jsx10(Spinner, { label: "Running..." }),
-    lines.length > visibleHeight && /* @__PURE__ */ jsxs9(Text11, { dimColor: true, children: [
+  return /* @__PURE__ */ jsx9(Panel, { title, isFocused, height, children: /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", children: [
+    visibleLines.map((line, i) => /* @__PURE__ */ jsx9(Text10, { color: lineColor(line), dimColor: line.startsWith("[Tool Call]"), wrap: "truncate", children: truncate(line, 200) }, start + i)),
+    hasPendingTools && /* @__PURE__ */ jsx9(Text10, { dimColor: true, children: "[Tool Call] " + "\xB7".repeat(execution.pendingToolCount) }),
+    isRunning && !hasPendingTools && /* @__PURE__ */ jsx9(Spinner, { label: "Running..." }),
+    lines.length > visibleHeight && /* @__PURE__ */ jsxs8(Text10, { dimColor: true, children: [
       "  [",
       start + 1,
       "-",
@@ -1005,17 +1511,172 @@ function OutputPanel({ height }) {
   ] }) });
 }
 
-// src/tui/components/panels/detail-overlay.tsx
+// src/tui/components/panels/chat-panel.tsx
+import "react";
+import { Box as Box8, Text as Text11 } from "ink";
+import { TextInput } from "@inkjs/ui";
+
+// src/tui/stores/chat-store.ts
+import { create as create7 } from "zustand";
+var useChatStore = create7((set, get) => ({
+  messages: [],
+  sessionId: null,
+  projectId: null,
+  nodeId: null,
+  streaming: false,
+  streamBuffer: "",
+  addMessage: (role, content) => {
+    set((s) => ({
+      messages: [...s.messages, { role, content, timestamp: (/* @__PURE__ */ new Date()).toISOString() }]
+    }));
+  },
+  appendStream: (text) => {
+    set((s) => ({ streamBuffer: s.streamBuffer + text }));
+  },
+  flushStream: () => {
+    const { streamBuffer } = get();
+    if (streamBuffer.length > 0) {
+      set((s) => ({
+        messages: [...s.messages, { role: "assistant", content: streamBuffer, timestamp: (/* @__PURE__ */ new Date()).toISOString() }],
+        streamBuffer: ""
+      }));
+    }
+  },
+  setSessionId: (sessionId) => set({ sessionId }),
+  setContext: (projectId, nodeId) => set({ projectId, nodeId: nodeId ?? null }),
+  setStreaming: (streaming) => set({ streaming }),
+  clear: () => set({ messages: [], sessionId: null, streamBuffer: "", streaming: false })
+}));
+
+// src/tui/components/panels/chat-panel.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChatPanel({ height }) {
+  const messages = useChatStore((s) => s.messages);
+  const streaming = useChatStore((s) => s.streaming);
+  const streamBuffer = useChatStore((s) => s.streamBuffer);
+  const sessionId = useChatStore((s) => s.sessionId);
+  const displayLines = [];
+  for (let i = 0; i < messages.length; i++) {
+    const m = messages[i];
+    const prefix = m.role === "user" ? "> " : "  ";
+    displayLines.push({ key: `msg-${i}`, text: `${prefix}${m.content}`, color: m.role === "user" ? "cyan" : void 0 });
+  }
+  if (streaming && streamBuffer) {
+    displayLines.push({ key: "stream", text: `  ${streamBuffer}` });
+  }
+  const contentHeight = height - 4;
+  const visibleLines = displayLines.slice(-Math.max(1, contentHeight));
+  const titleSuffix = sessionId ? ` (${sessionId.slice(0, 8)})` : "";
+  return /* @__PURE__ */ jsx10(Panel, { title: `Chat${titleSuffix}`, isFocused: false, height, children: /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx10(Box8, { flexDirection: "column", height: Math.max(1, contentHeight - 1), children: visibleLines.map((line) => /* @__PURE__ */ jsx10(Text11, { color: line.color, wrap: "truncate", children: line.text }, line.key)) }),
+    /* @__PURE__ */ jsx10(Box8, { children: streaming ? /* @__PURE__ */ jsxs9(Box8, { children: [
+      /* @__PURE__ */ jsx10(Spinner, {}),
+      /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: " Streaming..." })
+    ] }) : /* @__PURE__ */ jsxs9(Box8, { children: [
+      /* @__PURE__ */ jsx10(Text11, { color: "cyan", children: "> " }),
+      /* @__PURE__ */ jsx10(
+        TextInput,
+        {
+          placeholder: "Type a message...",
+          onSubmit: (value) => {
+            if (value.trim()) {
+              useChatStore.getState().addMessage("user", value.trim());
+            }
+          }
+        }
+      )
+    ] }) })
+  ] }) });
+}
+
+// src/tui/components/panels/session-panel.tsx
 import "react";
 import { Box as Box9, Text as Text12 } from "ink";
+import { TextInput as TextInput2 } from "@inkjs/ui";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function lineColor2(line) {
+  if (line.startsWith("[Tool Call]")) return "gray";
+  if (line.startsWith("[error]")) return "red";
+  if (line.startsWith("[progress]")) return "cyan";
+  if (line.startsWith("[plan]")) return "magenta";
+  if (line.startsWith("[created]") || line.startsWith("[modified]") || line.startsWith("[deleted]")) return "yellow";
+  if (line.startsWith("> ")) return "cyan";
+  return void 0;
+}
+function SessionPanel({ height, title, sessionType, onSubmit }) {
+  const watchingId = useExecutionStore((s) => s.watchingId);
+  const outputs = useExecutionStore((s) => s.outputs);
+  const streaming = useChatStore((s) => s.streaming);
+  const mode = useTuiStore((s) => s.mode);
+  const execution = watchingId ? outputs.get(watchingId) : null;
+  const isRunning = execution?.status === "running";
+  const inputHeight = 2;
+  const outputHeight = Math.max(1, height - 5 - inputHeight);
+  const isInputActive = mode === "input";
+  const lines = execution?.lines ?? [];
+  const hasPendingTools = (execution?.pendingToolCount ?? 0) > 0;
+  const start = Math.max(0, lines.length - outputHeight);
+  const visibleLines = lines.slice(start, start + outputHeight);
+  let statusLabel = "";
+  if (execution) {
+    statusLabel = ` [${execution.status}]`;
+  }
+  const hint = sessionType === "playground" ? "Describe what you want to build or explore" : "Describe the plan you want to generate";
+  return /* @__PURE__ */ jsx11(Panel, { title: `${title}${statusLabel}`, isFocused: true, height, children: /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", height: outputHeight, children: [
+      visibleLines.length === 0 && !isRunning ? /* @__PURE__ */ jsxs10(Text12, { dimColor: true, children: [
+        "  ",
+        hint,
+        ". Type below and press Enter."
+      ] }) : visibleLines.map((line, i) => /* @__PURE__ */ jsx11(Text12, { color: lineColor2(line), dimColor: line.startsWith("[Tool Call]"), wrap: "truncate", children: truncate(line, 200) }, start + i)),
+      hasPendingTools && /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "[Tool Call] " + "\xB7".repeat(execution.pendingToolCount) }),
+      isRunning && !hasPendingTools && /* @__PURE__ */ jsx11(Spinner, { label: "Running..." })
+    ] }),
+    lines.length > outputHeight && /* @__PURE__ */ jsxs10(Text12, { dimColor: true, children: [
+      "  [",
+      start + 1,
+      "-",
+      Math.min(start + outputHeight, lines.length),
+      "/",
+      lines.length,
+      "]"
+    ] }),
+    /* @__PURE__ */ jsx11(Box9, { borderStyle: "single", borderColor: isInputActive ? "cyan" : "gray", paddingX: 1, children: isRunning || streaming ? /* @__PURE__ */ jsxs10(Box9, { children: [
+      /* @__PURE__ */ jsx11(Spinner, {}),
+      /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: " Agent is working... (press Esc to return to navigation)" })
+    ] }) : /* @__PURE__ */ jsxs10(Box9, { children: [
+      /* @__PURE__ */ jsx11(Text12, { color: "cyan", children: "> " }),
+      isInputActive ? /* @__PURE__ */ jsx11(
+        TextInput2,
+        {
+          placeholder: hint,
+          onSubmit: (value) => {
+            if (value.trim()) {
+              const msg = value.trim();
+              if (watchingId) {
+                useExecutionStore.getState().appendLine(watchingId, `> ${msg}`);
+              }
+              useChatStore.getState().addMessage("user", msg);
+              onSubmit?.(msg);
+            }
+          }
+        }
+      ) : /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "Press Enter to start typing..." })
+    ] }) })
+  ] }) });
+}
+
+// src/tui/components/panels/detail-overlay.tsx
+import "react";
+import { Box as Box10, Text as Text13 } from "ink";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function DetailOverlay() {
   const showDetail = useTuiStore((s) => s.showDetail);
   const detailType = useTuiStore((s) => s.detailType);
   const detailId = useTuiStore((s) => s.detailId);
   if (!showDetail || !detailType || !detailId) return null;
-  return /* @__PURE__ */ jsxs10(
-    Box9,
+  return /* @__PURE__ */ jsxs11(
+    Box10,
     {
       flexDirection: "column",
       borderStyle: "round",
@@ -1023,124 +1684,218 @@ function DetailOverlay() {
       paddingX: 2,
       paddingY: 1,
       children: [
-        detailType === "project" && /* @__PURE__ */ jsx11(ProjectDetail, { id: detailId }),
-        detailType === "node" && /* @__PURE__ */ jsx11(NodeDetail, { id: detailId }),
-        detailType === "machine" && /* @__PURE__ */ jsx11(MachineDetail, { id: detailId }),
-        /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "Press Esc to close" })
+        detailType === "project" && /* @__PURE__ */ jsx12(ProjectDetail, { id: detailId }),
+        detailType === "node" && /* @__PURE__ */ jsx12(NodeDetail, { id: detailId }),
+        detailType === "machine" && /* @__PURE__ */ jsx12(MachineDetail, { id: detailId }),
+        /* @__PURE__ */ jsx12(Text13, { dimColor: true, children: "Press Esc to close" })
       ]
     }
   );
 }
 function ProjectDetail({ id }) {
   const project = useProjectsStore((s) => s.projects.find((p) => p.id === id));
-  if (!project) return /* @__PURE__ */ jsx11(Text12, { color: "red", children: "Project not found" });
-  return /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx11(Text12, { bold: true, color: "cyan", children: project.name }),
-    /* @__PURE__ */ jsx11(Text12, { children: " " }),
-    /* @__PURE__ */ jsx11(Field, { label: "ID", value: project.id }),
-    /* @__PURE__ */ jsx11(Field, { label: "Status", value: project.status, color: getStatusColor(project.status) }),
-    /* @__PURE__ */ jsx11(Field, { label: "Description", value: project.description || "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Health", value: project.health ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Progress", value: `${project.progress}%` }),
-    /* @__PURE__ */ jsx11(Field, { label: "Working Dir", value: project.workingDirectory ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Repository", value: project.repository ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Delivery", value: project.deliveryMode ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Start Date", value: project.startDate ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Target Date", value: project.targetDate ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Created", value: formatRelativeTime(project.createdAt) }),
-    /* @__PURE__ */ jsx11(Field, { label: "Updated", value: formatRelativeTime(project.updatedAt) }),
-    /* @__PURE__ */ jsx11(Text12, { children: " " })
+  if (!project) return /* @__PURE__ */ jsx12(Text13, { color: "red", children: "Project not found" });
+  return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx12(Text13, { bold: true, color: "cyan", children: project.name }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " }),
+    /* @__PURE__ */ jsx12(Field, { label: "ID", value: project.id }),
+    /* @__PURE__ */ jsx12(Field, { label: "Status", value: project.status, color: getStatusColor(project.status) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Description", value: project.description || "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Health", value: project.health ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Progress", value: `${project.progress}%` }),
+    /* @__PURE__ */ jsx12(Field, { label: "Working Dir", value: project.workingDirectory ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Repository", value: project.repository ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Delivery", value: project.deliveryMode ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Start Date", value: project.startDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Target Date", value: project.targetDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Created", value: formatRelativeTime(project.createdAt) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Updated", value: formatRelativeTime(project.updatedAt) }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " })
   ] });
 }
 function NodeDetail({ id }) {
   const node = usePlanStore((s) => s.nodes.find((n) => n.id === id));
-  if (!node) return /* @__PURE__ */ jsx11(Text12, { color: "red", children: "Node not found" });
-  return /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx11(Text12, { bold: true, color: "cyan", children: node.title }),
-    /* @__PURE__ */ jsx11(Text12, { children: " " }),
-    /* @__PURE__ */ jsx11(Field, { label: "ID", value: node.id }),
-    /* @__PURE__ */ jsx11(Field, { label: "Type", value: node.type }),
-    /* @__PURE__ */ jsx11(Field, { label: "Status", value: node.status, color: getStatusColor(node.status) }),
-    /* @__PURE__ */ jsx11(Field, { label: "Description", value: node.description || "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Priority", value: node.priority ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Estimate", value: node.estimate ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Start Date", value: node.startDate ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "End Date", value: node.endDate ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Due Date", value: node.dueDate ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Branch", value: node.branchName ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "PR URL", value: node.prUrl ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Execution ID", value: node.executionId ?? "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Exec Started", value: node.executionStartedAt ? formatRelativeTime(node.executionStartedAt) : "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Exec Completed", value: node.executionCompletedAt ? formatRelativeTime(node.executionCompletedAt) : "\u2014" }),
-    /* @__PURE__ */ jsx11(Text12, { children: " " })
+  if (!node) return /* @__PURE__ */ jsx12(Text13, { color: "red", children: "Node not found" });
+  return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx12(Text13, { bold: true, color: "cyan", children: node.title }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " }),
+    /* @__PURE__ */ jsx12(Field, { label: "ID", value: node.id }),
+    /* @__PURE__ */ jsx12(Field, { label: "Type", value: node.type }),
+    /* @__PURE__ */ jsx12(Field, { label: "Status", value: node.status, color: getStatusColor(node.status) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Description", value: node.description || "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Priority", value: node.priority ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Estimate", value: node.estimate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Start Date", value: node.startDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "End Date", value: node.endDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Due Date", value: node.dueDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Branch", value: node.branchName ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "PR URL", value: node.prUrl ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Execution ID", value: node.executionId ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Exec Started", value: node.executionStartedAt ? formatRelativeTime(node.executionStartedAt) : "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Exec Completed", value: node.executionCompletedAt ? formatRelativeTime(node.executionCompletedAt) : "\u2014" }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " })
   ] });
 }
 function MachineDetail({ id }) {
   const machine = useMachinesStore((s) => s.machines.find((m) => m.id === id));
-  if (!machine) return /* @__PURE__ */ jsx11(Text12, { color: "red", children: "Machine not found" });
-  return /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx11(Text12, { bold: true, color: "cyan", children: machine.name }),
-    /* @__PURE__ */ jsx11(Text12, { children: " " }),
-    /* @__PURE__ */ jsx11(Field, { label: "ID", value: machine.id }),
-    /* @__PURE__ */ jsx11(Field, { label: "Hostname", value: machine.hostname }),
-    /* @__PURE__ */ jsx11(Field, { label: "Platform", value: machine.platform }),
-    /* @__PURE__ */ jsx11(Field, { label: "Env Type", value: machine.environmentType }),
-    /* @__PURE__ */ jsx11(Field, { label: "Connected", value: machine.isConnected ? "Yes" : "No", color: machine.isConnected ? "green" : "red" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Providers", value: machine.providers.join(", ") || "\u2014" }),
-    /* @__PURE__ */ jsx11(Field, { label: "Registered", value: formatRelativeTime(machine.registeredAt) }),
-    /* @__PURE__ */ jsx11(Field, { label: "Last Seen", value: formatRelativeTime(machine.lastSeenAt) }),
-    /* @__PURE__ */ jsx11(Text12, { children: " " })
+  if (!machine) return /* @__PURE__ */ jsx12(Text13, { color: "red", children: "Machine not found" });
+  return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx12(Text13, { bold: true, color: "cyan", children: machine.name }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " }),
+    /* @__PURE__ */ jsx12(Field, { label: "ID", value: machine.id }),
+    /* @__PURE__ */ jsx12(Field, { label: "Hostname", value: machine.hostname }),
+    /* @__PURE__ */ jsx12(Field, { label: "Platform", value: machine.platform }),
+    /* @__PURE__ */ jsx12(Field, { label: "Env Type", value: machine.environmentType }),
+    /* @__PURE__ */ jsx12(Field, { label: "Connected", value: machine.isConnected ? "Yes" : "No", color: machine.isConnected ? "green" : "red" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Providers", value: machine.providers.join(", ") || "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Registered", value: formatRelativeTime(machine.registeredAt) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Last Seen", value: formatRelativeTime(machine.lastSeenAt) }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " })
   ] });
 }
 function Field({ label, value, color }) {
-  return /* @__PURE__ */ jsxs10(Box9, { children: [
-    /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: label.padEnd(16) }),
-    color ? /* @__PURE__ */ jsx11(Text12, { color, children: value }) : /* @__PURE__ */ jsx11(Text12, { children: value })
+  return /* @__PURE__ */ jsxs11(Box10, { children: [
+    /* @__PURE__ */ jsx12(Text13, { dimColor: true, children: label.padEnd(16) }),
+    color ? /* @__PURE__ */ jsx12(Text13, { color, children: value }) : /* @__PURE__ */ jsx12(Text13, { children: value })
   ] });
 }
 
+// src/tui/components/shared/approval-dialog.tsx
+import { useState as useState2 } from "react";
+import { Box as Box11, Text as Text14, useInput as useInput2 } from "ink";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function ApprovalDialog({ question, options, onSelect, onDismiss }) {
+  const [selectedIndex, setSelectedIndex] = useState2(0);
+  useInput2((input, key) => {
+    if (key.escape) {
+      onDismiss();
+      return;
+    }
+    if (key.return) {
+      onSelect(selectedIndex);
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setSelectedIndex((i) => Math.min(options.length - 1, i + 1));
+    }
+    const num = parseInt(input, 10);
+    if (num >= 1 && num <= options.length) {
+      onSelect(num - 1);
+    }
+  });
+  return /* @__PURE__ */ jsxs12(
+    Box11,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "yellow",
+      paddingX: 1,
+      paddingY: 0,
+      children: [
+        /* @__PURE__ */ jsx13(Text14, { color: "yellow", bold: true, children: "Approval Required" }),
+        /* @__PURE__ */ jsx13(Text14, { wrap: "wrap", children: question }),
+        /* @__PURE__ */ jsx13(Box11, { flexDirection: "column", marginTop: 1, children: options.map((opt, i) => /* @__PURE__ */ jsx13(Box11, { children: /* @__PURE__ */ jsxs12(Text14, { color: i === selectedIndex ? "cyan" : "white", children: [
+          i === selectedIndex ? "\u25B8 " : "  ",
+          "[",
+          i + 1,
+          "] ",
+          opt
+        ] }) }, i)) }),
+        /* @__PURE__ */ jsx13(Box11, { marginTop: 1, children: /* @__PURE__ */ jsxs12(Text14, { dimColor: true, children: [
+          "\u2191\u2193/jk navigate \u2022 Enter select \u2022 1-",
+          options.length,
+          " quick select \u2022 Esc dismiss"
+        ] }) })
+      ]
+    }
+  );
+}
+
 // src/tui/components/layout/main-layout.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function MainLayout() {
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function MainLayout({ onSessionMessage }) {
   const showHelp = useTuiStore((s) => s.showHelp);
   const showDetail = useTuiStore((s) => s.showDetail);
-  const { stdout } = useStdout();
+  const showChat = useTuiStore((s) => s.showChat);
+  const activeView = useTuiStore((s) => s.activeView);
+  const mode = useTuiStore((s) => s.mode);
+  const searchOpen = useSearchStore((s) => s.isOpen);
+  const pendingApproval = useExecutionStore((s) => s.pendingApproval);
+  const { stdout } = useStdout3();
   const termHeight = stdout?.rows ?? 24;
   const termWidth = stdout?.columns ?? 80;
-  const topRowHeight = Math.floor((termHeight - 4) / 2);
-  const bottomRowHeight = termHeight - 4 - topRowHeight;
+  const panelOpen = searchOpen || mode === "palette";
+  const bottomPanelHeight = panelOpen ? Math.floor(termHeight / 2) : 1;
+  const contentHeight = termHeight - 2 - bottomPanelHeight;
   if (showHelp) {
-    return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", width: termWidth, height: termHeight, children: [
-      /* @__PURE__ */ jsx12(StatusBar, {}),
-      /* @__PURE__ */ jsx12(HelpOverlay, {}),
-      /* @__PURE__ */ jsx12(CommandLine, {})
+    return /* @__PURE__ */ jsxs13(Box12, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+      /* @__PURE__ */ jsx14(StatusBar, {}),
+      /* @__PURE__ */ jsx14(HelpOverlay, {}),
+      /* @__PURE__ */ jsx14(CommandLine, { height: 1 })
     ] });
   }
   if (showDetail) {
-    return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", width: termWidth, height: termHeight, children: [
-      /* @__PURE__ */ jsx12(StatusBar, {}),
-      /* @__PURE__ */ jsx12(DetailOverlay, {}),
-      /* @__PURE__ */ jsx12(CommandLine, {})
+    return /* @__PURE__ */ jsxs13(Box12, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+      /* @__PURE__ */ jsx14(StatusBar, {}),
+      /* @__PURE__ */ jsx14(DetailOverlay, {}),
+      /* @__PURE__ */ jsx14(CommandLine, { height: 1 })
     ] });
   }
-  return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", width: termWidth, height: termHeight, children: [
-    /* @__PURE__ */ jsx12(StatusBar, {}),
-    /* @__PURE__ */ jsxs11(Box10, { flexDirection: "row", height: topRowHeight, children: [
-      /* @__PURE__ */ jsx12(Box10, { width: "30%", children: /* @__PURE__ */ jsx12(ProjectsPanel, { height: topRowHeight }) }),
-      /* @__PURE__ */ jsx12(Box10, { flexGrow: 1, children: /* @__PURE__ */ jsx12(PlanPanel, { height: topRowHeight }) })
-    ] }),
-    /* @__PURE__ */ jsxs11(Box10, { flexDirection: "row", height: bottomRowHeight, children: [
-      /* @__PURE__ */ jsx12(Box10, { width: "30%", children: /* @__PURE__ */ jsx12(MachinesPanel, { height: bottomRowHeight }) }),
-      /* @__PURE__ */ jsx12(Box10, { flexGrow: 1, children: /* @__PURE__ */ jsx12(OutputPanel, { height: bottomRowHeight }) })
-    ] }),
-    /* @__PURE__ */ jsx12(SearchOverlay, {}),
-    /* @__PURE__ */ jsx12(CommandLine, {})
+  const approvalOverlay = pendingApproval ? /* @__PURE__ */ jsx14(Box12, { position: "absolute", marginTop: 4, marginLeft: Math.floor(termWidth / 4), children: /* @__PURE__ */ jsx14(
+    ApprovalDialog,
+    {
+      question: pendingApproval.question,
+      options: pendingApproval.options,
+      onSelect: (index) => {
+        useExecutionStore.getState().setPendingApproval(null);
+        void index;
+      },
+      onDismiss: () => {
+        useExecutionStore.getState().setPendingApproval(null);
+      }
+    }
+  ) }) : null;
+  let content;
+  if (activeView === "plan-gen") {
+    content = /* @__PURE__ */ jsx14(Box12, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(SessionPanel, { height: contentHeight, title: "PLAN GENERATION", sessionType: "plan-generate", onSubmit: onSessionMessage }) }) });
+  } else if (activeView === "projects") {
+    content = /* @__PURE__ */ jsxs13(Box12, { flexDirection: "row", height: contentHeight, children: [
+      /* @__PURE__ */ jsx14(Box12, { width: "40%", children: /* @__PURE__ */ jsx14(ProjectsPanel, { height: contentHeight }) }),
+      /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(PlanPanel, { height: contentHeight }) })
+    ] });
+  } else if (activeView === "playground") {
+    content = /* @__PURE__ */ jsx14(Box12, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(SessionPanel, { height: contentHeight, title: "PLAYGROUND", sessionType: "playground", onSubmit: onSessionMessage }) }) });
+  } else if (activeView === "output") {
+    content = /* @__PURE__ */ jsx14(Box12, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(OutputPanel, { height: contentHeight }) }) });
+  } else {
+    const topRowHeight = Math.floor(contentHeight / 2);
+    const bottomRowHeight = contentHeight - topRowHeight;
+    content = /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      /* @__PURE__ */ jsxs13(Box12, { flexDirection: "row", height: topRowHeight, children: [
+        /* @__PURE__ */ jsx14(Box12, { width: "30%", children: /* @__PURE__ */ jsx14(ProjectsPanel, { height: topRowHeight }) }),
+        /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(PlanPanel, { height: topRowHeight }) })
+      ] }),
+      /* @__PURE__ */ jsxs13(Box12, { flexDirection: "row", height: bottomRowHeight, children: [
+        /* @__PURE__ */ jsx14(Box12, { width: "30%", children: /* @__PURE__ */ jsx14(MachinesPanel, { height: bottomRowHeight }) }),
+        /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: showChat ? /* @__PURE__ */ jsx14(ChatPanel, { height: bottomRowHeight }) : /* @__PURE__ */ jsx14(OutputPanel, { height: bottomRowHeight }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13(Box12, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+    /* @__PURE__ */ jsx14(StatusBar, {}),
+    content,
+    /* @__PURE__ */ jsx14(SearchOverlay, {}),
+    approvalOverlay,
+    /* @__PURE__ */ jsx14(CommandLine, { height: bottomPanelHeight })
   ] });
 }
 
 // src/tui/hooks/use-vim-mode.ts
 import { useCallback, useRef } from "react";
-import { useInput as useInput2, useApp } from "ink";
+import { useInput as useInput3, useApp } from "ink";
 
 // src/tui/lib/vim-state-machine.ts
 function initialVimState() {
@@ -1170,92 +1925,115 @@ function vimReducer(state, action) {
         { type: "search", value: state.searchQuery }
       ];
     case "key":
-      return handleKey(state, action.key, action.ctrl);
+      return handleKey(state, action.key, action.ctrl, action.meta);
   }
 }
-function handleKey(state, key, ctrl) {
+function handleKey(state, key, ctrl, meta) {
   if (key === "escape") {
     return [{ ...state, mode: "normal", pendingKeys: "", commandBuffer: "", searchQuery: "" }, { type: "none" }];
   }
   switch (state.mode) {
     case "normal":
-      return handleNormalMode(state, key, ctrl);
-    case "command":
-      return handleCommandMode(state, key);
+      return handleNormalMode(state, key, ctrl, meta);
+    case "palette":
+      return handlePaletteMode(state, key);
     case "search":
       return handleSearchMode(state, key);
-    case "insert":
-      return handleInsertMode(state, key);
+    case "input":
+      return handleInputMode(state, key);
   }
 }
-function handleNormalMode(state, key, ctrl) {
+function handleNormalMode(state, key, ctrl, meta) {
   if (ctrl) {
-    if (key === "u") return [state, { type: "scroll", direction: "page_up" }];
-    if (key === "d") return [state, { type: "scroll", direction: "page_down" }];
-    if (key === "c") return [state, { type: "quit" }];
-    return [state, { type: "none" }];
+    switch (key) {
+      case "p":
+        return [{ ...state, mode: "palette", commandBuffer: "" }, { type: "palette" }];
+      case "f":
+        return [state, { type: "search" }];
+      case "c":
+        return [state, { type: "quit" }];
+      case "r":
+        return [state, { type: "refresh" }];
+      default:
+        return [state, { type: "none" }];
+    }
   }
-  if (state.pendingKeys === "g") {
-    if (key === "g") {
-      return [{ ...state, pendingKeys: "" }, { type: "scroll", direction: "top" }];
+  if (meta) {
+    switch (key) {
+      case "x":
+        return [{ ...state, mode: "palette", commandBuffer: "" }, { type: "palette" }];
+      default:
+        return [state, { type: "none" }];
     }
-    return [{ ...state, pendingKeys: "" }, { type: "none" }];
   }
   switch (key) {
-    // Navigation
+    // Arrow navigation (primary — no j/k needed)
+    case "up":
+      return [state, { type: "scroll", direction: "up" }];
+    case "down":
+      return [state, { type: "scroll", direction: "down" }];
+    case "left":
+      return [state, { type: "focus", direction: "left" }];
+    case "right":
+      return [state, { type: "focus", direction: "right" }];
+    // Also keep j/k/h/l as secondary navigation for power users
     case "j":
-    case "return":
-      if (key === "j") return [state, { type: "scroll", direction: "down" }];
-      return [state, { type: "select" }];
+      return [state, { type: "scroll", direction: "down" }];
     case "k":
       return [state, { type: "scroll", direction: "up" }];
     case "h":
       return [state, { type: "focus", direction: "left" }];
     case "l":
       return [state, { type: "focus", direction: "right" }];
-    // Panel jump
+    // Selection
+    case "return":
+      return [state, { type: "select" }];
+    case " ":
+      return [state, { type: "select" }];
+    // Page navigation
+    case "pageup":
+      return [state, { type: "scroll", direction: "page_up" }];
+    case "pagedown":
+      return [state, { type: "scroll", direction: "page_down" }];
+    case "home":
+      return [state, { type: "scroll", direction: "top" }];
+    case "end":
+      return [state, { type: "scroll", direction: "bottom" }];
+    // Tab cycles panels
+    case "tab":
+      return [state, { type: "focus", direction: "right" }];
+    // View switch by number
     case "1":
-      return [state, { type: "focus", panel: 0 }];
+      return [state, { type: "view", value: "dashboard" }];
     case "2":
-      return [state, { type: "focus", panel: 1 }];
+      return [state, { type: "view", value: "plan-gen" }];
     case "3":
-      return [state, { type: "focus", panel: 2 }];
+      return [state, { type: "view", value: "projects" }];
     case "4":
-      return [state, { type: "focus", panel: 3 }];
-    case "tab":
-      return [state, { type: "focus", direction: "right" }];
-    // Top/bottom
-    case "g":
-      return [{ ...state, pendingKeys: "g" }, { type: "none" }];
-    case "G":
-      return [state, { type: "scroll", direction: "bottom" }];
-    // Mode switches
-    case ":":
-      return [{ ...state, mode: "command", commandBuffer: "" }, { type: "none" }];
-    case "/":
-      return [{ ...state, mode: "search", searchQuery: "" }, { type: "none" }];
-    case "i":
-      return [{ ...state, mode: "insert" }, { type: "none" }];
-    // Actions
+      return [state, { type: "view", value: "playground" }];
+    case "5":
+      return [state, { type: "view", value: "output" }];
+    // Function-key style shortcuts (single letter, no prefix needed)
     case "d":
       return [state, { type: "dispatch" }];
-    case "c":
-      return [state, { type: "cancel" }];
-    case "r":
-      return [state, { type: "refresh" }];
     case "q":
       return [state, { type: "quit" }];
     case "?":
       return [state, { type: "help" }];
+    case "/":
+      return [state, { type: "search" }];
+    // Legacy `:` still works — enters palette mode
+    case ":":
+      return [{ ...state, mode: "palette", commandBuffer: "" }, { type: "palette" }];
     default:
       return [state, { type: "none" }];
   }
 }
-function handleCommandMode(state, key) {
+function handlePaletteMode(state, key) {
   if (key === "return") {
     return [
       { ...state, mode: "normal" },
-      { type: "command", value: state.commandBuffer }
+      { type: "command", value: "__palette_select__" }
     ];
   }
   if (key === "backspace" || key === "delete") {
@@ -1265,8 +2043,14 @@ function handleCommandMode(state, key) {
     }
     return [{ ...state, commandBuffer: newBuffer }, { type: "none" }];
   }
+  if (key === "up") {
+    return [state, { type: "scroll", direction: "up" }];
+  }
+  if (key === "down") {
+    return [state, { type: "scroll", direction: "down" }];
+  }
   if (key === "tab") {
-    return [state, { type: "command", value: `__autocomplete__${state.commandBuffer}` }];
+    return [state, { type: "scroll", direction: "down" }];
   }
   if (key.length === 1) {
     return [{ ...state, commandBuffer: state.commandBuffer + key }, { type: "none" }];
@@ -1293,7 +2077,7 @@ function handleSearchMode(state, key) {
   }
   return [state, { type: "none" }];
 }
-function handleInsertMode(state, _) {
+function handleInputMode(state, _) {
   return [state, { type: "none" }];
 }
 
@@ -1306,6 +2090,16 @@ function useVimMode(callbacks = {}) {
     (effect) => {
       switch (effect.type) {
         case "scroll":
+          if (vimState.current.mode === "palette") {
+            const filtered = getFilteredPaletteCommands(vimState.current.commandBuffer);
+            const idx = store.paletteIndex;
+            if (effect.direction === "up") {
+              store.setPaletteIndex(Math.max(0, idx - 1));
+            } else if (effect.direction === "down") {
+              store.setPaletteIndex(Math.min(filtered.length - 1, idx + 1));
+            }
+            break;
+          }
           switch (effect.direction) {
             case "up":
               store.scrollUp();
@@ -1336,19 +2130,32 @@ function useVimMode(callbacks = {}) {
             store.focusNext();
           }
           break;
-        case "select":
-          callbacks.onSelect?.();
+        case "select": {
+          const view = store.activeView;
+          if (view === "playground" || view === "plan-gen" || view === "output") {
+            vimState.current = { ...vimState.current, mode: "input" };
+            store.setMode("input");
+          } else {
+            callbacks.onSelect?.();
+          }
+          break;
+        }
+        case "palette":
           break;
         case "command":
-          if (effect.value?.startsWith("__autocomplete__")) {
+          if (effect.value === "__palette_select__") {
+            const filtered = getFilteredPaletteCommands(vimState.current.commandBuffer);
+            const selected = filtered[store.paletteIndex];
+            if (selected) {
+              callbacks.onCommand?.(selected.name);
+            }
+          } else if (effect.value?.startsWith("__autocomplete__")) {
           } else if (effect.value) {
             callbacks.onCommand?.(effect.value);
           }
           break;
         case "search":
-          if (effect.value) {
-            callbacks.onSearch?.(effect.value);
-          }
+          useSearchStore.getState().open();
           break;
         case "dispatch":
           callbacks.onDispatch?.();
@@ -1361,19 +2168,30 @@ function useVimMode(callbacks = {}) {
           break;
         case "quit":
           exit();
+          setTimeout(() => process.exit(0), 100);
           break;
         case "help":
           store.toggleHelp();
           break;
+        case "chat":
+          store.toggleChat();
+          break;
+        case "view":
+          if (effect.value === "dashboard" || effect.value === "plan-gen" || effect.value === "projects" || effect.value === "playground" || effect.value === "output") {
+            store.setActiveView(effect.value);
+          }
+          break;
         case "none":
           break;
       }
     },
     [store, callbacks, exit]
   );
-  useInput2((input, key) => {
-    if (store.showHelp || store.showSearch || store.showDetail) {
+  useInput3((input, key) => {
+    const searchOpen = useSearchStore.getState().isOpen;
+    if (store.showHelp || store.showSearch || store.showDetail || searchOpen) {
       if (key.escape) {
+        if (searchOpen) useSearchStore.getState().close();
         store.closeOverlays();
         vimState.current = initialVimState();
         store.setMode("normal");
@@ -1388,15 +2206,20 @@ function useVimMode(callbacks = {}) {
     else if (key.return) keyStr = "return";
     else if (key.backspace || key.delete) keyStr = "backspace";
     else if (key.tab) keyStr = "tab";
-    else if (key.upArrow) keyStr = "k";
-    else if (key.downArrow) keyStr = "j";
-    else if (key.leftArrow) keyStr = "h";
-    else if (key.rightArrow) keyStr = "l";
+    else if (key.upArrow) keyStr = "up";
+    else if (key.downArrow) keyStr = "down";
+    else if (key.leftArrow) keyStr = "left";
+    else if (key.rightArrow) keyStr = "right";
+    else if (key.pageUp) keyStr = "pageup";
+    else if (key.pageDown) keyStr = "pagedown";
+    else if (key.home) keyStr = "home";
+    else if (key.end) keyStr = "end";
     const [nextState, effect] = vimReducer(vimState.current, {
       type: "key",
       key: keyStr,
       ctrl: key.ctrl,
-      shift: key.shift
+      shift: key.shift,
+      meta: key.meta
     });
     vimState.current = nextState;
     store.setMode(nextState.mode);
@@ -1439,13 +2262,23 @@ function usePolling(client, intervalMs = 3e4) {
       useMachinesStore.getState().setError(err instanceof Error ? err.message : String(err));
     }
   }, [client]);
+  const loadUsage = useCallback2(async () => {
+    try {
+      const history = await client.getUsageHistory(1);
+      const today = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+      const todayEntry = history.find((d) => d.date === today);
+      useTuiStore.getState().setTodayCost(todayEntry?.totalCostUsd ?? 0);
+    } catch {
+    }
+  }, [client]);
   const refreshAll2 = useCallback2(async () => {
     await Promise.allSettled([
       loadProjects(),
       loadMachines(),
+      loadUsage(),
       ...selectedProjectId ? [loadPlan(selectedProjectId)] : []
     ]);
-  }, [loadProjects, loadMachines, loadPlan, selectedProjectId]);
+  }, [loadProjects, loadMachines, loadUsage, loadPlan, selectedProjectId]);
   useEffect2(() => {
     refreshAll2();
   }, [refreshAll2]);
@@ -1603,367 +2436,135 @@ function useSSEStream(client) {
           useExecutionStore.getState().appendLine(taskId, `[progress] ${message}`);
           break;
         }
-        case "task:result": {
-          const taskId = event.data.taskId;
-          const status = event.data.status;
-          useExecutionStore.getState().setStatus(taskId, status);
-          const nodeId = event.data.nodeId;
-          if (nodeId && status) {
-            const mappedStatus = status === "success" ? "completed" : status === "failure" ? "planned" : status;
-            usePlanStore.getState().updateNodeStatus(nodeId, mappedStatus);
-          }
-          break;
-        }
-        case "task:tool_trace": {
-          const taskId = event.data.taskId;
-          const toolName = event.data.toolName;
-          useExecutionStore.getState().appendToolCall(taskId, toolName);
-          break;
-        }
-        case "task:file_change": {
-          const taskId = event.data.taskId;
-          const path = event.data.path;
-          const action = event.data.action;
-          const added = event.data.linesAdded;
-          const removed = event.data.linesRemoved;
-          useExecutionStore.getState().appendFileChange(taskId, path, action, added, removed);
-          break;
-        }
-        case "task:session_init": {
-          const taskId = event.data.taskId;
-          const nodeId = event.data.nodeId ?? taskId;
-          useExecutionStore.getState().initExecution(taskId, nodeId);
-          useExecutionStore.getState().setWatching(taskId);
-          break;
-        }
-        case "heartbeat":
-          break;
-      }
-    };
-    const sse = new SSEClient(client, handler);
-    sseRef.current = sse;
-    sse.start().catch(() => {
-    });
-    return () => {
-      sse.stop();
-    };
-  }, [client, setConnected, setMachineCount, setLastError]);
-}
-
-// src/tui/hooks/use-fuzzy-search.ts
-import { useEffect as useEffect4, useCallback as useCallback3 } from "react";
-import Fuse from "fuse.js";
-var fuseInstance = null;
-function useFuzzySearch() {
-  const projects = useProjectsStore((s) => s.projects);
-  const nodes = usePlanStore((s) => s.nodes);
-  const machines = useMachinesStore((s) => s.machines);
-  const { setItems, setResults, query } = useSearchStore();
-  useEffect4(() => {
-    const items = [
-      ...projects.map((p) => ({
-        type: "project",
-        id: p.id,
-        title: p.name,
-        subtitle: p.description,
-        status: p.status
-      })),
-      ...nodes.filter((n) => !n.deletedAt).map((n) => ({
-        type: "task",
-        id: n.id,
-        title: n.title,
-        subtitle: n.description,
-        status: n.status
-      })),
-      ...machines.filter((m) => !m.isRevoked).map((m) => ({
-        type: "machine",
-        id: m.id,
-        title: m.name,
-        subtitle: `${m.platform} - ${m.hostname}`,
-        status: m.isConnected ? "connected" : "disconnected"
-      }))
-    ];
-    setItems(items);
-    fuseInstance = new Fuse(items, {
-      keys: ["title", "subtitle", "id"],
-      threshold: 0.4,
-      includeScore: true
-    });
-  }, [projects, nodes, machines, setItems]);
-  const search = useCallback3((q) => {
-    if (!q || !fuseInstance) {
-      setResults([]);
-      return;
-    }
-    const results = fuseInstance.search(q, { limit: 20 });
-    setResults(results.map((r) => r.item));
-  }, [setResults]);
-  useEffect4(() => {
-    search(query);
-  }, [query, search]);
-  return { search };
-}
-
-// src/tui/hooks/use-command-parser.ts
-import { useCallback as useCallback4 } from "react";
-
-// src/tui/commands/handlers.ts
-var handlers = {
-  // ── Quit ──
-  q: async () => {
-    process.exit(0);
-  },
-  quit: async () => {
-    process.exit(0);
-  },
-  // ── Refresh ──
-  r: async (_args, client) => {
-    await refreshAll(client);
-  },
-  refresh: async (_args, client) => {
-    await refreshAll(client);
-  },
-  // ── Project commands ──
-  "project list": async (_args, client) => {
-    const projects = await client.listProjects();
-    useProjectsStore.getState().setProjects(projects);
-  },
-  "project show": async (args, client) => {
-    const id = args[0];
-    if (!id) return;
-    try {
-      const project = await client.resolveProject(id);
-      useTuiStore.getState().openDetail("project", project.id);
-    } catch {
-      useTuiStore.getState().setLastError(`Project not found: ${id}`);
-    }
-  },
-  "project create": async (args, client) => {
-    const name = args.join(" ");
-    if (!name) {
-      useTuiStore.getState().setLastError("Usage: :project create <name>");
-      return;
-    }
-    await client.createProject({ name });
-    const projects = await client.listProjects();
-    useProjectsStore.getState().setProjects(projects);
-  },
-  "project delete": async (args, client) => {
-    const id = args[0];
-    if (!id) return;
-    try {
-      const project = await client.resolveProject(id);
-      await client.deleteProject(project.id);
-      const projects = await client.listProjects();
-      useProjectsStore.getState().setProjects(projects);
-    } catch (err) {
-      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
-    }
-  },
-  // ── Plan commands ──
-  "plan tree": async (_args, client) => {
-    const projectId = useTuiStore.getState().selectedProjectId;
-    if (!projectId) {
-      useTuiStore.getState().setLastError("No project selected");
-      return;
-    }
-    const { nodes, edges } = await client.getPlan(projectId);
-    usePlanStore.getState().setPlan(projectId, nodes, edges);
-    useTuiStore.getState().focusPanel("plan");
-  },
-  "plan create-node": async (args, client) => {
-    const projectId = useTuiStore.getState().selectedProjectId;
-    if (!projectId) {
-      useTuiStore.getState().setLastError("No project selected");
-      return;
-    }
-    const title = args.join(" ");
-    if (!title) {
-      useTuiStore.getState().setLastError("Usage: :plan create-node <title>");
-      return;
-    }
-    const id = `node-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-    await client.createPlanNode({ id, projectId, title });
-    const { nodes, edges } = await client.getPlan(projectId);
-    usePlanStore.getState().setPlan(projectId, nodes, edges);
-  },
-  "plan update-node": async (args, client) => {
-    const [nodeId, field, ...rest] = args;
-    if (!nodeId || !field) {
-      useTuiStore.getState().setLastError("Usage: :plan update-node <nodeId> <field> <value>");
-      return;
-    }
-    const value = rest.join(" ");
-    await client.updatePlanNode(nodeId, { [field]: value });
-    const projectId = useTuiStore.getState().selectedProjectId;
-    if (projectId) {
-      const { nodes, edges } = await client.getPlan(projectId);
-      usePlanStore.getState().setPlan(projectId, nodes, edges);
-    }
-  },
-  // ── Dispatch ──
-  d: async (args, client) => {
-    await handlers.dispatch(args, client);
-  },
-  dispatch: async (args, client) => {
-    const nodeId = args[0] ?? useTuiStore.getState().selectedNodeId;
-    const projectId = useTuiStore.getState().selectedProjectId;
-    if (!nodeId || !projectId) {
-      useTuiStore.getState().setLastError("No node/project selected for dispatch");
-      return;
-    }
-    try {
-      const response = await client.dispatchTask({ nodeId, projectId });
-      const execId = `exec-${Date.now()}`;
-      useExecutionStore.getState().initExecution(execId, nodeId);
-      useExecutionStore.getState().setWatching(execId);
-      useTuiStore.getState().focusPanel("output");
-      if (response.body) {
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = "";
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          buffer += decoder.decode(value, { stream: true });
-          const lines = buffer.split("\n");
-          buffer = lines.pop() ?? "";
-          for (const line of lines) {
-            if (line.startsWith("data: ")) {
+        case "task:result": {
+          const taskId = event.data.taskId;
+          const status = event.data.status;
+          useExecutionStore.getState().setStatus(taskId, status);
+          const nodeId = event.data.nodeId;
+          if (nodeId && status) {
+            const mappedStatus = status === "success" ? "completed" : status === "failure" ? "planned" : status;
+            usePlanStore.getState().updateNodeStatus(nodeId, mappedStatus);
+          }
+          break;
+        }
+        case "task:tool_trace": {
+          const taskId = event.data.taskId;
+          const toolName = event.data.toolName;
+          useExecutionStore.getState().appendToolCall(taskId, toolName);
+          break;
+        }
+        case "task:file_change": {
+          const taskId = event.data.taskId;
+          const path = event.data.path;
+          const action = event.data.action;
+          const added = event.data.linesAdded;
+          const removed = event.data.linesRemoved;
+          useExecutionStore.getState().appendFileChange(taskId, path, action, added, removed);
+          break;
+        }
+        case "task:session_init": {
+          const taskId = event.data.taskId;
+          const nodeId = event.data.nodeId ?? taskId;
+          useExecutionStore.getState().initExecution(taskId, nodeId);
+          useExecutionStore.getState().setWatching(taskId);
+          break;
+        }
+        case "task:plan_result": {
+          const taskId = event.data.taskId;
+          useExecutionStore.getState().appendLine(taskId, "[plan] Plan generated \u2014 refreshing...");
+          const projectId = event.data.projectId ?? useTuiStore.getState().selectedProjectId;
+          if (projectId) {
+            setTimeout(async () => {
               try {
-                const event = JSON.parse(line.slice(6));
-                const eventType = event.type;
-                if (eventType === "text") {
-                  useExecutionStore.getState().appendText(execId, event.content ?? "");
-                } else if (eventType === "tool_use") {
-                  useExecutionStore.getState().appendToolCall(execId, event.name ?? "");
-                } else if (eventType === "result") {
-                  useExecutionStore.getState().setStatus(execId, event.status ?? "completed");
-                } else if (eventType === "error") {
-                  useExecutionStore.getState().appendLine(execId, `[error] ${event.message}`);
-                  useExecutionStore.getState().setStatus(execId, "failure");
-                }
+                const { nodes, edges } = await client.getPlan(projectId);
+                usePlanStore.getState().setPlan(projectId, nodes, edges);
               } catch {
               }
-            }
+            }, 500);
           }
+          break;
         }
+        case "task:approval_request": {
+          useExecutionStore.getState().setPendingApproval({
+            requestId: event.data.requestId,
+            question: event.data.question,
+            options: event.data.options,
+            machineId: event.data.machineId,
+            taskId: event.data.taskId
+          });
+          break;
+        }
+        case "heartbeat":
+          break;
       }
-    } catch (err) {
-      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
-    }
-  },
-  // ── Cancel ──
-  c: async (args, client) => {
-    await handlers.cancel(args, client);
-  },
-  cancel: async (args, client) => {
-    const executionId = args[0] ?? useExecutionStore.getState().watchingId;
-    if (!executionId) {
-      useTuiStore.getState().setLastError("No execution to cancel");
-      return;
-    }
-    try {
-      await client.cancelTask({ executionId });
-      useExecutionStore.getState().setStatus(executionId, "cancelled");
-    } catch (err) {
-      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
-    }
-  },
-  // ── Steer ──
-  s: async (args, client) => {
-    await handlers.steer(args, client);
-  },
-  steer: async (args, client) => {
-    const message = args.join(" ");
-    if (!message) {
-      useTuiStore.getState().setLastError("Usage: :steer <message>");
-      return;
-    }
-    const executionId = useExecutionStore.getState().watchingId;
-    const selectedMachineId = useTuiStore.getState().selectedMachineId;
-    if (!executionId || !selectedMachineId) {
-      useTuiStore.getState().setLastError("No active execution/machine to steer");
-      return;
-    }
-    try {
-      await client.steerTask({ taskId: executionId, machineId: selectedMachineId, message });
-    } catch (err) {
-      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
-    }
-  },
-  // ── Watch ──
-  watch: async (args) => {
-    const executionId = args[0];
-    if (!executionId) {
-      useTuiStore.getState().setLastError("Usage: :watch <executionId>");
+    };
+    const sse = new SSEClient(client, handler);
+    sseRef.current = sse;
+    sse.start().catch(() => {
+    });
+    return () => {
+      sse.stop();
+    };
+  }, [client, setConnected, setMachineCount, setLastError]);
+}
+
+// src/tui/hooks/use-fuzzy-search.ts
+import { useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import Fuse from "fuse.js";
+var fuseInstance = null;
+function useFuzzySearch() {
+  const projects = useProjectsStore((s) => s.projects);
+  const nodes = usePlanStore((s) => s.nodes);
+  const machines = useMachinesStore((s) => s.machines);
+  const { setItems, setResults, query } = useSearchStore();
+  useEffect4(() => {
+    const items = [
+      ...projects.map((p) => ({
+        type: "project",
+        id: p.id,
+        title: p.name,
+        subtitle: p.description,
+        status: p.status
+      })),
+      ...nodes.filter((n) => !n.deletedAt).map((n) => ({
+        type: "task",
+        id: n.id,
+        title: n.title,
+        subtitle: n.description,
+        status: n.status
+      })),
+      ...machines.filter((m) => !m.isRevoked).map((m) => ({
+        type: "machine",
+        id: m.id,
+        title: m.name,
+        subtitle: `${m.platform} - ${m.hostname}`,
+        status: m.isConnected ? "connected" : "disconnected"
+      }))
+    ];
+    setItems(items);
+    fuseInstance = new Fuse(items, {
+      keys: ["title", "subtitle", "id"],
+      threshold: 0.4,
+      includeScore: true
+    });
+  }, [projects, nodes, machines, setItems]);
+  const search = useCallback3((q) => {
+    if (!q || !fuseInstance) {
+      setResults([]);
       return;
     }
-    useExecutionStore.getState().setWatching(executionId);
-    useTuiStore.getState().focusPanel("output");
-  },
-  // ── Env ──
-  "env list": async (_args, client) => {
-    const machines = await client.listMachines();
-    useMachinesStore.getState().setMachines(machines);
-    useTuiStore.getState().focusPanel("machines");
-  },
-  "env status": async (_args, client) => {
-    const status = await client.getRelayStatus();
-    useTuiStore.getState().setLastError(JSON.stringify(status, null, 2));
-  },
-  // ── Search ──
-  search: async (args, client) => {
-    const query = args.join(" ");
-    if (!query) return;
-    try {
-      await client.search(query);
-      useTuiStore.getState().toggleSearch();
-    } catch (err) {
-      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
-    }
-  },
-  // ── Activity ──
-  activity: async (_args, client) => {
-    const projectId = useTuiStore.getState().selectedProjectId;
-    try {
-      const activities = await client.listActivities(projectId ? { projectId } : void 0);
-      for (const a of activities.slice(0, 20)) {
-        useExecutionStore.getState().appendLine("activity", `[${a.type}] ${a.title}`);
-      }
-      useExecutionStore.getState().setWatching("activity");
-      useTuiStore.getState().focusPanel("output");
-    } catch (err) {
-      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
-    }
-  },
-  // ── Help ──
-  help: async () => {
-    useTuiStore.getState().toggleHelp();
-  },
-  "?": async () => {
-    useTuiStore.getState().toggleHelp();
-  }
-};
-async function refreshAll(client) {
-  try {
-    const [projects, machines] = await Promise.all([
-      client.listProjects(),
-      client.listMachines()
-    ]);
-    useProjectsStore.getState().setProjects(projects);
-    useMachinesStore.getState().setMachines(machines);
-    useTuiStore.getState().setMachineCount(machines.filter((m) => m.isConnected).length);
-    const projectId = useTuiStore.getState().selectedProjectId;
-    if (projectId) {
-      const { nodes, edges } = await client.getPlan(projectId);
-      usePlanStore.getState().setPlan(projectId, nodes, edges);
-    }
-  } catch (err) {
-    useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
-  }
+    const results = fuseInstance.search(q, { limit: 20 });
+    setResults(results.map((r) => r.item));
+  }, [setResults]);
+  useEffect4(() => {
+    search(query);
+  }, [query, search]);
+  return { search };
 }
 
+// src/tui/hooks/use-command-parser.ts
+import { useCallback as useCallback4 } from "react";
+
 // src/tui/commands/autocomplete.ts
 var PrefixTrie = class {
   root;
@@ -2052,7 +2653,7 @@ function useCommandParser(client) {
 }
 
 // src/tui/app.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function App({ serverUrl }) {
   const client = useMemo(() => new AstroClient({ serverUrl }), [serverUrl]);
   const { refreshAll: refreshAll2 } = usePolling(client);
@@ -2071,12 +2672,12 @@ function App({ serverUrl }) {
         break;
       }
       case "plan": {
-        const treeLines = usePlanStore.getState().treeLines;
+        const nodes = usePlanStore.getState().nodes.filter((n) => !n.deletedAt);
         const idx = scrollIndex.plan;
-        const line = treeLines[idx];
-        if (line) {
-          useTuiStore.getState().setSelectedNode(line.id);
-          usePlanStore.getState().toggleCollapse(line.id);
+        const node = nodes[idx];
+        if (node) {
+          useTuiStore.getState().setSelectedNode(node.id);
+          useTuiStore.getState().openDetail("node", node.id);
         }
         break;
       }
@@ -2101,6 +2702,16 @@ function App({ serverUrl }) {
     []
   );
   const onDispatch = useCallback5(async () => {
+    const { focusedPanel, scrollIndex, selectedProjectId } = useTuiStore.getState();
+    if (focusedPanel === "plan") {
+      const nodes = usePlanStore.getState().nodes.filter((n) => !n.deletedAt);
+      const node = nodes[scrollIndex.plan];
+      if (node && selectedProjectId) {
+        useTuiStore.getState().setSelectedNode(node.id);
+        await execute(`dispatch ${node.id}`);
+        return;
+      }
+    }
     const nodeId = useTuiStore.getState().selectedNodeId;
     const projectId = useTuiStore.getState().selectedProjectId;
     if (nodeId && projectId) {
@@ -2113,6 +2724,71 @@ function App({ serverUrl }) {
   const onRefresh = useCallback5(() => {
     refreshAll2();
   }, [refreshAll2]);
+  const onSessionMessage = useCallback5(async (message) => {
+    const { selectedProjectId, activeView } = useTuiStore.getState();
+    if (!selectedProjectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    const watchingId = useExecutionStore.getState().watchingId;
+    const sessionId = useChatStore.getState().sessionId;
+    const messages = useChatStore.getState().messages.map((m) => ({
+      role: m.role,
+      content: m.content
+    }));
+    if (!watchingId) {
+      if (activeView === "plan-gen") {
+        await execute(`plan generate ${message}`);
+      } else {
+        await execute(`playground ${message}`);
+      }
+      return;
+    }
+    try {
+      useChatStore.getState().setStreaming(true);
+      const response = await client.projectChat({
+        message,
+        sessionId: sessionId ?? void 0,
+        projectId: selectedProjectId,
+        messages
+      });
+      if (!response.body) {
+        useChatStore.getState().setStreaming(false);
+        return;
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          const data = line.slice(6);
+          if (data === "[DONE]") continue;
+          try {
+            const event = JSON.parse(data);
+            if (event.type === "text" && event.text) {
+              useChatStore.getState().appendStream(event.text);
+              useExecutionStore.getState().appendText(watchingId, event.text);
+            } else if (event.type === "session_init" && event.sessionId) {
+              useChatStore.getState().setSessionId(event.sessionId);
+            } else if (event.type === "done") {
+            }
+          } catch {
+          }
+        }
+      }
+      useChatStore.getState().flushStream();
+      useChatStore.getState().setStreaming(false);
+    } catch (err) {
+      useChatStore.getState().setStreaming(false);
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  }, [client, execute]);
   useVimMode({
     onSelect,
     onCommand,
@@ -2121,13 +2797,13 @@ function App({ serverUrl }) {
     onCancel,
     onRefresh
   });
-  return /* @__PURE__ */ jsx13(MainLayout, {});
+  return /* @__PURE__ */ jsx15(MainLayout, { onSessionMessage });
 }
 
 // src/tui/index.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 async function launchTui(serverUrl) {
-  render(/* @__PURE__ */ jsx14(App, { serverUrl }), {
+  render(/* @__PURE__ */ jsx16(App, { serverUrl }), {
     exitOnCtrlC: true
   });
 }