@oh-my-pi/pi-tui 18.14.2 → 18.16.0

package/src/chat/execution-shared.ts

@@ -10,9 +10,15 @@
 import { Loader } from "../components/loader";
 import { Text } from "../components/text";
 import { Container, type TUI } from "../tui";
-import { getSymbolTheme, theme } from "../theme/theme";
+import { theme } from "../theme/theme";
 import type { OutputArtifactError } from "../tools/streaming-output";
-import { formatArtifactErrorNotice, formatTruncationMetaNotice, type TruncationMeta } from "../tools/output-meta";
+import {
+	formatArtifactErrorNotice,
+	formatMinimizedMeta,
+	formatTruncationMetaNotice,
+	type MinimizedMeta,
+	type TruncationMeta,
+} from "../tools/output-meta";
 import { DynamicBorder } from "../chrome/dynamic-border";
 import { Ellipsis, truncateToWidth, visibleWidth } from "../utils";
 import { interruptKey } from "../chrome/keybinding-hints";
@@ -46,14 +52,15 @@ export type ExecutionColorKey = "dim" | "bashMode" | "pythonMode";
 /**
  * Build the spacer + top border + content container + bottom border scaffold
  * that bash and eval execution components share. The caller appends the
- * header (command vs `>>>` prompt) and the returned loader to
- * `contentContainer` so per-mode order is preserved.
+ * header (command vs `>>>` prompt) to `contentContainer` and keeps the run's
+ * state in `bottomBorder` ({@link executionStatusLabel}); the returned loader
+ * animates that label rather than taking a row of its own.
  */
 export function buildExecutionFrame(
 	parent: Container,
 	ui: TUI,
 	colorKey: ExecutionColorKey,
-): { contentContainer: Container; loader: Loader } {
+): { contentContainer: Container; loader: Loader; bottomBorder: DynamicBorder } {
 	const borderColor = (str: string) => theme.fg(colorKey, str);
 
 	parent.addChild(new DynamicBorder(borderColor));
@@ -66,23 +73,35 @@ export function buildExecutionFrame(
 		spinner => theme.fg(colorKey, spinner),
 		text => theme.fg("muted", text),
 		`Running… (${interruptKey()} to cancel)`,
-		getSymbolTheme().spinnerFrames,
+		// The status spinner, as on a running tool card's header.
+		theme.spinnerFrames,
 	);
 
-	parent.addChild(new DynamicBorder(borderColor));
-	return { contentContainer, loader };
+	const bottomBorder = new DynamicBorder(borderColor);
+	bottomBorder.setLabel(() => loader.inlineText());
+	parent.addChild(bottomBorder);
+	return { contentContainer, loader, bottomBorder };
+}
+
+/** The bottom-border marker of a settled run: `exit N` for a failure, `cancelled` for a cancel. */
+export function executionStatusLabel(
+	status: Exclude<ExecutionStatus, "running">,
+	exitCode: number | undefined,
+): string | undefined {
+	if (status === "cancelled") return theme.fg("warning", "cancelled");
+	if (status === "error") return theme.fg("error", `exit ${exitCode}`);
+	return undefined;
 }
 
 /**
- * Build the post-run status block (hidden-line hint, exit/cancel marker,
- * truncation notice). Returns undefined when there is nothing to display so
- * callers can skip appending a stray Text child.
+ * Build the post-run status block (hidden-line hint, truncation notice).
+ * Returns undefined when there is nothing to display so callers can skip
+ * appending a stray Text child.
  */
 export function buildStatusFooter(opts: {
-	status: ExecutionStatus;
-	exitCode: number | undefined;
 	truncation: TruncationMeta | undefined;
 	artifactError?: OutputArtifactError;
+	minimized?: MinimizedMeta;
 	hiddenLineCount: number;
 	/** Suppress the "… N more lines" hint (used when sixel passthrough renders the full output). */
 	suppressHiddenCount?: boolean;
@@ -92,17 +111,15 @@ export function buildStatusFooter(opts: {
 	if (opts.hiddenLineCount > 0 && !opts.suppressHiddenCount) {
 		parts.push(theme.fg("dim", `… ${opts.hiddenLineCount} more lines (${expandKeyHint()} to expand)`));
 	}
-	if (opts.status === "cancelled") {
-		parts.push(theme.fg("warning", "(cancelled)"));
-	} else if (opts.status === "error") {
-		parts.push(theme.fg("error", `(exit ${opts.exitCode})`));
-	}
 	if (opts.truncation) {
 		parts.push(theme.fg("warning", formatTruncationMetaNotice(opts.truncation)));
 	}
 	if (opts.artifactError) {
 		parts.push(theme.fg("warning", formatArtifactErrorNotice(opts.artifactError)));
 	}
+	if (opts.minimized) {
+		parts.push(theme.fg("dim", `Minimized: ${formatMinimizedMeta(opts.minimized)}`));
+	}
 
 	if (parts.length === 0) return undefined;
 	return new Text(`\n${parts.join("\n")}`, 1, 0);
@@ -133,6 +150,7 @@ export interface ExecutionCardInput {
 	readonly exitCode: number | undefined;
 	readonly truncation: TruncationMeta | undefined;
 	readonly artifactError?: OutputArtifactError;
+	readonly minimized?: MinimizedMeta;
 }
 
 /**
@@ -170,6 +188,7 @@ export function describeExecutionCard(input: ExecutionCardInput): NativeNode {
 	if (input.status === "cancelled") note("(cancelled)", "warning");
 	else if (input.status === "error") note(`(exit ${input.exitCode})`, "error");
 	if (input.truncation) note(formatTruncationMetaNotice(input.truncation), "warning");
+	if (input.minimized) note(`Minimized: ${formatMinimizedMeta(input.minimized)}`, "muted");
 	if (input.artifactError) note(formatArtifactErrorNotice(input.artifactError), "warning");
 	if (notes.length > 0) children.push(text(notes, { wrap: "word", key: "notes" }));
 	return card(
@@ -207,6 +226,7 @@ export interface ExecutionToolInput {
 	readonly exitCode: number | undefined;
 	readonly truncation: TruncationMeta | undefined;
 	readonly artifactError?: OutputArtifactError;
+	readonly minimized?: MinimizedMeta;
 }
 
 const EXECUTION_RUN_STATE: Record<ExecutionStatus, RunState> = {
@@ -244,6 +264,7 @@ export function describeExecutionTool(input: ExecutionToolInput): NativeNode {
 				state,
 				exitCode: input.exitCode,
 				elapsedMs: ms,
+				facts: input.minimized ? [`Minimized ${formatMinimizedMeta(input.minimized)}`] : undefined,
 				meta: { truncation: input.truncation, artifactError: input.artifactError },
 			}),
 		],

package/src/chat/read-tool-group.ts

@@ -3,7 +3,7 @@ import type { AssistantMessage, Usage } from "@oh-my-pi/pi-ai";
 import { type Component } from "../tui";
 import { Container } from "../tui";
 import { Text } from "../components/text";
-import { getLanguageFromPath, theme } from "../theme";
+import { getLanguageFromPath, theme, type ThemeColor } from "../theme";
 import { parseLineRanges, selectorLineRanges } from "../tools/line-ranges";
 import {
 	type ReadRenderArgs,
@@ -12,8 +12,15 @@ import {
 	readResultIsMarkdown,
 	readSourceFsPath,
 	splitPathAndSel,
+	splitReadQuery,
 } from "../tools/read";
-import { PREVIEW_LIMITS, shortenPath } from "../render/render-utils";
+import {
+	FILE_NAME_COLOR,
+	formatStatusIcon,
+	formatStyledPath,
+	PREVIEW_LIMITS,
+	shortenPath,
+} from "../render/render-utils";
 import { fileHyperlink, renderCodeCell, renderMarkdownCell } from "../render";
 import { wrapTreeLine } from "../render/hanging-wrap";
 import { wrapTextWithAnsi } from "../utils";
@@ -21,7 +28,7 @@ import { canonicalizeMessage } from "./thinking-display";
 import { internalUrlSchemeSpec, splitUrlScheme } from "../tools/url-scheme-host";
 import type { ToolExecutionHandle } from "./tool-execution";
 import { formatUsageRow } from "../overlays/usage-row";
-import { formatCount, sanitizeText, sanitizeTextDeep } from "@oh-my-pi/pi-utils";
+import { formatCount, isUrlLikePath, sanitizeText, sanitizeTextDeep } from "@oh-my-pi/pi-utils";
 import type { TspCardStatus, TspSpan, TspText } from "@oh-my-pi/pi-wire";
 import type { NativeToolHead } from "../tools/renderer";
 import { card, code, keyed, md, node, span, text, withHidden } from "../native/describe";
@@ -34,7 +41,7 @@ import {
 } from "../native/node";
 import { plainText } from "../native/spans";
 import { Memo } from "../native/memo";
-import { fileHref, fileRow, inlineErrorView } from "../tools/native-view";
+import { fileHref, fileRow, inlineErrorView, urlHref } from "../tools/native-view";
 
 /**
  * Extract the read call's target path. `path` is the canonical arg; `file_path`
@@ -158,6 +165,21 @@ const COLLAPSED_PREVIEW_LINES = PREVIEW_LIMITS.OUTPUT_COLLAPSED;
  */
 const TRIMMED_BODY_PREVIEW = { lines: 1000 } as const;
 
+/** How a read path is painted: its path (`isUrl` for a whole URL) and its selectors' color. */
+interface PathPaint {
+	path(filePath: string, isUrl: boolean): string;
+	selectors: ThemeColor;
+}
+
+/** A `Read <path>` header line keeps the accent subject color. */
+const HEADER_PATH_PAINT: PathPaint = { path: filePath => theme.fg("accent", filePath), selectors: "accent" };
+
+/** Group rows share the tool-body path style with muted selectors. */
+const ROW_PATH_PAINT: PathPaint = {
+	path: (filePath, isUrl) => (isUrl ? theme.fg(FILE_NAME_COLOR, filePath) : formatStyledPath(filePath, theme)),
+	selectors: "muted",
+};
+
 /** Native item tone per read status; successful reads stay neutral. */
 const READ_STATUS_TONE: Record<ReadEntry["status"], "pending" | "warning" | "error" | undefined> = {
 	success: undefined,
@@ -695,7 +717,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		return {
 			target: filePath ? `${filePath}${split.sel ? `:${split.sel}` : ""}` : "…",
 			targetKind: "path",
-			href: fileHref(linkPathForTargets(row.targets)),
+			href: fileHref(linkPathForTargets(row.targets)) ?? urlHref(split.path),
 			meta: correctedFrom ? [`corrected from ${shortenPath(correctedFrom)}`] : undefined,
 			badges: conflicts
 				? [{ text: `${conflicts} conflict${conflicts === 1 ? "" : "s"}`, tone: "warning" }]
@@ -718,7 +740,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 					: undefined;
 		return fileRow(shortenPath(split.sel ? split.path : row.targetPath), {
 			range: split.sel ? `:${split.sel}` : undefined,
-			href: fileHref(linkPathForTargets(row.targets)),
+			href: fileHref(linkPathForTargets(row.targets)) ?? urlHref(split.path),
 			icon: status === "error" ? "x-circle" : undefined,
 			tone: READ_STATUS_TONE[status],
 			chip: conflicts ? { text: `${conflicts} conflict${conflicts === 1 ? "" : "s"}` } : undefined,
@@ -914,8 +936,8 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		if (displayRows.length === 1) {
 			const row = displayRows[0]!;
 			if (!this.#shouldRenderPreviewRow(row)) {
-				const statusSymbol = this.#formatStatus(this.#statusForTargets(row.targets));
-				const pathDisplay = this.#formatRowPath(row);
+				const statusSymbol = formatStatusIcon(this.#statusForTargets(row.targets), theme);
+				const pathDisplay = this.#formatRowPath(row, HEADER_PATH_PAINT);
 				const lines = [` ${statusSymbol} ${theme.fg("toolTitle", theme.bold("Read"))} ${pathDisplay}`.trimEnd()];
 				const usageRows = this.#usageRowsBySummaryRow(displayRows).get(0) ?? [];
 				this.#appendUsageRows(lines, usageRows, "   ");
@@ -1080,16 +1102,17 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 
 	#formatRow(row: ReadSummaryRow): string {
 		const status = this.#statusForTargets(row.targets);
-		const statusPrefix = status === "success" ? "" : `${this.#formatStatus(status)} `;
+		const statusPrefix = status === "success" ? "" : `${formatStatusIcon(status, theme)} `;
 		return `${statusPrefix}${this.#formatRowPath(row)}`;
 	}
 
-	#formatRowPath(row: ReadSummaryRow): string {
-		return this.#formatPathValue(row.targetPath, {
+	#formatRowPath(row: ReadSummaryRow, paint = ROW_PATH_PAINT): string {
+		return this.#formatPathValue(row.targetPath, paint, {
 			correctedFrom: this.#correctedFromForTargets(row.targets),
 			conflictCount: this.#conflictCountForTargets(row.targets),
 			line: firstSelectorLineForTargets(row.targets),
 			linkPath: linkPathForTargets(row.targets),
+			basePath: row.basePath,
 		});
 	}
 
@@ -1137,25 +1160,35 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 
 	#formatPathValue(
 		value: string,
-		options: { correctedFrom?: string; conflictCount?: number; line?: number; linkPath?: string } = {},
+		paint: PathPaint,
+		options: {
+			correctedFrom?: string;
+			conflictCount?: number;
+			line?: number;
+			linkPath?: string;
+			/** The path `value` selects from; merged selectors (`1-5,…,9`) do not parse back out of it. */
+			basePath?: string;
+		} = {},
 	): string {
-		const split = splitPathAndSel(value);
-		const selectorSuffix = split.sel ? `:${split.sel}` : "";
-		const baseValue = split.sel ? split.path : value;
-		const filePath = shortenPath(baseValue);
-		let pathDisplay = filePath ? theme.fg("accent", filePath) : theme.fg("toolOutput", "…");
+		const { basePath } = options;
+		const split =
+			basePath !== undefined && value.startsWith(`${basePath}:`)
+				? { path: basePath, sel: value.slice(basePath.length + 1) }
+				: splitPathAndSel(value);
+		// `?q=…` queries read like selectors: they follow the path, outside its link.
+		const target = splitReadQuery(split.sel ? split.path : value);
+		const filePath = shortenPath(target.path);
+		const selectors = split.sel ? `${target.query ?? ""}:${split.sel}` : (target.query ?? "");
+		let pathDisplay = filePath ? paint.path(filePath, isUrlLikePath(target.path)) : theme.fg("toolOutput", "…");
 		if (filePath && options.linkPath) {
 			const linkOptions = options.line !== undefined ? { line: options.line } : undefined;
 			pathDisplay = fileHyperlink(options.linkPath, pathDisplay, linkOptions);
 		}
-		if (selectorSuffix) {
-			pathDisplay += theme.fg("accent", selectorSuffix);
-		}
+		if (selectors) pathDisplay += theme.fg(paint.selectors, selectors);
 		if (options.correctedFrom) {
 			pathDisplay += theme.fg("dim", ` (corrected from ${shortenPath(options.correctedFrom)})`);
 		}
-		pathDisplay += this.#formatConflictBadge(options.conflictCount);
-		return pathDisplay;
+		return pathDisplay + this.#formatConflictBadge(options.conflictCount);
 	}
 
 	#formatConflictBadge(conflictCount: number | undefined): string {
@@ -1174,7 +1207,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		const lang = getLanguageFromPath(split.path);
 		const pathValue = shortenPath(entry.path);
 		const pathDisplay = pathValue
-			? this.#formatPathValue(entry.path, {
+			? this.#formatPathValue(entry.path, HEADER_PATH_PAINT, {
 					correctedFrom: entry.correctedFrom,
 					conflictCount: entry.conflictCount,
 					line: firstSelectorLine(split.sel),
@@ -1252,17 +1285,4 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	#shouldRenderPreview(entry: ReadEntry): boolean {
 		return this.#showContentPreview && entry.contentText !== undefined;
 	}
-
-	#formatStatus(status: ReadEntry["status"]): string {
-		if (status === "success") {
-			return theme.fg("text", theme.status.enabled);
-		}
-		if (status === "warning") {
-			return theme.fg("warning", theme.status.warning);
-		}
-		if (status === "error") {
-			return theme.fg("error", theme.status.error);
-		}
-		return theme.fg("dim", theme.status.pending);
-	}
 }

package/src/chat/transcript-render-helpers.ts

@@ -13,11 +13,18 @@ import type { JobSnapshot } from "../tools/wait";
 import type { DaemonSnapshot } from "../tools/daemon";
 import { type CustomMessage, type FileMentionMessage, resolveAbortLabel, shouldRenderAbortReason } from "./messages";
 import { createIrcMessageCard } from "../tools/wait";
-import { formatArtifactErrorNotice, type OutputMeta } from "../tools/output-meta";
+import {
+	formatArtifactErrorNotice,
+	formatMinimizedMeta,
+	type MinimizedMeta,
+	type OutputMeta,
+} from "../tools/output-meta";
 import type { OutputArtifactError } from "../tools/streaming-output";
-import { replaceTabs, TRUNCATE_LENGTHS, truncateToWidth } from "../render/render-utils";
+import { formatStyledPath, replaceTabs, TRUNCATE_LENGTHS, truncateToWidth } from "../render/render-utils";
 import { canonicalizeMessage } from "./thinking-display";
 import { ToolActivityContainer } from "../chrome/tool-activity";
+import { CustomMessageComponent } from "./custom-message";
+import type { MessageRenderer } from "./extension-types";
 import { type TranscriptBlock } from "../chrome/transcript-container";
 import { TranscriptStatusBlock, type TranscriptStatusRow } from "../chrome/transcript-status";
 import { theme } from "../theme";
@@ -65,7 +72,7 @@ export function buildAsyncResultBlock(message: CustomOrHookMessage): ToolActivit
 		const duration = typeof job.durationMs === "number" ? formatDuration(job.durationMs) : undefined;
 		rows.push({
 			parts: [
-				{ text: `${theme.status.done} Background job completed`, color: "success" },
+				{ text: `${theme.status.success} Background job completed`, color: "success" },
 				{ text: `[${type}]`, color: "dim" },
 				{ text: jobId, color: "accent" },
 				duration ? { text: `(${duration})`, color: "dim" } : undefined,
@@ -76,17 +83,56 @@ export function buildAsyncResultBlock(message: CustomOrHookMessage): ToolActivit
 			},
 		});
 		if (job.meta?.artifactError) rows.push(artifactErrorRow(job.meta.artifactError));
+		if (job.meta?.minimized) rows.push(minimizedRow(job.meta.minimized));
 	}
 	if (details?.meta?.artifactError) rows.push(artifactErrorRow(details.meta.artifactError));
 	return new ToolActivityContainer(new TranscriptStatusBlock(rows));
 }
 
+/** Hosts an extension renderer; relays `display.hideToolActivity` to the nested built-in fallback block. */
+class AsyncResultCard extends CustomMessageComponent {
+	readonly #block: ToolActivityContainer;
+
+	constructor(message: CustomOrHookMessage, renderer: MessageRenderer, block: ToolActivityContainer) {
+		super(message as CustomMessage<unknown>, (delegate, options, rendererTheme) => {
+			try {
+				return renderer(delegate, options, rendererTheme) ?? block;
+			} catch {
+				return block;
+			}
+		});
+		this.#block = block;
+	}
+
+	setToolActivityVisible(visible: boolean): void {
+		this.#block.setToolActivityVisible(visible);
+	}
+}
+
+/**
+ * The `async-result` card for both transcript surfaces: a registered renderer owns it (#14131);
+ * the built-in block covers no renderer, a declining renderer, and a throwing one.
+ */
+export function buildAsyncResultComponent(
+	message: CustomOrHookMessage,
+	renderer: MessageRenderer | undefined,
+): Component & { setExpanded(expanded: boolean): void } {
+	const block = buildAsyncResultBlock(message);
+	return renderer ? new AsyncResultCard(message, renderer, block) : block;
+}
+
 /** The warning row under a background job whose output artifact could not be saved. */
 function artifactErrorRow(error: OutputArtifactError): TranscriptStatusRow {
 	const notice = formatArtifactErrorNotice(error);
 	return { parts: [{ text: notice, color: "warning" }], native: { tone: "warning", message: [span(notice)] } };
 }
 
+/** The dim row under a background job whose output the minimizer shortened. */
+function minimizedRow(minimized: MinimizedMeta): TranscriptStatusRow {
+	const fact = `Minimized: ${formatMinimizedMeta(minimized)}`;
+	return { parts: [{ text: fact, color: "dim" }], native: { tone: "info", message: [span(fact, "dim")] } };
+}
+
 /**
  * Native notice spans for a row's trailing facts (kind, id, duration): each
  * after a dim ` · `, absent ones skipped.
@@ -106,7 +152,7 @@ export function buildLaunchCompletionBlock(message: CustomOrHookMessage): ToolAc
 	const daemons = details?.daemons ?? [];
 	if (daemons.length === 0 && typeof message.content === "string") {
 		rows.push({
-			parts: [{ text: `${theme.status.done} ${message.content}`, color: "dim" }],
+			parts: [{ text: `${theme.status.success} ${message.content}`, color: "dim" }],
 			native: { tone: "success", message: [span(message.content)] },
 		});
 	}
@@ -122,7 +168,7 @@ export function buildLaunchCompletionBlock(message: CustomOrHookMessage): ToolAc
 			parts: [
 				failed
 					? { text: `${theme.status.error} ${label}`, color: "error" }
-					: { text: `${theme.status.done} ${label}`, color: "success" },
+					: { text: `${theme.status.success} ${label}`, color: "success" },
 				{ text: daemon.name, color: "accent" },
 				exit ? { text: `(${exit})`, color: "dim" } : undefined,
 				duration ? { text: `(${duration})`, color: "dim" } : undefined,
@@ -203,7 +249,7 @@ export function buildFileMentionBlock(files: FileMentionMessage["files"], indent
 			parts: [
 				{ text: theme.tree.last, color: "dim" },
 				{ text: "Read", color: "muted" },
-				{ text: file.path, color: "accent" },
+				{ text: formatStyledPath(file.path, theme) },
 				{ text: `(${detail})`, color: "dim" },
 			],
 			indent,

package/src/chrome/dynamic-border.ts

@@ -1,4 +1,5 @@
 import type { Component } from "../tui";
+import { truncateToWidth, visibleWidth } from "../utils";
 import { fgOrPlain, theme } from "../theme/index";
 import type { NativeNode } from "../native/node";
 import { EMPTY_NODE } from "../native/describe";
@@ -13,7 +14,9 @@ import { EMPTY_NODE } from "../native/describe";
  */
 export class DynamicBorder implements Component {
 	#color: (str: string) => string;
+	#label: string | (() => string) | undefined;
 	#cachedWidth = -1;
+	#cachedLabel: string | undefined;
 	#cachedLines: string[] | undefined;
 
 	constructor(color: (str: string) => string = str => fgOrPlain("border", str)) {
@@ -25,19 +28,42 @@ export class DynamicBorder implements Component {
 		this.#cachedLines = undefined;
 	}
 
+	/**
+	 * Pre-styled text set into the rule after a short lead (`─── label ────`);
+	 * undefined draws a plain rule. A function label is re-read every render,
+	 * for live text such as a spinner.
+	 */
+	setLabel(label: string | (() => string) | undefined): void {
+		if (label === this.#label) return;
+		this.#label = label;
+		this.invalidate();
+	}
+
 	/** Native terminals draw their own chrome; a border rule describes nothing. */
 	describe(): NativeNode {
 		return EMPTY_NODE;
 	}
 
 	render(width: number): readonly string[] {
-		if (this.#cachedLines && this.#cachedWidth === width) {
+		const label = typeof this.#label === "function" ? this.#label() : this.#label;
+		if (this.#cachedLines && this.#cachedWidth === width && this.#cachedLabel === label) {
 			return this.#cachedLines;
 		}
 		const horizontal = typeof theme === "undefined" ? "─" : theme.boxRound.horizontal;
-		const lines = [this.#color(horizontal.repeat(Math.max(1, width)))];
+		const lines = [this.#rule(horizontal, Math.max(1, width), label)];
 		this.#cachedWidth = width;
+		this.#cachedLabel = label;
 		this.#cachedLines = lines;
 		return lines;
 	}
+
+	#rule(horizontal: string, width: number, label: string | undefined): string {
+		const lead = horizontal.repeat(3);
+		// The label sits between single spaces and leaves at least one rule cell after it.
+		const labelRoom = width - visibleWidth(lead) - 3;
+		if (!label || labelRoom < 1) return this.#color(horizontal.repeat(width));
+		const fitted = ` ${truncateToWidth(label, labelRoom)} `;
+		const rest = width - visibleWidth(lead) - visibleWidth(fitted);
+		return `${this.#color(lead)}${fitted}${this.#color(horizontal.repeat(rest))}`;
+	}
 }

package/src/chrome/transcript-status.ts

@@ -6,10 +6,10 @@ import { type ThemeColor, theme } from "../theme";
 import { TranscriptBlock } from "./transcript-container";
 import { type NoticeTone, noticeRow } from "./transcript-notice";
 
-/** One themed run of a status row's terminal line. */
+/** One run of a status row's terminal line, in `color` unless the text is already styled. */
 export interface TranscriptStatusPart {
 	readonly text: string;
-	readonly color: ThemeColor;
+	readonly color?: ThemeColor;
 }
 
 /** A status row in a native terminal: its {@link noticeRow}'s tone, icon and message. */
@@ -41,7 +41,9 @@ export class TranscriptStatusBlock extends TranscriptBlock {
 	constructor(rows: readonly TranscriptStatusRow[]) {
 		super();
 		for (const row of rows) {
-			const styled = row.parts.flatMap(part => (part ? [theme.fg(part.color, part.text)] : []));
+			const styled = row.parts.flatMap(part =>
+				part ? [part.color ? theme.fg(part.color, part.text) : part.text] : [],
+			);
 			this.addChild(new Text(styled.join(" "), row.indent ?? 1, 0));
 		}
 		this.#native = col(