@fradser/pi-agent-teams 0.5.3 → 0.7.0

package/src/ui.ts

@@ -1,69 +1,50 @@
-/** Passive teammate widget and interactive full-screen console. */
+/** Passive team widget and the /agent-teams management console
+ * (session teammates + persistent agent roles + board). */
 
 import { truncateToWidth, Key, matchesKey } from "@earendil-works/pi-tui";
 import { createPiThemeStyle, PI_SPINNER_FRAMES, PI_SPINNER_INTERVAL_MS } from "@fradser/pi-kit";
 import type { ExtensionUIContext } from "@earendil-works/pi-coding-agent";
-import { truncateTail, DEFAULT_MAX_BYTES, DEFAULT_MAX_LINES } from "@earendil-works/pi-coding-agent";
 import {
   clampConsoleScroll, consoleScrollRange, maxConsoleBody, scrollConsoleDetail, wrapConsoleDetail,
-} from "./console-viewport";
-import { getNodeByWorkerKey, getState, listNodes } from "./state";
-import { cancelNodeAndTerminate, ensureLivePoll } from "./run-machine";
-import type { Node } from "./types";
-
-function cap(text: string | undefined, maxBytes = DEFAULT_MAX_BYTES): string {
-  if (!text) return "";
-  if (text.length <= maxBytes) return text;
-  const t = truncateTail(text, { maxLines: DEFAULT_MAX_LINES, maxBytes });
-  return `${t.content}\n…[truncated ${text.length - t.content.length} chars]`;
-}
-
-// ── Team UI: passive widget + full-screen console ──────────────────
-// The widget below the editor is DISPLAY-ONLY. ALL interaction happens in the
-// full-screen Team Console (/teammate), which owns input via ctx.ui.custom.
+} from "./console-viewport.ts";
+import { fitTeammateRow, formatTeammateLabel, runningTeammateActivity } from "./activity.ts";
+import { discoverAgents, resolveAgent, type AgentDefinition } from "./agents.ts";
+import { getState, getTeammate, listTasks, listTeammates, livingTeammates } from "./state.ts";
+import {
+  ensureLivePoll,
+  formatSilenceDuration,
+  runtimeDirPath,
+  shutdownTeammate,
+  STALL_NOTICE_MS,
+  stallSilenceMs,
+} from "./team-machine.ts";
+import type { Teammate } from "./types.ts";
+import { inboxPath } from "./statefile.ts";
+import * as fs from "node:fs";
+import * as path from "node:path";
 
 const TEAM_COLORS = ["success", "warning", "error", "mdLink"] as const;
 let spinnerTimer: ReturnType<typeof setInterval> | undefined;
 let spinnerFrame = 0;
 
-/** Stable per-node color (independent of row order). */
 function hashName(name: string): number {
   let h = 0;
-  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) | 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(0) + i * 7) | 0;
   return Math.abs(h);
 }
 
