pi-crew 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-crew",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Pi extension for coordinated AI teams, workflows, worktrees, and async task orchestration",
   "author": "baphuongna",
   "license": "MIT",

package/src/extension/help.ts

@@ -18,6 +18,8 @@ export function piTeamsHelp(): string {
 		"- /team-worktrees <runId>",
 		"- /team-api <runId> <operation> [taskId=<taskId>] [body=<message>]",
 		"- /team-dashboard",
+		"- /team-transcript <runId> [taskId]",
+		"- /team-result <runId> [taskId]",
 		"- /team-manager",
 		"",
 		"Maintenance:",

package/src/extension/register.ts

@@ -10,6 +10,10 @@ import { handleTeamTool, type TeamToolDetails } from "./team-tool.ts";
 import { listRuns } from "./run-index.ts";
 import { RunDashboard, type RunDashboardSelection } from "../ui/run-dashboard.ts";
 import { registerPiCrewRpc, type PiCrewRpcHandle } from "./cross-extension-rpc.ts";
+import { stopCrewWidget, updateCrewWidget, type CrewWidgetState } from "../ui/crew-widget.ts";
+import { DurableTextViewer, DurableTranscriptViewer } from "../ui/transcript-viewer.ts";
+import { loadRunManifestById } from "../state/state-store.ts";
+import { readCrewAgents } from "../runtime/crew-agent-records.ts";
 
 function parseRunArgs(args: string): TeamToolParamsValue {
 	const tokens = args.match(/"[^"]*"|'[^']*'|\S+/g)?.map((token) => token.replace(/^['"]|['"]$/g, "")) ?? [];
@@ -45,6 +49,36 @@ function parseScalar(raw: string): unknown {
 	return raw;
 }
 
+async function selectAgentTask(ctx: ExtensionCommandContext, runId: string | undefined, taskId?: string): Promise<{ runId: string; taskId?: string } | undefined> {
+	if (!runId) return undefined;
+	if (taskId) return { runId, taskId };
+	const loaded = loadRunManifestById(ctx.cwd, runId);
+	if (!loaded) return { runId };
+	const agents = readCrewAgents(loaded.manifest);
+	if (ctx.hasUI && agents.length > 1) {
+		const choice = await ctx.ui.select("Select pi-crew agent", agents.map((agent) => `${agent.taskId} ${agent.role}→${agent.agent} [${agent.status}]`));
+		return { runId, taskId: choice?.split(" ")[0] };
+	}
+	return { runId, taskId: agents[0]?.taskId };
+}
+
+async function openTranscriptViewer(ctx: ExtensionCommandContext, runId: string | undefined, taskId?: string): Promise<boolean> {
+	const selected = await selectAgentTask(ctx, runId, taskId);
+	if (!selected) return false;
+	// eslint-disable-next-line no-param-reassign
+	runId = selected.runId;
+	// eslint-disable-next-line no-param-reassign
+	taskId = selected.taskId;
+	if (!runId || !ctx.hasUI) return false;
+	const loaded = loadRunManifestById(ctx.cwd, runId);
+	if (!loaded) return false;
+	await ctx.ui.custom<undefined>((_tui, theme, _keybindings, done) => new DurableTranscriptViewer(loaded.manifest, theme, done, taskId), {
+		overlay: true,
+		overlayOptions: { width: "90%", maxHeight: "85%", anchor: "center" },
+	});
+	return true;
+}
+
 function pushUnset(config: Record<string, unknown>, key: string): void {
 	const current = Array.isArray(config.unset) ? config.unset : [];
 	current.push(key);
@@ -67,6 +101,7 @@ export function registerPiTeams(pi: ExtensionAPI): void {
 	const notifierState: AsyncNotifierState = { seenFinishedRunIds: new Set() };
 	let currentCtx: ExtensionContext | undefined;
 	let rpcHandle: PiCrewRpcHandle | undefined;
+	const widgetState: CrewWidgetState = { frame: 0 };
 	registerAutonomousPolicy(pi);
 	rpcHandle = registerPiCrewRpc((pi as unknown as { events?: Parameters<typeof registerPiCrewRpc>[0] }).events, () => currentCtx);
 
@@ -75,9 +110,13 @@ export function registerPiTeams(pi: ExtensionAPI): void {
 		notifyActiveRuns(ctx);
 		const loadedConfig = loadConfig(ctx.cwd);
 		startAsyncRunNotifier(ctx, notifierState, loadedConfig.config.notifierIntervalMs ?? 5000);
+		updateCrewWidget(ctx, widgetState);
+		widgetState.interval = setInterval(() => { if (currentCtx) updateCrewWidget(currentCtx, widgetState); }, 1000);
+		widgetState.interval.unref?.();
 	});
 	pi.on("session_shutdown", () => {
 		stopAsyncRunNotifier(notifierState);
+		stopCrewWidget(currentCtx, widgetState);
 		currentCtx = undefined;
 		rpcHandle?.unsubscribe();
 		rpcHandle = undefined;
@@ -90,7 +129,9 @@ export function registerPiTeams(pi: ExtensionAPI): void {
 		promptSnippet: "Use the team tool proactively for coordinated multi-agent work. If unsure, call { action: 'recommend', goal } first, then run or plan with the suggested team/workflow.",
 		parameters: TeamToolParams as never,
 		async execute(_id, params, _signal, _onUpdate, ctx) {
-			return await handleTeamTool(params as TeamToolParamsValue, ctx);
+			const output = await handleTeamTool(params as TeamToolParamsValue, ctx);
+			updateCrewWidget(ctx, widgetState);
+			return output;
 		},
 	};
 
@@ -250,6 +291,33 @@ export function registerPiTeams(pi: ExtensionAPI): void {
 		handler: handleTeamManagerCommand,
 	});
 
+	pi.registerCommand("team-result", {
+		description: "Open a pi-crew agent result viewer: <runId> [taskId]",
+		handler: async (args: string, ctx: ExtensionCommandContext) => {
+			const [runId, rawTaskId] = args.trim().split(/\s+/).filter(Boolean);
+			const selected = await selectAgentTask(ctx, runId, rawTaskId);
+			const loaded = selected ? loadRunManifestById(ctx.cwd, selected.runId) : undefined;
+			if (ctx.hasUI && loaded) {
+				const agent = readCrewAgents(loaded.manifest).find((item) => item.taskId === selected?.taskId || item.id === selected?.taskId) ?? readCrewAgents(loaded.manifest)[0];
+				const text = agent?.resultArtifactPath ? commandText(await handleTeamTool({ action: "api", runId: selected!.runId, config: { operation: "read-agent-output", agentId: agent.taskId, maxBytes: 64_000 } }, ctx)) : "(no result)";
+				await ctx.ui.custom<undefined>((_tui, theme, _keybindings, done) => new DurableTextViewer("pi-crew result", `${selected!.runId}:${agent?.taskId ?? "unknown"}`, text.split(/\r?\n/), theme, done), { overlay: true, overlayOptions: { width: "90%", maxHeight: "85%", anchor: "center" } });
+				return;
+			}
+			const result = await handleTeamTool({ action: "api", runId, config: { operation: "read-agent-output", agentId: rawTaskId, maxBytes: 64_000 } }, ctx);
+			await notifyCommandResult(ctx, commandText(result));
+		},
+	});
+
+	pi.registerCommand("team-transcript", {
+		description: "Open a pi-crew transcript viewer: <runId> [taskId]",
+		handler: async (args: string, ctx: ExtensionCommandContext) => {
+			const [runId, taskId] = args.trim().split(/\s+/).filter(Boolean);
+			if (await openTranscriptViewer(ctx, runId, taskId)) return;
+			const result = await handleTeamTool({ action: "api", runId, config: { operation: "read-agent-transcript", agentId: taskId } }, ctx);
+			await notifyCommandResult(ctx, commandText(result));
+		},
+	});
+
 	pi.registerCommand("team-dashboard", {
 		description: "Open a pi-crew run dashboard overlay",
 		handler: async (_args: string, ctx: ExtensionCommandContext) => {
@@ -261,6 +329,7 @@ export function registerPiTeams(pi: ExtensionAPI): void {
 				});
 				if (!selection) return;
 				if (selection.action === "reload") continue;
+				if (selection.action === "agent-transcript" && await openTranscriptViewer(ctx, selection.runId)) continue;
 				const result = selection.action === "api"
 					? await handleTeamTool({ action: "api", runId: selection.runId, config: { operation: "read-manifest" } }, ctx)
 					: selection.action === "agents"

package/src/runtime/agent-observability.ts

@@ -3,6 +3,16 @@ import type { TeamRunManifest } from "../state/types.ts";
 import { agentOutputPath, readCrewAgents } from "./crew-agent-records.ts";
 import type { CrewAgentRecord } from "./crew-agent-runtime.ts";
 
+const TOOL_LABELS: Record<string, string> = {
+	read: "reading",
+	bash: "running command",
+	edit: "editing",
+	write: "writing",
+	grep: "searching",
+	find: "finding files",
+	ls: "listing",
+};
+
 export interface TextTailResult {
 	path: string;
 	text: string;
@@ -24,14 +34,29 @@ export function readTextTail(filePath: string, maxBytes = 64_000): TextTailResul
 	}
 }
 
+function compactDuration(ms: number | undefined): string | undefined {
+	if (ms === undefined || !Number.isFinite(ms)) return undefined;
+	if (ms < 1000) return `${Math.round(ms)}ms`;
+	if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+	return `${Math.floor(ms / 60_000)}m${Math.floor((ms % 60_000) / 1000)}s`;
+}
+
+function ageBetween(start: string | undefined, end: string | undefined): string | undefined {
+	if (!start) return undefined;
+	const stop = end ? new Date(end).getTime() : Date.now();
+	const ms = Math.max(0, stop - new Date(start).getTime());
+	return compactDuration(ms);
+}
+
 function activityText(agent: CrewAgentRecord): string {
 	const parts: string[] = [];
 	if (agent.progress?.activityState) parts.push(agent.progress.activityState);
-	if (agent.progress?.currentTool) parts.push(`tool=${agent.progress.currentTool}`);
+	if (agent.progress?.currentTool) parts.push(TOOL_LABELS[agent.progress.currentTool] ?? `tool=${agent.progress.currentTool}`);
 	if (agent.toolUses !== undefined) parts.push(`tools=${agent.toolUses}`);
 	if (agent.progress?.tokens !== undefined) parts.push(`tokens=${agent.progress.tokens}`);
 	if (agent.progress?.turns !== undefined) parts.push(`turns=${agent.progress.turns}`);
-	if (agent.progress?.durationMs !== undefined) parts.push(`durationMs=${agent.progress.durationMs}`);
+	const duration = compactDuration(agent.progress?.durationMs) ?? ageBetween(agent.startedAt, agent.completedAt);
+	if (duration) parts.push(duration);
 	if (agent.progress?.failedTool) parts.push(`failedTool=${agent.progress.failedTool}`);
 	if (agent.progress?.recentOutput?.length) parts.push(`last=${agent.progress.recentOutput.at(-1)}`);
 	return parts.join(" ") || "idle";
@@ -56,7 +81,7 @@ function outputWarning(agent: CrewAgentRecord): string {
 }
 
 function agentLine(agent: CrewAgentRecord): string {
-	return `- ${statusGlyph(agent.status)} ${agent.taskId} [${agent.status}] ${agent.role}->${agent.agent} runtime=${agent.runtime} ${activityText(agent)}${outputWarning(agent)}${agent.error ? ` error=${agent.error}` : ""}`;
+	return `- ${statusGlyph(agent.status)} ${agent.taskId} ${agent.role} → ${agent.agent} · ${agent.status} · ${agent.runtime} · ${activityText(agent)}${outputWarning(agent)}${agent.error ? ` · error=${agent.error}` : ""}`;
 }
 
 export function buildAgentDashboard(manifest: TeamRunManifest): { text: string; groups: Record<string, CrewAgentRecord[]> } {
@@ -68,7 +93,7 @@ export function buildAgentDashboard(manifest: TeamRunManifest): { text: string;
 	};
 	const lines = [
 		`Crew agents for ${manifest.runId}`,
-		`Run status: ${manifest.status}`,
+		`Run: ${manifest.status} · ${manifest.team}/${manifest.workflow ?? "none"} · agents=${agents.length}`,
 		`Counts: running=${groups.running.length}, queued=${groups.queued.length}, recent=${groups.recent.length}`,
 		"",
 		"## Running",

package/src/ui/crew-widget.ts

@@ -0,0 +1,113 @@
+import type { ExtensionContext } from "@mariozechner/pi-coding-agent";
+import { listRuns } from "../extension/run-index.ts";
+import { isActiveRunStatus } from "../runtime/process-status.ts";
+import { readCrewAgents } from "../runtime/crew-agent-records.ts";
+import type { CrewAgentRecord } from "../runtime/crew-agent-runtime.ts";
+import type { TeamRunManifest } from "../state/types.ts";
+
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const TOOL_LABELS: Record<string, string> = {
+	read: "reading",
+	bash: "running command",
+	edit: "editing",
+	write: "writing",
+	grep: "searching",
+	find: "finding files",
+	ls: "listing",
+};
+
+export interface CrewWidgetState {
+	frame: number;
+	interval?: ReturnType<typeof setInterval>;
+}
+
+function elapsed(iso: string | undefined, now = Date.now()): string | undefined {
+	if (!iso) return undefined;
+	const ms = Math.max(0, now - new Date(iso).getTime());
+	if (!Number.isFinite(ms)) return undefined;
+	if (ms < 1000) return "now";
+	if (ms < 60_000) return `${Math.floor(ms / 1000)}s`;
+	if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m`;
+	return `${Math.floor(ms / 3_600_000)}h`;
+}
+
+function glyph(status: string, runningGlyph: string): string {
+	if (status === "running") return runningGlyph;
+	if (status === "queued") return "◦";
+	if (status === "completed") return "✓";
+	if (status === "failed") return "✗";
+	if (status === "cancelled" || status === "stopped") return "■";
+	return "·";
+}
+
+function agentActivity(agent: CrewAgentRecord): string {
+	if (agent.progress?.currentTool) return `${TOOL_LABELS[agent.progress.currentTool] ?? agent.progress.currentTool}…`;
+	const recent = agent.progress?.recentOutput?.at(-1);
+	if (recent) return recent.replace(/\s+/g, " ").trim();
+	if (agent.progress?.activityState === "needs_attention") return "needs attention";
+	if (agent.status === "queued") return "queued…";
+	if (agent.status === "running") return "thinking…";
+	if (agent.status === "failed") return agent.error ?? "failed";
+	return "done";
+}
+
+function agentStats(agent: CrewAgentRecord): string {
+	const parts: string[] = [];
+	if (agent.toolUses) parts.push(`${agent.toolUses} tools`);
+	if (agent.progress?.tokens) parts.push(`${agent.progress.tokens} tok`);
+	if (agent.progress?.turns) parts.push(`⟳${agent.progress.turns}`);
+	const age = elapsed(agent.completedAt ?? agent.startedAt);
+	if (age) parts.push(agent.completedAt ? age : `${age} ago`);
+	return parts.join(" · ");
+}
+
+function runStep(run: TeamRunManifest, agents: CrewAgentRecord[]): string {
+	const running = agents.find((agent) => agent.status === "running");
+	if (running) return running.taskId;
+	const queued = agents.find((agent) => agent.status === "queued");
+	if (queued) return queued.taskId;
+	return run.status;
+}
+
+export function buildCrewWidgetLines(cwd: string, frame = 0, maxLines = 8): string[] {
+	const runs = listRuns(cwd).slice(0, 20);
+	const activeRuns = runs.filter((run) => isActiveRunStatus(run.status));
+	const recentRuns = runs.filter((run) => !isActiveRunStatus(run.status)).slice(0, 3);
+	const shownRuns = [...activeRuns, ...recentRuns];
+	if (!shownRuns.length) return [];
+	const runningGlyph = SPINNER[frame % SPINNER.length] ?? "⠋";
+	const lines: string[] = [];
+	const activeCount = activeRuns.length;
+	lines.push(`${activeCount ? "●" : "○"} pi-crew · active=${activeCount} recent=${recentRuns.length} · /team-dashboard`);
+	for (const run of shownRuns) {
+		let agents: CrewAgentRecord[] = [];
+		try { agents = readCrewAgents(run); } catch { agents = []; }
+		const counts = new Map<string, number>();
+		for (const agent of agents) counts.set(agent.status, (counts.get(agent.status) ?? 0) + 1);
+		const countText = [...counts.entries()].map(([status, count]) => `${status}:${count}`).join(" ") || run.status;
+		lines.push(`${glyph(run.status, runningGlyph)} ${run.runId.slice(-8)} ${run.team}/${run.workflow ?? "none"} · ${runStep(run, agents)} · ${countText}`);
+		for (const agent of agents.filter((item) => item.status === "running" || item.status === "queued").slice(0, 2)) {
+			const stats = agentStats(agent);
+			lines.push(`  ${glyph(agent.status, runningGlyph)} ${agent.taskId} ${agent.role}→${agent.agent} · ${agentActivity(agent)}${stats ? ` · ${stats}` : ""}`);
+		}
+		if (lines.length >= maxLines) break;
+	}
+	return lines.slice(0, maxLines);
+}
+
+export function updateCrewWidget(ctx: Pick<ExtensionContext, "cwd" | "hasUI" | "ui">, state: CrewWidgetState): void {
+	if (!ctx.hasUI) return;
+	state.frame += 1;
+	const lines = buildCrewWidgetLines(ctx.cwd, state.frame);
+	ctx.ui.setStatus("pi-crew", lines.length ? lines[0] : undefined);
+	ctx.ui.setWidget("pi-crew", lines.length ? lines : undefined, { placement: "aboveEditor" });
+}
+
+export function stopCrewWidget(ctx: Pick<ExtensionContext, "hasUI" | "ui"> | undefined, state: CrewWidgetState): void {
+	if (state.interval) clearInterval(state.interval);
+	state.interval = undefined;
+	if (ctx?.hasUI) {
+		ctx.ui.setStatus("pi-crew", undefined);
+		ctx.ui.setWidget("pi-crew", undefined, { placement: "aboveEditor" });
+	}
+}

package/src/ui/run-dashboard.ts

@@ -2,6 +2,7 @@ import * as fs from "node:fs";
 import type { TeamRunManifest } from "../state/types.ts";
 import { readCrewAgents } from "../runtime/crew-agent-records.ts";
 import type { CrewAgentRecord } from "../runtime/crew-agent-runtime.ts";
+import { isActiveRunStatus } from "../runtime/process-status.ts";
 
 interface DashboardComponent {
 	invalidate(): void;
@@ -68,6 +69,16 @@ function readProgressPreview(run: TeamRunManifest, maxLines = 5): string[] {
 	}
 }
 
+function formatAge(iso: string | undefined): string | undefined {
+	if (!iso) return undefined;
+	const ms = Math.max(0, Date.now() - new Date(iso).getTime());
+	if (!Number.isFinite(ms)) return undefined;
+	if (ms < 1000) return "now";
+	if (ms < 60_000) return `${Math.floor(ms / 1000)}s`;
+	if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m`;
+	return `${Math.floor(ms / 3_600_000)}h`;
+}
+
 function agentPreviewLine(agent: CrewAgentRecord): string {
 	const stats = [
 		agent.progress?.activityState,
@@ -76,6 +87,7 @@ function agentPreviewLine(agent: CrewAgentRecord): string {
 		agent.progress?.tokens !== undefined ? `${agent.progress.tokens} tok` : undefined,
 		agent.progress?.turns !== undefined ? `${agent.progress.turns} turns` : undefined,
 		agent.progress?.failedTool ? `failedTool=${agent.progress.failedTool}` : undefined,
+		agent.startedAt ? `age=${formatAge(agent.completedAt ?? agent.startedAt)}` : undefined,
 	].filter((part): part is string => Boolean(part));
 	const recent = agent.progress?.recentOutput?.at(-1);
 	return `Agent: ${statusIcon(agent.status)} ${agent.taskId} ${agent.role}->${agent.agent}${stats.length ? ` · ${stats.join(" · ")}` : ""}${recent ? ` ⎿ ${recent}` : ""}`;
@@ -92,6 +104,29 @@ function readAgentPreview(run: TeamRunManifest, maxLines = 5): string[] {
 	}
 }
 
+function runLabel(run: TeamRunManifest, selected: boolean): string {
+	let agents: CrewAgentRecord[] = [];
+	try { agents = readCrewAgents(run); } catch { agents = []; }
+	const running = agents.find((agent) => agent.status === "running");
+	const queued = agents.find((agent) => agent.status === "queued");
+	const step = running ? `step ${running.taskId}` : queued ? `queued ${queued.taskId}` : `agents ${agents.length}`;
+	const marker = selected ? "›" : " ";
+	return `${marker} ${statusIcon(run.status)} ${run.runId.slice(-8)} ${run.status} | ${run.team}/${run.workflow ?? "none"} | ${step} | ${run.goal}`;
+}
+
+function groupedRuns(runs: TeamRunManifest[]): Array<{ label: string; run?: TeamRunManifest }> {
+	const active = runs.filter((run) => isActiveRunStatus(run.status));
+	const recent = runs.filter((run) => !isActiveRunStatus(run.status));
+	const rows: Array<{ label: string; run?: TeamRunManifest }> = [];
+	if (active.length) rows.push({ label: "Active" }, ...active.map((run) => ({ label: run.runId, run })));
+	if (recent.length) rows.push({ label: "Recent" }, ...recent.map((run) => ({ label: run.runId, run })));
+	return rows;
+}
+
+function selectedRunFromGrouped(runs: TeamRunManifest[], selected: number): TeamRunManifest | undefined {
+	return groupedRuns(runs).filter((row) => row.run)[selected]?.run;
+}
+
 function countByStatus(runs: TeamRunManifest[]): string {
 	const counts = new Map<string, number>();
 	for (const run of runs) counts.set(run.status, (counts.get(run.status) ?? 0) + 1);
@@ -124,13 +159,17 @@ export class RunDashboard implements DashboardComponent {
 		if (this.runs.length === 0) {
 			lines.push(`│ ${padVisible(truncate("No runs found.", innerWidth - 1), innerWidth - 1)}│`);
 		} else {
-			for (let i = 0; i < Math.min(this.runs.length, 10); i++) {
-				const run = this.runs[i]!;
-				const marker = i === this.selected ? "›" : " ";
-				const text = `${marker} ${statusIcon(run.status)} ${run.runId} ${run.status} ${run.team}/${run.workflow ?? "none"} ${run.goal}`;
-				lines.push(`│ ${padVisible(truncate(text, innerWidth - 1), innerWidth - 1)}│`);
+			const rows = groupedRuns(this.runs).slice(0, 16);
+			const runRows = rows.filter((row) => row.run);
+			for (const row of rows) {
+				if (!row.run) {
+					lines.push(`│ ${padVisible(truncate(row.label, innerWidth - 1), innerWidth - 1)}│`);
+					continue;
+				}
+				const index = runRows.findIndex((candidate) => candidate.run?.runId === row.run?.runId);
+				lines.push(`│ ${padVisible(truncate(runLabel(row.run, index === this.selected), innerWidth - 1), innerWidth - 1)}│`);
 			}
-			const selectedRun = this.runs[this.selected];
+			const selectedRun = selectedRunFromGrouped(this.runs, this.selected);
 			if (selectedRun) {
 				lines.push(`├${"─".repeat(borderWidth)}┤`);
 				const details = [
@@ -157,47 +196,47 @@ export class RunDashboard implements DashboardComponent {
 			return;
 		}
 		if (data === "\r" || data === "\n" || data === "s") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "status" } : undefined);
 			return;
 		}
 		if (data === "u") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "summary" } : undefined);
 			return;
 		}
 		if (data === "a") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "artifacts" } : undefined);
 			return;
 		}
 		if (data === "i") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "api" } : undefined);
 			return;
 		}
 		if (data === "d") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "agents" } : undefined);
 			return;
 		}
 		if (data === "e") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "agent-events" } : undefined);
 			return;
 		}
 		if (data === "o") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "agent-output" } : undefined);
 			return;
 		}
 		if (data === "v") {
-			const runId = this.runs[this.selected]?.runId;
+			const runId = selectedRunFromGrouped(this.runs, this.selected)?.runId;
 			this.done(runId ? { runId, action: "agent-transcript" } : undefined);
 			return;
 		}
 		if (data === "r") {
-			this.done({ runId: this.runs[this.selected]?.runId ?? "", action: "reload" });
+			this.done({ runId: selectedRunFromGrouped(this.runs, this.selected)?.runId ?? "", action: "reload" });
 			return;
 		}
 		if (data === "p") {
@@ -209,7 +248,8 @@ export class RunDashboard implements DashboardComponent {
 			return;
 		}
 		if (data === "j" || data === "\u001b[B") {
-			this.selected = Math.min(Math.max(0, this.runs.length - 1), this.selected + 1);
+			const selectableCount = groupedRuns(this.runs).filter((row) => row.run).length;
+			this.selected = Math.min(Math.max(0, selectableCount - 1), this.selected + 1);
 		}
 	}
 }

