@astroanywhere/cli 0.2.0 → 0.2.2

package/dist/tui.js

@@ -1,18 +1,19 @@
 #!/usr/bin/env node
 import {
-  AstroClient
-} from "./chunk-7H7WD7QX.js";
+  AstroClient,
+  readSSEStream
+} from "./chunk-MJRAJPBU.js";
 
 // src/tui/index.tsx
 import "react";
 import { render } from "ink";
 
 // src/tui/app.tsx
-import { useMemo, useCallback as useCallback5 } from "react";
+import { useMemo as useMemo2, useCallback as useCallback5, useEffect as useEffect7 } from "react";
 
 // src/tui/components/layout/main-layout.tsx
 import "react";
-import { Box as Box10, useStdout } from "ink";
+import { Box as Box13, useStdout as useStdout3 } from "ink";
 
 // src/tui/components/layout/status-bar.tsx
 import "react";
@@ -20,7 +21,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 +33,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 +117,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 })
 }));
 
@@ -143,159 +150,56 @@ function formatCost(usd) {
   return `$${usd.toFixed(2)}`;
 }
 function truncate(str, maxLen) {
-  if (str.length <= maxLen) return str;
-  return str.slice(0, maxLen - 1) + "\u2026";
+  const clean = str.replace(/[\r\n]+/g, " ").trim();
+  if (clean.length <= maxLen) return clean;
+  return clean.slice(0, maxLen - 1) + "\u2026";
+}
+function getVisibleProjects(projects) {
+  return projects.filter((p) => p.projectType !== "playground").sort((a, b) => {
+    const ta = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+    const tb = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+    return tb - ta;
+  });
 }
 
 // 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",
+  active: "Active"
+};
 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 +225,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 +304,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();
@@ -696,6 +372,11 @@ function renderTreeLines(roots, collapsedSet) {
 }
 
 // src/tui/stores/plan-store.ts
