@oh-my-pi/pi-tui 18.13.1 → 18.13.2

package/src/chrome/context-map.ts

@@ -0,0 +1,62 @@
+/** Pure occupancy calculations for contiguous token segments, independent of themes and renderers. */
+export interface ContextMapSegment<T> {
+	readonly id: T;
+	readonly tokens: number;
+}
+
+export interface ContextMapCell<T> {
+	readonly id: T;
+	readonly full: boolean;
+}
+
+/**
+ * Lays `segments` out in order over a `columns` × `rows` grid representing `windowTokens`; each cell takes the
+ * segment covering most of it and is `full` at 70% coverage or more. Returns `[]` when the window or grid
+ * size is unusable, and omits cells no segment touches.
+ */
+export function planContextMap<T>(
+	segments: readonly ContextMapSegment<T>[],
+	windowTokens: number,
+	columns: number,
+	rows: number,
+): ContextMapCell<T>[] {
+	if (
+		!Number.isFinite(windowTokens) ||
+		windowTokens <= 0 ||
+		!Number.isInteger(columns) ||
+		!Number.isInteger(rows) ||
+		columns <= 0 ||
+		rows <= 0
+	)
+		return [];
+	const cellCount = columns * rows;
+	const tokensPerCell = windowTokens / cellCount;
+	const ranges: { id: T; start: number; end: number }[] = [];
+	let cursor = 0;
+	for (const segment of segments) {
+		if (!Number.isFinite(segment.tokens) || segment.tokens <= 0) continue;
+		const end = Math.min(windowTokens, cursor + segment.tokens);
+		if (end > cursor) ranges.push({ id: segment.id, start: cursor, end });
+		cursor = end;
+		if (cursor >= windowTokens) break;
+	}
+	const cells: ContextMapCell<T>[] = [];
+	let first = 0;
+	for (let index = 0; index < cellCount; index++) {
+		const start = index * tokensPerCell;
+		const end = (index + 1) * tokensPerCell;
+		while (first < ranges.length && ranges[first]!.end <= start) first++;
+		let winner: T | undefined;
+		let overlap = 0;
+		for (let part = first; part < ranges.length && ranges[part]!.start < end; part++) {
+			const range = ranges[part]!;
+			const covered = Math.min(end, range.end) - Math.max(start, range.start);
+			if (covered > overlap) {
+				overlap = covered;
+				winner = range.id;
+			}
+		}
+		if (winner !== undefined) cells.push({ id: winner, full: overlap / tokensPerCell >= 0.7 });
+	}
+	return cells;
+}

package/src/chrome/context-presentation.ts

@@ -0,0 +1,26 @@
+import type { ThemeColor } from "../theme";
+import type { SymbolKey } from "../theme/symbols";
+import type { ContextCategoryId } from "./context-view-model";
+
+/** Shared category styles for maps and interactive legends; resolve glyphs at render time. */
+const SYSTEM = { color: "accent", symbol: "context.content" } as const;
+const DETAILS = { color: "customMessageLabel", symbol: "context.content" } as const;
+const TOOLS = { color: "warning", symbol: "context.content" } as const;
+const SKILLS = { color: "success", symbol: "context.content" } as const;
+const MESSAGES = { color: "userMessageText", symbol: "context.messages" } as const;
+const OUTPUT = { color: "muted", symbol: "context.messages" } as const;
+export const CONTEXT_PRESENTATION = {
+	"system-prompt": SYSTEM,
+	skills: SKILLS,
+	"built-in-tools": TOOLS,
+	"custom-tools": DETAILS,
+	// Shares the System Prompt color; the message glyph tells them apart in the map.
+	"user-messages": { color: "accent", symbol: "context.messages" },
+	"assistant-messages": MESSAGES,
+	"assistant-thinking": DETAILS,
+	"tool-calls": TOOLS,
+	"tool-output": OUTPUT,
+	buffer: { color: "warning", symbol: "context.buffer" },
+	free: { color: "dim", symbol: "context.free" },
+} as const satisfies Record<ContextPresentationId, { color: ThemeColor; symbol: SymbolKey }>;
+export type ContextPresentationId = ContextCategoryId | "buffer" | "free";

package/src/chrome/context-view-model.ts