-interface PanelRow {
-  key: string;
-}
-
-/** Console/widget rows contain node status and leader-report access. */
-function buildPanelRows(): PanelRow[] {
-  return listNodes().map((node) => ({ key: node.workerKey }));
-}
-
-function runningTeammateLabel(node: Node): string {
-  const frame = PI_SPINNER_FRAMES[spinnerFrame];
-  const tool = node.spawn?.activeTool;
-  const thinking = (node.spawn?.liveThinking ?? "").split("\n").map((l) => l.trim()).find((l) => l.length > 0) ?? "";
-  const live = (node.spawn?.liveText ?? "").split("\n").map((l) => l.trim()).find((l) => l.length > 0) ?? "";
-  // Like the memory package's activity line: show what the worker is doing
-  // right now — current tool when one is executing, else its live reasoning,
-  // else the latest assistant text.
-  const activity = tool
-    ?? (thinking ? truncateToWidth(thinking, 48) : undefined)
-    ?? (live ? truncateToWidth(live, 48) : "Working...");
-  return `${frame} ${activity}`;
+function colorFor(name: string): (typeof TEAM_COLORS)[number] {
+  return TEAM_COLORS[hashName(name) % TEAM_COLORS.length];
 }
 
 function ensureSpinner(): void {
-  const running = listNodes().some((node) => node.status === "running");
-  if (running && !spinnerTimer) {
+  const working = livingTeammates().some(isWorking);
+  if (working && !spinnerTimer) {
     spinnerTimer = setInterval(() => {
       spinnerFrame = (spinnerFrame + 1) % PI_SPINNER_FRAMES.length;
     }, PI_SPINNER_INTERVAL_MS);
     spinnerTimer.unref?.();
-  } else if (!running && spinnerTimer) {
+  } else if (!working && spinnerTimer) {
     clearInterval(spinnerTimer);
     spinnerTimer = undefined;
   }
@@ -80,8 +61,7 @@ export function ensureTeamWidget(ctx?: { ui?: ExtensionUIContext; mode?: string
   if (!ctx?.ui?.setWidget) return;
   if (ctx.mode && ctx.mode !== "tui") return;
 
-  const running = listNodes().filter((node) => node.status === "running");
-  if (running.length === 0) {
+  if (livingTeammates().filter(isWorking).length === 0) {
     ctx.ui.setWidget("teammate", undefined);
     return;
   }
@@ -90,37 +70,22 @@ export function ensureTeamWidget(ctx?: { ui?: ExtensionUIContext; mode?: string
     const timer = setInterval(() => tui.requestRender(), PI_SPINNER_INTERVAL_MS);
     timer.unref?.();
     const style = createPiThemeStyle(theme);
-    const assignedColors = new Map<string, (typeof TEAM_COLORS)[number]>();
     return {
       placement: "belowEditor",
       render: (width: number) => {
-        const running = listNodes().filter((n) => n.status === "running");
-        if (running.length === 0) return [];
-        const runningKeys = new Set(running.map((node) => node.workerKey));
-        for (const key of assignedColors.keys()) {
-          if (!runningKeys.has(key)) assignedColors.delete(key);
-        }
-        const usedColors = new Set(assignedColors.values());
-        for (const node of running) {
-          if (!assignedColors.has(node.workerKey)) {
-            const start = hashName(node.workerKey) % TEAM_COLORS.length;
-            const color = TEAM_COLORS.find((_, offset) => !usedColors.has(TEAM_COLORS[(start + offset) % TEAM_COLORS.length]));
-            assignedColors.set(node.workerKey, color ?? TEAM_COLORS[start]);
-            usedColors.add(color ?? TEAM_COLORS[start]);
-          }
-        }
+        // Only WORKING teammates appear above the input box; idle and
+        // stopped teammates stay in the /agent-teams console instead.
+        const working = livingTeammates().filter(isWorking);
+        if (working.length === 0) return [];
         const lines: string[] = [];
-        for (const node of running) {
-          const label = runningTeammateLabel(node);
-          const color = assignedColors.get(node.workerKey) ?? TEAM_COLORS[hashName(node.workerKey) % TEAM_COLORS.length];
-          const name = style.fg(color, node.id);
-          const role = style.dim(`(${node.agent})`);
-          const separator = label.indexOf(" ");
-          const spinner = separator === -1 ? label : label.slice(0, separator);
-          const activityText = separator === -1 ? "Working..." : label.slice(separator + 1).trim();
-          const activity = theme.bold(style.fg("accent", activityText));
-          const line = ` ${spinner} ${name} ${role} · ${activity}`;
-          lines.push(truncateToWidth(line, Math.max(10, width - 1)));
+        for (const teammate of working) {
+          lines.push(fitTeammateRow(
+            PI_SPINNER_FRAMES[spinnerFrame],
+            style.fg(colorFor(teammate.name), teammate.name),
+            runningTeammateActivity(teammate) + stallSuffix(teammate),
+            width,
+            (activity) => theme.bold(style.fg("accent", activity)),
+          ));
         }
         return lines;
       },
@@ -130,104 +95,241 @@ export function ensureTeamWidget(ctx?: { ui?: ExtensionUIContext; mode?: string
   });
 }
 
+function isWorking(teammate: { status: string }): boolean {
+  return teammate.status === "working" || teammate.status === "starting";
+}
+
+/** Silence marker appended once a working teammate passes the stall notice threshold. */
+function stallSuffix(teammate: Teammate): string {
+  if (!isWorking(teammate)) return "";
+  const silence = stallSilenceMs(teammate);
+  return silence !== undefined && STALL_NOTICE_MS > 0 && silence >= STALL_NOTICE_MS
+    ? ` · stalled for ${formatSilenceDuration(silence)}`
+    : "";
+}
+
 export function refreshTeamUI(ctx?: { ui?: ExtensionUIContext; mode?: string }): void {
   ensureTeamWidget(ctx);
   ensureLivePoll();
   ensureSpinner();
 }
 
+function cap(text: string | undefined, maxBytes = 2000): string {
+  if (!text) return "";
+  return text.length <= maxBytes ? text : `${text.slice(0, maxBytes)}\n…[truncated ${text.length - maxBytes} chars]`;
+}
+
+// ── Detail builders ───────────────────────────────────────────────
 
-/** Full content of a node as shown on its detail page: spawn lifecycle, live
- * worker text, captured output, result and error. */
-function buildNodeSection(node: Node): string[] {
-  const lines: string[] = [`- [${node.id}] ${node.status}: ${node.agent}`];
-  if (node.prompt) lines.push(`  Task: ${cap(node.prompt, 2000)}`);
-  lines.push(`  Access: ${node.access} | Paths: ${node.paths.join(", ")}`);
-  if (node.dependsOn.length > 0) lines.push(`  Depends on: ${node.dependsOn.join(", ")}`);
-
-  const spawn = node.spawn;
-  if (spawn) {
-    const stateLabel = spawn.status === "running" ? `running (pid ${spawn.pid})` : spawn.status;
-    lines.push(`  Spawn: ${stateLabel} | Isolation: ${spawn.isolation ?? "none"}`);
-    if (spawn.startedAt) lines.push(`  Started: ${new Date(spawn.startedAt).toLocaleString()}`);
-    if (spawn.finishedAt) lines.push(`  Finished: ${new Date(spawn.finishedAt).toLocaleString()}`);
-    if (spawn.exitCode !== undefined) lines.push(`  Exit code: ${spawn.exitCode}`);
-    if (spawn.timedOut) lines.push("  Timed out: yes");
-    if (spawn.usage) {
-      const u = spawn.usage;
-      lines.push(`  Usage: ${u.totalTokens} tokens (in ${u.input} / out ${u.output}) | cost $${u.cost}`);
-    }
-    if (spawn.turns) lines.push(`  Worker turns: ${spawn.turns}`);
-    if (spawn.activeTool) lines.push(`  Current tool: ${spawn.activeTool}`);
-    if (spawn.error) lines.push(`  Spawn error: ${spawn.error}`);
-    if (spawn.status === "running") {
-      lines.push("  --- Live worker activity ---");
-      const activity = [
-        ...(spawn.liveThinking?.trim() ? spawn.liveThinking.split("\n").map((l) => `  ${l}`) : []),
-        ...(spawn.liveText?.trim() ? spawn.liveText.split("\n").map((l) => `  ${l}`) : []),
-      ];
-      lines.push(...(activity.length > 0 ? activity : ["  Waiting for the worker's first response…"]));
+interface PeerMailLine {
+  direction: "sent" | "received";
+  counterpart: string;
+  subject: string;
+  body: string;
+  timestamp: number;
+}
+
+function readPeerMail(teammateName: string): PeerMailLine[] {
+  const runtimeDir = runtimeDirPath();
+  if (!runtimeDir) return [];
+  const mailDirPath = path.dirname(inboxPath(path.join(runtimeDir, "state.json"), teammateName));
+  let entries: string[] = [];
+  try {
+    entries = fs.readdirSync(mailDirPath).filter((name) => name.startsWith("inbox-") && name.endsWith(".jsonl"));
+  } catch {
+    return [];
+  }
+  const lines: PeerMailLine[] = [];
+  for (const entry of entries) {
+    const recipient = decodeURIComponent(entry.slice("inbox-".length, -".jsonl".length));
+    let raw = "";
+    try {
+      raw = fs.readFileSync(path.join(mailDirPath, entry), "utf-8");
+    } catch {
+      continue;
     }
-    if (spawn.stdout) {
-      lines.push("  --- Worker output ---");
-      lines.push(...spawn.stdout.split("\n"));
+    for (const line of raw.split("\n")) {
+      if (!line.trim()) continue;
+      try {
+        const message = JSON.parse(line) as { id?: string; from?: string; subject?: string; body?: string; timestamp?: number };
+        if (!message.id || !message.from || !message.subject) continue;
+        if (message.from !== teammateName && recipient !== teammateName) continue;
+        lines.push({
+          direction: message.from === teammateName ? "sent" : "received",
+          counterpart: message.from === teammateName ? recipient : message.from,
+          subject: message.subject,
+          body: message.body ?? "",
+          timestamp: message.timestamp ?? 0,
+        });
+      } catch {
+        continue;
+      }
     }
-    if (spawn.stderr) {
-      lines.push("  --- Worker stderr ---");
-      lines.push(...spawn.stderr.split("\n"));
+  }
+  return lines.sort((a, b) => a.timestamp - b.timestamp);
+}
+
+function indent(text: string): string[] {
+  return text.split("\n").map((line) => `  ${line}`);
+}
+
+function displaySource(sourcePath: string): string {
+  const relative = path.relative(process.cwd(), sourcePath);
+  return relative.startsWith("..") ? sourcePath : `./${relative}`;
+}
+
+function buildTeammateDetail(name: string): string[] {
+  const teammate = getTeammate(name);
+  if (!teammate) return ["(teammate removed from the roster)"];
+  const reports = getState().leaderMailbox.filter((message) => message.from === name);
+  const lines: string[] = [
+    `@${teammate.name} (${teammate.agent}) [${teammate.status}]`,
+    "",
+    "== teammate ==",
+    `  Status: ${teammate.status}${teammate.currentTaskId ? ` | Task: ${teammate.currentTaskId}` : ""}`,
+    `  Spawn: ${teammate.pid > 0 ? `pid ${teammate.pid}` : "pid unknown"} | Isolation: ${teammate.isolation}`,
+    `  Created: ${new Date(teammate.createdAt).toLocaleString()}`,
+  ];
+  if (teammate.stoppedAt) lines.push(`  Stopped: ${new Date(teammate.stoppedAt).toLocaleString()}`);
+  if (isWorking(teammate) && teammate.lastOutputAt !== undefined) {
+    const silence = stallSilenceMs(teammate);
+    if (silence !== undefined) {
+      lines.push(`  Last output: ${new Date(teammate.lastOutputAt).toLocaleString()} (${formatSilenceDuration(silence)} ago${stallSuffix(teammate) ? " — stalled" : ""})`);
     }
   }
+  if (teammate.usage) lines.push(`  Usage: ${teammate.usage.totalTokens} tokens | $${teammate.usage.cost.toFixed(4)}`);
+  if (teammate.error) lines.push(`  Error: ${teammate.error}`);
+
+  lines.push("", `== reports to leader (${reports.length}) ==`);
+  if (reports.length === 0) lines.push("  (none)");
+  for (const report of reports) {
+    lines.push(`  -> [${report.subject}] ${new Date(report.timestamp).toLocaleString()}`, ...indent(cap(report.body)), "");
+  }
 
-  if (node.result && node.result !== spawn?.stdout) lines.push(`  Result: ${node.result}`);
-  if (node.errorMessage) lines.push(`  Error: ${node.errorMessage}`);
+  const peer = readPeerMail(name);
+  lines.push(`== peer mail (${peer.length}) ==`);
+  if (peer.length === 0) lines.push("  (none)");
+  for (const mail of peer) {
+    const arrow = mail.direction === "sent" ? `to @${mail.counterpart}` : `from @${mail.counterpart}`;
+    lines.push(`  ${arrow} [${mail.subject}] ${new Date(mail.timestamp).toLocaleString()}`, ...indent(cap(mail.body)), "");
+  }
   return lines;
 }
 
-/** Node detail: node section + reports this node sent to team-leader. */
-function buildNodeDetail(workerKey: string): string[] {
-  const entry = getNodeByWorkerKey(workerKey);
-  if (!entry) return ["(removed)"];
-  const { run, node } = entry;
-  const outgoing = getState().leaderMailbox.filter((message) => message.from === workerKey);
+function buildTaskDetail(taskId: string): string[] {
+  const tasks = listTasks();
+  const task = tasks.find((candidate) => candidate.id === taskId);
+  if (!task) return ["(task not on the board)"];
+  const byId = new Map(tasks.map((candidate) => [candidate.id, candidate]));
+  return [
+    `[${task.id}] ${task.subject}`,
+    "",
+    "== task ==",
+    `  Status: ${task.status}${task.claimedBy ? ` (@${task.claimedBy})` : ""}`,
+    ...(task.description ? [`  Description:`, ...indent(cap(task.description))] : []),
+    ...(task.dependsOn.length > 0
+      ? [`  Depends on: ${task.dependsOn.join(", ")} (${task.dependsOn.every((dep) => byId.get(dep)?.status === "completed") ? "met" : "unmet"})`]
+      : []),
+    `  Verify: ${task.verify ?? "(none)"}`,
+    ...(task.result ? ["  Result:", ...indent(cap(task.result))] : []),
+    ...(task.errorMessage ? ["  Error:", ...indent(cap(task.errorMessage))] : []),
+    `  Created: ${new Date(task.createdAt).toLocaleString()}`,
+    ...(task.completedAt ? [`  Completed: ${new Date(task.completedAt).toLocaleString()}`] : []),
+  ];
+}
 
-  const lines: string[] = [
-    `${node.workerKey} (${node.agent}) [${node.status}] — run ${run.status}`,
+function buildRoleDetail(name: string): string[] {
+  const def = resolveAgent(name);
+  if (!def) return ["(agent definition not found)"];
+  return [
+    `@${def.name} (${def.scope})${def.gitManaged ? " [git-managed]" : " [local]"}`,
     "",
-    "== node ==",
-    ...buildNodeSection(node),
+    "== role ==",
+    `  Source: ${displaySource(def.source)}`,
+    `  Description: ${def.description || "(none)"}`,
+    `  Tools: ${def.tools.join(", ") || "(role defaults)"}`,
+    `  Model: ${def.model ?? "(session default)"}`,
+    `  Verify: ${def.verify ?? "(none)"}`,
+    `  Worktree: ${def.worktree ? "true" : "false"}`,
+    `  Living instances: ${livingTeammates().filter((teammate) => teammate.agent === def.name).length}`,
     "",
-    `== reports to team-leader (${outgoing.length}) ==`,
-    ...(outgoing.length === 0
-      ? ["(none)"]
-      : outgoing.flatMap((m) => {
-          const time = new Date(m.timestamp).toLocaleString();
-          return [
-            `→ [${m.id}] ${m.subject} | ${time}`,
-            m.runId ? `  run ${m.runId}` : "",
-            m.body,
-            "",
-          ];
-        })),
+    "== role prompt ==",
+    ...indent(cap(def.prompt)),
   ];
-  return lines;
 }
 
-/** Full-screen Team Console — owns input via ctx.ui.custom, so ↑/↓ and Enter
- * are safe in here and nothing is intercepted globally. Modes: list / detail. */
+// ── Full-screen console ───────────────────────────────────────────
+
+type ConsolePage = "roster" | "board";
+
+interface RosterRow {
+  key: string;
+  kind: "teammate";
+}
+interface RoleRow {
+  key: string;
+  kind: "role";
+}
+interface BoardRow {
+  key: string;
+  kind: "task";
+}
+type ConsoleRow = RosterRow | RoleRow | BoardRow;
+
+/** SGR mouse-wheel events carry a button code; return signed line delta. */
+function wheelDelta(data: string): number | undefined {
+  const match = /^\x1b\[<(\d+);\d+;\d+[Mm]$/.exec(data);
+  if (!match) return undefined;
+  const button = Number.parseInt(match[1], 10);
+  if ((button & 64) === 0) return undefined;
+  const direction = button & 3;
+  if (direction === 0) return -1;
+  if (direction === 1) return 1;
+  return undefined;
+}
+
+/** Chrome lines around the list viewport: border, header, spacer, footer, border. */
+const LIST_CHROME_LINES = 5;
+
+/** Full-screen Team Console — owns input via ctx.ui.custom. Pages: roster /
+ * board; each row opens a scrolling detail view. */
 export function openTeamConsole(ctx: { ui: ExtensionUIContext }): Promise<void> {
   return ctx.ui.custom<void>((tui, theme, _keybindings, done) => {
+    let page: ConsolePage = "roster";
     let mode: "list" | "detail" = "list";
-    let selected = 0;
+    let selectedRoster = 0;
+    let selectedBoard = 0;
+    let listOffset = 0;
+    let detailKind: ConsoleRow["kind"] = "teammate";
     let detailKey = "";
     let offset = 0;
+    let confirmName: string | undefined;
     let closed = false;
     let renderTimer: ReturnType<typeof setInterval> | undefined;
+
+    // Definitions are reread lazily so mid-session role creation shows up,
+    // but never once per animation frame.
+    let rolesCache: AgentDefinition[] = [];
+    let rolesCacheAt = 0;
+    const ROLES_CACHE_TTL_MS = 2000;
+    const getRoles = (): AgentDefinition[] => {
+      const now = Date.now();
+      if (now - rolesCacheAt > ROLES_CACHE_TTL_MS) {
+        rolesCache = [...discoverAgents().values()].sort((a, b) => a.name.localeCompare(b.name));
+        rolesCacheAt = now;
+      }
+      return rolesCache;
+    };
+
     const requestRender = () => {
       if (!closed) tui.requestRender();
     };
     const startLiveRefresh = () => {
       if (renderTimer) return;
-      renderTimer = setInterval(requestRender, PI_SPINNER_INTERVAL_MS);
+      renderTimer = setInterval(() => {
+        // Redraw only while something can animate (spinner/activity/stall).
+        if (livingTeammates().some(isWorking)) requestRender();
+      }, PI_SPINNER_INTERVAL_MS);
       renderTimer.unref?.();
     };
     const stopLiveRefresh = () => {
@@ -237,9 +339,18 @@ export function openTeamConsole(ctx: { ui: ExtensionUIContext }): Promise<void>
     };
     startLiveRefresh();
 
-    // btw-style callbacks (same accent/muted/dim/border/success/error language as pi-btw-fradser).
     const style = createPiThemeStyle(theme);
 
+    const currentRows = (): ConsoleRow[] =>
+      page === "roster"
+        // The console is the management surface: idle and stopped stay
+        // visible, and persistent agent roles are listed after the session.
+        ? [
+            ...listTeammates().map((t) => ({ key: t.name, kind: "teammate" as const })),
+            ...getRoles().map((def) => ({ key: def.name, kind: "role" as const })),
+          ]
+        : listTasks().map((task) => ({ key: task.id, kind: "task" as const }));
+
     const windowLines = (full: string[], width: number): { lines: string[]; range: string } => {
       const wrapped = wrapConsoleDetail(full, width);
       const viewport = maxConsoleBody(tui.terminal.rows);
@@ -250,44 +361,130 @@ export function openTeamConsole(ctx: { ui: ExtensionUIContext }): Promise<void>
       };
     };
 
+    const headerLine = (): string => {
+      const alive = livingTeammates();
+      const tasks = listTasks();
+      return `team  ${alive.length} alive · ${alive.filter(isWorking).length} working · ${getRoles().length} roles · board ${tasks.filter((task) => task.status === "pending").length}p/${tasks.filter((task) => task.status === "claimed").length}c/${tasks.filter((task) => task.status === "completed").length}d · ${page}`;
+    };
+
+    interface ContentLine {
+      text: string;
+      /** Selectable row index, or -1 for section chrome. */
+      select: number;
+    }
+
+    const teammateRowText = (key: string, selected: boolean): string => {
+      const teammate = getTeammate(key)!;
+      const marker = selected ? style.accent("❯ ") : "  ";
+      const name = theme.bold(theme.fg(colorFor(teammate.name), `@${teammate.name}`));
+      if (isWorking(teammate)) {
+        const prefix = `${marker}${name} `;
+        const width = tui.terminal.columns;
+        const available = Math.max(0, width - prefix.length - PI_SPINNER_FRAMES[spinnerFrame].length - 2);
+        const status = theme.fg("warning", formatTeammateLabel(PI_SPINNER_FRAMES[spinnerFrame], runningTeammateActivity(teammate) + stallSuffix(teammate), available));
+        return `${prefix}${status}`;
+      }
+      if (teammate.status === "idle") {
+        return `${marker}${name} ${style.dim(`○ idle${teammate.currentTaskId ? ` · ${teammate.currentTaskId}` : ""}`)}`;
+      }
+      return `${marker}${name} ${theme.fg("warning", "■ stopped")}`;
+    };
+
+    const roleRowText = (key: string, selected: boolean): string => {
+      const def = getRoles().find((candidate) => candidate.name === key)!;
+      const marker = selected ? style.accent("❯ ") : "  ";
+      const name = theme.bold(theme.fg(colorFor(key), `@${key}`));
+      const live = livingTeammates().filter((teammate) => teammate.agent === key && teammate.status !== "stopped").length;
+      const liveTag = live > 0 ? style.success(`[${live} live]`) : style.dim("[0 live]");
+      return `${marker}${name} ${style.dim(def.scope)} ${style.dim(displaySource(def.source))} ${liveTag}`;
+    };
+
+    const taskRowText = (key: string, selected: boolean): string => {
+      const task = listTasks().find((candidate) => candidate.id === key)!;
+      const marker = selected ? style.accent("❯ ") : "  ";
+      const label = theme.fg(colorFor(key), `[${key}]`);
+      const holder = task.claimedBy ? style.dim(` @${task.claimedBy}`) : "";
+      const statusText = task.status === "completed"
+        ? style.success("✓")
+        : task.status === "claimed"
+          ? theme.fg("warning", "◐ claimed")
+          : style.dim("○ pending");
+      return `${marker}${label} ${statusText} ${theme.fg("customMessageText", task.subject)}${holder}`;
+    };
+
+    const buildContent = (): ContentLine[] => {
+      const rows = currentRows();
+      const lines: ContentLine[] = [];
+      if (page === "board") {
+        if (rows.length === 0) {
+          lines.push({ text: style.dim("The task board is empty. Create tasks with task_create."), select: -1 });
+        }
+        rows.forEach((row, index) => lines.push({ text: taskRowText(row.key, index === currentPageSelection(rows.length)), select: index }));
+        return lines;
+      }
+      const teammates = rows.filter((row): row is RosterRow => row.kind === "teammate");
+      const roles = rows.filter((row): row is RoleRow => row.kind === "role");
+      const selection = currentPageSelection(rows.length);
+      lines.push({ text: style.dim("== teammates (this session) =="), select: -1 });
+      if (teammates.length === 0) {
+        lines.push({ text: style.dim("No teammates this session. Ask the model to spawn one."), select: -1 });
+      }
+      teammates.forEach((row, index) => lines.push({ text: teammateRowText(row.key, index === selection), select: index }));
+      lines.push({ text: "", select: -1 });
+      lines.push({ text: style.dim("== agent roles (persistent definitions) =="), select: -1 });
+      if (roles.length === 0) {
+        lines.push({ text: style.dim("No agent definitions discovered."), select: -1 });
+      }
+      roles.forEach((row, index) => lines.push({ text: roleRowText(row.key, teammates.length + index === selection), select: teammates.length + index }));
+      return lines;
+    };
+
+    const listViewport = (): number => Math.max(1, tui.terminal.rows - LIST_CHROME_LINES);
+
     const renderList = (width: number): string[] => {
-      const rows = buildPanelRows();
-      if (selected >= rows.length) selected = Math.max(0, rows.length - 1);
       const border = style.border("─".repeat(Math.max(1, width)));
-      const lines: string[] = [
+      const content = buildContent();
+      const viewport = listViewport();
+      const selection = currentPageSelection(currentRows().length);
+      const selectedIndex = content.findIndex((line) => line.select === selection);
+      if (selectedIndex >= 0) {
+        if (selectedIndex < listOffset) listOffset = selectedIndex;
+        else if (selectedIndex >= listOffset + viewport) listOffset = selectedIndex - viewport + 1;
+      }
+      listOffset = clampConsoleScroll(listOffset, content.length, viewport);
+      const footer = confirmName
+        ? theme.fg("warning", `Shut down @${confirmName}? Its claimed task returns to the board · y yes / n no`)
+        : style.dim(page === "roster"
+            ? "↑↓ select · enter open · tab board · x shutdown · esc/q close"
+            : "↑↓ select · enter open · tab roster · esc/q close");
+      return [
         border,
-        style.accent(truncateToWidth(`teammate  ${listNodes().filter((n) => n.status === "running").length} working / ${listNodes().length} teammate(s)`, width)),
+        style.accent(truncateToWidth(headerLine(), width)),
+        "",
+        ...content.slice(listOffset, listOffset + viewport)
+          .map((line) => truncateToWidth(line.text, Math.max(10, width - 1))),
         "",
+        truncateToWidth(footer, Math.max(10, width - 1)),
+        border,
       ];
-      for (let i = 0; i < rows.length; i++) {
-        const row = rows[i];
-        const marker = i === selected ? style.accent("❯ ") : "  ";
-        const entry = getNodeByWorkerKey(row.key);
-        if (!entry) continue;
-        const { node } = entry;
-        const color = TEAM_COLORS[hashName(node.workerKey) % TEAM_COLORS.length];
-        const name = theme.bold(theme.fg(color, node.id));
-        const role = style.muted(`(${node.agent})`);
-        const status = node.status === "running"
-          ? theme.fg("warning", runningTeammateLabel(node))
-          : node.status === "completed"
-            ? style.success("✓ completed")
-            : node.status === "failed"
-              ? style.error("✗ failed")
-              : style.dim(`○ ${node.status}`);
-        lines.push(`${marker}${name} ${role} ${status}`);
-      }
-      lines.push("", style.dim("↑↓ select · enter open · esc/q close · x cancel"), border);
-      return lines.map((l) => truncateToWidth(l, Math.max(10, width - 1)));
     };
 
+    const currentPageSelection = (rowCount: number): number => {
+      const selection = page === "roster" ? selectedRoster : selectedBoard;
+      return rowCount === 0 ? 0 : Math.min(selection, rowCount - 1);
+    };
+
+    const detailTitle = (): string =>
+      detailKind === "task" ? `[${detailKey}]` : detailKind === "role" ? `@${detailKey} · role` : `@${detailKey}`;
+
     const renderDetail = (width: number): string[] => {
       const border = style.border("─".repeat(Math.max(1, width)));
-      const detail = windowLines(buildNodeDetail(detailKey), width);
+      const source = detailSource();
+      const detail = windowLines(source, width);
       const footer = style.dim(`  ${detail.range} · ↑↓ scroll · pgup/pgdn page · home/end jump · esc back · q close`);
       const lines = [
         border,
-        style.accent(truncateToWidth(`agent-teams  ${detailKey}`, width)),
+        style.accent(truncateToWidth(`agent-teams  ${detailTitle()}`, width)),
         "",
         ...detail.lines.map((line) => `  ${line}`),
         "",
@@ -297,90 +494,126 @@ export function openTeamConsole(ctx: { ui: ExtensionUIContext }): Promise<void>
       return lines.map((line) => truncateToWidth(line, Math.max(10, width - 1)));
     };
 
+    const detailSource = (): string[] => {
+      if (detailKind === "task") return buildTaskDetail(detailKey);
+      if (detailKind === "role") return buildRoleDetail(detailKey);
+      return buildTeammateDetail(detailKey);
+    };
+
     return {
-      render: (width) =>
-        mode === "list" ? renderList(width) : renderDetail(width),
+      render: (width) => (mode === "list" ? renderList(width) : renderDetail(width)),
       handleInput: (data: string) => {
-        // Detail mode: Esc returns to the list, q closes.
         if (mode !== "list") {
-          if (matchesKey(data, Key.escape)) {
-            mode = "list";
-            offset = 0;
-            return;
-          }
-          if (data === "q" || data === "Q") {
-            closed = true;
-            stopLiveRefresh();
-            done();
-            return;
-          }
-          const detail = wrapConsoleDetail(buildNodeDetail(detailKey), tui.terminal.columns);
-          const viewport = maxConsoleBody(tui.terminal.rows);
-          // Mouse-wheel scrolling (SGR wheel events, same as pi-btw-fradser).
-          const sgrWheel = /^\x1b\[<(\d+);(\d+);(\d+)[Mm]$/.exec(data);
-          if (sgrWheel) {
-            const button = Number.parseInt(sgrWheel[1], 10);
-            if ((button & 64) !== 0) {
-              const direction = button & 3;
-              if (direction === 0) offset = scrollConsoleDetail(offset, -3, detail.length, viewport);
-              else if (direction === 1) offset = scrollConsoleDetail(offset, 3, detail.length, viewport);
-            }
-            return;
+          handleDetailInput(data);
+          return;
+        }
+        if (confirmName) {
+          if (data === "y" || data === "Y") {
+            const name = confirmName;
+            confirmName = undefined;
+            void shutdownFromConsole(ctx, name);
+          } else if (data === "n" || data === "N" || matchesKey(data, Key.escape)) {
+            confirmName = undefined;
+          } else if (data === "q" || data === "Q") {
+            closeConsole(done);
           }
-          if (matchesKey(data, Key.up)) offset = scrollConsoleDetail(offset, -1, detail.length, viewport);
-          else if (matchesKey(data, Key.down)) offset = scrollConsoleDetail(offset, 1, detail.length, viewport);
-          else if (matchesKey(data, Key.pageUp)) offset = scrollConsoleDetail(offset, -Math.max(1, viewport - 1), detail.length, viewport);
-          else if (matchesKey(data, Key.pageDown)) offset = scrollConsoleDetail(offset, Math.max(1, viewport - 1), detail.length, viewport);
-          else if (matchesKey(data, Key.home)) offset = 0;
-          else if (matchesKey(data, Key.end)) offset = clampConsoleScroll(Number.MAX_SAFE_INTEGER, detail.length, viewport);
           return;
         }
-
-        // List mode — the console owns input, so ↑/↓/Enter are safe here.
-        const rows = buildPanelRows();
-        if (matchesKey(data, Key.down)) selected = Math.min(selected + 1, rows.length - 1);
-        if (matchesKey(data, Key.up)) selected = Math.max(selected - 1, 0);
+        const rows = currentRows();
+        if (matchesKey(data, Key.tab)) {
+          page = page === "roster" ? "board" : "roster";
+          listOffset = 0;
+          return;
+        }
+        if (matchesKey(data, Key.down)) bumpSelection(1, rows.length);
+        if (matchesKey(data, Key.up)) bumpSelection(-1, rows.length);
         if (matchesKey(data, Key.enter)) {
-          const row = rows[Math.min(selected, rows.length - 1)];
-          if (row?.key) {
+          const selection = currentPageSelection(rows.length);
+          const row = rows[selection];
+          if (row) {
             mode = "detail";
-            detailKey = row.key;
             offset = 0;
+            detailKind = row.kind;
+            detailKey = row.key;
           }
           return;
         }
-        if (matchesKey(data, Key.escape) || data === "q" || data === "Q") {
-          closed = true;
-          stopLiveRefresh();
-          done();
-          return;
-        }
         if (data === "x" || data === "X") {
-          // Same node-cancel path as teammate_cancel nodeId: SIGTERM→SIGKILL,
-          // dependents cancelled, the rest of the run continues.
-          const row = rows[Math.min(selected, rows.length - 1)];
-          const entry = row?.key ? getNodeByWorkerKey(row.key) : undefined;
-          if (entry && (entry.node.status === "running" || entry.node.status === "pending")) {
-            const runId = entry.run.id;
-            const nodeId = entry.node.id;
-            void cancelNodeAndTerminate(runId, nodeId, { ui: ctx.ui })
-              .then((result) => {
-                if (result.ok) ctx.ui.notify(`Cancelled node [${runId}/${nodeId}] — the rest of the run continues.`, "info");
-                else ctx.ui.notify(result.error, "error");
-              })
-              .catch(() => false);
+          const selection = currentPageSelection(rows.length);
+          const row = rows[selection];
+          if (page === "roster" && row?.kind === "teammate" && getTeammate(row.key)?.status !== "stopped") {
+            confirmName = row.key;
           }
           return;
         }
+        const wheel = wheelDelta(data);
+        if (wheel !== undefined) {
+          scrollList(wheel * 3);
+          return;
+        }
+        if (matchesKey(data, Key.pageUp)) scrollList(-listViewport());
+        else if (matchesKey(data, Key.pageDown)) scrollList(listViewport());
+        else if (matchesKey(data, Key.home)) listOffset = 0;
+        else if (matchesKey(data, Key.end)) listOffset = clampConsoleScroll(Number.MAX_SAFE_INTEGER, buildContent().length, listViewport());
+        else if (matchesKey(data, Key.escape) || data === "q" || data === "Q") closeConsole(done);
       },
-      invalidate: () => {
-        requestRender();
-      },
+      invalidate: () => requestRender(),
       dispose: () => {
         closed = true;
         stopLiveRefresh();
       },
     };
+
+    function closeConsole(doneFn: () => void): void {
+      closed = true;
+      stopLiveRefresh();
+      doneFn();
+    }
+
+    function bumpSelection(delta: number, rowCount: number): void {
+      if (rowCount === 0) return;
+      if (page === "roster") selectedRoster = clampIndex(selectedRoster + delta, rowCount);
+      else selectedBoard = clampIndex(selectedBoard + delta, rowCount);
+    }
+
+    function scrollList(delta: number): void {
+      listOffset = clampConsoleScroll(listOffset + delta, buildContent().length, listViewport());
+    }
+
+    function handleDetailInput(data: string): void {
+      const source = detailSource();
+      const viewport = maxConsoleBody(tui.terminal.rows);
+      if (matchesKey(data, Key.escape)) {
+        mode = "list";
+        offset = 0;
+        return;
+      }
+      if (data === "q" || data === "Q") {
+        closeConsole(done);
+        return;
+      }
+      const total = wrapConsoleDetail(source, tui.terminal.columns).length;
+      const wheel = wheelDelta(data);
+      if (wheel !== undefined) {
+        offset = scrollConsoleDetail(offset, wheel * 3, total, viewport);
+        return;
+      }
+      if (matchesKey(data, Key.up)) offset = scrollConsoleDetail(offset, -1, total, viewport);
+      else if (matchesKey(data, Key.down)) offset = scrollConsoleDetail(offset, 1, total, viewport);
+      else if (matchesKey(data, Key.pageUp)) offset = scrollConsoleDetail(offset, -Math.max(1, viewport - 1), total, viewport);
+      else if (matchesKey(data, Key.pageDown)) offset = scrollConsoleDetail(offset, Math.max(1, viewport - 1), total, viewport);
+      else if (matchesKey(data, Key.home)) offset = 0;
+      else if (matchesKey(data, Key.end)) offset = clampConsoleScroll(Number.MAX_SAFE_INTEGER, total, viewport);
+    }
   });
 }
 
+async function shutdownFromConsole(ctx: { ui: ExtensionUIContext }, name: string): Promise<void> {
+  const result = await shutdownTeammate(name);
+  if (result.ok) ctx.ui.notify(result.body, "info");
+  else ctx.ui.notify(result.error, "error");
+}
+
+function clampIndex(index: number, rowCount: number): number {
+  return Math.max(0, Math.min(rowCount - 1, index));
+}