@underactive/pi-topping-moa-fusion 0.1.0

package/src/ui/moaSetupOverlay.ts

@@ -0,0 +1,368 @@
+/**
+ * Persistent MoA model setup overlay.
+ *
+ * Lets users configure the planning-subagent and cheap/fast model defaults,
+ * the plan options, and the named MoA agent rosters without entering plan
+ * mode. The overview and filtered slot picker share one component so Escape
+ * returns from a slot to the overview before it can cancel the overlay.
+ *
+ * Two kinds of slot are configured here. Planning-subagent slots persist into
+ * the frontmatter of the installed agent files; MoA fan-out roles are no
+ * longer set per role here — they live in named rosters, edited by the staged
+ * roster manager and persisted only when this overlay's Save is chosen.
+ */
+
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, type TUI } from "@earendil-works/pi-tui";
+import {
+	defaultThinkingForModel,
+	loadMoaConfig,
+	saveMoaConfig,
+	type MoaConfig,
+} from "../config/settings.ts";
+import type { PlanRoster } from "../config/rosters.ts";
+import { modelRefLabel, type ModelRef, type ThinkingLevel } from "../shared/modelRefs.ts";
+import { CONFIGURABLE_AGENTS, readAgentDefault, writeAgentDefault } from "../agents/defaults.ts";
+import { getAvailableModelRefs } from "./moaModelPicker.ts";
+import { showRosterManager } from "./rosterEditor.ts";
+import { TwoPaneModelThinking } from "./twoPaneModelThinking.ts";
+import { getModelCatalogue } from "../config/modelCatalogue.ts";
+import {
+	MenuComponent,
+	PLAN_OVERLAY_OPTIONS,
+	renderMenuBottomBorder,
+	renderMenuContentRow,
+	renderMenuSeparator,
+	renderMenuTopBorder,
+	type MenuItem,
+} from "./menu.ts";
+import { ratioViewport, wrapWords } from "./chrome.ts";
+
+const AGENT_SLOT_COUNT = CONFIGURABLE_AGENTS.length;
+
+interface SetupSlot {
+	/** Row label in the overview menu. */
+	menuLabel: string;
+	/** Title bar of the slot's picker. */
+	title: string;
+	/** Guidance on what kind of model suits this role, shown under the picker title. */
+	description: string;
+	/** Whether the overview row appends the selected thinking level. */
+	showThinkingValue: boolean;
+	/** Where a confirmed selection is persisted. */
+	target: { kind: "agent"; agentName: string } | { kind: "role" };
+}
+
+const SLOTS: readonly SetupSlot[] = [
+	...CONFIGURABLE_AGENTS.map((agent): SetupSlot => ({
+		menuLabel: agent.menuLabel,
+		title: agent.title,
+		description: agent.description,
+		showThinkingValue: true,
+		target: { kind: "agent", agentName: agent.name },
+	})),
+	{
+		menuLabel: "cheap/fast agent",
+		title: "Cheap / fast agent — plan-file naming",
+		description: "Only summarizes a plan prompt into a short file name. Always called with thinking off and falls back safely if it cannot respond, so pick the cheapest model available.",
+		showThinkingValue: false,
+		target: { kind: "role" },
+	},
+];
+
+/** Working state carried across the staged settings ↔ roster-manager round trip. */
+interface SetupDraft {
+	selections: (ModelRef | undefined)[];
+	slotThinking: (ThinkingLevel | undefined)[];
+	thinkingOverrides: Record<string, ThinkingLevel>;
+	autoResolveConflicts: boolean;
+	useSummaryName: boolean;
+	rosters: PlanRoster[];
+}
+
+type SetupResult = { action: "save"; draft: SetupDraft } | { action: "rosters"; draft: SetupDraft } | undefined;
+type View = "overview" | "slot";
+
+class MoaSetupComponent implements Component {
+	private view: View = "overview";
+	private selectedSlot = 0;
+	private readonly twoPane: TwoPaneModelThinking;
+	private readonly menu: MenuComponent;
+	private autoResolveConflicts: boolean;
+	private useSummaryName: boolean;
+
+	constructor(
+		private readonly tui: TUI,
+		private readonly theme: Theme,
+		availableRefs: ModelRef[],
+		private readonly config: MoaConfig,
+		private readonly currentThinking: ThinkingLevel,
+		private readonly ctx: ExtensionContext,
+		private readonly draft: SetupDraft,
+		title: string,
+		private readonly done: (result: SetupResult) => void,
+	) {
+		this.twoPane = new TwoPaneModelThinking(tui, theme, availableRefs, config, currentThinking, ctx);
+		this.autoResolveConflicts = draft.autoResolveConflicts;
+		this.useSummaryName = draft.useSummaryName;
+		const slotItem = (slotIndex: number): MenuItem => ({
+			id: `role-${slotIndex}`,
+			label: SLOTS[slotIndex]!.menuLabel,
+			displayValue: this.roleDisplayValue(slotIndex),
+			onSelect: () => this.openSlot(slotIndex),
+		});
+		this.menu = new MenuComponent({
+			title,
+			fullWidth: true,
+			sections: [
+				{ title: "planning subagents", items: SLOTS.slice(0, AGENT_SLOT_COUNT).map((_unused, index) => slotItem(index)) },
+				{ title: "model roles", items: SLOTS.slice(AGENT_SLOT_COUNT).map((_unused, index) => slotItem(AGENT_SLOT_COUNT + index)) },
+				{
+					title: "rosters",
+					items: [{
+						id: "agent-rosters",
+						label: "agent rosters",
+						displayValue: `${this.draft.rosters.length} configured`,
+						description: "Reusable model + thinking assignments for every MoA role. Load one from the picker's Load Roster row.",
+						onSelect: () => this.done({ action: "rosters", draft: this.draftOut() }),
+					}],
+				},
+				{ title: "options", items: [
+					{ id: "auto-resolve", label: "auto resolve conflicts", value: this.autoResolveConflicts, onChange: (value: boolean) => { this.autoResolveConflicts = value; } },
+					{ id: "use-summary-name", label: "summarize plan names", value: this.useSummaryName, onChange: (value: boolean) => { this.useSummaryName = value; } },
+				] },
+			],
+			buttons: [
+				{ id: "save", label: "Save and Close", primary: true, onSelect: () => this.saveAndClose() },
+				{ id: "cancel", label: "Cancel", onSelect: () => this.done(undefined) },
+			],
+		}, theme, () => {
+			this.done(undefined);
+		}, tui);
+	}
+
+	private openSlot(slotIndex: number): void {
+		this.view = "slot";
+		this.selectedSlot = slotIndex;
+		const selectedRef = this.draft.selections[slotIndex];
+		this.twoPane.reset(selectedRef, this.draft.slotThinking[slotIndex]);
+		this.tui.requestRender();
+	}
+
+	private closeSlot(): void {
+		this.view = "overview";
+		this.tui.requestRender();
+	}
+
+	private roleDisplayValue(slotIndex: number): string | undefined {
+		const selected = this.draft.selections[slotIndex];
+		if (!selected) return undefined;
+		if (!SLOTS[slotIndex]!.showThinkingValue) return modelRefLabel(selected);
+		return `${modelRefLabel(selected)} (thinking: ${this.thinkingForSlot(slotIndex, selected)})`;
+	}
+
+	private draftOut(): SetupDraft {
+		return {
+			selections: [...this.draft.selections],
+			slotThinking: [...this.draft.slotThinking],
+			thinkingOverrides: { ...this.draft.thinkingOverrides },
+			autoResolveConflicts: this.autoResolveConflicts,
+			useSummaryName: this.useSummaryName,
+			rosters: [...this.draft.rosters],
+		};
+	}
+
+	private saveAndClose(): void {
+		this.done({ action: "save", draft: this.draftOut() });
+	}
+
+	private thinkingForSlot(slotIndex: number, ref: ModelRef): ThinkingLevel {
+		return this.draft.slotThinking[slotIndex]
+			?? defaultThinkingForModel(
+				modelRefLabel(ref),
+				this.config,
+				this.currentThinking,
+				getModelCatalogue(this.ctx.modelRegistry).thinkingLevelsFor(ref),
+			);
+	}
+
+	private confirmSlot(): void {
+		const selection = this.twoPane.getSelected();
+		this.draft.selections[this.selectedSlot] = selection.ref;
+		this.draft.slotThinking[this.selectedSlot] = selection.thinking;
+		this.draft.thinkingOverrides[modelRefLabel(selection.ref)] = selection.thinking;
+		// `config` is this invocation's own copy, so recording the choice here is
+		// what makes the level stick when the same slot is reopened before saving.
+		this.config.thinkingOverrides[modelRefLabel(selection.ref)] = selection.thinking;
+		this.menu.setItemValue(`role-${this.selectedSlot}`, this.roleDisplayValue(this.selectedSlot));
+		this.closeSlot();
+	}
+
+	private handleSlotInput(data: string): void {
+		const action = this.twoPane.handleInput(data);
+		if (action === "confirm") this.confirmSlot();
+		else if (action === "back") this.closeSlot();
+	}
+
+	handleInput(data: string): void {
+		if (this.view === "overview") this.menu.handleInput(data);
+		else this.handleSlotInput(data);
+	}
+
+	render(width: number): string[] {
+		const viewport = ratioViewport(process.stdout.rows, {
+			fallbackRows: 24,
+			ratio: 0.7,
+			minimum: 6,
+		});
+		if (this.view === "overview") {
+			this.menu.setViewport(viewport);
+			return this.menu.render(width);
+		}
+
+		const th = this.theme;
+		const innerWidth = Math.max(20, width - 2);
+		const bodyWidth = Math.max(10, innerWidth - 2);
+		const slot = SLOTS[this.selectedSlot]!;
+		const descriptionLines = wrapWords(slot.description, bodyWidth).slice(0, viewport >= 16 ? 2 : 1);
+		const hint = "type filters models • ↑↓ navigate pane • tab panes/buttons • ←→ switch/select • enter select • esc back";
+		const { actionRow, hintRows } = this.twoPane.renderFooter(bodyWidth, hint);
+		this.twoPane.setMaxVisibleRows(Math.max(1, viewport - 7 - descriptionLines.length - (hintRows.length - 1)));
+		const pickerLines = this.twoPane.render(bodyWidth);
+		const top = renderMenuTopBorder(th, innerWidth, slot.title);
+		const bottom = renderMenuBottomBorder(th, innerWidth);
+		const framedPicker = pickerLines.map((line) => renderMenuContentRow(th, innerWidth, ` ${line}`));
+		const lines = [
+			top,
+			...descriptionLines.map((line) => renderMenuContentRow(th, innerWidth, th.fg("muted", ` ${line}`))),
+			renderMenuSeparator(th, innerWidth),
+			...framedPicker,
+			renderMenuSeparator(th, innerWidth),
+			renderMenuContentRow(th, innerWidth, actionRow),
+			renderMenuSeparator(th, innerWidth),
+			...hintRows.map((line) => renderMenuContentRow(th, innerWidth, line)),
+			bottom,
+		];
+		if (lines.length <= viewport) return lines;
+		return [
+			top,
+			...framedPicker.slice(0, Math.max(1, viewport - 3)),
+			renderMenuContentRow(th, innerWidth, actionRow),
+			bottom,
+		].slice(0, viewport);
+	}
+
+	invalidate(): void {
+		this.menu.invalidate();
+		this.twoPane.invalidate();
+	}
+
+	dispose(): void {
+		this.menu.dispose();
+	}
+}
+
+/** Match a frontmatter model value, which may be a bare id rather than `provider/id`. */
+function resolveModelRef(raw: string | undefined, available: ModelRef[]): ModelRef | undefined {
+	if (!raw) return undefined;
+	return available.find((ref) => modelRefLabel(ref) === raw) ?? available.find((ref) => ref.id === raw);
+}
+
+/** Show the interactive MoA defaults setup overlay and persist selections on save. */
+export async function showMoaSetup(
+	ctx: ExtensionContext,
+	currentThinking: ThinkingLevel,
+	options: { firstRun?: boolean } = {},
+): Promise<boolean> {
+	if (!ctx.hasUI || ctx.mode !== "tui") {
+		ctx.ui.notify("MoA Fusion Settings requires interactive mode.", "warning");
+		return false;
+	}
+
+	const available = getAvailableModelRefs(ctx);
+	if (available.length === 0) {
+		ctx.ui.notify("No callable models are available for MoA Fusion Settings.", "warning");
+		return false;
+	}
+
+	const saved = loadMoaConfig();
+	const currentModelRef: ModelRef = ctx.model
+		? { provider: ctx.model.provider, id: ctx.model.id }
+		: available[0]!;
+
+	// Agent slots read their current value from the installed agent files, which
+	// stay authoritative even if someone hand-edits them.
+	const agentDefaults = CONFIGURABLE_AGENTS.map((agent) => readAgentDefault(agent.name));
+	const draft: SetupDraft = {
+		selections: [...agentDefaults.map((entry) => resolveModelRef(entry.model, available)), saved.cheap ?? currentModelRef],
+		slotThinking: [...agentDefaults.map((entry) => entry.thinking), undefined],
+		thinkingOverrides: {},
+		autoResolveConflicts: saved.autoResolveConflicts,
+		useSummaryName: saved.useSummaryName,
+		rosters: [...saved.rosters],
+	};
+
+	// Seed the shared thinking map so an agent's frontmatter level is preselected
+	// the first time its picker opens, not just shown on the overview row.
+	const seeded: MoaConfig = { ...saved, thinkingOverrides: { ...saved.thinkingOverrides } };
+	for (const [index, entry] of agentDefaults.entries()) {
+		const ref = draft.selections[index];
+		if (ref && entry.thinking) seeded.thinkingOverrides[modelRefLabel(ref)] = entry.thinking;
+	}
+
+	const title = options.firstRun
+		? "MoA Fusion Settings — set up agents and rosters before planning"
+		: "MoA Fusion Settings — configure agents and rosters";
+
+	// Staged loop: the overlay closes around the roster manager and reopens with
+	// the draft preserved, so one settings visit can edit slots and rosters.
+	let result: SetupResult;
+	for (;;) {
+		result = await ctx.ui.custom<SetupResult>(
+			(tui, theme, _keybindings, done) =>
+				new MoaSetupComponent(tui, theme, available, seeded, currentThinking, ctx, draft, title, done),
+			PLAN_OVERLAY_OPTIONS,
+		);
+		if (result === undefined) return false;
+		if (result.action === "rosters") {
+			draft.rosters = await showRosterManager(ctx, draft.rosters, { currentThinking });
+			continue;
+		}
+		break;
+	}
+	const finalDraft = result.draft;
+
+	const unwritable: string[] = [];
+	for (const [index, agent] of CONFIGURABLE_AGENTS.entries()) {
+		const ref = finalDraft.selections[index];
+		if (!ref) continue;
+		const thinking = finalDraft.slotThinking[index]
+			?? defaultThinkingForModel(
+				modelRefLabel(ref),
+				seeded,
+				currentThinking,
+				getModelCatalogue(ctx.modelRegistry).thinkingLevelsFor(ref),
+			);
+		if (!writeAgentDefault(agent.name, modelRefLabel(ref), thinking)) unwritable.push(agent.name);
+	}
+	if (unwritable.length > 0) {
+		ctx.ui.notify(`Could not update agent frontmatter for: ${unwritable.join(", ")}.`, "warning");
+	}
+
+	// The per-role fan-out keys (proposers/synthesizer/implementer/verifier) are
+	// intentionally left untouched: they remain load-bearing for resume,
+	// verifier fallback, and picker seeding, and are only written by a run's
+	// own confirmations.
+	const current = loadMoaConfig();
+	saveMoaConfig({
+		...current,
+		mode: "moa",
+		agentDefaultsConfigured: true,
+		autoResolveConflicts: finalDraft.autoResolveConflicts,
+		useSummaryName: finalDraft.useSummaryName,
+		cheap: finalDraft.selections[AGENT_SLOT_COUNT],
+		rosters: finalDraft.rosters,
+		thinkingOverrides: { ...current.thinkingOverrides, ...finalDraft.thinkingOverrides },
+	});
+	return true;
+}

