@gavin-hu/my-pi-agent 0.14.0 → 0.15.0

package/extensions/bytefly/panel/tui/settings-view.ts

@@ -8,7 +8,7 @@
 
 import { join } from "node:path";
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { sliceByColumn, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import { sanitizeLine } from "../../../../lib/format.ts";
 import { clip } from "../../../../lib/tui/columns.ts";
 import { BODY_INDENT } from "../../../../lib/tui/indent.ts";
@@ -23,6 +23,34 @@ import { countsLine, INDENT, savedLine } from "./frame.ts";
 /** Pi's personal settings file, named in the detail pane. */
 const PI_SETTINGS_FILE = "settings.json";
 
+/** Columns the marker and the leading cell take before the label. */
+const ROW_PREFIX_WIDTH = 4;
+/** Columns a value keeps when the row has to choose between the label and the value. */
+const MIN_VALUE_WIDTH = 8;
+
+/**
+ * The editing cell: the buffer around the caret, scrolled so the caret is always
+ * visible, with ellipses where text is off-screen. The cell fits `budget`
+ * columns, so a long buffer cannot push the label out of the row.
+ */
+function editingCell(buffer: string, caret: number, budget: number): string {
+	const width = Math.max(1, budget);
+	const before = buffer.slice(0, caret);
+	const beforeWidth = visibleWidth(before);
+	const caretRoom = width - 1;
+	if (beforeWidth > caretRoom) {
+		// Reserve one column for the leading ellipsis; the caret sits at the right edge.
+		const shownWidth = Math.max(0, caretRoom - 1);
+		const prefix = shownWidth > 0 ? "…" : "";
+		const shown = shownWidth > 0 ? sliceByColumn(before, beforeWidth - shownWidth, shownWidth, true) : "";
+		return `${prefix}${shown}▏`;
+	}
+	const used = beforeWidth + 1;
+	const afterRoom = Math.max(0, width - used);
+	const after = afterRoom > 0 ? truncateToWidth(buffer.slice(caret), afterRoom, "…") : "";
+	return `${before}▏${after}`;
+}
+
 /** The rows this section shows, and the scope they were read in. */
 export function settingsSummary(theme: Theme, width: number, scope: PanelScope, count: number): string {
 	return countsLine(theme, width, settingsSummarySegments(scope, count));
@@ -36,17 +64,19 @@ export function settingRow(
 	selected: boolean,
 	editing?: { buffer: string; caret: number },
 ): string {
-	// The editor shows the buffer with a caret block, in the accent so the row
-	// reads as active rather than as a value that happens to contain a bar.
-	const value = editing
-		? `${editing.buffer.slice(0, editing.caret)}▏${editing.buffer.slice(editing.caret)}`
-		: view.valueLabel;
+	const label = sanitizeLine(view.label);
+	// Keep the whole label when it fits, and never let a long value or an editing
+	// buffer erase it: the value gets what is left, with a floor of eight columns.
+	const available = Math.max(1, width - ROW_PREFIX_WIDTH - 1);
+	const labelReserve = Math.min(visibleWidth(label), Math.max(0, available - MIN_VALUE_WIDTH));
+	const valueBudget = Math.max(1, available - labelReserve);
+	const rawValue = editing ? editingCell(editing.buffer, editing.caret, valueBudget) : view.valueLabel;
 	return listRow(theme, width, {
 		selected,
 		leading: view.kind === "boolean" ? checkbox(theme, view.value === "true") : " ",
-		label: sanitizeLine(view.label),
+		label,
 		labelRole: selected ? "accent" : "label",
-		trailing: sanitizeLine(value),
+		trailing: clip(sanitizeLine(rawValue), valueBudget),
 		trailingRole: editing ? "accent" : "meta",
 	});
 }
@@ -58,8 +88,9 @@ export function projectNote(theme: Theme, width: number): string {
 
 /** Where the focused row's value is written, and which scope supplied it. */
 function originLine(view: SettingView, paths: { scope: WriteScope; cwd: string; agentDir: string }): string {
+	const scope = view.origin === "inherited" ? "global" : paths.scope;
 	const path =
-		view.source === "app" ? join(paths.agentDir, PI_SETTINGS_FILE) : configPath(paths.scope, paths.cwd, paths.agentDir);
+		view.source === "app" ? join(paths.agentDir, PI_SETTINGS_FILE) : configPath(scope, paths.cwd, paths.agentDir);
 	const file = sanitizeLine(path);
 	switch (view.origin) {
 		case "inherited":
@@ -90,7 +121,7 @@ export function settingDetail(options: {
 	// The pending-changes marker survives the collapsed body: on a short terminal
 	// the value still changed, and the screen has to say so.
 	const saved = savedLine(theme, width, dirty);
-	if (budget === 0) return [headLine, ...saved];
+	if (budget === 0) return saved;
 
 	const lines = [headLine];
 	const descriptionWidth = Math.max(1, width - BODY_INDENT * 2);
@@ -130,28 +161,36 @@ export function sectionJsonPane(options: {
 	theme: Theme;
 	width: number;
 	section: string;
-	view: SettingView;
 	document: unknown;
 	budget: number;
+	dirty: boolean;
 	paths: { scope: WriteScope; cwd: string; agentDir: string };
 }): string[] {
-	const { theme, width, section, view, document, budget, paths } = options;
-	const source = paint(theme, "faint", originLine(view, paths));
+	const { theme, width, section, document, budget, dirty, paths } = options;
+	const saved = savedLine(theme, width, dirty);
+	if (budget === 0) return saved;
+	const scope = paths.scope === "global" ? "Global" : "Project";
+	const file = sanitizeLine(configPath(paths.scope, paths.cwd, paths.agentDir));
+	const source = paint(theme, "faint", `${scope} · ${file}`);
 	const head = `${paint(theme, "meta", sanitizeLine(section))} ${paint(theme, "faint", "—")} ${source}`;
 	const lines = [clip(`${INDENT}${head}`, width)];
-	const room = Math.max(0, budget - lines.length);
+	const room = Math.max(0, budget - lines.length - saved.length);
 	const body = document === undefined ? [] : JSON.stringify(document, null, 2).split("\n");
 
 	if (body.length === 0) {
 		if (room > 0) lines.push(clip(`${INDENT}${paint(theme, "faint", "Not set in this scope.")}`, width));
+		lines.push(...saved);
 		return lines;
 	}
 
 	const shown = body.slice(0, room);
 	if (body.length > room && shown.length > 0) {
-		shown[shown.length - 1] = `… ${body.length - room} more lines`;
+		// The marker replaces one already-shown line, so the hidden count is one
+		// larger than the number of lines the slice left out.
+		shown[shown.length - 1] = `… ${body.length - room + 1} more lines`;
 	}
 	for (const line of shown) lines.push(clip(`${INDENT}${paint(theme, "faint", sanitizeLine(line))}`, width));
+	lines.push(...saved);
 	return lines;
 }
 

package/extensions/bytefly/panel/tui.ts

@@ -17,29 +17,20 @@ import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
 import type { ViewportRowsSource } from "../../../lib/tui/chrome.ts";
 import { dockListFrame } from "../../../lib/tui/chrome.ts";
-import { fitRows, formatRange, isCloseKey, ListCursor, navIntent, wheelDelta } from "../../../lib/tui/cursor.ts";
+import { isCloseKey, ListCursor, navIntent, wheelDelta } from "../../../lib/tui/cursor.ts";
 import { emptyState } from "../../../lib/tui/rows.ts";
 import { titleRule } from "../../../lib/tui/rules.ts";
 import type { ExtensionReport } from "../../../lib/requirements.ts";
 import type { ExtensionsPickerRuntime } from "../picker/runtime.ts";
 import { buildPanelModel } from "./join.ts";
+import { SETTING_ROWS, UNTRUSTED_SETTINGS_NOTE } from "./settings.ts";
 import type { SettingsSurface } from "./settings-runtime.ts";
 import type { PanelModel, PanelSection } from "./types.ts";
 import { entriesOf, entryKey, isSelectable, settingEntries, type PanelEntry } from "./tui/entries.ts";
+import { applyEditKey, type EditingState } from "./tui/editing.ts";
 import { clampSelection, firstRow, lastRow, moveRows, retainFocus } from "./tui/nav.ts";
 import { extensionDetail, extensionHints, extensionRow, extensionSummary } from "./tui/extensions-view.ts";
-import {
-	BODY_START,
-	DETAIL_ROWS,
-	EXPANDED_DETAIL_FALLBACK,
-	FRAME_ROWS,
-	groupLine,
-	hintLine,
-	MIN_BODY_ROWS,
-	noticeLine,
-	SCREEN_DEFAULT_ROWS,
-	sectionBar,
-} from "./tui/frame.ts";
+import { BODY_START, detailRows, groupLine, hintLine, noticeLine, panelFrame, sectionBar } from "./tui/frame.ts";
 import {
 	editHints,
 	projectNote,
@@ -50,12 +41,6 @@ import {
 	settingsSummary,
 } from "./tui/settings-view.ts";
 
-/** Terminal rows, or `undefined` when the height is unknown. */
-function totalRows(source: ViewportRowsSource | undefined): number | undefined {
-	const rows = typeof source === "function" ? source() : source;
-	return rows !== undefined && Number.isFinite(rows) && rows > 0 ? rows : undefined;
-}
-
 /** Host seams for the panel screen, injected by the command runner. */
 export interface PanelComponentOptions {
 	/** The session's picker runtime: items, scope, toggles, dirty flag. */
@@ -102,10 +87,12 @@ export class PanelComponent implements Component {
 	private probed = false;
 	/** Transient feedback (a refusal or a failed write), shown in the hint row. */
 	private notice: string | undefined;
-	/** The text row being edited: its id, the buffer, and the caret offset. */
-	private editing: { id: string; buffer: string; caret: number } | undefined;
+	/** The text row being edited, if any. */
+	private editing: EditingState | undefined;
 	/** True while the Settings detail pane shows the focused row's section as JSON. */
 	private json = false;
+	/** Whether the last Settings render kept the project note; the click mapping needs it. */
+	private noteShown = false;
 	/** The visible section. */
 	private section: PanelSection;
 
@@ -180,14 +167,22 @@ export class PanelComponent implements Component {
 		if (next === "project" && !this.options.runtime.projectAvailable()) {
 			this.notify(
 				this.section === "settings"
-					? "Project is not trusted; settings can only be changed in Global scope."
+					? UNTRUSTED_SETTINGS_NOTE
 					: "Project is not trusted; manage extensions in Global scope only.",
 			);
 			return;
 		}
 		// The JSON pane names a file, so a scope switch has to close it.
 		this.json = false;
+		const focused = entryKey(this.activeEntries()[this.cursor.selected]);
 		this.options.runtime.setScope(next);
+		// Keep the setting under the cursor across the layer switch; the two scopes
+		// do not share entry indices because Project drops the app rows, so the
+		// render's focus retention and clamp land on the nearest row when it cannot.
+		if (focused !== undefined) {
+			const index = this.activeEntries().findIndex((entry) => entryKey(entry) === focused);
+			if (index >= 0) this.cursor.selected = index;
+		}
 		this.options.requestRender();
 	}
 
@@ -255,6 +250,9 @@ export class PanelComponent implements Component {
 		const entry = this.activeEntries()[this.cursor.selected];
 		if (entry?.kind !== "setting") return;
 		if (!entry.setting.config) {
+			// There is no section to show, so leave the mode off rather than keeping a
+			// hidden toggle that would reopen the pane on another row.
+			this.json = false;
 			this.notify(`${entry.setting.label} is a Pi setting; bytefly.json has no section for it.`);
 			return;
 		}
@@ -276,63 +274,26 @@ export class PanelComponent implements Component {
 			.then(() => this.options.requestRender());
 	}
 
-	/** The text row being edited, read live so a scope switch cannot point at a stale row. */
-	private editingRow(): { view: ReturnType<SettingsSurface["views"]>[number] } | undefined {
-		const editing = this.editing;
-		if (!editing) return undefined;
-		const scope = this.options.runtime.scope();
-		const view = this.options.settings.views(scope).find((entry) => entry.id === editing.id);
-		return view ? { view } : undefined;
-	}
-
 	/**
-	 * Editor keys. `Esc` cancels the edit rather than closing the screen, and
-	 * everything else the screen binds is inert until the editor closes.
+	 * Editor keys. `Esc`/`Ctrl+C` cancel the edit rather than closing the screen,
+	 * and everything else the screen binds is inert until the editor closes.
 	 */
 	private handleEditingInput(data: string): void {
 		const editing = this.editing;
 		if (!editing) return;
-		if (isCloseKey(data)) {
-			this.editing = undefined;
-			this.options.requestRender();
-			return;
-		}
-		if (matchesKey(data, Key.enter)) {
+		const max = SETTING_ROWS.find((row) => row.id === editing.id)?.text?.maxLength;
+		const action = applyEditKey(data, editing, max);
+		if (action.kind === "commit") {
 			void this.commitEdit();
 			return;
 		}
-		const { buffer, caret } = editing;
-		if (matchesKey(data, Key.backspace)) {
-			if (caret > 0)
-				this.editing = { ...editing, buffer: buffer.slice(0, caret - 1) + buffer.slice(caret), caret: caret - 1 };
-		} else if (matchesKey(data, Key.delete)) {
-			if (caret < buffer.length)
-				this.editing = { ...editing, buffer: buffer.slice(0, caret) + buffer.slice(caret + 1) };
-		} else if (matchesKey(data, Key.left)) {
-			this.editing = { ...editing, caret: Math.max(0, caret - 1) };
-		} else if (matchesKey(data, Key.right)) {
-			this.editing = { ...editing, caret: Math.min(buffer.length, caret + 1) };
-			// `Ctrl+A`/`Ctrl+E` are the emacs spellings of Home/End, which pi-tui's
-			// `Key.home`/`Key.end` do not match; both are offered because a terminal
-			// may send either.
-		} else if (matchesKey(data, Key.home) || matchesKey(data, "ctrl+a")) {
-			this.editing = { ...editing, caret: 0 };
-		} else if (matchesKey(data, Key.end) || matchesKey(data, "ctrl+e")) {
-			this.editing = { ...editing, caret: buffer.length };
-		} else if (matchesKey(data, "ctrl+u")) {
-			this.editing = { ...editing, buffer: "", caret: 0 };
-		} else {
-			// Anything else must be printable; control sequences are not text.
-			const typed = [...data].filter((char) => char >= " " && char !== "\u007f").join("");
-			const max = this.editingRow()?.view.text?.maxLength;
-			if (typed && max !== undefined && buffer.length + typed.length <= max) {
-				this.editing = {
-					...editing,
-					buffer: buffer.slice(0, caret) + typed + buffer.slice(caret),
-					caret: caret + typed.length,
-				};
-			}
+		if (action.kind === "cancel") {
+			this.editing = undefined;
+			this.options.requestRender();
+			return;
 		}
+		if (!action.changed) return;
+		this.editing = action.state;
 		this.options.requestRender();
 	}
 
@@ -534,23 +495,24 @@ export class PanelComponent implements Component {
 		if (entries.length === 0) return undefined;
 		// The Settings section prints the "Global only" note first in Project scope,
 		// so the rows start one line lower there.
-		const note = this.section === "settings" && this.options.runtime.scope() === "project" ? 1 : 0;
+		const note = this.section === "settings" && this.noteShown ? 1 : 0;
 		const line = event.y - (BODY_START + note);
-		if (line < 0) return undefined;
-		const index = this.cursor.window(entries.length).start + line;
+		const window = this.cursor.window(entries.length);
+		if (line < 0 || line >= window.end - window.start) return undefined;
+		const index = window.start + line;
 		if (!isSelectable(entries[index])) return undefined;
 		this.select(index);
 		return { handled: true };
 	}
 
 	/** Key hints for the active section; whole hints drop as the width runs out. */
-	private hint(width: number, expanded = false): string {
+	private hint(width: number, options: { expanded?: boolean; jsonOpen?: boolean } = {}): string {
 		if (this.editing) return hintLine(this.theme, width, editHints());
 		const hints =
 			this.section === "settings"
-				? settingsHints(this.json)
+				? settingsHints(options.jsonOpen === true)
 				: extensionHints({
-						expanded,
+						expanded: options.expanded === true,
 						refreshing: this.refreshing,
 						projectScope: this.options.runtime.scope() === "project",
 					});
@@ -558,21 +520,8 @@ export class PanelComponent implements Component {
 	}
 
 	/** The key-hint row, or the notice that temporarily replaces it. */
-	private hintRow(width: number, expanded = false): string {
-		return this.notice !== undefined ? noticeLine(this.theme, width, this.notice) : this.hint(width, expanded);
-	}
-
-	/**
-	 * Detail rows the focused row gets: the fixed pane when collapsed, the free
-	 * height when expanded. Zero when the terminal cannot hold one body row next to
-	 * the pane, so the hint row is never pushed off the screen.
-	 */
-	private detailRows(expanded: boolean): number {
-		const total = totalRows(this.options.viewportRows);
-		if (total === undefined) return expanded ? EXPANDED_DETAIL_FALLBACK : DETAIL_ROWS;
-		const available = total - FRAME_ROWS - MIN_BODY_ROWS;
-		if (available < DETAIL_ROWS + 1) return 0;
-		return expanded ? Math.max(DETAIL_ROWS, available) : DETAIL_ROWS;
+	private hintRow(width: number, options: { expanded?: boolean; jsonOpen?: boolean } = {}): string {
+		return this.notice !== undefined ? noticeLine(this.theme, width, this.notice) : this.hint(width, options);
 	}
 
 	/** Expand or collapse the focused row's findings. */
@@ -584,6 +533,13 @@ export class PanelComponent implements Component {
 		this.options.requestRender();
 	}
 
+	/** Retain the focus across a rebuild and return the entry it landed on. */
+	private retain(entries: PanelEntry[]): PanelEntry | undefined {
+		this.retainFocus(entries);
+		this.clampSelection(entries);
+		return entries[this.cursor.selected];
+	}
+
 	/** The Settings body: scope counts, the project note, rows, and detail. */
 	private renderSettings(width: number, header: string): string[] {
 		const scope = this.options.runtime.scope();
@@ -597,11 +553,11 @@ export class PanelComponent implements Component {
 		const entries = settingEntries(views);
 		const note = scope === "project" ? projectNote(this.theme, width) : undefined;
 
-		this.retainFocus(entries);
-		this.clampSelection(entries);
-
-		const focusedEntry = entries[this.cursor.selected];
+		const focusedEntry = this.retain(entries);
 		const focused = focusedEntry?.kind === "setting" ? focusedEntry.setting : undefined;
+		// A row with no section leaves the mode off, so moving away and back cannot
+		// reopen a pane the user closed.
+		if (focused && !focused.config) this.json = false;
 		const jsonConfig = this.json ? focused?.config : undefined;
 		const detail =
 			jsonConfig && focused
@@ -609,50 +565,40 @@ export class PanelComponent implements Component {
 						theme: this.theme,
 						width,
 						section: jsonConfig.section,
-						view: focused,
 						document: this.options.settings.sectionDocument(scope, jsonConfig.section),
-						budget: this.detailRows(true),
+						budget: detailRows(true, this.options.viewportRows),
+						dirty: this.dirty,
 						paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
 					})
 				: settingDetail({
 						theme: this.theme,
 						width,
 						view: focused,
-						budget: this.detailRows(false),
+						budget: detailRows(false, this.options.viewportRows),
 						dirty: this.dirty,
 						paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
 					});
 
-		this.cursor.visible = fitRows(
-			this.options.viewportRows,
-			entries.length,
-			FRAME_ROWS + detail.length + (note ? 1 : 0),
-			SCREEN_DEFAULT_ROWS,
-		);
-		this.cursor.sync(entries.length);
-		const { start, end } = this.cursor.window(entries.length);
-
-		const body: string[] = [];
-		if (note) body.push(note);
-		for (let index = start; index < end; index += 1) {
-			const entry = entries[index];
-			if (entry.kind === "group") body.push(groupLine(this.theme, width, entry));
-			else if (entry.kind === "setting") {
-				const editing = this.editing?.id === entry.setting.id ? this.editing : undefined;
-				body.push(settingRow(this.theme, width, entry.setting, index === this.cursor.selected, editing));
-			}
-		}
-
-		return dockListFrame({
+		const { lines, noteShown } = panelFrame({
+			theme: this.theme,
+			viewportRows: this.options.viewportRows,
+			cursor: this.cursor,
+			width,
 			header,
 			summary,
-			body,
-			range: this.cursor.clipped(entries.length)
-				? formatRange(this.theme, width, { start, end, total: entries.length })
-				: undefined,
-			detail: detail.length > 0 ? detail : undefined,
-			hint: this.hintRow(width),
+			entries,
+			note,
+			detail,
+			hint: this.hintRow(width, { jsonOpen: jsonConfig !== undefined }),
+			draw: (entry, index) => {
+				if (entry.kind === "group") return groupLine(this.theme, width, entry);
+				if (entry.kind !== "setting") return undefined;
+				const editing = this.editing?.id === entry.setting.id ? this.editing : undefined;
+				return settingRow(this.theme, width, entry.setting, index === this.cursor.selected, editing);
+			},
 		});
+		this.noteShown = noteShown;
+		return lines;
 	}
 
 	render(width: number): string[] {
@@ -678,39 +624,35 @@ export class PanelComponent implements Component {
 			});
 		}
 
-		this.retainFocus(entries);
-		this.clampSelection(entries);
-
-		const focusedEntry = entries[this.cursor.selected];
+		const focusedEntry = this.retain(entries);
 		const focused = focusedEntry?.kind === "row" ? focusedEntry.row : undefined;
 		const expanded = focused !== undefined && this.expanded.has(focused.key);
-		const detail = extensionDetail(this.theme, w, focused, this.detailRows(expanded), expanded, this.dirty);
-
-		this.cursor.visible = fitRows(
-			this.options.viewportRows,
-			entries.length,
-			FRAME_ROWS + detail.length,
-			SCREEN_DEFAULT_ROWS,
+		const detail = extensionDetail(
+			this.theme,
+			w,
+			focused,
+			detailRows(expanded, this.options.viewportRows),
+			expanded,
+			this.dirty,
 		);
-		this.cursor.sync(entries.length);
-		const { start, end } = this.cursor.window(entries.length);
-
-		const body: string[] = [];
-		for (let index = start; index < end; index += 1) {
-			const entry = entries[index];
-			if (entry.kind === "group") body.push(groupLine(this.theme, w, entry));
-			else if (entry.kind === "row") body.push(extensionRow(this.theme, w, entry.row, index === this.cursor.selected));
-		}
 
-		return dockListFrame({
+		const { lines, noteShown } = panelFrame({
+			theme: this.theme,
+			viewportRows: this.options.viewportRows,
+			cursor: this.cursor,
+			width: w,
 			header,
 			summary,
-			body,
-			range: this.cursor.clipped(entries.length)
-				? formatRange(this.theme, w, { start, end, total: entries.length })
-				: undefined,
-			detail: detail.length > 0 ? detail : undefined,
-			hint: this.hintRow(w, expanded),
+			entries,
+			detail,
+			hint: this.hintRow(w, { expanded }),
+			draw: (entry, index) => {
+				if (entry.kind === "group") return groupLine(this.theme, w, entry);
+				if (entry.kind !== "row") return undefined;
+				return extensionRow(this.theme, w, entry.row, index === this.cursor.selected);
+			},
 		});
+		this.noteShown = noteShown;
+		return lines;
 	}
 }

package/extensions/bytefly/picker/discovery.ts

@@ -50,6 +50,7 @@ export function createSettingsStore(manager: SettingsManager): SettingsStore {
 		setQuietStartup: (quiet) => manager.setQuietStartup(quiet),
 		setOutputPad: (padding) => manager.setOutputPad(padding),
 		setShowHardwareCursor: (enabled) => manager.setShowHardwareCursor(enabled),
+		setTheme: (theme) => manager.setTheme(theme),
 		isProjectTrusted: () => manager.isProjectTrusted(),
 		flush: () => manager.flush(),
 		drainErrors: () => manager.drainErrors(),

package/extensions/bytefly/picker/types.ts

@@ -37,6 +37,8 @@ export interface SettingsStore {
 	setQuietStartup(quiet: QuietStartup): void;
 	setOutputPad(padding: 0 | 1): void;
 	setShowHardwareCursor(enabled: boolean): void;
+	/** Pi's theme setting is a personal-file preference. */
+	setTheme(theme: string): void;
 	isProjectTrusted(): boolean;
 	flush(): Promise<void>;
 	drainErrors(): Array<{ error: Error }>;

package/extensions/bytefly/separator/component.ts

@@ -1,17 +1,26 @@
 /**
  * The transcript component that draws one separator entry.
  *
- * It is stateless: the line is derived from the stored entry data and the width
- * passed to `render`, so there is nothing to invalidate.
+ * `render` runs on every frame Pi draws, and a session holds one separator per
+ * turn, so the line is a pure function of the stored entry data, the width, and
+ * the theme it was built with. `centeredRule` paints and measures a full-width
+ * rule, so the placed line is memoized on the width (`RenderCache`); without it
+ * a long session rebuilds every turn's rule on every frame. Pi rebuilds the
+ * component from the renderer on a theme change (its
+ * `CustomEntryComponent.invalidate` re-runs it), so the captured theme cannot go
+ * stale; `invalidate` drops the memo anyway, in case that changes.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import type { Component } from "@earendil-works/pi-tui";
+import { RenderCache } from "../../../lib/tui/render-cache.ts";
 import { separatorLine } from "./format.ts";
 import type { TurnSeparatorData } from "./types.ts";
 
 /** Renders one separator entry; the data comes from the stored entry. */
 export class SeparatorComponent implements Component {
+	private readonly cache = new RenderCache();
+
 	constructor(
 		private readonly data: TurnSeparatorData,
 		private readonly theme: Theme,
@@ -19,10 +28,11 @@ export class SeparatorComponent implements Component {
 	) {}
 
 	invalidate(): void {
-		// Stateless: the line is derived from the data and the width passed to render.
+		this.cache.invalidate();
 	}
 
 	render(width: number): string[] {
-		return separatorLine(this.data, width, this.theme, this.pad);
+		const w = Math.max(1, width);
+		return this.cache.lines(w, undefined, () => separatorLine(this.data, w, this.theme, this.pad));
 	}
 }