@underactive/pi-topping-moa-fusion 0.1.0

package/src/runtime/wire.ts

@@ -0,0 +1,177 @@
+import type { AgentMessage } from "@earendil-works/pi-agent-core";
+import type { Message } from "@earendil-works/pi-ai";
+import type { JsonAgentSessionEvent } from "@earendil-works/pi-coding-agent";
+
+export type WireAssistantMessageEvent = Extract<JsonAgentSessionEvent, { type: "message_update" }>["assistantMessageEvent"];
+
+/** Bound content-indexed stream assembly so malformed children cannot allocate sparse arrays. */
+export const MAX_STREAM_CONTENT_PARTS = 1024;
+
+/**
+ * The wire union carries pi's custom message kinds — interactive `!cmd` bash,
+ * compaction and branch summaries — alongside plain LLM messages. None can
+ * occur in a non-interactive subagent, and nothing that consumes a subagent
+ * transcript knows how to render them.
+ */
+export function isLlmMessage(message: AgentMessage): message is Message {
+	return message.role === "user" || message.role === "assistant" || message.role === "toolResult";
+}
+
+const USAGE_BEACON_PREFIX = "pi-usage-beacon/1 ";
+const USAGE_BEACON_FAMILY_PREFIX = "pi-usage-beacon/";
+const MAX_STDERR_BUFFER_CHARS = 65_536;
+
+export function isValidContextTokens(value: unknown): value is number {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
+
+/** Parse a v1 beacon line; all malformed payloads are ordinary stderr diagnostics. */
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return !!value && typeof value === "object" && !Array.isArray(value);
+}
+
+export function isNonnegativeFiniteNumber(value: unknown): value is number {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
+
+export function isValidContentIndex(value: unknown): value is number {
+	return typeof value === "number"
+		&& Number.isInteger(value)
+		&& value >= 0
+		&& value < MAX_STREAM_CONTENT_PARTS;
+}
+
+function isTextContent(value: unknown): boolean {
+	return isRecord(value) && value.type === "text" && typeof value.text === "string";
+}
+
+function isImageContent(value: unknown): boolean {
+	return isRecord(value)
+		&& value.type === "image"
+		&& typeof value.data === "string"
+		&& typeof value.mimeType === "string";
+}
+
+function isThinkingContent(value: unknown): boolean {
+	return isRecord(value) && value.type === "thinking" && typeof value.thinking === "string";
+}
+
+function isToolCall(value: unknown): boolean {
+	return isRecord(value)
+		&& value.type === "toolCall"
+		&& typeof value.id === "string"
+		&& typeof value.name === "string"
+		&& isRecord(value.arguments);
+}
+
+function isWireMessage(value: unknown): boolean {
+	if (!isRecord(value) || typeof value.role !== "string") return false;
+	if (value.usage !== undefined && !isRecord(value.usage)) return false;
+	if (value.role === "user") {
+		return typeof value.content === "string"
+			|| (Array.isArray(value.content) && value.content.every((part) => isTextContent(part) || isImageContent(part)));
+	}
+	if (value.role === "assistant") {
+		return Array.isArray(value.content)
+			&& value.content.every((part) => isTextContent(part) || isThinkingContent(part) || isToolCall(part));
+	}
+	if (value.role === "toolResult") {
+		return Array.isArray(value.content)
+			&& value.content.every((part) => isTextContent(part) || isImageContent(part))
+			&& typeof value.toolCallId === "string"
+			&& typeof value.toolName === "string"
+			&& typeof value.isError === "boolean";
+	}
+	return false;
+}
+
+/** Parse and minimally validate one child JSON-protocol event. */
+export function parseSessionEvent(line: string): JsonAgentSessionEvent | undefined {
+	try {
+		const parsed: unknown = JSON.parse(line);
+		if (!isRecord(parsed) || typeof parsed.type !== "string") return undefined;
+		if (parsed.type === "message_start" || parsed.type === "message_end") {
+			return isWireMessage(parsed.message) ? parsed as unknown as JsonAgentSessionEvent : undefined;
+		}
+		if (parsed.type === "message_update") {
+			const assistantEvent = parsed.assistantMessageEvent;
+			if (assistantEvent === undefined || assistantEvent === null) return parsed as unknown as JsonAgentSessionEvent;
+			if (!isRecord(assistantEvent) || typeof assistantEvent.type !== "string") return undefined;
+			if ("contentIndex" in assistantEvent && !isValidContentIndex(assistantEvent.contentIndex)) return undefined;
+			if (assistantEvent.type === "text_delta" || assistantEvent.type === "thinking_delta") {
+				if (typeof assistantEvent.delta !== "string" || !isValidContentIndex(assistantEvent.contentIndex)) return undefined;
+			}
+			if (assistantEvent.type === "toolcall_end") {
+				if (!isValidContentIndex(assistantEvent.contentIndex) || !isToolCall(assistantEvent.toolCall)) return undefined;
+			}
+			return parsed as unknown as JsonAgentSessionEvent;
+		}
+		if (parsed.type === "tool_execution_start" && typeof parsed.toolName !== "string") return undefined;
+		return parsed as unknown as JsonAgentSessionEvent;
+	} catch {
+		return undefined;
+	}
+}
+
+export function parseUsageBeacon(line: string): number | undefined {
+	const normalized = line.endsWith("\r") ? line.slice(0, -1) : line;
+	if (!normalized.startsWith(USAGE_BEACON_PREFIX)) return undefined;
+	try {
+		const payload: unknown = JSON.parse(normalized.slice(USAGE_BEACON_PREFIX.length));
+		if (!payload || typeof payload !== "object" || Array.isArray(payload)) return undefined;
+		const record = payload as Record<string, unknown>;
+		return isValidContextTokens(record.totalTokens) ? record.totalTokens : undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+// Silently drop unsupported versions so a newer producer cannot flood failure diagnostics.
+function isUnknownUsageBeacon(line: string): boolean {
+	const normalized = line.endsWith("\r") ? line.slice(0, -1) : line;
+	return normalized.startsWith(USAGE_BEACON_FAMILY_PREFIX) && !normalized.startsWith(USAGE_BEACON_PREFIX);
+}
+
+/** Splits stderr without letting recognized machine beacons grow diagnostic output. */
+export class StderrBeaconReader {
+	#buffer = "";
+
+	push(chunk: string, flush = false): { beacons: number[]; diagnostics: string } {
+		this.#buffer += chunk;
+		const lines = this.#buffer.split("\n");
+		this.#buffer = (lines.pop() || "").slice(-MAX_STDERR_BUFFER_CHARS);
+		if (flush && this.#buffer) {
+			lines.push(this.#buffer);
+			this.#buffer = "";
+		}
+
+		const beacons: number[] = [];
+		let diagnostics = "";
+		for (let index = 0; index < lines.length; index++) {
+			const line = lines[index];
+			const beacon = parseUsageBeacon(line);
+			if (beacon !== undefined) {
+				beacons.push(beacon);
+			} else if (!isUnknownUsageBeacon(line)) {
+				const isFinalTail = flush && index === lines.length - 1 && !chunk.endsWith("\n");
+				diagnostics += line + (isFinalTail ? "" : "\n");
+			}
+		}
+		return { beacons, diagnostics };
+	}
+}
+
+export function reconcileContextTokens(
+	current: number | undefined,
+	authoritative: boolean,
+	totalTokens: number,
+	source: "beacon" | "message_end",
+): { contextTokens: number; authoritative: boolean; changed: boolean } {
+	if (source === "beacon") {
+		if (authoritative || (current !== undefined && totalTokens < current)) {
+			return { contextTokens: current ?? totalTokens, authoritative, changed: false };
+		}
+		return { contextTokens: totalTokens, authoritative: false, changed: current !== totalTokens };
+	}
+	return { contextTokens: totalTokens, authoritative: true, changed: current !== totalTokens };
+}

package/src/shared/functionKeys.ts

@@ -0,0 +1,30 @@
+import { isKeyRelease, isKeyRepeat, matchesKey, type KeyId } from "@earendil-works/pi-tui";
+
+type KittyFunctionKeyTerminator = "P" | "Q" | "R" | "S";
+
+export const FUNCTION_KEY_KITTY_TERMINATORS: Partial<Record<KeyId, KittyFunctionKeyTerminator>> = {
+	f1: "P",
+	f2: "Q",
+	f3: "R",
+	f4: "S",
+} as const;
+
+const KITTY_FUNCTION_KEY_SEQUENCE = /^\x1b\[1(?:;(\d+))?(?::(\d+))?([PQRS])$/;
+
+export function matchesFunctionKeyPress(data: string, key: KeyId): boolean {
+	if (isKeyRelease(data) || isKeyRepeat(data)) return false;
+	if (/:[23][PQRS]$/.test(data)) return false;
+	if (matchesKey(data, key)) return true;
+
+	// Compatibility shim for pi-tui's Kitty F1-F4 gap; remove once upstream supports these aliases.
+	const terminator = FUNCTION_KEY_KITTY_TERMINATORS[key];
+	if (terminator === undefined) return false;
+
+	const match = KITTY_FUNCTION_KEY_SEQUENCE.exec(data);
+	return (
+		match !== null &&
+		match[3] === terminator &&
+		(match[1] === undefined || match[1] === "1") &&
+		(match[2] === undefined || match[2] === "1")
+	);
+}

package/src/shared/modelRefs.ts

@@ -0,0 +1,91 @@
+export interface ModelRef {
+	provider: string;
+	id: string;
+}
+
+export type SendUserMessageOptions = { deliverAs?: "steer" | "followUp"; triggerTurn?: boolean };
+export const TRIGGER_TURN: SendUserMessageOptions = { triggerTurn: true };
+export const FOLLOW_UP: SendUserMessageOptions = { deliverAs: "followUp" };
+
+/**
+ * pi's thinking-level vocabulary, in pi's canonical order (see
+ * `pi.getThinkingLevel()` / `--thinking <level>`). `xhigh` and `max` are
+ * distinct levels a model may expose independently, so neither is folded
+ * into the other.
+ */
+export const THINKING_LEVELS = ["off", "minimal", "low", "medium", "high", "xhigh", "max"] as const;
+export type ThinkingLevel = (typeof THINKING_LEVELS)[number];
+
+export function isThinkingLevel(value: string): value is ThinkingLevel {
+	return (THINKING_LEVELS as readonly string[]).includes(value);
+}
+
+export function isModelRef(value: unknown): value is ModelRef {
+	return !!value
+		&& typeof value === "object"
+		&& typeof (value as ModelRef).provider === "string"
+		&& typeof (value as ModelRef).id === "string";
+}
+
+export function modelRefLabel(ref: ModelRef): string {
+	return `${ref.provider}/${ref.id}`;
+}
+
+export function parseRef(value: string): ModelRef {
+	const idx = value.indexOf("/");
+	if (idx === -1) return { provider: value, id: "" };
+	return { provider: value.slice(0, idx), id: value.slice(idx + 1) };
+}
+
+/**
+ * Anonymous slot label substituted for the real `modelRefLabel(ref)` in the
+ * synthesizer's input ONLY. Blinding prevents the synthesizer from favoring a
+ * proposal because of which model family/provider wrote it (self-preference
+ * bias), so proposals are judged purely on merit.
+ *
+ * The synthesizer's plan body refers to proposers as `Proposer 1`, `Proposer 2`,
+ * … which the user maps by index to the picker's `Proposer N` slot labels and
+ * the plan-review overlay's `P1`/`P2`/`P3` title-bar row (both render the real
+ * `ModelRef` from `MfPlanInfo`). If the picker's slot labeling ever changes,
+ * keep this in sync so the body↔overlay mapping stays correct by construction.
+ */
+export function proposerBlindedLabel(slotIndex: number): string {
+	return `Proposer ${slotIndex + 1}`;
+}
+
+const MODEL_ATTR_SEGMENTS = new Set([
+	"pro", "plus", "max", "ultra", "mini", "flash", "turbo", "coder", "instruct",
+	"preview", "lite", "base", "sonnet", "opus", "haiku", "thinking", "reasoning",
+]);
+const CLAUDE_FAMILY_SEGMENTS = new Set(["sonnet", "opus", "haiku"]);
+
+function isVersionOrAttrSegment(segment: string): boolean {
+	const seg = segment.toLowerCase();
+	if (MODEL_ATTR_SEGMENTS.has(seg)) return true;
+	if (/^v\d/.test(seg)) return true;
+	if (/^k\d/.test(seg)) return true;
+	if (/^[a-z]\d+(\.\d+)*$/i.test(seg)) return true;
+	if (/^\d+(\.\d+)*$/.test(seg)) return true;
+	return false;
+}
+
+function modelIdBase(ref: ModelRef): string {
+	const slashIdx = ref.id.lastIndexOf("/");
+	return slashIdx >= 0 ? ref.id.slice(slashIdx + 1) : ref.id;
+}
+
+/** Short display name for MoA overlay (e.g. "claude-opus-4-6" → "opus", "deepseek-v4-pro" → "deepseek"). */
+export function shortModelName(ref: ModelRef): string {
+	const base = modelIdBase(ref);
+	const segments = base.split("-").filter(Boolean);
+	// Claude's family is its useful compact identifier; "claude" only names
+	// the product and does not distinguish Opus, Sonnet, and Haiku.
+	if (segments[0]?.toLowerCase() === "claude") {
+		const family = segments.find((segment) => CLAUDE_FAMILY_SEGMENTS.has(segment.toLowerCase()));
+		if (family) return family.toLowerCase();
+	}
+	const kept = segments.filter((s) => !isVersionOrAttrSegment(s));
+	let name = kept.length > 0 ? kept.join("-") : base;
+	name = name.replace(/\d+(\.\d+)*$/, "");
+	return name.toLowerCase() || base;
+}

package/src/ui/agentStatus.ts

@@ -0,0 +1,84 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+
+const CONTEXT_BAR_WIDTH = 10;
+const PERCENT_PAD_WIDTH = 6;
+export const CTX_COL_WIDTH = 14;
+const EIGHTH_BLOCKS = ["", "▏", "▎", "▍", "▌", "▋", "▊", "▉"] as const;
+/** Badge an agent as looping once its current activity has recurred at least this many times in the window. */
+export const LOOP_THRESHOLD = 3;
+
+/**
+ * How many times the current activity recurs in the recent history window.
+ * At or above LOOP_THRESHOLD the agent is likely stuck looping on the same
+ * tool call. Read by the cancel overlay, which badges the looping agent.
+ */
+export function activityLoopCount(activity: string | undefined, history: string[] | undefined): number {
+	if (!activity) return 0;
+	return (history ?? []).filter((a) => a === activity).length;
+}
+
+/**
+ * Render a live context-usage bar: how much of the model's context window the
+ * agent's latest turn is consuming (`contextTokens / contextWindow`). Shows a
+ * tenths-precision percentage padded to 6 chars, followed by a 10-cell bar
+ * using 1/8-precision Unicode block fill. Unknown window keeps the bracket
+ * aligned with a leading 6-space placeholder.
+ *
+ * When a `theme` is provided, fills use the accent color and unfilled cells
+ * use a dim foreground to visually distinguish the unfilled region.
+ */
+export function usageBar(contextTokens: number | undefined, contextWindow: number | undefined, theme?: Theme): string {
+	if (contextTokens === undefined || !contextWindow || contextWindow <= 0) {
+		const bar = `${" ".repeat(PERCENT_PAD_WIDTH)}[${"?".repeat(CONTEXT_BAR_WIDTH)}]`;
+		return theme ? theme.fg("dim", bar) : bar;
+	}
+	const used = contextTokens && contextTokens > 0 ? contextTokens : 0;
+	const ratio = Math.max(0, Math.min(1, used / contextWindow));
+	const pctStr = `${(ratio * 100).toFixed(1)}%`;
+	const paddedPct = pctStr.padStart(PERCENT_PAD_WIDTH);
+	const filledEighths = Math.round(ratio * CONTEXT_BAR_WIDTH * 8);
+	const fullChars = Math.floor(filledEighths / 8);
+	const remainder = filledEighths % 8;
+	const empty = CONTEXT_BAR_WIDTH - fullChars - (remainder > 0 ? 1 : 0);
+	const filled = `${"█".repeat(fullChars)}${EIGHTH_BLOCKS[remainder]}`;
+	const unfilled = `${"░".repeat(empty)}`;
+	if (theme) {
+		return `${theme.fg("text", paddedPct)} [${theme.fg("accent", filled)}${theme.fg("dim", unfilled)}]`;
+	}
+	return `${paddedPct} [${filled}${unfilled}]`;
+}
+
+/** Format a token count compactly, using lowercase `k` and `m` suffixes. */
+export function formatTokens(tokens: number): string {
+	const count = Number.isFinite(tokens) ? Math.max(0, Math.round(tokens)) : 0;
+	if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}m`;
+	if (count >= 1_000) return `${(count / 1_000).toFixed(1)}k`;
+	return String(count);
+}
+
+/** Format a context window in tokens as `X.XM` or `X.XK`, or raw if tiny. */
+function formatWindowLabel(window: number): string {
+	if (window >= 1_000_000) return `${(window / 1_000_000).toFixed(1)}M`;
+	if (window >= 1_000) return `${(window / 1_000).toFixed(1)}K`;
+	return String(window);
+}
+
+/** Context usage as a right-aligned `${pct}/${windowLabel}`, or dashes when the window is unknown. */
+export function contextPercent(contextTokens: number | undefined, contextWindow: number | undefined): string {
+	if (contextTokens === undefined || !contextWindow || contextWindow <= 0) return "—".padStart(CTX_COL_WIDTH);
+	const used = contextTokens && contextTokens > 0 ? contextTokens : 0;
+	const ratio = Math.max(0, Math.min(1, used / contextWindow));
+	return `${(ratio * 100).toFixed(1)}%/${formatWindowLabel(contextWindow)}`.padStart(CTX_COL_WIDTH);
+}
+
+/** Format cumulative model cost in the same precision as pi's usage footer. */
+export function formatCost(costUsd: number | undefined): string {
+	if (costUsd === undefined || !Number.isFinite(costUsd)) return "—";
+	return `$${Math.max(0, costUsd).toFixed(3)}`;
+}
+
+/** Elapsed time as `M:SS`. Minutes keep counting past 60 rather than rolling into an hours field. */
+export function formatElapsed(ms: number): string {
+	const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+	return `${Math.floor(totalSeconds / 60)}:${String(totalSeconds % 60).padStart(2, "0")}`;
+}

package/src/ui/agentTranscript.ts

@@ -0,0 +1,112 @@
+import type { Message } from "@earendil-works/pi-ai";
+import { wrapWords } from "./chrome.ts";
+
+export const CONTENT_SEPARATOR = "\n\n---\n\n";
+
+const MAX_TOOL_RESULT_CHARS = 2_000;
+const MAX_PREVIEW_MESSAGES = 6;
+const MAX_PREVIEW_CHARS = 4_000;
+
+/** Keep the end of text (most recent output) when over budget. */
+export function truncateFromStart(text: string, max: number): string {
+	return text.length > max ? `…${text.slice(text.length - max + 1)}` : text;
+}
+
+/** Keep the start of text when over budget (e.g. short tool args). */
+function truncateFromEnd(text: string, max: number): string {
+	return text.length > max ? `${text.slice(0, Math.max(0, max - 1))}…` : text;
+}
+
+/** Drop oldest message blocks first, then tail-truncate if one block alone exceeds budget. */
+export function formatContentWithSlidingWindow(parts: string[], maxChars: number): string {
+	if (parts.length === 0) return "";
+
+	const suffixLengths = new Array<number>(parts.length);
+	for (let index = parts.length - 1; index >= 0; index--) {
+		suffixLengths[index] = parts[index].length
+			+ (index < parts.length - 1 ? CONTENT_SEPARATOR.length + suffixLengths[index + 1] : 0);
+	}
+
+	let start = 0;
+	while (start < parts.length - 1) {
+		const prefixLength = start > 0 ? 1 + CONTENT_SEPARATOR.length : 0;
+		if (prefixLength + suffixLengths[start] <= maxChars) break;
+		start++;
+	}
+	let body = parts.slice(start).join(CONTENT_SEPARATOR);
+	if (start > 0) body = `…${CONTENT_SEPARATOR}${body}`;
+	return body.length <= maxChars ? body : truncateFromStart(body, maxChars);
+}
+
+function formatToolArgs(args: unknown): string {
+	if (args === undefined) return "";
+	try {
+		return truncateFromEnd(JSON.stringify(args), 300);
+	} catch {
+		return "";
+	}
+}
+
+export function formatMessage(message: Message): string {
+	if (message.role === "assistant") {
+		const parts: string[] = [];
+		for (const part of message.content) {
+			if (part.type === "text" && part.text) parts.push(part.text);
+			else if (part.type === "thinking" && part.thinking) parts.push(`#### Thinking\n\n_${part.thinking}_`);
+			else if (part.type === "toolCall") {
+				const args = formatToolArgs(part.arguments);
+				parts.push(`> 🔧 **${part.name}**${args ? ` ${args}` : ""}`);
+			}
+		}
+		return parts.join("\n\n");
+	}
+	if (message.role === "toolResult") {
+		const result = typeof message.content === "string"
+			? message.content
+			: message.content.map((part) => part.type === "text" ? part.text : "").join("\n");
+		return `#### 📋 ${message.toolName}\n\n\`\`\`\n${truncateFromStart(result, MAX_TOOL_RESULT_CHARS)}\n\`\`\``;
+	}
+	return "";
+}
+
+export function transcriptBody(
+	messages: Message[],
+	partial: Message | undefined,
+	state: "working" | "done" | "error" | "cancelled",
+	maxChars: number,
+): string {
+	const contentParts = messages.map(formatMessage).filter(Boolean);
+	if (partial) {
+		const formattedPartial = formatMessage(partial);
+		if (formattedPartial) contentParts.push(`${formattedPartial}\n\n_(generating…)_`);
+	}
+	if (contentParts.length === 0) {
+		return state === "error" ? "_(agent failed — no output)_" : "_(waiting for first response…)_";
+	}
+	return formatContentWithSlidingWindow(contentParts, maxChars);
+}
+
+function stripTerminalControls(text: string): string {
+	return text
+		.replace(/\x1b\][^\x07]*(?:\x07|$)/g, "")
+		.replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, "")
+		.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, "");
+}
+
+export function formatAgentPreview(
+	messages: Message[],
+	partial: Message | undefined,
+	width: number,
+	maxLines: number,
+): string[] {
+	if (width <= 0 || maxLines <= 0) return [];
+	const recentMessages = messages.slice(-MAX_PREVIEW_MESSAGES);
+	const body = stripTerminalControls(transcriptBody(recentMessages, partial, "working", MAX_PREVIEW_CHARS));
+	const generatingMarker = "_(generating…)_";
+	const generating = body.endsWith(generatingMarker);
+	const content = generating ? body.slice(0, -generatingMarker.length).trimEnd() : body;
+	const wrapped = wrapWords(content, width);
+	if (generating) wrapped.push("(generating…)");
+	const visible = wrapped.slice(-maxLines);
+	return [...Array<string>(Math.max(0, maxLines - visible.length)).fill(""), ...visible];
+}