@@ -0,0 +1,73 @@
+/** Context snapshot shapes shared by the session snapshot builder and the context viewer. */
+import type { ContextBreakdown } from "../status-line/context-usage";
+
+interface ContextCategoryDescriptor {
+	readonly id: string;
+	readonly label: string;
+	/** Overview row label when the Overview weight differs from the category's content. */
+	readonly overviewLabel?: string;
+	/** Listed with its weight but never opened. */
+	readonly openable?: false;
+}
+
+/** Context categories in display order. */
+export const CONTEXT_CATEGORIES = [
+	// The Overview weight excludes the Skills listing; content views keep complete system blocks.
+	{ id: "system-prompt", label: "System Prompt", overviewLabel: "System Prompt (excluding Skills)" },
+	// An estimate of the prompt's skill listing, without entries of its own.
+	{ id: "skills", label: "Skills", openable: false },
+	{ id: "built-in-tools", label: "Built-in Tools" },
+	{ id: "custom-tools", label: "Custom Tools" },
+	{ id: "user-messages", label: "User / Developer Messages" },
+	{ id: "assistant-messages", label: "Assistant Messages" },
+	{ id: "assistant-thinking", label: "Assistant Thinking" },
+	{ id: "tool-calls", label: "Tool Calls" },
+	{ id: "tool-output", label: "Tool Output" },
+] as const satisfies readonly ContextCategoryDescriptor[];
+
+export type ContextCategoryId = (typeof CONTEXT_CATEGORIES)[number]["id"];
+
+const DESCRIPTORS_BY_ID = new Map<ContextCategoryId, ContextCategoryDescriptor>(
+	CONTEXT_CATEGORIES.map(descriptor => [descriptor.id, descriptor]),
+);
+
+/** Descriptor of a category id: its label, optional Overview label, and whether it can be opened. */
+export function contextCategoryDescriptor(id: ContextCategoryId): ContextCategoryDescriptor {
+	return DESCRIPTORS_BY_ID.get(id)!;
+}
+
+export interface ContextThinkingGroup {
+	readonly id: string;
+	readonly label: string;
+	readonly tokens: number;
+	readonly interrupted?: boolean;
+}
+
+export interface ContextViewEntry {
+	readonly id: string;
+	readonly label: string;
+	readonly text: string;
+	/** Aggregation weight for the unscaled replay estimate; shared blocks contribute through their group. */
+	readonly tokens: number;
+	readonly interrupted?: boolean;
+	readonly thinkingGroup?: ContextThinkingGroup;
+	readonly path?: string;
+	readonly info?: string;
+	readonly timestamp?: number;
+	readonly callId?: string;
+}
+
+export interface ContextViewCategory {
+	id: ContextCategoryId;
+	key?: string;
+	label: string;
+	/** Overview attribution weight, not reported usage; may differ from the entry sum (e.g. Skills subtraction). */
+	tokens: number;
+	entries: ContextViewEntry[];
+	children?: ContextViewCategory[];
+}
+
+export interface ContextViewData {
+	readonly breakdown: ContextBreakdown;
+	readonly categories: readonly ContextViewCategory[];
+}

package/src/components/editor.ts

@@ -2431,10 +2431,12 @@ export class Editor implements Component, Focusable {
 			// Word left
 			this.#resetKillSequence();
 			this.#moveWordBackwards();
+			this.#dismissAutocomplete();
 		} else if (kb.matchesCanonical(canonical, "tui.editor.cursorWordRight")) {
 			// Word right
 			this.#resetKillSequence();
 			this.#moveWordForwards();
+			this.#dismissAutocomplete();
 		}
 		// Arrow keys
 		else if (kb.matchesCanonical(canonical, "tui.editor.cursorUp")) {
@@ -3900,6 +3902,9 @@ export class Editor implements Component, Focusable {
 		const dropSpace = this.#hasProvisionalSpace();
 		this.#historyIndex = -1; // Exit history browsing mode
 		this.#resetKillSequence();
+		// The cursor leaves the trigger token's line, so any open popup is stale:
+		// keeping it would float on the new line and Enter would submit past it.
+		this.#dismissAutocomplete();
 		this.#recordUndoState();
 
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
@@ -4201,23 +4206,27 @@ export class Editor implements Component, Focusable {
 
 	#moveToLineStart(): void {
 		this.#resetKillSequence();
+		this.#dismissAutocomplete();
 		this.#setCursorCol(0);
 	}
 
 	#moveToLineEnd(): void {
 		this.#resetKillSequence();
+		this.#dismissAutocomplete();
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
 		this.#setCursorCol(currentLine.length);
 	}
 
 	#moveToMessageStart(): void {
 		this.#resetKillSequence();
+		this.#dismissAutocomplete();
 		this.#state.cursorLine = 0;
 		this.#setCursorCol(0);
 	}
 
 	#moveToMessageEnd(): void {
 		this.#resetKillSequence();
