pi-crew 0.6.1 → 0.6.4

package/src/ui/widget/index.ts

@@ -0,0 +1,224 @@
+/**
+ * Crew widget — public API and component.
+ *
+ * Re-exports from widget submodules. The main component class and
+ * update/stop functions live here.
+ */
+
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { CrewUiConfig } from "../../config/config.ts";
+import type { ManifestCache } from "../../runtime/manifest-cache.ts";
+import type { TeamRunManifest } from "../../state/types.ts";
+import type { RunSnapshotCache, RunUiSnapshot } from "../snapshot-types.ts";
+import type { CrewTheme } from "../theme-adapter.ts";
+import { asCrewTheme, subscribeThemeChange } from "../theme-adapter.ts";
+import { truncate } from "../../utils/visual.ts";
+import { requestRender, setExtensionWidget } from "../pi-ui-compat.ts";
+import { spinnerBucket, spinnerFrame } from "../spinner.ts";
+import { runEventBus } from "../run-event-bus.ts";
+import { DEFAULT_UI } from "../../config/defaults.ts";
+import { activeWidgetRuns, statusSummary } from "./widget-model.ts";
+import { buildWidgetLines, colorWidgetLine, renderLines } from "./widget-renderer.ts";
+import type { CrewWidgetModel, CrewWidgetState, WidgetRun } from "./widget-types.ts";
+
+// Re-export types and helpers for backward compatibility
+export type { WidgetRun, CrewWidgetModel, CrewWidgetState } from "./widget-types.ts";
+export { activeWidgetRuns, statusSummary } from "./widget-model.ts";
+export { buildWidgetLines as buildCrewWidgetLines, widgetHeader } from "./widget-renderer.ts";
+export { notificationBadge } from "./widget-formatters.ts";
+
+// ── Constants ─────────────────────────────────────────────────────────
+
+const MAX_LINES_DEFAULT = DEFAULT_UI.widgetMaxLines;
+const LEGACY_WIDGET_KEY = "pi-crew";
+const WIDGET_KEY = "pi-crew-active";
+const STATUS_KEY = "pi-crew";
+
+// ── Widget Component ──────────────────────────────────────────────────
+
+interface WidgetComponent {
+	render(width: number): string[];
+	invalidate(): void;
+}
+
+class CrewWidgetComponent implements WidgetComponent {
+	private readonly model: CrewWidgetModel;
+	private theme: CrewTheme;
+	private cacheSignature = "";
+	private cachedWidth = 0;
+	private cachedLines: string[] = [];
+	private cachedBaseLines: string[] = [];
+	private cachedTheme: CrewTheme;
+	private readonly unsubscribeTheme: () => void;
+	private readonly unsubscribeEventBus: () => void;
+
+	constructor(model: CrewWidgetModel, themeLike: unknown) {
+		this.model = model;
+		this.theme = asCrewTheme(themeLike);
+		this.cachedTheme = this.theme;
+		this.unsubscribeTheme = subscribeThemeChange(themeLike, () => this.invalidate());
+		this.unsubscribeEventBus = runEventBus.onAny(() => this.invalidate());
+	}
+
+	private buildSignature(runs: WidgetRun[]): string {
+		const liveSig = [...listLiveAgents()].map((h) =>
+			`${h.agentId}:${h.status}:${h.activity.turnCount}:${h.activity.toolUses}:${[...h.activity.activeTools.values()].join(",")}:${h.activity.responseText.slice(-30)}`
+		).join("|");
+
+		const hasRunning = runs.some((entry) => entry.agents.some((a) => a.status === "running"))
+			|| [...listLiveAgents()].some((h) => h.status === "running");
+		const animation = hasRunning ? `:spin=${spinnerBucket()}` : "";
+
+		return runs
+			.map((entry) => entry.snapshot?.signature ?? `${entry.run.runId}:${entry.run.status}:${entry.run.updatedAt}:` +
+				entry.agents.map((a) => {
+					const recentOutput = a.progress?.recentOutput.at(-1) ?? "";
+					const progress = [a.progress?.currentTool ?? "", a.progress?.toolCount ?? 0, a.progress?.tokens ?? 0, a.progress?.turns ?? 0, a.progress?.lastActivityAt ?? "", recentOutput].join(":");
+					return `${a.status}:${a.startedAt}:${a.completedAt ?? ""}:${a.toolUses ?? 0}:${progress}`;
+				}).join(","))
+			.join("|") + `|live:${liveSig}${animation}`;
+	}
+
+	private colorize(lines: string[], width: number): string[] {
+		return renderLines(
+			lines.map((line, index) => colorWidgetLine(line, index, this.theme)),
+			width,
+		);
+	}
+
+	invalidate(): void {
+		this.cacheSignature = "";
+		this.cachedBaseLines = [];
+		this.cachedLines = [];
+	}
+
+	dispose(): void {
+		this.unsubscribeTheme();
+		this.unsubscribeEventBus();
+	}
+
+	render(width: number): string[] {
+		const runs = activeWidgetRuns(this.model.cwd, this.model.manifestCache, this.model.snapshotCache, this.model.preloadManifests);
+		const signature = `${this.buildSignature(runs)}:${this.model.notificationCount ?? 0}`;
+		const runningGlyph = spinnerFrame("widget-header");
+
+		if (this.cacheSignature !== signature || width !== this.cachedWidth || this.cachedTheme !== this.theme) {
+			this.cachedBaseLines = buildWidgetLines(this.model.cwd, 0, this.model.maxLines, runs, this.model.notificationCount ?? 0).map((line, index) => {
+				if (index === 0 && line.length > 0) return `${runningGlyph}${line.slice(1)}`;
+				return line;
+			});
+			this.cachedLines = this.colorize(this.cachedBaseLines, width);
+			this.cachedWidth = width;
+			this.cachedTheme = this.theme;
+			this.cacheSignature = signature;
+		}
+
+		if (runs.length === 0) {
+			this.invalidate();
+			return [];
+		}
+
+		const updatedHeader = `${runningGlyph}${this.cachedBaseLines[0]?.slice(1) ?? ""}`;
+		this.cachedLines[0] = truncate(colorWidgetLine(updatedHeader, 0, this.theme), width);
+		return this.cachedLines.map((line) => truncate(line, width));
+	}
+}
+
+// ── Re-export listLiveAgents for buildSignature ───────────────────────
+
+import { listLiveAgents } from "../../runtime/live-agent-manager.ts";
+
+// ── Public API ────────────────────────────────────────────────────────
+
+export function updateCrewWidget(
+	ctx: Pick<ExtensionContext, "cwd" | "hasUI" | "ui" | "sessionManager">,
+	state: CrewWidgetState,
+	config?: CrewUiConfig,
+	manifestCache?: ManifestCache,
+	snapshotCache?: RunSnapshotCache,
+	preloadedManifests?: TeamRunManifest[],
+): void {
+	if (!ctx.hasUI) return;
+	state.frame += 1;
+	const maxLines = config?.widgetMaxLines ?? MAX_LINES_DEFAULT;
+
+	let workspaceId = ctx.sessionManager?.getSessionId?.();
+	if (!workspaceId && manifestCache) {
+		const runs = manifestCache.list(20);
+		const active = runs.find((r) => r.status === "running" || r.status === "queued");
+		if (active?.ownerSessionId) workspaceId = active.ownerSessionId;
+	}
+
+	const runs = activeWidgetRuns(ctx.cwd, manifestCache, snapshotCache, preloadedManifests, workspaceId);
+	const lines = buildWidgetLines(ctx.cwd, state.frame, maxLines, runs, state.notificationCount ?? 0);
+	const placement = config?.widgetPlacement ?? DEFAULT_UI.widgetPlacement;
+
+	ctx.ui.setStatus(STATUS_KEY, lines.length ? statusSummary(runs) : undefined);
+
+	const shouldClearLegacy = state.legacyCleared !== true || state.lastPlacement !== placement;
+	if (shouldClearLegacy) {
+		setExtensionWidget(ctx, LEGACY_WIDGET_KEY, undefined, { placement });
+		state.legacyCleared = true;
+	}
+
+	if (!lines.length) {
+		if (state.lastVisibility !== "hidden" || state.lastPlacement !== placement) {
+			setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement });
+			state.lastVisibility = "hidden";
+			state.lastPlacement = placement;
+			state.lastKey = WIDGET_KEY;
+			state.lastMaxLines = maxLines;
+			state.lastCwd = ctx.cwd;
+			state.model = undefined;
+		}
+		requestRender(ctx);
+		return;
+	}
+
+	const needsWidgetInstall = state.lastVisibility !== "visible" || state.lastPlacement !== placement || state.lastKey !== WIDGET_KEY || state.lastMaxLines !== maxLines || state.lastCwd !== ctx.cwd || !state.model;
+
+	if (!state.model) state.model = { cwd: ctx.cwd, frame: state.frame, maxLines, notificationCount: state.notificationCount ?? 0, manifestCache, snapshotCache, preloadManifests: preloadedManifests };
+	else {
+		state.model.cwd = ctx.cwd;
+		state.model.frame = state.frame;
+		state.model.maxLines = maxLines;
+		state.model.notificationCount = state.notificationCount ?? 0;
+		state.model.manifestCache = manifestCache;
+		state.model.snapshotCache = snapshotCache;
+		state.model.preloadManifests = preloadedManifests;
+	}
+
+	if (needsWidgetInstall) {
+		const model = state.model;
+		setExtensionWidget(
+			ctx,
+			WIDGET_KEY,
+			((_tui: unknown, theme: unknown) => new CrewWidgetComponent(model, theme)) as never,
+			{ placement, persist: true },
+		);
+		state.lastVisibility = "visible";
+		state.lastPlacement = placement;
+		state.lastKey = WIDGET_KEY;
+		state.lastMaxLines = maxLines;
+		state.lastCwd = ctx.cwd;
+	}
+
+	requestRender(ctx);
+}
+
+export function stopCrewWidget(ctx: Pick<ExtensionContext, "hasUI" | "ui"> | undefined, state: CrewWidgetState, config?: CrewUiConfig): void {
+	if (state.interval) clearInterval(state.interval);
+	state.interval = undefined;
+	if (ctx?.hasUI) {
+		const placement = config?.widgetPlacement ?? DEFAULT_UI.widgetPlacement;
+		ctx.ui.setStatus(STATUS_KEY, undefined);
+		setExtensionWidget(ctx, LEGACY_WIDGET_KEY, undefined, { placement });
+		setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement });
+		state.lastVisibility = "hidden";
+		state.lastPlacement = placement;
+		state.lastKey = WIDGET_KEY;
+		state.model = undefined;
+		state.legacyCleared = true;
+		requestRender(ctx);
+	}
+}