+function buildView(nodes, edges, collapsedNodes) {
+  const treeRoots = buildTree(nodes, edges);
+  const treeLines = renderTreeLines(treeRoots, collapsedNodes);
+  return { treeRoots, treeLines };
+}
 var usePlanStore = create4((set, get) => ({
   projectId: null,
   nodes: [],
@@ -705,18 +386,64 @@ var usePlanStore = create4((set, get) => ({
   collapsedNodes: /* @__PURE__ */ new Set(),
   loading: false,
   error: null,
+  cache: /* @__PURE__ */ new Map(),
   setPlan: (projectId, nodes, edges) => {
-    const { collapsedNodes } = get();
-    const treeRoots = buildTree(nodes, edges);
-    const treeLines = renderTreeLines(treeRoots, collapsedNodes);
-    set({ projectId, nodes, edges, treeRoots, treeLines, loading: false, error: null });
+    const { collapsedNodes, cache } = get();
+    const next = new Map(cache);
+    next.set(projectId, { nodes, edges });
+    const { treeRoots, treeLines } = buildView(nodes, edges, collapsedNodes);
+    set({ projectId, nodes, edges, treeRoots, treeLines, loading: false, error: null, cache: next });
   },
-  setLoading: (loading) => set({ loading }),
-  setError: (error) => set({ error, loading: false }),
-  toggleCollapse: (nodeId) => {
-    const { collapsedNodes, treeRoots } = get();
-    const next = new Set(collapsedNodes);
-    if (next.has(nodeId)) {
+  setAllPlans: (allNodes, allEdges) => {
+    const { projectId, collapsedNodes } = get();
+    const next = /* @__PURE__ */ new Map();
+    const nodesByProject = /* @__PURE__ */ new Map();
+    for (const node of allNodes) {
+      const list = nodesByProject.get(node.projectId) ?? [];
+      list.push(node);
+      nodesByProject.set(node.projectId, list);
+    }
+    const nodeProjectMap = /* @__PURE__ */ new Map();
+    for (const node of allNodes) {
+      nodeProjectMap.set(node.id, node.projectId);
+    }
+    const edgesByProject = /* @__PURE__ */ new Map();
+    for (const edge of allEdges) {
+      const pid = nodeProjectMap.get(edge.source) ?? nodeProjectMap.get(edge.target);
+      if (pid) {
+        const list = edgesByProject.get(pid) ?? [];
+        list.push(edge);
+        edgesByProject.set(pid, list);
+      }
+    }
+    for (const [pid, nodes] of nodesByProject) {
+      next.set(pid, { nodes, edges: edgesByProject.get(pid) ?? [] });
+    }
+    const update = { cache: next, loading: false, error: null };
+    if (projectId && next.has(projectId)) {
+      const cached = next.get(projectId);
+      const { treeRoots, treeLines } = buildView(cached.nodes, cached.edges, collapsedNodes);
+      Object.assign(update, { nodes: cached.nodes, edges: cached.edges, treeRoots, treeLines });
+    }
+    set(update);
+  },
+  selectProject: (projectId) => {
+    const { cache, collapsedNodes, projectId: currentProjectId } = get();
+    if (projectId === currentProjectId) return;
+    const cached = cache.get(projectId);
+    if (cached) {
+      const { treeRoots, treeLines } = buildView(cached.nodes, cached.edges, collapsedNodes);
+      set({ projectId, nodes: cached.nodes, edges: cached.edges, treeRoots, treeLines, loading: false, error: null });
+    } else {
+      set({ projectId, nodes: [], edges: [], treeRoots: [], treeLines: [], loading: false, error: null });
+    }
+  },
+  setLoading: (loading) => set({ loading }),
+  setError: (error) => set({ error, loading: false }),
+  toggleCollapse: (nodeId) => {
+    const { collapsedNodes, treeRoots } = get();
+    const next = new Set(collapsedNodes);
+    if (next.has(nodeId)) {
       next.delete(nodeId);
     } else {
       next.add(nodeId);
@@ -725,11 +452,16 @@ var usePlanStore = create4((set, get) => ({
     set({ collapsedNodes: next, treeLines });
   },
   updateNodeStatus: (nodeId, status) => {
-    const { nodes, edges, collapsedNodes } = get();
+    const { nodes, edges, collapsedNodes, projectId, cache } = get();
     const updated = nodes.map((n) => n.id === nodeId ? { ...n, status } : n);
-    const treeRoots = buildTree(updated, edges);
-    const treeLines = renderTreeLines(treeRoots, collapsedNodes);
-    set({ nodes: updated, treeRoots, treeLines });
+    const { treeRoots, treeLines } = buildView(updated, edges, collapsedNodes);
+    if (projectId) {
+      const next = new Map(cache);
+      next.set(projectId, { nodes: updated, edges });
+      set({ nodes: updated, treeRoots, treeLines, cache: next });
+    } else {
+      set({ nodes: updated, treeRoots, treeLines });
+    }
   },
   clear: () => set({
     projectId: null,
@@ -742,54 +474,6 @@ 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);
-  let start = 0;
-  if (scrollIndex >= visibleHeight) {
-    start = scrollIndex - visibleHeight + 1;
-  }
-  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 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);
-    }),
-    treeLines.length > visibleHeight && /* @__PURE__ */ jsxs8(Text9, { dimColor: true, children: [
-      "  [",
-      start + 1,
-      "-",
-      Math.min(start + visibleHeight, treeLines.length),
-      "/",
-      treeLines.length,
-      "]"
-    ] })
-  ] }) });
-}
-
-// src/tui/components/panels/machines-panel.tsx
-import "react";
-import { Text as Text10 } from "ink";
-
 // src/tui/stores/machines-store.ts
 import { create as create5 } from "zustand";
 var useMachinesStore = create5((set, get) => ({
@@ -818,38 +502,6 @@ var useMachinesStore = create5((set, get) => ({
   setError: (error) => set({ error, loading: false })
 }));
 
-// src/tui/components/panels/machines-panel.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function MachinesPanel({ height }) {
-  const machines = useMachinesStore((s) => s.machines);
-  const loading = useMachinesStore((s) => s.loading);
-  const error = useMachinesStore((s) => s.error);
-  const focusedPanel = useTuiStore((s) => s.focusedPanel);
-  const scrollIndex = useTuiStore((s) => s.scrollIndex.machines);
-  const isFocused = focusedPanel === "machines";
-  const activeMachines = machines.filter((m) => !m.isRevoked);
-  const items = activeMachines.map((m) => ({
-    id: m.id,
-    label: m.name,
-    sublabel: m.platform,
-    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(
-    ScrollableList,
-    {
-      items,
-      selectedIndex: scrollIndex,
-      height: height - 3,
-      isFocused
-    }
-  ) });
-}
-
-// 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;
@@ -870,12 +522,14 @@ function trimRingBuffer(lines) {
 var useExecutionStore = create6((set, get) => ({
   outputs: /* @__PURE__ */ new Map(),
   watchingId: null,
-  initExecution: (executionId, nodeId) => {
+  pendingApproval: null,
+  initExecution: (executionId, nodeId, title) => {
     const { outputs } = get();
     const next = new Map(outputs);
     next.set(executionId, {
       executionId,
       nodeId,
+      title: title ?? nodeId,
       lines: [],
       status: "running",
       startedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -883,6 +537,23 @@ var useExecutionStore = create6((set, get) => ({
     });
     set({ outputs: next });
   },
+  seedHistorical: (entries) => {
+    const { outputs } = get();
+    const next = new Map(outputs);
+    for (const entry of entries) {
+      if (next.has(entry.executionId)) continue;
+      next.set(entry.executionId, {
+        executionId: entry.executionId,
+        nodeId: entry.nodeId,
+        title: entry.title,
+        lines: [],
+        status: entry.status,
+        startedAt: entry.startedAt,
+        pendingToolCount: 0
+      });
+    }
+    set({ outputs: next });
+  },
   appendToolCall: (executionId) => {
     const { outputs } = get();
     const current = outputs.get(executionId);
@@ -946,6 +617,7 @@ var useExecutionStore = create6((set, get) => ({
     set({ outputs: next });
   },
   setWatching: (watchingId) => set({ watchingId }),
+  setPendingApproval: (pendingApproval) => set({ pendingApproval }),
   clear: (executionId) => {
     const { outputs } = get();
     const next = new Map(outputs);
@@ -954,8 +626,1222 @@ var useExecutionStore = create6((set, get) => ({
   }
 }));
 
+// 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/stores/session-settings-store.ts
+import { create as create8 } from "zustand";
+var useSessionSettingsStore = create8((set) => ({
+  machineId: null,
+  machineName: null,
+  workingDirectory: process.cwd(),
+  focusedField: null,
+  pickerOpen: false,
+  setMachine: (id, name) => set({ machineId: id, machineName: name }),
+  setWorkingDirectory: (workingDirectory) => set({ workingDirectory }),
+  setFocusedField: (focusedField) => set({ focusedField, pickerOpen: false }),
+  setPickerOpen: (pickerOpen) => set({ pickerOpen }),
+  init: (machineId, machineName, workingDirectory) => set({ machineId, machineName, workingDirectory })
+}));
+
+// 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: "project chat", description: "Chat with AI about the selected project", usage: "project chat <message>" },
+  { name: "task chat", description: "Chat with AI about the selected task", usage: "task chat <message>" },
+  { name: "summarize", description: "AI-generated summary of an execution", usage: "summarize [executionId]" },
+  { 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;
+    }
+    const machines = useMachinesStore.getState().machines;
+    const connectedMachine = machines.find((m) => m.isConnected);
+    if (!connectedMachine) {
+      useTuiStore.getState().setLastError("No connected machines. Start an agent runner first.");
+      return;
+    }
+    const execId = `exec-${Date.now()}`;
+    const planNode = usePlanStore.getState().nodes.find((n) => n.id === nodeId);
+    const title = planNode?.title ?? nodeId;
+    useExecutionStore.getState().initExecution(execId, nodeId, title);
+    useExecutionStore.getState().setWatching(execId);
+    useTuiStore.getState().focusPanel("output");
+    useExecutionStore.getState().appendLine(execId, `[progress] Dispatching task...`);
+    try {
+      const response = await client.dispatchTask({
+        nodeId,
+        projectId,
+        targetMachineId: connectedMachine.id
+      });
+      await streamSSEToExecution(response, execId, client, projectId);
+    } catch (err) {
+      useExecutionStore.getState().setStatus(execId, "error");
+      useExecutionStore.getState().appendLine(execId, `[error] ${err instanceof Error ? err.message : String(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 ──
+  // Matches frontend: creates a new playground project, then dispatches.
+  // No project selection required — uses session settings for machine + workdir.
+  playground: async (args, client) => {
+    const description = args.join(" ");
+    if (!description) {
+      useTuiStore.getState().setLastError("Usage: playground <description>");
+      return;
+    }
+    const settings = useSessionSettingsStore.getState();
+    if (!settings.machineId) {
+      const machines = useMachinesStore.getState().machines;
+      const localPlatform = process.platform;
+      const m = machines.find((m2) => m2.isConnected && m2.platform === localPlatform) ?? machines.find((m2) => m2.isConnected);
+      if (m) {
+        settings.init(m.id, m.name, settings.workingDirectory || process.cwd());
+      }
+    }
+    const targetMachineId = settings.machineId;
+    const targetMachineName = settings.machineName;
+    const workDir = settings.workingDirectory || process.cwd();
+    if (!targetMachineId) {
+      useTuiStore.getState().setLastError("No connected machines. Start an agent runner first.");
+      return;
+    }
+    const execId = `playground-${Date.now()}`;
+    const title = `Playground: ${description.slice(0, 50)}`;
+    useExecutionStore.getState().initExecution(execId, execId, title);
+    useExecutionStore.getState().setWatching(execId);
+    useTuiStore.getState().setActiveView("playground");
+    useExecutionStore.getState().appendLine(execId, `> ${description}`);
+    useExecutionStore.getState().appendLine(execId, `[progress] Creating playground session...`);
+    try {
+      const projectId = crypto.randomUUID();
+      const project = await client.createProject({
+        id: projectId,
+        name: description.slice(0, 60) || "Playground Session",
+        description,
+        workingDirectory: workDir,
+        defaultMachineId: targetMachineId,
+        projectType: "playground"
+      });
+      const nodeId = `playground-${project.id}`;
+      useExecutionStore.getState().appendLine(execId, `[progress] Dispatching to ${targetMachineName ?? targetMachineId} (${workDir})...`);
+      const response = await client.dispatchTask({
+        nodeId,
+        projectId: project.id,
+        title,
+        description,
+        targetMachineId,
+        workingDirectory: workDir,
+        deliveryMode: "direct",
+        skipSafetyCheck: true,
+        force: true
+      });
+      await streamSSEToExecution(response, execId, client, project.id);
+    } catch (err) {
+      useExecutionStore.getState().setStatus(execId, "error");
+      useExecutionStore.getState().appendLine(execId, `[error] ${err instanceof Error ? err.message : String(err)}`);
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Plan Generate (uses /api/dispatch/task SSE with isInteractivePlan) ──
+  "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 machines = useMachinesStore.getState().machines;
+    const connectedMachine = machines.find((m) => m.isConnected);
+    if (!connectedMachine) {
+      useTuiStore.getState().setLastError("No connected machines. Start an agent runner first.");
+      return;
+    }
+    const nodeId = `plan-${projectId}`;
+    const execId = `plan-${projectId}-${Date.now()}`;
+    const title = `Plan: ${description.slice(0, 50)}`;
+    useExecutionStore.getState().initExecution(execId, nodeId, title);
+    useExecutionStore.getState().setWatching(execId);
+    useTuiStore.getState().setActiveView("plan-gen");
+    useExecutionStore.getState().appendLine(execId, `[progress] Plan generation started`);
+    try {
+      const response = await client.dispatchTask({
+        nodeId,
+        projectId,
+        title: `Interactive planning: ${description.slice(0, 80)}`,
+        description,
+        targetMachineId: connectedMachine.id,
+        isInteractivePlan: true,
+        verification: "human"
+      });
+      await streamSSEToExecution(response, execId, client, projectId);
+    } catch (err) {
+      useExecutionStore.getState().setStatus(execId, "error");
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Project Chat (uses /api/agent/project-chat SSE) ──
+  "project chat": async (args, client) => {
+    const message = args.join(" ");
+    if (!message) {
+      useTuiStore.getState().setLastError("Usage: project chat <message>");
+      return;
+    }
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    const execId = `chat-project-${projectId}-${Date.now()}`;
+    const title = `Chat: ${message.slice(0, 50)}`;
+    const sessionId = useChatStore.getState().sessionId;
+    const messages = useChatStore.getState().messages.map((m) => ({
+      role: m.role,
+      content: m.content
+    }));
+    useExecutionStore.getState().initExecution(execId, `chat-${projectId}`, title);
+    useExecutionStore.getState().setWatching(execId);
+    useExecutionStore.getState().appendLine(execId, `> ${message}`);
+    useChatStore.getState().addMessage("user", message);
+    try {
+      useChatStore.getState().setStreaming(true);
+      useChatStore.getState().setContext(projectId);
+      const { nodes, edges } = await client.getPlan(projectId);
+      const response = await client.projectChat({
+        message,
+        sessionId: sessionId ?? void 0,
+        projectId,
+        planNodes: nodes,
+        planEdges: edges,
+        messages
+      });
+      await streamSSEToExecution(response, execId, client, projectId);
+      useChatStore.getState().flushStream();
+      useChatStore.getState().setStreaming(false);
+    } catch (err) {
+      useChatStore.getState().setStreaming(false);
+      useExecutionStore.getState().setStatus(execId, "error");
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Task Chat (uses /api/agent/task-chat SSE) ──
+  "task chat": async (args, client) => {
+    const message = args.join(" ");
+    if (!message) {
+      useTuiStore.getState().setLastError("Usage: task chat <message>");
+      return;
+    }
+    const projectId = useTuiStore.getState().selectedProjectId;
+    const nodeId = useTuiStore.getState().selectedNodeId;
+    if (!projectId || !nodeId) {
+      useTuiStore.getState().setLastError("No project/task selected");
+      return;
+    }
+    const planNode = usePlanStore.getState().nodes.find((n) => n.id === nodeId);
+    const taskTitle = planNode?.title ?? nodeId;
+    const execId = `chat-task-${nodeId}-${Date.now()}`;
+    const title = `Task Chat: ${taskTitle.slice(0, 40)}`;
+    const sessionId = useChatStore.getState().sessionId;
+    const messages = useChatStore.getState().messages.map((m) => ({
+      role: m.role,
+      content: m.content
+    }));
+    useExecutionStore.getState().initExecution(execId, `chat-${nodeId}`, title);
+    useExecutionStore.getState().setWatching(execId);
+    useExecutionStore.getState().appendLine(execId, `> ${message}`);
+    useChatStore.getState().addMessage("user", message);
+    try {
+      useChatStore.getState().setStreaming(true);
+      useChatStore.getState().setContext(projectId, nodeId);
+      const response = await client.taskChat({
+        message,
+        sessionId: sessionId ?? void 0,
+        nodeId,
+        projectId,
+        taskTitle,
+        taskDescription: planNode?.description,
+        taskOutput: planNode?.executionOutput ?? void 0,
+        branchName: planNode?.branchName ?? void 0,
+        prUrl: planNode?.prUrl ?? void 0,
+        messages
+      });
+      await streamSSEToExecution(response, execId, client, projectId);
+      useChatStore.getState().flushStream();
+      useChatStore.getState().setStreaming(false);
+    } catch (err) {
+      useChatStore.getState().setStreaming(false);
+      useExecutionStore.getState().setStatus(execId, "error");
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Summarize ──
+  summarize: async (args, client) => {
+    const executionId = args[0] ?? useExecutionStore.getState().watchingId;
+    if (!executionId) {
+      useTuiStore.getState().setLastError("Usage: summarize [executionId]");
+      return;
+    }
+    try {
+      const result = await client.summarize({ executionId });
+      useExecutionStore.getState().appendLine(executionId, `
+--- Summary ---
+${result.summary}`);
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Resume ──
+  resume: async (args) => {
+    const execId = args[0];
+    if (!execId) {
+      useTuiStore.getState().setLastError("Usage: resume <executionId>");
+      return;
+    }
+    const exec = useExecutionStore.getState().outputs.get(execId);
+    if (!exec) {
+      useTuiStore.getState().setLastError(`Session not found: ${execId}`);
+      return;
+    }
+    useExecutionStore.getState().setWatching(execId);
+    if (exec.nodeId.startsWith("playground-")) {
+      useTuiStore.getState().setActiveView("playground");
+    } else if (exec.nodeId.startsWith("plan-")) {
+      useTuiStore.getState().setActiveView("plan-gen");
+    } else {
+      useTuiStore.getState().setActiveView("active");
+    }
+  },
+  // ── Help ──
+  help: async () => {
+    useTuiStore.getState().toggleHelp();
+  },
+  "?": async () => {
+    useTuiStore.getState().toggleHelp();
+  }
+};
+async function streamSSEToExecution(response, execId, client, projectId) {
+  if (!response.body) {
+    useExecutionStore.getState().setStatus(execId, "completed");
+    return;
+  }
+  await readSSEStream(response, async (event) => {
+    const type = event.type;
+    switch (type) {
+      case "init":
+        if (event.executionId) {
+          useExecutionStore.getState().appendLine(execId, `[progress] Execution started (${event.executionId})`);
+        }
+        break;
+      case "text": {
+        const content = event.content ?? event.text ?? "";
+        if (content) {
+          useExecutionStore.getState().appendText(execId, content);
+          useChatStore.getState().appendStream(content);
+        }
+        break;
+      }
+      case "tool_use":
+        useExecutionStore.getState().appendToolCall(execId, event.toolName ?? event.name);
+        break;
+      case "tool_result":
+        break;
+      case "file_change":
+        useExecutionStore.getState().appendFileChange(
+          execId,
+          event.path,
+          event.action,
+          event.linesAdded,
+          event.linesRemoved
+        );
+        break;
+      case "progress":
+        useExecutionStore.getState().appendLine(execId, `[progress] ${event.message}`);
+        break;
+      case "session_init":
+        if (event.sessionId) {
+          useChatStore.getState().setSessionId(event.sessionId);
+        }
+        break;
+      case "plan_result":
+        useExecutionStore.getState().appendLine(execId, "[plan] Plan generated \u2014 refreshing...");
+        if (projectId) {
+          setTimeout(async () => {
+            try {
+              const { nodes, edges } = await client.getPlan(projectId);
+              usePlanStore.getState().setPlan(projectId, nodes, edges);
+            } catch {
+            }
+          }, 500);
+        }
+        break;
+      case "result":
+        useExecutionStore.getState().setStatus(execId, event.status === "success" ? "completed" : "error");
+        if (event.error) {
+          useExecutionStore.getState().appendLine(execId, `[error] ${event.error}`);
+        }
+        break;
+      case "approval_request":
+        useExecutionStore.getState().setPendingApproval({
+          requestId: event.requestId,
+          question: event.question,
+          options: event.options,
+          machineId: event.machineId,
+          taskId: event.taskId
+        });
+        break;
+      case "done":
+        useExecutionStore.getState().setStatus(execId, "completed");
+        break;
+      case "error": {
+        const msg = event.error ?? event.message ?? "Unknown error";
+        useExecutionStore.getState().appendLine(execId, `[error] ${msg}`);
+        useExecutionStore.getState().setStatus(execId, "error");
+        break;
+      }
+      case "heartbeat":
+      case "compaction":
+      case "aborted":
+        break;
+    }
+  });
+  const exec = useExecutionStore.getState().outputs.get(execId);
+  if (exec?.status === "running") {
+    useExecutionStore.getState().setStatus(execId, "completed");
+  }
+}
+async function refreshAll(client) {
+  try {
+    const [projects, machines, fullPlan] = await Promise.all([
+      client.listProjects(),
+      client.listMachines(),
+      client.getFullPlan()
+    ]);
+    useProjectsStore.getState().setProjects(projects);
+    useMachinesStore.getState().setMachines(machines);
+    useTuiStore.getState().setMachineCount(machines.filter((m) => m.isConnected).length);
+    usePlanStore.getState().setAllPlans(fullPlan.nodes, fullPlan.edges);
+  } catch (err) {
+    useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+  }
+}
+
+// src/tui/commands/palette-filter.ts
+function getResumeCommands() {
+  const outputs = useExecutionStore.getState().outputs;
+  const entries = [];
+  for (const [id, exec] of outputs) {
+    const statusLabel = exec.status === "running" ? "\u25B6" : exec.status === "success" || exec.status === "completed" ? "\u2713" : "\xB7";
+    entries.push({
+      name: `resume ${exec.title}`,
+      description: `${statusLabel} ${exec.status} \u2014 switch to this session`,
+      usage: `resume:${id}`
+    });
+  }
+  entries.sort((a, b) => {
+    const aExec = outputs.get(a.usage.replace("resume:", ""));
+    const bExec = outputs.get(b.usage.replace("resume:", ""));
+    if (aExec?.status === "running" && bExec?.status !== "running") return -1;
+    if (bExec?.status === "running" && aExec?.status !== "running") return 1;
+    const ta = aExec?.startedAt ? new Date(aExec.startedAt).getTime() : 0;
+    const tb = bExec?.startedAt ? new Date(bExec.startedAt).getTime() : 0;
+    return tb - ta;
+  });
+  return entries;
+}
+function getFilteredPaletteCommands(query) {
+  const resumeCommands = getResumeCommands();
+  const allCommands = [...PALETTE_COMMANDS, ...resumeCommands];
+  if (!query) return allCommands;
+  const lower = query.toLowerCase();
+  return allCommands.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: "Active" },
+  { key: "/", label: "Search" },
+  { key: "C-p", label: "Commands" },
+  { key: "d", label: "Dispatch" },
+  { key: "x", label: "Stop" },
+  { 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__ */ jsxs2(Box2, { paddingX: 1, gap: 1, height, children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Input active" }),
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { inverse: true, bold: true, children: " C-d " }),
+        /* @__PURE__ */ jsx2(Text2, { children: "Stop" })
+      ] }),
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { inverse: true, bold: true, children: " Esc " }),
+        /* @__PURE__ */ jsx2(Text2, { children: "Exit input" })
+      ] })
+    ] });
+  }
+  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 { useEffect as useEffect2, useMemo } from "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 { jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
+var TERMINAL_NODE_STATUSES = /* @__PURE__ */ new Set([
+  "completed",
+  "auto_verified",
+  "awaiting_judgment",
+  "awaiting_approval",
+  "pruned"
+]);
+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 planNodes = usePlanStore((s) => s.nodes);
+  const isFocused = focusedPanel === "projects";
+  const visibleHeight = Math.max(1, height - 3);
+  const projectsWithRunning = useMemo(() => {
+    const running = /* @__PURE__ */ new Set();
+    for (const [, exec] of outputs) {
+      if (exec.status !== "running" && exec.status !== "pending" && exec.status !== "dispatched") continue;
+      const nodeId = exec.nodeId;
+      if (nodeId.startsWith("plan-")) {
+        running.add(nodeId.replace(/^plan-/, "").replace(/-\d+$/, ""));
+      } else if (nodeId.startsWith("playground-")) {
+        const parts = nodeId.replace(/^playground-/, "").split("-");
+        parts.pop();
+        running.add(parts.join("-"));
+      } else if (nodeId.startsWith("chat-")) {
+        running.add(nodeId.replace(/^chat-(project-|task-)?/, "").replace(/-\d+$/, ""));
+      } else {
+        const node = planNodes.find((n) => n.id === nodeId);
+        if (node && !TERMINAL_NODE_STATUSES.has(node.status)) {
+          running.add(node.projectId);
+        }
+      }
+    }
+    for (const node of planNodes) {
+      if ((node.status === "in_progress" || node.status === "dispatched") && !node.deletedAt) {
+        running.add(node.projectId);
+      }
+    }
+    return running;
+  }, [outputs, planNodes]);
+  const sorted = getVisibleProjects(projects);
+  const projectCount = sorted.length;
+  const maxIndex = Math.max(0, projectCount - 1);
+  const cursor = projectCount === 0 ? 0 : Math.min(Math.max(0, scrollIndex), maxIndex);
+  useEffect2(() => {
+    if (projectCount > 0 && scrollIndex !== cursor) {
+      useTuiStore.setState((s) => ({
+        scrollIndex: { ...s.scrollIndex, projects: cursor }
+      }));
+    }
+  }, [scrollIndex, cursor, projectCount]);
+  let start = 0;
+  if (projectCount > visibleHeight) {
+    if (cursor >= projectCount - visibleHeight) {
+      start = projectCount - visibleHeight;
+    } else {
+      start = Math.max(0, cursor - Math.floor(visibleHeight / 2));
+    }
+  }
+  const visibleProjects = sorted.slice(start, start + visibleHeight);
+  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 && /* @__PURE__ */ jsx5(Text6, { dimColor: true, children: "  No projects yet" }),
+    visibleProjects.map((p, i) => {
+      const actualIndex = start + i;
+      const isSelected = isFocused && cursor === actualIndex;
+      const isActive = p.id === selectedProjectId;
+      const hasRunning = projectsWithRunning.has(p.id);
+      return /* @__PURE__ */ jsxs6(Box5, { children: [
+        /* @__PURE__ */ jsxs6(
+          Text6,
+          {
+            inverse: isSelected,
+            bold: isSelected,
+            color: isActive ? "cyan" : void 0,
+            wrap: "truncate",
+            children: [
+              isSelected ? " > " : "   ",
+              hasRunning ? "\u25B6 " : "  ",
+              truncate(p.name, 28)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: !isSelected, children: [
+          " ",
+          formatRelativeTime(p.updatedAt)
+        ] })
+      ] }, p.id);
+    }),
+    projectCount > visibleHeight && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      "  [",
+      start + 1,
+      "-",
+      Math.min(start + visibleHeight, projectCount),
+      "/",
+      projectCount,
+      "]"
+    ] })
+  ] }) });
+}
+
+// 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 { 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 cursor = Math.min(Math.max(0, selectedIndex), items.length - 1);
+  const visibleHeight = Math.max(1, height - 1);
+  let start = 0;
+  if (items.length > visibleHeight) {
+    if (cursor >= items.length - visibleHeight) {
+      start = items.length - visibleHeight;
+    } else {
+      start = Math.max(0, cursor - Math.floor(visibleHeight / 2));
+    }
+  }
+  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 === cursor && 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/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
+    }
+  ) });
+}
+
+// src/tui/components/panels/machines-panel.tsx
+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);
+  const error = useMachinesStore((s) => s.error);
+  const focusedPanel = useTuiStore((s) => s.focusedPanel);
+  const scrollIndex = useTuiStore((s) => s.scrollIndex.machines);
+  const isFocused = focusedPanel === "machines";
+  const activeMachines = machines.filter((m) => !m.isRevoked);
+  const items = activeMachines.map((m) => ({
+    id: m.id,
+    label: m.name,
+    sublabel: m.platform,
+    rightLabel: m.isConnected ? "\u25CF online" : "\u25CB offline",
+    color: m.isConnected ? "green" : "gray"
+  }));
+  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,
+      selectedIndex: scrollIndex,
+      height: height - 3,
+      isFocused
+    }
+  ) });
+}
+
 // src/tui/components/panels/output-panel.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import "react";
+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";
@@ -971,13 +1857,13 @@ function OutputPanel({ height }) {
   const isFocused = focusedPanel === "output";
   const execution = watchingId ? outputs.get(watchingId) : null;
   const visibleHeight = Math.max(1, height - 4);
-  let title = "OUTPUT";
+  let title = "PROCESS OUTPUT";
   if (execution) {
     const shortId = execution.nodeId.length > 20 ? execution.nodeId.slice(0, 8) + "\u2026" : execution.nodeId;
-    title = `OUTPUT (${shortId}) [${execution.status}]`;
+    title = `${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 +1875,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 +1891,428 @@ 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";
+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 machineLabel(name, id) {
+  if (!id) return "No machine";
+  return name || id.slice(0, 12);
+}
+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 { machineId, machineName, workingDirectory, focusedField, pickerOpen } = useSessionSettingsStore();
+  const machines = useMachinesStore((s) => s.machines);
+  const connectedMachines = machines.filter((m) => m.isConnected);
+  const execution = watchingId ? outputs.get(watchingId) : null;
+  const isRunning = execution?.status === "running";
+  const settingsHeight = pickerOpen ? 2 + Math.min(connectedMachines.length, 5) : 2;
+  const inputHeight = 2;
+  const outputHeight = Math.max(1, height - 5 - settingsHeight - inputHeight);
+  const isInputActive = mode === "input" && !focusedField && !pickerOpen;
+  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__ */ jsxs10(Box9, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs10(Box9, { gap: 2, children: [
+        /* @__PURE__ */ jsxs10(Box9, { children: [
+          /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "Machine: " }),
+          /* @__PURE__ */ jsxs10(
+            Text12,
+            {
+              color: focusedField === "machine" ? "cyan" : void 0,
+              bold: focusedField === "machine",
+              inverse: focusedField === "machine",
+              children: [
+                " ",
+                machineLabel(machineName, machineId),
+                " "
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs10(Box9, { children: [
+          /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "Dir: " }),
+          /* @__PURE__ */ jsxs10(
+            Text12,
+            {
+              color: focusedField === "workdir" ? "cyan" : void 0,
+              bold: focusedField === "workdir",
+              inverse: focusedField === "workdir",
+              children: [
+                " ",
+                truncate(workingDirectory, 60),
+                " "
+              ]
+            }
+          )
+        ] }),
+        !focusedField && /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: " (\u2191 to change settings)" }),
+        focusedField && !pickerOpen && /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: " (Enter to edit, \u2193 to input)" })
+      ] }),
+      pickerOpen && focusedField === "machine" && /* @__PURE__ */ jsx11(Box9, { flexDirection: "column", marginLeft: 2, children: connectedMachines.length === 0 ? /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "  No connected machines" }) : connectedMachines.slice(0, 5).map((m) => /* @__PURE__ */ jsxs10(
+        Text12,
+        {
+          color: m.id === machineId ? "green" : void 0,
+          children: [
+            m.id === machineId ? "\u25CF " : "  ",
+            m.name || m.id.slice(0, 12),
+            " (",
+            m.hostname,
+            ", ",
+            m.platform,
+            ")"
+          ]
+        },
+        m.id
+      )) }),
+      pickerOpen && focusedField === "workdir" && /* @__PURE__ */ jsxs10(Box9, { marginLeft: 2, children: [
+        /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "Path: " }),
+        /* @__PURE__ */ jsx11(
+          TextInput2,
+          {
+            defaultValue: workingDirectory,
+            onSubmit: (val) => {
+              if (val.trim()) {
+                useSessionSettingsStore.getState().setWorkingDirectory(val.trim());
+              }
+              useSessionSettingsStore.getState().setPickerOpen(false);
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__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: focusedField ? "Press \u2193 to return to input" : "Press Enter to start typing..." })
+    ] }) })
+  ] }) });
+}
+
+// src/tui/components/panels/active-list-panel.tsx
+import { useState as useState2, useEffect as useEffect3 } from "react";
+import { Box as Box10, Text as Text13, useInput as useInput2 } from "ink";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var TERMINAL_NODE_STATUSES2 = /* @__PURE__ */ new Set([
+  "completed",
+  "auto_verified",
+  "awaiting_judgment",
+  "awaiting_approval",
+  "pruned"
+]);
+function statusSymbol(status) {
+  if (status === "generating") return "\u2728";
+  if (status === "running") return "\u25B6";
+  if (status === "pending") return "\u25CB";
+  return "\xB7";
+}
+function statusColor(status) {
+  if (status === "generating") return "magenta";
+  if (status === "running") return "cyan";
+  if (status === "pending") return "yellow";
+  return "gray";
+}
+function elapsedLabel(startedAt) {
+  if (!startedAt) return "";
+  const ms = Date.now() - new Date(startedAt).getTime();
+  if (ms < 0) return "";
+  const s = Math.floor(ms / 1e3);
+  const m = Math.floor(s / 60);
+  if (m > 0) return `${m}m${(s % 60).toString().padStart(2, "0")}s`;
+  return `${s}s`;
+}
+function ActiveListPanel({ height }) {
+  const outputs = useExecutionStore((s) => s.outputs);
+  const watchingId = useExecutionStore((s) => s.watchingId);
+  const pendingApproval = useExecutionStore((s) => s.pendingApproval);
+  const mode = useTuiStore((s) => s.mode);
+  const projects = useProjectsStore((s) => s.projects);
+  const planNodes = usePlanStore((s) => s.nodes);
+  const [cursor, setCursor] = useState2(0);
+  const tasksByProject = /* @__PURE__ */ new Map();
+  for (const [id, exec] of outputs) {
+    if (exec.status !== "running" && exec.status !== "pending" && exec.status !== "dispatched") continue;
+    const isPlanSession = exec.nodeId.startsWith("plan-");
+    const isPlayground = exec.nodeId.startsWith("playground-");
+    const isChatSession = exec.nodeId.startsWith("chat-");
+    const node = isPlanSession || isPlayground || isChatSession ? void 0 : planNodes.find((n) => n.id === exec.nodeId);
+    if (node && TERMINAL_NODE_STATUSES2.has(node.status)) continue;
+    let projectId = null;
+    if (node?.projectId) {
+      projectId = node.projectId;
+    } else if (isPlanSession) {
+      projectId = exec.nodeId.replace(/^plan-/, "").replace(/-\d+$/, "");
+    } else if (isPlayground) {
+      const parts = exec.nodeId.replace(/^playground-/, "").split("-");
+      parts.pop();
+      projectId = parts.join("-");
+    } else if (isChatSession) {
+      projectId = exec.nodeId.replace(/^chat-/, "").replace(/-\d+$/, "");
+    }
+    if (!projectId) continue;
+    let title = exec.title;
+    if (!title || title === exec.nodeId) {
+      if (isPlanSession) {
+        title = "Interactive Planning";
+      } else if (isPlayground) {
+        const proj = projects.find((p) => p.id === projectId);
+        title = proj?.name ? `Playground: ${proj.name}` : "Playground Session";
+      } else {
+        title = node?.title ?? `Task ${exec.nodeId.slice(0, 8)}`;
+      }
+    }
+    const task = {
+      nodeId: exec.nodeId,
+      projectId,
+      title,
+      status: isPlanSession ? "generating" : exec.status === "running" ? "running" : "pending",
+      executionId: id,
+      startedAt: exec.startedAt
+    };
+    const list = tasksByProject.get(projectId) ?? [];
+    list.push(task);
+    tasksByProject.set(projectId, list);
+  }
+  for (const node of planNodes) {
+    if (node.status !== "in_progress" && node.status !== "dispatched") continue;
+    if (node.deletedAt) continue;
+    const alreadyCovered = Array.from(outputs.values()).some(
+      (exec) => exec.nodeId === node.id && (exec.status === "running" || exec.status === "pending" || exec.status === "dispatched")
+    );
+    if (alreadyCovered) continue;
+    const task = {
+      nodeId: node.id,
+      projectId: node.projectId,
+      title: node.title,
+      status: node.status === "in_progress" ? "running" : "pending",
+      startedAt: node.executionStartedAt
+    };
+    const list = tasksByProject.get(node.projectId) ?? [];
+    list.push(task);
+    tasksByProject.set(node.projectId, list);
+  }
+  const sortedProjects = Array.from(tasksByProject.entries()).map(([projectId, tasks]) => {
+    const project = projects.find((p) => p.id === projectId);
+    return {
+      projectId,
+      projectName: project?.name ?? `Project ${projectId.slice(0, 8)}`,
+      projectColor: project?.color,
+      tasks
+    };
+  }).sort((a, b) => b.tasks.length - a.tasks.length);
+  const rows = [];
+  for (const group of sortedProjects) {
+    rows.push({
+      type: "header",
+      label: group.projectName,
+      color: "blue",
+      taskCount: group.tasks.length
+    });
+    for (const task of group.tasks) {
+      rows.push({
+        type: "entry",
+        label: task.title,
+        executionId: task.executionId,
+        status: task.status,
+        startedAt: task.startedAt
+      });
+    }
+  }
+  const selectableIndices = rows.map((r, i) => r.type === "entry" ? i : -1).filter((i) => i >= 0);
+  useEffect3(() => {
+    if (selectableIndices.length > 0 && cursor >= selectableIndices.length) {
+      setCursor(selectableIndices.length - 1);
+    }
+  }, [selectableIndices.length, cursor]);
+  useInput2((input, key) => {
+    if (mode !== "normal") return;
+    if (key.upArrow || input === "k") {
+      setCursor((c) => Math.max(0, c - 1));
+    } else if (key.downArrow || input === "j") {
+      setCursor((c) => Math.min(selectableIndices.length - 1, c + 1));
+    } else if (key.return) {
+      const rowIdx = selectableIndices[cursor];
+      const row = rows[rowIdx];
+      if (row?.executionId) {
+        useExecutionStore.getState().setWatching(row.executionId);
+      }
+    }
+  });
+  const totalCount = selectableIndices.length;
+  const visibleHeight = Math.max(1, height - 3);
+  const cursorRowIdx = selectableIndices[cursor] ?? 0;
+  let start = 0;
+  if (rows.length > visibleHeight) {
+    if (cursorRowIdx >= rows.length - visibleHeight) {
+      start = rows.length - visibleHeight;
+    } else {
+      start = Math.max(0, cursorRowIdx - Math.floor(visibleHeight / 2));
+    }
+  }
+  const visibleRows = rows.slice(start, start + visibleHeight);
+  const titleSuffix = totalCount > 0 ? ` (${totalCount})` : "";
+  return /* @__PURE__ */ jsx12(Panel, { title: `ACTIVE${titleSuffix}`, isFocused: true, height, children: rows.length === 0 ? /* @__PURE__ */ jsx12(Text13, { dimColor: true, children: "  No active tasks" }) : /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
+    visibleRows.map((row, i) => {
+      const actualIndex = start + i;
+      if (row.type === "header") {
+        return /* @__PURE__ */ jsxs11(Text13, { bold: true, color: "blue", children: [
+          ` ${truncate(row.label, 24)} `,
+          /* @__PURE__ */ jsxs11(Text13, { dimColor: true, children: [
+            "(",
+            row.taskCount,
+            ")"
+          ] })
+        ] }, `hdr-${actualIndex}`);
+      }
+      const isCursor = actualIndex === cursorRowIdx;
+      const isWatched = row.executionId === watchingId;
+      const hasApproval = pendingApproval?.taskId === row.executionId;
+      const elapsed = elapsedLabel(row.startedAt);
+      return /* @__PURE__ */ jsxs11(Box10, { children: [
+        /* @__PURE__ */ jsxs11(
+          Text13,
+          {
+            color: hasApproval ? "yellow" : isCursor ? "cyan" : isWatched ? "green" : statusColor(row.status),
+            bold: isCursor,
+            inverse: isCursor,
+            wrap: "truncate",
+            children: [
+              isCursor ? " > " : isWatched ? " * " : "   ",
+              hasApproval ? "!" : statusSymbol(row.status),
+              " ",
+              truncate(row.label, 20)
+            ]
+          }
+        ),
+        elapsed && /* @__PURE__ */ jsxs11(Text13, { dimColor: true, children: [
+          " ",
+          elapsed
+        ] })
+      ] }, row.executionId ?? `row-${actualIndex}`);
+    }),
+    rows.length > visibleHeight && /* @__PURE__ */ jsxs11(Text13, { dimColor: true, children: [
+      "  [",
+      start + 1,
+      "-",
+      Math.min(start + visibleHeight, rows.length),
+      "/",
+      rows.length,
+      "]"
+    ] })
+  ] }) });
+}
+
+// src/tui/components/panels/detail-overlay.tsx
+import "react";
+import { Box as Box11, Text as Text14 } from "ink";
+import { jsx as jsx13, jsxs as jsxs12 } 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__ */ jsxs12(
+    Box11,
     {
       flexDirection: "column",
       borderStyle: "round",
@@ -1023,124 +2320,221 @@ 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__ */ jsx13(ProjectDetail, { id: detailId }),
+        detailType === "node" && /* @__PURE__ */ jsx13(NodeDetail, { id: detailId }),
+        detailType === "machine" && /* @__PURE__ */ jsx13(MachineDetail, { id: detailId }),
+        /* @__PURE__ */ jsx13(Text14, { 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__ */ jsx13(Text14, { color: "red", children: "Project not found" });
+  return /* @__PURE__ */ jsxs12(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx13(Text14, { bold: true, color: "cyan", children: project.name }),
+    /* @__PURE__ */ jsx13(Text14, { children: " " }),
+    /* @__PURE__ */ jsx13(Field, { label: "ID", value: project.id }),
+    /* @__PURE__ */ jsx13(Field, { label: "Status", value: project.status, color: getStatusColor(project.status) }),
+    /* @__PURE__ */ jsx13(Field, { label: "Description", value: project.description || "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Health", value: project.health ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Progress", value: `${project.progress}%` }),
+    /* @__PURE__ */ jsx13(Field, { label: "Working Dir", value: project.workingDirectory ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Repository", value: project.repository ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Delivery", value: project.deliveryMode ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Start Date", value: project.startDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Target Date", value: project.targetDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Created", value: formatRelativeTime(project.createdAt) }),
+    /* @__PURE__ */ jsx13(Field, { label: "Updated", value: formatRelativeTime(project.updatedAt) }),
+    /* @__PURE__ */ jsx13(Text14, { 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__ */ jsx13(Text14, { color: "red", children: "Node not found" });
+  return /* @__PURE__ */ jsxs12(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx13(Text14, { bold: true, color: "cyan", children: node.title }),
+    /* @__PURE__ */ jsx13(Text14, { children: " " }),
+    /* @__PURE__ */ jsx13(Field, { label: "ID", value: node.id }),
+    /* @__PURE__ */ jsx13(Field, { label: "Type", value: node.type }),
+    /* @__PURE__ */ jsx13(Field, { label: "Status", value: node.status, color: getStatusColor(node.status) }),
+    /* @__PURE__ */ jsx13(Field, { label: "Description", value: node.description || "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Priority", value: node.priority ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Estimate", value: node.estimate ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Start Date", value: node.startDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "End Date", value: node.endDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Due Date", value: node.dueDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Branch", value: node.branchName ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "PR URL", value: node.prUrl ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Execution ID", value: node.executionId ?? "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Exec Started", value: node.executionStartedAt ? formatRelativeTime(node.executionStartedAt) : "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Exec Completed", value: node.executionCompletedAt ? formatRelativeTime(node.executionCompletedAt) : "\u2014" }),
+    /* @__PURE__ */ jsx13(Text14, { 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__ */ jsx13(Text14, { color: "red", children: "Machine not found" });
+  return /* @__PURE__ */ jsxs12(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx13(Text14, { bold: true, color: "cyan", children: machine.name }),
+    /* @__PURE__ */ jsx13(Text14, { children: " " }),
+    /* @__PURE__ */ jsx13(Field, { label: "ID", value: machine.id }),
+    /* @__PURE__ */ jsx13(Field, { label: "Hostname", value: machine.hostname }),
+    /* @__PURE__ */ jsx13(Field, { label: "Platform", value: machine.platform }),
+    /* @__PURE__ */ jsx13(Field, { label: "Env Type", value: machine.environmentType }),
+    /* @__PURE__ */ jsx13(Field, { label: "Connected", value: machine.isConnected ? "Yes" : "No", color: machine.isConnected ? "green" : "red" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Providers", value: machine.providers.join(", ") || "\u2014" }),
+    /* @__PURE__ */ jsx13(Field, { label: "Registered", value: formatRelativeTime(machine.registeredAt) }),
+    /* @__PURE__ */ jsx13(Field, { label: "Last Seen", value: formatRelativeTime(machine.lastSeenAt) }),
+    /* @__PURE__ */ jsx13(Text14, { 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__ */ jsxs12(Box11, { children: [
+    /* @__PURE__ */ jsx13(Text14, { dimColor: true, children: label.padEnd(16) }),
+    color ? /* @__PURE__ */ jsx13(Text14, { color, children: value }) : /* @__PURE__ */ jsx13(Text14, { children: value })
   ] });
 }
 
+// src/tui/components/shared/approval-dialog.tsx
+import { useState as useState3 } from "react";
+import { Box as Box12, Text as Text15, useInput as useInput3 } from "ink";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function ApprovalDialog({ question, options, onSelect, onDismiss }) {
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  useInput3((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__ */ jsxs13(
+    Box12,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "yellow",
+      paddingX: 1,
+      paddingY: 0,
+      children: [
+        /* @__PURE__ */ jsx14(Text15, { color: "yellow", bold: true, children: "Approval Required" }),
+        /* @__PURE__ */ jsx14(Text15, { wrap: "wrap", children: question }),
+        /* @__PURE__ */ jsx14(Box12, { flexDirection: "column", marginTop: 1, children: options.map((opt, i) => /* @__PURE__ */ jsx14(Box12, { children: /* @__PURE__ */ jsxs13(Text15, { color: i === selectedIndex ? "cyan" : "white", children: [
+          i === selectedIndex ? "\u25B8 " : "  ",
+          "[",
+          i + 1,
+          "] ",
+          opt
+        ] }) }, i)) }),
+        /* @__PURE__ */ jsx14(Box12, { marginTop: 1, children: /* @__PURE__ */ jsxs13(Text15, { 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, jsx as jsx15, jsxs as jsxs14 } 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__ */ jsxs14(Box13, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+      /* @__PURE__ */ jsx15(StatusBar, {}),
+      /* @__PURE__ */ jsx15(HelpOverlay, {}),
+      /* @__PURE__ */ jsx15(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__ */ jsxs14(Box13, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+      /* @__PURE__ */ jsx15(StatusBar, {}),
+      /* @__PURE__ */ jsx15(DetailOverlay, {}),
+      /* @__PURE__ */ jsx15(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__ */ jsx15(Box13, { position: "absolute", marginTop: 4, marginLeft: Math.floor(termWidth / 4), children: /* @__PURE__ */ jsx15(
+    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__ */ jsx15(Box13, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx15(Box13, { flexGrow: 1, children: /* @__PURE__ */ jsx15(SessionPanel, { height: contentHeight, title: "PLAN GENERATION", sessionType: "plan-generate", onSubmit: onSessionMessage }) }) });
+  } else if (activeView === "projects") {
+    content = /* @__PURE__ */ jsxs14(Box13, { flexDirection: "row", height: contentHeight, children: [
+      /* @__PURE__ */ jsx15(Box13, { width: "40%", children: /* @__PURE__ */ jsx15(ProjectsPanel, { height: contentHeight }) }),
+      /* @__PURE__ */ jsx15(Box13, { flexGrow: 1, children: /* @__PURE__ */ jsx15(PlanPanel, { height: contentHeight }) })
+    ] });
+  } else if (activeView === "playground") {
+    content = /* @__PURE__ */ jsx15(Box13, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx15(Box13, { flexGrow: 1, children: /* @__PURE__ */ jsx15(SessionPanel, { height: contentHeight, title: "PLAYGROUND", sessionType: "playground", onSubmit: onSessionMessage }) }) });
+  } else if (activeView === "active") {
+    content = /* @__PURE__ */ jsxs14(Box13, { flexDirection: "row", height: contentHeight, children: [
+      /* @__PURE__ */ jsx15(Box13, { width: "25%", children: /* @__PURE__ */ jsx15(ActiveListPanel, { height: contentHeight }) }),
+      /* @__PURE__ */ jsx15(Box13, { flexGrow: 1, children: /* @__PURE__ */ jsx15(OutputPanel, { height: contentHeight }) })
+    ] });
+  } else {
+    const topRowHeight = Math.floor(contentHeight / 2);
+    const bottomRowHeight = contentHeight - topRowHeight;
+    content = /* @__PURE__ */ jsxs14(Fragment, { children: [
+      /* @__PURE__ */ jsxs14(Box13, { flexDirection: "row", height: topRowHeight, children: [
+        /* @__PURE__ */ jsx15(Box13, { width: "30%", children: /* @__PURE__ */ jsx15(ProjectsPanel, { height: topRowHeight }) }),
+        /* @__PURE__ */ jsx15(Box13, { flexGrow: 1, children: /* @__PURE__ */ jsx15(PlanPanel, { height: topRowHeight }) })
+      ] }),
+      /* @__PURE__ */ jsxs14(Box13, { flexDirection: "row", height: bottomRowHeight, children: [
+        /* @__PURE__ */ jsx15(Box13, { width: "30%", children: /* @__PURE__ */ jsx15(MachinesPanel, { height: bottomRowHeight }) }),
+        /* @__PURE__ */ jsx15(Box13, { flexGrow: 1, children: showChat ? /* @__PURE__ */ jsx15(ChatPanel, { height: bottomRowHeight }) : /* @__PURE__ */ jsx15(OutputPanel, { height: bottomRowHeight }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14(Box13, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+    /* @__PURE__ */ jsx15(StatusBar, {}),
+    content,
+    /* @__PURE__ */ jsx15(SearchOverlay, {}),
+    approvalOverlay,
+    /* @__PURE__ */ jsx15(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 useInput4, useApp } from "ink";
 
 // src/tui/lib/vim-state-machine.ts
 function initialVimState() {
@@ -1170,92 +2564,119 @@ 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, ctrl);
   }
 }
-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 "d":
+        return [state, { type: "cancel" }];
+      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: "active" }];
+    // Function-key style shortcuts (single letter, no prefix needed)
     case "d":
       return [state, { type: "dispatch" }];
-    case "c":
+    case "x":
       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 +2686,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 +2720,10 @@ function handleSearchMode(state, key) {
   }
   return [state, { type: "none" }];
 }
-function handleInsertMode(state, _) {
+function handleInputMode(state, key, ctrl) {
+  if (ctrl && key === "d") {
+    return [{ ...state, mode: "normal" }, { type: "cancel" }];
+  }
   return [state, { type: "none" }];
 }
 
@@ -1306,6 +2736,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();
@@ -1326,6 +2766,13 @@ function useVimMode(callbacks = {}) {
               store.pageDown();
               break;
           }
+          if (store.focusedPanel === "projects") {
+            const sorted = getVisibleProjects(useProjectsStore.getState().projects);
+            const idx = useTuiStore.getState().scrollIndex.projects;
+            if (sorted[idx]) {
+              useTuiStore.getState().setSelectedProject(sorted[idx].id);
+            }
+          }
           break;
         case "focus":
           if (effect.panel != null) {
@@ -1336,19 +2783,33 @@ function useVimMode(callbacks = {}) {
             store.focusNext();
           }
           break;
-        case "select":
-          callbacks.onSelect?.();
+        case "select": {
+          const view = store.activeView;
+          if (view === "playground" || view === "plan-gen" || view === "active") {
+            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) {
+              const cmd = selected.usage?.startsWith("resume:") ? selected.usage : selected.name;
+              callbacks.onCommand?.(cmd);
+            }
+          } 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 +2822,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 === "active") {
+            store.setActiveView(effect.value);
+          }
+          break;
         case "none":
           break;
       }
     },
     [store, callbacks, exit]
   );
-  useInput2((input, key) => {
-    if (store.showHelp || store.showSearch || store.showDetail) {
+  useInput4((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");
@@ -1383,20 +2855,80 @@ function useVimMode(callbacks = {}) {
       }
       return;
     }
+    const isSessionView = store.activeView === "playground" || store.activeView === "plan-gen";
+    if (isSessionView && vimState.current.mode === "input") {
+      const settings = useSessionSettingsStore.getState();
+      if (key.escape) {
+        if (settings.pickerOpen) {
+          settings.setPickerOpen(false);
+          return;
+        }
+        if (settings.focusedField) {
+          settings.setFocusedField(null);
+          return;
+        }
+      }
+      if (settings.pickerOpen && settings.focusedField === "machine") {
+        const machines = useMachinesStore.getState().machines.filter((m) => m.isConnected);
+        const currentIdx = machines.findIndex((m) => m.id === settings.machineId);
+        if (key.upArrow) {
+          const newIdx = Math.max(0, currentIdx - 1);
+          if (machines[newIdx]) settings.setMachine(machines[newIdx].id, machines[newIdx].name);
+          return;
+        }
+        if (key.downArrow) {
+          const newIdx = Math.min(machines.length - 1, currentIdx + 1);
+          if (machines[newIdx]) settings.setMachine(machines[newIdx].id, machines[newIdx].name);
+          return;
+        }
+        if (key.return) {
+          settings.setPickerOpen(false);
+          return;
+        }
+        return;
+      }
+      if (settings.pickerOpen && settings.focusedField === "workdir") {
+        return;
+      }
+      if (settings.focusedField) {
+        if (key.return) {
+          settings.setPickerOpen(true);
+          return;
+        }
+        if (key.leftArrow || key.rightArrow) {
+          settings.setFocusedField(settings.focusedField === "machine" ? "workdir" : "machine");
+          return;
+        }
+        if (key.downArrow) {
+          settings.setFocusedField(null);
+          return;
+        }
+        if (key.upArrow) return;
+      }
+      if (!settings.focusedField && key.upArrow) {
+        settings.setFocusedField("machine");
+        return;
+      }
+    }
     let keyStr = input;
     if (key.escape) keyStr = "escape";
     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);
@@ -1408,8 +2940,26 @@ function useVimMode(callbacks = {}) {
 }
 
 // src/tui/hooks/use-polling.ts
-import { useEffect as useEffect2, useCallback as useCallback2 } from "react";
-function usePolling(client, intervalMs = 3e4) {
+import { useEffect as useEffect4, useCallback as useCallback2 } from "react";
+function deriveTitle(nodeId, exec, projects, planNodes) {
+  const projectName = projects.find((p) => p.id === exec.projectId)?.name;
+  if (nodeId.startsWith("playground-")) {
+    const firstLine = exec.streamText?.split("\n").find((l) => l.trim().length > 0)?.trim();
+    if (firstLine && firstLine.length > 5) {
+      return `Playground: ${firstLine.slice(0, 50)}`;
+    }
+    return `Playground${projectName ? ` \u2014 ${projectName}` : ""}`;
+  }
+  if (nodeId.startsWith("plan-")) {
+    return `Plan${projectName ? ` \u2014 ${projectName}` : ""}`;
+  }
+  const planNode = planNodes.find((n) => n.id === nodeId);
+  if (planNode) {
+    return planNode.title;
+  }
+  return projectName ? `Task \u2014 ${projectName}` : nodeId.slice(0, 30);
+}
+function usePolling(client, intervalMs = 1e4) {
   const selectedProjectId = useTuiStore((s) => s.selectedProjectId);
   const loadProjects = useCallback2(async () => {
     useProjectsStore.getState().setLoading(true);
@@ -1429,6 +2979,13 @@ function usePolling(client, intervalMs = 3e4) {
       usePlanStore.getState().setError(err instanceof Error ? err.message : String(err));
     }
   }, [client]);
+  const loadAllPlans = useCallback2(async () => {
+    try {
+      const { nodes, edges } = await client.getFullPlan();
+      usePlanStore.getState().setAllPlans(nodes, edges);
+    } catch {
+    }
+  }, [client]);
   const loadMachines = useCallback2(async () => {
     useMachinesStore.getState().setLoading(true);
     try {
@@ -1439,32 +2996,62 @@ function usePolling(client, intervalMs = 3e4) {
       useMachinesStore.getState().setError(err instanceof Error ? err.message : String(err));
     }
   }, [client]);
+  const loadExecutions = useCallback2(async () => {
+    try {
+      const execMap = await client.getExecutions();
+      const projects = useProjectsStore.getState().projects;
+      const planNodes = usePlanStore.getState().nodes;
+      const entries = Object.values(execMap).map((e) => {
+        const nodeId = e.nodeClientId ?? e.nodeId ?? e.executionId;
+        return {
+          executionId: e.executionId,
+          nodeId,
+          title: deriveTitle(nodeId, e, projects, planNodes),
+          status: e.status,
+          startedAt: e.startedAt
+        };
+      });
+      useExecutionStore.getState().seedHistorical(entries);
+    } catch {
+    }
+  }, [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(),
-      ...selectedProjectId ? [loadPlan(selectedProjectId)] : []
+      loadExecutions(),
+      loadUsage(),
+      loadAllPlans()
     ]);
-  }, [loadProjects, loadMachines, loadPlan, selectedProjectId]);
-  useEffect2(() => {
+  }, [loadProjects, loadMachines, loadExecutions, loadUsage, loadAllPlans]);
+  useEffect4(() => {
     refreshAll2();
   }, [refreshAll2]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (selectedProjectId) {
-      loadPlan(selectedProjectId);
+      usePlanStore.getState().selectProject(selectedProjectId);
     } else {
       usePlanStore.getState().clear();
     }
-  }, [selectedProjectId, loadPlan]);
-  useEffect2(() => {
+  }, [selectedProjectId]);
+  useEffect4(() => {
     const timer = setInterval(refreshAll2, intervalMs);
     return () => clearInterval(timer);
   }, [refreshAll2, intervalMs]);
-  return { refreshAll: refreshAll2, loadProjects, loadPlan, loadMachines };
+  return { refreshAll: refreshAll2, loadProjects, loadPlan, loadAllPlans, loadMachines };
 }
 
 // src/tui/hooks/use-sse-stream.ts
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 
 // src/tui/sse-client.ts
 var SSEClient = class {
@@ -1549,17 +3136,18 @@ var SSEClient = class {
 };
 
 // src/tui/hooks/use-sse-stream.ts
-function useSSEStream(client) {
+function useSSEStream(client, onReconnect) {
   const sseRef = useRef2(null);
   const setConnected = useTuiStore((s) => s.setConnected);
   const setMachineCount = useTuiStore((s) => s.setMachineCount);
   const setLastError = useTuiStore((s) => s.setLastError);
-  useEffect3(() => {
+  useEffect5(() => {
     const handler = (event) => {
       switch (event.type) {
         case "__connected":
           setConnected(true);
           setLastError(null);
+          onReconnect?.();
           break;
         case "__disconnected":
           setConnected(false);
@@ -1629,11 +3217,37 @@ function useSSEStream(client) {
           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);
+        case "task:session_init": {
+          const taskId = event.data.taskId;
+          const nodeId = event.data.nodeId ?? taskId;
+          const title = event.data.title ?? nodeId;
+          useExecutionStore.getState().initExecution(taskId, nodeId, title);
+          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 { 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":
@@ -1651,7 +3265,7 @@ function useSSEStream(client) {
 }
 
 // src/tui/hooks/use-fuzzy-search.ts
-import { useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect6, useCallback as useCallback3 } from "react";
 import Fuse from "fuse.js";
 var fuseInstance = null;
 function useFuzzySearch() {
@@ -1659,7 +3273,7 @@ function useFuzzySearch() {
   const nodes = usePlanStore((s) => s.nodes);
   const machines = useMachinesStore((s) => s.machines);
   const { setItems, setResults, query } = useSearchStore();
-  useEffect4(() => {
+  useEffect6(() => {
     const items = [
       ...projects.map((p) => ({
         type: "project",
@@ -1698,7 +3312,7 @@ function useFuzzySearch() {
     const results = fuseInstance.search(q, { limit: 20 });
     setResults(results.map((r) => r.item));
   }, [setResults]);
-  useEffect4(() => {
+  useEffect6(() => {
     search(query);
   }, [query, search]);
   return { search };
@@ -1707,263 +3321,6 @@ function useFuzzySearch() {
 // 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: ")) {
-              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));
-    }
-  },
-  // ── 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));
-  }
-}
-
 // src/tui/commands/autocomplete.ts
 var PrefixTrie = class {
   root;
@@ -2005,6 +3362,19 @@ for (const key of Object.keys(handlers)) {
   trie.insert(key);
 }
 async function executeCommand(input, client) {
+  const colonIdx = input.indexOf(":");
+  if (colonIdx > 0) {
+    const prefix = input.slice(0, colonIdx);
+    const value = input.slice(colonIdx + 1);
+    if (handlers[prefix]) {
+      try {
+        await handlers[prefix]([value], client);
+      } catch (err) {
+        useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+      }
+      return;
+    }
+  }
   const parts = input.split(/\s+/);
   if (parts.length >= 2) {
     const twoWord = `${parts[0]} ${parts[1]}`;
@@ -2052,18 +3422,28 @@ function useCommandParser(client) {
 }
 
 // src/tui/app.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function App({ serverUrl }) {
-  const client = useMemo(() => new AstroClient({ serverUrl }), [serverUrl]);
+  const client = useMemo2(() => new AstroClient({ serverUrl }), [serverUrl]);
   const { refreshAll: refreshAll2 } = usePolling(client);
-  useSSEStream(client);
+  useSSEStream(client, refreshAll2);
   useFuzzySearch();
+  const machines = useMachinesStore((s) => s.machines);
+  useEffect7(() => {
+    const settings = useSessionSettingsStore.getState();
+    if (settings.machineId) return;
+    const localPlatform = process.platform;
+    const m = machines.find((m2) => m2.isConnected && m2.platform === localPlatform) ?? machines.find((m2) => m2.isConnected);
+    if (m) {
+      settings.init(m.id, m.name, process.cwd());
+    }
+  }, [machines]);
   const { execute } = useCommandParser(client);
   const onSelect = useCallback5(() => {
     const { focusedPanel, scrollIndex } = useTuiStore.getState();
     switch (focusedPanel) {
       case "projects": {
-        const projects = useProjectsStore.getState().projects;
+        const projects = getVisibleProjects(useProjectsStore.getState().projects);
         const idx = scrollIndex.projects;
         if (projects[idx]) {
           useTuiStore.getState().setSelectedProject(projects[idx].id);
@@ -2071,12 +3451,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 +3481,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 +3503,33 @@ function App({ serverUrl }) {
   const onRefresh = useCallback5(() => {
     refreshAll2();
   }, [refreshAll2]);
+  const onSessionMessage = useCallback5(async (message) => {
+    const { selectedProjectId, activeView, selectedNodeId } = useTuiStore.getState();
+    const watchingId = useExecutionStore.getState().watchingId;
+    if (!watchingId) {
+      if (activeView === "playground") {
+        await execute(`playground ${message}`);
+      } else if (activeView === "plan-gen") {
+        if (!selectedProjectId) {
+          useTuiStore.getState().setLastError("No project selected for plan generation");
+          return;
+        }
+        await execute(`plan generate ${message}`);
+      } else {
+        await execute(`playground ${message}`);
+      }
+      return;
+    }
+    if (!selectedProjectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    if (selectedNodeId) {
+      await execute(`task chat ${message}`);
+    } else {
+      await execute(`project chat ${message}`);
+    }
+  }, [execute]);
   useVimMode({
     onSelect,
     onCommand,
@@ -2121,13 +3538,13 @@ function App({ serverUrl }) {
     onCancel,
     onRefresh
   });
-  return /* @__PURE__ */ jsx13(MainLayout, {});
+  return /* @__PURE__ */ jsx16(MainLayout, { onSessionMessage });
 }
 
 // src/tui/index.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 async function launchTui(serverUrl) {
-  render(/* @__PURE__ */ jsx14(App, { serverUrl }), {
+  render(/* @__PURE__ */ jsx17(App, { serverUrl }), {
     exitOnCtrlC: true
   });
 }