pi-lazy-panel 0.1.0

package/src/ui/frame.ts

@@ -0,0 +1,116 @@
+/**
+ * Pure box-drawing helpers shared by the panes. No I/O, no pi APIs.
+ *
+ * Every returned line has a visible width of exactly `width`, which is what
+ * pi-tui requires from `Component.render()`.
+ */
+
+import { compositeTuiLine, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export type Style = (s: string) => string;
+
+export interface FrameOptions {
+	width: number;
+	height: number;
+	title: string;
+	/** Applied to border characters. */
+	border: Style;
+	/** Applied to the title text. */
+	titleStyle: Style;
+	/** Optional right-aligned text on the top border (e.g. "1/12"). */
+	meta?: string;
+	metaStyle?: Style;
+}
+
+/** Pad or truncate `line` to exactly `width` visible columns. */
+export function fit(line: string, width: number): string {
+	if (width <= 0) return "";
+	const w = visibleWidth(line);
+	if (w === width) return line;
+	if (w < width) return line + " ".repeat(width - w);
+	return truncateToWidth(line, width, "…", true);
+}
+
+/**
+ * Max visible columns of `meta` text that `frame()` can show next to `title`
+ * without dropping it. Panes use this to pick a shorter meta variant instead of
+ * silently losing the whole "1/15 · Current · recent" hint in a narrow column.
+ *
+ * 推导：顶边 = "┌─" + " title " + fill + " meta " + "─" + "┐"，fill >= 0 时 meta 才保留，
+ * 即 meta 文本宽度 <= width - 8 - visibleWidth(title)。
+ */
+export function metaBudget(width: number, title: string): number {
+	return Math.max(0, width - 8 - visibleWidth(title));
+}
+
+/**
+ * Body line that `frame()` draws as a horizontal divider (`├────┤`) instead of
+ * a `│ … │` row. Used by dialogs with a header / list / hints layout.
+ */
+export const FRAME_DIVIDER = "\u0000divider";
+
+/** Build a bordered frame around `body`. Body lines are clipped/padded to the inner size. */
+export function frame(body: string[], o: FrameOptions): string[] {
+	const { width, height } = o;
+	if (width < 4 || height < 2) return Array.from({ length: Math.max(0, height) }, () => fit("", width));
+	const inner = width - 2;
+	const top = topBorder(o, inner);
+	const bottom = o.border(`└${"─".repeat(inner)}┘`);
+	const rows = height - 2;
+	const lines: string[] = [top];
+	for (let i = 0; i < rows; i++) {
+		const line = body[i] ?? "";
+		if (line === FRAME_DIVIDER) lines.push(o.border(`├${"─".repeat(inner)}┤`));
+		else lines.push(o.border("│") + fit(line, inner) + o.border("│"));
+	}
+	lines.push(bottom);
+	return lines;
+}
+
+function topBorder(o: FrameOptions, inner: number): string {
+	const title = ` ${o.title} `;
+	const meta = o.meta ? ` ${o.meta} ` : "";
+	const titleW = visibleWidth(title);
+	const metaW = visibleWidth(meta);
+	// "┌─ TITLE ───── meta ─┐"
+	const fill = inner - 1 - titleW - metaW - (meta ? 1 : 0);
+	if (fill < 0) {
+		// Not enough room: drop meta, then clip title.
+		const t = truncateToWidth(title, Math.max(0, inner - 2), "…", false);
+		return o.border(`┌─`) + o.titleStyle(t) + o.border("─".repeat(Math.max(0, inner - 1 - visibleWidth(t))) + "┐");
+	}
+	const metaPart = meta ? (o.metaStyle ?? o.titleStyle)(meta) + o.border("─") : "";
+	return o.border("┌─") + o.titleStyle(title) + o.border("─".repeat(fill)) + metaPart + o.border("┐");
+}
+
+/**
+ * Composite `box` (lines of exactly `width` columns) centered over the
+ * already-rendered `base` lines of a `termW`-column terminal. Shared by the
+ * help overlay and the dialogs; box rows beyond `base` are dropped.
+ *
+ * 居中叠加：帮助弹窗和打标签弹窗都用这个把自己画到面板上面。
+ */
+export function overlayCentered(base: string[], box: string[], width: number, termW: number): string[] {
+	const top = Math.max(0, Math.floor((base.length - box.length) / 2));
+	const left = Math.max(0, Math.floor((termW - width) / 2));
+	const out = [...base];
+	for (let i = 0; i < box.length && top + i < out.length; i++) {
+		out[top + i] = compositeTuiLine(out[top + i] ?? "", box[i]!, left, width, termW);
+	}
+	return out;
+}
+
+/** Width of a centered dialog box (input prompt, menu) for a `termW`-column terminal. */
+export function dialogWidth(termW: number): number {
+	return Math.max(24, Math.min(termW - 4, 60));
+}
+
+/** Place `left` and `right` column line arrays side by side. Both must already be the right width. */
+export function sideBySide(left: string[], right: string[], leftWidth: number, rightWidth: number): string[] {
+	const n = Math.max(left.length, right.length);
+	const out: string[] = [];
+	for (let i = 0; i < n; i++) {
+		out.push(fit(left[i] ?? "", leftWidth) + fit(right[i] ?? "", rightWidth));
+	}
+	return out;
+}

package/src/ui/mouse-input.ts

@@ -0,0 +1,197 @@
+/**
+ * Mouse input for regular (non-fullscreen) TUI mode.
+ *
+ * pi only turns on terminal mouse tracking in fullscreen mode; in the default
+ * regular mode `TuiMainScreen` never enables it, so an overlay's `handleMouse`
+ * is never called. When the panel opens in regular mode `index.ts` enables SGR
+ * mouse reporting itself (`\x1b[?1000h\x1b[?1006h`), feeds each raw stdin chunk
+ * through `parseSgrMouse` + `MouseTracker`, and routes the result to
+ * `LazyPanel.handleMouse`. Pure parsing here; no I/O, tested in test/mouse-input.test.ts.
+ */
+
+import type { TuiMouseEvent } from "@earendil-works/pi-tui";
+
+/** Enable SGR mouse reporting: button press / release (1000) with SGR encoding (1006). */
+export const ENABLE_MOUSE = "\x1b[?1000h\x1b[?1006h";
+/** Disable what ENABLE_MOUSE turned on (restores the terminal's own scroll / selection). */
+export const DISABLE_MOUSE = "\x1b[?1006l\x1b[?1000l";
+
+/** SGR mouse sequence: ESC [ < Cb ; Cx ; Cy (M = press, m = release). */
+const SGR_MOUSE = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/;
+
+/** One decoded SGR mouse report (coordinates are zero-based). */
+export interface RawMouse {
+	/** SGR button code (bit 6 = wheel, bit 5 = motion, bits 0-1 = button, 2 = shift, 3 = alt, 4 = ctrl). */
+	button: number;
+	x: number;
+	y: number;
+	/** true for the `m` (release) form. */
+	release: boolean;
+}
+
+/** Parse one raw stdin chunk into a mouse report, or undefined when it is not an SGR mouse sequence. */
+export function parseSgrMouse(data: string): RawMouse | undefined {
+	const m = SGR_MOUSE.exec(data);
+	if (!m) return undefined;
+	return { button: Number.parseInt(m[1]!, 10), x: Number.parseInt(m[2]!, 10) - 1, y: Number.parseInt(m[3]!, 10) - 1, release: m[4] === "m" };
+}
+
+/** Same shape without the trailing anchor, so a chunk can be scanned for several reports at once. */
+const SGR_MOUSE_G = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g;
+
+/**
+ * Every SGR mouse report in `data`, but only when the whole chunk is nothing but
+ * mouse sequences (terminals batch several wheel reports into one read during a
+ * fast trackpad scroll). Returns undefined when the chunk holds anything else,
+ * so the caller passes it through to normal key handling instead of consuming it.
+ */
+export function parseSgrMouseChunk(data: string): RawMouse[] | undefined {
+	if (!data.startsWith("\x1b[<")) return undefined;
+	const out: RawMouse[] = [];
+	let last = 0;
+	SGR_MOUSE_G.lastIndex = 0;
+	for (let m = SGR_MOUSE_G.exec(data); m; m = SGR_MOUSE_G.exec(data)) {
+		if (m.index !== last) return undefined; // 中间夹了非鼠标字节
+		out.push({ button: Number.parseInt(m[1]!, 10), x: Number.parseInt(m[2]!, 10) - 1, y: Number.parseInt(m[3]!, 10) - 1, release: m[4] === "m" });
+		last = SGR_MOUSE_G.lastIndex;
+	}
+	return last === data.length && out.length > 0 ? out : undefined;
+}
+
+/** true when `data` looks like any SGR mouse sequence (so the caller can consume it even if we take no action). */
+export function isMouseSequence(data: string): boolean {
+	return SGR_MOUSE.test(data);
+}
+
+export interface MouseTrackerOptions {
+	/** Terminal size for the synthesized event bounds (width drives the hit-test columns). */
+	size: () => { width: number; height: number };
+	/** Lines per wheel notch (default 3). */
+	wheelScrollLines?: number;
+	/** A second click on the same cell within this many ms is a double-click (default 400). */
+	doubleClickMs?: number;
+	/** Injectable clock for the tests. */
+	now?: () => number;
+}
+
+/**
+ * Turns raw SGR reports into the high-level `TuiMouseEvent`s the panel acts on:
+ * a `wheel` event per wheel notch, and a `click` (with `clickCount` for
+ * double-clicks) on release when press and release land on the same cell. Only
+ * the left button drives clicks; drags (press then release on another cell) are
+ * dropped. Motion reports are not requested, so a moved pointer simply releases
+ * on a different cell and is ignored.
+ */
+export class MouseTracker {
+	private readonly size: () => { width: number; height: number };
+	private readonly wheelScrollLines: number;
+	private readonly doubleClickMs: number;
+	private readonly now: () => number;
+
+	private pressX = -1;
+	private pressY = -1;
+	private pressed = false;
+	private lastClickX = -1;
+	private lastClickY = -1;
+	private lastClickAt = 0;
+	private clickCount = 0;
+
+	constructor(o: MouseTrackerOptions) {
+		this.size = o.size;
+		this.wheelScrollLines = o.wheelScrollLines ?? 3;
+		this.doubleClickMs = o.doubleClickMs ?? 400;
+		this.now = o.now ?? (() => Date.now());
+	}
+
+	/** Feed a raw report; returns an event to dispatch, or undefined (a press, drag, or non-left button). */
+	feed(raw: RawMouse): TuiMouseEvent | undefined {
+		// 滚轮：bit 6 置位，低两位 0 = 上滚、1 = 下滚。
+		if ((raw.button & 64) !== 0) {
+			const dir = raw.button & 3;
+			if (dir !== 0 && dir !== 1) return undefined;
+			return this.event("wheel", raw, { wheelDelta: (dir === 0 ? -1 : 1) * this.wheelScrollLines });
+		}
+		// 只有左键驱动单击 / 双击；中键、右键忽略（仍会被调用方 consume 掉）。
+		if ((raw.button & 3) !== 0) {
+			this.pressed = false;
+			return undefined;
+		}
+		if (!raw.release) {
+			// 按下：记住位置，等释放时判定是否为一次点击。
+			this.pressed = true;
+			this.pressX = raw.x;
+			this.pressY = raw.y;
+			return undefined;
+		}
+		// 释放：按下和释放落在同一格才算点击（拖拽会落在别的格，丢弃）。
+		const isClick = this.pressed && this.pressX === raw.x && this.pressY === raw.y;
+		this.pressed = false;
+		if (!isClick) return undefined;
+		const now = this.now();
+		const again = raw.x === this.lastClickX && raw.y === this.lastClickY && now - this.lastClickAt <= this.doubleClickMs;
+		this.clickCount = again ? this.clickCount + 1 : 1;
+		this.lastClickX = raw.x;
+		this.lastClickY = raw.y;
+		this.lastClickAt = now;
+		return this.event("click", raw, { clickCount: this.clickCount });
+	}
+
+	private event(type: "wheel" | "click", raw: RawMouse, extra: { wheelDelta?: number; clickCount?: number }): TuiMouseEvent {
+		const { width, height } = this.size();
+		return {
+			type,
+			button: type === "wheel" ? "none" : "left",
+			x: raw.x,
+			y: raw.y,
+			screenX: raw.x,
+			screenY: raw.y,
+			width: Math.max(1, width),
+			height: Math.max(1, height),
+			shift: (raw.button & 4) !== 0,
+			alt: (raw.button & 8) !== 0,
+			ctrl: (raw.button & 16) !== 0,
+			...(extra.wheelDelta === undefined ? {} : { wheelDelta: extra.wheelDelta }),
+			...(extra.clickCount === undefined ? {} : { clickCount: extra.clickCount }),
+		};
+	}
+}
+
+/** Just enough of pi-tui's TUI for `attachMouse` (also lets the test use a fake). */
+export interface MouseHost {
+	/** "regular" or "fullscreen" — pi only tracks the mouse itself in fullscreen. */
+	readonly mode: string;
+	terminal: { write(data: string): void; columns: number; rows: number };
+	addInputListener(listener: (data: string) => { consume?: boolean; data?: string } | undefined): () => void;
+}
+
+/** The panel side `attachMouse` drives. */
+export interface MouseSink {
+	handleMouse(event: TuiMouseEvent): unknown;
+}
+
+/**
+ * Wire mouse input for a panel. In fullscreen mode pi already tracks the mouse
+ * and dispatches to the overlay's `handleMouse`, so this is a no-op. In regular
+ * mode pi tracks nothing, so we enable SGR reporting, parse each stdin chunk and
+ * route the events to the sink, consuming the raw sequences. Returns a cleanup
+ * function that removes the listener and disables reporting.
+ */
+export function attachMouse(host: MouseHost, sink: MouseSink): () => void {
+	if (host.mode === "fullscreen") return () => {};
+	host.terminal.write(ENABLE_MOUSE);
+	const tracker = new MouseTracker({ size: () => ({ width: host.terminal.columns, height: host.terminal.rows }) });
+	const remove = host.addInputListener((data) => {
+		const raws = parseSgrMouseChunk(data);
+		if (!raws) return undefined;
+		for (const raw of raws) {
+			const event = tracker.feed(raw);
+			if (event) sink.handleMouse(event);
+		}
+		// 鼠标序列一律吞掉，避免被 pi 当成按键。
+		return { consume: true };
+	});
+	return () => {
+		remove();
+		host.terminal.write(DISABLE_MOUSE);
+	};
+}

package/src/ui/mouse.ts

@@ -0,0 +1,99 @@
+/**
+ * Pure mouse hit-testing for the panel. Maps a terminal cell (x, y) to the pane
+ * under it and, for the two list panes, the row index the cell falls on.
+ *
+ * The geometry MUST match LazyPanel.render(): the panel calls `panelGeometry()`
+ * from both places, so a layout tweak can never desync clicks from what is
+ * drawn. No I/O, no pi APIs — just arithmetic, tested in test/ui.test.ts.
+ */
+
+import { LEFT_COLUMN_RATIO } from "../constants.ts";
+import type { PaneId } from "../types.ts";
+import { SESSIONS_ROW_HEIGHT } from "./panes/sessions-pane.ts";
+
+export interface VerticalSplit {
+	/** Rows of the body above the one-line footer. */
+	bodyH: number;
+	/** Rows of the (top) sessions pane; the tree pane takes the rest of the left column. */
+	sessionsH: number;
+	treeH: number;
+}
+
+/** The body / sessions / tree row split for `height` rows (independent of width). */
+export function verticalSplit(height: number): VerticalSplit {
+	const bodyH = height - 1; // footer 占最后一行
+	const sessionsH = Math.max(4, Math.floor(bodyH / 2));
+	return { bodyH, sessionsH, treeH: bodyH - sessionsH };
+}
+
+export interface PanelGeometry extends VerticalSplit {
+	/** Width of the left column (sessions + tree); the right column takes the rest. */
+	leftW: number;
+	rightW: number;
+}
+
+/**
+ * The panel's column / row split for a `width` × `height` viewport. Shared with
+ * `LazyPanel.render()` so the drawn layout and the mouse hit-test never diverge.
+ */
+export function panelGeometry(width: number, height: number, ratio: number = LEFT_COLUMN_RATIO): PanelGeometry {
+	const v = verticalSplit(height);
+	const leftW = Math.max(24, Math.min(width - 30, Math.floor(width * ratio)));
+	return { ...v, leftW, rightW: width - leftW };
+}
+
+/** Visible list rows in each left pane for `height` rows (sessions take 2 lines per row, tree 1). */
+export function listVisibleRows(height: number): { sessions: number; tree: number } {
+	const { sessionsH, treeH } = verticalSplit(height);
+	return { sessions: Math.max(1, Math.floor((sessionsH - 2) / SESSIONS_ROW_HEIGHT)), tree: Math.max(1, treeH - 2) };
+}
+
+/** Pane under the pointer; list panes also carry the row hit (undefined on a border / blank cell). */
+export type MouseTarget = { pane: PaneId; row: number | undefined };
+
+export interface HitInput {
+	width: number;
+	height: number;
+	ratio: number;
+	/** Cell local to the panel (top-left overlay, so this equals the screen cell). */
+	x: number;
+	y: number;
+	/** First visible row of each list pane (the offset render actually used). */
+	sessionsFirst: number;
+	sessionsTotal: number;
+	treeFirst: number;
+	treeTotal: number;
+}
+
+/**
+ * Which pane the cell (x, y) is over, and for a list pane the row index it hits
+ * (undefined when it lands on a border or a blank area past the last row).
+ * Returns undefined for the footer row or anything outside the body.
+ */
+export function hitTest(i: HitInput): MouseTarget | undefined {
+	const g = panelGeometry(i.width, i.height, i.ratio);
+	if (i.y < 0 || i.y >= g.bodyH || i.x < 0 || i.x >= i.width) return undefined; // 页脚 / 面板之外
+	// 右侧 CONTENT 面板占满 body 高度，只切焦点、不选行。
+	if (i.x >= g.leftW) return { pane: "content", row: undefined };
+	if (i.y < g.sessionsH) {
+		return { pane: "sessions", row: listRow(i.y, g.sessionsH, SESSIONS_ROW_HEIGHT, i.sessionsFirst, i.sessionsTotal) };
+	}
+	return { pane: "tree", row: listRow(i.y - g.sessionsH, g.treeH, 1, i.treeFirst, i.treeTotal) };
+}
+
+/**
+ * Row index a cell at pane-local `y` (0 = the pane's top border) hits inside a
+ * framed list pane whose first visible row is `first`, or undefined for the
+ * border rows / a cell past the last row. `rowHeight` is the lines per item
+ * (2 for sessions, 1 for tree).
+ */
+function listRow(y: number, paneH: number, rowHeight: number, first: number, total: number): number | undefined {
+	const bodyRows = paneH - 2; // 去掉上下边框
+	const bodyY = y - 1; // 第一行是上边框
+	if (bodyY < 0 || bodyY >= bodyRows) return undefined;
+	const visible = Math.max(1, Math.floor(bodyRows / rowHeight));
+	const within = Math.floor(bodyY / rowHeight);
+	if (within >= visible) return undefined; // 底部不足一整行的空白行
+	const index = first + within;
+	return index >= 0 && index < total ? index : undefined;
+}

package/src/ui/panes/content-pane.ts

@@ -0,0 +1,132 @@
+/**
+ * Content pane (right, full height, read-only).
+ *
+ * Renders `ContentBlock[]` as boxed messages ("YOU · 22:18" / "ASSISTANT · 22:18")
+ * using pi's native Markdown renderer from @earendil-works/pi-tui.
+ *
+ * The pane is a line-scrolled viewport: `layoutContent` turns the blocks into
+ * body lines once (the panel caches it), and `renderContentPane` shows the
+ * window starting at `scroll`. One block can be highlighted (the node selected
+ * in the tree pane): its header gets a `›` marker and the selected background.
+ * A `/` search matches the rendered text lines (`ContentLayout.searchable`
+ * marks them; box borders and headers are skipped); the hits on the visible
+ * lines are painted over the cached lines at render time, nothing is re-rendered.
+ */
+
+import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import { Markdown, visibleWidth } from "@earendil-works/pi-tui";
+import { t } from "../../i18n/index.ts";
+import type { ContentBlock, SearchView } from "../../types.ts";
+import { formatTime } from "../../utils/format.ts";
+import { fit, frame, metaBudget } from "../frame.ts";
+import { highlightLine, matchStyle, searchMeta } from "../search-highlight.ts";
+
+/** Body lines of the whole conversation plus where each block starts. */
+export interface ContentLayout {
+	lines: string[];
+	/** entryId → index of the block's header line in `lines`. */
+	starts: Map<string, number>;
+	/** Per line: true for rendered message text (what `/` searches), false for box borders, headers and gaps. */
+	searchable: boolean[];
+}
+
+export interface ContentPaneProps {
+	blocks: ContentBlock[];
+	/** Precomputed layout (see `layoutContent`); computed on the fly when omitted. */
+	layout?: ContentLayout;
+	/** First body line shown; clamped to the last full page. */
+	scroll: number;
+	/** entryId of the block to highlight (the tree cursor), if any. */
+	highlightEntryId?: string;
+	/** Active `/` search of this pane (indices into the layout lines): hits on the visible lines are painted, the header shows the count. */
+	search?: SearchView;
+	focused: boolean;
+	title?: string;
+	emptyMessage?: string;
+	theme: Theme;
+}
+
+/** Layout all blocks into body lines of exactly `inner` width. */
+export function layoutContent(blocks: ContentBlock[], inner: number, theme: Theme, highlightEntryId?: string): ContentLayout {
+	const lines: string[] = [];
+	const searchable: boolean[] = [];
+	const starts = new Map<string, number>();
+	const mdTheme = getMarkdownTheme();
+	// One column of margin on each side of every message box.
+	const boxW = Math.max(10, inner - 2);
+	const textW = boxW - 4; // "│ " + " │"
+	const push = (line: string, text: boolean) => {
+		lines.push(line);
+		searchable.push(text);
+	};
+
+	for (const block of blocks) {
+		const isUser = block.role === "user";
+		const isHighlight = block.entryId === highlightEntryId;
+		const who = isUser ? t("pane.you") : t("pane.assistant");
+		const head = ` ${who} · ${formatTime(block.timestamp)} `;
+		const borderStyle = (s: string) => theme.fg(isUser ? "userMessageText" : "accent", s);
+		const headStyle = (s: string) => theme.bold(theme.fg(isUser ? "userMessageText" : "accent", s));
+
+		// 被 tree 选中的消息：左边距变成 › 箭头，头部整行加选中背景，方便一眼定位。
+		// fill 必须按可见宽度算：中文标签（你 / AI助手）是全角字符，用 head.length 会算漏，
+		// 导致 ┐ 被推到右边、和下边框对不齐，甚至溢出面板被截成 …。
+		const fill = Math.max(0, boxW - 3 - visibleWidth(head));
+		const headerRaw = borderStyle("┌─") + headStyle(head) + borderStyle("─".repeat(fill) + "┐");
+		starts.set(block.entryId, lines.length);
+		push(isHighlight ? theme.bg("selectedBg", fit(theme.bold(theme.fg("accent", "›")) + headerRaw, inner)) : " " + headerRaw, false);
+
+		const md = new Markdown(block.markdown, 0, 0, mdTheme);
+		let rendered: string[];
+		try {
+			rendered = md.render(textW);
+		} catch {
+			rendered = block.markdown.split("\n");
+		}
+		if (rendered.length === 0) rendered = [""];
+		for (const raw of rendered) {
+			push(" " + borderStyle("│") + " " + fit(raw, textW) + " " + borderStyle("│"), true);
+		}
+		push(" " + borderStyle(`└${"─".repeat(boxW - 2)}┘`), false);
+		push("", false);
+	}
+	return { lines, starts, searchable };
+}
+
+/** Largest valid scroll offset for `total` lines in a viewport of `visible` lines. */
+export function maxScroll(total: number, visible: number): number {
+	return Math.max(0, total - visible);
+}
+
+export function renderContentPane(p: ContentPaneProps, width: number, height: number): string[] {
+	const { theme } = p;
+	const inner = width - 2;
+	const visible = Math.max(1, height - 2);
+	let body: string[];
+	if (p.blocks.length === 0) {
+		body = ["", theme.fg("muted", `  ${p.emptyMessage ?? t("pane.contentEmpty")}`)];
+	} else {
+		const all = (p.layout ?? layoutContent(p.blocks, inner, theme, p.highlightEntryId)).lines;
+		const start = Math.min(Math.max(0, p.scroll), maxScroll(all.length, visible));
+		body = all.slice(start, start + visible);
+		// 搜索命中：只给窗口里的命中行叠加高亮，缓存的排版结果本身不动。
+		const search = p.search;
+		if (search && search.total > 0) {
+			body = body.map((line, k) => {
+				const index = start + k;
+				return search.matches.has(index) ? highlightLine(line, search.terms, matchStyle(theme, index === search.current)) : line;
+			});
+		}
+	}
+	const title = p.title ?? "CONTENT";
+	const meta = p.search ? searchMeta(p.search.position, p.search.total, metaBudget(width, title)) : p.blocks.length ? t("pane.messages", { count: p.blocks.length }) : "";
+	return frame(body, {
+		width,
+		height,
+		title,
+		meta,
+		border: (s) => theme.fg(p.focused ? "borderAccent" : "border", s),
+		titleStyle: (s) => (p.focused ? theme.bold(theme.fg("accent", s)) : theme.fg("muted", s)),
+		metaStyle: (s) => theme.fg("dim", s),
+	});
+}