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

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

@@ -1,35 +1,38 @@
 /**
- * The grouped list sections' shared pieces: the headline counts, one row, and
- * the key hints.
+ * The resource row: the one row grammar Extensions and Skills share.
  *
- * 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.
+ * A row is a checkbox, a status glyph, the resource's name, and one verdict word.
+ * A clean row carries no glyph and no word, so the column reads as one shape
+ * instead of a checkmark that comes and goes, and the eye finds the rows that
+ * need it.
+ *
+ * Pure: the theme, the width and the model row come in, one clipped line comes out.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { sanitizeLine } from "../../../../lib/format.ts";
-import type { ScreenHint } from "../../../../lib/tui/chrome.ts";
+import { clip, padTo } from "../../../../lib/tui/columns.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";
+import { rowBadge } from "../format.ts";
+import type { PanelRow } from "../types.ts";
+
+/** Columns the verdict keeps before the name is clipped instead. */
+const MIN_VERDICT_WIDTH = 9;
 
-/** 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 }));
+/** The widest verdict the visible rows carry, so the column lines up. */
+export function verdictColumn(rows: readonly PanelRow[]): number {
+	return rows.reduce((columns, row) => Math.max(columns, (rowBadge(row).text ?? "").length), 0);
 }
 
-/** One resource row: its checkbox, verdict, and name. */
-export function resourceRow(theme: Theme, width: number, row: PanelRow, selected: boolean): string {
+/** One resource row: its checkbox, verdict glyph, name, and verdict word. */
+export function resourceRow(theme: Theme, width: number, row: PanelRow, selected: boolean, verdicts = 0): string {
 	const badge = rowBadge(row);
+	const name = sanitizeLine(row.label);
+	// The verdict sits in its own column instead of against the name, so a column
+	// of rows can be read down rather than across; a long name loses its tail
+	// before the verdict loses its word.
+	const room = Math.max(MIN_VERDICT_WIDTH, Math.min(verdicts, Math.max(0, width - 22)));
+	const nameCell = verdicts > 0 ? padTo(clip(name, Math.max(1, width - 22)), room) : name;
 	return listRow(theme, width, {
 		selected,
 		// A reported-only row has no enable pattern, but still reserves the box
@@ -37,36 +40,12 @@ export function resourceRow(theme: Theme, width: number, row: PanelRow, selected
 		leading: row.item ? checkbox(theme, row.item.enabled) : " ",
 		glyph: badge.glyph ?? " ",
 		glyphRole: badge.role,
-		label: sanitizeLine(row.label),
+		label: nameCell,
 		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/panes.ts

@@ -0,0 +1,76 @@
+/**
+ * The two-pane split: where the side pane starts, how wide each side is, and how
+ * one row of each is laid on one terminal line.
+ *
+ * Above the breakpoint the focused row's facts sit beside the list; below it the
+ * frame keeps the single column and the facts move under the list. The side lines
+ * are *composed onto* the list's lines rather than appended, so the two panes cost
+ * exactly the rows the list already spends — the frame's row budget is the same at
+ * every width.
+ *
+ * Value-only: pure functions, the theme passed in.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { clip, padTo } from "../../../../lib/tui/columns.ts";
+import { GLYPHS } from "../../../../lib/tui/glyphs.ts";
+import { paint } from "../../../../lib/tui/tokens.ts";
+
+/** The narrowest terminal that gets a side pane. */
+export const WIDE_MIN = 96;
+
+/** The side pane's width bounds, in columns. */
+export const SIDE_MIN = 36;
+export const SIDE_MAX = 56;
+
+/** Columns between the list and the side pane, on each side of the divider. */
+const GAP = 1;
+
+/** Whether this width gets a side pane. */
+export function isWide(width: number): boolean {
+	return width >= WIDE_MIN;
+}
+
+/**
+ * The side pane's width: two fifths of the terminal, clamped. Reading the list
+ * and its facts at the same height is the point, so the side never grows past
+ * what keeps a row and its verdict readable on the left.
+ */
+export function sideWidth(width: number): number {
+	return Math.max(SIDE_MIN, Math.min(SIDE_MAX, Math.floor(width * 0.42)));
+}
+
+/** The columns the list keeps, divider and gaps included in the accounting. */
+export function listWidth(width: number): number {
+	return Math.max(1, width - sideWidth(width) - GAP * 2 - 1);
+}
+
+/**
+ * Compose one line pair: the list row padded to its column, the divider, and the
+ * side row. A pair with no side content still draws the divider, so the pane keeps
+ * one edge down the body instead of appearing and disappearing row by row.
+ */
+export function composeRow(theme: Theme, width: number, list: string, side: string): string {
+	const left = padTo(clip(list, listWidth(width)), listWidth(width));
+	const divider = paint(theme, "rule", GLYPHS.divider);
+	const room = Math.max(0, width - listWidth(width) - GAP * 2 - 1);
+	return clip(`${left}${" ".repeat(GAP)}${divider}${" ".repeat(GAP)}${clip(side, room)}`, width);
+}
+
+/** Compose a body of list rows with a side pane, one line pair per row. */
+export function composeRows(theme: Theme, width: number, list: readonly string[], side: readonly string[]): string[] {
+	return list.map((line, index) => composeRow(theme, width, line, side[index] ?? ""));
+}
+
+/**
+ * Cut the side block to the rows it has, keeping the reader informed: the last row
+ * says how many lines are left out, which is the same convention the JSON pane uses.
+ */
+export function clipRows(rows: readonly string[], budget: number, width: number): string[] {
+	const room = Math.max(0, Math.floor(budget));
+	if (rows.length <= room) return [...rows];
+	if (room === 0) return [];
+	const kept = rows.slice(0, room - 1);
+	const hidden = rows.length - kept.length;
+	return [...kept, clip(`… ${hidden} more line${hidden === 1 ? "" : "s"}`, width)];
+}

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

@@ -0,0 +1,126 @@
+/**
+ * What the sections show, derived from the session's sources: the counts on the
+ * tabs, the one body height they share, the attention in the header, the filter
+ * chips, and the merged model the rows are drawn from.
+ *
+ * One module because these are one question asked five ways — "what is on this
+ * screen, and what does it add up to" — and because the component should be left
+ * with the state it mutates and the keys it reads, not the arithmetic over it.
+ *
+ * Pure: the source is handed in, no host is touched, and nothing is cached.
+ */
+
+import type { ExtensionReport } from "../../../../lib/requirements.ts";
+import { filterChips, isFiltering, rowMatches, type PanelFilter } from "../filter.ts";
+import { attentionSegments, panelCounts, type SummarySegment } from "../format.ts";
+import { buildPanelModel, buildSkillModel, groupedEntryCount } from "../join.ts";
+import type { ResourceItem, ResourceKind, WriteScope } from "../../picker/types.ts";
+import type { SettingsSurface } from "../settings-runtime.ts";
+import type { PanelModel, PanelRow, PanelSection, SkillInfo } from "../types.ts";
+import { settingEntries } from "./entries.ts";
+
+/** Everything the screen derives its content from. */
+export interface ViewSource {
+	/** The write scope the settings rows are read in. */
+	scope: WriteScope;
+	/** The resolved resources of one kind. */
+	items(kind: ResourceKind): readonly ResourceItem[];
+	/** The current doctor reports. */
+	reports(): readonly ExtensionReport[];
+	/** The settings surface, for its rows. */
+	settings: SettingsSurface;
+	/** The agent directory the resource groups are labelled from. */
+	agentDir: string;
+	/** What the reader narrowed the rows to. */
+	filter: PanelFilter;
+	/** The extension the command narrowed to, if it named one. */
+	commandFilter?: string;
+	/** Something was changed this session. */
+	dirty: boolean;
+}
+
+/**
+ * The merged model for a list section. `filtered` off skips the reader's filter,
+ * which is what the header's attention counts need: narrowing the list must not
+ * hide a problem.
+ */
+export function modelFor(
+	source: ViewSource,
+	kind: ResourceKind,
+	skills: () => ReadonlyMap<string, SkillInfo>,
+	filtered = true,
+): PanelModel {
+	const where = filtered && isFiltering(source.filter) ? (row: PanelRow) => rowMatches(row, source.filter) : undefined;
+	if (kind === "skills") {
+		return buildSkillModel({ items: source.items("skills"), index: skills(), agentDir: source.agentDir, where });
+	}
+	return buildPanelModel({
+		items: source.items("extensions"),
+		reports: source.reports(),
+		agentDir: source.agentDir,
+		filter: source.commandFilter,
+		where,
+	});
+}
+
+/**
+ * The section sizes the tabs print: the resources each section holds. They count
+ * what the section has, not what a filter left, so a tab does not shrink while
+ * another section is being narrowed.
+ */
+export function sectionCounts(source: ViewSource): Record<PanelSection, number> {
+	return {
+		extensions: source.items("extensions").length,
+		skills: source.items("skills").length,
+		settings: source.settings.views(source.scope).length,
+	};
+}
+
+/**
+ * The tallest section's entry count, group headings included. All three sections
+ * pad their body to it, which is what keeps the dock from resizing when the tabs
+ * change. Counted through `groupedEntryCount`, so measuring Skills never reads a
+ * `SKILL.md`.
+ */
+export function tallestBody(source: ViewSource): number {
+	const lists = (["extensions", "skills"] as const).map((kind) =>
+		groupedEntryCount(source.items(kind), source.agentDir, kind),
+	);
+	const settings = settingEntries(source.settings.views(source.scope)).length;
+	return Math.max(1, ...lists, settings);
+}
+
+/** The header's attention, over every extension rather than the filter. */
+export function attentionFor(source: ViewSource): SummarySegment[] {
+	return attentionSegments(panelCounts(modelFor(source, "extensions", () => new Map(), false)), source.dirty);
+}
+
+/** The chips the tab row shows: the filter editor while open, else what applies. */
+export function chipsFor(
+	source: ViewSource,
+	section: PanelSection,
+	editing: { buffer: string } | undefined,
+): SummarySegment[] {
+	if (editing !== undefined) return [{ text: `/${editing.buffer}▏`, color: "accent" }];
+	const chips = filterChips(source.filter, section === "settings" ? "settings" : "rows");
+	// The command's own narrowing (`/bytefly plan`) is a filter the reader did not
+	// ask for this time, so the tab row says why the list is short.
+	if (source.commandFilter !== undefined && section === "extensions") {
+		chips.unshift({ text: `${source.commandFilter} only`, color: "meta" });
+	}
+	return chips;
+}
+
+/** The line a section shows in place of its body. */
+export function emptyLabelFor(filter: PanelFilter, section: PanelSection): string {
+	if (isFiltering(filter)) return "Nothing matches the filter.";
+	if (section === "skills") return "No skills found.";
+	if (section === "settings") return "No settings found.";
+	return "No extensions found.";
+}
+
+/** The group heading a row sits under, for the block's `Source` fact. */
+export function groupLabelFor(model: PanelModel | undefined, row: PanelRow | undefined): string | undefined {
+	if (model === undefined || row === undefined) return undefined;
+	return model.groups.find((group) => group.key === row.group)?.label;
+}

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;
-	}
 }