package/src/ui/widget/widget-formatters.ts

@@ -0,0 +1,148 @@
+/**
+ * Widget formatting utilities.
+ *
+ * Extracted from crew-widget.ts for reuse and testability.
+ */
+
+import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
+import type { LiveAgentHandle } from "../../runtime/live-agent-manager.ts";
+import { getTaskUsage } from "../../runtime/usage-tracker.ts";
+
+// ── Token formatting ──────────────────────────────────────────────────
+
+export function formatTokensCompact(count: number): string {
+	if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M tok`;
+	if (count >= 1_000) return `${(count / 1_000).toFixed(1)}k tok`;
+	return `${count} tok`;
+}
+
+// ── Elapsed time ──────────────────────────────────────────────────────
+
+export 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`;
+}
+
+// ── Agent activity description ────────────────────────────────────────
+
+const TOOL_LABELS: Record<string, string> = {
+	read: "reading",
+	bash: "running command",
+	edit: "editing",
+	write: "writing",
+	grep: "searching",
+	find: "finding files",
+	ls: "listing",
+};
+
+const TOOL_ICONS: Record<string, string> = {
+	read: "📖",
+	bash: ">",
+	edit: "✏",
+	write: "📝",
+	grep: "🔍",
+	find: "📁",
+	ls: "📋",
+	agent: "🤖",
+};
+
+export function describeLiveActivity(handle: LiveAgentHandle): string {
+	const act = handle.activity;
+	if (act.activeTools.size > 0) {
+		const groups = new Map<string, number>();
+		for (const toolName of act.activeTools.values()) {
+			groups.set(toolName, (groups.get(toolName) ?? 0) + 1);
+		}
+		const parts: string[] = [];
+		for (const [toolName, count] of groups) {
+			const icon = TOOL_ICONS[toolName] ?? "?";
+			const label = TOOL_LABELS[toolName] ?? toolName;
+			if (count > 1) {
+				parts.push(`${icon}${count} ${label}s`);
+			} else {
+				parts.push(`${icon} ${label}`);
+			}
+		}
+		return parts.join(", ") + "…";
+	}
+	if (act.responseText?.trim()) {
+		const line = act.responseText.split("\n").find((l) => l.trim())?.trim() ?? "";
+		return line.length > 60 ? line.slice(0, 60) + "…" : line;
+	}
+	return "thinking…";
+}
+
+export function agentActivity(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle): string {
+	if (liveHandle && liveHandle.status === "running") {
+		const live = describeLiveActivity(liveHandle);
+		if (live === "thinking…" && agent.progress?.currentTool) return `${TOOL_LABELS[agent.progress.currentTool] ?? agent.progress.currentTool}…`;
+		return live;
+	}
+	if (agent.progress?.currentTool) return `${TOOL_LABELS[agent.progress.currentTool] ?? agent.progress.currentTool}…`;
+	const recent = agent.progress?.recentOutput?.at(-1);
+	if (recent) {
+		const cleaned = recent.replace(/\s+/g, " ").trim();
+		return cleaned.length > 60 ? cleaned.slice(0, 60) + "…" : cleaned;
+	}
+	if (agent.progress?.activityState === "needs_attention") return "needs attention";
+	if (agent.status === "queued") return "queued";
+	if (agent.status === "running") {
+		const age = agent.startedAt ? Date.now() - new Date(agent.startedAt).getTime() : Infinity;
+		if (age < 5000 && !agent.progress?.currentTool) return "spawning…";
+		return "thinking…";
+	}
+	if (agent.status === "failed") return agent.error ?? "failed";
+	return "done";
+}
+
+// ── Agent stats line ──────────────────────────────────────────────────
+
+export function agentStats(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle): string {
+	const parts: string[] = [];
+	if (liveHandle) {
+		const act = liveHandle.activity;
+		if (act.toolUses > 0) parts.push(`${act.toolUses} tools`);
+		const usage = getTaskUsage(liveHandle.taskId);
+		const total = (usage.input ?? 0) + (usage.output ?? 0) + (usage.cacheWrite ?? 0);
+		if (total > 0) parts.push(formatTokensCompact(total));
+		try {
+			const stats = liveHandle.session.getSessionStats?.();
+			const ctxPct = stats?.contextUsage?.percent;
+			if (ctxPct != null) parts.push(`${Math.round(ctxPct)}% ctx`);
+		} catch { /* ignore */ }
+		const rawStarted = act.startedAtMs || 0;
+		const rawCompleted = act.completedAtMs || 0;
+		const nowMs = Date.now();
+		const toMs = (v: number): number => {
+			if (v <= 0) return 0;
+			if (v > 1000000000 && v < 10000000000) return v * 1000;
+			if (v > 100000000000 && v < 10000000000000) return v;
+			return v;
+		};
+		const startedMs = toMs(rawStarted);
+		const completedMs = rawCompleted > 0 ? toMs(rawCompleted) : 0;
+		const isValidStarted = startedMs > 0 && startedMs < nowMs + 60000 && startedMs > nowMs - 3155692600000;
+		const ms = (completedMs > 0 && completedMs < nowMs + 60000 ? completedMs : nowMs) - (isValidStarted ? startedMs : nowMs);
+		parts.push(`${(ms / 1000).toFixed(1)}s`);
+	} else {
+		if (agent.toolUses) parts.push(`${agent.toolUses} tools`);
+		if (agent.progress?.tokens) parts.push(formatTokensCompact(agent.progress.tokens));
+		const age = elapsed(agent.completedAt ?? agent.startedAt);
+		if (age) parts.push(age);
+	}
+	return parts.join(" · ");
+}
+
+// ── Notification badge ────────────────────────────────────────────────
+
+export function notificationBadge(count: number | undefined, env: NodeJS.ProcessEnv = process.env): string {
+	if (!count || count <= 0) return "";
+	const term = `${env.TERM ?? ""} ${env.WT_SESSION ?? ""} ${env.TERM_PROGRAM ?? ""}`.toLowerCase();
+	const supportsEmoji = !term.includes("dumb") && env.NO_COLOR !== "1";
+	return supportsEmoji ? ` 🔔${count}` : ` [!${count}]`;
+}