package/src/ui/modelLabel.ts

@@ -0,0 +1,61 @@
+import { truncateToWidth, visibleWidth, type SelectListLayoutOptions } from "@earendil-works/pi-tui";
+
+/**
+ * Truncates a slash-namespaced model ref (`provider/accounts/.../model-name`)
+ * so the parts that matter to identify the model survive first. Priority:
+ * the model name (last segment) is mandatory, then the first segment (the
+ * namespace root), then the segment right before the model name, then
+ * whatever else still fits. Skipped runs collapse to a single ellipsis.
+ */
+export function smartTruncateModelLabel(text: string, maxWidth: number): string {
+	const ELLIPSIS = "…";
+	const ANSI_RE = /\x1b\[[0-9;]*m/g;
+	if (visibleWidth(text) <= maxWidth) return text;
+	const segments = text.split("/");
+	const n = segments.length;
+	if (n === 1) return truncateToWidth(text, maxWidth, ELLIPSIS).replace(ANSI_RE, "");
+
+	const lastIndex = n - 1;
+	const kept = new Set<number>([lastIndex]);
+	const priority: number[] = [];
+	priority.push(0);
+	if (n - 2 > 0) priority.push(n - 2);
+	for (let i = 1; i <= n - 3; i++) priority.push(i);
+
+	const render = () => {
+		const parts: string[] = [];
+		let i = 0;
+		while (i < n) {
+			if (kept.has(i)) {
+				parts.push(segments[i]!);
+				i++;
+			} else {
+				while (i < n && !kept.has(i)) i++;
+				parts.push(ELLIPSIS);
+			}
+		}
+		return parts.join("/");
+	};
+
+	let current = render();
+	if (visibleWidth(current) > maxWidth) {
+		const skeleton = `${ELLIPSIS}/`;
+		const budget = Math.max(0, maxWidth - visibleWidth(skeleton));
+		return (skeleton + truncateToWidth(segments[lastIndex]!, budget, ELLIPSIS)).replace(ANSI_RE, "");
+	}
+
+	for (const index of priority) {
+		kept.add(index);
+		const candidate = render();
+		if (visibleWidth(candidate) > maxWidth) {
+			kept.delete(index);
+			continue;
+		}
+		current = candidate;
+	}
+	return current;
+}
+
+export const MODEL_LIST_LAYOUT: SelectListLayoutOptions = {
+	truncatePrimary: ({ text, maxWidth }) => smartTruncateModelLabel(text, maxWidth),
+};

package/src/ui/observeOverlay.ts

@@ -0,0 +1,206 @@
+import type { Message } from "@earendil-works/pi-ai";
+import { getMarkdownTheme, type ExtensionContext, type Theme } from "@earendil-works/pi-coding-agent";
+import { Key, Markdown, matchesKey, truncateToWidth, type Component, type TUI } from "@earendil-works/pi-tui";
+import { transcriptBody, truncateFromStart } from "./agentTranscript.ts";
+import { ROUNDED_SINGLE_BOX, UI_TICK_MS, createFrame, ratioViewport, safeRenderWidth } from "./chrome.ts";
+
+export interface ObserveAgentData {
+	label: string;
+	model: string;
+	task: string;
+	messages: Message[];
+	partial?: Message;
+	state: "working" | "done" | "error" | "cancelled";
+}
+
+export interface ObserveSession {
+	title: string;
+	phase: "fanout" | "synthesizing";
+	agents: ObserveAgentData[];
+	synthesizer?: ObserveAgentData;
+	overlayOpen: boolean;
+	closeOverlay?: () => void;
+}
+
+const OVERLAY_MARGIN = 1;
+const OVERLAY_HEIGHT_RATIO = 0.9;
+const MAX_RENDERED_CHARS = 40_000;
+const MAX_TASK_WIDTH = 120;
+
+/** Render completed plus currently streaming message content for an observed agent. */
+export function formatAgentMarkdown(agent: ObserveAgentData): string {
+	const task = truncateToWidth(agent.task.replace(/\s+/g, " ").trim(), MAX_TASK_WIDTH, "…", false);
+	const header = [`## ${agent.label}`, `_${agent.model} · ${agent.state}_`, "", `**Task:** ${task}`, ""].join("\n");
+	const contentBudget = Math.max(0, MAX_RENDERED_CHARS - header.length - 1);
+	const body = transcriptBody(agent.messages, agent.partial, agent.state, contentBudget);
+	const result = `${header}${body}`;
+	return result.length <= MAX_RENDERED_CHARS ? result : truncateFromStart(result, MAX_RENDERED_CHARS);
+}
+
+export async function showObserveOverlay(ctx: ExtensionContext, session: ObserveSession): Promise<void> {
+	if (ctx.mode !== "tui") return;
+	await ctx.ui.custom<void>(
+		(tui, theme, _keybindings, done) => new ObserveOverlayComponent(tui, theme, session, done),
+		{
+			overlay: true,
+			overlayOptions: { anchor: "center", width: "90%", minWidth: 60, maxHeight: "90%", margin: OVERLAY_MARGIN },
+		},
+	);
+}
+
+class ObserveOverlayComponent implements Component {
+	private selected = 0;
+	private scrollOffset = 0;
+	/** When true, viewport stays pinned to the newest output (default). */
+	private pinnedToBottom = true;
+	private closed = false;
+	private markdownCache: {
+		agent: ObserveAgentData | undefined;
+		messagesLength: number;
+		partial: Message | undefined;
+		state: ObserveAgentData["state"] | undefined;
+		width: number;
+		rendered: string[];
+	} | undefined;
+	private readonly timer: ReturnType<typeof setInterval>;
+
+	constructor(
+		private readonly tui: TUI,
+		private readonly theme: Theme,
+		private readonly session: ObserveSession,
+		private readonly done: (value: void) => void,
+	) {
+		this.timer = setInterval(() => tui.requestRender(), UI_TICK_MS);
+		session.closeOverlay = () => this.finish();
+	}
+
+	private finish(): void {
+		if (this.closed) return;
+		this.closed = true;
+		this.done(undefined);
+	}
+
+	private activeAgent(): ObserveAgentData | undefined {
+		return this.session.phase === "synthesizing" ? this.session.synthesizer : this.session.agents[this.selected];
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, Key.escape) || data === "q" || data === "Q") {
+			this.finish();
+			return;
+		}
+		if (data === "p" || data === "P") {
+			this.pinnedToBottom = !this.pinnedToBottom;
+			if (this.pinnedToBottom) this.scrollOffset = Number.MAX_SAFE_INTEGER;
+			this.tui.requestRender();
+			return;
+		}
+		if (this.session.phase === "fanout" && /^[1-9]$/.test(data)) {
+			const index = Number.parseInt(data, 10) - 1;
+			if (this.session.agents[index]) {
+				this.selected = index;
+				this.scrollOffset = 0;
+				this.pinnedToBottom = true;
+				this.tui.requestRender();
+			}
+			return;
+		}
+		if (this.pinnedToBottom && (matchesKey(data, Key.down) || data === "j" || matchesKey(data, Key.pageDown) || matchesKey(data, Key.ctrl("f")) || data === "d")) {
+			return;
+		}
+		let delta = 0;
+		if (matchesKey(data, Key.down) || data === "j") delta = 1;
+		else if (matchesKey(data, Key.up) || data === "k") {
+			delta = -1;
+			this.pinnedToBottom = false;
+		}
+		else if (matchesKey(data, Key.pageDown) || matchesKey(data, Key.ctrl("f")) || data === "d") delta = 12;
+		else if (matchesKey(data, Key.pageUp) || matchesKey(data, Key.ctrl("b")) || data === "u") {
+			delta = -12;
+			this.pinnedToBottom = false;
+		}
+		else if (matchesKey(data, Key.home)) {
+			this.scrollOffset = 0;
+			this.pinnedToBottom = false;
+		}
+		else if (matchesKey(data, Key.end)) {
+			this.scrollOffset = Number.MAX_SAFE_INTEGER;
+			this.pinnedToBottom = true;
+		}
+		else return;
+		if (delta < 0) this.pinnedToBottom = false;
+		this.scrollOffset += delta;
+		this.tui.requestRender();
+	}
+
+	render(width: number): string[] {
+		const terminalWidth = Math.max(20, process.stdout.columns ?? 80);
+		const safeWidth = safeRenderWidth(width, terminalWidth);
+		const innerWidth = Math.max(20, safeWidth - 4);
+		const frame = createFrame(this.theme, innerWidth, {
+			glyphs: ROUNDED_SINGLE_BOX,
+			horizontalPadding: 1,
+			truncationMark: "…",
+			padToWidth: true,
+			minimumBodyWidth: 10,
+		});
+		const bodyWidth = frame.bodyWidth;
+		const agent = this.activeAgent();
+		const messagesLength = agent?.messages.length ?? 0;
+		if (!this.markdownCache
+			|| this.markdownCache.agent !== agent
+			|| this.markdownCache.messagesLength !== messagesLength
+			|| this.markdownCache.partial !== agent?.partial
+			|| this.markdownCache.state !== agent?.state
+			|| this.markdownCache.width !== bodyWidth) {
+			const markdown = new Markdown(agent ? formatAgentMarkdown(agent) : "_(no agent selected)_", 0, 0, getMarkdownTheme());
+			this.markdownCache = {
+				agent,
+				messagesLength,
+				partial: agent?.partial,
+				state: agent?.state,
+				width: bodyWidth,
+				rendered: markdown.render(bodyWidth),
+			};
+		}
+		const rendered = this.markdownCache.rendered;
+		const viewport = Math.max(4, Math.min(rendered.length, ratioViewport(process.stdout.rows, {
+			fallbackRows: 24,
+			ratio: OVERLAY_HEIGHT_RATIO,
+			minimum: 4,
+			chromeRows: 6,
+		})));
+		const maxOffset = Math.max(0, rendered.length - viewport);
+		if (this.pinnedToBottom) this.scrollOffset = maxOffset;
+		this.scrollOffset = Math.max(0, Math.min(this.scrollOffset, maxOffset));
+		const visible = rendered.slice(this.scrollOffset, this.scrollOffset + viewport);
+		while (visible.length < viewport) visible.push("");
+		const running = (this.session.phase === "fanout" ? this.session.agents : [this.session.synthesizer]).filter((item) => item?.state === "working").length;
+		const pin = this.pinnedToBottom ? " · pinned" : "";
+		const modelTag = this.activeAgent()?.model;
+		const title = `${this.session.title} · ${this.session.phase === "fanout" ? "fan-out" : "synthesizing"} · ${running} running${pin}`;
+		const tab = this.session.phase === "fanout" ? ` · ${this.selected + 1}/${this.session.agents.length}` : "";
+		const modelName = modelTag ? ` · ${modelTag}` : "";
+		const pinHelp = this.pinnedToBottom ? "p unpin" : "p pin bottom";
+		const help = this.session.phase === "fanout"
+			? `↑↓/jk scroll · u/d page · ${pinHelp} · # switch agent · esc/q close`
+			: `↑↓/jk scroll · u/d page · ${pinHelp} · esc/q close`;
+		const th = this.theme;
+		return [
+			frame.top(),
+			frame.row(th.fg("accent", "Observe agents") + th.fg("dim", ` ${title}${tab}${modelName}`)),
+			frame.separator(),
+			...visible.map((line) => frame.row(line)),
+			frame.separator(),
+			frame.row(th.fg("dim", help)),
+			frame.bottom(),
+		];
+	}
+
+	invalidate(): void {}
+
+	dispose(): void {
+		clearInterval(this.timer);
+		if (this.session.closeOverlay) this.session.closeOverlay = undefined;
+	}
+}