@f5-sales-demo/xcsh 21.45.3 → 21.46.2

package/src/modes/components/model-selector.ts

@@ -8,7 +8,6 @@ import {
 	type Tab,
 	TabBar,
 	type TUI,
-	truncateToWidth,
 	wrapTextWithAnsi,
 } from "@f5-sales-demo/pi-tui";
 import { filterCurrentBrowserModels } from "../../config/model-catalog";
@@ -38,6 +37,7 @@ import {
 	selectorFrameContentWidth,
 	selectorKeys,
 	selectorNavigationHint,
+	selectorProse,
 	selectorRow,
 } from "./selector-frame";
 
@@ -350,6 +350,10 @@ export class ModelSelectorComponent extends Container {
 	#spinnerFrame = 0;
 	#spinnerTimer?: ReturnType<typeof setInterval>;
 	#pendingRefreshes = 0;
+	#detailOffset = 0;
+	#detailCapacity = 1;
+	#detailLength = 0;
+	#detailWidth = 0;
 
 	#disposed = false;
 	#initialProvider?: string;
@@ -383,7 +387,7 @@ export class ModelSelectorComponent extends Container {
 		let selectedBodyIndex: number | undefined;
 		let stickyBodyRows = 0;
 		let minimumDetailRows = 0;
-		const details: string[] = selected ? wrapTextWithAnsi(selected.selector, inner) : [];
+		const details: string[] = [];
 		let navigation: string[] = [];
 		let title = "Choose a model";
 		let purpose = "";
@@ -392,6 +396,7 @@ export class ModelSelectorComponent extends Container {
 			`Ctrl+R: refresh${this.#onLogin ? " · Ctrl+L: providers" : ""} · ${selectorCancelHint(searching ? "clear search" : "back")}`,
 		];
 		if (this.#isMenuOpen && selected) {
+			details.push(...wrapTextWithAnsi(selected.selector, inner));
 			title = getModelDisplayName(selected.model);
 			const labels =
 				this.#menuStep === "scope"
@@ -429,25 +434,42 @@ export class ModelSelectorComponent extends Container {
 				...this.#searchInput.render(inner),
 			];
 			if (this.#scopedModels.length) purpose = "Showing models from --models scope";
-			const status = this.#renderProviderStatus(inner)
-				.filter(line => line.trim())
-				.slice(0, 1);
 			if (selected) {
-				details.push(...wrapTextWithAnsi(assignments(selected.model, true), inner));
-				if (this.#isItemDisabled(selected) && !this.#refreshingProvider) {
-					details.push("Unavailable · reconnect or refresh this provider.");
-				} else if (selected.model.description) details.push(...wrapTextWithAnsi(selected.model.description, inner));
+				const providerRowLabel = getProviderDisplayName(selected.model.provider);
+				const providerLabel =
+					this.#modelRegistry.getProviderPickerMetadata?.(selected.model.provider)?.groupLabel ?? providerRowLabel;
+				const detailValues = [
+					`Model: ${getModelDisplayName(selected.model)}`,
+					`Provider: ${providerLabel}`,
+					...(providerRowLabel !== providerLabel ? [`Provider row label: ${providerRowLabel}`] : []),
+					`Selector: ${selected.selector}`,
+					`Assignments: ${assignments(selected.model, true)}`,
+					...(this.#isItemDisabled(selected) && !this.#refreshingProvider
+						? ["Status: Unavailable · reconnect or refresh this provider."]
+						: []),
+					...(selected.model.description ? [`Description: ${selected.model.description}`] : []),
+					...this.#renderProviderStatus().filter(line => line.trim()),
+					...(this.#errorMessage ? [`Error: ${String(this.#errorMessage)}`] : []),
+				];
+				const wrappedDetails = detailValues.flatMap(value => wrapTextWithAnsi(value, inner));
+				if (this.#detailWidth !== inner) this.#detailOffset = 0;
+				this.#detailWidth = inner;
+				this.#detailCapacity = Math.max(1, height - 15);
+				this.#detailLength = wrappedDetails.length;
+				const lastPageOffset =
+					Math.max(0, Math.ceil(this.#detailLength / this.#detailCapacity) - 1) * this.#detailCapacity;
+				this.#detailOffset = Math.min(this.#detailOffset, lastPageOffset);
+				details.push(...wrappedDetails.slice(this.#detailOffset, this.#detailOffset + this.#detailCapacity));
+			}
+			// Keep the selected compact row stable while status and detail pages change.
+			minimumDetailRows = this.#detailLength > this.#detailCapacity ? this.#detailCapacity : details.length + 2;
+			if (this.#detailLength > this.#detailCapacity) {
+				const first = this.#detailOffset + 1;
+				const last = Math.min(this.#detailLength, this.#detailOffset + this.#detailCapacity);
+				footer.push(
+					`${selectorKeys("pageUp")}/${selectorKeys("pageDown")}: details ${first}–${last} of ${this.#detailLength}`,
+				);
 			}
-			// Two live-status rows are intentional reserved space; spinner/error updates must not shift the table.
-			minimumDetailRows = details.length + 2;
-			const selectedStatus = selected
-				? this.#renderProviderStatus(inner).find(line =>
-						line.includes(`${getProviderDisplayName(selected.model.provider)}:`),
-					)
-				: undefined;
-			if (status[0]) details.push(status[0]);
-			if (selectedStatus && selectedStatus !== status[0]) details.push(selectedStatus);
-			if (this.#errorMessage) details.push(String(this.#errorMessage));
 			const showProvider = searching;
 			const widths = showProvider ? [inner - 42, 18, 18] : [inner - 24, 20];
 			if (wide) {
@@ -477,11 +499,13 @@ export class ModelSelectorComponent extends Container {
 					),
 				);
 			}
-			if (!this.#filteredModels.length) body.push(this.#getProviderEmptyStateMessage() ?? "No matching models");
+			if (!this.#filteredModels.length)
+				body.push(selectorProse(this.#getProviderEmptyStateMessage() ?? "No matching models"));
 		}
 		return selectorFrame(width, height, title, purpose, navigation, body, details, footer, {
 			minimumDetailRows,
 			selectedBodyIndex,
+			selectedDetail: this.#isMenuOpen ? "automatic" : "provided",
 			stickyBodyRows,
 		});
 	}
@@ -496,7 +520,7 @@ export class ModelSelectorComponent extends Container {
 		this.#stopSpinner();
 	}
 
-	#renderProviderStatus(width: number): string[] {
+	#renderProviderStatus(): string[] {
 		if (this.#isMenuOpen) return [];
 		const group = this.#providerGroups[this.#activeTabIndex];
 		// Reserve the same status area for every provider. Updating status never moves the catalog.
@@ -544,7 +568,11 @@ export class ModelSelectorComponent extends Container {
 				message = `${label}: empty catalog · Ctrl+R: refresh`;
 			rows[index + 1] = theme.fg(color, message);
 		}
-		return rows.map(row => truncateToWidth(row, width));
+		return rows;
+	}
+
+	#resetDetailPage(): void {
+		this.#detailOffset = 0;
 	}
 
 	#menuRoleActions: MenuRoleAction[] = [];
@@ -1094,6 +1122,7 @@ export class ModelSelectorComponent extends Container {
 		const retainedIndex = this.#filteredModels.findIndex(item => item.selector === selectedSelector);
 		this.#selectedIndex =
 			retainedIndex >= 0 ? retainedIndex : Math.min(this.#selectedIndex, Math.max(0, visibleCount - 1));
+		this.#resetDetailPage();
 		this.#updateList();
 	}
 
@@ -1179,6 +1208,7 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#openMenu(): void {
+		this.#resetDetailPage();
 		this.#menuItem = this.#getSelectedItem();
 		if (!this.#menuItem || this.#isItemDisabled(this.#menuItem)) return;
 		this.#isMenuOpen = true;
@@ -1201,6 +1231,7 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#closeMenu(): void {
+		this.#resetDetailPage();
 		this.#isMenuOpen = false;
 		this.#menuStep = "role";
 		this.#menuSelectedRole = null;
@@ -1231,6 +1262,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		if (matchesKey(keyData, "ctrl+r")) {
+			this.#resetDetailPage();
 			void this.#refreshSelectedProvider().catch(error => {
 				this.#errorMessage = error instanceof Error ? error.message : String(error);
 				this.#updateList();
@@ -1239,11 +1271,26 @@ export class ModelSelectorComponent extends Container {
 			return;
 		}
 
+		if (matchesSelectorKey(keyData, "pageDown")) {
+			const lastPageOffset =
+				Math.max(0, Math.ceil(this.#detailLength / this.#detailCapacity) - 1) * this.#detailCapacity;
+			this.#detailOffset = Math.min(lastPageOffset, this.#detailOffset + this.#detailCapacity);
+			this.#updateList();
+			return;
+		}
+
+		if (matchesSelectorKey(keyData, "pageUp")) {
+			this.#detailOffset = Math.max(0, this.#detailOffset - this.#detailCapacity);
+			this.#updateList();
+			return;
+		}
+
 		// Up arrow - navigate list (wrap to bottom when at top)
 		if (matchesSelectorKey(keyData, "up")) {
 			const itemCount = this.#isCanonicalTab() ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
 			if (itemCount === 0) return;
 			this.#selectedIndex = this.#selectedIndex === 0 ? itemCount - 1 : this.#selectedIndex - 1;
+			this.#resetDetailPage();
 			this.#updateList();
 			return;
 		}
@@ -1253,6 +1300,7 @@ export class ModelSelectorComponent extends Container {
 			const itemCount = this.#isCanonicalTab() ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
 			if (itemCount === 0) return;
 			this.#selectedIndex = this.#selectedIndex === itemCount - 1 ? 0 : this.#selectedIndex + 1;
+			this.#resetDetailPage();
 			this.#updateList();
 			return;
 		}

package/src/modes/components/oauth-selector.ts

@@ -13,6 +13,7 @@ import {
 	selectorFrameContentWidth,
 	selectorKeys,
 	selectorNavigationHint,
+	selectorProse,
 	selectorRow,
 } from "./selector-frame";
 /**
@@ -329,7 +330,7 @@ export class OAuthSelectorComponent extends Container {
 				const meta = providerPresentation(provider.id);
 				if (this.#catalogMode && !this.#searchInput.getValue() && meta.category !== category) {
 					category = meta.category;
-					body.push(theme.fg("muted", category));
+					body.push(selectorProse(theme.fg("muted", category)));
 				}
 				if (i === this.#selectedIndex) selectedBodyIndex = body.length;
 				body.push(
@@ -346,7 +347,7 @@ export class OAuthSelectorComponent extends Container {
 					),
 				);
 			}
-			if (!this.#filteredProviders.length) body.push("No matching providers");
+			if (!this.#filteredProviders.length) body.push(selectorProse("No matching providers"));
 		}
 		if (this.#statusMessage) details.push(this.#statusMessage);
 		return selectorFrame(

package/src/modes/components/plan-preview.ts

@@ -1,6 +1,6 @@
 import { Container, Markdown } from "@f5-sales-demo/pi-tui";
 import { getMarkdownTheme } from "../theme/theme";
-import { selectorFrame, selectorFrameContentWidth } from "./selector-frame";
+import { selectorFrame, selectorFrameContentWidth, selectorProse } from "./selector-frame";
 
 /** Static transcript-adjacent plan preview; approval controls live in the separate review overlay. */
 export class PlanPreviewComponent extends Container {
@@ -17,7 +17,7 @@ export class PlanPreviewComponent extends Container {
 			"Plan review",
 			"Prepared execution plan; use the active review overlay to approve, revise, or cancel.",
 			[],
-			body,
+			body.map(line => selectorProse(line)),
 			[],
 			[],
 		);

package/src/modes/components/plugin-settings.ts

@@ -16,7 +16,7 @@ import {
 	type PluginSettingsStorage,
 	pluginSettingsStorage,
 } from "./plugin-settings-drafts";
-import { matchesSelectorKey, selectorFrame } from "./selector-frame";
+import { matchesSelectorKey, selectorFrame, selectorProse } from "./selector-frame";
 import { SettingsBrowser } from "./settings-browser";
 import { SettingsChoiceEditor, SettingsTextEditor } from "./settings-editors";
 
@@ -375,7 +375,7 @@ export class PluginSettingsComponent extends Container {
 				"Plugin settings",
 				"User defaults",
 				[],
-				[this.#loadError || "Loading plugin settings…"],
+				[selectorProse(this.#loadError || "Loading plugin settings…")],
 				[],
 				this.#loadError ? ["Ctrl+R: retry · Esc: back"] : [],
 			)

package/src/modes/components/plugins/plugin-dashboard.ts

@@ -20,6 +20,7 @@ import {
 	type SelectorFrameLine,
 	selectorFrame,
 	selectorFrameContentWidth,
+	selectorProse,
 	selectorRow,
 } from "../selector-frame";
 import { applySearch, buildTabs, filterByTab, loadAllPlugins, pluginSelectionKey } from "./state-manager";
@@ -818,7 +819,7 @@ export class PluginDashboard extends Container {
 				),
 			);
 		}
-		if (!body.length || (wide && body.length === 1)) body.push(this.#emptyMessage());
+		if (!body.length || (wide && body.length === 1)) body.push(selectorProse(this.#emptyMessage()));
 		return { body, selectedBodyIndex };
 	}
 

package/src/modes/components/question-transcript.ts

@@ -1,7 +1,7 @@
 import type { Component } from "@f5-sales-demo/pi-tui";
 import type { AsyncInputQuestion, AsyncQuestionItem } from "../../../../chat-ui/src/interactions/contract";
 import { theme } from "../theme/theme";
-import { selectorFrame, selectorFrameContentWidth, selectorRow } from "./selector-frame";
+import { selectorFrame, selectorFrameContentWidth, selectorProse, selectorRow } from "./selector-frame";
 
 export interface AsyncInputReply {
 	type: "user_input_reply";
@@ -123,7 +123,7 @@ export class QuestionTranscriptComponent implements Component {
 			"Answer recorded",
 			`Question ${position + 1} of ${total}`,
 			[question.title],
-			[{ content: `${theme.symbol("checkbox.checked")} ${answer}`, selected: false }],
+			[selectorProse(`${theme.symbol("checkbox.checked")} ${answer}`)],
 			[],
 			[],
 		);

package/src/modes/components/recap-message.ts

@@ -0,0 +1,23 @@
+import { type Component, padding, wrapTextWithAnsi } from "@f5-sales-demo/pi-tui";
+import type { RecapRecord } from "../../session/recap";
+import { theme } from "../theme/theme";
+
+/** A compact, secondary transcript line whose wrapped text starts below its first word. */
+export class RecapMessageComponent implements Component {
+	constructor(readonly recap: RecapRecord) {}
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+		const add = (prefix: string, content: string) => {
+			const available = Math.max(1, width - prefix.length);
+			for (const [index, segment] of wrapTextWithAnsi(content, available).entries()) {
+				const lead = index === 0 ? prefix : padding(prefix.length);
+				lines.push(theme.italic(theme.fg("dim", lead + segment)));
+			}
+		};
+		add("  ↳ Recap: ", this.recap.summary);
+		if (this.recap.nextAction) add("    Next: ", this.recap.nextAction);
+		return lines;
+	}
+}

package/src/modes/components/request-user-input.ts

@@ -10,6 +10,7 @@ import {
 	selectorFrame,
 	selectorFrameContentWidth,
 	selectorKeys,
+	selectorProse,
 	selectorRow,
 } from "./selector-frame";
 
@@ -66,9 +67,9 @@ export class RequestUserInputComponent implements Component {
 		if (this.form.confirming) {
 			const body: SelectorFrameLine[] = [
 				selectorRow([`1. ${INPUT_COPY.proceed}`], [inner - 2], this.#confirmation === 0),
-				{ content: theme.fg("muted", `   Submit with unanswered questions.`), selected: false },
+				selectorProse(theme.fg("muted", `   Submit with unanswered questions.`)),
 				selectorRow([`2. ${INPUT_COPY.back}`], [inner - 2], this.#confirmation === 1),
-				{ content: theme.fg("muted", `   ${INPUT_COPY.backDescription}`), selected: false },
+				selectorProse(theme.fg("muted", `   ${INPUT_COPY.backDescription}`)),
 			];
 			return selectorFrame(
 				width,
@@ -97,10 +98,9 @@ export class RequestUserInputComponent implements Component {
 			);
 			if (option.description.trim())
 				body.push(
-					...readOnlyTextLines(option.description, inner - 3).map(content => ({
-						content: theme.fg("muted", `   ${content}`),
-						selected: false,
-					})),
+					...readOnlyTextLines(option.description, inner - 3).map(content =>
+						selectorProse(theme.fg("muted", `   ${content}`)),
+					),
 				);
 		}
 		const details: string[] = [];

package/src/modes/components/reviewed-action-dialog.ts

@@ -11,6 +11,7 @@ import {
 	selectorFrameContentWidth,
 	selectorKeys,
 	selectorNavigationHint,
+	selectorProse,
 	selectorRow,
 } from "./selector-frame";
 
@@ -67,9 +68,11 @@ export class ReviewedActionDialog<T> extends Container {
 			[],
 			this.#running
 				? [
-						this.#abort?.signal.aborted
-							? "Interruption requested; waiting for acknowledgement…"
-							: "Operation in progress…",
+						selectorProse(
+							this.#abort?.signal.aborted
+								? "Interruption requested; waiting for acknowledgement…"
+								: "Operation in progress…",
+						),
 					]
 				: [
 						this.#executed ? "Close unresolved result" : "Cancel",

package/src/modes/components/searchable-select-list.ts

@@ -13,6 +13,7 @@ import {
 	selectorFrameContentWidth,
 	selectorKeys,
 	selectorNavigationHint,
+	selectorProse,
 	selectorRow,
 } from "./selector-frame";
 
@@ -35,7 +36,7 @@ export class SearchableSelectList extends SelectList {
 		private readonly maxVisibleRows: number,
 		theme: SelectListTheme,
 	) {
-		super(sourceItems, maxVisibleRows, theme);
+		super(sourceItems, maxVisibleRows, theme, { presentation: "compact-with-selected-detail" });
 	}
 
 	override setFilter(filter: string): void {
@@ -75,7 +76,7 @@ export class SearchableSelectList extends SelectList {
 					const item = this.sourceItems[index]!;
 					return selectorRow([item.label], [inner - 2], index === this.#selectedIndex);
 				})
-			: [this.sourceItems.length ? "No matching options." : "No options available."];
+			: [selectorProse(this.sourceItems.length ? "No matching options." : "No options available.")];
 		const lines = selectorFrame(
 			width,
 			rows,

package/src/modes/components/selector-frame.ts

@@ -10,11 +10,26 @@ import {
 import { theme } from "../theme/theme";
 
 export interface SelectorFrameRow {
+	kind: "compact-row";
 	content: string;
 	selected: boolean;
+	fullDetail: string;
+	truncated: boolean;
 }
 
-export type SelectorFrameLine = string | SelectorFrameRow;
+export interface SelectorFrameProse {
+	kind: "wrapped-prose";
+	content: string;
+	tone: "text" | "muted";
+}
+
+export type SelectorFrameLine = SelectorFrameRow | SelectorFrameProse;
+
+interface RenderedBodyLine {
+	content: string;
+	selected: boolean;
+	sourceIndex: number;
+}
 
 export interface SelectorFrameOptions {
 	/** Index of the selected row in `body`; used to retain it when the frame is height-constrained. */
@@ -27,6 +42,8 @@ export interface SelectorFrameOptions {
 	minimumDetailRows?: number;
 	/** Contextual paging controls, included only when the body actually overflows. */
 	overflowHint?: string;
+	/** The caller supplies and pages the selected compact row's complete detail text. */
+	selectedDetail?: "automatic" | "provided";
 }
 
 function selectorFrameColumns(width: number): number {
@@ -59,11 +76,11 @@ function wrapSection(values: string[], width: number): string[] {
 }
 
 function windowBody(
-	body: SelectorFrameLine[],
+	body: RenderedBodyLine[],
 	visibleRows: number,
 	selectedIndex: number | undefined,
 	stickyRows: number,
-): SelectorFrameLine[] {
+): RenderedBodyLine[] {
 	if (visibleRows <= 0) return [];
 	if (body.length <= visibleRows) return body;
 	const stickyCount = Math.min(stickyRows, visibleRows - 1, body.length);
@@ -95,13 +112,12 @@ export function selectorFrame(
 	const top = border(`${box.topLeft}${box.horizontal.repeat(columns - 2)}${box.topRight}`);
 	const divider = border(`${sharp.teeRight}${box.horizontal.repeat(columns - 2)}${sharp.teeLeft}`);
 	const bottom = border(`${box.bottomLeft}${box.horizontal.repeat(columns - 2)}${box.bottomRight}`);
-	const line = (value: SelectorFrameLine) => {
-		const row = typeof value === "string" ? undefined : value;
-		const fitted = truncateToWidth(normalizeLine(typeof value === "string" ? value : value.content), contentWidth);
+	const line = (value: string, selected = false) => {
+		const fitted = truncateToWidth(normalizeLine(value), contentWidth);
 		const content = `${" ".repeat(padding)}${fitted}${" ".repeat(
 			Math.max(0, contentWidth - visibleWidth(fitted)),
 		)}${" ".repeat(padding)}`;
-		return row?.selected
+		return selected
 			? `${edge}${theme.bg("selectedBg", theme.fg("text", content))}${edge}`
 			: `${edge}${content}${edge}`;
 	};
@@ -111,10 +127,43 @@ export function selectorFrame(
 		.slice(0, 2)
 		.map(value => theme.fg("muted", value));
 	const navigationLines = navigation.filter(hasVisibleContent).map(normalizeLine);
-	const detailLines = wrapSection(details, contentWidth);
+	const selectedSourceIndex =
+		options.selectedBodyIndex ?? body.findIndex(value => value.kind === "compact-row" && value.selected);
+	const selectedRow = selectedSourceIndex >= 0 ? body[selectedSourceIndex] : undefined;
+	if (
+		options.selectedDetail === "provided" &&
+		selectedRow?.kind === "compact-row" &&
+		(selectedRow.truncated || visibleWidth(normalizeLine(selectedRow.content)) > contentWidth) &&
+		!details.some(hasVisibleContent)
+	) {
+		throw new TypeError("A truncating compact row requires complete selected detail text.");
+	}
+	const selectedDetail =
+		options.selectedDetail !== "provided" &&
+		selectedRow?.kind === "compact-row" &&
+		(selectedRow.truncated || visibleWidth(normalizeLine(selectedRow.content)) > contentWidth)
+			? [selectedRow.fullDetail]
+			: [];
+	const detailLines = wrapSection([...selectedDetail, ...details], contentWidth);
 	while (detailLines.length < (options.minimumDetailRows ?? 0)) detailLines.push("");
 	const footerLines = wrapSection(footer, contentWidth).map(value => theme.fg("muted", value));
-	const normalizedBody = body.filter(value => typeof value !== "string" || hasVisibleContent(value));
+	const normalizedBody = body.flatMap<RenderedBodyLine>((value, sourceIndex) => {
+		if (!value || typeof value !== "object" || !("kind" in value)) {
+			throw new TypeError("Frame body text must use selectorProse() or selectorRow().");
+		}
+		if (value.kind === "wrapped-prose") {
+			return wrapSection([value.content], contentWidth).map(content => ({
+				content: theme.fg(value.tone, content),
+				selected: false,
+				sourceIndex,
+			}));
+		}
+		if (value.kind !== "compact-row") {
+			throw new TypeError("Frame body text must use selectorProse() or selectorRow().");
+		}
+		return [{ content: value.content, selected: value.selected, sourceIndex }];
+	});
+	const selectedRenderedIndex = normalizedBody.findIndex(value => value.sourceIndex === selectedSourceIndex);
 
 	const gaps = {
 		headingToNavigation: navigationLines.length > 0,
@@ -143,7 +192,7 @@ export function selectorFrame(
 	let visibleBody = windowBody(
 		normalizedBody,
 		bodyRows,
-		options.selectedBodyIndex,
+		selectedRenderedIndex >= 0 ? selectedRenderedIndex : undefined,
 		Math.max(0, options.stickyBodyRows ?? 0),
 	);
 
@@ -156,7 +205,7 @@ export function selectorFrame(
 		visibleBody = windowBody(
 			normalizedBody,
 			bodyRows,
-			options.selectedBodyIndex,
+			selectedRenderedIndex >= 0 ? selectedRenderedIndex : undefined,
 			Math.max(0, options.stickyBodyRows ?? 0),
 		);
 	}
@@ -176,35 +225,53 @@ export function selectorFrame(
 
 	return [
 		top,
-		...heading.map(line),
-		...purposeLines.map(line),
+		...heading.map(value => line(value)),
+		...purposeLines.map(value => line(value)),
 		...(gaps.headingToNavigation ? [line("")] : []),
-		...navigationLines.map(line),
+		...navigationLines.map(value => line(value)),
 		divider,
-		...visibleBody.map(line),
+		...visibleBody.map(value => line(value.content, value.selected)),
 		...(gaps.bodyToDetails ? [line("")] : []),
-		...detailLines.map(line),
+		...detailLines.map(value => line(value)),
 		...(gaps.detailsToFooter ? [line("")] : []),
-		...footerLines.map(line),
+		...footerLines.map(value => line(value)),
 		bottom,
 	];
 }
 
+export function selectorProse(content: string, tone: "text" | "muted" = "text"): SelectorFrameProse {
+	return { kind: "wrapped-prose", content, tone };
+}
+
+export function selectorCompactRow(
+	content: string,
+	selected = false,
+	fullDetail = content,
+	truncated = false,
+): SelectorFrameRow {
+	if (truncated && !hasVisibleContent(fullDetail)) {
+		throw new TypeError("A truncating compact row requires complete selected detail text.");
+	}
+	return { kind: "compact-row", content, selected, fullDetail, truncated };
+}
+
 export function selectorRow(
 	cells: string[],
 	widths: number[],
 	selected = false,
 	tone: "text" | "muted" = "text",
 ): SelectorFrameRow {
+	let truncated = false;
 	const row = cells
 		.map((cell, index) => {
 			const width = Math.max(0, widths[index] ?? 0);
+			truncated ||= visibleWidth(cell) > width;
 			const fitted = truncateToWidth(cell, width);
 			return fitted + " ".repeat(Math.max(0, width - visibleWidth(fitted)));
 		})
 		.join("  ");
 	const text = `${selected ? theme.nav.cursor : " "} ${row}`;
-	return { content: theme.fg(tone, text), selected };
+	return selectorCompactRow(theme.fg(tone, text), selected, cells.join("  "), truncated);
 }
 
 type SelectorAction = "up" | "down" | "confirm" | "cancel" | "pageUp" | "pageDown";
@@ -298,7 +365,7 @@ export class ReportDetailsComponent extends Container {
 			this.title,
 			this.purpose,
 			[],
-			lines.slice(this.#offset, this.#offset + this.#capacity).map(content => ({ content, selected: false })),
+			lines.slice(this.#offset, this.#offset + this.#capacity).map(content => selectorCompactRow(content)),
 			[],
 			[
 				...(overflow
@@ -388,8 +455,8 @@ export class ConnectionInputComponent extends Container {
 			this.title,
 			"",
 			[],
-			this.content.render(inner),
-			[...wrapTextWithAnsi(this.purpose, inner).slice(0, 3), ...this.input.render(inner)],
+			this.content.render(inner).map(content => selectorProse(content)),
+			[this.purpose, ...this.input.render(inner)],
 			[selectorNavigationHint("submit"), selectorCancelHint("cancel")],
 		);
 	}

package/src/modes/components/session-observer-overlay.ts

@@ -29,6 +29,7 @@ import {
 	selectorFrame,
 	selectorFrameContentWidth,
 	selectorKeys,
+	selectorProse,
 } from "./selector-frame";
 
 type Mode = "picker" | "viewer";
@@ -120,7 +121,7 @@ export class SessionObserverOverlayComponent extends Container {
 			"Session observer",
 			session ? `Live read-only view · ${session.label} · identity ${session.id}` : "Live session is unavailable.",
 			[],
-			content.slice(this.#viewerOffset, this.#viewerOffset + this.#viewerCapacity),
+			content.slice(this.#viewerOffset, this.#viewerOffset + this.#viewerCapacity).map(line => selectorProse(line)),
 			[],
 			[
 				...(this.#viewerLength > this.#viewerCapacity