package/src/ui/widget/widget-model.ts

@@ -0,0 +1,90 @@
+/**
+ * Widget data model — fetching, filtering, and caching.
+ *
+ * Extracted from crew-widget.ts.
+ */
+
+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 { isDisplayActiveRun } from "../../runtime/process-status.ts";
+import { listLiveAgents, evictStaleLiveAgentHandles } from "../../runtime/live-agent-manager.ts";
+import type { ManifestCache } from "../../runtime/manifest-cache.ts";
+import { reconcileAllStaleRuns } from "../../runtime/crash-recovery.ts";
+import { listRecentRuns } from "../../extension/run-index.ts";
+import type { RunSnapshotCache } from "../snapshot-types.ts";
+import type { WidgetRun } from "./widget-types.ts";
+
+let lastStaleReconcileAt = 0;
+const STALE_RECONCILE_INTERVAL_MS = 60_000;
+
+function agentsFor(run: TeamRunManifest): CrewAgentRecord[] {
+	try {
+		return readCrewAgents(run);
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Get active widget runs for display.
+ */
+export function activeWidgetRuns(
+	cwd: string,
+	manifestCache?: ManifestCache,
+	snapshotCache?: RunSnapshotCache,
+	preloadedManifests?: TeamRunManifest[],
+	workspaceId?: string,
+): WidgetRun[] {
+	evictStaleLiveAgentHandles();
+
+	const now = Date.now();
+	if (now - lastStaleReconcileAt > STALE_RECONCILE_INTERVAL_MS && manifestCache) {
+		lastStaleReconcileAt = now;
+		try { reconcileAllStaleRuns(cwd, manifestCache); } catch { /* non-critical */ }
+	}
+
+	let runs = preloadedManifests ?? (manifestCache ? manifestCache.list(20) : listRecentRuns(cwd, 20));
+	if (workspaceId) {
+		runs = runs.filter((run) => !run.ownerSessionId || run.ownerSessionId === workspaceId);
+	}
+
+	return runs
+		.map((run) => {
+			try {
+				const snapshot = snapshotCache?.get(run.runId);
+				return snapshot
+					? { run: snapshot.manifest, agents: snapshot.agents, snapshot }
+					: { run, agents: agentsFor(run) };
+			} catch {
+				return { run, agents: agentsFor(run) };
+			}
+		})
+		.filter((item) => isDisplayActiveRun(item.run, item.agents));
+}
+
+/**
+ * Build a status summary string for the status bar.
+ */
+export function statusSummary(runs: WidgetRun[]): string {
+	const agents = runs.flatMap((item) => item.agents);
+	const runningAgents = agents.filter((a) => a.status === "running").length;
+	const queuedAgents = agents.filter((a) => a.status === "queued" || a.status === "waiting").length;
+	const completedAgents = agents.filter((a) => a.status === "completed").length;
+	const totalAgents = agents.length;
+	const totalRuns = runs.length;
+	const model = agents.find((a) => a.model)?.model?.split("/").at(-1);
+	const parts = [`⚙ ${runningAgents}r`];
+	if (queuedAgents > 0) parts.push(`${queuedAgents}q`);
+	if (completedAgents > 0) parts.push(`${completedAgents}/${totalAgents}done`);
+	if (totalRuns > 1) parts.push(`${totalRuns}runs`);
+	if (model) parts.push(model);
+	return parts.join(" · ");
+}
+
+/**
+ * Build the short run label (team/workflow).
+ */
+export function shortRunLabel(run: TeamRunManifest): string {
+	return `${run.team}/${run.workflow ?? "none"}`;
+}

package/src/ui/widget/widget-renderer.ts

@@ -0,0 +1,130 @@
+/**
+ * Widget rendering — builds and colorizes widget lines.
+ *
+ * Extracted from crew-widget.ts.
+ */
+
+import type { CrewTheme } from "../theme-adapter.ts";
+import { iconForStatus } from "../status-colors.ts";
+import { truncate } from "../../utils/visual.ts";
+import { Box, Text } from "../layout-primitives.ts";
+import { listLiveAgents } from "../../runtime/live-agent-manager.ts";
+import { computePhaseProgress, formatPhaseProgressLine } from "../../runtime/phase-progress.ts";
+import { spinnerFrame } from "../spinner.ts";
+import { agentActivity, agentStats, notificationBadge } from "./widget-formatters.ts";
+import { shortRunLabel } from "./widget-model.ts";
+import type { WidgetRun } from "./widget-types.ts";
+
+const MAX_AGENTS_DISPLAY = 3;
+const FINISHED_LINGER_MAX_AGE = 1;
+const ERROR_LINGER_MAX_AGE = 2;
+const ERROR_STATUSES = new Set(["failed", "cancelled", "stopped", "needs_attention"]);
+
+// ── Header ────────────────────────────────────────────────────────────
+
+export function widgetHeader(runs: WidgetRun[], runningGlyph: string, maxLines = 20, notificationCount = 0): string {
+	const agents = runs.flatMap((item) => item.agents);
+	const runningAgents = agents.filter((a) => a.status === "running").length;
+	const queuedAgents = agents.filter((a) => a.status === "queued").length;
+	const waitingAgents = agents.filter((a) => a.status === "waiting").length;
+	const completedAgents = agents.filter((a) => a.status === "completed").length;
+	const parts = [`${runningAgents} running`];
+	if (queuedAgents) parts.push(`${queuedAgents} queued`);
+	if (waitingAgents) parts.push(`${waitingAgents} waiting`);
+	if (completedAgents) parts.push(`${completedAgents}/${agents.length} done`);
+	return `${runningGlyph} Crew agents${notificationBadge(notificationCount)} · ${parts.join(" · ")} · /team-dashboard`;
+}
+
+// ── Line builder ──────────────────────────────────────────────────────
+
+export function buildWidgetLines(cwd: string, frame = 0, maxLines = 8, providedRuns?: WidgetRun[], notificationCount = 0): string[] {
+	const runs = providedRuns ?? [];
+	if (!runs.length) return [];
+
+	const runningGlyph = spinnerFrame("widget-header");
+	const lines: string[] = [widgetHeader(runs, runningGlyph, maxLines, notificationCount)];
+
+	for (const { run, agents, snapshot } of runs) {
+		const activeAgents = agents.filter((a) => a.status === "running" || a.status === "queued" || a.status === "waiting");
+		const now = Date.now();
+		const finishedAgents = agents.filter((item) => {
+			if (item.status === "running" || item.status === "queued" || item.status === "waiting") return false;
+			if (!item.completedAt) return false;
+			const maxAgeMs = (ERROR_STATUSES.has(item.status) ? ERROR_LINGER_MAX_AGE : FINISHED_LINGER_MAX_AGE) * 60_000;
+			const age = now - new Date(item.completedAt).getTime();
+			return Number.isFinite(age) && age < maxAgeMs;
+		});
+		const completed = agents.filter((a) => a.status === "completed").length;
+		const runGlyph = iconForStatus(run.status, { runningGlyph });
+		const phaseLine = snapshot ? formatPhaseProgressLine(computePhaseProgress(snapshot.tasks)) : "";
+		const progressPart = phaseLine || `${completed}/${agents.length} done`;
+		lines.push(`├─ ${runGlyph} ${shortRunLabel(run)} · ${progressPart} · ${run.runId.slice(-8)}`);
+
+		const liveForRun = listLiveAgents().filter((a) => a.runId === run.runId);
+
+		for (const agent of finishedAgents.slice(0, 2)) {
+			const liveHandle = liveForRun.find((h) => h.taskId === agent.taskId);
+			const name = liveHandle?.agent ?? agent.agent;
+			const icon = agent.status === "completed" ? "✓" : agent.status === "failed" ? "✗" : agent.status === "needs_attention" ? "⚠" : "▪";
+			const stats = agentStats(agent, liveHandle);
+			const desc = liveHandle?.description ?? agent.role;
+			lines.push(`│  ├─ ${icon} ${name} · ${desc}${stats ? ` · ${stats}` : ""}`);
+		}
+
+		const visibleAgents = activeAgents.slice(0, MAX_AGENTS_DISPLAY);
+		for (const [index, agent] of visibleAgents.entries()) {
+			const last = index === visibleAgents.length - 1 && activeAgents.length <= MAX_AGENTS_DISPLAY;
+			const branch = last ? "└─" : "├─";
+			const agentGlyph = iconForStatus(agent.status, { runningGlyph });
+			const liveHandle = liveForRun.find((h) => h.taskId === agent.taskId);
+			const stats = agentStats(agent, liveHandle);
+			const name = liveHandle?.agent ?? agent.agent;
+			const desc = liveHandle?.description ?? agent.role;
+			lines.push(`│  ${branch} ${agentGlyph} ${name}${desc ? ` · ${desc}` : ` · ${agent.role}`}`);
+			lines.push(`│     ⊶ ${agentActivity(agent, liveHandle)}${stats ? ` · ${stats}` : ""}`);
+		}
+
+		if (activeAgents.length > MAX_AGENTS_DISPLAY) {
+			lines.push(`│  └─ … +${activeAgents.length - MAX_AGENTS_DISPLAY} more agents`);
+		}
+
+		if (lines.length >= maxLines) break;
+	}
+
+	return lines.slice(0, maxLines);
+}
+
+// ── Colorization ──────────────────────────────────────────────────────
+
+function statusGlyphColor(icon: string): Parameters<CrewTheme["fg"]>[0] {
+	const mapping: Record<string, Parameters<CrewTheme["fg"]>[0]> = {
+		"✓": "success",
+		"✗": "error",
+		"■": "warning",
+		"⏸": "warning",
+		"◦": "dim",
+		"·": "dim",
+		"▶": "accent",
+	};
+	return mapping[icon] ?? "accent";
+}
+
+export function colorWidgetLine(line: string, index: number, theme: CrewTheme): string {
+	let result = line;
+	if (index === 0) {
+		result = result.replace("Crew agents", theme.bold(theme.fg("accent", "Crew agents")));
+	}
+	result = result.replace(/[✓✗■⏸◦·▶]/g, (icon) => theme.fg(statusGlyphColor(icon), icon));
+	if (index === 0) {
+		result = theme.fg("accent", result);
+	}
+	return result;
+}
+
+export function renderLines(lines: string[], width: number): string[] {
+	const box = new Box(0, 0);
+	for (const line of lines) {
+		box.addChild(new Text(line));
+	}
+	return box.render(width);
+}

package/src/ui/widget/widget-types.ts

@@ -0,0 +1,37 @@
+/**
+ * Widget type definitions.
+ */
+
+import type { TeamRunManifest } from "../../state/types.ts";
+import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
+import type { ManifestCache } from "../../runtime/manifest-cache.ts";
+import type { RunSnapshotCache, RunUiSnapshot } from "../snapshot-types.ts";
+
+export interface WidgetRun {
+	run: TeamRunManifest;
+	agents: CrewAgentRecord[];
+	snapshot?: RunUiSnapshot;
+}
+
+export interface CrewWidgetModel {
+	cwd: string;
+	frame: number;
+	maxLines: number;
+	notificationCount?: number;
+	manifestCache?: ManifestCache;
+	snapshotCache?: RunSnapshotCache;
+	preloadManifests?: TeamRunManifest[];
+}
+
+export interface CrewWidgetState {
+	frame: number;
+	interval?: ReturnType<typeof setInterval>;
+	lastPlacement?: string;
+	lastVisibility?: "hidden" | "visible";
+	lastKey?: string;
+	lastMaxLines?: number;
+	lastCwd?: string;
+	legacyCleared?: boolean;
+	model?: CrewWidgetModel;
+	notificationCount?: number;
+}