@gavin-hu/my-pi-agent 0.18.0 → 0.20.0

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

@@ -1,35 +1,30 @@
 /**
- * The Settings section: its own state (the editor and the JSON pane), its key
- * handling, and the screen it draws.
+ * The Settings section's own state: the text editor, the JSON pane, and the
+ * writes. Everything it draws comes from `tui.ts` and `side-pane.ts`, because all
+ * three sections draw one frame.
  *
- * The component owns the section switch, the write scope, and the cursor. This
- * class owns what only Settings has, so `tui.ts` stays the switch and the shared
- * list keys, and the section reads and writes through the same surface.
+ * The component owns the section switch, the write scope, the cursor, the filter
+ * and the keys the three sections share; this class owns what only Settings has.
  */
 
-import type { Theme } from "@earendil-works/pi-coding-agent";
-import { Key, matchesKey } from "@earendil-works/pi-tui";
-import type { ViewportRowsSource } from "../../../../lib/tui/chrome.ts";
 import type { ListCursor } from "../../../../lib/tui/cursor.ts";
 import type { WriteScope } from "../../picker/types.ts";
+import { settingMatches, type PanelFilter } from "../filter.ts";
 import type { SettingsSurface } from "../settings-runtime.ts";
-import { SETTING_ROWS } from "../settings.ts";
+import { SETTING_ROWS, type SettingView } from "../settings.ts";
 import { applyEditKey, type EditingState } from "./editing.ts";
 import { settingEntries, type PanelEntry } from "./entries.ts";
-import { detailRows, groupLine, panelFrame, sectionBar } from "./frame.ts";
 import { clampSelection } from "./nav.ts";