package/src/ui/transcript-viewer.ts

@@ -0,0 +1,204 @@
+import * as fs from "node:fs";
+type Component = { invalidate(): void; render(width: number): string[]; handleInput(data: string): void };
+type TranscriptTheme = { fg?: (color: string, text: string) => string; bold?: (text: string) => string };
+import type { TeamRunManifest } from "../state/types.ts";
+import { agentOutputPath, readCrewAgents } from "../runtime/crew-agent-records.ts";
+
+function visibleWidth(text: string): number {
+	return text.replace(/\u001b\[[0-?]*[ -/]*[@-~]/g, "").length;
+}
+
+function truncate(text: string, width: number): string {
+	if (width <= 0) return "";
+	if (visibleWidth(text) <= width) return text;
+	return width <= 1 ? "…" : `${text.slice(0, Math.max(0, width - 1))}…`;
+}
+
+function wrap(text: string, width: number): string[] {
+	const source = text.split(/\r?\n/);
+	const lines: string[] = [];
+	for (const raw of source) {
+		const line = raw || " ";
+		if (line.length <= width) {
+			lines.push(line);
+			continue;
+		}
+		for (let index = 0; index < line.length; index += width) lines.push(line.slice(index, index + width));
+	}
+	return lines;
+}
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+	return value && typeof value === "object" && !Array.isArray(value) ? value as Record<string, unknown> : undefined;
+}
+
+function textFromContent(content: unknown): string {
+	if (typeof content === "string") return content;
+	if (!Array.isArray(content)) return "";
+	return content.map((part) => {
+		const obj = asRecord(part);
+		if (!obj) return "";
+		if (typeof obj.text === "string") return obj.text;
+		if (typeof obj.content === "string") return obj.content;
+		if (typeof obj.name === "string") return `[tool:${obj.name}]`;
+		return "";
+	}).filter(Boolean).join("\n");
+}
+
+export function formatTranscriptEvent(event: unknown): string[] {
+	const obj = asRecord(event);
+	if (!obj) return [String(event)];
+	const type = typeof obj.type === "string" ? obj.type : undefined;
+	const toolName = typeof obj.toolName === "string" ? obj.toolName : typeof obj.name === "string" ? obj.name : undefined;
+	if (type && /tool/i.test(type)) {
+		const text = textFromContent(obj.content) || (typeof obj.text === "string" ? obj.text : typeof obj.result === "string" ? obj.result : "");
+		return [`[tool${toolName ? `:${toolName}` : ""} ${type}]: ${text.trim() || "(no output)"}`];
+	}
+	const message = asRecord(obj.message);
+	if (message) {
+		const role = typeof message.role === "string" ? message.role : "message";
+		const text = textFromContent(message.content);
+		if (text.trim()) return [`[${role}]: ${text.trim()}`];
+	}
+	if (type) {
+		const text = textFromContent(obj.content) || (typeof obj.text === "string" ? obj.text : "");
+		return text.trim() ? [`[${type}]: ${text.trim()}`] : [`[${type}]`];
+	}
+	return [JSON.stringify(event)];
+}
+
+export function formatTranscriptText(text: string): string[] {
+	const lines: string[] = [];
+	for (const raw of text.split(/\r?\n/).filter(Boolean)) {
+		try {
+			lines.push(...formatTranscriptEvent(JSON.parse(raw)));
+		} catch {
+			lines.push(raw);
+		}
+	}
+	return lines.length ? lines : ["(no transcript content)"];
+}
+
+export function readRunTranscript(manifest: TeamRunManifest, taskId?: string): { title: string; path: string; lines: string[] } {
+	const agents = readCrewAgents(manifest);
+	const agent = taskId ? agents.find((item) => item.taskId === taskId || item.id === taskId) : agents.find((item) => item.transcriptPath) ?? agents[0];
+	const selectedTaskId = agent?.taskId ?? taskId ?? "unknown";
+	const transcriptPath = agent?.transcriptPath && fs.existsSync(agent.transcriptPath) ? agent.transcriptPath : agentOutputPath(manifest, selectedTaskId);
+	const text = fs.existsSync(transcriptPath) ? fs.readFileSync(transcriptPath, "utf-8") : "";
+	return { title: `${manifest.runId}:${selectedTaskId}`, path: transcriptPath, lines: formatTranscriptText(text) };
+}
+
+export class DurableTextViewer implements Component {
+	private scroll = 0;
+	private lastHeight = 10;
+	private title: string;
+	private subtitle: string;
+	private lines: string[];
+	private theme: unknown;
+	private done: (result: undefined) => void;
+
+	constructor(title: string, subtitle: string, lines: string[], theme: unknown, done: (result: undefined) => void) {
+		this.title = title;
+		this.subtitle = subtitle;
+		this.lines = lines.length ? lines : ["(empty)"];
+		this.theme = theme;
+		this.done = done;
+	}
+
+	invalidate(): void {}
+
+	handleInput(data: string): void {
+		if (data === "q" || data === "\u001b") {
+			this.done(undefined);
+			return;
+		}
+		const maxScroll = Math.max(0, this.lines.length - this.lastHeight);
+		if (data === "k" || data === "\u001b[A") this.scroll = Math.max(0, this.scroll - 1);
+		else if (data === "j" || data === "\u001b[B") this.scroll = Math.min(maxScroll, this.scroll + 1);
+		else if (data === "g") this.scroll = 0;
+		else if (data === "G") this.scroll = maxScroll;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme as TranscriptTheme;
+		const fg = th.fg?.bind(th) ?? ((_color: string, text: string) => text);
+		const bold = th.bold?.bind(th) ?? ((text: string) => text);
+		const inner = Math.max(20, width - 4);
+		this.lastHeight = 16;
+		const body = this.lines.flatMap((line) => wrap(line, inner));
+		const maxScroll = Math.max(0, body.length - this.lastHeight);
+		this.scroll = Math.min(this.scroll, maxScroll);
+		const visible = body.slice(this.scroll, this.scroll + this.lastHeight);
+		const pad = (text: string) => `${text}${" ".repeat(Math.max(0, inner - visibleWidth(text)))}`;
+		const row = (text: string) => `${fg("border", "│")} ${truncate(pad(text), inner)} ${fg("border", "│")}`;
+		return [
+			fg("border", `╭${"─".repeat(inner + 2)}╮`),
+			row(`${bold(this.title)} ${fg("dim", this.subtitle)}`),
+			row(fg("dim", "j/k scroll · g/G top/bottom · q close")),
+			fg("border", `├${"─".repeat(inner + 2)}┤`),
+			...visible.map(row),
+			fg("border", `├${"─".repeat(inner + 2)}┤`),
+			row(fg("dim", `${body.length} lines · ${body.length ? Math.round(((this.scroll + visible.length) / body.length) * 100) : 100}%`)),
+			fg("border", `╰${"─".repeat(inner + 2)}╯`),
+		];
+	}
+}
+
+export class DurableTranscriptViewer implements Component {
+	private scroll = 0;
+	private lastHeight = 10;
+	private manifest: TeamRunManifest;
+	private theme: unknown;
+	private done: (result: undefined) => void;
+	private taskId?: string;
+
+	constructor(manifest: TeamRunManifest, theme: unknown, done: (result: undefined) => void, taskId?: string) {
+		this.manifest = manifest;
+		this.theme = theme;
+		this.done = done;
+		this.taskId = taskId;
+	}
+
+	invalidate(): void {}
+
+	handleInput(data: string): void {
+		if (data === "q" || data === "\u001b") {
+			this.done(undefined);
+			return;
+		}
+		const content = readRunTranscript(this.manifest, this.taskId).lines;
+		const maxScroll = Math.max(0, content.length - this.lastHeight);
+		if (data === "k" || data === "\u001b[A") this.scroll = Math.max(0, this.scroll - 1);
+		else if (data === "j" || data === "\u001b[B") this.scroll = Math.min(maxScroll, this.scroll + 1);
+		else if (data === "g") this.scroll = 0;
+		else if (data === "G") this.scroll = maxScroll;
+	}
+
+	render(width: number): string[] {
+		const th = this.theme as TranscriptTheme;
+		const fg = th.fg?.bind(th) ?? ((_color: string, text: string) => text);
+		const bold = th.bold?.bind(th) ?? ((text: string) => text);
+		const inner = Math.max(20, width - 4);
+		const data = readRunTranscript(this.manifest, this.taskId);
+		const body = data.lines.flatMap((line) => wrap(line, inner));
+		this.lastHeight = 16;
+		const maxScroll = Math.max(0, body.length - this.lastHeight);
+		this.scroll = Math.min(this.scroll, maxScroll);
+		const visible = body.slice(this.scroll, this.scroll + this.lastHeight);
+		const pad = (text: string) => `${text}${" ".repeat(Math.max(0, inner - visibleWidth(text)))}`;
+		const row = (text: string) => `${fg("border", "│")} ${truncate(pad(text), inner)} ${fg("border", "│")}`;
+		const lines = [
+			fg("border", `╭${"─".repeat(inner + 2)}╮`),
+			row(`${bold("pi-crew transcript")} ${fg("dim", data.title)}`),
+			row(fg("dim", data.path)),
+			row(fg("dim", "j/k scroll · g/G top/bottom · q close")),
+			fg("border", `├${"─".repeat(inner + 2)}┤`),
+			...visible.map(row),
+			fg("border", `├${"─".repeat(inner + 2)}┤`),
+			row(fg("dim", `${body.length} lines · ${body.length ? Math.round(((this.scroll + visible.length) / body.length) * 100) : 100}%`)),
+			fg("border", `╰${"─".repeat(inner + 2)}╯`),
+		];
+		return lines;
+	}
+}
+