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

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

@@ -7,6 +7,7 @@
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { ScreenHint } from "../../../../lib/tui/chrome.ts";
 import { sanitizeLine } from "../../../../lib/format.ts";
 import { clip } from "../../../../lib/tui/columns.ts";
 import { checkbox, listRow } from "../../../../lib/tui/rows.ts";
@@ -46,7 +47,7 @@ export function extensionRow(theme: Theme, width: number, row: PanelRow, selecte
 	});
 }
 
-/** The focused extension's label, findings, and the pending-changes note. */
+/** The focused extension's findings and the pending-changes note. */
 export function extensionDetail(
 	theme: Theme,
 	width: number,
@@ -57,10 +58,10 @@ export function extensionDetail(
 ): string[] {
 	const lines: string[] = [];
 	const badge = row ? rowBadge(row) : undefined;
-	if (row && badge?.text !== undefined) {
-		const head = `${paint(theme, "meta", sanitizeLine(row.label))} ${paint(theme, "faint", "—")} ${paint(theme, badge.role, badge.text)}`;
-		lines.push(clip(`  ${head}`, width));
-	} else if (row?.item) {
+	// The focused row directly above already carries the entry's name and verdict,
+	// so the pane starts with what the row cannot say: the findings, or the
+	// resource path when nothing was reported.
+	if (badge?.text === undefined && row?.item) {
 		lines.push(clip(`  ${paint(theme, "meta", sanitizeLine(row.item.path))}`, width));
 	}
 	if (row?.report && budget > 0) {
@@ -71,12 +72,16 @@ export function extensionDetail(
 }
 
 /** The section's key hints, in the order they drop as the width runs out. */
-export function extensionHints(options: { expanded: boolean; refreshing: boolean; projectScope: boolean }): string[] {
+export function extensionHints(options: {
+	expanded: boolean;
+	refreshing: boolean;
+	projectScope: boolean;
+}): ScreenHint[] {
 	return [
 		"Esc close",
 		"←/→",
-		"Space toggle",
-		options.expanded ? "Enter collapse" : "Enter detail",
+		{ text: "Space toggle", color: "accent" },
+		{ text: options.expanded ? "Enter collapse" : "Enter detail", color: "accent" },
 		"Tab scope",
 		// Only Project scope can hold an override, so the key is not offered elsewhere.
 		...(options.projectScope ? ["x inherit"] : []),

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

@@ -1,6 +1,7 @@
 /**
  * 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.
+ * its counts, a group heading, the hint row that a transient notice replaces, and
+ * the frame the two sections share.
  *
  * Every section draws its body through these, so the two views cannot drift on
  * spacing, roles, or the width arithmetic.
@@ -8,12 +9,20 @@
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { sanitizeLine } from "../../../../lib/format.ts";
-import { screenHint } from "../../../../lib/tui/chrome.ts";
+import {
+	detailBlockRows,
+	dockListFrame,
+	screenHint,
+	type ScreenHint,
+	type ViewportRowsSource,
+} from "../../../../lib/tui/chrome.ts";
 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 { paint } from "../../../../lib/tui/tokens.ts";
 import { sectionSegments, type SummarySegment } from "../format.ts";
 import type { PanelSection } from "../types.ts";
+import { selectableRange, type PanelEntry } from "./entries.ts";
 
 /** Body rows when the terminal height is unknown. */
 export const SCREEN_DEFAULT_ROWS = 16;
@@ -54,8 +63,8 @@ export function groupLine(theme: Theme, width: number, entry: { label: string; c
 	return clip(`  ${label} ${count}`, width);
 }
 
-/** The key-hint row. */
-export function hintLine(theme: Theme, width: number, hints: string[]): string {
+/** The key-hint row, or a section's notice that replaces it. */
+export function hintLine(theme: Theme, width: number, hints: ScreenHint[]): string {
 	return screenHint(theme, width, hints);
 }
 
@@ -69,3 +78,111 @@ export function savedLine(theme: Theme, width: number, dirty: boolean): string[]
 	if (!dirty) return [];
 	return [clip(`${INDENT}${paint(theme, "warn", "Saved · reload to apply")}`, width)];
 }
+
+/** Terminal rows, or `undefined` when the height is unknown. */
+export function totalRows(source: ViewportRowsSource | undefined): number | undefined {
+	const rows = typeof source === "function" ? source() : source;
+	return rows !== undefined && Number.isFinite(rows) && rows > 0 ? rows : undefined;
+}
+
+/**
+ * Detail rows the focused row gets: the fixed pane, or the free height when
+ * expanded. Zero when there is no free row for a pane at all, so a short
+ * terminal keeps its body; the caller then drops optional rows if needed.
+ */
+export function detailRows(expanded: boolean, viewportRows: ViewportRowsSource | undefined): number {
+	const total = totalRows(viewportRows);
+	if (total === undefined) return expanded ? EXPANDED_DETAIL_FALLBACK : DETAIL_ROWS;
+	// One row pays for the blank line the frame puts above the pane.
+	const available = total - FRAME_ROWS - MIN_BODY_ROWS - 1;
+	if (available < 1) return 0;
+	return expanded ? available : Math.min(DETAIL_ROWS, available);
+}
+
+/**
+ * Drop optional rows until the frame fits the viewport: the range row first,
+ * then the project note, then the blank above the detail pane, then the pane.
+ * The header, summary, one body row, and the hint always survive; a terminal
+ * shorter than those is left to the host.
+ */
+export function fitOptionalLines(options: {
+	viewportRows: ViewportRowsSource | undefined;
+	body: string[];
+	note: string | undefined;
+	range: string | undefined;
+	detail: string[];
+}): { body: string[]; range: string | undefined; detail: string[]; noteShown: boolean; detailBlank: boolean } {
+	const total = totalRows(options.viewportRows);
+	let { body, range, detail } = options;
+	let noteShown = options.note !== undefined && body[0] === options.note;
+	if (total === undefined) return { body, range, detail, noteShown, detailBlank: true };
+	const fits = (blank: boolean): boolean =>
+		FRAME_ROWS + body.length + (range === undefined ? 0 : 1) + detailBlockRows(detail, blank) <= total;
+	if (!fits(true)) range = undefined;
+	if (!fits(true) && noteShown) {
+		body = body.slice(1);
+		noteShown = false;
+	}
+	// The separator goes before the pane does: the focused row's findings are
+	// worth more than the blank above them.
+	const detailBlank = fits(true) || !fits(false);
+	if (!fits(false)) detail = [];
+	return { body, range, detail, noteShown, detailBlank };
+}
+
+/** What {@link panelFrame} draws: the window, the body, and the chrome around it. */
+export interface PanelFrameInput {
+	theme: Theme;
+	viewportRows: ViewportRowsSource | undefined;
+	cursor: ListCursor;
+	width: number;
+	header: string;
+	summary: string;
+	entries: readonly PanelEntry[];
+	note?: string;
+	detail: string[];
+	hint: string;
+	draw: (entry: PanelEntry, index: number) => string | undefined;
+}
+
+/**
+ * The frame both sections share: the cursor window, the visible body rows, the
+ * range row, the optional rows that give way on a short terminal, and the
+ * chrome around them. Each section supplies its summary, its detail pane, its
+ * hint row, and how one entry is drawn.
+ */
+export function panelFrame(input: PanelFrameInput): { lines: string[]; noteShown: boolean } {
+	const { theme, viewportRows, cursor, width, entries, note, detail, hint, draw } = input;
+	cursor.visible = fitRows(
+		viewportRows,
+		entries.length,
+		FRAME_ROWS + detailBlockRows(detail) + (note ? 1 : 0),
+		SCREEN_DEFAULT_ROWS,
+	);
+	cursor.sync(entries.length);
+	const { start, end } = cursor.window(entries.length);
+
+	const body: string[] = [];
+	if (note) body.push(note);
+	for (let index = start; index < end; index += 1) {
+		const line = draw(entries[index], index);
+		if (line !== undefined) body.push(line);
+	}
+
+	const range = cursor.clipped(entries.length)
+		? formatRange(theme, width, selectableRange(entries, { start, end }))
+		: undefined;
+	const fitted = fitOptionalLines({ viewportRows, body, note, range, detail });
+	return {
+		lines: dockListFrame({
+			header: input.header,
+			summary: input.summary,
+			body: fitted.body,
+			range: fitted.range,
+			detail: fitted.detail.length > 0 ? fitted.detail : undefined,
+			detailBlank: fitted.detailBlank,
+			hint,
+		}),
+		noteShown: fitted.noteShown,
+	};
+}

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",
 	});
 }
@@ -57,9 +87,10 @@ export function projectNote(theme: Theme, width: number): string {
 }
 
 /** 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 {
+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);
@@ -105,8 +136,62 @@ export function settingDetail(options: {
 }
 
 /** 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"];
+export function settingsHints(json = false): string[] {
+	return [
+		"Esc close",
+		"←/→",
+		"Space change",
+		"Tab scope",
+		"u reset",
+		json ? "J hide" : "J JSON",
+		"[ ] group",
+		"↑/↓ 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;
 }
 
 /** The editor's key hints: `Esc` cancels the edit, it does not close the screen. */