@astroanywhere/cli 0.1.1 → 0.2.1

package/dist/tui.js

@@ -0,0 +1,2812 @@
+#!/usr/bin/env node
+import {
+  AstroClient
+} from "./chunk-SYY2HHOY.js";
+
+// src/tui/index.tsx
+import "react";
+import { render } from "ink";
+
+// src/tui/app.tsx
+import { useMemo, useCallback as useCallback5 } from "react";
+
+// src/tui/components/layout/main-layout.tsx
+import "react";
+import { Box as Box12, useStdout as useStdout3 } from "ink";
+
+// src/tui/components/layout/status-bar.tsx
+import "react";
+import { Box, Text } from "ink";
+
+// src/tui/stores/tui-store.ts
+import { create } from "zustand";
+var PANEL_ORDER = ["projects", "plan", "machines", "output", "chat"];
+var useTuiStore = create((set, get) => ({
+  mode: "normal",
+  commandBuffer: "",
+  searchQuery: "",
+  pendingKeys: "",
+  focusedPanel: "projects",
+  panelOrder: PANEL_ORDER,
+  selectedProjectId: null,
+  selectedNodeId: null,
+  selectedMachineId: null,
+  selectedExecutionId: null,
+  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, paletteIndex: 0 }),
+  setSearchQuery: (searchQuery) => set({ searchQuery }),
+  setPendingKeys: (pendingKeys) => set({ pendingKeys }),
+  focusPanel: (panel) => set({ focusedPanel: panel }),
+  focusNext: () => {
+    const { focusedPanel, panelOrder } = get();
+    const idx = panelOrder.indexOf(focusedPanel);
+    set({ focusedPanel: panelOrder[(idx + 1) % panelOrder.length] });
+  },
+  focusPrev: () => {
+    const { focusedPanel, panelOrder } = get();
+    const idx = panelOrder.indexOf(focusedPanel);
+    set({ focusedPanel: panelOrder[(idx - 1 + panelOrder.length) % panelOrder.length] });
+  },
+  focusByIndex: (idx) => {
+    const { panelOrder } = get();
+    if (idx >= 0 && idx < panelOrder.length) {
+      set({ focusedPanel: panelOrder[idx] });
+    }
+  },
+  setSelectedProject: (selectedProjectId) => set({ selectedProjectId }),
+  setSelectedNode: (selectedNodeId) => set({ selectedNodeId }),
+  setSelectedMachine: (selectedMachineId) => set({ selectedMachineId }),
+  setSelectedExecution: (selectedExecutionId) => set({ selectedExecutionId }),
+  scrollUp: (panel) => {
+    const p = panel ?? get().focusedPanel;
+    set((s) => ({
+      scrollIndex: { ...s.scrollIndex, [p]: Math.max(0, s.scrollIndex[p] - 1) }
+    }));
+  },
+  scrollDown: (panel, max) => {
+    const p = panel ?? get().focusedPanel;
+    set((s) => ({
+      scrollIndex: {
+        ...s.scrollIndex,
+        [p]: max != null ? Math.min(max - 1, s.scrollIndex[p] + 1) : s.scrollIndex[p] + 1
+      }
+    }));
+  },
+  scrollToTop: (panel) => {
+    const p = panel ?? get().focusedPanel;
+    set((s) => ({
+      scrollIndex: { ...s.scrollIndex, [p]: 0 }
+    }));
+  },
+  scrollToBottom: (panel, max) => {
+    const p = panel ?? get().focusedPanel;
+    if (max != null && max > 0) {
+      set((s) => ({
+        scrollIndex: { ...s.scrollIndex, [p]: max - 1 }
+      }));
+    }
+  },
+  pageUp: (panel, pageSize = 10) => {
+    const p = panel ?? get().focusedPanel;
+    set((s) => ({
+      scrollIndex: { ...s.scrollIndex, [p]: Math.max(0, s.scrollIndex[p] - pageSize) }
+    }));
+  },
+  pageDown: (panel, max, pageSize = 10) => {
+    const p = panel ?? get().focusedPanel;
+    set((s) => ({
+      scrollIndex: {
+        ...s.scrollIndex,
+        [p]: max != null ? Math.min(max - 1, s.scrollIndex[p] + pageSize) : s.scrollIndex[p] + pageSize
+      }
+    }));
+  },
+  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, 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 })
+}));
+
+// src/tui/lib/format.ts
+function formatRelativeTime(date) {
+  if (!date) return "\u2014";
+  const d = typeof date === "string" ? new Date(date) : date;
+  const now = Date.now();
+  const diff = now - d.getTime();
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (seconds < 60) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 30) return `${days}d ago`;
+  return d.toLocaleDateString();
+}
+function formatCost(usd) {
+  if (usd == null) return "\u2014";
+  return `$${usd.toFixed(2)}`;
+}
+function truncate(str, maxLen) {
+  if (str.length <= maxLen) return str;
+  return str.slice(0, maxLen - 1) + "\u2026";
+}
+
+// src/tui/components/layout/status-bar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var VIEW_LABELS = {
+  dashboard: "Dashboard",
+  "plan-gen": "Plan",
+  projects: "Projects",
+  playground: "Playground",
+  output: "Output"
+};
+function StatusBar() {
+  const connected = useTuiStore((s) => s.connected);
+  const machineCount = useTuiStore((s) => s.machineCount);
+  const todayCost = useTuiStore((s) => s.todayCost);
+  const lastError = useTuiStore((s) => s.lastError);
+  const activeView = useTuiStore((s) => s.activeView);
+  return /* @__PURE__ */ jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Box, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Astro" }),
+      /* @__PURE__ */ jsx(Text, { color: connected ? "green" : "red", children: connected ? "\u25CF" : "\u25CB" }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        machineCount,
+        " machine",
+        machineCount !== 1 ? "s" : ""
+      ] }),
+      /* @__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 > 50 ? lastError.slice(0, 47) + "..." : lastError }) })
+  ] });
+}
+
+// src/tui/components/layout/command-line.tsx
+import "react";
+import { Box as Box2, Text as Text2, useStdout } from "ink";
+
+// src/tui/stores/search-store.ts
+import { create as create2 } from "zustand";
+var useSearchStore = create2((set, get) => ({
+  items: [],
+  query: "",
+  results: [],
+  selectedIndex: 0,
+  isOpen: false,
+  setItems: (items) => set({ items }),
+  setQuery: (query) => set({ query, selectedIndex: 0 }),
+  setResults: (results) => set({ results }),
+  setSelectedIndex: (selectedIndex) => set({ selectedIndex }),
+  moveUp: () => {
+    const { selectedIndex } = get();
+    set({ selectedIndex: Math.max(0, selectedIndex - 1) });
+  },
+  moveDown: () => {
+    const { selectedIndex, results } = get();
+    set({ selectedIndex: Math.min(results.length - 1, selectedIndex + 1) });
+  },
+  open: () => set({ isOpen: true, query: "", results: [], selectedIndex: 0 }),
+  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
+  active: "green",
+  archived: "gray",
+  // Plan node statuses
+  planned: "yellow",
+  dispatched: "cyan",
+  in_progress: "cyan",
+  auto_verified: "green",
+  awaiting_approval: "magenta",
+  awaiting_judgment: "magenta",
+  completed: "blue",
+  pruned: "gray",
+  // Execution statuses
+  pending: "yellow",
+  running: "cyan",
+  success: "green",
+  failure: "red",
+  cancelled: "gray",
+  error: "red",
+  timeout: "red",
+  // Machine connection
+  connected: "green",
+  disconnected: "gray",
+  // Health
+  on_track: "green",
+  at_risk: "yellow",
+  off_track: "red"
+};
+function getStatusColor(status) {
+  return STATUS_COLOR_MAP[status] ?? "white";
+}
+function getStatusSymbol(status) {
+  switch (status) {
+    case "completed":
+    case "auto_verified":
+    case "success":
+      return "\u2713";
+    // ✓
+    case "in_progress":
+    case "running":
+    case "dispatched":
+      return "\u25CB";
+    // ○ (spinning handled separately)
+    case "planned":
+    case "pending":
+      return "\u2022";
+    // •
+    case "failure":
+    case "error":
+      return "\u2717";
+    // ✗
+    case "pruned":
+    case "cancelled":
+      return "\u2500";
+    // ─
+    case "awaiting_approval":
+    case "awaiting_judgment":
+      return "?";
+    default:
+      return "\u2022";
+  }
+}
+
+// src/tui/lib/tree-builder.ts
+function buildTree(nodes, edges) {
+  const adj = /* @__PURE__ */ new Map();
+  const hasParent = /* @__PURE__ */ new Set();
+  for (const edge of edges) {
+    const children = adj.get(edge.source) ?? [];
+    children.push(edge.target);
+    adj.set(edge.source, children);
+    hasParent.add(edge.target);
+  }
+  const lookup = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    if (!node.deletedAt) lookup.set(node.id, node);
+  }
+  function buildSubtree(nodeId) {
+    const node = lookup.get(nodeId);
+    if (!node) return null;
+    const childIds = adj.get(nodeId) ?? [];
+    const children = [];
+    for (const childId of childIds) {
+      const child = buildSubtree(childId);
+      if (child) children.push(child);
+    }
+    return {
+      id: node.id,
+      title: node.title,
+      status: node.status,
+      type: node.type,
+      children
+    };
+  }
+  const roots = [];
+  for (const node of nodes) {
+    if (!node.deletedAt && !hasParent.has(node.id)) {
+      const tree = buildSubtree(node.id);
+      if (tree) roots.push(tree);
+    }
+  }
+  return roots;
+}
+function renderTreeLines(roots, collapsedSet) {
+  const lines = [];
+  function walk(node, prefix, isLast, depth) {
+    const connector = depth === 0 ? isLast ? "\u2514\u2500\u2500 " : "\u251C\u2500\u2500 " : isLast ? "\u2514\u2500\u2500 " : "\u251C\u2500\u2500 ";
+    const symbol = getStatusSymbol(node.status);
+    const collapsed = collapsedSet?.has(node.id) && node.children.length > 0;
+    const expandIcon = node.children.length > 0 ? collapsed ? "\u25B6 " : "\u25BC " : "  ";
+    lines.push({
+      id: node.id,
+      text: `${prefix}${connector}${expandIcon}${symbol} ${node.title} [${node.status}]`,
+      status: node.status,
+      depth,
+      isLeaf: node.children.length === 0,
+      nodeTitle: node.title
+    });
+    if (collapsed) return;
+    const childPrefix = prefix + (isLast ? "    " : "\u2502   ");
+    for (let i = 0; i < node.children.length; i++) {
+      walk(node.children[i], childPrefix, i === node.children.length - 1, depth + 1);
+    }
+  }
+  for (let i = 0; i < roots.length; i++) {
+    walk(roots[i], "", i === roots.length - 1, 0);
+  }
+  return lines;
+}
+
+// src/tui/stores/plan-store.ts
+var usePlanStore = create4((set, get) => ({
+  projectId: null,
+  nodes: [],
+  edges: [],
+  treeRoots: [],
+  treeLines: [],
+  collapsedNodes: /* @__PURE__ */ new Set(),
+  loading: false,
+  error: null,
+  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 });
+  },
+  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);
+    }
+    const treeLines = renderTreeLines(treeRoots, next);
+    set({ collapsedNodes: next, treeLines });
+  },
+  updateNodeStatus: (nodeId, status) => {
+    const { nodes, edges, collapsedNodes } = 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 });
+  },
+  clear: () => set({
+    projectId: null,
+    nodes: [],
+    edges: [],
+    treeRoots: [],
+    treeLines: [],
+    loading: false,
+    error: null
+  })
+}));
+
+// src/tui/stores/machines-store.ts
+import { create as create5 } from "zustand";
+var useMachinesStore = create5((set, get) => ({
+  machines: [],
+  loading: false,
+  error: null,
+  setMachines: (machines) => set({ machines, loading: false, error: null }),
+  updateMachine: (id, patch) => {
+    set((s) => ({
+      machines: s.machines.map((m) => m.id === id ? { ...m, ...patch } : m)
+    }));
+  },
+  removeMachine: (id) => {
+    set((s) => ({ machines: s.machines.filter((m) => m.id !== id) }));
+  },
+  addMachine: (machine) => {
+    const { machines } = get();
+    const existing = machines.findIndex((m) => m.id === machine.id);
+    if (existing >= 0) {
+      set({ machines: machines.map((m, i) => i === existing ? machine : m) });
+    } else {
+      set({ machines: [...machines, machine] });
+    }
+  },
+  setLoading: (loading) => set({ loading }),
+  setError: (error) => set({ error, loading: false })
+}));
+
+// src/tui/stores/execution-store.ts
+import { create as create6 } from "zustand";
+var MAX_LINES = 5e3;
+function flushToolDots(output) {
+  if (output.pendingToolCount === 0) return output.lines;
+  const dots = "\xB7".repeat(output.pendingToolCount);
+  const line = `[Tool Call] ${dots}`;
+  const lines = [...output.lines, line];
+  output.pendingToolCount = 0;
+  return lines;
+}
+function trimRingBuffer(lines) {
+  if (lines.length > MAX_LINES) {
+    lines.splice(0, lines.length - MAX_LINES);
+  }
+  return lines;
+}
+var useExecutionStore = create6((set, get) => ({
+  outputs: /* @__PURE__ */ new Map(),
+  watchingId: null,
+  pendingApproval: null,
+  initExecution: (executionId, nodeId) => {
+    const { outputs } = get();
+    const next = new Map(outputs);
+    next.set(executionId, {
+      executionId,
+      nodeId,
+      lines: [],
+      status: "running",
+      startedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      pendingToolCount: 0
+    });
+    set({ outputs: next });
+  },
+  appendToolCall: (executionId) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, pendingToolCount: current.pendingToolCount + 1 });
+    set({ outputs: next });
+  },
+  appendFileChange: (executionId, path, action, added, removed) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    const stats = [
+      added != null && added > 0 ? `+${added}` : null,
+      removed != null && removed > 0 ? `-${removed}` : null
+    ].filter(Boolean).join(" ");
+    lines.push(`[${action}] ${path}${stats ? ` (${stats})` : ""}`);
+    trimRingBuffer(lines);
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  appendLine: (executionId, line) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    lines.push(line);
+    trimRingBuffer(lines);
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  appendText: (executionId, text) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    const newLines = text.split("\n");
+    if (lines.length > 0 && newLines.length > 0) {
+      lines[lines.length - 1] += newLines[0];
+      for (let i = 1; i < newLines.length; i++) {
+        lines.push(newLines[i]);
+      }
+    } else {
+      lines.push(...newLines);
+    }
+    trimRingBuffer(lines);
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  setStatus: (executionId, status) => {
+    const { outputs } = get();
+    const current = outputs.get(executionId);
+    if (!current) return;
+    const lines = flushToolDots({ ...current });
+    const next = new Map(outputs);
+    next.set(executionId, { ...current, lines, status, pendingToolCount: 0 });
+    set({ outputs: next });
+  },
+  setWatching: (watchingId) => set({ watchingId }),
+  setPendingApproval: (pendingApproval) => set({ pendingApproval }),
+  clear: (executionId) => {
+    const { outputs } = get();
+    const next = new Map(outputs);
+    next.delete(executionId);
+    set({ outputs: next });
+  }
+}));
+
+// src/tui/commands/handlers.ts
+var PALETTE_COMMANDS = [
+  { name: "project list", description: "List all projects" },
+  { name: "project show", description: "Show project details", usage: "project show <id>" },
+  { name: "project create", description: "Create a new project", usage: "project create <name>" },
+  { name: "project delete", description: "Delete a project", usage: "project delete <id>" },
+  { name: "plan tree", description: "Show plan tree for selected project" },
+  { name: "plan create-node", description: "Create a plan node", usage: "plan create-node <title>" },
+  { name: "plan update-node", description: "Update a plan node field", usage: "plan update-node <id> <field> <value>" },
+  { name: "dispatch", description: "Dispatch selected task for execution", usage: "dispatch [nodeId]" },
+  { name: "cancel", description: "Cancel running execution", usage: "cancel [executionId]" },
+  { name: "steer", description: "Send guidance to running task", usage: "steer <message>" },
+  { name: "watch", description: "Watch execution output", usage: "watch <executionId>" },
+  { name: "env list", description: "List machines/environments" },
+  { name: "env status", description: "Show relay status" },
+  { name: "search", description: "Search projects and tasks", usage: "search <query>" },
+  { name: "activity", description: "Show recent activity feed" },
+  { name: "playground", description: "Start a playground (Cloud Code) session", usage: "playground <description>" },
+  { name: "plan generate", description: "Generate a plan using AI", usage: "plan generate <description>" },
+  { name: "refresh", description: "Refresh all data" },
+  { name: "help", description: "Toggle keybinding reference" },
+  { name: "quit", description: "Exit the TUI" }
+];
+var handlers = {
+  // ── Quit ──
+  q: async () => {
+    process.exit(0);
+  },
+  quit: async () => {
+    process.exit(0);
+  },
+  // ── Refresh ──
+  r: async (_args, client) => {
+    await refreshAll(client);
+  },
+  refresh: async (_args, client) => {
+    await refreshAll(client);
+  },
+  // ── Project commands ──
+  "project list": async (_args, client) => {
+    const projects = await client.listProjects();
+    useProjectsStore.getState().setProjects(projects);
+  },
+  "project show": async (args, client) => {
+    const id = args[0];
+    if (!id) return;
+    try {
+      const project = await client.resolveProject(id);
+      useTuiStore.getState().openDetail("project", project.id);
+    } catch {
+      useTuiStore.getState().setLastError(`Project not found: ${id}`);
+    }
+  },
+  "project create": async (args, client) => {
+    const name = args.join(" ");
+    if (!name) {
+      useTuiStore.getState().setLastError("Usage: :project create <name>");
+      return;
+    }
+    await client.createProject({ name });
+    const projects = await client.listProjects();
+    useProjectsStore.getState().setProjects(projects);
+  },
+  "project delete": async (args, client) => {
+    const id = args[0];
+    if (!id) return;
+    try {
+      const project = await client.resolveProject(id);
+      await client.deleteProject(project.id);
+      const projects = await client.listProjects();
+      useProjectsStore.getState().setProjects(projects);
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Plan commands ──
+  "plan tree": async (_args, client) => {
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    const { nodes, edges } = await client.getPlan(projectId);
+    usePlanStore.getState().setPlan(projectId, nodes, edges);
+    useTuiStore.getState().focusPanel("plan");
+  },
+  "plan create-node": async (args, client) => {
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    const title = args.join(" ");
+    if (!title) {
+      useTuiStore.getState().setLastError("Usage: :plan create-node <title>");
+      return;
+    }
+    const id = `node-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    await client.createPlanNode({ id, projectId, title });
+    const { nodes, edges } = await client.getPlan(projectId);
+    usePlanStore.getState().setPlan(projectId, nodes, edges);
+  },
+  "plan update-node": async (args, client) => {
+    const [nodeId, field, ...rest] = args;
+    if (!nodeId || !field) {
+      useTuiStore.getState().setLastError("Usage: :plan update-node <nodeId> <field> <value>");
+      return;
+    }
+    const value = rest.join(" ");
+    await client.updatePlanNode(nodeId, { [field]: value });
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (projectId) {
+      const { nodes, edges } = await client.getPlan(projectId);
+      usePlanStore.getState().setPlan(projectId, nodes, edges);
+    }
+  },
+  // ── Dispatch ──
+  d: async (args, client) => {
+    await handlers.dispatch(args, client);
+  },
+  dispatch: async (args, client) => {
+    const nodeId = args[0] ?? useTuiStore.getState().selectedNodeId;
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!nodeId || !projectId) {
+      useTuiStore.getState().setLastError("No node/project selected for dispatch");
+      return;
+    }
+    try {
+      const response = await client.dispatchTask({ nodeId, projectId });
+      const execId = `exec-${Date.now()}`;
+      useExecutionStore.getState().initExecution(execId, nodeId);
+      useExecutionStore.getState().setWatching(execId);
+      useTuiStore.getState().focusPanel("output");
+      if (response.body) {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              try {
+                const event = JSON.parse(line.slice(6));
+                const eventType = event.type;
+                if (eventType === "text") {
+                  useExecutionStore.getState().appendText(execId, event.content ?? "");
+                } else if (eventType === "tool_use") {
+                  useExecutionStore.getState().appendToolCall(execId, event.name ?? "");
+                } else if (eventType === "result") {
+                  useExecutionStore.getState().setStatus(execId, event.status ?? "completed");
+                } else if (eventType === "error") {
+                  useExecutionStore.getState().appendLine(execId, `[error] ${event.message}`);
+                  useExecutionStore.getState().setStatus(execId, "failure");
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Cancel ──
+  c: async (args, client) => {
+    await handlers.cancel(args, client);
+  },
+  cancel: async (args, client) => {
+    const executionId = args[0] ?? useExecutionStore.getState().watchingId;
+    if (!executionId) {
+      useTuiStore.getState().setLastError("No execution to cancel");
+      return;
+    }
+    try {
+      await client.cancelTask({ executionId });
+      useExecutionStore.getState().setStatus(executionId, "cancelled");
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Steer ──
+  s: async (args, client) => {
+    await handlers.steer(args, client);
+  },
+  steer: async (args, client) => {
+    const message = args.join(" ");
+    if (!message) {
+      useTuiStore.getState().setLastError("Usage: :steer <message>");
+      return;
+    }
+    const executionId = useExecutionStore.getState().watchingId;
+    const selectedMachineId = useTuiStore.getState().selectedMachineId;
+    if (!executionId || !selectedMachineId) {
+      useTuiStore.getState().setLastError("No active execution/machine to steer");
+      return;
+    }
+    try {
+      await client.steerTask({ taskId: executionId, machineId: selectedMachineId, message });
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Watch ──
+  watch: async (args) => {
+    const executionId = args[0];
+    if (!executionId) {
+      useTuiStore.getState().setLastError("Usage: :watch <executionId>");
+      return;
+    }
+    useExecutionStore.getState().setWatching(executionId);
+    useTuiStore.getState().focusPanel("output");
+  },
+  // ── Env ──
+  "env list": async (_args, client) => {
+    const machines = await client.listMachines();
+    useMachinesStore.getState().setMachines(machines);
+    useTuiStore.getState().focusPanel("machines");
+  },
+  "env status": async (_args, client) => {
+    const status = await client.getRelayStatus();
+    useTuiStore.getState().setLastError(JSON.stringify(status, null, 2));
+  },
+  // ── Search ──
+  search: async (args, client) => {
+    const query = args.join(" ");
+    if (!query) return;
+    try {
+      await client.search(query);
+      useTuiStore.getState().toggleSearch();
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Activity ──
+  activity: async (_args, client) => {
+    const projectId = useTuiStore.getState().selectedProjectId;
+    try {
+      const activities = await client.listActivities(projectId ? { projectId } : void 0);
+      for (const a of activities.slice(0, 20)) {
+        useExecutionStore.getState().appendLine("activity", `[${a.type}] ${a.title}`);
+      }
+      useExecutionStore.getState().setWatching("activity");
+      useTuiStore.getState().focusPanel("output");
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Playground ──
+  playground: async (args, client) => {
+    const description = args.join(" ");
+    if (!description) {
+      useTuiStore.getState().setLastError("Usage: playground <description>");
+      return;
+    }
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected. Select a project first.");
+      return;
+    }
+    const nodeId = `playground-${projectId}-${Date.now()}`;
+    try {
+      const response = await client.dispatchTask({
+        nodeId,
+        projectId,
+        skipSafetyCheck: true,
+        description,
+        title: `Playground: ${description.slice(0, 50)}`
+      });
+      useExecutionStore.getState().initExecution(nodeId, nodeId);
+      useExecutionStore.getState().setWatching(nodeId);
+      useTuiStore.getState().setActiveView("playground");
+      await streamExecution(nodeId, response);
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Plan Generate ──
+  "plan generate": async (args, client) => {
+    const description = args.join(" ");
+    if (!description) {
+      useTuiStore.getState().setLastError("Usage: plan generate <description>");
+      return;
+    }
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (!projectId) {
+      useTuiStore.getState().setLastError("No project selected. Select a project first.");
+      return;
+    }
+    const nodeId = `plan-${projectId}`;
+    try {
+      const response = await client.dispatchTask({
+        nodeId,
+        projectId,
+        isInteractivePlan: true,
+        description
+      });
+      useExecutionStore.getState().initExecution(nodeId, nodeId);
+      useExecutionStore.getState().setWatching(nodeId);
+      useTuiStore.getState().setActiveView("plan-gen");
+      await streamExecution(nodeId, response);
+      useExecutionStore.getState().appendLine(nodeId, "[plan] Refreshing plan...");
+      const { nodes, edges } = await client.getPlan(projectId);
+      usePlanStore.getState().setPlan(projectId, nodes, edges);
+      useTuiStore.getState().setActiveView("dashboard");
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  },
+  // ── Help ──
+  help: async () => {
+    useTuiStore.getState().toggleHelp();
+  },
+  "?": async () => {
+    useTuiStore.getState().toggleHelp();
+  }
+};
+async function streamExecution(executionId, response) {
+  if (!response.body) return;
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+    for (const line of lines) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const event = JSON.parse(line.slice(6));
+        const eventType = event.type;
+        if (eventType === "text") {
+          useExecutionStore.getState().appendText(executionId, event.content ?? "");
+        } else if (eventType === "tool_use") {
+          useExecutionStore.getState().appendToolCall(executionId, event.name ?? "");
+        } else if (eventType === "file_change") {
+          useExecutionStore.getState().appendFileChange(
+            executionId,
+            event.path ?? "",
+            event.action ?? "modified",
+            event.linesAdded,
+            event.linesRemoved
+          );
+        } else if (eventType === "result" || eventType === "done") {
+          useExecutionStore.getState().setStatus(executionId, event.status ?? "completed");
+        } else if (eventType === "error") {
+          useExecutionStore.getState().appendLine(executionId, `[error] ${event.message}`);
+          useExecutionStore.getState().setStatus(executionId, "failure");
+        } else if (eventType === "plan_result") {
+          useExecutionStore.getState().appendLine(executionId, "[plan] Plan generated successfully");
+        } else if (eventType === "approval_request") {
+          useExecutionStore.getState().setPendingApproval({
+            requestId: event.requestId,
+            question: event.question,
+            options: event.options,
+            machineId: event.machineId,
+            taskId: event.taskId
+          });
+        }
+      } catch {
+      }
+    }
+  }
+}
+async function refreshAll(client) {
+  try {
+    const [projects, machines] = await Promise.all([
+      client.listProjects(),
+      client.listMachines()
+    ]);
+    useProjectsStore.getState().setProjects(projects);
+    useMachinesStore.getState().setMachines(machines);
+    useTuiStore.getState().setMachineCount(machines.filter((m) => m.isConnected).length);
+    const projectId = useTuiStore.getState().selectedProjectId;
+    if (projectId) {
+      const { nodes, edges } = await client.getPlan(projectId);
+      usePlanStore.getState().setPlan(projectId, nodes, edges);
+    }
+  } catch (err) {
+    useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+  }
+}
+
+// src/tui/commands/palette-filter.ts
+function getFilteredPaletteCommands(query) {
+  if (!query) return PALETTE_COMMANDS;
+  const lower = query.toLowerCase();
+  return PALETTE_COMMANDS.filter(
+    (cmd) => cmd.name.toLowerCase().includes(lower) || cmd.description.toLowerCase().includes(lower)
+  );
+}
+
+// src/tui/components/layout/command-line.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SHORTCUTS = [
+  { key: "1", label: "Dashboard" },
+  { key: "2", label: "Plan" },
+  { key: "3", label: "Projects" },
+  { key: "4", label: "Playground" },
+  { key: "5", label: "Output" },
+  { key: "/", label: "Search" },
+  { key: "C-p", label: "Commands" },
+  { key: "d", label: "Dispatch" },
+  { key: "?", label: "Help" },
+  { key: "q", label: "Quit" }
+];
+var TYPE_LABELS = {
+  project: { label: "proj", color: "cyan" },
+  task: { label: "task", color: "yellow" },
+  machine: { label: "env", color: "green" },
+  execution: { label: "exec", color: "magenta" }
+};
+function CommandLine({ height }) {
+  const mode = useTuiStore((s) => s.mode);
+  const commandBuffer = useTuiStore((s) => s.commandBuffer);
+  const paletteIndex = useTuiStore((s) => s.paletteIndex);
+  const searchOpen = useSearchStore((s) => s.isOpen);
+  const searchQuery = useSearchStore((s) => s.query);
+  const searchResults = useSearchStore((s) => s.results);
+  const searchItems = useSearchStore((s) => s.items);
+  const searchIndex = useSearchStore((s) => s.selectedIndex);
+  const { stdout } = useStdout();
+  const termWidth = stdout?.columns ?? 80;
+  const listHeight = Math.max(1, height - 3);
+  if (searchOpen) {
+    const displayList = searchQuery.length > 0 ? searchResults : searchItems;
+    const visible = displayList.slice(0, listHeight);
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", height, borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "/ " }),
+        /* @__PURE__ */ jsx2(Text2, { children: searchQuery }),
+        /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: "\u2588" }),
+        /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  (",
+          "\u2191\u2193",
+          " navigate, Enter to go, Esc to close)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: 1, children: [
+        visible.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: searchQuery.length > 0 ? "  No results" : "  No items" }) : visible.map((item, i) => {
+          const isSelected = i === searchIndex;
+          const typeInfo = TYPE_LABELS[item.type] ?? { label: item.type, color: "white" };
+          return /* @__PURE__ */ jsxs2(Box2, { children: [
+            /* @__PURE__ */ jsx2(Text2, { inverse: isSelected, bold: isSelected, color: isSelected ? "cyan" : void 0, children: isSelected ? " > " : "   " }),
+            /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, color: isSelected ? "cyan" : typeInfo.color, children: [
+              "[",
+              typeInfo.label,
+              "]"
+            ] }),
+            /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, bold: isSelected, wrap: "truncate", children: [
+              " ",
+              item.title
+            ] }),
+            item.status && /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, color: isSelected ? void 0 : getStatusColor(item.status), dimColor: !isSelected, children: [
+              " ",
+              item.status
+            ] })
+          ] }, `${item.type}-${item.id}`);
+        }),
+        displayList.length > listHeight && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  ...and ",
+          displayList.length - listHeight,
+          " more"
+        ] })
+      ] })
+    ] });
+  }
+  if (mode === "palette") {
+    const filtered = getFilteredPaletteCommands(commandBuffer);
+    const visible = filtered.slice(0, listHeight);
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", height, borderStyle: "single", borderColor: "yellow", paddingX: 1, children: [
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "yellow", children: "> " }),
+        /* @__PURE__ */ jsx2(Text2, { children: commandBuffer }),
+        /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: "\u2588" }),
+        /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  (",
+          "\u2191\u2193",
+          " navigate, Enter to run, Esc to cancel)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginTop: 1, children: [
+        visible.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "  No matching commands" }) : visible.map((cmd, i) => {
+          const isSelected = i === paletteIndex;
+          return /* @__PURE__ */ jsxs2(Box2, { children: [
+            /* @__PURE__ */ jsxs2(Text2, { inverse: isSelected, bold: isSelected, color: isSelected ? "yellow" : void 0, children: [
+              isSelected ? " > " : "   ",
+              cmd.name.padEnd(20)
+            ] }),
+            /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, color: isSelected ? "white" : void 0, children: [
+              " ",
+              cmd.description
+            ] })
+          ] }, cmd.name);
+        }),
+        filtered.length > listHeight && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          "  ...and ",
+          filtered.length - listHeight,
+          " more"
+        ] })
+      ] })
+    ] });
+  }
+  if (mode === "input") {
+    return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, height, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Input active \u2014 press Esc to exit" }) });
+  }
+  return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, gap: 1, height, children: SHORTCUTS.map(({ key, label }) => /* @__PURE__ */ jsxs2(Box2, { children: [
+    /* @__PURE__ */ jsx2(Text2, { inverse: true, bold: true, children: ` ${key} ` }),
+    /* @__PURE__ */ jsx2(Text2, { children: label })
+  ] }, key)) });
+}
+
+// src/tui/components/layout/help-overlay.tsx
+import "react";
+import { Box as Box3, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var KEYBINDINGS = [
+  ["Navigation", [
+    ["\u2191 / k", "Move up"],
+    ["\u2193 / j", "Move down"],
+    ["\u2190 / h", "Focus left panel"],
+    ["\u2192 / l", "Focus right panel"],
+    ["Tab", "Cycle panel focus"],
+    ["PgUp / PgDn", "Page up / down"],
+    ["Home / End", "Scroll to top / bottom"],
+    ["Enter", "Select / open detail view"],
+    ["d", "Dispatch selected task"]
+  ]],
+  ["Views", [
+    ["1", "Dashboard (default)"],
+    ["2", "Plan Generation"],
+    ["3", "Projects & Plan"],
+    ["4", "Playground"],
+    ["5", "Output"]
+  ]],
+  ["Shortcuts", [
+    ["Ctrl+P / :", "Open command palette (searchable)"],
+    ["Ctrl+F / /", "Open search"],
+    ["Ctrl+R", "Refresh all data"],
+    ["?", "Toggle this help"],
+    ["q / Ctrl+C", "Quit"],
+    ["Esc", "Close overlay / cancel input"]
+  ]],
+  ["Commands (via Ctrl+P)", [
+    ["project list / create / delete", "Project management"],
+    ["plan create-node", "Create a plan node"],
+    ["dispatch <nodeId>", "Dispatch task for execution"],
+    ["cancel <execId>", "Cancel execution"],
+    ["steer <message>", "Steer running task"],
+    ["watch <execId>", "Watch execution output"],
+    ["env list / status", "Machine management"],
+    ["activity", "Show activity feed"],
+    ["refresh / r", "Force refresh"],
+    ["quit / q", "Exit TUI"]
+  ]],
+  ["Terminal Compatibility", [
+    ["tmux", "Ctrl+B prefix is not captured \u2014 safe"],
+    ["screen", "Ctrl+A prefix is not captured \u2014 safe"],
+    ["vscode", "All bindings work in integrated terminal"]
+  ]]
+];
+function HelpOverlay() {
+  return /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "yellow",
+      paddingX: 2,
+      paddingY: 1,
+      children: [
+        /* @__PURE__ */ jsx3(Text3, { bold: true, color: "yellow", children: " Keybindings Reference " }),
+        /* @__PURE__ */ jsx3(Text3, { children: " " }),
+        KEYBINDINGS.map(([section, bindings]) => /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginBottom: 1, children: [
+          /* @__PURE__ */ jsx3(Text3, { bold: true, underline: true, children: section }),
+          bindings.map(([key, desc]) => /* @__PURE__ */ jsxs3(Box3, { gap: 2, children: [
+            /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: key.padEnd(34) }),
+            /* @__PURE__ */ jsx3(Text3, { children: desc })
+          ] }, key))
+        ] }, section)),
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Press Esc or ? to close" })
+      ]
+    }
+  );
+}
+
+// src/tui/components/layout/search-overlay.tsx
+import { useInput } from "ink";
+function SearchOverlay() {
+  const isOpen = useSearchStore((s) => s.isOpen);
+  const query = useSearchStore((s) => s.query);
+  const results = useSearchStore((s) => s.results);
+  const items = useSearchStore((s) => s.items);
+  const selectedIndex = useSearchStore((s) => s.selectedIndex);
+  const { setQuery, moveUp, moveDown, close } = useSearchStore();
+  const { setSelectedProject, setSelectedNode, setSelectedMachine, focusPanel, openDetail } = useTuiStore();
+  useInput((input, key) => {
+    if (!isOpen) return;
+    if (key.escape) {
+      close();
+      return;
+    }
+    if (key.upArrow) {
+      moveUp();
+      return;
+    }
+    if (key.downArrow || key.tab) {
+      moveDown();
+      return;
+    }
+    if (key.return) {
+      const displayList = query.length > 0 ? results : items;
+      const item = displayList[selectedIndex];
+      if (item) {
+        switch (item.type) {
+          case "project":
+            setSelectedProject(item.id);
+            focusPanel("projects");
+            break;
+          case "task":
+            setSelectedNode(item.id);
+            focusPanel("plan");
+            openDetail("node", item.id);
+            break;
+          case "machine":
+            setSelectedMachine(item.id);
+            focusPanel("machines");
+            break;
+        }
+      }
+      close();
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setQuery(query.slice(0, -1));
+      return;
+    }
+    if (input && input.length === 1 && !key.ctrl && !key.meta) {
+      setQuery(query + input);
+    }
+  }, { isActive: isOpen });
+  return null;
+}
+
+// src/tui/components/panels/projects-panel.tsx
+import "react";
+import { Box as Box5, Text as Text6 } from "ink";
+
+// src/tui/components/layout/panel.tsx
+import "react";
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Panel({ title, isFocused, children, width, height }) {
+  const borderColor = isFocused ? "cyan" : "gray";
+  return /* @__PURE__ */ jsxs4(
+    Box4,
+    {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor,
+      width,
+      height,
+      flexGrow: 1,
+      children: [
+        /* @__PURE__ */ jsx4(Box4, { paddingX: 1, children: /* @__PURE__ */ jsx4(Text4, { bold: true, color: isFocused ? "cyan" : "white", children: title }) }),
+        /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", paddingX: 1, flexGrow: 1, children })
+      ]
+    }
+  );
+}
+
+// src/tui/components/shared/spinner.tsx
+import { useState, useEffect } from "react";
+import { Text as Text5 } from "ink";
+import { jsxs as jsxs5 } from "react/jsx-runtime";
+var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+function Spinner({ label }) {
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame((f) => (f + 1) % FRAMES.length);
+    }, 80);
+    return () => clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ jsxs5(Text5, { color: "cyan", children: [
+    FRAMES[frame],
+    label ? ` ${label}` : ""
+  ] });
+}
+
+// src/tui/components/panels/projects-panel.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
+function statusSymbol(status) {
+  if (status === "running") return "\u25B6";
+  if (status === "success") return "\u2713";
+  if (status === "failure" || status === "error") return "\u2717";
+  return "\xB7";
+}
+function ProjectsPanel({ height }) {
+  const projects = useProjectsStore((s) => s.projects);
+  const loading = useProjectsStore((s) => s.loading);
+  const error = useProjectsStore((s) => s.error);
+  const focusedPanel = useTuiStore((s) => s.focusedPanel);
+  const scrollIndex = useTuiStore((s) => s.scrollIndex.projects);
+  const selectedProjectId = useTuiStore((s) => s.selectedProjectId);
+  const outputs = useExecutionStore((s) => s.outputs);
+  const isFocused = focusedPanel === "projects";
+  const visibleHeight = Math.max(1, height - 3);
+  const planGenEntries = [];
+  const playgroundEntries = [];
+  for (const [id, exec] of outputs) {
+    if (exec.nodeId.startsWith("plan-")) {
+      planGenEntries.push({ id, label: exec.nodeId, status: exec.status });
+    } else if (exec.nodeId.startsWith("playground-")) {
+      playgroundEntries.push({ id, label: exec.nodeId.replace(/^playground-/, "").slice(0, 30), status: exec.status });
+    }
+  }
+  const projectCount = projects.length;
+  const clampedIndex = Math.min(scrollIndex, Math.max(0, projectCount - 1));
+  const sectionLineCount = (planGenEntries.length > 0 ? 1 + planGenEntries.length : 0) + (playgroundEntries.length > 0 ? 1 + playgroundEntries.length : 0);
+  const projectVisibleHeight = Math.max(1, visibleHeight - sectionLineCount);
+  let start = 0;
+  if (projectCount > projectVisibleHeight) {
+    start = Math.max(0, Math.min(clampedIndex - Math.floor(projectVisibleHeight / 2), projectCount - projectVisibleHeight));
+  }
+  const visibleProjects = projects.slice(start, start + projectVisibleHeight);
+  return /* @__PURE__ */ jsx5(Panel, { title: "PROJECTS", isFocused, height, children: loading && projects.length === 0 ? /* @__PURE__ */ jsx5(Spinner, { label: "Loading projects..." }) : error ? /* @__PURE__ */ jsx5(Text6, { color: "red", children: error }) : /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", children: [
+    visibleProjects.length === 0 && planGenEntries.length === 0 && playgroundEntries.length === 0 && /* @__PURE__ */ jsx5(Text6, { dimColor: true, children: "  No projects yet" }),
+    visibleProjects.map((p, i) => {
+      const actualIndex = start + i;
+      const isSelected = isFocused && clampedIndex === actualIndex;
+      const isActive = p.id === selectedProjectId;
+      return /* @__PURE__ */ jsxs6(Box5, { children: [
+        /* @__PURE__ */ jsxs6(
+          Text6,
+          {
+            inverse: isSelected,
+            bold: isSelected,
+            color: isActive ? "cyan" : void 0,
+            wrap: "truncate",
+            children: [
+              isSelected ? " > " : "   ",
+              truncate(p.name, 30)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6(Text6, { dimColor: !isSelected, children: [
+          " ",
+          formatRelativeTime(p.updatedAt)
+        ] })
+      ] }, p.id);
+    }),
+    projectCount > projectVisibleHeight && /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      "  [",
+      start + 1,
+      "-",
+      Math.min(start + projectVisibleHeight, projectCount),
+      "/",
+      projectCount,
+      "]"
+    ] }),
+    planGenEntries.length > 0 && /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx5(Text6, { bold: true, color: "yellow", children: " Plan Generation" }),
+      planGenEntries.map((item) => /* @__PURE__ */ jsxs6(Text6, { dimColor: true, wrap: "truncate", children: [
+        "   ",
+        statusSymbol(item.status),
+        " ",
+        truncate(item.label, 28),
+        " ",
+        item.status
+      ] }, item.id))
+    ] }),
+    playgroundEntries.length > 0 && /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx5(Text6, { bold: true, color: "green", children: " Playground" }),
+      playgroundEntries.map((item) => /* @__PURE__ */ jsxs6(Text6, { dimColor: true, wrap: "truncate", children: [
+        "   ",
+        statusSymbol(item.status),
+        " ",
+        truncate(item.label, 28),
+        " ",
+        item.status
+      ] }, item.id))
+    ] })
+  ] }) });
+}
+
+// src/tui/components/panels/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 visibleHeight = Math.max(1, height - 1);
+  let start = 0;
+  if (selectedIndex >= visibleHeight) {
+    start = selectedIndex - visibleHeight + 1;
+  }
+  const visibleItems = items.slice(start, start + visibleHeight);
+  return /* @__PURE__ */ jsxs7(Box6, { flexDirection: "column", children: [
+    visibleItems.map((item, i) => {
+      const actualIndex = start + i;
+      const isSelected = actualIndex === selectedIndex && isFocused;
+      const prefix = isSelected ? " \u25B6 " : "   ";
+      const sublabel = item.sublabel ? ` ${item.sublabel}` : "";
+      const rightLabel = item.rightLabel ?? "";
+      const maxLabelWidth = Math.max(10, termWidth - prefix.length - sublabel.length - rightLabel.length - 10);
+      const truncatedLabel = item.label.length > maxLabelWidth ? item.label.slice(0, maxLabelWidth - 1) + "\u2026" : item.label;
+      return /* @__PURE__ */ jsxs7(Box6, { children: [
+        /* @__PURE__ */ jsxs7(
+          Text7,
+          {
+            color: isSelected ? "cyan" : item.color ?? void 0,
+            bold: isSelected,
+            inverse: isSelected,
+            wrap: "truncate",
+            children: [
+              prefix,
+              truncatedLabel,
+              sublabel
+            ]
+          }
+        ),
+        rightLabel && /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
+          " ",
+          rightLabel
+        ] })
+      ] }, item.id);
+    }),
+    items.length > visibleHeight && /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
+      "  [",
+      start + 1,
+      "-",
+      Math.min(start + visibleHeight, items.length),
+      "/",
+      items.length,
+      "]"
+    ] })
+  ] });
+}
+
+// src/tui/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 "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";
+  if (line.startsWith("[progress]")) return "cyan";
+  if (line.startsWith("[created]") || line.startsWith("[modified]") || line.startsWith("[deleted]")) return "yellow";
+  return void 0;
+}
+function OutputPanel({ height }) {
+  const watchingId = useExecutionStore((s) => s.watchingId);
+  const outputs = useExecutionStore((s) => s.outputs);
+  const focusedPanel = useTuiStore((s) => s.focusedPanel);
+  const scrollIndex = useTuiStore((s) => s.scrollIndex.output);
+  const isFocused = focusedPanel === "output";
+  const execution = watchingId ? outputs.get(watchingId) : null;
+  const visibleHeight = Math.max(1, height - 4);
+  let title = "OUTPUT";
+  if (execution) {
+    const shortId = execution.nodeId.length > 20 ? execution.nodeId.slice(0, 8) + "\u2026" : execution.nodeId;
+    title = `OUTPUT (${shortId}) [${execution.status}]`;
+  }
+  if (!execution) {
+    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";
+  const hasPendingTools = execution.pendingToolCount > 0;
+  let start;
+  if (scrollIndex >= lines.length - visibleHeight) {
+    start = Math.max(0, lines.length - visibleHeight);
+  } else {
+    start = Math.max(0, scrollIndex);
+  }
+  const visibleLines = lines.slice(start, start + visibleHeight);
+  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,
+      "-",
+      Math.min(start + visibleHeight, lines.length),
+      "/",
+      lines.length,
+      "]"
+    ] })
+  ] }) });
+}
+
+// src/tui/components/panels/chat-panel.tsx
+import "react";
+import { Box as Box8, Text as Text11 } from "ink";
+import { TextInput } from "@inkjs/ui";
+
+// src/tui/stores/chat-store.ts
+import { create as create7 } from "zustand";
+var useChatStore = create7((set, get) => ({
+  messages: [],
+  sessionId: null,
+  projectId: null,
+  nodeId: null,
+  streaming: false,
+  streamBuffer: "",
+  addMessage: (role, content) => {
+    set((s) => ({
+      messages: [...s.messages, { role, content, timestamp: (/* @__PURE__ */ new Date()).toISOString() }]
+    }));
+  },
+  appendStream: (text) => {
+    set((s) => ({ streamBuffer: s.streamBuffer + text }));
+  },
+  flushStream: () => {
+    const { streamBuffer } = get();
+    if (streamBuffer.length > 0) {
+      set((s) => ({
+        messages: [...s.messages, { role: "assistant", content: streamBuffer, timestamp: (/* @__PURE__ */ new Date()).toISOString() }],
+        streamBuffer: ""
+      }));
+    }
+  },
+  setSessionId: (sessionId) => set({ sessionId }),
+  setContext: (projectId, nodeId) => set({ projectId, nodeId: nodeId ?? null }),
+  setStreaming: (streaming) => set({ streaming }),
+  clear: () => set({ messages: [], sessionId: null, streamBuffer: "", streaming: false })
+}));
+
+// src/tui/components/panels/chat-panel.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChatPanel({ height }) {
+  const messages = useChatStore((s) => s.messages);
+  const streaming = useChatStore((s) => s.streaming);
+  const streamBuffer = useChatStore((s) => s.streamBuffer);
+  const sessionId = useChatStore((s) => s.sessionId);
+  const displayLines = [];
+  for (let i = 0; i < messages.length; i++) {
+    const m = messages[i];
+    const prefix = m.role === "user" ? "> " : "  ";
+    displayLines.push({ key: `msg-${i}`, text: `${prefix}${m.content}`, color: m.role === "user" ? "cyan" : void 0 });
+  }
+  if (streaming && streamBuffer) {
+    displayLines.push({ key: "stream", text: `  ${streamBuffer}` });
+  }
+  const contentHeight = height - 4;
+  const visibleLines = displayLines.slice(-Math.max(1, contentHeight));
+  const titleSuffix = sessionId ? ` (${sessionId.slice(0, 8)})` : "";
+  return /* @__PURE__ */ jsx10(Panel, { title: `Chat${titleSuffix}`, isFocused: false, height, children: /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx10(Box8, { flexDirection: "column", height: Math.max(1, contentHeight - 1), children: visibleLines.map((line) => /* @__PURE__ */ jsx10(Text11, { color: line.color, wrap: "truncate", children: line.text }, line.key)) }),
+    /* @__PURE__ */ jsx10(Box8, { children: streaming ? /* @__PURE__ */ jsxs9(Box8, { children: [
+      /* @__PURE__ */ jsx10(Spinner, {}),
+      /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: " Streaming..." })
+    ] }) : /* @__PURE__ */ jsxs9(Box8, { children: [
+      /* @__PURE__ */ jsx10(Text11, { color: "cyan", children: "> " }),
+      /* @__PURE__ */ jsx10(
+        TextInput,
+        {
+          placeholder: "Type a message...",
+          onSubmit: (value) => {
+            if (value.trim()) {
+              useChatStore.getState().addMessage("user", value.trim());
+            }
+          }
+        }
+      )
+    ] }) })
+  ] }) });
+}
+
+// src/tui/components/panels/session-panel.tsx
+import "react";
+import { Box as Box9, Text as Text12 } from "ink";
+import { TextInput as TextInput2 } from "@inkjs/ui";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function lineColor2(line) {
+  if (line.startsWith("[Tool Call]")) return "gray";
+  if (line.startsWith("[error]")) return "red";
+  if (line.startsWith("[progress]")) return "cyan";
+  if (line.startsWith("[plan]")) return "magenta";
+  if (line.startsWith("[created]") || line.startsWith("[modified]") || line.startsWith("[deleted]")) return "yellow";
+  if (line.startsWith("> ")) return "cyan";
+  return void 0;
+}
+function SessionPanel({ height, title, sessionType, onSubmit }) {
+  const watchingId = useExecutionStore((s) => s.watchingId);
+  const outputs = useExecutionStore((s) => s.outputs);
+  const streaming = useChatStore((s) => s.streaming);
+  const mode = useTuiStore((s) => s.mode);
+  const execution = watchingId ? outputs.get(watchingId) : null;
+  const isRunning = execution?.status === "running";
+  const inputHeight = 2;
+  const outputHeight = Math.max(1, height - 5 - inputHeight);
+  const isInputActive = mode === "input";
+  const lines = execution?.lines ?? [];
+  const hasPendingTools = (execution?.pendingToolCount ?? 0) > 0;
+  const start = Math.max(0, lines.length - outputHeight);
+  const visibleLines = lines.slice(start, start + outputHeight);
+  let statusLabel = "";
+  if (execution) {
+    statusLabel = ` [${execution.status}]`;
+  }
+  const hint = sessionType === "playground" ? "Describe what you want to build or explore" : "Describe the plan you want to generate";
+  return /* @__PURE__ */ jsx11(Panel, { title: `${title}${statusLabel}`, isFocused: true, height, children: /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", height: outputHeight, children: [
+      visibleLines.length === 0 && !isRunning ? /* @__PURE__ */ jsxs10(Text12, { dimColor: true, children: [
+        "  ",
+        hint,
+        ". Type below and press Enter."
+      ] }) : visibleLines.map((line, i) => /* @__PURE__ */ jsx11(Text12, { color: lineColor2(line), dimColor: line.startsWith("[Tool Call]"), wrap: "truncate", children: truncate(line, 200) }, start + i)),
+      hasPendingTools && /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "[Tool Call] " + "\xB7".repeat(execution.pendingToolCount) }),
+      isRunning && !hasPendingTools && /* @__PURE__ */ jsx11(Spinner, { label: "Running..." })
+    ] }),
+    lines.length > outputHeight && /* @__PURE__ */ jsxs10(Text12, { dimColor: true, children: [
+      "  [",
+      start + 1,
+      "-",
+      Math.min(start + outputHeight, lines.length),
+      "/",
+      lines.length,
+      "]"
+    ] }),
+    /* @__PURE__ */ jsx11(Box9, { borderStyle: "single", borderColor: isInputActive ? "cyan" : "gray", paddingX: 1, children: isRunning || streaming ? /* @__PURE__ */ jsxs10(Box9, { children: [
+      /* @__PURE__ */ jsx11(Spinner, {}),
+      /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: " Agent is working... (press Esc to return to navigation)" })
+    ] }) : /* @__PURE__ */ jsxs10(Box9, { children: [
+      /* @__PURE__ */ jsx11(Text12, { color: "cyan", children: "> " }),
+      isInputActive ? /* @__PURE__ */ jsx11(
+        TextInput2,
+        {
+          placeholder: hint,
+          onSubmit: (value) => {
+            if (value.trim()) {
+              const msg = value.trim();
+              if (watchingId) {
+                useExecutionStore.getState().appendLine(watchingId, `> ${msg}`);
+              }
+              useChatStore.getState().addMessage("user", msg);
+              onSubmit?.(msg);
+            }
+          }
+        }
+      ) : /* @__PURE__ */ jsx11(Text12, { dimColor: true, children: "Press Enter to start typing..." })
+    ] }) })
+  ] }) });
+}
+
+// src/tui/components/panels/detail-overlay.tsx
+import "react";
+import { Box as Box10, Text as Text13 } from "ink";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function DetailOverlay() {
+  const showDetail = useTuiStore((s) => s.showDetail);
+  const detailType = useTuiStore((s) => s.detailType);
+  const detailId = useTuiStore((s) => s.detailId);
+  if (!showDetail || !detailType || !detailId) return null;
+  return /* @__PURE__ */ jsxs11(
+    Box10,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "cyan",
+      paddingX: 2,
+      paddingY: 1,
+      children: [
+        detailType === "project" && /* @__PURE__ */ jsx12(ProjectDetail, { id: detailId }),
+        detailType === "node" && /* @__PURE__ */ jsx12(NodeDetail, { id: detailId }),
+        detailType === "machine" && /* @__PURE__ */ jsx12(MachineDetail, { id: detailId }),
+        /* @__PURE__ */ jsx12(Text13, { dimColor: true, children: "Press Esc to close" })
+      ]
+    }
+  );
+}
+function ProjectDetail({ id }) {
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === id));
+  if (!project) return /* @__PURE__ */ jsx12(Text13, { color: "red", children: "Project not found" });
+  return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx12(Text13, { bold: true, color: "cyan", children: project.name }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " }),
+    /* @__PURE__ */ jsx12(Field, { label: "ID", value: project.id }),
+    /* @__PURE__ */ jsx12(Field, { label: "Status", value: project.status, color: getStatusColor(project.status) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Description", value: project.description || "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Health", value: project.health ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Progress", value: `${project.progress}%` }),
+    /* @__PURE__ */ jsx12(Field, { label: "Working Dir", value: project.workingDirectory ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Repository", value: project.repository ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Delivery", value: project.deliveryMode ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Start Date", value: project.startDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Target Date", value: project.targetDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Created", value: formatRelativeTime(project.createdAt) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Updated", value: formatRelativeTime(project.updatedAt) }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " })
+  ] });
+}
+function NodeDetail({ id }) {
+  const node = usePlanStore((s) => s.nodes.find((n) => n.id === id));
+  if (!node) return /* @__PURE__ */ jsx12(Text13, { color: "red", children: "Node not found" });
+  return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx12(Text13, { bold: true, color: "cyan", children: node.title }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " }),
+    /* @__PURE__ */ jsx12(Field, { label: "ID", value: node.id }),
+    /* @__PURE__ */ jsx12(Field, { label: "Type", value: node.type }),
+    /* @__PURE__ */ jsx12(Field, { label: "Status", value: node.status, color: getStatusColor(node.status) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Description", value: node.description || "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Priority", value: node.priority ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Estimate", value: node.estimate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Start Date", value: node.startDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "End Date", value: node.endDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Due Date", value: node.dueDate ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Branch", value: node.branchName ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "PR URL", value: node.prUrl ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Execution ID", value: node.executionId ?? "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Exec Started", value: node.executionStartedAt ? formatRelativeTime(node.executionStartedAt) : "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Exec Completed", value: node.executionCompletedAt ? formatRelativeTime(node.executionCompletedAt) : "\u2014" }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " })
+  ] });
+}
+function MachineDetail({ id }) {
+  const machine = useMachinesStore((s) => s.machines.find((m) => m.id === id));
+  if (!machine) return /* @__PURE__ */ jsx12(Text13, { color: "red", children: "Machine not found" });
+  return /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx12(Text13, { bold: true, color: "cyan", children: machine.name }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " }),
+    /* @__PURE__ */ jsx12(Field, { label: "ID", value: machine.id }),
+    /* @__PURE__ */ jsx12(Field, { label: "Hostname", value: machine.hostname }),
+    /* @__PURE__ */ jsx12(Field, { label: "Platform", value: machine.platform }),
+    /* @__PURE__ */ jsx12(Field, { label: "Env Type", value: machine.environmentType }),
+    /* @__PURE__ */ jsx12(Field, { label: "Connected", value: machine.isConnected ? "Yes" : "No", color: machine.isConnected ? "green" : "red" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Providers", value: machine.providers.join(", ") || "\u2014" }),
+    /* @__PURE__ */ jsx12(Field, { label: "Registered", value: formatRelativeTime(machine.registeredAt) }),
+    /* @__PURE__ */ jsx12(Field, { label: "Last Seen", value: formatRelativeTime(machine.lastSeenAt) }),
+    /* @__PURE__ */ jsx12(Text13, { children: " " })
+  ] });
+}
+function Field({ label, value, color }) {
+  return /* @__PURE__ */ jsxs11(Box10, { children: [
+    /* @__PURE__ */ jsx12(Text13, { dimColor: true, children: label.padEnd(16) }),
+    color ? /* @__PURE__ */ jsx12(Text13, { color, children: value }) : /* @__PURE__ */ jsx12(Text13, { children: value })
+  ] });
+}
+
+// src/tui/components/shared/approval-dialog.tsx
+import { useState as useState2 } from "react";
+import { Box as Box11, Text as Text14, useInput as useInput2 } from "ink";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function ApprovalDialog({ question, options, onSelect, onDismiss }) {
+  const [selectedIndex, setSelectedIndex] = useState2(0);
+  useInput2((input, key) => {
+    if (key.escape) {
+      onDismiss();
+      return;
+    }
+    if (key.return) {
+      onSelect(selectedIndex);
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setSelectedIndex((i) => Math.min(options.length - 1, i + 1));
+    }
+    const num = parseInt(input, 10);
+    if (num >= 1 && num <= options.length) {
+      onSelect(num - 1);
+    }
+  });
+  return /* @__PURE__ */ jsxs12(
+    Box11,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "yellow",
+      paddingX: 1,
+      paddingY: 0,
+      children: [
+        /* @__PURE__ */ jsx13(Text14, { color: "yellow", bold: true, children: "Approval Required" }),
+        /* @__PURE__ */ jsx13(Text14, { wrap: "wrap", children: question }),
+        /* @__PURE__ */ jsx13(Box11, { flexDirection: "column", marginTop: 1, children: options.map((opt, i) => /* @__PURE__ */ jsx13(Box11, { children: /* @__PURE__ */ jsxs12(Text14, { color: i === selectedIndex ? "cyan" : "white", children: [
+          i === selectedIndex ? "\u25B8 " : "  ",
+          "[",
+          i + 1,
+          "] ",
+          opt
+        ] }) }, i)) }),
+        /* @__PURE__ */ jsx13(Box11, { marginTop: 1, children: /* @__PURE__ */ jsxs12(Text14, { dimColor: true, children: [
+          "\u2191\u2193/jk navigate \u2022 Enter select \u2022 1-",
+          options.length,
+          " quick select \u2022 Esc dismiss"
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/tui/components/layout/main-layout.tsx
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function MainLayout({ onSessionMessage }) {
+  const showHelp = useTuiStore((s) => s.showHelp);
+  const showDetail = useTuiStore((s) => s.showDetail);
+  const 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 panelOpen = searchOpen || mode === "palette";
+  const bottomPanelHeight = panelOpen ? Math.floor(termHeight / 2) : 1;
+  const contentHeight = termHeight - 2 - bottomPanelHeight;
+  if (showHelp) {
+    return /* @__PURE__ */ jsxs13(Box12, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+      /* @__PURE__ */ jsx14(StatusBar, {}),
+      /* @__PURE__ */ jsx14(HelpOverlay, {}),
+      /* @__PURE__ */ jsx14(CommandLine, { height: 1 })
+    ] });
+  }
+  if (showDetail) {
+    return /* @__PURE__ */ jsxs13(Box12, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+      /* @__PURE__ */ jsx14(StatusBar, {}),
+      /* @__PURE__ */ jsx14(DetailOverlay, {}),
+      /* @__PURE__ */ jsx14(CommandLine, { height: 1 })
+    ] });
+  }
+  const approvalOverlay = pendingApproval ? /* @__PURE__ */ jsx14(Box12, { position: "absolute", marginTop: 4, marginLeft: Math.floor(termWidth / 4), children: /* @__PURE__ */ jsx14(
+    ApprovalDialog,
+    {
+      question: pendingApproval.question,
+      options: pendingApproval.options,
+      onSelect: (index) => {
+        useExecutionStore.getState().setPendingApproval(null);
+        void index;
+      },
+      onDismiss: () => {
+        useExecutionStore.getState().setPendingApproval(null);
+      }
+    }
+  ) }) : null;
+  let content;
+  if (activeView === "plan-gen") {
+    content = /* @__PURE__ */ jsx14(Box12, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(SessionPanel, { height: contentHeight, title: "PLAN GENERATION", sessionType: "plan-generate", onSubmit: onSessionMessage }) }) });
+  } else if (activeView === "projects") {
+    content = /* @__PURE__ */ jsxs13(Box12, { flexDirection: "row", height: contentHeight, children: [
+      /* @__PURE__ */ jsx14(Box12, { width: "40%", children: /* @__PURE__ */ jsx14(ProjectsPanel, { height: contentHeight }) }),
+      /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(PlanPanel, { height: contentHeight }) })
+    ] });
+  } else if (activeView === "playground") {
+    content = /* @__PURE__ */ jsx14(Box12, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(SessionPanel, { height: contentHeight, title: "PLAYGROUND", sessionType: "playground", onSubmit: onSessionMessage }) }) });
+  } else if (activeView === "output") {
+    content = /* @__PURE__ */ jsx14(Box12, { flexDirection: "row", height: contentHeight, children: /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(OutputPanel, { height: contentHeight }) }) });
+  } else {
+    const topRowHeight = Math.floor(contentHeight / 2);
+    const bottomRowHeight = contentHeight - topRowHeight;
+    content = /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      /* @__PURE__ */ jsxs13(Box12, { flexDirection: "row", height: topRowHeight, children: [
+        /* @__PURE__ */ jsx14(Box12, { width: "30%", children: /* @__PURE__ */ jsx14(ProjectsPanel, { height: topRowHeight }) }),
+        /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: /* @__PURE__ */ jsx14(PlanPanel, { height: topRowHeight }) })
+      ] }),
+      /* @__PURE__ */ jsxs13(Box12, { flexDirection: "row", height: bottomRowHeight, children: [
+        /* @__PURE__ */ jsx14(Box12, { width: "30%", children: /* @__PURE__ */ jsx14(MachinesPanel, { height: bottomRowHeight }) }),
+        /* @__PURE__ */ jsx14(Box12, { flexGrow: 1, children: showChat ? /* @__PURE__ */ jsx14(ChatPanel, { height: bottomRowHeight }) : /* @__PURE__ */ jsx14(OutputPanel, { height: bottomRowHeight }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13(Box12, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+    /* @__PURE__ */ jsx14(StatusBar, {}),
+    content,
+    /* @__PURE__ */ jsx14(SearchOverlay, {}),
+    approvalOverlay,
+    /* @__PURE__ */ jsx14(CommandLine, { height: bottomPanelHeight })
+  ] });
+}
+
+// src/tui/hooks/use-vim-mode.ts
+import { useCallback, useRef } from "react";
+import { useInput as useInput3, useApp } from "ink";
+
+// src/tui/lib/vim-state-machine.ts
+function initialVimState() {
+  return {
+    mode: "normal",
+    commandBuffer: "",
+    searchQuery: "",
+    pendingKeys: ""
+  };
+}
+function vimReducer(state, action) {
+  switch (action.type) {
+    case "set_mode":
+      return [{ ...state, mode: action.mode, pendingKeys: "" }, { type: "none" }];
+    case "clear_command":
+      return [{ ...state, commandBuffer: "", mode: "normal", pendingKeys: "" }, { type: "none" }];
+    case "clear_search":
+      return [{ ...state, searchQuery: "", mode: "normal", pendingKeys: "" }, { type: "none" }];
+    case "submit_command":
+      return [
+        { ...state, mode: "normal", pendingKeys: "" },
+        { type: "command", value: state.commandBuffer }
+      ];
+    case "submit_search":
+      return [
+        { ...state, mode: "normal", pendingKeys: "" },
+        { type: "search", value: state.searchQuery }
+      ];
+    case "key":
+      return handleKey(state, action.key, action.ctrl, action.meta);
+  }
+}
+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, meta);
+    case "palette":
+      return handlePaletteMode(state, key);
+    case "search":
+      return handleSearchMode(state, key);
+    case "input":
+      return handleInputMode(state, key);
+  }
+}
+function handleNormalMode(state, key, ctrl, meta) {
+  if (ctrl) {
+    switch (key) {
+      case "p":
+        return [{ ...state, mode: "palette", commandBuffer: "" }, { type: "palette" }];
+      case "f":
+        return [state, { type: "search" }];
+      case "c":
+        return [state, { type: "quit" }];
+      case "r":
+        return [state, { type: "refresh" }];
+      default:
+        return [state, { type: "none" }];
+    }
+  }
+  if (meta) {
+    switch (key) {
+      case "x":
+        return [{ ...state, mode: "palette", commandBuffer: "" }, { type: "palette" }];
+      default:
+        return [state, { type: "none" }];
+    }
+  }
+  switch (key) {
+    // 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":
+      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" }];
+    // 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: "view", value: "dashboard" }];
+    case "2":
+      return [state, { type: "view", value: "plan-gen" }];
+    case "3":
+      return [state, { type: "view", value: "projects" }];
+    case "4":
+      return [state, { type: "view", value: "playground" }];
+    case "5":
+      return [state, { type: "view", value: "output" }];
+    // Function-key style shortcuts (single letter, no prefix needed)
+    case "d":
+      return [state, { type: "dispatch" }];
+    case "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 handlePaletteMode(state, key) {
+  if (key === "return") {
+    return [
+      { ...state, mode: "normal" },
+      { type: "command", value: "__palette_select__" }
+    ];
+  }
+  if (key === "backspace" || key === "delete") {
+    const newBuffer = state.commandBuffer.slice(0, -1);
+    if (newBuffer.length === 0) {
+      return [{ ...state, mode: "normal", commandBuffer: "" }, { type: "none" }];
+    }
+    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: "scroll", direction: "down" }];
+  }
+  if (key.length === 1) {
+    return [{ ...state, commandBuffer: state.commandBuffer + key }, { type: "none" }];
+  }
+  return [state, { type: "none" }];
+}
+function handleSearchMode(state, key) {
+  if (key === "return") {
+    return [
+      { ...state, mode: "normal" },
+      { type: "search", value: state.searchQuery }
+    ];
+  }
+  if (key === "backspace" || key === "delete") {
+    const newQuery = state.searchQuery.slice(0, -1);
+    if (newQuery.length === 0) {
+      return [{ ...state, mode: "normal", searchQuery: "" }, { type: "none" }];
+    }
+    return [{ ...state, searchQuery: newQuery }, { type: "search", value: newQuery }];
+  }
+  if (key.length === 1) {
+    const newQuery = state.searchQuery + key;
+    return [{ ...state, searchQuery: newQuery }, { type: "search", value: newQuery }];
+  }
+  return [state, { type: "none" }];
+}
+function handleInputMode(state, _) {
+  return [state, { type: "none" }];
+}
+
+// src/tui/hooks/use-vim-mode.ts
+function useVimMode(callbacks = {}) {
+  const { exit } = useApp();
+  const vimState = useRef(initialVimState());
+  const store = useTuiStore();
+  const handleEffect = useCallback(
+    (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();
+              break;
+            case "down":
+              store.scrollDown();
+              break;
+            case "top":
+              store.scrollToTop();
+              break;
+            case "bottom":
+              store.scrollToBottom();
+              break;
+            case "page_up":
+              store.pageUp();
+              break;
+            case "page_down":
+              store.pageDown();
+              break;
+          }
+          break;
+        case "focus":
+          if (effect.panel != null) {
+            store.focusByIndex(effect.panel);
+          } else if (effect.direction === "left") {
+            store.focusPrev();
+          } else if (effect.direction === "right") {
+            store.focusNext();
+          }
+          break;
+        case "select": {
+          const view = store.activeView;
+          if (view === "playground" || view === "plan-gen" || view === "output") {
+            vimState.current = { ...vimState.current, mode: "input" };
+            store.setMode("input");
+          } else {
+            callbacks.onSelect?.();
+          }
+          break;
+        }
+        case "palette":
+          break;
+        case "command":
+          if (effect.value === "__palette_select__") {
+            const filtered = getFilteredPaletteCommands(vimState.current.commandBuffer);
+            const selected = filtered[store.paletteIndex];
+            if (selected) {
+              callbacks.onCommand?.(selected.name);
+            }
+          } else if (effect.value?.startsWith("__autocomplete__")) {
+          } else if (effect.value) {
+            callbacks.onCommand?.(effect.value);
+          }
+          break;
+        case "search":
+          useSearchStore.getState().open();
+          break;
+        case "dispatch":
+          callbacks.onDispatch?.();
+          break;
+        case "cancel":
+          callbacks.onCancel?.();
+          break;
+        case "refresh":
+          callbacks.onRefresh?.();
+          break;
+        case "quit":
+          exit();
+          setTimeout(() => process.exit(0), 100);
+          break;
+        case "help":
+          store.toggleHelp();
+          break;
+        case "chat":
+          store.toggleChat();
+          break;
+        case "view":
+          if (effect.value === "dashboard" || effect.value === "plan-gen" || effect.value === "projects" || effect.value === "playground" || effect.value === "output") {
+            store.setActiveView(effect.value);
+          }
+          break;
+        case "none":
+          break;
+      }
+    },
+    [store, callbacks, exit]
+  );
+  useInput3((input, key) => {
+    const searchOpen = useSearchStore.getState().isOpen;
+    if (store.showHelp || store.showSearch || store.showDetail || searchOpen) {
+      if (key.escape) {
+        if (searchOpen) useSearchStore.getState().close();
+        store.closeOverlays();
+        vimState.current = initialVimState();
+        store.setMode("normal");
+        store.setCommandBuffer("");
+        store.setSearchQuery("");
+        store.setPendingKeys("");
+      }
+      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 = "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,
+      meta: key.meta
+    });
+    vimState.current = nextState;
+    store.setMode(nextState.mode);
+    store.setCommandBuffer(nextState.commandBuffer);
+    store.setSearchQuery(nextState.searchQuery);
+    store.setPendingKeys(nextState.pendingKeys);
+    handleEffect(effect);
+  });
+}
+
+// src/tui/hooks/use-polling.ts
+import { useEffect as useEffect2, useCallback as useCallback2 } from "react";
+function usePolling(client, intervalMs = 3e4) {
+  const selectedProjectId = useTuiStore((s) => s.selectedProjectId);
+  const loadProjects = useCallback2(async () => {
+    useProjectsStore.getState().setLoading(true);
+    try {
+      const projects = await client.listProjects();
+      useProjectsStore.getState().setProjects(projects);
+    } catch (err) {
+      useProjectsStore.getState().setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [client]);
+  const loadPlan = useCallback2(async (projectId) => {
+    usePlanStore.getState().setLoading(true);
+    try {
+      const { nodes, edges } = await client.getPlan(projectId);
+      usePlanStore.getState().setPlan(projectId, nodes, edges);
+    } catch (err) {
+      usePlanStore.getState().setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [client]);
+  const loadMachines = useCallback2(async () => {
+    useMachinesStore.getState().setLoading(true);
+    try {
+      const machines = await client.listMachines();
+      useMachinesStore.getState().setMachines(machines);
+      useTuiStore.getState().setMachineCount(machines.filter((m) => m.isConnected).length);
+    } catch (err) {
+      useMachinesStore.getState().setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [client]);
+  const loadUsage = useCallback2(async () => {
+    try {
+      const history = await client.getUsageHistory(1);
+      const today = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+      const todayEntry = history.find((d) => d.date === today);
+      useTuiStore.getState().setTodayCost(todayEntry?.totalCostUsd ?? 0);
+    } catch {
+    }
+  }, [client]);
+  const refreshAll2 = useCallback2(async () => {
+    await Promise.allSettled([
+      loadProjects(),
+      loadMachines(),
+      loadUsage(),
+      ...selectedProjectId ? [loadPlan(selectedProjectId)] : []
+    ]);
+  }, [loadProjects, loadMachines, loadUsage, loadPlan, selectedProjectId]);
+  useEffect2(() => {
+    refreshAll2();
+  }, [refreshAll2]);
+  useEffect2(() => {
+    if (selectedProjectId) {
+      loadPlan(selectedProjectId);
+    } else {
+      usePlanStore.getState().clear();
+    }
+  }, [selectedProjectId, loadPlan]);
+  useEffect2(() => {
+    const timer = setInterval(refreshAll2, intervalMs);
+    return () => clearInterval(timer);
+  }, [refreshAll2, intervalMs]);
+  return { refreshAll: refreshAll2, loadProjects, loadPlan, loadMachines };
+}
+
+// src/tui/hooks/use-sse-stream.ts
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/tui/sse-client.ts
+var SSEClient = class {
+  client;
+  abortController = null;
+  handler;
+  reconnectDelay = 1e3;
+  maxReconnectDelay = 3e4;
+  _connected = false;
+  _stopped = false;
+  constructor(client, handler) {
+    this.client = client;
+    this.handler = handler;
+  }
+  get connected() {
+    return this._connected;
+  }
+  async start() {
+    this._stopped = false;
+    this.reconnectDelay = 1e3;
+    await this.connect();
+  }
+  stop() {
+    this._stopped = true;
+    this._connected = false;
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+  async connect() {
+    if (this._stopped) return;
+    try {
+      const response = await this.client.streamEvents();
+      this._connected = true;
+      this.reconnectDelay = 1e3;
+      this.handler({ type: "__connected", data: {} });
+      if (!response.body) return;
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let eventType = "";
+      while (!this._stopped) {
+        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("event: ")) {
+            eventType = line.slice(7).trim();
+          } else if (line.startsWith("data: ")) {
+            const dataStr = line.slice(6);
+            try {
+              const data = JSON.parse(dataStr);
+              this.handler({ type: eventType || "message", data });
+            } catch {
+              this.handler({ type: eventType || "message", data: { raw: dataStr } });
+            }
+            eventType = "";
+          } else if (line === "") {
+            eventType = "";
+          }
+        }
+      }
+    } catch (err) {
+      this._connected = false;
+      if (this._stopped) return;
+      this.handler({
+        type: "__disconnected",
+        data: { error: err instanceof Error ? err.message : String(err) }
+      });
+    }
+    if (!this._stopped) {
+      this._connected = false;
+      this.handler({ type: "__reconnecting", data: { delay: this.reconnectDelay } });
+      await new Promise((r) => setTimeout(r, this.reconnectDelay));
+      this.reconnectDelay = Math.min(this.reconnectDelay * 2, this.maxReconnectDelay);
+      await this.connect();
+    }
+  }
+};
+
+// src/tui/hooks/use-sse-stream.ts
+function useSSEStream(client) {
+  const sseRef = useRef2(null);
+  const setConnected = useTuiStore((s) => s.setConnected);
+  const setMachineCount = useTuiStore((s) => s.setMachineCount);
+  const setLastError = useTuiStore((s) => s.setLastError);
+  useEffect3(() => {
+    const handler = (event) => {
+      switch (event.type) {
+        case "__connected":
+          setConnected(true);
+          setLastError(null);
+          break;
+        case "__disconnected":
+          setConnected(false);
+          setLastError(event.data.error);
+          break;
+        case "__reconnecting":
+          setConnected(false);
+          break;
+        case "machines:snapshot": {
+          const machines = event.data ?? [];
+          useMachinesStore.getState().setMachines(machines);
+          setMachineCount(machines.filter((m) => m.isConnected).length);
+          break;
+        }
+        case "machine:connected": {
+          const machine = event.data;
+          useMachinesStore.getState().addMachine(machine);
+          setMachineCount(useMachinesStore.getState().machines.filter((m) => m.isConnected).length);
+          break;
+        }
+        case "machine:disconnected": {
+          const id = event.data.machineId;
+          useMachinesStore.getState().updateMachine(id, { isConnected: false });
+          setMachineCount(useMachinesStore.getState().machines.filter((m) => m.isConnected).length);
+          break;
+        }
+        case "task:stdout":
+        case "task:text": {
+          const taskId = event.data.taskId;
+          const text = event.data.data ?? event.data.output ?? "";
+          if (typeof text === "string" && text.length > 0) {
+            useExecutionStore.getState().appendText(taskId, text);
+          }
+          break;
+        }
+        case "task:progress": {
+          const taskId = event.data.taskId;
+          const message = event.data.message;
+          if (!message) break;
+          if (/^Using tool:/i.test(message)) break;
+          useExecutionStore.getState().appendLine(taskId, `[progress] ${message}`);
+          break;
+        }
+        case "task:result": {
+          const taskId = event.data.taskId;
+          const status = event.data.status;
+          useExecutionStore.getState().setStatus(taskId, status);
+          const nodeId = event.data.nodeId;
+          if (nodeId && status) {
+            const mappedStatus = status === "success" ? "completed" : status === "failure" ? "planned" : status;
+            usePlanStore.getState().updateNodeStatus(nodeId, mappedStatus);
+          }
+          break;
+        }
+        case "task:tool_trace": {
+          const taskId = event.data.taskId;
+          const toolName = event.data.toolName;
+          useExecutionStore.getState().appendToolCall(taskId, toolName);
+          break;
+        }
+        case "task:file_change": {
+          const taskId = event.data.taskId;
+          const path = event.data.path;
+          const action = event.data.action;
+          const added = event.data.linesAdded;
+          const removed = event.data.linesRemoved;
+          useExecutionStore.getState().appendFileChange(taskId, path, action, added, removed);
+          break;
+        }
+        case "task:session_init": {
+          const taskId = event.data.taskId;
+          const nodeId = event.data.nodeId ?? taskId;
+          useExecutionStore.getState().initExecution(taskId, nodeId);
+          useExecutionStore.getState().setWatching(taskId);
+          break;
+        }
+        case "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":
+          break;
+      }
+    };
+    const sse = new SSEClient(client, handler);
+    sseRef.current = sse;
+    sse.start().catch(() => {
+    });
+    return () => {
+      sse.stop();
+    };
+  }, [client, setConnected, setMachineCount, setLastError]);
+}
+
+// src/tui/hooks/use-fuzzy-search.ts
+import { useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import Fuse from "fuse.js";
+var fuseInstance = null;
+function useFuzzySearch() {
+  const projects = useProjectsStore((s) => s.projects);
+  const nodes = usePlanStore((s) => s.nodes);
+  const machines = useMachinesStore((s) => s.machines);
+  const { setItems, setResults, query } = useSearchStore();
+  useEffect4(() => {
+    const items = [
+      ...projects.map((p) => ({
+        type: "project",
+        id: p.id,
+        title: p.name,
+        subtitle: p.description,
+        status: p.status
+      })),
+      ...nodes.filter((n) => !n.deletedAt).map((n) => ({
+        type: "task",
+        id: n.id,
+        title: n.title,
+        subtitle: n.description,
+        status: n.status
+      })),
+      ...machines.filter((m) => !m.isRevoked).map((m) => ({
+        type: "machine",
+        id: m.id,
+        title: m.name,
+        subtitle: `${m.platform} - ${m.hostname}`,
+        status: m.isConnected ? "connected" : "disconnected"
+      }))
+    ];
+    setItems(items);
+    fuseInstance = new Fuse(items, {
+      keys: ["title", "subtitle", "id"],
+      threshold: 0.4,
+      includeScore: true
+    });
+  }, [projects, nodes, machines, setItems]);
+  const search = useCallback3((q) => {
+    if (!q || !fuseInstance) {
+      setResults([]);
+      return;
+    }
+    const results = fuseInstance.search(q, { limit: 20 });
+    setResults(results.map((r) => r.item));
+  }, [setResults]);
+  useEffect4(() => {
+    search(query);
+  }, [query, search]);
+  return { search };
+}
+
+// src/tui/hooks/use-command-parser.ts
+import { useCallback as useCallback4 } from "react";
+
+// src/tui/commands/autocomplete.ts
+var PrefixTrie = class {
+  root;
+  constructor() {
+    this.root = { children: /* @__PURE__ */ new Map(), isEnd: false, value: "" };
+  }
+  insert(word) {
+    let node = this.root;
+    for (const char of word) {
+      if (!node.children.has(char)) {
+        node.children.set(char, { children: /* @__PURE__ */ new Map(), isEnd: false, value: "" });
+      }
+      node = node.children.get(char);
+    }
+    node.isEnd = true;
+    node.value = word;
+  }
+  search(prefix) {
+    let node = this.root;
+    for (const char of prefix) {
+      if (!node.children.has(char)) return [];
+      node = node.children.get(char);
+    }
+    return this.collect(node);
+  }
+  collect(node) {
+    const results = [];
+    if (node.isEnd) results.push(node.value);
+    for (const child of node.children.values()) {
+      results.push(...this.collect(child));
+    }
+    return results;
+  }
+};
+
+// src/tui/commands/registry.ts
+var trie = new PrefixTrie();
+for (const key of Object.keys(handlers)) {
+  trie.insert(key);
+}
+async function executeCommand(input, client) {
+  const parts = input.split(/\s+/);
+  if (parts.length >= 2) {
+    const twoWord = `${parts[0]} ${parts[1]}`;
+    if (handlers[twoWord]) {
+      try {
+        await handlers[twoWord](parts.slice(2), client);
+      } catch (err) {
+        useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+      }
+      return;
+    }
+  }
+  const cmd = parts[0];
+  if (handlers[cmd]) {
+    try {
+      await handlers[cmd](parts.slice(1), client);
+    } catch (err) {
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+    return;
+  }
+  useTuiStore.getState().setLastError(`Unknown command: ${cmd}`);
+}
+function getCompletions(partial) {
+  return trie.search(partial);
+}
+
+// src/tui/hooks/use-command-parser.ts
+function useCommandParser(client) {
+  const execute = useCallback4(
+    async (input) => {
+      const trimmed = input.trim();
+      if (!trimmed) return;
+      await executeCommand(trimmed, client);
+    },
+    [client]
+  );
+  const autocomplete = useCallback4(
+    (partial) => {
+      return getCompletions(partial);
+    },
+    []
+  );
+  return { execute, autocomplete };
+}
+
+// src/tui/app.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function App({ serverUrl }) {
+  const client = useMemo(() => new AstroClient({ serverUrl }), [serverUrl]);
+  const { refreshAll: refreshAll2 } = usePolling(client);
+  useSSEStream(client);
+  useFuzzySearch();
+  const { execute } = useCommandParser(client);
+  const onSelect = useCallback5(() => {
+    const { focusedPanel, scrollIndex } = useTuiStore.getState();
+    switch (focusedPanel) {
+      case "projects": {
+        const projects = useProjectsStore.getState().projects;
+        const idx = scrollIndex.projects;
+        if (projects[idx]) {
+          useTuiStore.getState().setSelectedProject(projects[idx].id);
+        }
+        break;
+      }
+      case "plan": {
+        const nodes = usePlanStore.getState().nodes.filter((n) => !n.deletedAt);
+        const idx = scrollIndex.plan;
+        const node = nodes[idx];
+        if (node) {
+          useTuiStore.getState().setSelectedNode(node.id);
+          useTuiStore.getState().openDetail("node", node.id);
+        }
+        break;
+      }
+      case "machines": {
+        break;
+      }
+    }
+  }, []);
+  const onCommand = useCallback5(
+    (cmd) => {
+      execute(cmd);
+    },
+    [execute]
+  );
+  const onSearch = useCallback5(
+    (query) => {
+      useSearchStore.getState().setQuery(query);
+      if (query.length > 0) {
+        useSearchStore.getState().open();
+      }
+    },
+    []
+  );
+  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) {
+      await execute(`dispatch ${nodeId}`);
+    }
+  }, [execute]);
+  const onCancel = useCallback5(async () => {
+    await execute("cancel");
+  }, [execute]);
+  const onRefresh = useCallback5(() => {
+    refreshAll2();
+  }, [refreshAll2]);
+  const onSessionMessage = useCallback5(async (message) => {
+    const { selectedProjectId, activeView } = useTuiStore.getState();
+    if (!selectedProjectId) {
+      useTuiStore.getState().setLastError("No project selected");
+      return;
+    }
+    const watchingId = useExecutionStore.getState().watchingId;
+    const sessionId = useChatStore.getState().sessionId;
+    const messages = useChatStore.getState().messages.map((m) => ({
+      role: m.role,
+      content: m.content
+    }));
+    if (!watchingId) {
+      if (activeView === "plan-gen") {
+        await execute(`plan generate ${message}`);
+      } else {
+        await execute(`playground ${message}`);
+      }
+      return;
+    }
+    try {
+      useChatStore.getState().setStreaming(true);
+      const response = await client.projectChat({
+        message,
+        sessionId: sessionId ?? void 0,
+        projectId: selectedProjectId,
+        messages
+      });
+      if (!response.body) {
+        useChatStore.getState().setStreaming(false);
+        return;
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          const data = line.slice(6);
+          if (data === "[DONE]") continue;
+          try {
+            const event = JSON.parse(data);
+            if (event.type === "text" && event.text) {
+              useChatStore.getState().appendStream(event.text);
+              useExecutionStore.getState().appendText(watchingId, event.text);
+            } else if (event.type === "session_init" && event.sessionId) {
+              useChatStore.getState().setSessionId(event.sessionId);
+            } else if (event.type === "done") {
+            }
+          } catch {
+          }
+        }
+      }
+      useChatStore.getState().flushStream();
+      useChatStore.getState().setStreaming(false);
+    } catch (err) {
+      useChatStore.getState().setStreaming(false);
+      useTuiStore.getState().setLastError(err instanceof Error ? err.message : String(err));
+    }
+  }, [client, execute]);
+  useVimMode({
+    onSelect,
+    onCommand,
+    onSearch,
+    onDispatch,
+    onCancel,
+    onRefresh
+  });
+  return /* @__PURE__ */ jsx15(MainLayout, { onSessionMessage });
+}
+
+// src/tui/index.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+async function launchTui(serverUrl) {
+  render(/* @__PURE__ */ jsx16(App, { serverUrl }), {
+    exitOnCtrlC: true
+  });
+}
+export {
+  launchTui
+};