+		this.#dismissAutocomplete();
 		this.#state.cursorLine = this.#state.lines.length - 1;
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
 		this.#setCursorCol(currentLine.length);
@@ -4697,6 +4706,7 @@ export class Editor implements Component, Focusable {
 
 	#moveCursor(deltaLine: number, deltaCol: number): void {
 		this.#resetKillSequence();
+		this.#dismissAutocomplete();
 		const visualLines = this.#buildVisualLineMap(this.#caretRowWidth);
 		const currentVisualLine = this.#findCurrentVisualLine(visualLines);
 
@@ -4749,6 +4759,7 @@ export class Editor implements Component, Focusable {
 
 	#pageScroll(direction: -1 | 1): void {
 		this.#resetKillSequence();
+		this.#dismissAutocomplete();
 		const visualLines = this.#buildVisualLineMap(this.#caretRowWidth);
 		const currentVisualLine = this.#findCurrentVisualLine(visualLines);
 		const step = this.#getPageScrollStep(visualLines.length);
@@ -4779,6 +4790,7 @@ export class Editor implements Component, Focusable {
 	 */
 	#jumpToChar(char: string, direction: "forward" | "backward"): void {
 		this.#resetKillSequence();
+		this.#dismissAutocomplete();
 		const isForward = direction === "forward";
 		const lines = this.#state.lines;
 
@@ -5195,6 +5207,17 @@ export class Editor implements Component, Focusable {
 		}
 	}
 
+	/**
+	 * Close the popup when the cursor leaves the token it was opened for (newline,
+	 * pure cursor motion). Its prefix no longer matches the text before the cursor,
+	 * so it could neither accept nor refresh and would linger stale.
+	 */
+	#dismissAutocomplete(): void {
+		if (this.#autocompleteState === null) return;
+		this.#cancelAutocomplete();
+		this.onAutocompleteUpdate?.();
+	}
+
 	/**
 	 * Whether an autocomplete popup is on screen. An `@` list narrowed to no match
 	 * while its refresh is pending stays open internally but is hidden, so it does

package/src/components/markdown.ts

@@ -4346,7 +4346,13 @@ export class Markdown implements Component {
 
 			// Process item tokens; nested-list lines arrive structurally tagged and
 			// already carry their own full indent.
-			const itemLines = this.#renderListItem(item.tokens || [], depth, width, styleContext);
+			const itemLines = this.#renderListItem(
+				item.tokens || [],
+				depth,
+				width,
+				Math.max(1, width - visibleWidth(continuationIndent)),
+				styleContext,
+			);
 
 			if (itemLines.length > 0) {
 				const firstLine = itemLines[0]!;
@@ -4398,11 +4404,13 @@ export class Markdown implements Component {
 		tokens: Token[],
 		parentDepth: number,
 		width: number,
+		contentWidth: number,
 		styleContext?: InlineStyleContext,
 	): RenderedListItemLine[] {
 		const lines: RenderedListItemLine[] = [];
 
-		for (const token of tokens) {
+		for (let i = 0; i < tokens.length; i++) {
+			const token = tokens[i]!;
 			if (token.type === "list") {
 				// Nested list - render with one additional indent level
 				// These lines carry their own indent, so tag them for pass-through
@@ -4442,6 +4450,10 @@ export class Markdown implements Component {
 					lines.push({ ...bodyLine, nested: false });
 				}
 				lines.push({ text: this.#theme.codeBlockBorder("```"), nested: false });
+			} else if (token.type === "table") {
+				for (const row of this.#renderTable(token as TableToken, contentWidth, tokens[i + 1]?.type, styleContext)) {
+					lines.push({ text: row, nested: false });
+				}
 			} else if (isMathToken(token)) {
 				// Display math block inside a list item: stack fractions / matrix rows.
 				const apply = styleContext?.applyText ?? ((t: string) => this.#applyDefaultStyle(t));

package/src/overlays/advisor-config.ts

@@ -64,10 +64,11 @@ import { getThinkingLevelMetadata, parseThinkingLevel } from "../thinking";
 
 export const ADVISOR_REVIEW_MODES = ["turn", "agent-end"] as const;
 export const ADVISOR_SYNC_BACKLOG_MODES = ["off", "1", "3", "5", "strict"] as const;
+export const ADVISOR_SESSION_SCOPES = ["main", "subagent", "all"] as const;
 
 export type AdvisorReviewMode = (typeof ADVISOR_REVIEW_MODES)[number];
 export type AdvisorSyncBacklog = (typeof ADVISOR_SYNC_BACKLOG_MODES)[number];
-
+export type AdvisorSessionScope = (typeof ADVISOR_SESSION_SCOPES)[number];
 /** One advisor declared in `WATCHDOG.yml`; its instructions specialize the shared baseline. */
 export interface AdvisorConfig {
 	name: string;
@@ -83,6 +84,10 @@ export interface AdvisorConfig {
 	reviewMode?: AdvisorReviewMode;
 	reviewInterval?: number;
 	syncBacklog?: AdvisorSyncBacklog;
+	/** Which session kinds this advisor attaches to (`main`, `subagent`, or `all`; defaults to `all`). */
+	scope?: AdvisorSessionScope;
+	/** Whether primary assistant thinking blocks are included in updates sent to this advisor (defaults to `true`). */
+	includeReasoning?: boolean;
 }
 
 /** Which level a `WATCHDOG.yml` lives at: the project root or the user agent dir. */
@@ -1202,7 +1207,9 @@ export class AdvisorConfigOverlayComponent implements Component {
 			advisor.syncBacklog === undefined &&
 			!advisor.instructions?.trim() &&
 			advisor.enabled !== false &&
-			advisor.maxNotesPerUpdate === undefined
+			advisor.maxNotesPerUpdate === undefined &&
+			advisor.scope === undefined &&
+			advisor.includeReasoning === undefined
 		);
 	}
 

package/src/overlays/ask-dialog.ts

@@ -147,14 +147,21 @@ interface AskDialogCallbacks {
 	): Promise<AskDialogPromptValue | undefined>;
 }
 
+/**
+ * Routes typing to a composer draft that was in progress when the dialog
+ * opened, so in-flight keystrokes never answer by accident. The up/down select
+ * keys are the explicit hand-off: they release the guard for the rest of the
+ * dialog's life and the draft stays parked (intact) beneath it.
+ */
 interface AskDialogInputGuard {
 	isBlocked(): boolean;
 	handleInput(keyData: string): void;
+	/** Shown after the release keys while the guard holds input. */
 	hint: string;
 	/** Mirror the guard's blocked state onto the proxied draft surface each
 	 *  render, so a draft that owns input shows a visible insertion cursor even
-	 *  though this dialog holds TUI focus. */
-	syncPresentation?(): void;
+	 *  though this dialog holds TUI focus, and drops it once the dialog takes over. */
+	syncPresentation?(blocked: boolean): void;
 }
 
 interface AskDialogOptions {
@@ -587,6 +594,8 @@ export class AskDialogComponent implements Component {
 	#native: NativeNode | undefined;
 	/** Input-guard blocked state {@link #native} was described with (the guard flips outside this dialog). */
 	#nativeBlocked = false;
+	/** Set once the user explicitly takes the dialog (up/down, or a pointer action) while a draft held input. */
+	#guardReleased = false;
 	/** When the countdown runs out (epoch ms), for the native ring. */
 	#countdownDeadline = 0;
 	/** Once-a-second re-describe while the native countdown ring is shown. */
@@ -709,9 +718,15 @@ export class AskDialogComponent implements Component {
 			this.toggleQuestionExpansion();
 			return;
 		}
-		const inputGuard = this.options.inputGuard;
-		if (inputGuard?.isBlocked()) {
-			inputGuard.handleInput(keyData);
+		if (this.#guardBlocks()) {
+			if (
+				getKeybindings().matches(keyData, "tui.select.up") ||
+				getKeybindings().matches(keyData, "tui.select.down")
+			) {
+				this.#releaseGuard();
+				return;
+			}
+			this.options.inputGuard?.handleInput(keyData);
 			this.#requestRender();
 			return;
 		}
@@ -736,7 +751,7 @@ export class AskDialogComponent implements Component {
 		// Keep the proxied draft's cursor visible while it owns input (the editor
 		// renders as the next sibling in the same container, so this lands in the
 		// same frame).
-		this.options.inputGuard?.syncPresentation?.();
+		this.options.inputGuard?.syncPresentation?.(this.#guardBlocks());
 		if (this.#hidden) return this.#renderHidden(width);
 		const innerWidth = Math.max(1, width - 4);
 		this.#contentWidth = innerWidth;
@@ -781,10 +796,9 @@ export class AskDialogComponent implements Component {
 	 * countdown, Hide, then Note, Skip and the primary Submit/Next).
 	 */
 	describe(cx: DescribeContext): NativeNode {
-		const inputGuard = this.options.inputGuard;
 		// Same draft-cursor mirroring as render(): the proxied draft describes itself next to this dialog.
-		inputGuard?.syncPresentation?.();
-		const blocked = inputGuard?.isBlocked() ?? false;
+		const blocked = this.#guardBlocks();
+		this.options.inputGuard?.syncPresentation?.(blocked);
 		const ring = this.#countdown !== undefined && cx.supports("meter");
 		if (ring) this.#startRingTick();
 		if (this.#native && this.#nativeBlocked === blocked) return this.#native;
@@ -998,7 +1012,7 @@ export class AskDialogComponent implements Component {
 		if (blocked && inputGuard) {
 			return actionBar([
 				...lead,
-				text([span(plainText(inputGuard.hint), "muted")], { truncate: "end", role: "omp.ask.summary" }),
+				text([span(plainText(this.#guardHint(inputGuard)), "muted")], { truncate: "end", role: "omp.ask.summary" }),
 				skip,
 			]);
 		}
@@ -1045,13 +1059,16 @@ export class AskDialogComponent implements Component {
 				this.#setHidden(event.act === "hide");
 				return;
 			}
-			if (this.#hidden || this.options.inputGuard?.isBlocked()) return;
+			if (this.#hidden) return;
+			// A pointer action on the dialog is an explicit hand-off from the draft.
+			this.#releaseGuardForPointer();
 			if (event.act === "submit") this.#pressEnter();
 			else if (event.act === "note") this.#pressNote();
 			return;
 		}
 		if (event.type !== "select" && event.type !== "activate") return;
-		if (this.#hidden || this.options.inputGuard?.isBlocked()) return;
+		if (this.#hidden) return;
+		this.#releaseGuardForPointer();
 		const key = leafKey(event.key);
 		if (key === "tabs") {
 			if (!this.#hasSubmitTab()) return;
@@ -1212,16 +1229,39 @@ export class AskDialogComponent implements Component {
 		this.#requestRender();
 	}
 
+	/** True while a draft that predates the dialog still owns typing. */
+	#guardBlocks(): boolean {
+		return !this.#guardReleased && (this.options.inputGuard?.isBlocked() ?? false);
+	}
+
+	/** Up/down hand the keyboard to the dialog for good; the draft stays untouched beneath it. */
+	#releaseGuard(): void {
+		this.#guardReleased = true;
+		this.#native = undefined;
+		this.#hidden = false;
+		this.#requestRender();
+	}
+
+	#releaseGuardForPointer(): void {
+		if (!this.#guardBlocks()) return;
+		this.#guardReleased = true;
+		this.#native = undefined;
+	}
+
+	#guardHint(inputGuard: AskDialogInputGuard): string {
+		return `${editorKeys("tui.select.up", "tui.select.down")} answer · ${inputGuard.hint}`;
+	}
+
 	/** Hidden: one line in the composer's place — title (with countdown), the question clipped to fit, and how to bring it back. */
 	#renderHidden(width: number): readonly string[] {
 		const hideKey = editorKey("app.ask.hide");
 		const enter = formatKeyHint("enter");
 		const inputGuard = this.options.inputGuard;
-		const blocked = inputGuard?.isBlocked() ?? false;
+		const blocked = this.#guardBlocks();
 		// While a draft owns input, Enter goes to the draft, so only the hide key restores.
 		const show = blocked ? hideKey : hideKey ? `${hideKey}/${enter}` : enter;
 		const hints: string[] = [];
-		if (blocked && inputGuard) hints.push(inputGuard.hint);
+		if (blocked && inputGuard) hints.push(this.#guardHint(inputGuard));
 		if (show) hints.push(`${show} show`);
 		hints.push(`${editorKey("tui.select.cancel")} cancel`);
 		const hint = theme.fg("dim", ` · ${hints.join(" · ")}`);
@@ -1305,7 +1345,7 @@ export class AskDialogComponent implements Component {
 		const enter = formatKeyHint("enter");
 		const upDown = editorKeys("tui.select.up", "tui.select.down");
 		const inputGuard = this.options.inputGuard;
-		if (inputGuard?.isBlocked()) return `${inputGuard.hint}${this.#expandHint()} · ${cancel}`;
+		if (inputGuard && this.#guardBlocks()) return `${this.#guardHint(inputGuard)}${this.#expandHint()} · ${cancel}`;
 		if (this.#isSubmitTab()) {
 			const scroll = indicator ? ` ${indicator} scroll ·` : "";
 			return `${enter} submit · ${upDown} scroll ·${scroll} ${cancel}`;

package/src/overlays/context-viewer-format.ts

@@ -0,0 +1,145 @@
+/**
+ * Display text for context entries. Each header has an ANSI-string form (`render`)
+ * and a span form (`describe`); keep the twins visually identical.
+ */
+import { sanitizeText } from "@oh-my-pi/pi-utils";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
+import { CONTEXT_PRESENTATION } from "../chrome/context-presentation";
+import type { ContextCategoryId, ContextThinkingGroup, ContextViewEntry } from "../chrome/context-view-model";
+import { editorKey } from "../chrome/keybinding-hints";
+import { span } from "../native/describe";
+import { PREVIEW_LIMITS, replaceTabs, shortenEmbeddedPaths, shortenPath } from "../render/render-utils";
+import { theme } from "../theme/theme";
+import { wrapTextWithAnsi } from "../utils";
+
+const TIMESTAMP_FORMAT = {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit",
+	hour: "2-digit",
+	minute: "2-digit",
+} as const;
+
+/** Normalized newlines, control characters removed, tabs expanded. */
+export function safeContent(value: string): string {
+	return replaceTabs(sanitizeText(value.replace(/\r\n?/g, "\n")));
+}
+
+/** {@link safeContent} with embedded home paths shortened, for labels and metadata. */
+export function safeText(value: string): string {
+	return shortenEmbeddedPaths(safeContent(value));
+}
+
+/** {@link safeText} collapsed to one row. */
+export function safeLine(value: string): string {
+	return safeText(value).replace(/\n/g, " ");
+}
+
+/** Token label of an entry or group: `—` for a grouped entry, `N/A · Interrupted`, else `N token(s)` (unscaled estimate). */
+export function tokenEstimate(item: ContextViewEntry | ContextThinkingGroup): string {
+	// A grouped entry shares its group's estimate, which the group heading shows.
+	if ("thinkingGroup" in item && item.thinkingGroup) return "—";
+	if (item.interrupted) return "N/A · Interrupted";
+	return `${item.tokens.toLocaleString("en-US")} ${item.tokens === 1 ? "token" : "tokens"}`;
+}
+
+/** `[label] N tokens` as ANSI. */
+export function entryHeaderLine(entry: ContextViewEntry, category: ContextCategoryId): string {
+	const color = CONTEXT_PRESENTATION[category].color;
+	return (
+		theme.fg("dim", "[") +
+		theme.fg(color, theme.bold(safeLine(entry.label))) +
+		theme.fg("dim", `] ${tokenEstimate(entry)}`)
+	);
+}
+
+/** `[label] N tokens` as spans. */
+export function entryHeaderSpans(entry: ContextViewEntry, category: ContextCategoryId): TspSpan[] {
+	const color = CONTEXT_PRESENTATION[category].color;
+	return [span("[", "dim"), span(safeLine(entry.label), `${color} strong`), span(`] ${tokenEstimate(entry)}`, "dim")];
+}
+
+/** Heading for a shared thinking group: label plus its token estimate. */
+export function groupHeaderLine(group: ContextThinkingGroup, category: ContextCategoryId): string {
+	const color = CONTEXT_PRESENTATION[category].color;
+	return theme.fg(color, theme.bold(safeLine(group.label))) + theme.fg("dim", ` · ${tokenEstimate(group)}`);
+}
+
+/** Truncation marker under a preview; the selected preview also advertises the open key. */
+export function previewHint(selected: boolean): string {
+	const confirm = selected ? editorKey("tui.select.confirm") : "";
+	return (
+		theme.fg("dim", "  … more") +
+		(confirm ? theme.fg("dim", " · ") + theme.fg("accent", `${confirm} View Content`) : "")
+	);
+}
+
+/**
+ * Metadata rows: info and path, call id, timestamp. The full-content view also
+ * lists the thinking group, which previews show as a shared heading instead.
+ */
+export function entryMetadata(
+	entry: ContextViewEntry,
+	options: { hour12: boolean | undefined; withGroup: boolean },
+): string[] {
+	const lines: string[] = [];
+	const group = entry.thinkingGroup;
+	if (group && options.withGroup) lines.push(`${safeLine(group.label)} · ${tokenEstimate(group)}`);
+	const info = safeText([entry.info, entry.path ? shortenPath(entry.path) : undefined].filter(Boolean).join(" · "));
+	if (info) lines.push(info);
+	const callId = entry.callId !== undefined ? safeText(entry.callId) : "";
+	if (callId) lines.push(callId);
+	if (entry.timestamp !== undefined)
+		lines.push(new Date(entry.timestamp).toLocaleString([], { ...TIMESTAMP_FORMAT, hour12: options.hour12 }));
+	return lines;
+}
+
+/** Preview row budget for a list of `height` rows: room for the entry heading, hint, and group heading. */
+export function previewRows(entry: ContextViewEntry, height: number): number {
+	const reserved = entry.thinkingGroup ? 3 : 2;
+	return Math.max(1, Math.min(PREVIEW_LIMITS.OUTPUT_EXPANDED, height - reserved));
+}
+
+export interface EntryPreviewOptions {
+	/** Wrap width of preview rows. */
+	readonly width: number;
+	/** Maximum preview rows. */
+	readonly rows: number;
+	/** Viewport width; bounds the source read to `sourceWidth × rows × 2` characters before sanitizing and wrapping. */
+	readonly sourceWidth: number;
+	readonly hour12: boolean | undefined;
+}
+
+/** Dim metadata rows, then the indented body, cut to `rows`; `complete` is false when anything was omitted. */
+export function entryPreview(
+	entry: ContextViewEntry,
+	options: EntryPreviewOptions,
+): { lines: string[]; complete: boolean } {
+	const { width, rows } = options;
+	const maxChars = Math.max(1, options.sourceWidth) * rows * 2;
+	const metadata = entryMetadata(entry, { hour12: options.hour12, withGroup: false }).join("\n");
+	const metadataLength = Math.min(metadata.length, maxChars);
+	// Providers often end thinking and tool output with newlines; they render as empty rows.
+	const body = entry.text.trimEnd();
+	const bodyLength = Math.min(body.length, Math.max(0, maxChars - metadataLength - (metadataLength ? 1 : 0)));
+	const parts = [
+		{
+			value: safeContent(metadata.slice(0, metadataLength)),
+			prefix: "",
+			style: (line: string) => theme.fg("dim", line),
+		},
+		{ value: safeContent(body.slice(0, bodyLength)), prefix: "  ", style: (line: string) => line },
+	];
+	const lines: string[] = [];
+	for (const { value, prefix, style } of parts) {
+		if (!value) continue;
+		for (const paragraph of value.split("\n")) {
+			const remaining = rows - lines.length;
+			if (remaining === 0) return { lines, complete: false };
+			const wrapped = paragraph ? wrapTextWithAnsi(style(paragraph), Math.max(1, width - prefix.length)) : [""];
+			lines.push(...wrapped.slice(0, remaining).map(line => `${prefix}${line}`));
+			if (wrapped.length > remaining) return { lines, complete: false };
+		}
+	}
+	return { lines, complete: metadataLength === metadata.length && bodyLength === body.length };
+}