@gavin-hu/my-pi-agent 0.16.0 → 0.17.0

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

@@ -19,6 +19,7 @@ import {
 import { clip, fitCells, splitRow } from "../../../../lib/tui/columns.ts";
 import { fitRows, formatRange, type ListCursor } from "../../../../lib/tui/cursor.ts";
 import { BODY_INDENT } from "../../../../lib/tui/indent.ts";
+import { emptyState } from "../../../../lib/tui/rows.ts";
 import { paint } from "../../../../lib/tui/tokens.ts";
 import { sectionSegments, type SummarySegment } from "../format.ts";
 import type { PanelSection } from "../types.ts";
@@ -26,7 +27,7 @@ import { selectableRange, type PanelEntry } from "./entries.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. */
+/** Fixed rows around the body: header, summary, blank, blank, hint, closing rule. */
 export const FRAME_ROWS = 6;
 /** Detail rows reserved for the focused row: its head, one description line, and its origin. */
 export const DETAIL_ROWS = 3;
@@ -142,6 +143,8 @@ export interface PanelFrameInput {
 	note?: string;
 	detail: string[];
 	hint: string;
+	/** The line a section shows in place of its body when it has no entries. */
+	emptyLabel?: string;
 	draw: (entry: PanelEntry, index: number) => string | undefined;
 }
 
@@ -164,6 +167,9 @@ export function panelFrame(input: PanelFrameInput): { lines: string[]; noteShown
 
 	const body: string[] = [];
 	if (note) body.push(note);
+	if (entries.length === 0 && input.emptyLabel !== undefined) {
+		body.push(...emptyState(theme, width, { label: input.emptyLabel }));
+	}
 	for (let index = start; index < end; index += 1) {
 		const line = draw(entries[index], index);
 		if (line !== undefined) body.push(line);
@@ -175,6 +181,8 @@ export function panelFrame(input: PanelFrameInput): { lines: string[]; noteShown
 	const fitted = fitOptionalLines({ viewportRows, body, note, range, detail });
 	return {
 		lines: dockListFrame({
+			theme,
+			width,
 			header: input.header,
 			summary: input.summary,
 			body: fitted.body,

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

@@ -0,0 +1,72 @@
+/**
+ * The grouped list sections' shared pieces: the headline counts, one row, and
+ * the key hints.
+ *
+ * Extensions and Skills draw the same row grammar — a checkbox, a verdict, and
+ * the resource's name — and offer the same keys, so the row, the summary, and
+ * the hint row live here and each section supplies only what it can say about
+ * the focused row and whether it has anything to refresh.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { sanitizeLine } from "../../../../lib/format.ts";
+import type { ScreenHint } from "../../../../lib/tui/chrome.ts";
+import { checkbox, listRow } from "../../../../lib/tui/rows.ts";
+import { rowBadge, type PanelScope, summarySegments, type SummaryOptions } from "../format.ts";
+import type { PanelModel, PanelRow } from "../types.ts";
+import { countsLine } from "./frame.ts";
+
+/** The section's headline: the scope, the row count, and what is off. */
+export function resourceSummary(
+	theme: Theme,
+	width: number,
+	model: PanelModel,
+	scope: PanelScope,
+	options: SummaryOptions = {},
+): string {
+	return countsLine(theme, width, summarySegments(model, scope, { ...options, compact: width < 72 }));
+}
+
+/** One resource row: its checkbox, verdict, and name. */
+export function resourceRow(theme: Theme, width: number, row: PanelRow, selected: boolean): string {
+	const badge = rowBadge(row);
+	return listRow(theme, width, {
+		selected,
+		// A reported-only row has no enable pattern, but still reserves the box
+		// column so the list stays aligned.
+		leading: row.item ? checkbox(theme, row.item.enabled) : " ",
+		glyph: badge.glyph ?? " ",
+		glyphRole: badge.role,
+		label: sanitizeLine(row.label),
+		labelRole: selected ? "accent" : row.item && !row.item.enabled ? "faint" : "label",
+		trailing: badge.text,
+		// The glyph carries the status colour; the word stays quiet unless it is a
+		// problem, so a clean row does not shout.
+		trailingRole: badge.role === "bad" || badge.role === "warn" ? badge.role : "faint",
+		// The verdict sits beside the name instead of at the far edge of a wide
+		// terminal, where a two-word verdict would be unreadable.
+		align: "inline",
+	});
+}
+
+export interface SectionHintOptions {
+	expanded: boolean;
+	projectScope: boolean;
+	/** The refresh key's state; omitted by a section with nothing to refresh. */
+	refreshing?: boolean;
+}
+
+/** The section's key hints, in the order they drop as the width runs out. */
+export function sectionHints({ expanded, projectScope, refreshing }: SectionHintOptions): ScreenHint[] {
+	return [
+		"Esc close",
+		"←/→",
+		{ text: "Space toggle", color: "accent" },
+		{ text: expanded ? "Enter collapse" : "Enter detail", color: "accent" },
+		"Tab scope",
+		// Only Project scope can hold an override, so the key is not offered elsewhere.
+		...(projectScope ? ["x inherit"] : []),
+		...(refreshing === undefined ? [] : [refreshing ? "refreshing…" : "r refresh"]),
+		"↑/↓ select",
+	];
+}

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

@@ -1,7 +1,7 @@
 /**
- * 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.
+ * Cursor arithmetic for the panel's lists: keep the focus on a row across a
+ * rebuild, land on the nearest row when the shape changes, move by rows while
+ * skipping group headers, and read one navigation key.
  *
  * 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
@@ -9,6 +9,7 @@
  */
 
 import type { ListCursor } from "../../../../lib/tui/cursor.ts";
+import { navIntent } 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. */
@@ -73,3 +74,70 @@ export function moveRows(entries: PanelEntry[], cursor: ListCursor, delta: numbe
 	}
 	cursor.set(index, entries.length);
 }
+
+/** Move to the first row of the next (or previous) group. */
+export function jumpGroup(entries: PanelEntry[], cursor: ListCursor, direction: -1 | 1): void {
+	const headers = entries.flatMap((entry, index) => (entry.kind === "group" ? [index] : []));
+	const selected = cursor.selected;
+	// Step past the focused row's own header: landing on it would not move.
+	const own = headers.filter((index) => index < selected).at(-1);
+	const target =
+		direction === 1 ? headers.find((index) => index > selected) : headers.filter((index) => index < (own ?? 0)).at(-1);
+	if (target === undefined) return;
+	for (let index = target + 1; index < entries.length; index += 1) {
+		if (isSelectable(entries[index])) {
+			cursor.set(index, entries.length);
+			return;
+		}
+	}
+}
+
+/** Move the cursor to `index`, clamped to the list. */
+export function selectRow(entries: PanelEntry[], cursor: ListCursor, index: number | undefined): void {
+	if (index === undefined) return;
+	cursor.set(index, entries.length);
+}
+
+/**
+ * Read one navigation key against a list. `grouped` is true for the resource
+ * lists, whose headings the bracket keys jump between; the Settings list is flat.
+ */
+export function navigateEntries(
+	entries: PanelEntry[],
+	cursor: ListCursor,
+	data: string,
+	options: { grouped: boolean },
+): void {
+	if (data === "g") {
+		selectRow(entries, cursor, firstRow(entries));
+		return;
+	}
+	if (data === "G") {
+		selectRow(entries, cursor, lastRow(entries));
+		return;
+	}
+	if (options.grouped && (data === "[" || data === "]")) {
+		jumpGroup(entries, cursor, data === "[" ? -1 : 1);
+		return;
+	}
+	switch (navIntent(data)) {
+		case "up":
+			moveRows(entries, cursor, -1);
+			return;
+		case "down":
+			moveRows(entries, cursor, 1);
+			return;
+		case "pageUp":
+			moveRows(entries, cursor, -Math.max(1, cursor.visible));
+			return;
+		case "pageDown":
+			moveRows(entries, cursor, Math.max(1, cursor.visible));
+			return;
+		case "home":
+			selectRow(entries, cursor, firstRow(entries));
+			return;
+		case "end":
+			selectRow(entries, cursor, lastRow(entries));
+			return;
+	}
+}

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

@@ -0,0 +1,250 @@
+/**
+ * The Settings section: its own state (the editor and the JSON pane), its key
+ * handling, and the screen it draws.
+ *
+ * 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.
+ */
+
+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 type { SettingsSurface } from "../settings-runtime.ts";
+import { SETTING_ROWS } 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;
+	scope(): WriteScope;
+	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. */
+	navigate(data: string): void;
+	/** Flip the Global/Project scope. */
+	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. */
+export class SettingsSection {
+	private chain: Promise<void> = Promise.resolve();
+	private editing: EditingState | undefined;
+	private json = false;
+
+	constructor(private readonly deps: SettingsSectionDeps) {}
+
+	/** Whether a text row is open in the editor, so the hint row and mouse defer. */
+	get isEditing(): boolean {
+		return this.editing !== undefined;
+	}
+
+	/** Whether the detail pane shows the focused row's section as JSON. */
+	get jsonOpen(): boolean {
+		return this.json;
+	}
+
+	/** Run `task` after the previous write, then repaint once. */
+	private write(task: () => Promise<unknown>, onSettled?: (result: unknown) => void): void {
+		this.chain = this.chain
+			.then(task)
+			.then(onSettled)
+			.catch((error: unknown) => this.deps.notify(error instanceof Error ? error.message : String(error)))
+			.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 focused entry, after clamping the cursor onto a row. */
+	private focused(): PanelEntry | undefined {
+		const entries = this.entries();
+		clampSelection(entries, this.deps.cursor);
+		return entries[this.deps.cursor.selected];
+	}
+
+	/** Drop the editor and the JSON pane when another section takes over. */
+	reset(): void {
+		this.editing = undefined;
+		this.json = false;
+	}
+
+	/** A click leaves the editor the way `Esc` does: nothing is written. */
+	cancelEdit(): void {
+		this.reset();
+		this.deps.requestRender();
+	}
+
+	/** 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;
+		if (view.kind === "text") {
+			this.editing = { id: view.id, buffer: view.value, caret: view.value.length };
+			this.deps.requestRender();
+			return;
+		}
+		const scope = this.deps.scope();
+		this.write(() => this.deps.surface.change(scope, view.id));
+	}
+
+	/** Delete the focused setting's leaf, so its default applies again. */
+	private resetSetting(): void {
+		const entry = this.focused();
+		if (entry?.kind !== "setting") return;
+		const scope = this.deps.scope();
+		this.write(() => this.deps.surface.reset(scope, entry.setting.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) {
+			// 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.`);
+			return;
+		}
+		this.json = !this.json;
+		this.deps.requestRender();
+	}
+
+	/** Store the editor's buffer; a refusal keeps it open with the reason shown. */
+	private commitEdit(): void {
+		const editing = this.editing;
+		if (!editing) return;
+		const scope = this.deps.scope();
+		this.write(
+			() => this.deps.surface.setValue(scope, editing.id, editing.buffer),
+			(saved) => {
+				if (saved === true) this.editing = undefined;
+			},
+		);
+	}
+
+	/**
+	 * 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 {
+		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();
+			return;
+		}
+		if (action.kind === "cancel") {
+			this.editing = undefined;
+			this.deps.requestRender();
+			return;
+		}
+		if (!action.changed) return;
+		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/skills-view.ts

@@ -0,0 +1,50 @@
+/**
+ * The Skills section: the focused skill's path, description, and refusal.
+ *
+ * Rows, the summary, and the key hints come from the shared list view, and the
+ * row verdict is already `rowBadge`'s. The pane therefore starts with what the
+ * row cannot say: the resolved file and what its frontmatter declares, or why Pi
+ * refused it. Pure functions over the merged row; the component owns the cursor,
+ * the scope, and the expansion.
+ */
+
+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 { paint } from "../../../../lib/tui/tokens.ts";
+import type { PanelRow } from "../types.ts";
+import { INDENT, savedLine } from "./frame.ts";
+
+/** The focused skill's file, description (or refusal), and pending changes. */
+export function skillDetail(options: {
+	theme: Theme;
+	width: number;
+	row: PanelRow | undefined;
+	budget: number;
+	expanded: boolean;
+	dirty: boolean;
+}): string[] {
+	const { theme, width, row, budget, expanded, dirty } = options;
+	// The focused row above already carries the name and verdict, so the pane
+	// starts with the file it resolves to.
+	const lines: string[] = [];
+	if (row?.item) lines.push(clip(`${INDENT}${paint(theme, "meta", sanitizeLine(row.item.path))}`, width));
+	const saved = savedLine(theme, width, dirty);
+	const skill = row?.skill;
+	const text = skill?.problem !== undefined ? `Not loaded: ${skill.problem}` : skill?.description;
+	if (text && budget > 1) {
+		// One line while collapsed, the whole wrapped description when expanded,
+		// minus the file line already pushed and the saved marker below it.
+		const available = Math.max(0, budget - lines.length - saved.length);
+		const room = expanded ? available : Math.min(1, available);
+		const bodyWidth = Math.max(1, width - BODY_INDENT);
+		const role = skill?.problem !== undefined ? "warn" : "meta";
+		for (const line of wrapTextWithAnsi(sanitizeLine(text), bodyWidth).slice(0, room)) {
+			lines.push(clip(`${INDENT}${paint(theme, role, line)}`, width));
+		}
+	}
+	lines.push(...saved);
+	return lines;
+}