package/src/ui/cancelOverlay.ts

@@ -0,0 +1,191 @@
+/**
+ * Cancel overlay — interactive list of in-flight subagents.
+ *
+ * Opened by ESC during MoA orchestration (or F4 in either planning
+ * path). Lists each agent with its live state, tool activity, loop badge and
+ * context bar, plus a "Cancel ALL" entry. Enter cancels the selected agent
+ * (the overlay stays open so more can be cancelled / the row can be watched
+ * flipping to ✗); selecting Cancel ALL aborts the whole run and closes.
+ *
+ * The component renders directly from `session.run` on every frame (driven by
+ * the 100ms spinner interval), so it never shows stale rows and transparently
+ * survives the orchestrator swapping `session.run` between phases (fan-out →
+ * synthesis) while it is open.
+ */
+
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { Key, matchesKey, type Component, type TUI } from "@earendil-works/pi-tui";
+import type { CancelSession } from "../runtime/cancelRun.ts";
+import { LOOP_THRESHOLD, usageBar } from "./agentStatus.ts";
+import {
+	BRAILLE_SPINNER_FRAMES,
+	ROUNDED_SINGLE_BOX,
+	SELECTOR,
+	UI_TICK_MS,
+	createFrame,
+} from "./chrome.ts";
+import { highlightActivity } from "./toolActivity.ts";
+
+const OVERLAY_MARGIN = 1;
+
+/** Show the cancel overlay for the session's live run. Resolves when closed. */
+export async function showCancelOverlay(ctx: ExtensionContext, session: CancelSession): Promise<void> {
+	if (ctx.mode !== "tui") return;
+	await ctx.ui.custom<void>(
+		(tui, theme, _keybindings, done) => new CancelOverlayComponent(tui, theme, session, done),
+		{
+			overlay: true,
+			overlayOptions: {
+				anchor: "center",
+				width: "70%",
+				minWidth: 50,
+				maxHeight: "70%",
+				margin: OVERLAY_MARGIN,
+			},
+		},
+	);
+}
+
+class CancelOverlayComponent implements Component {
+	private sel = 0;
+	private spinFrame = 0;
+	private closed = false;
+	private readonly timer: ReturnType<typeof setInterval>;
+
+	constructor(
+		private readonly tui: TUI,
+		private readonly theme: Theme,
+		private readonly session: CancelSession,
+		private readonly done: (value: void) => void,
+	) {
+		this.timer = setInterval(() => {
+			this.spinFrame = (this.spinFrame + 1) % BRAILLE_SPINNER_FRAMES.length;
+			tui.requestRender();
+		}, UI_TICK_MS);
+		session.closeOverlay = () => this.finish();
+	}
+
+	private finish(): void {
+		if (this.closed) return;
+		this.closed = true;
+		this.done(undefined);
+	}
+
+	/** Agent rows + the trailing "Cancel ALL" row. */
+	private rowCount(): number {
+		return (this.session.run?.agents.length ?? 0) + 1;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, Key.escape) || data === "q" || data === "Q") {
+			this.finish();
+			return;
+		}
+		if (matchesKey(data, Key.up) || data === "k") {
+			this.sel = Math.max(0, this.sel - 1);
+			this.tui.requestRender();
+			return;
+		}
+		if (matchesKey(data, Key.down) || data === "j") {
+			this.sel = Math.min(this.rowCount() - 1, this.sel + 1);
+			this.tui.requestRender();
+			return;
+		}
+		if (matchesKey(data, Key.enter)) {
+			const run = this.session.run;
+			if (!run) {
+				this.finish();
+				return;
+			}
+			if (this.sel >= run.agents.length) {
+				run.cancelAll();
+				this.finish();
+				return;
+			}
+			// No-op unless the agent is still running, so an Enter racing an
+			// agent's completion is harmless. Stay open to cancel more.
+			run.cancel(this.sel);
+			this.tui.requestRender();
+		}
+	}
+
+	render(width: number): string[] {
+		const run = this.session.run;
+		const agents = run?.agents ?? [];
+		this.sel = Math.max(0, Math.min(this.sel, agents.length));
+
+		const innerWidth = Math.max(20, width - 4);
+		const th = this.theme;
+		const frame = createFrame(th, innerWidth, {
+			glyphs: ROUNDED_SINGLE_BOX,
+			horizontalPadding: 1,
+			truncationMark: "…",
+			padToWidth: true,
+			minimumBodyWidth: 10,
+		});
+		const top = frame.top();
+		const sep = frame.separator();
+		const bottom = frame.bottom();
+		const row = frame.row;
+		const spin = th.fg("accent", BRAILLE_SPINNER_FRAMES[this.spinFrame % BRAILLE_SPINNER_FRAMES.length]!);
+
+		const runningCount = agents.filter((a) => a.state === "running").length;
+		const lines: string[] = [
+			top,
+			row(th.fg("accent", "Cancel agents?") + th.fg("dim", ` ${this.session.title} · ${runningCount} running`)),
+			sep,
+		];
+
+		if (agents.length === 0) {
+			lines.push(row(th.fg("dim", "No agents in flight.")));
+		}
+
+		for (let i = 0; i < agents.length; i++) {
+			const agent = agents[i];
+			const selected = i === this.sel;
+			const marker = selected ? th.fg("accent", SELECTOR) : " ";
+			const icon =
+				agent.state === "done" ? th.fg("success", "✓")
+				: agent.state === "error" || agent.state === "cancelled" ? th.fg("error", "✗")
+				: spin;
+			const stateText =
+				agent.state === "running" ? "running"
+				: agent.state === "cancelling" ? "cancelling…"
+				: agent.state;
+			const extras = this.session.getExtras?.(i);
+			const bar = extras && (extras.contextTokens !== undefined || extras.contextWindow !== undefined)
+				? `${usageBar(extras.contextTokens, extras.contextWindow, this.theme)} `
+				: "";
+			const label = selected ? th.fg("text", agent.label) : agent.label;
+			lines.push(row(`${marker} ${icon} ${bar}${label}  ${th.fg("dim", stateText)}`));
+
+			if (extras?.activity && (agent.state === "running" || agent.state === "cancelling")) {
+				const loop = (extras.loopCount ?? 0) >= LOOP_THRESHOLD
+					? th.fg("warning", `  (↻ ${extras.loopCount}×)`)
+					: "";
+				const gutter = th.fg("dim", "      ↳ ");
+				const activity = highlightActivity(th, extras.activity);
+				lines.push(row(`${gutter}${activity}${loop}`));
+			}
+		}
+
+		lines.push(sep);
+		const allSelected = this.sel === agents.length;
+		const allMarker = allSelected ? th.fg("accent", SELECTOR) : " ";
+		const allLabel = allSelected
+			? th.fg("error", "Cancel ALL running agents")
+			: "Cancel ALL running agents";
+		lines.push(row(`${allMarker} ${allLabel}`));
+		lines.push(sep);
+		lines.push(row(th.fg("dim", "↑↓/jk select · enter cancel · esc close")));
+		lines.push(bottom);
+		return lines;
+	}
+
+	invalidate(): void {}
+
+	dispose(): void {
+		clearInterval(this.timer);
+		if (this.session.closeOverlay) this.session.closeOverlay = undefined;
+	}
+}