-import { projectNote, sectionJsonPane, settingDetail, settingRow, settingsSummary } from "./settings-view.ts";
 
 /** What the Settings section needs from the component that hosts it. */
 export interface SettingsSectionDeps {
 	/** The rows, values, and writes the section reads and calls. */
 	surface: SettingsSurface;
-	theme: Theme;
+	/** The write scope the component owns. */
 	scope(): WriteScope;
+	/** The filter the component owns. */
+	filter(): PanelFilter;
 	cursor: ListCursor;
-	viewportRows: ViewportRowsSource | undefined;
-	cwd: string;
-	agentDir: string;
 	/** Keep the focused row across a rebuild and return it. */
 	retain(entries: PanelEntry[]): PanelEntry | undefined;
 	/** Panel navigation, for the keys this section does not own. */
@@ -38,13 +33,9 @@ export interface SettingsSectionDeps {
 	switchScope(): void;
 	notify(message: string): void;
 	requestRender(): void;
-	/** Keep the frame's project-note marker in step for the mouse mapping. */
-	setNoteShown(shown: boolean): void;
-	/** The hint row, already assembled (or the notice that replaces it). */
-	hint(width: number): string;
 }
 
-/** The Settings section's state and screen. */
+/** The Settings section's state. */
 export class SettingsSection {
 	private chain: Promise<void> = Promise.resolve();
 	private editing: EditingState | undefined;
@@ -52,16 +43,21 @@ export class SettingsSection {
 
 	constructor(private readonly deps: SettingsSectionDeps) {}
 
-	/** Whether a text row is open in the editor, so the hint row and mouse defer. */
+	/** Whether a text row is open in the editor, so the hint row and keys defer. */
 	get isEditing(): boolean {
 		return this.editing !== undefined;
 	}
 
-	/** Whether the detail pane shows the focused row's section as JSON. */
+	/** Whether the focused row's section is shown as JSON. */
 	get jsonOpen(): boolean {
 		return this.json;
 	}
 
+	/** The editor's buffer and caret, for the row that is being typed into. */
+	get editingState(): EditingState | undefined {
+		return this.editing;
+	}
+
 	/** Run `task` after the previous write, then repaint once. */
 	private write(task: () => Promise<unknown>, onSettled?: (result: unknown) => void): void {
 		this.chain = this.chain
@@ -71,16 +67,30 @@ export class SettingsSection {
 			.then(() => this.deps.requestRender());
 	}
 
-	/** The rows for the active scope, as display entries. */
-	private entries(): PanelEntry[] {
-		return settingEntries(this.deps.surface.views(this.deps.scope()));
+	/** The rows the active scope shows, after the filter. */
+	views(): SettingView[] {
+		const filter = this.deps.filter();
+		return this.deps.surface.views(this.deps.scope()).filter((view) => settingMatches(view, filter));
+	}
+
+	/** Those rows as display entries, grouped under their headings. */
+	entries(): PanelEntry[] {
+		return settingEntries(this.views());
 	}
 
-	/** The focused entry, after clamping the cursor onto a row. */
-	private focused(): PanelEntry | undefined {
+	/** The focused setting, after clamping the cursor onto a row. */
+	focused(): SettingView | undefined {
 		const entries = this.entries();
 		clampSelection(entries, this.deps.cursor);
-		return entries[this.deps.cursor.selected];
+		const entry = entries[this.deps.cursor.selected];
+		return entry?.kind === "setting" ? entry.setting : undefined;
+	}
+
+	/** The stored document behind the focused row, when the JSON pane is open. */
+	jsonFor(view: SettingView | undefined): { section: string; document: unknown } | undefined {
+		if (!this.json || view?.config === undefined) return undefined;
+		const { section } = view.config;
+		return { section, document: this.deps.surface.sectionDocument(this.deps.scope(), section) };
 	}
 
 	/** Drop the editor and the JSON pane when another section takes over. */
@@ -96,10 +106,9 @@ export class SettingsSection {
 	}
 
 	/** Change the focused setting: cycle it, or open the editor for a text row. */
-	private changeSetting(): void {
-		const entry = this.focused();
-		if (entry?.kind !== "setting") return;
-		const view = entry.setting;
+	changeSetting(): void {
+		const view = this.focused();
+		if (view === undefined) return;
 		if (view.kind === "text") {
 			this.editing = { id: view.id, buffer: view.value, caret: view.value.length };
 			this.deps.requestRender();
@@ -110,22 +119,22 @@ export class SettingsSection {
 	}
 
 	/** Delete the focused setting's leaf, so its default applies again. */
-	private resetSetting(): void {
-		const entry = this.focused();
-		if (entry?.kind !== "setting") return;
+	resetSetting(): void {
+		const view = this.focused();
+		if (view === undefined) return;
 		const scope = this.deps.scope();
-		this.write(() => this.deps.surface.reset(scope, entry.setting.id));
+		this.write(() => this.deps.surface.reset(scope, view.id));
 	}
 
-	/** Toggle the detail pane between the row and its whole section as stored. */
-	private toggleJson(): void {
-		const entry = this.focused();
-		if (entry?.kind !== "setting") return;
-		if (!entry.setting.config) {
+	/** Toggle the focused row between its value and the whole section as stored. */
+	toggleJson(): void {
+		const view = this.focused();
+		if (view === undefined) return;
+		if (!view.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.deps.notify(`${entry.setting.label} is a Pi setting; bytefly.json has no section for it.`);
+			this.deps.notify(`${view.label} is a Pi setting; bytefly.json has no section for it.`);
 			return;
 		}
 		this.json = !this.json;
@@ -133,7 +142,7 @@ export class SettingsSection {
 	}
 
 	/** Store the editor's buffer; a refusal keeps it open with the reason shown. */
-	private commitEdit(): void {
+	commitEdit(): void {
 		const editing = this.editing;
 		if (!editing) return;
 		const scope = this.deps.scope();
@@ -149,13 +158,13 @@ export class SettingsSection {
 	 * Editor keys. `Esc`/`Ctrl+C` cancel the edit rather than closing the screen,
 	 * and everything else the section binds is inert until the editor closes.
 	 */
-	private handleEditingInput(data: string): void {
+	handleEditingInput(data: string): void {
 		const editing = this.editing;
 		if (!editing) return;
 		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();
+			this.commitEdit();
 			return;
 		}
 		if (action.kind === "cancel") {
@@ -167,84 +176,4 @@ export class SettingsSection {
 		this.editing = action.state;
 		this.deps.requestRender();
 	}
-
-	/** One key: editor keys first, then change, scope, reset, JSON, navigation. */
-	handleInput(data: string): void {
-		if (this.editing) {
-			this.handleEditingInput(data);
-			return;
-		}
-		this.focused();
-		if (matchesKey(data, Key.space) || matchesKey(data, Key.enter)) {
-			this.changeSetting();
-			return;
-		}
-		if (matchesKey(data, Key.tab)) {
-			this.deps.switchScope();
-			return;
-		}
-		if (data === "u") {
-			this.resetSetting();
-			return;
-		}
-		if (data === "J") {
-			this.toggleJson();
-			return;
-		}
-		this.deps.navigate(data);
-	}
-
-	/** The Settings body: scope counts, the project note, rows, and detail. */
-	render(width: number, header: string): string[] {
-		const { theme, surface, viewportRows, cwd, agentDir } = this.deps;
-		const scope = this.deps.scope();
-		const views = surface.views(scope);
-		const entries = settingEntries(views);
-		const focusedEntry = this.deps.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 jsonSection = this.json ? focused?.config : undefined;
-		const paths = { scope, cwd, agentDir };
-		const detail = jsonSection
-			? sectionJsonPane({
-					theme,
-					width,
-					section: jsonSection.section,
-					document: surface.sectionDocument(scope, jsonSection.section),
-					budget: detailRows(true, viewportRows),
-					dirty: surface.isDirty(),
-					paths,
-				})
-			: settingDetail({
-					theme,
-					width,
-					view: focused,
-					budget: detailRows(false, viewportRows),
-					dirty: surface.isDirty(),
-					paths,
-				});
-
-		const { lines, noteShown } = panelFrame({
-			theme,
-			viewportRows,
-			cursor: this.deps.cursor,
-			width,
-			header,
-			summary: sectionBar(theme, width, "settings", settingsSummary(theme, width, scope, views.length)),
-			entries,
-			note: scope === "project" ? projectNote(theme, width) : undefined,
-			detail,
-			hint: this.deps.hint(width),
-			draw: (entry, index) => {
-				if (entry.kind === "group") return groupLine(theme, width, entry);
-				if (entry.kind !== "setting") return undefined;
-				const editing = this.editing?.id === entry.setting.id ? this.editing : undefined;
-				return settingRow(theme, width, entry.setting, index === this.deps.cursor.selected, editing);
-			},
-		});
-		this.deps.setNoteShown(noteShown);
-		return lines;
-	}
 }

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

@@ -1,33 +1,28 @@
 /**
- * The Settings section: its summary line, one row per preference, and the
- * detail pane that names the value's source.
+ * The Settings section's rows and the two words only it says.
  *
- * Pure functions over the catalogue's views; the component owns the cursor, the
- * scope, and the write.
+ * A row is a checkbox for a boolean, the label, and the value in a column of its
+ * own — the column is what makes twelve values scannable, and it is measured from
+ * the labels actually on screen rather than from the longest label in the
+ * catalogue, so a narrow terminal keeps the value instead of the padding.
+ *
+ * Pure: pure functions over the catalogue's views, theme passed in.
  */
 
-import { join } from "node:path";
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { sliceByColumn, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { sliceByColumn, truncateToWidth, visibleWidth } 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";
+import { clip, padTo } from "../../../../lib/tui/columns.ts";
 import { checkbox, listRow } from "../../../../lib/tui/rows.ts";
 import { paint } from "../../../../lib/tui/tokens.ts";
-import { settingsSummarySegments, type PanelScope } from "../format.ts";
 import type { SettingView } from "../settings.ts";
-import { configPath } from "../settings-runtime.ts";
-import type { WriteScope } from "../../picker/types.ts";
-import { countsLine, INDENT, savedLine } from "./frame.ts";
-
-/** Pi's personal settings file, named in the detail pane. */
-const PI_SETTINGS_FILE = "settings.json";
+import { INDENT } from "./frame.ts";
 
 /** 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;
-/** Columns between the label and its value. */
+/** Columns between the label column and its value. */
 const VALUE_GAP = 2;
 
 /**
@@ -53,141 +48,45 @@ function editingCell(buffer: string, caret: number, budget: number): string {
 	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));
+/**
+ * The label column: the widest label on screen, capped so a value always keeps
+ * `MIN_VALUE_WIDTH` columns and a long label is clipped rather than the value
+ * pushed off the row.
+ */
+export function settingLabelColumn(views: readonly SettingView[], width: number): number {
+	const widest = views.reduce((columns, view) => Math.max(columns, visibleWidth(sanitizeLine(view.label))), 0);
+	const room = Math.max(0, width - ROW_PREFIX_WIDTH - VALUE_GAP - MIN_VALUE_WIDTH);
+	return Math.max(0, Math.min(widest, room));
 }
 
-/** One setting row: a checkbox for booleans, and the value beside the label. */
+/** One setting row: a checkbox for a boolean, the label, and the value in its column. */
 export function settingRow(
 	theme: Theme,
 	width: number,
 	view: SettingView,
 	selected: boolean,
-	editing?: { buffer: string; caret: number },
+	editing: { buffer: string; caret: number } | undefined,
+	labelColumn: number,
 ): string {
 	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 - VALUE_GAP);
-	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;
+	const available = Math.max(1, width - ROW_PREFIX_WIDTH - VALUE_GAP - labelColumn);
+	const rawValue = editing ? editingCell(editing.buffer, editing.caret, available) : view.valueLabel;
 	return listRow(theme, width, {
 		selected,
 		leading: view.kind === "boolean" ? checkbox(theme, view.value === "true") : " ",
-		label,
+		label: padTo(label, labelColumn),
 		labelRole: selected ? "accent" : "label",
-		trailing: clip(sanitizeLine(rawValue), valueBudget),
+		trailing: clip(sanitizeLine(rawValue), available),
 		trailingRole: editing ? "accent" : "meta",
-		// The value sits beside the label, so a wide terminal never strands it at
-		// the far edge where the eye has to travel to read it.
+		// The value sits in its own column rather than at the far edge, so a wide
+		// terminal does not put the label and its value at opposite ends of the row.
 		align: "inline",
 	});
 }
 
 /** The project note: app rows are absent because Pi has no project setter. */
 export function projectNote(theme: Theme, width: number): string {
-	return clip(`${INDENT}${paint(theme, "faint", "App settings are Global only.")}`, width);
-}
-
-/** 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(scope, paths.cwd, paths.agentDir);
-	const file = sanitizeLine(path);
-	switch (view.origin) {
-		case "inherited":
-			return `Inherited from Global · ${file}`;
-		case "project":
-			return `Project · ${file}`;
-		case "global":
-			return `Global · ${file}`;
-		default:
-			return `Default · ${file}`;
-	}
-}
-
-/** The focused setting's source, description, origin, and pending changes. */
-export function settingDetail(options: {
-	theme: Theme;
-	width: number;
-	view: SettingView | undefined;
-	budget: number;
-	dirty: boolean;
-	paths: { scope: WriteScope; cwd: string; agentDir: string };
-}): string[] {
-	const { theme, width, view, budget, dirty, paths } = options;
-	if (!view) return savedLine(theme, width, dirty);
-	const source = view.source === "app" ? "Pi setting" : "bytefly.json";
-	const head = `${paint(theme, "meta", sanitizeLine(view.label))} ${paint(theme, "faint", "—")} ${paint(theme, "faint", source)}`;
-	const headLine = clip(`${INDENT}${head}`, width);
-	// 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 saved;
-
-	const lines = [headLine];
-	const descriptionWidth = Math.max(1, width - BODY_INDENT * 2);
-	const description = wrapTextWithAnsi(sanitizeLine(view.description), descriptionWidth).slice(
-		0,
-		Math.max(0, Math.min(2, budget - 2 - saved.length)),
-	);
-	for (const line of description) lines.push(clip(`${INDENT}${paint(theme, "meta", line)}`, width));
-	lines.push(clip(`${INDENT}${paint(theme, "faint", originLine(view, paths))}`, width));
-	lines.push(...saved);
-	return lines;
-}
-
-/** The section's key hints, in the order they drop as the width runs out. */
-export function settingsHints(json = false): string[] {
-	return ["Esc close", "←/→", "Space change", "Tab scope", "u reset", json ? "J hide" : "J JSON", "↑/↓ select"];
-}
-
-/**
- * The focused row's section as the active scope stores it.
- *
- * This is the only view of the keys the catalogue leaves to JSON, so it names the
- * section and its file rather than pretending to be complete: the pane is clipped
- * to the detail budget and says how many lines it left out. `section` is the row's
- * `bytefly.json` section, which the caller has already established.
- */
-export function sectionJsonPane(options: {
-	theme: Theme;
-	width: number;
-	section: string;
-	document: unknown;
-	budget: number;
-	dirty: boolean;
-	paths: { scope: WriteScope; cwd: string; agentDir: string };
-}): string[] {
-	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 - 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) {
-		// 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;
+	return clip(`${INDENT}${paint(theme, "faint", "App settings are Global only.")}`, Math.max(1, width));
 }
 
 /** The editor's key hints: `Esc` cancels the edit, it does not close the screen. */