@gavin-hu/my-pi-agent 0.11.4 → 0.12.0

package/extensions/bytefly/panel/tui/frame.ts

@@ -0,0 +1,71 @@
+/**
+ * The chrome around the panel's body: the layout constants, the section bar with
+ * its counts, a group heading, and the hint row that a transient notice replaces.
+ *
+ * Every section draws its body through these, so the two views cannot drift on
+ * spacing, roles, or the width arithmetic.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { sanitizeLine } from "../../../../lib/format.ts";
+import { screenHint } from "../../../../lib/tui/chrome.ts";
+import { clip, fitCells, splitRow } from "../../../../lib/tui/columns.ts";
+import { BODY_INDENT } from "../../../../lib/tui/indent.ts";
+import { paint } from "../../../../lib/tui/tokens.ts";
+import { sectionSegments, type SummarySegment } from "../format.ts";
+import type { PanelSection } from "../types.ts";
+
+/** Body rows when the terminal height is unknown. */
+export const SCREEN_DEFAULT_ROWS = 16;
+/** Fixed rows around the body: header, summary, blank, blank, hint, blank. */
+export const FRAME_ROWS = 6;
+/** Detail rows reserved for the focused row. */
+export const DETAIL_ROWS = 4;
+/** Body rows that must survive before the detail pane collapses to its title. */
+export const MIN_BODY_ROWS = 3;
+/** Detail rows when the terminal height is unknown and the focused row is expanded. */
+export const EXPANDED_DETAIL_FALLBACK = 8;
+/** Fixed body offset in the frame: header, summary, blank line. */
+export const BODY_START = 3;
+
+/** The body indent, shared by the note and the detail pane. */
+export const INDENT = " ".repeat(BODY_INDENT);
+
+/** The themed section bar: both section names, the active one accented. */
+export function sectionBar(theme: Theme, width: number, active: PanelSection, counts: string): string {
+	const separator = paint(theme, "faint", " · ");
+	const left = `  ${sectionSegments(active)
+		.map((segment) => paint(theme, segment.color, segment.text))
+		.join(separator)}`;
+	return clip(splitRow(left, counts, width), width);
+}
+
+/** One section's counts as whole segments, so a narrow screen drops a count. */
+export function countsLine(theme: Theme, width: number, segments: readonly SummarySegment[]): string {
+	const separator = paint(theme, "faint", " · ");
+	const styled = segments.map((segment) => paint(theme, segment.color, segment.text));
+	return fitCells(styled, Math.max(1, width - 2), separator);
+}
+
+/** One group heading: its label and how many rows sit under it. */
+export function groupLine(theme: Theme, width: number, entry: { label: string; count: number }): string {
+	const label = paint(theme, "meta", sanitizeLine(entry.label));
+	const count = paint(theme, "faint", `(${entry.count})`);
+	return clip(`  ${label} ${count}`, width);
+}
+
+/** The key-hint row. */
+export function hintLine(theme: Theme, width: number, hints: string[]): string {
+	return screenHint(theme, width, hints);
+}
+
+/** The transient notice row, clipped and painted like the hint it replaces. */
+export function noticeLine(theme: Theme, width: number, notice: string): string {
+	return clip(`${INDENT}${paint(theme, "meta", sanitizeLine(notice))}`, width);
+}
+
+/** The saved-then-reload marker, shared by both detail panes. */
+export function savedLine(theme: Theme, width: number, dirty: boolean): string[] {
+	if (!dirty) return [];
+	return [clip(`${INDENT}${paint(theme, "warn", "Saved · reload to apply")}`, width)];
+}

package/extensions/bytefly/panel/tui/nav.ts

