@oh-my-pi/pi-tui 18.2.11 → 18.3.1

package/src/overlays/plan-review-overlay.ts

@@ -19,7 +19,7 @@
 import {
 	type Component,
 	Ellipsis,
-	Input,
+	Editor,
 	Markdown,
 	type MarkdownTheme,
 	matchesKey,
@@ -31,7 +31,7 @@ import {
 } from "../index";
 import { sanitizeText } from "@oh-my-pi/pi-utils";
 import { sanitizeStatusText } from "../chrome/shared";
-import { getMarkdownTheme, theme } from "../theme/theme";
+import { getEditorTheme, getMarkdownTheme, theme } from "../theme/theme";
 import {
 	matchesAppExternalEditor,
 	matchesSelectCancel,
@@ -57,6 +57,8 @@ import { renderSegmentTrack } from "../chrome/segment-track";
 const OVERLAY_TITLE = "Plan Review";
 /** Minimum plan-body rows kept visible even on short terminals. */
 const MIN_BODY_ROWS = 3;
+/** Visible rows for the in-overlay annotation editor before it scrolls. */
+const MAX_ANNOTATION_EDITOR_ROWS = 6;
 /** Sidebar gates: enough headings, a wide terminal, and a usable body column. */
 const SIDEBAR_MIN_HEADINGS = 2;
 const SIDEBAR_MIN_TOTAL_WIDTH = 64;
@@ -93,6 +95,16 @@ interface BodyRowAnchor {
 	contextTruncated: boolean;
 }
 
+interface AnnotationSelection {
+	sectionIndex: number;
+	annotationIndex: number;
+}
+
+interface AnnotationChooser {
+	entries: AnnotationSelection[];
+	selected: number;
+}
+
 /** Serializable annotations retained by the plan-review owner between overlays. */
 export interface PlanReviewAnnotationState {
 	annotations: Array<{
@@ -207,8 +219,10 @@ export class PlanReviewOverlay implements Component {
 	/** Label of the committed choice, shown while the async approval settles. */
 	#committedLabel: string | undefined;
 	#annotating = false;
-	#input: Input;
+	#editor: Editor;
 	#annotationTarget: BodyRowAnchor | { sectionIndex: number; row: null; context: null } | undefined;
+	#editingAnnotation: AnnotationSelection | undefined;
+	#annotationChooser: AnnotationChooser | undefined;
 
 	constructor(
 		planContent: string,
@@ -236,10 +250,11 @@ export class PlanReviewOverlay implements Component {
 		} else {
 			this.#sliderIndex = 0;
 		}
-		this.#input = new Input();
-		this.#input.setUseTerminalCursor(false);
-		this.#input.onSubmit = value => this.#submitAnnotation(value);
-		this.#input.onEscape = () => this.#exitAnnotate();
+		this.#editor = new Editor(getEditorTheme());
+		this.#editor.setBorderVisible(false);
+		this.#editor.setPromptGutter("> ");
+		this.#editor.setUseTerminalCursor(false);
+		this.#editor.onSubmit = value => this.#submitAnnotation(value);
 		this.#setSections(planContent);
 		this.#restoreAnnotationState(options.annotationState);
 		if (Array.isArray(options.annotationState?.annotations) && options.annotationState.annotations.length > 0) {
@@ -490,14 +505,22 @@ export class PlanReviewOverlay implements Component {
 	handleInput(keyData: string): void {
 		if (this.#committed) return;
 		if (keyData.startsWith("\x1b[<") && this.#handleMouse(keyData)) return;
+		if (this.#annotationChooser) {
+			this.#handleAnnotationChooser(keyData);
+			return;
+		}
 		if (this.#annotating) {
 			if (this.callbacks.onAnnotationExternalEditor && matchesAppExternalEditor(keyData)) {
-				this.callbacks.onAnnotationExternalEditor(this.#input.getValue(), text => {
-					if (text !== null) this.#submitAnnotation(text);
+				this.callbacks.onAnnotationExternalEditor(this.#editor.getExpandedText(), text => {
+					if (text !== null && this.#annotating) this.#editor.setText(text);
 				});
 				return;
 			}
-			this.#input.handleInput(keyData);
+			if (matchesSelectCancel(keyData)) {
+				this.#exitAnnotate();
+				return;
+			}
+			this.#editor.handleInput(keyData);
 			return;
 		}
 		if (matchesSelectCancel(keyData)) {
@@ -505,6 +528,14 @@ export class PlanReviewOverlay implements Component {
 			this.callbacks.onCancel();
 			return;
 		}
+		if (this.#focus !== "actions" && keyData === "u") {
+			this.#undoLast();
+			return;
+		}
+		if (this.#focus !== "actions" && keyData === "e") {
+			this.#editCurrentAnnotation();
+			return;
+		}
 		if (this.callbacks.onExternalEditor && matchesAppExternalEditor(keyData)) {
 			this.callbacks.onExternalEditor();
 			return;
@@ -726,10 +757,6 @@ export class PlanReviewOverlay implements Component {
 			this.#startSectionAnnotate();
 			return;
 		}
-		if (data === "u") {
-			this.#undoLast();
-			return;
-		}
 	}
 
 	#moveTocCursor(delta: number): void {
@@ -828,39 +855,145 @@ export class PlanReviewOverlay implements Component {
 
 	#startAnnotate(target: BodyRowAnchor | { sectionIndex: number; row: null; context: null }): void {
 		this.#annotationTarget = target;
+		this.#editingAnnotation = undefined;
+		this.#annotating = true;
+		this.#editor.setText("");
+	}
+
+	#startExistingAnnotation(selection: AnnotationSelection): void {
+		const section = this.#sections[selection.sectionIndex];
+		const annotation = section?.annotations[selection.annotationIndex];
+		if (!section || !annotation) return;
+		this.#annotationChooser = undefined;
+		this.#editingAnnotation = selection;
+		this.#annotationTarget =
+			annotation.target.kind === "section"
+				? { sectionIndex: selection.sectionIndex, row: null, context: null }
+				: {
+						sectionIndex: selection.sectionIndex,
+						row: annotation.target.row,
+						context: annotation.target.context,
+						contextTruncated: annotation.target.contextTruncated,
+					};
 		this.#annotating = true;
-		this.#input.setValue("");
+		this.#editor.setText(annotation.note);
+	}
+
+	#annotationMatchesBodyAnchor(annotation: OverlayAnnotation, anchor: BodyRowAnchor): boolean {
+		if (annotation.target.kind === "section") return true;
+		if (annotation.target.row === anchor.row && annotation.target.context === anchor.context) return true;
+		const seenRows = new Set<number>();
+		const sectionAnchors: LineAnchorContext[] = [];
+		for (const candidate of this.#bodyRowAnchors) {
+			if (candidate.sectionIndex !== anchor.sectionIndex || seenRows.has(candidate.row)) continue;
+			seenRows.add(candidate.row);
+			sectionAnchors.push({ text: candidate.context, truncated: candidate.contextTruncated });
+		}
+		const resolvedRow = this.#resolveLineRow(
+			annotation.target.row,
+			{ text: annotation.target.context, truncated: annotation.target.contextTruncated },
+			sectionAnchors,
+		);
+		return resolvedRow === anchor.row;
+	}
+
+	#annotationCandidates(): AnnotationSelection[] {
+		if (this.#focus === "toc") {
+			const sectionIndex = this.#toc[this.#tocCursor];
+			const section = sectionIndex === undefined ? undefined : this.#sections[sectionIndex];
+			if (!section || section.annotations.length === 0) return [];
+			return section.annotations.map((_, annotationIndex) => ({ sectionIndex, annotationIndex }));
+		}
+		if (this.#focus !== "body") return [];
+		const maxRow = this.#bodyRowAnchors.length - 1;
+		if (maxRow < 0) return [];
+		const topRow = Math.max(0, Math.min(maxRow, Math.floor(this.#scrollView.getScrollOffset())));
+		const anchor = this.#bodyRowAnchors[topRow];
+		const section = anchor ? this.#sections[anchor.sectionIndex] : undefined;
+		if (!anchor || !section) return [];
+		const entries: AnnotationSelection[] = [];
+		for (const [annotationIndex, annotation] of section.annotations.entries()) {
+			if (this.#annotationMatchesBodyAnchor(annotation, anchor)) {
+				entries.push({ sectionIndex: anchor.sectionIndex, annotationIndex });
+			}
+		}
+		return entries;
+	}
+
+	#editCurrentAnnotation(): void {
+		const entries = this.#annotationCandidates();
+		if (entries.length === 0) return;
+		if (entries.length === 1) {
+			this.#startExistingAnnotation(entries[0]!);
+			return;
+		}
+		this.#annotationChooser = { entries, selected: 0 };
+	}
+
+	#handleAnnotationChooser(data: string): void {
+		const chooser = this.#annotationChooser;
+		if (!chooser) return;
+		if (matchesSelectCancel(data)) {
+			this.#annotationChooser = undefined;
+			return;
+		}
+		if (matchesSelectUp(data) || matchesKey(data, "k")) {
+			chooser.selected = (chooser.selected - 1 + chooser.entries.length) % chooser.entries.length;
+			return;
+		}
+		if (matchesSelectDown(data) || matchesKey(data, "j")) {
+			chooser.selected = (chooser.selected + 1) % chooser.entries.length;
+			return;
+		}
+		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
+			const selection = chooser.entries[chooser.selected];
+			this.#annotationChooser = undefined;
+			if (selection) this.#startExistingAnnotation(selection);
+		}
 	}
 
 	#submitAnnotation(value: string): void {
-		this.#annotating = false;
 		const note = value.trim();
 		const target = this.#annotationTarget;
+		const editing = this.#editingAnnotation;
+		this.#annotating = false;
 		this.#annotationTarget = undefined;
-		const section = target ? this.#sections[target.sectionIndex] : undefined;
-		if (note && section && target) {
+		this.#editingAnnotation = undefined;
+		this.#editor.setText("");
+		if (editing) {
+			const section = this.#sections[editing.sectionIndex];
+			const annotation = section?.annotations[editing.annotationIndex];
+			if (!section || !annotation) return;
 			this.#pushUndo();
-			section.annotations.push({
-				note,
-				target:
-					target.row === null
-						? { kind: "section" }
-						: {
-								kind: "line",
-								row: target.row,
-								context: target.context,
-								contextTruncated: target.contextTruncated,
-							},
-			});
+			if (note) annotation.note = note;
+			else section.annotations.splice(editing.annotationIndex, 1);
 			this.#recomputeFeedback();
+			return;
 		}
-		this.#input.setValue("");
+		if (!note || !target) return;
+		const section = this.#sections[target.sectionIndex];
+		if (!section) return;
+		this.#pushUndo();
+		section.annotations.push({
+			note,
+			target:
+				target.row === null
+					? { kind: "section" }
+					: {
+							kind: "line",
+							row: target.row,
+							context: target.context,
+							contextTruncated: target.contextTruncated,
+						},
+		});
+		this.#recomputeFeedback();
 	}
 
 	#exitAnnotate(): void {
 		this.#annotating = false;
 		this.#annotationTarget = undefined;
-		this.#input.setValue("");
+		this.#editingAnnotation = undefined;
+		this.#editor.setText("");
 	}
 
 	#recomputeFeedback(): void {
@@ -942,10 +1075,10 @@ export class PlanReviewOverlay implements Component {
 				if (this.#slider) parts.push("◂▸ model");
 				break;
 			case "toc":
-				parts.push("↑↓ section", "⏎ open", "a annotate", "d delete", "u undo");
+				parts.push("↑↓ section", "⏎ open", "a annotate", "e edit", "d delete", "u undo");
 				break;
 			case "body":
-				parts.push("↑↓ scroll", "⇧ faster", "pgup/pgdn", "g/G ends", "a annotate");
+				parts.push("↑↓ scroll", "⇧ faster", "pgup/pgdn", "g/G ends", "a annotate", "e edit", "u undo");
 				break;
 		}
 		if (this.callbacks.onCopyPlan) parts.push("c copy");
@@ -1136,8 +1269,39 @@ export class PlanReviewOverlay implements Component {
 		if (glow) return theme.fg("accent", line);
 		return theme.fg("muted", line);
 	}
+	#renderAnnotationChooserLines(innerWidth: number, maxRows = Number.POSITIVE_INFINITY): string[] {
+		const chooser = this.#annotationChooser;
+		if (!chooser || maxRows <= 0) return [];
+		const optionLimit = Number.isFinite(maxRows) ? Math.max(0, Math.floor(maxRows) - 2) : chooser.entries.length;
+		const start =
+			optionLimit >= chooser.entries.length
+				? 0
+				: Math.max(
+						0,
+						Math.min(chooser.selected - Math.floor(optionLimit / 2), chooser.entries.length - optionLimit),
+					);
+		const lines = [theme.bold(theme.fg("accent", "Edit annotation"))];
+		for (let windowIndex = 0; windowIndex < optionLimit; windowIndex++) {
+			const optionIndex = start + windowIndex;
+			const selection = chooser.entries[optionIndex];
+			if (!selection) continue;
+			const section = this.#sections[selection.sectionIndex];
+			const annotation = section?.annotations[selection.annotationIndex];
+			if (!section || !annotation) continue;
+			const target = annotation.target.kind === "section" ? "section" : `line ${annotation.target.context}`;
+			const note = sanitizeStatusText(annotation.note);
+			const marker = optionIndex === chooser.selected ? theme.fg("accent", "› ") : "  ";
+			const label = `${marker}${sanitizeStatusText(section.title || "Plan preamble")} · ${target} · ${note}`;
+			lines.push(truncateToWidth(label, innerWidth, Ellipsis.Unicode));
+		}
+		if (!Number.isFinite(maxRows) || maxRows >= 2) {
+			lines.push(theme.fg("dim", "↑↓ choose · enter edit · esc cancel"));
+		}
+		return lines.slice(0, Math.max(0, Math.floor(maxRows)));
+	}
 
-	#renderFooterLines(innerWidth: number): string[] {
+	#renderFooterLines(innerWidth: number, maxChooserRows = Number.POSITIVE_INFINITY): string[] {
+		if (this.#annotationChooser) return this.#renderAnnotationChooserLines(innerWidth, maxChooserRows);
 		if (this.#annotating) {
 			const target = this.#annotationTarget;
 			const section = target ? this.#sections[target.sectionIndex] : undefined;
@@ -1151,9 +1315,12 @@ export class PlanReviewOverlay implements Component {
 				innerWidth,
 				Ellipsis.Unicode,
 			);
-			const hintParts = ["enter save", "esc cancel"];
+			const hintParts = ["enter save", "shift+enter newline", "esc cancel"];
+			if (this.#editingAnnotation) hintParts.push("empty deletes");
 			if (this.#externalEditorLabel) hintParts.push(`${this.#externalEditorLabel} editor`);
-			return [caption, this.#input.render(innerWidth)[0] ?? "", theme.fg("dim", hintParts.join(" · "))];
+			this.#editor.setMaxHeight(Math.max(1, Math.min(MAX_ANNOTATION_EDITOR_ROWS, (process.stdout.rows || 40) - 12)));
+			this.#editor.focused = true;
+			return [caption, ...this.#editor.render(innerWidth), theme.fg("dim", hintParts.join(" · "))];
 		}
 		return [theme.fg("dim", this.#buildHelp())];
 	}
@@ -1171,14 +1338,20 @@ export class PlanReviewOverlay implements Component {
 		const submittingLabel = this.#committedLabel ? `${this.#committedLabel} — submitting…` : "Submitting…";
 		const optionLines = committed ? [theme.bold(theme.fg("accent", submittingLabel))] : this.#renderOptionLines();
 		const promptLines = this.#promptTitle ? [theme.bold(theme.fg("accent", this.#promptTitle))] : [];
+		const baseChrome = 4 + promptLines.length + sliderLines.length + optionLines.length;
+		const chooserFooterRows = this.#annotationChooser
+			? Math.max(0, termHeight - baseChrome - MIN_BODY_ROWS)
+			: Number.POSITIVE_INFINITY;
 		const footerLines = committed
 			? [theme.fg("dim", "Applying your selection — this can take a moment while context is prepared.")]
-			: this.#renderFooterLines(innerWidth);
+			: this.#renderFooterLines(innerWidth, chooserFooterRows);
 
 		// Chrome rows: top border, two dividers, bottom border, plus the
 		// prompt/slider/option/footer rows between them.
-		const chrome = 4 + promptLines.length + sliderLines.length + optionLines.length + footerLines.length;
-		const regionRows = Math.max(MIN_BODY_ROWS, termHeight - chrome);
+		const chrome = baseChrome + footerLines.length;
+		const regionRows = this.#annotationChooser
+			? Math.max(0, termHeight - chrome)
+			: Math.max(MIN_BODY_ROWS, termHeight - chrome);
 
 		const bodyLines = this.#buildBody(bodyContentWidth);
 		this.#layoutBody(bodyLines, regionRows);

package/src/overlays/settings-defs.ts

@@ -75,6 +75,7 @@ export const TAB_GROUPS: Record<SettingTab, readonly string[]> = {
 		"Todos",
 		"Grep & Browser",
 		"Computer",
+		"IDA Pro",
 		"GitHub",
 		"Output Limits",
 		"Execution",
@@ -131,6 +132,11 @@ export interface SettingsHost {
 	entries: readonly SettingsDisplayEntry[];
 	get(path: string): unknown;
 	set(path: string, value: unknown): void;
+	/**
+	 * Removes the value from the global config: a project or other layer, or an environment
+	 * variable, that configures the setting still applies; otherwise the default does.
+	 */
+	unset(path: string): void;
 	normalizeProviderLimits(value: unknown): Record<string, number>;
 	validateProviderLimits(value: unknown): Record<string, number>;
 }

package/src/overlays/settings-selector.ts

@@ -1100,9 +1100,10 @@ export class SettingsSelectorComponent implements Component {
 			this.#formatTextInputEditValue(def.path, this.#context.settings.get(def.path)),
 			def.secret,
 			value => {
-				// Empty string clears the setting; undefined-typed string settings
-				// store "" which the browser.ts expandPath ignores (no-op fallback).
-				this.#setSettingValue(def.path, value);
+				// An empty field removes the persisted value, so the default (or an
+				// environment fallback) applies again instead of a pinned "".
+				if (value === "") this.#context.settings.unset(def.path);
+				else this.#setSettingValue(def.path, value);
 				this.#callbacks.onChange(def.path, this.#context.settings.get(def.path));
 				wrappedDone(this.#formatTextInputValue(def, this.#context.settings.get(def.path)));
 			},

package/src/overlays/usage-dashboard.ts

@@ -83,6 +83,8 @@ export interface ProviderCard {
 		soonestExpiryMs?: number;
 		unavailableReasons: string[];
 	};
+	/** Labels of accounts with verified Daybreak access. */
+	daybreakAccounts?: string[];
 }
 
 /**
@@ -202,6 +204,17 @@ export function buildProviderCards(reports: UsageReport[], nowMs: number): Provi
 						unavailableReasons,
 					}
 				: undefined;
+		const daybreakAccounts = providerReports.flatMap((report, index) =>
+			report.metadata?.daybreak === true
+				? [
+						typeof report.metadata.email === "string" && report.metadata.email
+							? report.metadata.email
+							: typeof report.metadata.accountId === "string" && report.metadata.accountId
+								? report.metadata.accountId
+								: `account ${index + 1}`,
+					]
+				: [],
+		);
 		cards.push({
 			provider,
 			name: formatProviderName(provider),
@@ -209,8 +222,11 @@ export function buildProviderCards(reports: UsageReport[], nowMs: number): Provi
 			windows,
 			unlimited: windows.length === 0,
 			idle:
-				!resetCredits && windows.every(window => window.fraction !== undefined && window.fraction < IDLE_FRACTION),
+				!resetCredits &&
+				daybreakAccounts.length === 0 &&
+				windows.every(window => window.fraction !== undefined && window.fraction < IDLE_FRACTION),
 			resetCredits,
+			...(daybreakAccounts.length > 0 ? { daybreakAccounts } : {}),
 		});
 	}
 
@@ -453,6 +469,11 @@ export class UsageDashboardComponent implements Component {
 		const titlePad = Math.max(0, width - 2 - visibleWidth(title) - visibleWidth(accountsText));
 		lines.push(`${this.#statusIcon(cardStatus)} ${title}${" ".repeat(titlePad)}${accountsText}`);
 
+		for (const account of card.daybreakAccounts ?? []) {
+			const label = sanitizeText(account.replace(/[\r\n\t]+/g, " "));
+			lines.push(`  ${theme.fg("success", truncateToWidth(`daybreak · ${label}`, width - 2))}`);
+		}
+
 		if (card.resetCredits) {
 			const resets = card.resetCredits;
 			let resetText = `✦ ${resets.bankedCount} reset${resets.bankedCount === 1 ? "" : "s"}`;

package/src/prompt/composer.ts

@@ -91,6 +91,18 @@ export interface ComposerOptions {
 	readonly now?: () => number;
 }
 
+/** How {@link Composer.setRuntimeChildren} bills below-transcript roots against transcript retirement. */
+export interface RuntimeChildrenOptions {
+	/**
+	 * Below-transcript roots whose growth is momentary (inline dialogs, a tall
+	 * multi-line editor). They are billed at their smallest height so expansion
+	 * clips the live tail instead of retiring rows a later shrink could not
+	 * reclaim (#11007). Every other root is billed at its current height, so
+	 * settled rows it displaces retire to native scrollback.
+	 */
+	readonly transient?: readonly Component[];
+}
+
 /** Controls the first terminal paint for a composer that does not already own the terminal. */
 export interface ComposerStartOptions {
 	readonly clearScrollback?: boolean;
@@ -253,15 +265,18 @@ export class Composer implements TerminalFrameProvider {
 	#retiredHeaderStart = 0;
 	#resizeRetiredHeaderStart: number | undefined;
 	#lastNormalRows = 0;
-	// Smallest below-transcript chrome height (editor + status + any transient
-	// inline dialog) seen since mount. Retirement is billed against this
-	// persistent baseline, never the transient peak, so a dialog or tall editor
-	// that later shrinks never leaves committed transcript rows the live viewport
-	// cannot reclaim (#11007). The baseline is terminal-height independent — the
-	// editor and status floors do not scale with rows — so it is retained across
-	// resizes rather than rediscovered from whatever chrome is expanded at the
-	// moment the height changes.
-	#retirementBelowFloor: number | undefined;
+	// Roots from `RuntimeChildrenOptions.transient`, and the smallest height
+	// they have rendered at since mount. Retirement bills transient roots at
+	// this floor, never their peak, so a dialog or tall editor that later
+	// shrinks never leaves committed transcript rows the live viewport cannot
+	// reclaim (#11007). Persistent roots (loader, todo/subagent HUDs) bill at
+	// their current height: they stay up for a whole turn, and billing them at
+	// an idle floor hid the settled rows they displaced until the turn ended.
+	// The floor is terminal-height independent — editor and dialog heights do
+	// not scale with rows — so it is retained across resizes rather than
+	// rediscovered from whatever chrome is expanded when the height changes.
+	#transientChrome: ReadonlySet<Component> = new Set();
+	#transientChromeFloor: number | undefined;
 	#lastInterruptAt = 0;
 	#started = false;
 	#stopped = false;
@@ -346,60 +361,24 @@ export class Composer implements TerminalFrameProvider {
 		const afterRoots = roots.slice(transcriptIndex + 1);
 		const after: string[] = [];
 		const afterSpans: ViewportClickSpan[] = [];
+		let transientRows = 0;
 		for (const root of afterRoots) {
 			const start = after.length;
-			// Row targets usually nest one level down: chrome roots are plain
-			// containers (the HUD lives inside `subagentContainer`), and
-			// `Container.render` is a pure concatenation, so child spans tile
-			// the root span exactly. Render those children once and share the
-			// rows for composition and measurement — a second render per frame
-			// would duplicate render-time side effects (image placement
-			// registration). Roots with a custom render keep the composed
-			// output as the source of truth and measure up to the last target.
-			const plainContainer = root instanceof Container && root.render === Container.prototype.render;
-			const targets = root instanceof Container ? root.children : [root];
-			const resolves = targets.map(rowTargetCandidates);
-			const lastTarget = resolves.findLastIndex(resolve => resolve !== undefined);
-			if (plainContainer) {
-				let offset = start;
-				for (let index = 0; index < targets.length; index++) {
-					const childLines = targets[index]!.render(width);
-					after.push(...childLines);
-					if (index > lastTarget) continue;
-					const resolve = resolves[index];
-					if (resolve !== undefined && childLines.length > 0) {
-						afterSpans.push({ start: offset, end: offset + childLines.length, candidates: resolve });
-					}
-					offset += childLines.length;
-				}
-				continue;
-			}
-			after.push(...root.render(width));
-			if (lastTarget === -1) continue;
-			let offset = start;
-			for (let index = 0; index <= lastTarget; index++) {
-				const childLines = targets[index] === root ? after.length - start : targets[index]!.render(width).length;
-				const resolve = resolves[index];
-				if (resolve !== undefined && childLines > 0) {
-					afterSpans.push({ start: offset, end: offset + childLines, candidates: resolve });
-				}
-				offset += childLines;
-			}
+			this.#renderBelowRoot(root, width, after, afterSpans);
+			if (this.#transientChrome.has(root)) transientRows += after.length - start;
 		}
 		// Offer history under capacity pressure only: blocks stay live (and keep
 		// reflowing to the current width) while the screen has room. A batch
 		// leaves the mutable viewport in the same frame it is appended, so its
 		// rows are never painted twice.
 		//
-		// Retirement is billed against the persistent below-transcript chrome
-		// baseline, not the transient peak: a confirmation dialog or a tall
-		// multi-line editor swapped in below the transcript clips the live tail
-		// for its lifetime, but must not permanently commit transcript rows to
-		// native history — otherwise a later shrink cannot refill the freed rows
-		// and the editor drifts up above a band of blank rows (#11007).
-		this.#retirementBelowFloor =
-			this.#retirementBelowFloor === undefined ? after.length : Math.min(this.#retirementBelowFloor, after.length);
-		const belowFloor = this.#retirementBelowFloor;
+		// Retirement bills transient roots at their floor, not their peak: a
+		// confirmation dialog or a tall multi-line editor clips the live tail for
+		// its lifetime, but must not permanently commit transcript rows to native
+		// history — otherwise a later shrink cannot refill the freed rows and the
+		// editor drifts up above a band of blank rows (#11007).
+		this.#transientChromeFloor = Math.min(this.#transientChromeFloor ?? transientRows, transientRows);
+		const belowFloor = after.length - transientRows + this.#transientChromeFloor;
 		const history = this.#offerHistory(transcript, width, rows, preRoots.length + belowFloor);
 		const headerVisible = !this.#headerRetired && this.#offeredHistory?.source !== "header";
 		const headerRows = headerVisible ? this.#header.render(width) : [];
@@ -443,6 +422,52 @@ export class Composer implements TerminalFrameProvider {
 		return { history, viewport: this.#paintHoverBand(mutable, spans) };
 	}
 
+	/**
+	 * Append one below-transcript root's rows to `after`, recording click spans
+	 * for its row targets in `after` coordinates.
+	 *
+	 * Row targets usually nest one level down: chrome roots are plain
+	 * containers (the HUD lives inside `subagentContainer`), and
+	 * `Container.render` is a pure concatenation, so child spans tile the root
+	 * span exactly. Render those children once and share the rows for
+	 * composition and measurement — a second render per frame would duplicate
+	 * render-time side effects (image placement registration). Roots with a
+	 * custom render keep the composed output as the source of truth and measure
+	 * up to the last target.
+	 */
+	#renderBelowRoot(root: Component, width: number, after: string[], spans: ViewportClickSpan[]): void {
+		const start = after.length;
+		const plainContainer = root instanceof Container && root.render === Container.prototype.render;
+		const targets = root instanceof Container ? root.children : [root];
+		const resolves = targets.map(rowTargetCandidates);
+		const lastTarget = resolves.findLastIndex(resolve => resolve !== undefined);
+		if (plainContainer) {
+			let offset = start;
+			for (let index = 0; index < targets.length; index++) {
+				const childLines = targets[index]!.render(width);
+				after.push(...childLines);
+				if (index > lastTarget) continue;
+				const resolve = resolves[index];
+				if (resolve !== undefined && childLines.length > 0) {
+					spans.push({ start: offset, end: offset + childLines.length, candidates: resolve });
+				}
+				offset += childLines.length;
+			}
+			return;
+		}
+		after.push(...root.render(width));
+		if (lastTarget === -1) return;
+		let offset = start;
+		for (let index = 0; index <= lastTarget; index++) {
+			const childLines = targets[index] === root ? after.length - start : targets[index]!.render(width).length;
+			const resolve = resolves[index];
+			if (resolve !== undefined && childLines > 0) {
+				spans.push({ start: offset, end: offset + childLines, candidates: resolve });
+			}
+			offset += childLines;
+		}
+	}
+
 	/**
 	 * Band the hovered click target's current rows. Id-anchored (not
 	 * line-anchored) so the band follows an agent whose rows shift while it
@@ -847,8 +872,10 @@ export class Composer implements TerminalFrameProvider {
 	}
 
 	/** Mount or replace session-aware root children while preserving the header and status hosts. */
-	setRuntimeChildren(children: readonly Component[]): void {
+	setRuntimeChildren(children: readonly Component[], options: RuntimeChildrenOptions = {}): void {
 		if (this.#stopped) return;
+		this.#transientChrome = new Set(options.transient);
+		this.#transientChromeFloor = undefined;
 		this.ui.removeChild(this.#statusHost);
 		if (this.#runtimeMounted) {
 			for (const child of this.#runtimeChildren) this.ui.removeChild(child);