codingbuddy 4.2.0 → 4.4.0

package/dist/src/tui-bundle.mjs

@@ -1371,12 +1371,12 @@ var require_eventemitter2 = __commonJS({
 });
 
 // src/tui/index.tsx
-import React10 from "react";
+import React11 from "react";
 import { render } from "ink";
 
 // src/tui/dashboard-app.tsx
-import React7, { useMemo as useMemo3 } from "react";
-import { Box as Box7 } from "ink";
+import React8, { useMemo as useMemo3 } from "react";
+import { Box as Box8 } from "ink";
 
 // src/tui/hooks/use-terminal-size.ts
 import { useState, useEffect } from "react";
@@ -1400,6 +1400,7 @@ function createDefaultDashboardNode(params) {
     status: "idle",
     isPrimary: false,
     progress: 0,
+    isParallel: false,
     ...params
   };
 }
@@ -1492,23 +1493,6 @@ var MODE_KEYWORD_TO_AGENT = {
   EVAL: "eval-mode",
   AUTO: "auto-mode"
 };
-var TOOL_AGENT_MAP = {
-  search_rules: "query",
-  get_agent_details: "query",
-  get_project_config: "config",
-  set_project_root: "config",
-  suggest_config_updates: "config",
-  recommend_skills: "skill",
-  get_skill: "skill",
-  list_skills: "skill",
-  analyze_task: "analysis",
-  generate_checklist: "checklist",
-  read_context: "context",
-  update_context: "context",
-  cleanup_context: "context",
-  get_code_conventions: "conventions",
-  dispatch_agents: "orchestrator"
-};
 function parseAgentFromToolName(toolName, args) {
   if (toolName === "get_agent_system_prompt") {
     return parseGetAgentSystemPrompt(args);
@@ -1519,15 +1503,6 @@ function parseAgentFromToolName(toolName, args) {
   if (toolName === "prepare_parallel_agents") {
     return parseParallelAgents(args);
   }
-  const role = TOOL_AGENT_MAP[toolName];
-  if (role) {
-    return {
-      agentId: toolName,
-      name: toolName,
-      role,
-      isPrimary: false
-    };
-  }
   return null;
 }
 function parseGetAgentSystemPrompt(args) {
@@ -1664,13 +1639,24 @@ function extractFromParseMode(json) {
     if (Array.isArray(par.specialists) && par.specialists.length > 0) {
       const specialists = par.specialists.filter((s) => typeof s === "string");
       if (specialists.length > 0) {
+        const parallelMode = typeof json.mode === "string" && VALID_MODES.has(json.mode) ? json.mode : "PLAN";
         events.push({
           event: TUI_EVENTS.PARALLEL_STARTED,
-          payload: {
-            specialists,
-            mode: typeof json.mode === "string" && VALID_MODES.has(json.mode) ? json.mode : "PLAN"
-          }
+          payload: { specialists, mode: parallelMode }
         });
+        if (delegateName) {
+          for (const name of specialists) {
+            events.push({
+              event: TUI_EVENTS.AGENT_RELATIONSHIP,
+              payload: {
+                from: `primary:${delegateName}`,
+                to: `specialist:${name}`,
+                label: "parallel",
+                type: "delegation"
+              }
+            });
+          }
+        }
       }
     }
   }
@@ -1694,12 +1680,27 @@ function extractFromPrepareParallelAgents(json) {
   }).filter((name) => name !== null);
   if (specialists.length === 0) return [];
   const mode = typeof json.mode === "string" && VALID_MODES.has(json.mode) ? json.mode : "PLAN";
-  return [
+  const primaryAgentId = typeof json.primaryAgentId === "string" ? json.primaryAgentId : null;
+  const events = [
     {
       event: TUI_EVENTS.PARALLEL_STARTED,
       payload: { specialists, mode }
     }
   ];
+  if (primaryAgentId) {
+    for (const name of specialists) {
+      events.push({
+        event: TUI_EVENTS.AGENT_RELATIONSHIP,
+        payload: {
+          from: primaryAgentId,
+          to: `specialist:${name}`,
+          label: "parallel",
+          type: "delegation"
+        }
+      });
+    }
+  }
+  return events;
 }
 function extractFromDispatchAgents(json) {
   const events = [];
@@ -2086,12 +2087,24 @@ var ACT_PRIMARY_AGENTS = [
   // IaC, Kubernetes, multi-cloud specialist - high priority for infra tasks
   "data-engineer",
   // Database/schema specialist - high priority for data tasks
+  "data-scientist",
+  // EDA, statistical analysis, ML modeling, visualization, Jupyter notebooks
+  "ai-ml-engineer",
+  // ML frameworks, LLM integration, embeddings, fine-tuning
   "mobile-developer",
   // Mobile app specialist - detected by project files
   "frontend-developer",
   "backend-developer",
   "devops-engineer",
-  "agent-architect"
+  "agent-architect",
+  "test-engineer",
+  // TDD, unit/integration/e2e test specialist
+  "security-engineer",
+  // Security features implementation & vulnerability remediation (intent priority: 5th)
+  "systems-developer",
+  // Rust, C, C++, FFI, WASM, embedded, low-level optimization (intent priority: 6th)
+  "software-engineer"
+  // fallback default — no intent patterns, language-agnostic generalist
 ];
 var EVAL_PRIMARY_AGENT = "code-reviewer";
 var ALL_PRIMARY_AGENTS = [
@@ -3476,6 +3489,7 @@ ${file.content}
 var ConfigService = class {
   constructor() {
     this.logger = new Logger6(ConfigService.name);
+    this.projectRootSource = "auto_detect";
     this.projectConfig = null;
     this.isLoaded = false;
     this.projectRoot = this.resolveProjectRoot();
@@ -3493,6 +3507,7 @@ var ConfigService = class {
           const stat2 = statSync(normalizedPath);
           if (stat2.isDirectory()) {
             this.logger.log(`Using project root from CODINGBUDDY_PROJECT_ROOT: ${normalizedPath}`);
+            this.projectRootSource = "env";
             return normalizedPath;
           }
           this.logger.warn(
@@ -3530,7 +3545,7 @@ var ConfigService = class {
    * @param root - Path to the project root directory
    * @throws Error if path does not exist, is not a directory, or contains invalid characters
    */
-  async setProjectRootAndReload(root) {
+  async setProjectRootAndReload(root, source = "roots_list") {
     if (root.includes("\0")) {
       throw new Error("Path contains null bytes (possible null byte injection)");
     }
@@ -3556,6 +3571,7 @@ var ConfigService = class {
     }
     clearProjectRootCache();
     this.projectRoot = resolvedPath;
+    this.projectRootSource = source;
     this.isLoaded = false;
     this.projectConfig = null;
     await this.loadProjectConfig();
@@ -3567,6 +3583,18 @@ var ConfigService = class {
   getProjectRoot() {
     return this.projectRoot;
   }
+  /**
+   * Get how the project root was resolved
+   */
+  getProjectRootSource() {
+    return this.projectRootSource;
+  }
+  getClientName() {
+    return this.clientName;
+  }
+  setClientName(name) {
+    this.clientName = name;
+  }
   /**
    * Load all project configuration
    */
@@ -3933,6 +3961,7 @@ function selectFocusedAgent(agents, currentFocusId) {
 var EVENT_LOG_MAX = 100;
 var EDGE_MAX = 200;
 var TOOL_CALLS_MAX = 200;
+var EXPECTED_AGENT_DURATION_MS = 12e4;
 function createInitialDashboardState() {
   return {
     workspace: process.cwd(),
@@ -3948,6 +3977,8 @@ function createInitialDashboardState() {
     objectives: [],
     activeSkills: [],
     toolInvokeCount: 0,
+    agentActivateCount: 0,
+    skillInvokeCount: 0,
     outputStats: { files: 0, commits: 0 },
     contextDecisions: [],
     contextNotes: [],
@@ -3969,11 +4000,20 @@ function dashboardReducer(state, action) {
         stage: state.currentMode ?? "PLAN",
         status: "running",
         isPrimary,
-        progress: 0
+        progress: 0,
+        isParallel: false,
+        // AGENT_ACTIVATED는 항상 단일 에이전트
+        startedAt: Date.now()
       });
       const globalState = "RUNNING";
       const focusedAgentId = selectFocusedAgent(agents, state.focusedAgentId);
-      return { ...state, agents, globalState, focusedAgentId };
+      return {
+        ...state,
+        agents,
+        globalState,
+        focusedAgentId,
+        agentActivateCount: state.agentActivateCount + 1
+      };
     }
     case "AGENT_DEACTIVATED": {
       const { agentId, reason } = action.payload;
@@ -3983,7 +4023,8 @@ function dashboardReducer(state, action) {
         agents.set(agentId, {
           ...existing,
           status: reason === "error" ? "error" : "done",
-          progress: reason === "error" ? existing.progress : 100
+          progress: reason === "error" ? existing.progress : 100,
+          completedAt: Date.now()
         });
       }
       let anyRunning = false;
@@ -3998,24 +4039,19 @@ function dashboardReducer(state, action) {
       return { ...state, agents, globalState, focusedAgentId };
     }
     case "MODE_CHANGED": {
-      const newMode = action.payload.to;
-      let agents = state.agents;
-      let needsClone = false;
-      for (const a of state.agents.values()) {
-        if (a.status === "running") {
-          needsClone = true;
-          break;
+      const { from, to: newMode } = action.payload;
+      const agents = cloneAgents(state.agents);
+      for (const [id, a] of agents) {
+        if (from !== null && a.stage === from && (a.status === "done" || a.status === "idle" && a.isParallel)) {
+          agents.delete(id);
+          continue;
         }
-      }
-      if (needsClone) {
-        agents = cloneAgents(state.agents);
-        for (const [id, a] of agents) {
-          if (a.status === "running") {
-            agents.set(id, { ...a, stage: newMode });
-          }
+        if (a.status === "running") {
+          agents.set(id, { ...a, stage: newMode });
         }
       }
-      return { ...state, currentMode: newMode, agents, activeSkills: [] };
+      const focusedAgentId = selectFocusedAgent(agents, state.focusedAgentId);
+      return { ...state, currentMode: newMode, agents, activeSkills: [], focusedAgentId };
     }
     case "AGENT_RELATIONSHIP": {
       const edge = {
@@ -4049,10 +4085,15 @@ function dashboardReducer(state, action) {
         targetAgent = state.agents.get(state.focusedAgentId) ?? null;
       }
       if (targetAgent && targetAgent.status === "running") {
+        const now = Date.now();
+        const elapsed = targetAgent.startedAt !== void 0 ? now - targetAgent.startedAt : 0;
+        const timeBased = Math.min(90, elapsed / EXPECTED_AGENT_DURATION_MS * 100);
+        const toolBased = Math.min(95, targetAgent.progress + 3);
+        const newProgress = Math.round(Math.max(timeBased, toolBased));
         agents = cloneAgents(state.agents);
         agents.set(targetAgent.id, {
           ...targetAgent,
-          progress: Math.min(95, targetAgent.progress + 5)
+          progress: newProgress
         });
       }
       const toolCall = {
@@ -4075,7 +4116,11 @@ function dashboardReducer(state, action) {
     case "SKILL_RECOMMENDED": {
       const { skillName } = action.payload;
       if (state.activeSkills.includes(skillName)) return state;
-      return { ...state, activeSkills: [...state.activeSkills, skillName] };
+      return {
+        ...state,
+        activeSkills: [...state.activeSkills, skillName],
+        skillInvokeCount: state.skillInvokeCount + 1
+      };
     }
     case "PARALLEL_STARTED": {
       const { specialists, mode } = action.payload;
@@ -4089,7 +4134,10 @@ function dashboardReducer(state, action) {
           stage: mode,
           status: "idle",
           isPrimary: false,
-          progress: 0
+          progress: 0,
+          isParallel: true,
+          // parallel dispatch로 등록된 에이전트
+          startedAt: Date.now()
         });
       }
       return { ...state, agents };
@@ -4106,6 +4154,21 @@ function dashboardReducer(state, action) {
     }
     case "SESSION_RESET":
       return createInitialDashboardState();
+    case "CLEANUP_STALE_AGENTS": {
+      const { now, ttlMs } = action.payload;
+      let changed = false;
+      const agents = cloneAgents(state.agents);
+      for (const [id, a] of agents) {
+        if (a.status === "running") continue;
+        if (a.status === "done" && a.completedAt !== void 0 && now - a.completedAt > ttlMs || a.status === "error" && a.completedAt !== void 0 && now - a.completedAt > ttlMs * 2 || a.status === "idle" && a.isParallel && a.startedAt !== void 0 && now - a.startedAt > ttlMs) {
+          agents.delete(id);
+          changed = true;
+        }
+      }
+      if (!changed) return state;
+      const focusedAgentId = selectFocusedAgent(agents, state.focusedAgentId);
+      return { ...state, agents, focusedAgentId };
+    }
     // Reserved: no emitter currently produces PARALLEL_COMPLETED. Subscription kept for forward compatibility.
     case "PARALLEL_COMPLETED":
     case "AGENTS_LOADED":
@@ -4162,6 +4225,12 @@ function useDashboardState(eventBus) {
       eventBus.off(TUI_EVENTS.CONTEXT_UPDATED, onContextUpdated);
     };
   }, [eventBus]);
+  useEffect2(() => {
+    const cleanupInterval = setInterval(() => {
+      dispatch({ type: "CLEANUP_STALE_AGENTS", payload: { now: Date.now(), ttlMs: 3e4 } });
+    }, 1e4);
+    return () => clearInterval(cleanupInterval);
+  }, []);
   return state;
 }
 
@@ -4296,7 +4365,6 @@ function StateIndicator({ globalState }) {
 }
 function HeaderBar({
   workspace,
-  sessionId,
   currentMode,
   globalState,
   layoutMode,
@@ -4319,7 +4387,6 @@ function HeaderBar({
       /* @__PURE__ */ React.createElement(StateIndicator, { globalState })
     );
   }
-  const sessDisplay = sessionId.length > 8 ? sessionId.slice(0, 8) : sessionId;
   return /* @__PURE__ */ React.createElement(
     Box,
     {
@@ -4329,9 +4396,9 @@ function HeaderBar({
       overflowX: "hidden",
       flexDirection: "row"
     },
-    /* @__PURE__ */ React.createElement(Box, { gap: 2, flexShrink: 0 }, /* @__PURE__ */ React.createElement(Text, { color: "cyan", bold: true }, "\u27E8\u27E9 CODINGBUDDY AGENT DASHBOARD"), /* @__PURE__ */ React.createElement(ModeFlow, { currentMode }), /* @__PURE__ */ React.createElement(StateIndicator, { globalState })),
+    /* @__PURE__ */ React.createElement(Box, { gap: 2, flexShrink: 1, minWidth: 0 }, /* @__PURE__ */ React.createElement(Text, { color: "cyan", bold: true }, "\u27E8\u27E9 CODINGBUDDY AGENT DASHBOARD"), /* @__PURE__ */ React.createElement(ModeFlow, { currentMode }), /* @__PURE__ */ React.createElement(StateIndicator, { globalState })),
     /* @__PURE__ */ React.createElement(Box, { flexGrow: 1 }),
-    /* @__PURE__ */ React.createElement(Box, { flexShrink: 1, overflowX: "hidden" }, /* @__PURE__ */ React.createElement(Text, { dimColor: true, wrap: "truncate" }, workspace, " sess:", sessDisplay))
+    /* @__PURE__ */ React.createElement(Box, { flexShrink: 1, overflowX: "hidden" }, /* @__PURE__ */ React.createElement(Text, { dimColor: true, wrap: "truncate" }, workspace))
   );
 }
 
@@ -4491,9 +4558,16 @@ function computeLabelPosition(path9, label) {
 // src/tui/components/flow-map.pure.ts
 var NODE_WIDTH = 17;
 var NODE_HEIGHT = 4;
+var PARALLEL_STYLES = {
+  parallel: { fg: "cyan" }
+  // 파랑 — 병렬 실행
+};
+var TREE_CONNECTOR_STYLE = { fg: "cyan", dim: true };
 var STAGE_ORDER = ["PLAN", "ACT", "EVAL", "AUTO"];
-var STAGE_SLOT_WIDTH = 8;
+var STAGE_SLOT_WIDTH = 18;
 var PIPELINE_RIGHT_MARGIN = 10;
+var DIMMED_STYLE = { dim: true };
+var WAITING_STYLE = { fg: "gray", dim: true };
 function groupByStage(agents) {
   const byStage = /* @__PURE__ */ new Map();
   for (const agent of agents.values()) {
@@ -4503,9 +4577,15 @@ function groupByStage(agents) {
   }
   return byStage;
 }
+function isBoxAgent(agent) {
+  return agent.isPrimary || agent.isParallel;
+}
 function sortAgents(agents) {
   return [...agents].sort((a, b) => {
     if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+    if (!a.isPrimary && !b.isPrimary) {
+      if (a.isParallel !== b.isParallel) return a.isParallel ? -1 : 1;
+    }
     return a.name.localeCompare(b.name);
   });
 }
@@ -4539,14 +4619,18 @@ function layoutAgentNodes(agents, columns) {
     if (!col) continue;
     const sorted = sortAgents(stageAgents);
     const startY = 3;
-    sorted.forEach((agent, idx) => {
+    let currentY = startY;
+    for (const agent of sorted) {
+      const boxAgent = isBoxAgent(agent);
+      const height = boxAgent ? NODE_HEIGHT : 1;
       positions.set(agent.id, {
         x: col.startX + Math.floor((col.width - NODE_WIDTH) / 2),
-        y: startY + idx * (NODE_HEIGHT + 1),
+        y: currentY,
         width: NODE_WIDTH,
-        height: NODE_HEIGHT
+        height
       });
-    });
+      currentY += boxAgent ? height + 1 : height;
+    }
   }
   return positions;
 }
@@ -4554,8 +4638,27 @@ function getNodeTextStyle(status) {
   if (status === "running") return { fg: "white", bold: true };
   return { dim: true };
 }
-function drawAgentNode(buf, x, y, boxW, agent) {
-  const borderStyle = getStatusStyle(agent.status);
+function drawTreeConnector(buf, x, y, agent, isLast, dimmed = false) {
+  const connector = isLast ? "\u2514\u2500" : "\u251C\u2500";
+  const icon = STATUS_ICONS[agent.status];
+  const maxNameLen = Math.max(1, NODE_WIDTH - connector.length - icon.length - 3);
+  const nameStr = agent.name.length > maxNameLen ? agent.name.slice(0, maxNameLen - 3) + "..." : agent.name;
+  buf.writeText(x, y, connector, dimmed ? DIMMED_STYLE : TREE_CONNECTOR_STYLE);
+  buf.writeText(
+    x + connector.length + 1,
+    y,
+    icon,
+    dimmed ? DIMMED_STYLE : STATUS_STYLES[agent.status]
+  );
+  buf.writeText(
+    x + connector.length + 1 + icon.length + 1,
+    y,
+    nameStr,
+    dimmed ? DIMMED_STYLE : getNodeTextStyle(agent.status)
+  );
+}
+function drawAgentNode(buf, x, y, boxW, agent, dimmed = false) {
+  const borderStyle = dimmed ? DIMMED_STYLE : getStatusStyle(agent.status);
   if (agent.isPrimary) {
     buf.drawDoubleBox(x, y, boxW, NODE_HEIGHT, borderStyle);
   } else {
@@ -4564,15 +4667,26 @@ function drawAgentNode(buf, x, y, boxW, agent) {
   const icon = STATUS_ICONS[agent.status];
   const maxNameLen = Math.max(1, boxW - 5);
   const nameStr = agent.name.length > maxNameLen ? agent.name.slice(0, maxNameLen - 3) + "..." : agent.name;
-  buf.writeText(x + 2, y + 1, nameStr, getNodeTextStyle(agent.status));
-  buf.writeText(x + 2 + nameStr.length + 1, y + 1, icon, STATUS_STYLES[agent.status]);
-  const barWidth = boxW - 4;
-  const bar = buildProgressBar(agent.progress, barWidth);
-  const filledStr = PROGRESS_BAR_CHARS.filled.repeat(bar.filled);
-  const emptyStr = PROGRESS_BAR_CHARS.empty.repeat(bar.empty);
-  buf.writeText(x + 2, y + 2, filledStr, PROGRESS_BAR_STYLES.filled);
-  if (bar.empty > 0) {
-    buf.writeText(x + 2 + bar.filled, y + 2, emptyStr, PROGRESS_BAR_STYLES.empty);
+  const textStyle = dimmed ? DIMMED_STYLE : getNodeTextStyle(agent.status);
+  const iconStyle = dimmed ? DIMMED_STYLE : STATUS_STYLES[agent.status];
+  buf.writeText(x + 2, y + 1, nameStr, textStyle);
+  buf.writeText(x + 2 + nameStr.length + 1, y + 1, icon, iconStyle);
+  if (agent.isPrimary) {
+    const barWidth = Math.max(1, boxW - 8);
+    const bar = buildProgressBar(agent.progress, barWidth);
+    const filledStr = PROGRESS_BAR_CHARS.filled.repeat(bar.filled);
+    const emptyStr = PROGRESS_BAR_CHARS.empty.repeat(bar.empty);
+    const filledStyle = dimmed ? DIMMED_STYLE : PROGRESS_BAR_STYLES.filled;
+    const emptyStyle = dimmed ? DIMMED_STYLE : PROGRESS_BAR_STYLES.empty;
+    buf.writeText(x + 2, y + 2, filledStr, filledStyle);
+    if (bar.empty > 0) {
+      buf.writeText(x + 2 + bar.filled, y + 2, emptyStr, emptyStyle);
+    }
+    buf.writeText(x + 2 + barWidth + 1, y + 2, bar.label, dimmed ? DIMMED_STYLE : WAITING_STYLE);
+  } else if (agent.status === "idle") {
+    buf.writeText(x + 2, y + 2, "\u231B waiting...", dimmed ? DIMMED_STYLE : WAITING_STYLE);
+  } else if (agent.isParallel) {
+    buf.writeText(x + 2, y + 2, "\u2AF8 parallel", dimmed ? DIMMED_STYLE : PARALLEL_STYLES.parallel);
   }
 }
 function buildProgressBar(value, barWidth) {
@@ -4607,7 +4721,17 @@ function countByStatus(agents) {
   }
   return counts;
 }
-function renderPipelineHeader(buf, width, activeStage, hasAutoAgents = false) {
+function countStageRunningDone(agents, stage) {
+  let running = 0;
+  let done = 0;
+  for (const agent of agents.values()) {
+    if (agent.stage !== stage) continue;
+    if (agent.status === "running") running++;
+    else if (agent.status === "done") done++;
+  }
+  return { running, done };
+}
+function renderPipelineHeader(buf, width, activeStage, hasAutoAgents = false, agents) {
   const stages = hasAutoAgents ? STAGE_ORDER : STAGE_ORDER.filter((s) => s !== "AUTO");
   let x = 1;
   for (let i = 0; i < stages.length; i++) {
@@ -4618,6 +4742,17 @@ function renderPipelineHeader(buf, width, activeStage, hasAutoAgents = false) {
     x += 2;
     buf.writeText(x, 0, stage, stageStyle);
     x += stage.length;
+    if (agents && agents.size > 0) {
+      const { running, done } = countStageRunningDone(agents, stage);
+      if (running > 0 || done > 0) {
+        const parts = [];
+        if (running > 0) parts.push(`${running}\u2191`);
+        if (done > 0) parts.push(`${done}\u2713`);
+        const statsStr = ` (${parts.join(" ")})`;
+        buf.writeText(x, 0, statsStr, { fg: "gray", dim: !isActive });
+        x += statsStr.length;
+      }
+    }
     if (i < stages.length - 1) {
       x += 1;
       const connLen = Math.max(
@@ -4644,20 +4779,36 @@ function renderFlowMap(agents, edges, width, height, activeStage = null) {
   const buf = new ColorBuffer(width, height);
   const columns = layoutStageColumns(width, hasAutoAgents);
   const positions = layoutAgentNodes(agents, columns);
-  renderPipelineHeader(buf, width, activeStage, hasAutoAgents);
+  renderPipelineHeader(buf, width, activeStage, hasAutoAgents, agents);
+  const inactiveIds = activeStage !== null ? new Set([...agents.values()].filter((a) => a.stage !== activeStage).map((a) => a.id)) : /* @__PURE__ */ new Set();
   for (const [id, pos] of positions) {
     const agent = agents.get(id);
     if (!agent) continue;
-    if (agent.status === "running" && agent.isPrimary) {
+    if (agent.status === "running" && agent.isPrimary && !inactiveIds.has(id)) {
       drawGlow(buf, pos.x, pos.y, pos.width, pos.height, GLOW_STYLE);
     }
   }
-  for (const [id, pos] of positions) {
-    const agent = agents.get(id);
-    if (!agent) continue;
-    drawAgentNode(buf, pos.x, pos.y, pos.width, agent);
+  const byStage = groupByStage(agents);
+  for (const [, stageAgents] of byStage) {
+    const sorted = sortAgents(stageAgents);
+    const connectorAgents = sorted.filter((a) => !isBoxAgent(a));
+    const connectorLastIdx = connectorAgents.length - 1;
+    const connectorIndexMap = new Map(connectorAgents.map((a, i) => [a.id, i]));
+    for (const agent of sorted) {
+      const pos = positions.get(agent.id);
+      if (!pos) continue;
+      if (isBoxAgent(agent)) {
+        drawAgentNode(buf, pos.x, pos.y, pos.width, agent, inactiveIds.has(agent.id));
+      } else {
+        const isLast = connectorIndexMap.get(agent.id) === connectorLastIdx;
+        drawTreeConnector(buf, pos.x, pos.y, agent, isLast, inactiveIds.has(agent.id));
+      }
+    }
   }
   for (const edge of edges) {
+    const fromAgent = agents.get(edge.from);
+    const toAgent = agents.get(edge.to);
+    if (fromAgent && toAgent && fromAgent.stage === toAgent.stage) continue;
     const fromPos = positions.get(edge.from);
     const toPos = positions.get(edge.to);
     if (!fromPos || !toPos) continue;
@@ -4670,13 +4821,20 @@ function renderFlowMap(agents, edges, width, height, activeStage = null) {
       y: toPos.y + Math.floor(toPos.height / 2)
     };
     const path9 = computeEdgePath(fromPoint, toPoint);
+    const edgeDimmed = inactiveIds.has(edge.from) && inactiveIds.has(edge.to);
     for (const seg of path9) {
       const isArrow = seg.char === "\u25B8" || seg.char === "\u25C2" || seg.char === "\u25BE" || seg.char === "\u25B4";
-      buf.setChar(seg.x, seg.y, seg.char, isArrow ? EDGE_STYLES.arrow : EDGE_STYLES.path);
+      const segStyle = edgeDimmed ? DIMMED_STYLE : isArrow ? EDGE_STYLES.arrow : EDGE_STYLES.path;
+      buf.setChar(seg.x, seg.y, seg.char, segStyle);
     }
     const labelPos = computeLabelPosition(path9, edge.label);
     if (labelPos) {
-      buf.writeText(labelPos.x, labelPos.y - 1, edge.label, EDGE_STYLES.label);
+      buf.writeText(
+        labelPos.x,
+        labelPos.y - 1,
+        edge.label,
+        edgeDimmed ? DIMMED_STYLE : EDGE_STYLES.label
+      );
     }
   }
   const counts = countByStatus(agents);
@@ -4695,20 +4853,22 @@ function renderFlowMap(agents, edges, width, height, activeStage = null) {
   }
   return buf;
 }
-function renderFlowMapSimplified(agents, width, height) {
+function renderFlowMapSimplified(agents, width, height, activeStage = null) {
   const buf = new ColorBuffer(width, height);
   const byStage = groupByStage(agents);
   let y = 0;
   for (const stage of STAGE_ORDER) {
     const stageAgents = byStage.get(stage);
     if (!stageAgents || stageAgents.length === 0) continue;
-    buf.writeText(1, y, stage, STAGE_LABEL_STYLES[stage]);
+    const isInactiveStage = activeStage !== null && stage !== activeStage;
+    const stageLabelStyle = isInactiveStage ? { fg: STAGE_LABEL_STYLES[stage].fg, dim: true } : STAGE_LABEL_STYLES[stage];
+    buf.writeText(1, y, stage, stageLabelStyle);
     y++;
     const sorted = sortAgents(stageAgents);
     for (const agent of sorted) {
       if (y >= height - 1) break;
       const boxW = Math.min(width - 2, NODE_WIDTH);
-      drawAgentNode(buf, 1, y, boxW, agent);
+      drawAgentNode(buf, 1, y, boxW, agent, isInactiveStage);
       y += NODE_HEIGHT + 1;
     }
   }
@@ -4821,15 +4981,6 @@ function formatObjective(objectives, maxLines = 3) {
   }
   return lines.join("\n");
 }
-function formatToolIO(tools, inputs, outputs) {
-  const toolLine = `Tools: ${tools.join(" / ") || "none"}`;
-  const inLine = `IN : ${inputs.join(", ") || "none"}`;
-  const outParts = Object.entries(outputs).filter(([, v]) => v !== void 0 && v > 0).map(([k, v]) => `${k}(${v})`);
-  const outLine = `OUT: ${outParts.join(" / ") || "none"}`;
-  return `${toolLine}
-${inLine}
-${outLine}`;
-}
 function formatLogTail(events, maxLines = 10) {
   const tail = events.slice(-maxLines);
   return tail.map((e) => `${e.timestamp} ${e.message}`).join("\n");
@@ -4849,20 +5000,6 @@ function formatEnhancedProgressBar(progress, width = 30) {
     label: `${clamped}%`
   };
 }
-var SPARK_CHARS = "\u2581\u2582\u2583\u2584\u2585\u2586\u2587\u2588";
-function formatActivitySparkline(toolCalls, bucketCount = 20, windowMs = 6e4, now) {
-  const currentTime = now ?? Date.now();
-  const bucketSize = windowMs / bucketCount;
-  const buckets = new Array(bucketCount).fill(0);
-  for (const call of toolCalls) {
-    const age = currentTime - call.timestamp;
-    if (age < 0 || age >= windowMs) continue;
-    const idx = Math.min(bucketCount - 1, Math.floor(age / bucketSize));
-    buckets[bucketCount - 1 - idx]++;
-  }
-  const max = Math.max(1, ...buckets);
-  return buckets.map((b) => SPARK_CHARS[Math.round(b / max * (SPARK_CHARS.length - 1))]).join("");
-}
 function formatEnhancedChecklist(tasks, maxItems = 6) {
   const visible = tasks.slice(0, maxItems);
   const lines = visible.map((t) => t.completed ? `  \u2714 ${t.subject}` : `  \u25FB ${t.subject}`);
@@ -4931,12 +5068,7 @@ function FocusedAgentPanel({
   agent,
   objectives,
   activeSkills,
-  tasks,
-  tools,
-  inputs,
-  outputs,
   eventLog,
-  toolCalls,
   contextDecisions = [],
   contextNotes = [],
   width,
@@ -4961,11 +5093,7 @@ function FocusedAgentPanel({
   const statusLabel = agent.status.toUpperCase();
   const progressBar = formatEnhancedProgressBar(agent.progress);
   const objective = formatObjective(objectives);
-  const checklist = formatEnhancedChecklist(tasks);
-  const toolIO = formatToolIO(tools, inputs, outputs);
   const logs = formatLogTail(eventLog);
-  const agentToolCalls = toolCalls.filter((tc) => tc.agentId === agent.id);
-  const sparkline = formatActivitySparkline(agentToolCalls);
   return /* @__PURE__ */ React4.createElement(
     Box4,
     {
@@ -4981,15 +5109,6 @@ function FocusedAgentPanel({
     objective ? /* @__PURE__ */ React4.createElement(Text4, null, objective) : /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, "No objectives"),
     /* @__PURE__ */ React4.createElement(SectionDivider, { title: "Skills" }),
     activeSkills.length > 0 ? activeSkills.map((s, i) => /* @__PURE__ */ React4.createElement(Text4, { key: i }, " ", s)) : /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, "No skills"),
-    /* @__PURE__ */ React4.createElement(SectionDivider, { title: "Checklist" }),
-    checklist ? checklist.split("\n").map((line, i) => {
-      const isCompleted = line.includes("\u2714");
-      return /* @__PURE__ */ React4.createElement(Text4, { key: i, color: isCompleted ? "green" : void 0 }, line);
-    }) : /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, "No tasks"),
-    /* @__PURE__ */ React4.createElement(SectionDivider, { title: "Activity" }),
-    /* @__PURE__ */ React4.createElement(Text4, null, sparkline),
-    /* @__PURE__ */ React4.createElement(SectionDivider, { title: "Tools / IO" }),
-    /* @__PURE__ */ React4.createElement(Text4, null, toolIO),
     /* @__PURE__ */ React4.createElement(SectionDivider, { title: "Context" }),
     contextDecisions.length > 0 || contextNotes.length > 0 ? /* @__PURE__ */ React4.createElement(ContextSection, { decisions: contextDecisions, notes: contextNotes, width }) : /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, "No context"),
     /* @__PURE__ */ React4.createElement(SectionDivider, { title: "Event Log" }),
@@ -4997,9 +5116,115 @@ function FocusedAgentPanel({
   );
 }
 
-// src/tui/components/StageHealthBar.tsx
+// src/tui/components/ChecklistPanel.tsx
 import React5 from "react";
 import { Box as Box5, Text as Text5 } from "ink";
+
+// src/tui/components/checklist-panel.pure.ts
+function resolveChecklistTasks(tasks, contextDecisions, contextNotes) {
+  if (tasks.length > 0) {
+    return tasks;
+  }
+  if (contextDecisions.length > 0) {
+    return [
+      { id: "fallback-decision", subject: `Review: ${contextDecisions[0]}`, completed: false }
+    ];
+  }
+  if (contextNotes.length > 0) {
+    return [{ id: "fallback-note", subject: `Check: ${contextNotes[0]}`, completed: false }];
+  }
+  return [{ id: "fallback-default", subject: "Review current task objectives", completed: false }];
+}
+
+// src/tui/components/ChecklistPanel.tsx
+function ChecklistPanel({
+  tasks,
+  contextDecisions = [],
+  contextNotes = [],
+  width,
+  height
+}) {
+  const resolvedTasks = resolveChecklistTasks(tasks, contextDecisions, contextNotes);
+  const checklist = formatEnhancedChecklist(resolvedTasks);
+  return /* @__PURE__ */ React5.createElement(
+    Box5,
+    {
+      borderStyle: "single",
+      borderColor: BORDER_COLORS.panel,
+      flexDirection: "column",
+      width,
+      height
+    },
+    /* @__PURE__ */ React5.createElement(Text5, { bold: true, dimColor: true }, "\u2500\u2500\u2500 Checklist"),
+    checklist.split("\n").map((line, i) => {
+      const isCompleted = line.includes("\u2714");
+      return /* @__PURE__ */ React5.createElement(Text5, { key: i, color: isCompleted ? "green" : void 0 }, line);
+    })
+  );
+}
+
+// src/tui/components/StageHealthBar.tsx
+import React6 from "react";
+import { Box as Box6, Text as Text6 } from "ink";
+
+// src/tui/components/stage-health.pure.ts
+function formatCount(n) {
+  return n >= 1e3 ? `${Math.round(n / 1e3)}k` : String(n);
+}
+function computeStageHealth(agents) {
+  const health = {
+    PLAN: createEmptyStageStats(),
+    ACT: createEmptyStageStats(),
+    EVAL: createEmptyStageStats(),
+    AUTO: createEmptyStageStats()
+  };
+  for (const agent of agents.values()) {
+    const stage = health[agent.stage];
+    if (!stage) continue;
+    switch (agent.status) {
+      case "running":
+        stage.running++;
+        break;
+      case "blocked":
+        stage.blocked++;
+        break;
+      case "idle":
+        stage.waiting++;
+        break;
+      case "done":
+        stage.done++;
+        break;
+      case "error":
+        stage.error++;
+        break;
+    }
+  }
+  return health;
+}
+function detectBottlenecks(eventLog) {
+  const bottlenecks = /* @__PURE__ */ new Set();
+  for (const entry of eventLog) {
+    if (entry.level === "error") {
+      const testMatch = entry.message.match(/(?:test_run|tests?):\s*FAIL\s*\((\d+)\)/i);
+      if (testMatch) {
+        bottlenecks.add(`tests failing(${testMatch[1]})`);
+        continue;
+      }
+      const lintMatch = entry.message.match(/lint\(([^)]+)\)/i);
+      if (lintMatch) {
+        bottlenecks.add(`lint(${lintMatch[1]})`);
+        continue;
+      }
+      const envMatch = entry.message.match(/missing\s+env\(([^)]+)\)/i);
+      if (envMatch) {
+        bottlenecks.add(`missing env(${envMatch[1]})`);
+      }
+    }
+  }
+  return [...bottlenecks];
+}
+
+// src/tui/components/StageHealthBar.tsx
 function StageStatDisplay({
   mode,
   stats
@@ -5008,52 +5233,53 @@ function StageStatDisplay({
   const parts = [];
   if (stats.running > 0)
     parts.push(
-      /* @__PURE__ */ React5.createElement(Text5, { key: "r", color: "green" }, " ", "\u25CF ", stats.running, " running")
+      /* @__PURE__ */ React6.createElement(Text6, { key: "r", color: "green" }, " ", "\u25CF ", stats.running, " running")
     );
   if (stats.blocked > 0)
     parts.push(
-      /* @__PURE__ */ React5.createElement(Text5, { key: "b", color: "yellow" }, " ", "\u23F8 ", stats.blocked, " blocked")
+      /* @__PURE__ */ React6.createElement(Text6, { key: "b", color: "yellow" }, " ", "\u23F8 ", stats.blocked, " blocked")
     );
   if (stats.waiting > 0)
     parts.push(
-      /* @__PURE__ */ React5.createElement(Text5, { key: "w", dimColor: true }, " ", "\u25CB ", stats.waiting, " waiting")
+      /* @__PURE__ */ React6.createElement(Text6, { key: "w", dimColor: true }, " ", "\u25CB ", stats.waiting, " waiting")
     );
   if (stats.done > 0)
     parts.push(
-      /* @__PURE__ */ React5.createElement(Text5, { key: "d", color: "green" }, " ", "\u2713 ", stats.done)
+      /* @__PURE__ */ React6.createElement(Text6, { key: "d", color: "green" }, " ", "\u2713 ", stats.done)
     );
   if (stats.error > 0)
     parts.push(
-      /* @__PURE__ */ React5.createElement(Text5, { key: "e", color: "red", bold: true }, " ", "! ", stats.error, " err")
+      /* @__PURE__ */ React6.createElement(Text6, { key: "e", color: "red", bold: true }, " ", "! ", stats.error, " err")
     );
   if (parts.length === 0)
     parts.push(
-      /* @__PURE__ */ React5.createElement(Text5, { key: "idle", dimColor: true }, " ", "idle")
+      /* @__PURE__ */ React6.createElement(Text6, { key: "idle", dimColor: true }, " ", "idle")
     );
-  return /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Text5, { color, bold: true }, mode, ":"), parts);
+  return /* @__PURE__ */ React6.createElement(Box6, null, /* @__PURE__ */ React6.createElement(Text6, { color, bold: true }, mode, ":"), parts);
 }
 function StageHealthBar({
   stageHealth,
   bottlenecks,
   toolCount,
+  agentCount,
+  skillCount,
   width
 }) {
-  const countStr = toolCount >= 1e3 ? `${Math.round(toolCount / 1e3)}k` : String(toolCount);
-  return /* @__PURE__ */ React5.createElement(
-    Box5,
+  return /* @__PURE__ */ React6.createElement(
+    Box6,
     {
       borderStyle: "double",
       borderColor: BORDER_COLORS.panel,
       width,
       flexDirection: "column"
     },
-    /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Box5, { gap: 2 }, ["PLAN", "ACT", "EVAL"].map((mode) => /* @__PURE__ */ React5.createElement(StageStatDisplay, { key: mode, mode, stats: stageHealth[mode] }))), /* @__PURE__ */ React5.createElement(Box5, { flexGrow: 1 }), /* @__PURE__ */ React5.createElement(Box5, { gap: 2 }, bottlenecks.length > 0 && /* @__PURE__ */ React5.createElement(Text5, { color: "red", bold: true }, "\u26A1 Bottlenecks: ", bottlenecks.join(" / ")), /* @__PURE__ */ React5.createElement(Text5, { dimColor: true }, "tools: ", countStr)))
+    /* @__PURE__ */ React6.createElement(Box6, null, /* @__PURE__ */ React6.createElement(Box6, { gap: 2 }, ["PLAN", "ACT", "EVAL"].map((mode) => /* @__PURE__ */ React6.createElement(StageStatDisplay, { key: mode, mode, stats: stageHealth[mode] }))), /* @__PURE__ */ React6.createElement(Box6, { flexGrow: 1 }), /* @__PURE__ */ React6.createElement(Box6, { gap: 2 }, bottlenecks.length > 0 && /* @__PURE__ */ React6.createElement(Text6, { color: "red", bold: true }, "\u26A1 Bottlenecks: ", bottlenecks.join(" / ")), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u{1F916} ", formatCount(agentCount)), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u2699 ", formatCount(skillCount)), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u{1F527} ", formatCount(toolCount))))
   );
 }
 
 // src/tui/components/ActivityVisualizer.tsx
-import React6, { useMemo as useMemo2 } from "react";
-import { Box as Box6, Text as Text6 } from "ink";
+import React7, { useMemo as useMemo2 } from "react";
+import { Box as Box7, Text as Text7 } from "ink";
 
 // src/tui/utils/display-width.ts
 function isWide(code) {
@@ -5087,180 +5313,202 @@ function truncateToDisplayWidth(str, maxWidth) {
   }
   return str.slice(0, codeUnitIndex);
 }
-function padEndDisplayWidth(str, targetWidth) {
-  const currentWidth = estimateDisplayWidth(str);
-  if (currentWidth >= targetWidth) return str;
-  return str + " ".repeat(targetWidth - currentWidth);
-}
 
 // src/tui/components/activity-visualizer.pure.ts
-function aggregateForBarChart(calls, maxTools = 10) {
-  if (calls.length === 0) return [];
-  const toolCounts = /* @__PURE__ */ new Map();
-  for (const call of calls) {
-    toolCounts.set(call.toolName, (toolCounts.get(call.toolName) ?? 0) + 1);
-  }
-  return [...toolCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, maxTools).map(([tool, count]) => ({ tool, count }));
-}
-var TOOL_NAME_WIDTH = 12;
-var BAR_FIXED_OVERHEAD = TOOL_NAME_WIDTH + 2 + 2 + 4;
-function renderBarChart(data, width, height) {
-  if (data.length === 0 || height <= 0 || width <= 0) return [];
-  const lines = [truncateToDisplayWidth("\u{1F4CA} Activity", width)];
-  const barWidth = Math.max(1, width - BAR_FIXED_OVERHEAD);
-  const maxCount = data[0]?.count || 1;
-  for (const item of data) {
+var ACTIVITY_STATUS_ICONS = Object.freeze({
+  running: "\u25CF",
+  idle: "\u25CB",
+  blocked: "\u23F8",
+  error: "!",
+  done: "\u25CB"
+});
+function renderSubtree(nodeId, agents, childrenOf, visited, prefix, isLast, lines, height, width) {
+  if (lines.length >= height) return;
+  if (visited.has(nodeId)) return;
+  visited.add(nodeId);
+  const node = agents.get(nodeId);
+  if (!node) return;
+  const connector = isLast ? "\u2514" : "\u251C";
+  const icon = ACTIVITY_STATUS_ICONS[node.status] ?? "?";
+  lines.push(truncateToDisplayWidth(`${prefix}${connector} ${icon} ${node.name}`, width));
+  const childIds = (childrenOf.get(nodeId) ?? []).filter((id) => agents.has(id));
+  const nextPrefix = prefix + (isLast ? "   " : "\u2502  ");
+  for (let i = 0; i < childIds.length; i++) {
     if (lines.length >= height) break;
-    const name = padEndDisplayWidth(
-      truncateToDisplayWidth(item.tool, TOOL_NAME_WIDTH),
-      TOOL_NAME_WIDTH
+    renderSubtree(
+      childIds[i],
+      agents,
+      childrenOf,
+      visited,
+      nextPrefix,
+      i === childIds.length - 1,
+      lines,
+      height,
+      width
     );
-    const filled = Math.round(item.count / maxCount * barWidth);
-    const empty = barWidth - filled;
-    const bar = "\u2588".repeat(filled) + "\u2591".repeat(empty);
-    const countStr = String(item.count).padStart(4);
-    lines.push(truncateToDisplayWidth(`${name} [${bar}] ${countStr}`, width));
+  }
+}
+function renderAgentTree(agents, edges, activeSkills, width, height) {
+  if (height <= 0 || width <= 0) return [];
+  const lines = [truncateToDisplayWidth("\u{1F4CA} Activity", width)];
+  if (height <= 1) return lines;
+  if (agents.size === 0) {
+    lines.push(truncateToDisplayWidth("  No agents", width));
+    return lines.slice(0, height);
+  }
+  const childrenOf = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (!childrenOf.has(edge.from)) childrenOf.set(edge.from, []);
+    childrenOf.get(edge.from).push(edge.to);
+  }
+  const root = [...agents.values()].find((a) => a.isPrimary) ?? [...agents.values()][0];
+  const rootIcon = ACTIVITY_STATUS_ICONS[root.status] ?? "?";
+  lines.push(truncateToDisplayWidth(`${rootIcon} ${root.name}`, width));
+  const visited = /* @__PURE__ */ new Set([root.id]);
+  const rootChildIds = (childrenOf.get(root.id) ?? []).filter((id) => agents.has(id));
+  const totalChildren = rootChildIds.length + activeSkills.length;
+  for (let i = 0; i < rootChildIds.length; i++) {
+    if (lines.length >= height) break;
+    const isLast = i === totalChildren - 1;
+    renderSubtree(rootChildIds[i], agents, childrenOf, visited, "  ", isLast, lines, height, width);
+  }
+  for (let i = 0; i < activeSkills.length; i++) {
+    if (lines.length >= height) break;
+    const isLast = rootChildIds.length + i === totalChildren - 1;
+    const connector = isLast ? "\u2514" : "\u251C";
+    lines.push(truncateToDisplayWidth(`  ${connector} \u25C9 ${activeSkills[i]} (skill)`, width));
   }
   return lines.slice(0, height);
 }
-var LIVE_AGENT_NAME_WIDTH = 15;
-var LIVE_HOT_WINDOW_MS = 5e3;
-var LIVE_RECENT_WINDOW_MS = 3e4;
-var LIVE_HOT_SEC = LIVE_HOT_WINDOW_MS / 1e3;
-var LIVE_RECENT_SEC = LIVE_RECENT_WINDOW_MS / 1e3;
-function renderLiveContext(calls, currentMode, width, height, now) {
-  const currentTime = now ?? Date.now();
+function wordWrap(text, width) {
+  if (width <= 0) return [];
+  const words = text.split(" ");
+  const result = [];
+  let current = "";
+  let currentWidth = 0;
+  for (const word of words) {
+    const wordWidth = estimateDisplayWidth(word);
+    if (current.length === 0) {
+      current = wordWidth <= width ? word : truncateToDisplayWidth(word, width);
+      currentWidth = estimateDisplayWidth(current);
+    } else if (currentWidth + 1 + wordWidth <= width) {
+      current += " " + word;
+      currentWidth += 1 + wordWidth;
+    } else {
+      result.push(current);
+      current = wordWidth <= width ? word : truncateToDisplayWidth(word, width);
+      currentWidth = estimateDisplayWidth(current);
+    }
+  }
+  if (current.length > 0) result.push(current);
+  return result;
+}
+function renderAgentStatusCard(focusedAgent, currentMode, objectives, activeSkills, width, height) {
   if (height <= 0 || width <= 0) return [];
   const lines = [truncateToDisplayWidth("\u{1F4AC} Live", width)];
-  if (currentMode) {
-    lines.push(truncateToDisplayWidth(`\u27EB Mode: ${currentMode}`, width));
-  }
-  const maxItems = height - lines.length;
-  const seen = /* @__PURE__ */ new Set();
-  for (let i = calls.length - 1; i >= 0 && seen.size < maxItems; i--) {
-    const call = calls[i];
-    if (call.status === "error") continue;
-    if (seen.has(call.toolName)) continue;
-    seen.add(call.toolName);
-    const ageSec = Math.floor((currentTime - call.timestamp) / 1e3);
-    const ageIndicator = ageSec < LIVE_HOT_SEC ? "\u25C9" : ageSec < LIVE_RECENT_SEC ? "\u25CB" : "\xB7";
-    const agent = call.agentId !== "unknown" ? truncateToDisplayWidth(call.agentId, LIVE_AGENT_NAME_WIDTH) + " " : "";
-    lines.push(truncateToDisplayWidth(`${ageIndicator} ${agent}${call.toolName}`, width));
+  if (height <= 1) return lines;
+  lines.push(truncateToDisplayWidth(`\u27EB Mode: ${currentMode ?? "\u2014"}`, width));
+  if (!focusedAgent) {
+    lines.push(truncateToDisplayWidth("  No agent", width));
+    return lines.slice(0, height);
+  }
+  lines.push(truncateToDisplayWidth(`\u{1F916} ${focusedAgent.name}`, width));
+  const statusIcon = ACTIVITY_STATUS_ICONS[focusedAgent.status] ?? "?";
+  lines.push(truncateToDisplayWidth(`   ${statusIcon} ${focusedAgent.status}`, width));
+  const separator = truncateToDisplayWidth("\u2500".repeat(width), width);
+  if (lines.length < height) lines.push(separator);
+  let objectivesAdded = false;
+  if (objectives.length > 0 && lines.length < height) {
+    const wrapped = wordWrap(objectives[0], width);
+    for (const wline of wrapped) {
+      if (lines.length >= height) break;
+      lines.push(wline);
+      objectivesAdded = true;
+    }
+  }
+  if (objectivesAdded && lines.length < height) lines.push(separator);
+  for (const skill of activeSkills) {
+    if (lines.length >= height) break;
+    lines.push(truncateToDisplayWidth(`\u2699 ${skill}`, width));
   }
   return lines.slice(0, height);
 }
 
 // src/tui/components/ActivityVisualizer.tsx
 function ActivityVisualizer({
-  toolCalls,
   currentMode,
+  focusedAgent,
+  agents,
+  edges,
+  activeSkills,
+  objectives,
   width,
   height
 }) {
-  if (width <= 0 || height <= 0) {
-    return /* @__PURE__ */ React6.createElement(Box6, null);
-  }
-  const barChartWidth = Math.floor(width * 0.6);
-  const livePanelWidth = width - barChartWidth;
+  const treeWidth = Math.floor(width * 0.6);
+  const cardWidth = width - treeWidth;
   const contentHeight = Math.max(1, height - 2);
-  const barChartData = useMemo2(() => aggregateForBarChart(toolCalls), [toolCalls]);
-  const barChartLines = useMemo2(
-    () => renderBarChart(barChartData, Math.max(1, barChartWidth - 2), contentHeight),
-    [barChartData, barChartWidth, contentHeight]
+  const treeLines = useMemo2(
+    () => renderAgentTree(agents, edges, activeSkills, Math.max(1, treeWidth - 2), contentHeight),
+    [agents, edges, activeSkills, treeWidth, contentHeight]
   );
-  const liveLines = useMemo2(
-    () => renderLiveContext(toolCalls, currentMode, Math.max(1, livePanelWidth - 2), contentHeight),
-    [toolCalls, currentMode, livePanelWidth, contentHeight]
+  const cardLines = useMemo2(
+    () => renderAgentStatusCard(
+      focusedAgent,
+      currentMode,
+      objectives,
+      activeSkills,
+      Math.max(1, cardWidth - 2),
+      contentHeight
+    ),
+    [focusedAgent, currentMode, objectives, activeSkills, cardWidth, contentHeight]
   );
-  return /* @__PURE__ */ React6.createElement(Box6, { flexDirection: "row", width, height }, /* @__PURE__ */ React6.createElement(
-    Box6,
+  if (width <= 0 || height <= 0) {
+    return /* @__PURE__ */ React7.createElement(Box7, null);
+  }
+  return /* @__PURE__ */ React7.createElement(Box7, { flexDirection: "row", width, height }, /* @__PURE__ */ React7.createElement(
+    Box7,
     {
       borderStyle: "single",
       borderColor: BORDER_COLORS.panel,
       flexDirection: "column",
-      width: barChartWidth,
+      width: treeWidth,
       height
     },
-    barChartLines.map((line, i) => /* @__PURE__ */ React6.createElement(Text6, { key: i }, line))
-  ), /* @__PURE__ */ React6.createElement(
-    Box6,
+    treeLines.map((line, i) => /* @__PURE__ */ React7.createElement(Text7, { key: i }, line))
+  ), /* @__PURE__ */ React7.createElement(
+    Box7,
     {
       borderStyle: "single",
       borderColor: BORDER_COLORS.panel,
       flexDirection: "column",
-      width: livePanelWidth,
+      width: cardWidth,
       height
     },
-    liveLines.map((line, i) => /* @__PURE__ */ React6.createElement(Text6, { key: i }, line))
+    cardLines.map((line, i) => /* @__PURE__ */ React7.createElement(Text7, { key: i }, line))
   ));
 }
 
-// src/tui/components/stage-health.pure.ts
-function computeStageHealth(agents) {
-  const health = {
-    PLAN: createEmptyStageStats(),
-    ACT: createEmptyStageStats(),
-    EVAL: createEmptyStageStats(),
-    AUTO: createEmptyStageStats()
-  };
-  for (const agent of agents.values()) {
-    const stage = health[agent.stage];
-    if (!stage) continue;
-    switch (agent.status) {
-      case "running":
-        stage.running++;
-        break;
-      case "blocked":
-        stage.blocked++;
-        break;
-      case "idle":
-        stage.waiting++;
-        break;
-      case "done":
-        stage.done++;
-        break;
-      case "error":
-        stage.error++;
-        break;
-    }
-  }
-  return health;
-}
-function detectBottlenecks(eventLog) {
-  const bottlenecks = /* @__PURE__ */ new Set();
-  for (const entry of eventLog) {
-    if (entry.level === "error") {
-      const testMatch = entry.message.match(/(?:test_run|tests?):\s*FAIL\s*\((\d+)\)/i);
-      if (testMatch) {
-        bottlenecks.add(`tests failing(${testMatch[1]})`);
-        continue;
-      }
-      const lintMatch = entry.message.match(/lint\(([^)]+)\)/i);
-      if (lintMatch) {
-        bottlenecks.add(`lint(${lintMatch[1]})`);
-        continue;
-      }
-      const envMatch = entry.message.match(/missing\s+env\(([^)]+)\)/i);
-      if (envMatch) {
-        bottlenecks.add(`missing env(${envMatch[1]})`);
-      }
-    }
-  }
-  return [...bottlenecks];
-}
-
 // src/tui/components/grid-layout.pure.ts
 var HEADER_HEIGHT = 3;
 var STAGE_HEALTH_HEIGHT = 3;
 var NARROW_FLOW_MAP_HEIGHT = 5;
 var MIN_ROWS = HEADER_HEIGHT + STAGE_HEALTH_HEIGHT + 2;
 var MIN_COLUMNS = 20;
+var CHECKLIST_HEIGHT_MIN = 6;
+var CHECKLIST_HEIGHT_MAX = 10;
 var FOCUSED_AGENT_WIDTH = {
   wide: 63,
   // was 70 → -10% (FlowMap/Activity gains +7 cols)
   medium: 58
   // was 64 → -9.4% (FlowMap/Activity gains +6 cols)
 };
+function computeChecklistHeight(mainHeight) {
+  return Math.max(
+    CHECKLIST_HEIGHT_MIN,
+    Math.min(CHECKLIST_HEIGHT_MAX, Math.ceil(mainHeight * 0.3))
+  );
+}
 function computeGridLayout(columns, rows, layoutMode) {
   const cols = Math.max(MIN_COLUMNS, columns);
   const r = Math.max(MIN_ROWS, rows);
@@ -5275,11 +5523,20 @@ function computeGridLayout(columns, rows, layoutMode) {
   const mainHeight = r - HEADER_HEIGHT - STAGE_HEALTH_HEIGHT;
   if (layoutMode === "narrow") {
     const flowMapHeight2 = Math.min(NARROW_FLOW_MAP_HEIGHT, mainHeight - 1);
-    const focusedHeight = mainHeight - flowMapHeight2;
+    const availableForChecklist = mainHeight - flowMapHeight2;
+    const rawChecklistHeight = computeChecklistHeight(mainHeight);
+    const checklistHeight2 = Math.min(rawChecklistHeight, Math.max(0, availableForChecklist - 1));
+    const focusedHeight = availableForChecklist - checklistHeight2;
     return {
       header,
-      focusedAgent: { x: 0, y: mainY, width: cols, height: focusedHeight },
-      flowMap: { x: 0, y: mainY + focusedHeight, width: cols, height: flowMapHeight2 },
+      checklistPanel: { x: 0, y: mainY, width: cols, height: checklistHeight2 },
+      focusedAgent: { x: 0, y: mainY + checklistHeight2, width: cols, height: focusedHeight },
+      flowMap: {
+        x: 0,
+        y: mainY + checklistHeight2 + focusedHeight,
+        width: cols,
+        height: flowMapHeight2
+      },
       monitorPanel: { x: 0, y: 0, width: 0, height: 0 },
       stageHealth,
       total: { width: cols, height: r }
@@ -5289,119 +5546,148 @@ function computeGridLayout(columns, rows, layoutMode) {
   const flowMapWidth = cols - focusedWidth;
   const flowMapHeight = Math.ceil(mainHeight / 2);
   const monitorHeight = mainHeight - flowMapHeight;
+  const checklistHeight = computeChecklistHeight(mainHeight);
+  const focusedAgentHeight = mainHeight - checklistHeight;
   return {
     header,
+    checklistPanel: { x: flowMapWidth, y: mainY, width: focusedWidth, height: checklistHeight },
     flowMap: { x: 0, y: mainY, width: flowMapWidth, height: flowMapHeight },
     monitorPanel: { x: 0, y: mainY + flowMapHeight, width: flowMapWidth, height: monitorHeight },
-    focusedAgent: { x: flowMapWidth, y: mainY, width: focusedWidth, height: mainHeight },
+    focusedAgent: {
+      x: flowMapWidth,
+      y: mainY + checklistHeight,
+      width: focusedWidth,
+      height: focusedAgentHeight
+    },
     stageHealth,
     total: { width: cols, height: r }
   };
 }
 
 // src/tui/dashboard-app.tsx
-function DashboardApp({ eventBus, externalState }) {
+function DashboardApp({
+  eventBus,
+  externalState,
+  workspace: workspaceProp
+}) {
   const { columns, rows, layoutMode } = useTerminalSize();
   const internalState = useDashboardState(externalState ? void 0 : eventBus);
   const state = externalState ?? internalState;
   const focusedAgent = state.focusedAgentId ? state.agents.get(state.focusedAgentId) ?? null : null;
   const stageHealth = useMemo3(() => computeStageHealth(state.agents), [state.agents]);
-  const tools = useMemo3(() => {
-    const seen = /* @__PURE__ */ new Set();
-    for (const e of state.eventLog) {
-      seen.add(e.message.split(" [")[0]);
-    }
-    return [...seen];
-  }, [state.eventLog]);
   const bottlenecks = useMemo3(() => detectBottlenecks(state.eventLog), [state.eventLog]);
   const grid = useMemo3(
     () => computeGridLayout(columns, rows, layoutMode),
     [columns, rows, layoutMode]
   );
-  return /* @__PURE__ */ React7.createElement(Box7, { flexDirection: "column", width: grid.total.width, height: grid.total.height }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column", width: grid.total.width, height: grid.total.height }, /* @__PURE__ */ React8.createElement(
     HeaderBar,
     {
-      workspace: state.workspace,
-      sessionId: state.sessionId,
+      workspace: workspaceProp ?? state.workspace,
       currentMode: state.currentMode,
       globalState: state.globalState,
       layoutMode,
       width: grid.header.width
     }
-  ), layoutMode === "narrow" ? /* @__PURE__ */ React7.createElement(Box7, { flexDirection: "column" }, /* @__PURE__ */ React7.createElement(
+  ), layoutMode === "narrow" ? /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column" }, grid.checklistPanel.height > 0 && /* @__PURE__ */ React8.createElement(
+    ChecklistPanel,
+    {
+      tasks: state.tasks,
+      contextDecisions: state.contextDecisions,
+      contextNotes: state.contextNotes,
+      width: grid.checklistPanel.width,
+      height: grid.checklistPanel.height
+    }
+  ), /* @__PURE__ */ React8.createElement(
     FocusedAgentPanel,
     {
       agent: focusedAgent,
       objectives: state.objectives,
       activeSkills: state.activeSkills,
-      tasks: state.tasks,
-      tools,
-      inputs: tools,
-      outputs: state.outputStats,
       eventLog: state.eventLog,
-      toolCalls: state.toolCalls,
       contextDecisions: state.contextDecisions,
       contextNotes: state.contextNotes,
       width: grid.focusedAgent.width,
       height: grid.focusedAgent.height
     }
-  ), /* @__PURE__ */ React7.createElement(
-    FlowMap,
-    {
-      agents: state.agents,
-      edges: state.edges,
-      layoutMode,
-      width: grid.flowMap.width,
-      height: grid.flowMap.height
-    }
-  )) : /* @__PURE__ */ React7.createElement(Box7, { flexDirection: "row", width: grid.total.width, height: grid.focusedAgent.height }, /* @__PURE__ */ React7.createElement(Box7, { flexDirection: "column", width: grid.flowMap.width }, /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     FlowMap,
     {
       agents: state.agents,
       edges: state.edges,
       layoutMode,
       width: grid.flowMap.width,
-      height: grid.flowMap.height
+      height: grid.flowMap.height,
+      activeStage: state.currentMode
     }
-  ), /* @__PURE__ */ React7.createElement(
-    ActivityVisualizer,
+  )) : /* @__PURE__ */ React8.createElement(
+    Box8,
     {
-      toolCalls: state.toolCalls,
-      currentMode: state.currentMode,
-      width: grid.monitorPanel.width,
-      height: grid.monitorPanel.height
-    }
-  )), /* @__PURE__ */ React7.createElement(
-    FocusedAgentPanel,
-    {
-      agent: focusedAgent,
-      objectives: state.objectives,
-      activeSkills: state.activeSkills,
-      tasks: state.tasks,
-      tools,
-      inputs: tools,
-      outputs: state.outputStats,
-      eventLog: state.eventLog,
-      toolCalls: state.toolCalls,
-      contextDecisions: state.contextDecisions,
-      contextNotes: state.contextNotes,
-      width: grid.focusedAgent.width,
-      height: grid.focusedAgent.height
-    }
-  )), /* @__PURE__ */ React7.createElement(
+      flexDirection: "row",
+      width: grid.total.width,
+      height: grid.checklistPanel.height + grid.focusedAgent.height
+    },
+    /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column", width: grid.flowMap.width }, /* @__PURE__ */ React8.createElement(
+      FlowMap,
+      {
+        agents: state.agents,
+        edges: state.edges,
+        layoutMode,
+        width: grid.flowMap.width,
+        height: grid.flowMap.height,
+        activeStage: state.currentMode
+      }
+    ), /* @__PURE__ */ React8.createElement(
+      ActivityVisualizer,
+      {
+        currentMode: state.currentMode,
+        focusedAgent,
+        agents: state.agents,
+        edges: state.edges,
+        activeSkills: state.activeSkills,
+        objectives: state.objectives,
+        width: grid.monitorPanel.width,
+        height: grid.monitorPanel.height
+      }
+    )),
+    /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column", width: grid.checklistPanel.width }, /* @__PURE__ */ React8.createElement(
+      ChecklistPanel,
+      {
+        tasks: state.tasks,
+        contextDecisions: state.contextDecisions,
+        contextNotes: state.contextNotes,
+        width: grid.checklistPanel.width,
+        height: grid.checklistPanel.height
+      }
+    ), /* @__PURE__ */ React8.createElement(
+      FocusedAgentPanel,
+      {
+        agent: focusedAgent,
+        objectives: state.objectives,
+        activeSkills: state.activeSkills,
+        eventLog: state.eventLog,
+        contextDecisions: state.contextDecisions,
+        contextNotes: state.contextNotes,
+        width: grid.focusedAgent.width,
+        height: grid.focusedAgent.height
+      }
+    ))
+  ), /* @__PURE__ */ React8.createElement(
     StageHealthBar,
     {
       stageHealth,
       bottlenecks,
       toolCount: state.toolInvokeCount,
+      agentCount: state.agentActivateCount,
+      skillCount: state.skillInvokeCount,
       width: grid.stageHealth.width
     }
   ));
 }
 
 // src/tui/multi-session-app.tsx
-import React9, { useMemo as useMemo4, useCallback as useCallback2 } from "react";
-import { Box as Box9, useInput } from "ink";
+import React10, { useMemo as useMemo4, useCallback as useCallback2 } from "react";
+import { Box as Box10, useInput } from "ink";
 import * as path8 from "path";
 
 // src/tui/hooks/use-multi-session-state.ts
@@ -5557,8 +5843,8 @@ function useMultiSessionState(manager) {
 }
 
 // src/tui/components/SessionTabBar.tsx
-import React8 from "react";
-import { Box as Box8, Text as Text7 } from "ink";
+import React9 from "react";
+import { Box as Box9, Text as Text8 } from "ink";
 
 // src/tui/components/session-tab-bar.pure.ts
 var STATUS_ICONS2 = {
@@ -5612,7 +5898,7 @@ function SessionTabBar({
   if (formatted === "") {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(Box8, { width, height: 1 }, /* @__PURE__ */ React8.createElement(Text7, null, formatted));
+  return /* @__PURE__ */ React9.createElement(Box9, { width, height: 1 }, /* @__PURE__ */ React9.createElement(Text8, null, formatted));
 }
 
 // src/tui/multi-session-app.tsx
@@ -5640,6 +5926,10 @@ function MultiSessionApp({ manager }) {
     const found = managedSessions.find((s) => s.instance.pid === activeSessionPid);
     return found?.eventBus;
   }, [manager, activeSessionPid]);
+  const activeProjectRoot = useMemo4(() => {
+    if (activeSessionPid === null) return void 0;
+    return sessions.get(activeSessionPid)?.projectRoot;
+  }, [sessions, activeSessionPid]);
   const handleInput = useCallback2(
     (input, key) => {
       if (key.rightArrow) {
@@ -5658,7 +5948,14 @@ function MultiSessionApp({ manager }) {
     [switchNext, switchPrev, switchByIndex]
   );
   useInput(handleInput);
-  return /* @__PURE__ */ React9.createElement(Box9, { flexDirection: "column" }, /* @__PURE__ */ React9.createElement(SessionTabBar, { sessions: tabs, width: columns, layoutMode }), /* @__PURE__ */ React9.createElement(DashboardApp, { key: activeSessionPid ?? "none", eventBus: activeEventBus }));
+  return /* @__PURE__ */ React10.createElement(Box10, { flexDirection: "column" }, /* @__PURE__ */ React10.createElement(SessionTabBar, { sessions: tabs, width: columns, layoutMode }), /* @__PURE__ */ React10.createElement(
+    DashboardApp,
+    {
+      key: activeSessionPid ?? "none",
+      eventBus: activeEventBus,
+      workspace: activeProjectRoot
+    }
+  ));
 }
 
 // src/tui/types.ts
@@ -5721,10 +6018,10 @@ function useClock() {
 // src/tui/index.tsx
 function startTui(options) {
   const renderOptions = options.stdout ? { stdout: options.stdout } : {};
-  return render(/* @__PURE__ */ React10.createElement(DashboardApp, { eventBus: options.eventBus }), renderOptions);
+  return render(/* @__PURE__ */ React11.createElement(DashboardApp, { eventBus: options.eventBus }), renderOptions);
 }
 function renderMultiSession(options) {
-  return render(/* @__PURE__ */ React10.createElement(MultiSessionApp, { manager: options.manager }));
+  return render(/* @__PURE__ */ React11.createElement(MultiSessionApp, { manager: options.manager }));
 }
 export {
   AGENT_STATUSES,