@@ -0,0 +1,75 @@
+/**
+ * Cursor arithmetic for the panel's two lists: keep the focus on a row across a
+ * rebuild, land on the nearest row when the shape changes, and move by rows
+ * while skipping group headers.
+ *
+ * Pure: each function takes the entries and the cursor and mutates only the
+ * cursor it was handed, so the component keeps one cursor per section and no
+ * navigation state of its own.
+ */
+
+import type { ListCursor } from "../../../../lib/tui/cursor.ts";
+import { entryKey, isSelectable, nextRow, type PanelEntry } from "./entries.ts";
+
+/** The first selectable entry, or `undefined` when the list has none. */
+export function firstRow(entries: PanelEntry[]): number | undefined {
+	const index = entries.findIndex(isSelectable);
+	return index >= 0 ? index : undefined;
+}
+
+/** The last selectable entry, or `undefined` when the list has none. */
+export function lastRow(entries: PanelEntry[]): number | undefined {
+	for (let index = entries.length - 1; index >= 0; index -= 1) {
+		if (isSelectable(entries[index])) return index;
+	}
+	return undefined;
+}
+
+/** Keep the focus on the same row key when the list shape changes. */
+export function retainFocus(entries: PanelEntry[], cursor: ListCursor, remembered: string | undefined): void {
+	const key = entryKey(entries[cursor.selected]);
+	if (key !== undefined) return;
+	if (remembered === undefined) return;
+	const index = entries.findIndex((candidate) => entryKey(candidate) === remembered);
+	if (index >= 0) cursor.selected = index;
+}
+
+/** Move onto the nearest selectable row when the focus is not already on one. */
+export function clampSelection(entries: PanelEntry[], cursor: ListCursor): void {
+	if (entries.length === 0) return;
+	const index = Math.min(Math.max(0, cursor.selected), entries.length - 1);
+	if (isSelectable(entries[index])) {
+		cursor.selected = index;
+		return;
+	}
+	// Prefer the closest row above, then the closest below, so a scope switch that
+	// drops the focused row leaves the cursor nearby instead of at the top.
+	for (let back = index - 1; back >= 0; back -= 1) {
+		if (isSelectable(entries[back])) {
+			cursor.selected = back;
+			return;
+		}
+	}
+	for (let forward = index + 1; forward < entries.length; forward += 1) {
+		if (isSelectable(entries[forward])) {
+			cursor.selected = forward;
+			return;
+		}
+	}
+}
+
+/** Move `delta` rows from the cursor, skipping group headers. */
+export function moveRows(entries: PanelEntry[], cursor: ListCursor, delta: number): void {
+	if (delta === 0) return;
+	clampSelection(entries, cursor);
+	const direction = delta < 0 ? -1 : 1;
+	let index = cursor.selected;
+	let remaining = Math.abs(delta);
+	while (remaining > 0) {
+		const next = nextRow(entries, index, direction);
+		if (next === undefined) break;
+		index = next;
+		remaining -= 1;
+	}
+	cursor.set(index, entries.length);
+}

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

@@ -0,0 +1,115 @@
+/**
+ * The Settings section: its summary line, one row per preference, and the
+ * detail pane that names the value's source.
+ *
+ * Pure functions over the catalogue's views; the component owns the cursor, the
+ * scope, and the write.
+ */
+
+import { join } from "node:path";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { 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";
+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";
+
+/** 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));
+}
+
+/** One setting row: a checkbox for booleans, the value right-aligned. */
+export function settingRow(
+	theme: Theme,
+	width: number,
+	view: SettingView,
+	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;
+	return listRow(theme, width, {
+		selected,
+		leading: view.kind === "boolean" ? checkbox(theme, view.value === "true") : " ",
+		label: sanitizeLine(view.label),
+		labelRole: selected ? "accent" : "label",
+		trailing: sanitizeLine(value),
+		trailingRole: editing ? "accent" : "meta",
+	});
+}
+
+/** 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. */
+export function originLine(view: SettingView, paths: { scope: WriteScope; cwd: string; agentDir: string }): string {
+	const path =
+		view.source === "app" ? join(paths.agentDir, PI_SETTINGS_FILE) : configPath(paths.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 [headLine, ...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(): string[] {
+	return ["Esc close", "←/→", "Space change", "Tab scope", "↑/↓ select"];
+}
+
+/** The editor's key hints: `Esc` cancels the edit, it does not close the screen. */
+export function editHints(): string[] {
+	return ["Esc cancel", "←/→ caret", "Enter save", "Backspace delete", "Ctrl+U clear"];
+}