@ferris1225/pi-subagents 4.3.2 → 4.3.3

package/src/ui.ts

@@ -1,17 +1,4 @@
-/**
- * TUI pickers for /subagents-setup, built on @earendil-works/pi-tui.
- *
- * A single self-contained `Picker` component powers both selectors:
- *   - single-select (model picker): type to fuzzy-filter, arrows to move,
- *     PageUp/PageDown to page, Enter to choose, Esc to cancel.
- *   - multi-select (module picker): same navigation, Space toggles a checkbox,
- *     Enter confirms the selection set.
- *
- * pi-tui's built-in SelectList only handles up/down/confirm/cancel (no paging),
- * so we render the list ourselves and drive it with getKeybindings(). Every line
- * is passed through truncateToWidth() — pi hard-crashes if a rendered line is
- * wider than the terminal.
- */
+/** Searchable, width-safe model picker used inside /subagents-setup. */
 
 import {
 	fuzzyFilter,
@@ -22,40 +9,29 @@ import {
 	type SelectItem,
 	type TUI,
 } from "@earendil-works/pi-tui";
-import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-
-/** The slice of the extension context the pickers need (mode + ui), so both
- * command handlers (ExtensionCommandContext) and tool execute handlers
- * (ExtensionContext) can use them. */
-export type PickerContext = Pick<ExtensionCommandContext, "mode" | "ui">;
 
 /** Rows shown at once; longer lists are reached with PageUp/PageDown. */
-export const PAGE_SIZE = 8;
-
-export interface PickerStyles {
-	border: (t: string) => string;
-	title: (t: string) => string;
-	hint: (t: string) => string;
-	cursorMark: (t: string) => string;
-	selectedLabel: (t: string) => string;
-	label: (t: string) => string;
-	dim: (t: string) => string;
-	checked: (t: string) => string;
-	unchecked: (t: string) => string;
-	filterEcho: (t: string) => string;
+const PAGE_SIZE = 8;
+
+interface PickerStyles {
+	border: (text: string) => string;
+	title: (text: string) => string;
+	hint: (text: string) => string;
+	cursorMark: (text: string) => string;
+	selectedLabel: (text: string) => string;
+	label: (text: string) => string;
+	dim: (text: string) => string;
+	filterEcho: (text: string) => string;
 }
 
-export type PickerItem = SelectItem;
+type PickerItem = SelectItem;
 
-export function pickerItemSearchText(item: PickerItem): string {
+function pickerItemSearchText(item: PickerItem): string {
 	return `${item.value} ${item.label} ${item.description ?? ""}`;
 }
 
 interface PickerCallbacks {
-	/** single-select: fired with the highlighted value on Enter. */
-	onSelect?: (value: string) => void;
-	/** multi-select: fired with the full chosen set on Enter. */
-	onConfirm?: (values: string[]) => void;
+	onSelect: (value: string) => void;
 	onCancel: () => void;
 }
 
@@ -67,64 +43,59 @@ export class Picker implements Component, Focusable {
 
 	constructor(
 		private readonly items: PickerItem[],
-		private readonly multi: boolean,
-		private readonly selected: Set<string>,
 		private readonly styles: PickerStyles,
 		private readonly headerLines: string[],
 		private readonly tui: TUI,
 		private readonly keybindings: KeybindingsManager,
-		private readonly cb: PickerCallbacks,
+		private readonly callbacks: PickerCallbacks,
 		initialValue?: string,
 	) {
 		this.filtered = items;
-		const initialIndex = initialValue === undefined ? -1 : items.findIndex((item) => item.value === initialValue);
+		const initialIndex = initialValue === undefined
+			? -1
+			: items.findIndex((item) => item.value === initialValue);
 		if (initialIndex >= 0) this.cursor = initialIndex;
 	}
 
 	get focused(): boolean {
 		return this._focused;
 	}
+
 	set focused(value: boolean) {
 		this._focused = value;
 	}
 
 	private recompute(): void {
-		const q = this.query.trim();
-		this.filtered = q ? fuzzyFilter(this.items, q, pickerItemSearchText) : this.items;
+		const query = this.query.trim();
+		this.filtered = query ? fuzzyFilter(this.items, query, pickerItemSearchText) : this.items;
 		this.cursor = Math.max(0, Math.min(this.cursor, this.filtered.length - 1));
 	}
 
 	render(width: number): string[] {
-		const s = this.styles;
 		const fit = (line: string): string => truncateToWidth(line, width, "");
-		const border = fit(s.border("─".repeat(Math.max(1, width))));
-
-		const lines: string[] = [border];
-		for (const h of this.headerLines) lines.push(fit(h));
-		lines.push(fit(this.query ? s.filterEcho(`filter: ${this.query}`) : s.dim("filter: (type to narrow)")));
+		const border = fit(this.styles.border("─".repeat(Math.max(1, width))));
+		const lines = [border, ...this.headerLines.map(fit)];
+		lines.push(fit(this.query
+			? this.styles.filterEcho(`filter: ${this.query}`)
+			: this.styles.dim("filter: (type to narrow)")));
 		lines.push(border);
 
 		if (this.filtered.length === 0) {
-			lines.push(fit(s.dim("  (no matches)")));
+			lines.push(fit(this.styles.dim("  (no matches)")));
 		} else {
 			const start = Math.max(
 				0,
 				Math.min(this.cursor - Math.floor(PAGE_SIZE / 2), this.filtered.length - PAGE_SIZE),
 			);
-			const visible = this.filtered.slice(start, start + PAGE_SIZE);
-			for (let i = 0; i < visible.length; i++) {
-				const item = visible[i];
-				const isCursor = start + i === this.cursor;
-				const mark = isCursor ? s.cursorMark("❯ ") : "  ";
-				const label = isCursor ? s.selectedLabel(item.label) : s.label(item.label);
-				const description = item.description ? s.dim(` — ${item.description}`) : "";
-				const line = this.multi
-					? mark + (this.selected.has(item.value) ? s.checked("[x] ") : s.unchecked("[ ] ")) + label + description
-					: mark + label + description;
-				lines.push(fit(line));
+			for (const [index, item] of this.filtered.slice(start, start + PAGE_SIZE).entries()) {
+				const isCursor = start + index === this.cursor;
+				const mark = isCursor ? this.styles.cursorMark("❯ ") : "  ";
+				const label = isCursor ? this.styles.selectedLabel(item.label) : this.styles.label(item.label);
+				const description = item.description ? this.styles.dim(` — ${item.description}`) : "";
+				lines.push(fit(mark + label + description));
 			}
-			const more = this.filtered.length > PAGE_SIZE ? "  ↑/↓ move • PgUp/PgDn page" : "";
-			lines.push(fit(s.dim(`  (${this.cursor + 1}/${this.filtered.length})${more}`)));
+			const paging = this.filtered.length > PAGE_SIZE ? "  ↑/↓ move • PgUp/PgDn page" : "";
+			lines.push(fit(this.styles.dim(`  (${this.cursor + 1}/${this.filtered.length})${paging}`)));
 		}
 
 		lines.push(border);
@@ -132,41 +103,30 @@ export class Picker implements Component, Focusable {
 	}
 
 	handleInput(data: string): void {
-		const kb = this.keybindings;
-		if (kb.matches(data, "tui.select.up")) {
-			if (this.filtered.length > 0) this.cursor = this.cursor === 0 ? this.filtered.length - 1 : this.cursor - 1;
-		} else if (kb.matches(data, "tui.select.down")) {
-			if (this.filtered.length > 0) this.cursor = this.cursor === this.filtered.length - 1 ? 0 : this.cursor + 1;
-		} else if (kb.matches(data, "tui.select.pageUp")) {
+		const keybindings = this.keybindings;
+		if (keybindings.matches(data, "tui.select.up")) {
+			if (this.filtered.length > 0) {
+				this.cursor = this.cursor === 0 ? this.filtered.length - 1 : this.cursor - 1;
+			}
+		} else if (keybindings.matches(data, "tui.select.down")) {
+			if (this.filtered.length > 0) {
+				this.cursor = this.cursor === this.filtered.length - 1 ? 0 : this.cursor + 1;
+			}
+		} else if (keybindings.matches(data, "tui.select.pageUp")) {
 			this.cursor = Math.max(0, this.cursor - PAGE_SIZE);
-		} else if (kb.matches(data, "tui.select.pageDown")) {
+		} else if (keybindings.matches(data, "tui.select.pageDown")) {
 			this.cursor = Math.min(Math.max(0, this.filtered.length - 1), this.cursor + PAGE_SIZE);
-		} else if (kb.matches(data, "tui.select.confirm")) {
-			if (this.multi) this.cb.onConfirm?.([...this.selected]);
-			else {
-				const item = this.filtered[this.cursor];
-				if (item) this.cb.onSelect?.(item.value);
-			}
+		} else if (keybindings.matches(data, "tui.select.confirm")) {
+			const item = this.filtered[this.cursor];
+			if (item) this.callbacks.onSelect(item.value);
 			return;
-		} else if (kb.matches(data, "tui.select.cancel")) {
-			this.cb.onCancel();
+		} else if (keybindings.matches(data, "tui.select.cancel")) {
+			this.callbacks.onCancel();
 			return;
 		} else if (data === "\x7f" || data === "\b") {
 			this.query = this.query.slice(0, -1);
 			this.cursor = 0;
 			this.recompute();
-		} else if (data === " ") {
-			if (this.multi) {
-				const item = this.filtered[this.cursor];
-				if (item) {
-					if (this.selected.has(item.value)) this.selected.delete(item.value);
-					else this.selected.add(item.value);
-				}
-			} else {
-				this.query += data;
-				this.cursor = 0;
-				this.recompute();
-			}
 		} else if (isPrintable(data)) {
 			this.query += data;
 			this.cursor = 0;
@@ -179,70 +139,22 @@ export class Picker implements Component, Focusable {
 }
 
 function isPrintable(data: string): boolean {
-	if (data.length === 0) return false;
-	// Reject ESC-led escape sequences and other control characters.
-	return data.charCodeAt(0) >= 0x20;
+	return data.length > 0 && data.charCodeAt(0) >= 0x20;
 }
 
-/** Build style functions from the pi theme. `any` on the color param dodges a
- * strict contravariance error when assigning the theme's narrow color union. */
-function makeStyles(theme: { fg: (color: any, text: string) => string; bold: (text: string) => string }): PickerStyles {
+/** Build picker styles from the pi theme. */
+export function makePickerStyles(theme: {
+	fg: (color: any, text: string) => string;
+	bold: (text: string) => string;
+}): PickerStyles {
 	return {
-		border: (t) => theme.fg("accent", t),
-		title: (t) => theme.fg("accent", theme.bold(t)),
-		hint: (t) => theme.fg("dim", t),
-		cursorMark: (t) => theme.fg("accent", t),
-		selectedLabel: (t) => theme.fg("accent", theme.bold(t)),
-		label: (t) => t,
-		dim: (t) => theme.fg("dim", t),
-		checked: (t) => theme.fg("accent", t),
-		unchecked: (t) => theme.fg("dim", t),
-		filterEcho: (t) => theme.fg("accent", t),
+		border: (text) => theme.fg("accent", text),
+		title: (text) => theme.fg("accent", theme.bold(text)),
+		hint: (text) => theme.fg("dim", text),
+		cursorMark: (text) => theme.fg("accent", text),
+		selectedLabel: (text) => theme.fg("accent", theme.bold(text)),
+		label: (text) => text,
+		dim: (text) => theme.fg("dim", text),
+		filterEcho: (text) => theme.fg("accent", text),
 	};
 }
-
-function requireTui(ctx: PickerContext): boolean {
-	if (ctx.mode !== "tui") {
-		ctx.ui.notify("/subagents-setup requires Pi's interactive TUI.", "error");
-		return false;
-	}
-	return true;
-}
-
-/** Single-select with fuzzy filter + paging. Resolves undefined on Esc. */
-export function promptSelectOne(
-	ctx: PickerContext,
-	title: string,
-	hint: string,
-	items: PickerItem[],
-	initialValue?: string,
-): Promise<string | undefined> {
-	if (!requireTui(ctx)) return Promise.resolve(undefined);
-	return ctx.ui.custom<string | undefined>((tui, theme, keybindings, done) => {
-		const styles = makeStyles(theme);
-		const header = [styles.title(title), styles.hint(hint)];
-		return new Picker(items, false, new Set<string>(), styles, header, tui, keybindings, {
-			onSelect: (value) => done(value),
-			onCancel: () => done(undefined),
-		}, initialValue);
-	});
-}
-
-/** Multi-select with fuzzy filter + paging. Resolves undefined on Esc. */
-export function promptSelectMany(
-	ctx: PickerContext,
-	title: string,
-	hint: string,
-	items: PickerItem[],
-	initialSelected: readonly string[],
-): Promise<string[] | undefined> {
-	if (!requireTui(ctx)) return Promise.resolve(undefined);
-	return ctx.ui.custom<string[] | undefined>((tui, theme, keybindings, done) => {
-		const styles = makeStyles(theme);
-		const header = [styles.title(title), styles.hint(hint)];
-		return new Picker(items, true, new Set<string>(initialSelected), styles, header, tui, keybindings, {
-			onConfirm: (values) => done(values),
-			onCancel: () => done(undefined),
-		});
-	});
-}

package/src/widget.ts

@@ -6,12 +6,12 @@
  *   id and agent so every label starts at the same column; a resumed thread
  *   carries a dim `↻` inside the agent column.
  * - A live run owns two lines. Line 1 is what it is: identity, task label,
- *   then the telemetry flow (`provider/model`, token flow in the pi-footer
- *   vocabulary `↑in ↓out R/W cache`, cost, wait state, seconds-precision
- *   elapsed). Line 2 is what it is doing right now: the live activity, dim,
- *   indented under the label column behind a `↳` marker.
+ *   then the telemetry flow (worktree, wait state, token flow in the pi-footer
+ *   vocabulary `↑in ↓out R/W cache`, cost, `provider/model`, effective
+ *   `think:<level>`, seconds-precision elapsed). Line 2 is the current activity,
+ *   dim and indented under the label column behind a `↳` marker.
  * - Telemetry drops leftmost-first under width pressure (badge, wait, usage,
- *   model); the elapsed survives every width.
+ *   model, thinking); the elapsed survives every width.
  * - Queued rows say what they actually wait for ("queued" for a process slot,
  *   "repo lane" for shared-writer serialization, "starting" while the child
  *   process launches) instead of one catch-all "queued".
@@ -129,24 +129,25 @@ function usagePart(usage: UsageStats | undefined): string | undefined {
 }
 
 /** Telemetry tail parts of a run row: badge and wait word first (dropped first
- * under pressure), then the usage part, the model, and the always-surviving
- * elapsed. */
+ * under pressure), then usage, model, effective thinking strength, and the
+ * always-surviving elapsed time. */
 function telemetryTailParts(run: RunView, now: number): Array<string | undefined> {
-	// Queued rows omit the model (the route is re-resolved at actual start).
+	// Queued rows omit model and thinking because the route is re-resolved at actual start.
 	// The full provider/model ref is kept — "which provider served this run" is
 	// exactly what a multi-provider session needs to see.
 	const modelPart = run.status === "queued" || !run.model ? undefined : run.model;
+	const thinkingPart = run.status === "queued" || !run.thinking ? undefined : `think:${run.thinking}`;
 	const badge = run.isolation === "worktree" ? worktreeBadge(run) : undefined;
 	const wait = run.status === "queued" ? waitWord(run) : undefined;
-	// Drop order under pressure: badge, wait word, usage, model; elapsed
+	// Drop order under pressure: badge, wait word, usage, model, thinking; elapsed
 	// survives every width the identity leaves room for.
-	return [badge, wait, usagePart(run.usage), modelPart, formatElapsed(run, now) || undefined];
+	return [badge, wait, usagePart(run.usage), modelPart, thinkingPart, formatElapsed(run, now) || undefined];
 }
 
 /** Two lines for a live run. Line 1 is what the run is: identity, task label,
- * then the telemetry flow (worktree badge, token flow, cost, provider/model,
- * wait state, elapsed). Line 2 is what it is doing right now: the live
- * activity, dim, indented under the label column behind a `↳` marker. The
+ * then telemetry (worktree badge, wait state, token flow, cost, provider/model,
+ * effective thinking, elapsed). Line 2 is the current activity, dim and indented
+ * under the label column behind a `↳` marker. The
  * label takes the full content budget on line 1; the identity and the elapsed
  * survive every width. */
 function primaryLine(