@xprnvd/pi-context-view 0.0.0-stage → 0.8.0

package/src/ui/search.ts

@@ -0,0 +1,427 @@
+/**
+ * Shared find-as-you-type pieces for both views: the one-line query prompt,
+ * case-insensitive matching, and match highlighting inside rendered lines.
+ * Matching follows pi's fullscreen transcript search: every whitespace run,
+ * line breaks included, matches a single space, so a phrase that wraps across
+ * two preview lines is still found. No pi access beyond the theme.
+ */
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import {
+	Input,
+	sliceByColumn,
+	stripTerminalSequences,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+
+import { normalizeInlineText, normalizePreviewText } from "../text.ts";
+import { BODY_INDENT, fitLine, spreadLine } from "./layout.ts";
+
+/** Hint-row key label that opens the search prompt in either view. */
+export const SEARCH_KEY = "/";
+/** Hint-row key label for stepping through preview matches. */
+export const MATCH_STEP_KEY_HINT = "n/N";
+
+const ANSI_SEQUENCE = /\u001B\[[\u0030-\u003F]*[\u0020-\u002F]*[\u0040-\u007E]|\u001B[\]_P^X][^\u0007\u001B]*(?:\u0007|\u001B\\)/g;
+const TRAILING_ANSI = new RegExp(`(?:${ANSI_SEQUENCE.source})+$`);
+const WORD = /\S+/gu;
+const PRINTABLE_ASCII = /^[\u0020-\u007E]*$/;
+const segmenter = new Intl.Segmenter();
+
+/** Visible-column span of one match on one rendered line, end exclusive. */
+export interface MatchSegment {
+	readonly row: number;
+	readonly start: number;
+	readonly end: number;
+}
+
+/** One query occurrence; several segments when it wraps across rows. */
+export interface SearchMatch {
+	readonly segments: readonly MatchSegment[];
+}
+
+/** One highlight range on a rendered line. */
+export interface HighlightRange {
+	readonly start: number;
+	readonly end: number;
+	/** The match the user is on; emphasized over the others. */
+	readonly current: boolean;
+}
+
+/** Corpus character range mapped back to a run of visible columns on one row. */
+interface CorpusSpan {
+	readonly textStart: number;
+	readonly textEnd: number;
+	readonly row: number;
+	readonly start: number;
+	readonly end: number;
+	/** One column per character, so inner offsets map linearly. */
+	readonly linear: boolean;
+}
+
+/** Whitespace-collapsed text of every line plus its mapping to rows and columns. */
+interface SearchCorpus {
+	readonly text: string;
+	readonly spans: readonly CorpusSpan[];
+}
+
+/** Case-insensitive pattern for a query, or undefined when it is blank. */
+export function searchPattern(query: string): RegExp | undefined {
+	const normalized = query.replace(/\s+/gu, " ").trim();
+	if (normalized === "") return undefined;
+	return new RegExp(normalized.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "iu");
+}
+
+/** Whether a row label contains the query, compared as it renders on one line. */
+export function labelMatches(label: string, pattern: RegExp): boolean {
+	return pattern.test(normalizeInlineText(label));
+}
+
+/**
+ * Searchable form of raw content: sanitized like a preview, with whitespace
+ * collapsed so a phrase matches however it wraps. Callers cache the result.
+ */
+export function searchableContent(text: string): string {
+	return normalizePreviewText(text).replace(/\s+/gu, " ");
+}
+
+/** Every occurrence of the query across rendered lines, in reading order. */
+export function findMatches(lines: readonly string[], pattern: RegExp): SearchMatch[] {
+	const corpus = buildCorpus(lines);
+	const global = new RegExp(pattern.source, "giu");
+	const matches: SearchMatch[] = [];
+	let spanIndex = 0;
+	for (const found of corpus.text.matchAll(global)) {
+		const start = found.index;
+		const end = start + found[0].length;
+		if (end === start) continue;
+		while (spanIndex < corpus.spans.length && (corpus.spans[spanIndex]?.textEnd ?? 0) <= start) spanIndex++;
+		const segments: MatchSegment[] = [];
+		for (let index = spanIndex; index < corpus.spans.length; index++) {
+			const span = corpus.spans[index];
+			if (span === undefined || span.textStart >= end) break;
+			const segmentStart = span.linear ? span.start + Math.max(start, span.textStart) - span.textStart : span.start;
+			const segmentEnd = span.linear ? span.start + Math.min(end, span.textEnd) - span.textStart : span.end;
+			const previous = segments.at(-1);
+			// Consecutive spans on one row, including the space between words, join into one segment.
+			if (previous !== undefined && previous.row === span.row) {
+				segments[segments.length - 1] = { ...previous, end: Math.max(previous.end, segmentEnd) };
+			} else {
+				segments.push({ row: span.row, start: segmentStart, end: segmentEnd });
+			}
+		}
+		if (segments.length > 0) matches.push({ segments });
+	}
+	return matches;
+}
+
+/**
+ * Highlight ranges on one rendered line with pi's own transcript-search styles.
+ * Styling is reapplied to every plain run, so the line's own color resets
+ * cannot cut a highlight short.
+ */
+export function highlightLine(theme: Theme, line: string, ranges: readonly HighlightRange[]): string {
+	const width = visibleWidth(line);
+	let result = "";
+	let column = 0;
+	// Every slice comes from the original line, which carries the styles active at its start.
+	for (const range of [...ranges].sort((a, b) => a.start - b.start)) {
+		const start = Math.max(column, Math.min(range.start, width));
+		const end = Math.min(range.end, width);
+		if (end <= start) continue;
+		result += sliceByColumn(line, column, start - column, true);
+		result += styleRuns(sliceByColumn(line, start, end - start, true), (text) => matchStyle(theme, text, range.current));
+		column = end;
+	}
+	if (column === 0) return line;
+	// Slicing stops at the last visible column, so restore the resets that close the line.
+	return `${result}${sliceByColumn(line, column, width - column, true)}${line.match(TRAILING_ANSI)?.[0] ?? ""}`;
+}
+
+/** One match segment on a row, tagged with the match it belongs to. */
+interface RowSegment {
+	readonly match: number;
+	readonly start: number;
+	readonly end: number;
+}
+
+/** Match segments grouped by row, so rendering a row never scans every match. */
+function segmentsByRow(matches: readonly SearchMatch[]): Map<number, RowSegment[]> {
+	const rows = new Map<number, RowSegment[]>();
+	for (const [match, { segments }] of matches.entries()) {
+		for (const segment of segments) {
+			const row = rows.get(segment.row);
+			const entry = { match, start: segment.start, end: segment.end };
+			if (row === undefined) rows.set(segment.row, [entry]);
+			else row.push(entry);
+		}
+	}
+	return rows;
+}
+
+/** Status text for a query: blank, `No matches`, a `current/total` ordinal, or a counted noun. */
+export function matchStatus(
+	active: boolean,
+	count: number,
+	current: number | undefined,
+	noun: readonly [singular: string, plural: string] = ["match", "matches"],
+): string {
+	if (!active) return "";
+	if (count === 0) return "No matches";
+	if (current !== undefined) return `${current + 1}/${count}`;
+	return `${count} ${count === 1 ? noun[0] : noun[1]}`;
+}
+
+/** Pi's transcript-search look: underlined match colors, or bold inverse for the current match. */
+function matchStyle(theme: Theme, text: string, current: boolean): string {
+	const colored = theme.bg("searchMatchBg", theme.fg("searchMatchText", text));
+	return current ? theme.bold(theme.inverse(colored)) : theme.underline(colored);
+}
+
+/** Apply a style to each plain-text run while passing escape sequences through unchanged. */
+function styleRuns(text: string, style: (text: string) => string): string {
+	let result = "";
+	let offset = 0;
+	for (const sequence of text.matchAll(ANSI_SEQUENCE)) {
+		if (sequence.index > offset) result += style(text.slice(offset, sequence.index));
+		result += sequence[0];
+		offset = sequence.index + sequence[0].length;
+	}
+	if (offset < text.length) result += style(text.slice(offset));
+	return result;
+}
+
+/** Join every word on every line with single spaces, remembering where each word renders. */
+function buildCorpus(lines: readonly string[]): SearchCorpus {
+	let text = "";
+	const spans: CorpusSpan[] = [];
+	for (const [row, line] of lines.entries()) {
+		const plain = stripTerminalSequences(line);
+		for (const word of plain.matchAll(WORD)) {
+			if (text.length > 0) text += " ";
+			const column = visibleWidth(plain.slice(0, word.index));
+			if (PRINTABLE_ASCII.test(word[0])) {
+				spans.push({
+					textStart: text.length,
+					textEnd: text.length + word[0].length,
+					row,
+					start: column,
+					end: column + word[0].length,
+					linear: true,
+				});
+				text += word[0];
+				continue;
+			}
+			let graphemeColumn = column;
+			for (const { segment } of segmenter.segment(word[0])) {
+				const width = visibleWidth(segment);
+				spans.push({
+					textStart: text.length,
+					textEnd: text.length + segment.length,
+					row,
+					start: graphemeColumn,
+					end: graphemeColumn + width,
+					linear: false,
+				});
+				text += segment;
+				graphemeColumn += width;
+			}
+		}
+	}
+	return { text, spans };
+}
+
+/** Selection change waiting for the next render, which knows the wrapped lines. */
+type PendingMove = "first" | -1 | 1;
+
+/**
+ * Find-in-preview state over rendered lines: the query prompt, its matches,
+ * and the current match. Wrapping depends on width, so the view hands over
+ * freshly rendered lines every frame and moves are resolved against them.
+ */
+export class PreviewSearch {
+	public readonly prompt = new SearchPrompt();
+	private matchList: readonly SearchMatch[] = [];
+	private matchRows = new Map<number, RowSegment[]>();
+	private source: readonly string[] | undefined;
+	private sourceQuery = "";
+	private currentIndex: number | undefined;
+	private pending: PendingMove | undefined;
+	private anchor = 0;
+
+	/** Matches in the lines last passed to `sync`. */
+	public get matches(): readonly SearchMatch[] {
+		return this.matchList;
+	}
+
+	/** Index of the current match, if any. */
+	public get current(): number | undefined {
+		return this.currentIndex;
+	}
+
+	/** Status for the prompt row. */
+	public get status(): string {
+		return matchStatus(this.prompt.active, this.matchList.length, this.currentIndex);
+	}
+
+	/** Open the prompt; typing selects the first match at or after `anchorRow`. */
+	public edit(anchorRow: number): void {
+		this.anchor = anchorRow;
+		this.prompt.edit();
+	}
+
+	/** Feed one key to the open prompt; returns whether the query changed. */
+	public type(data: string): boolean {
+		if (!this.prompt.type(data)) return false;
+		this.pending = "first";
+		return true;
+	}
+
+	/** Select the first match at or after `anchorRow` once the next frame's lines are known. */
+	public restart(anchorRow = 0): void {
+		this.anchor = anchorRow;
+		this.currentIndex = undefined;
+		this.pending = this.prompt.active ? "first" : undefined;
+	}
+
+	/** Move to the next or previous match, wrapping around; false without a query. */
+	public step(direction: -1 | 1): boolean {
+		if (!this.prompt.active) return false;
+		this.pending = direction;
+		return true;
+	}
+
+	/** Drop the query, its matches, and any pending move. */
+	public clear(): void {
+		this.prompt.clear();
+		this.matchList = [];
+		this.matchRows.clear();
+		this.source = undefined;
+		this.sourceQuery = "";
+		this.currentIndex = undefined;
+		this.pending = undefined;
+	}
+
+	/**
+	 * Match the query against this frame's lines and resolve any pending move.
+	 * Returns the row the view should reveal, or undefined when nothing moved.
+	 */
+	public sync(lines: readonly string[]): number | undefined {
+		if (lines !== this.source || this.prompt.query !== this.sourceQuery) {
+			this.source = lines;
+			this.sourceQuery = this.prompt.query;
+			const pattern = this.prompt.pattern;
+			this.matchList = pattern === undefined ? [] : findMatches(lines, pattern);
+			this.matchRows = segmentsByRow(this.matchList);
+			if (this.currentIndex !== undefined && this.currentIndex >= this.matchList.length) {
+				this.currentIndex = this.matchList.length === 0 ? undefined : this.matchList.length - 1;
+			}
+		}
+		const pending = this.pending;
+		this.pending = undefined;
+		if (pending === undefined || this.matchList.length === 0) {
+			if (pending !== undefined) this.currentIndex = undefined;
+			return undefined;
+		}
+		this.currentIndex = this.resolve(pending);
+		return this.matchList[this.currentIndex]?.segments[0]?.row;
+	}
+
+	/** Highlight every match segment on one rendered row. */
+	public highlight(theme: Theme, line: string, row: number): string {
+		const segments = this.matchRows.get(row);
+		if (segments === undefined) return line;
+		const ranges = segments.map(({ match, start, end }) => ({ start, end, current: match === this.currentIndex }));
+		return highlightLine(theme, line, ranges);
+	}
+
+	/** Index a pending move lands on; the match list is non-empty. */
+	private resolve(pending: PendingMove): number {
+		const count = this.matchList.length;
+		if (pending === "first") {
+			const index = this.matchList.findIndex((match) => (match.segments[0]?.row ?? 0) >= this.anchor);
+			return index === -1 ? 0 : index;
+		}
+		if (this.currentIndex === undefined) return pending === 1 ? 0 : count - 1;
+		return (this.currentIndex + pending + count) % count;
+	}
+}
+
+/**
+ * One-line query prompt. While open it edits through pi's own `Input`, so
+ * word deletion, kill/yank, and undo behave as everywhere else in pi; once
+ * submitted it keeps showing the query as read-only text.
+ */
+export class SearchPrompt {
+	private input = new Input({ prompt: "" });
+	private open = false;
+
+	/** Whether keys currently edit the query. */
+	public get editing(): boolean {
+		return this.open;
+	}
+
+	/** The query as typed. */
+	public get query(): string {
+		return this.input.getValue();
+	}
+
+	/** Whether a non-blank query is set, typed or submitted. */
+	public get active(): boolean {
+		return searchPattern(this.query) !== undefined;
+	}
+
+	/** Pattern for the current query, or undefined when it is blank. */
+	public get pattern(): RegExp | undefined {
+		return searchPattern(this.query);
+	}
+
+	/** Start editing, keeping the current query so it can be refined. */
+	public edit(): void {
+		this.open = true;
+	}
+
+	/** Stop editing and keep the query. */
+	public submit(): void {
+		this.open = false;
+	}
+
+	/** Drop the query and stop editing. */
+	public clear(): void {
+		this.input = new Input({ prompt: "" });
+		this.open = false;
+	}
+
+	/** Replace the query with the cursor at its end, without editing. */
+	public set(query: string): void {
+		this.input = new Input({ prompt: "" });
+		this.input.handleInput(query);
+		this.open = false;
+	}
+
+	/** Feed one key to the open prompt; returns whether the query changed. */
+	public type(data: string): boolean {
+		const previous = this.query;
+		this.input.handleInput(data);
+		return this.query !== previous;
+	}
+
+	/**
+	 * Prompt row: dim label, the query (with pi's fake cursor while editing),
+	 * and a right-aligned status such as the match count.
+	 */
+	public render(theme: Theme, width: number, label: string, status: string): string {
+		return this.renderAfter(theme, width, theme.fg("dim", `${label}: `), status);
+	}
+
+	/** Prompt row after an already styled `lead`, such as a mode switcher, instead of a plain label. */
+	public renderAfter(theme: Theme, width: number, lead: string, status: string): string {
+		const prefix = `${BODY_INDENT}${lead}`;
+		const right = status === "" ? "" : `${theme.fg("dim", status)} `;
+		const queryWidth = Math.max(1, width - visibleWidth(prefix) - visibleWidth(right) - 1);
+		const query = this.open
+			? truncateToWidth(this.input.render(queryWidth)[0] ?? "", queryWidth, "").trimEnd()
+			: theme.fg("text", truncateToWidth(normalizeInlineText(this.query), queryWidth, "…"));
+		return right === "" ? fitLine(`${prefix}${query}`, width) : spreadLine(`${prefix}${query}`, right, width);
+	}
+}

package/src/ui/section-preview.ts

@@ -0,0 +1,267 @@
+/**
+ * Shared preview body rendering for content that carries labeled parts, e.g. a
+ * tool's dropped prompt lines and definition. Both the Injections item preview
+ * and the Usage block stream present those parts the same way: a bold
+ * subheader with its token share above each part. Pure string logic.
+ */
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { wrapTextWithAnsi } from "@earendil-works/pi-tui";
+
+import type {
+	ForcedEdit, InjectedReference, InjectionSection, JsonSpan, RequestChange, TextDiff, TokenDiff,
+} from "../model.ts";
+import { normalizeInlineText, normalizePreviewText } from "../text.ts";
+import { forcedEditDiffLines, messageDiffLines, payloadDiffLines, textDiffLines } from "./diff-preview.ts";
+import { shiftJsonSpan } from "./json-preview.ts";
+import { BODY_INDENT, calculateViewport, descriptionBlockRows } from "./layout.ts";
+import {
+	type ContextMarker,
+	type DiffBase,
+	diffMarker,
+	guessMarker,
+	markerLegendLines,
+	noteBulletLines,
+	partMarkers,
+	stateMarkers,
+} from "./markers.ts";
+
+/**
+ * Arrow introducing an extension line's source label. Non-breaking spaces bind
+ * the preceding word, arrow, and label into one wrapping unit. Units wider
+ * than the content width still hard-wrap, possibly just after the arrow.
+ */
+const SOURCE_ARROW = "\u00A0<-\u00A0";
+/** Keep a normal block's worth of content visible before making room for its explanation. */
+const DESCRIPTION_MIN_CONTENT_ROWS = 22;
+/** Dim prefix of a tool declaration part, so it reads apart from a `tool call` part. */
+const TOOL_LABEL_PREFIX = "tool:";
+
+/** Raw preview content plus the labeled parts it decomposes into, when known. */
+export interface SectionedContent {
+	readonly text: string;
+	readonly jsonSpan?: JsonSpan;
+	readonly sections?: readonly InjectionSection[];
+	readonly injectedReferences?: readonly InjectedReference[];
+	/** True when a `--system-prompt` replacement dropped this content; it reads 0 tokens. */
+	readonly dropped?: boolean;
+	/** True when an extension moved this content out of the region pi renders it into. */
+	readonly moved?: boolean;
+	/** Request-only change of this content; only `forced` has a marker. */
+	readonly change?: RequestChange;
+	/** Request edit a forced prompt replaced; the body shows it as a diff from the sent text. */
+	readonly forcedEdit?: ForcedEdit;
+	/** Texts behind a System Prompt part's diff; the body shows them as a diff. */
+	readonly textDiff?: TextDiff;
+	/** Tokens this content gained and lost against its base; only Injections measures them. */
+	readonly diff?: TokenDiff;
+	/** True when the request sent other content than the session keeps; only Injections measures it. */
+	readonly requestOnly?: boolean;
+}
+
+/** Space shared by uncapped preview content, its counter, and the marker legend. */
+export interface PreviewDescriptionLayout {
+	readonly width: number;
+	/** Rows left after the view's fixed frame, before the description and counter. */
+	readonly availableRows: number;
+	/** Wrapped content rows, including entry headers/separators but never the footer. */
+	readonly contentLineCount: number;
+}
+
+/**
+ * One fixed legend for the markers a preview shows, never part of its raw
+ * content, followed by `notes` that explain the shown item further. `diffBase`
+ * names what the shown token diffs compare with. Collapse it whole when fewer
+ * than `DESCRIPTION_MIN_CONTENT_ROWS` content rows would remain, or when a
+ * shorter preview would no longer fit in full. Uncapped line counts keep the
+ * collapse decision independent of the Usage cap it helps determine.
+ */
+export function previewLegendLines(
+	theme: Theme,
+	contents: readonly SectionedContent[],
+	layout: PreviewDescriptionLayout,
+	notes: readonly string[] = [],
+	diffBase?: DiffBase,
+): string[] {
+	const markers = previewMarkers(contents);
+	if (markers.length === 0 && notes.length === 0) return [];
+	const lines = [
+		...markerLegendLines(theme, markers, layout.width, diffBase),
+		...notes.flatMap((note) => noteBulletLines(theme, note, layout.width)),
+	];
+	const availableRows = layout.availableRows - descriptionBlockRows(lines);
+	const viewport = calculateViewport(layout.contentLineCount, availableRows, 0);
+	const floor = Math.min(DESCRIPTION_MIN_CONTENT_ROWS, layout.contentLineCount);
+	return availableRows >= floor && viewport.visibleCount >= floor ? lines : [];
+}
+
+/**
+ * Preview body lines for one item or entry: labeled parts under their
+ * subheaders, or the raw text when no breakdown exists. A payload change's
+ * part renders its changed lines instead of its text, a part with a replaced
+ * edit renders that edit as a diff, and a changed System Prompt part with a
+ * base renders its diff from that base. The caller supplies
+ * `wrapText` so each view keeps its own sanitizing, wrapping, indentation, and
+ * choice of whether the marked JSON run is expanded at this level, and
+ * `heading` so an undivided body can drop a line the heading already shows.
+ */
+export function previewBodyLines(
+	theme: Theme,
+	content: SectionedContent,
+	wrapWidth: number,
+	wrapText: (text: string, jsonSpan: JsonSpan | undefined) => string[],
+	heading?: string,
+): string[] {
+	const sections = content.sections ?? [];
+	if (sections.length === 0) {
+		if (content.forcedEdit !== undefined) return forcedEditDiffLines(theme, content.text, content.forcedEdit, wrapWidth);
+		if (hasDiffBase(content.textDiff)) return textDiffLines(theme, content.textDiff, wrapWidth);
+		return contentBodyLines(theme, content, wrapWidth, wrapText, heading);
+	}
+	const lines: string[] = [];
+	for (const section of sections) {
+		if (lines.length > 0) {
+			// Captured trailing whitespace must not add to the subsection separator
+			while (lines.length > 0 && normalizeInlineText(lines[lines.length - 1] ?? "") === "") lines.pop();
+			lines.push("", "");
+		}
+		lines.push(...sectionHeaderLines(theme, section, wrapWidth));
+		if (section.message !== undefined) lines.push(...messageDiffLines(theme, section, wrapWidth));
+		else if (section.changedLines !== undefined) lines.push(...payloadDiffLines(theme, section.changedLines, wrapWidth));
+		else if (section.forcedEdit !== undefined) {
+			lines.push(...forcedEditDiffLines(theme, section.text, section.forcedEdit, wrapWidth));
+		} else if (hasDiffBase(section.textDiff)) lines.push(...textDiffLines(theme, section.textDiff, wrapWidth));
+		else lines.push(...contentBodyLines(theme, section, wrapWidth, wrapText, section.label));
+	}
+	return lines;
+}
+
+/**
+ * Whether a part's text diff has a base to compare with. Without one, the
+ * whole part is added: its `+N` already says so, and plain text reads better.
+ */
+function hasDiffBase(diff: TextDiff | undefined): diff is TextDiff {
+	return diff !== undefined && diff.base.length > 0;
+}
+
+/**
+ * Markers one preview renders: extension lines and their inferred owners come
+ * from reference metadata, while state markers follow the subheaders and
+ * metadata rows that show them, whether or not that part carries references.
+ */
+function previewMarkers(contents: readonly SectionedContent[]): ContextMarker[] {
+	const referenced = contents.flatMap((content) => referenceParts(content)).filter(hasInjectedReferences);
+	const marked = contents.flatMap((content) => [content, ...(content.sections ?? [])]);
+	const markers: ContextMarker[] = [];
+	if (referenced.length > 0) markers.push("highlighted");
+	if (referenced.some(hasGuessedReferences) || marked.some(isGuessedPart)) markers.push("guess");
+	// The legend orders and deduplicates markers itself
+	markers.push(...marked.flatMap(partMarkers));
+	return markers;
+}
+
+/** Only metadata on rendered body parts triggers the footer, never a text or label match. */
+function hasInjectedReferences(part: SectionedContent): boolean {
+	return (part.injectedReferences?.length ?? 0) > 0;
+}
+
+/** Whether a rendered reference names an inferred owner needing the extra caveat. */
+function hasGuessedReferences(part: SectionedContent): boolean {
+	return part.injectedReferences?.some((reference) => reference.attribution === "guess") === true;
+}
+
+/** Whether a part's diff belongs to an owner inferred from the text itself, marked on its subheader. */
+function isGuessedPart(part: SectionedContent | InjectionSection): boolean {
+	return "attribution" in part && part.attribution === "guess";
+}
+
+/** Body parts carrying reference metadata: the item's sections, or the item itself. */
+function referenceParts(content: SectionedContent): readonly SectionedContent[] {
+	return content.sections?.length ? content.sections : [content];
+}
+
+/** Render annotated extension lines locally; other content keeps the caller's JSON/skill transformations. */
+function contentBodyLines(
+	theme: Theme,
+	content: SectionedContent,
+	wrapWidth: number,
+	wrapText: (text: string, jsonSpan: JsonSpan | undefined) => string[],
+	heading: string | undefined,
+): string[] {
+	const references = content.injectedReferences ?? [];
+	if (references.length === 0) return bodyLines(content.text, content.jsonSpan, heading, wrapText);
+	let text = "";
+	let offset = 0;
+	for (const reference of references) {
+		text += normalizePreviewText(content.text.slice(offset, reference.start));
+		const captured = content.text.slice(reference.start, reference.end);
+		// A part that opens with an extension line drops its captured lead, as plain text does.
+		const line = text.trim().length === 0 ? captured.replace(/^\n+/, "") : captured;
+		text += theme.fg("syntaxNumber", normalizePreviewText(line));
+		text += theme.fg("borderMuted", SOURCE_ARROW);
+		text += theme.fg("mdLink", normalizeInlineText(reference.source.label));
+		if (reference.tool !== undefined) {
+			text += theme.fg("mdLinkUrl", `:${normalizeInlineText(reference.tool)}`);
+		}
+		if (reference.attribution === "guess") text += guessMarker(theme);
+		offset = reference.end;
+	}
+	text += normalizePreviewText(content.text.slice(offset));
+	const body = withoutRepeatedHeading(text.replace(/^\n+/, ""), heading);
+	return wrapTextWithAnsi(body, wrapWidth)
+		.map((line) => line === "" ? "" : `${BODY_INDENT}${line}`);
+}
+
+/**
+ * One body part, wrapped after dropping the lead its heading already carries:
+ * the newline that separated a prompt line, and a first line repeating
+ * the heading itself, as a skill block opens with its own name.
+ */
+function bodyLines(
+	text: string,
+	jsonSpan: JsonSpan | undefined,
+	heading: string | undefined,
+	wrapText: (text: string, jsonSpan: JsonSpan | undefined) => string[],
+): string[] {
+	const body = withoutRepeatedHeading(text.replace(/^\n+/, ""), heading);
+	return wrapText(body, shiftJsonSpan(jsonSpan, text.length - body.length));
+}
+
+/**
+ * Text without a first line that only repeats the heading rendered above it.
+ * The dropped line stays part of the estimate; it is redundant on screen only.
+ */
+function withoutRepeatedHeading(text: string, heading: string | undefined): string {
+	if (heading === undefined) return text;
+	const lineEnd = text.indexOf("\n");
+	if (lineEnd === -1 || headingKey(text.slice(0, lineEnd)) !== headingKey(heading)) return text;
+	return text.slice(lineEnd + 1);
+}
+
+/**
+ * Comparable form of a heading or a first content line: case and a trailing
+ * colon carry no information here, so pi's own block headers ("Available
+ * tools:", "Guidelines:") read as repeats of the part labels above them.
+ */
+function headingKey(text: string): string {
+	return text.trim().replace(/:$/, "").toLowerCase();
+}
+
+/**
+ * Bold subheader naming one part, its share of the parent estimate, its token
+ * diff, a guessed owner, and its markers. A diff-only part has no share, and a
+ * tool declaration's name follows a dim `tool:` prefix.
+ * Parts use `syntaxKeyword` rather than the usual `mdHeading` subheader color,
+ * because they nest under item and entry headings that already carry `mdHeading`.
+ */
+function sectionHeaderLines(theme: Theme, section: InjectionSection, wrapWidth: number): string[] {
+	const prefix = section.toolDeclaration === true ? theme.fg("dim", TOOL_LABEL_PREFIX) : "";
+	const label = prefix + theme.fg("syntaxKeyword", theme.bold(normalizeInlineText(section.label)));
+	const prompt = section.message?.userPrompt;
+	const number = prompt === undefined ? "" : theme.fg("muted", ` · user prompt #${prompt}`);
+	const tokens = section.diffOnly === true
+		? ""
+		: theme.fg("muted", ` · ${section.tokens.toLocaleString("en-US")} tokens`);
+	const guess = section.attribution === "guess" ? guessMarker(theme) : "";
+	const header = `${label}${number}${tokens}${diffMarker(theme, section.diff)}${guess}${stateMarkers(theme, section)}`;
+	return wrapTextWithAnsi(header, wrapWidth).map((line) => `${BODY_INDENT}${line}`);
+}