@oh-my-pi/pi-tui 18.4.2 → 18.4.4

package/src/overlays/agents-hub.ts

@@ -11,6 +11,7 @@
  */
 
 import type { Model } from "@oh-my-pi/pi-ai";
+import type { TspPickerAction, TspPickerColumn, TspPickerItem, TspPickerScope, TspSpan } from "@oh-my-pi/pi-wire";
 import {
 	type Component,
 	Editor,
@@ -25,8 +26,13 @@ import {
 	visibleWidth,
 	wrapTextWithAnsi,
 } from "../index";
+import { code, col, md, node, row, span, text } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { actionHint, type NativeHint, hintsRow } from "../native/overlay";
+import { CLOSE_ACTION, type PickerEvent, picker, pickerEvent, pickerQuery } from "../native/picker";
 import type { AgentSource } from "../tools/task";
 import { shortenPath } from "../render/render-utils";
+import { sanitizeDisplaySingleLine } from "./extensions/display-text";
 import { getEditorTheme, theme } from "../theme";
 import { matchesAppFollowUp, matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
 import { formatKeyHint, formatKeyHints } from "../app-keybindings";
@@ -39,6 +45,8 @@ import {
 	sortModelItems,
 } from "./model-browser";
 import {
+	describeHubFrame,
+	describeHubSidebar,
 	HubFrame,
 	moveStripSelection,
 	type SidebarEntry as HubSidebarEntry,
@@ -72,6 +80,14 @@ const SOURCE_LABEL: Record<AgentSource, string> = {
 	bundled: "Bundled",
 };
 const SOURCE_ORDER: Record<AgentSource, number> = { project: 0, user: 1, bundled: 2 };
+const SOURCES = ["project", "user", "bundled"] as const satisfies readonly AgentSource[];
+/** Per-agent override columns of the config picker; lower priorities hide first. */
+const AGENT_COLUMNS: readonly TspPickerColumn[] = [
+	{ id: "model", head: "Model", format: "text", priority: 4, min: 8 },
+	{ id: "prewalk", head: "Prewalk", format: "text", priority: 2 },
+	{ id: "advisor", head: "Advisor", format: "text", priority: 3 },
+];
+const SOURCE_COLUMN: TspPickerColumn = { id: "source", head: "Source", format: "dim", priority: 1 };
 
 interface SidebarEntry extends HubSidebarEntry<"all" | "source" | "new" | "separator"> {
 	source?: AgentSource;
@@ -160,6 +176,11 @@ function parseGeneratedAgentSpec(raw: string): GeneratedAgentSpec {
 	return { identifier, whenToUse, systemPrompt };
 }
 
+/** Stable native list-item id of an agent-list row. */
+function listRowId(rowDef: ListRow): string {
+	return rowDef.kind === "new" ? "new" : `agent:${rowDef.agent.source}:${rowDef.agent.name}`;
+}
+
 function matchAgent(agent: HubAgent, query: string): boolean {
 	const text = `${agent.name} ${agent.description} ${SOURCE_LABEL[agent.source]} ${agent.overrideModel ?? ""}`;
 	return query
@@ -187,7 +208,8 @@ export class AgentsHubComponent implements Component {
 	#rowIndex = 0;
 	#rowHover: number | null = null;
 	#listScroll = 0;
-	#searchQuery = "";
+	/** Type-to-filter field for the agent list (chrome-less; the hub draws `search:`). */
+	readonly #search = Object.assign(new Input(), { prompt: "" });
 	#notice: string | null = null;
 	#loadError: string | null = null;
 
@@ -205,6 +227,12 @@ export class AgentsHubComponent implements Component {
 	#createError: string | null = null;
 	#createStreamingText = "";
 
+	/** Bumped on every visible-state change; the described node is rebuilt when it moves. */
+	#nativeVersion = 0;
+	#nativeCache: { version: number; sheet: boolean; node: NativeNode } | undefined;
+	/** Collapsed state of the generated system-prompt card (native only). */
+	#promptCollapsed = true;
+
 	#renderBodyPane = (width: number, height: number | undefined): readonly string[] => {
 		const rows = Math.max(1, Math.floor(height ?? 10));
 		const lines: string[] = [this.#statusRow(width)];
@@ -260,9 +288,16 @@ export class AgentsHubComponent implements Component {
 
 	dispose(): void {}
 	invalidate(): void {
+		this.#nativeVersion++;
 		this.#frame.invalidate();
 	}
 
+	/** Request a repaint after a state change, invalidating the described node. */
+	#requestRender(): void {
+		this.#nativeVersion++;
+		this.#tui.requestRender();
+	}
+
 	// ═══════════════════════════════════════════════════════════════════════
 	// Data pipeline
 	// ═══════════════════════════════════════════════════════════════════════
@@ -288,7 +323,7 @@ export class AgentsHubComponent implements Component {
 			this.#buildRows();
 			this.#loadError = error instanceof Error ? error.message : String(error);
 		}
-		this.#tui.requestRender();
+		this.#requestRender();
 	}
 
 	#buildSidebar(): void {
@@ -324,7 +359,8 @@ export class AgentsHubComponent implements Component {
 		const entry = this.#activeEntry();
 		const scoped =
 			entry.kind === "source" ? this.#allAgents.filter(agent => agent.source === entry.source) : this.#allAgents;
-		const filtered = this.#searchQuery ? scoped.filter(agent => matchAgent(agent, this.#searchQuery)) : scoped;
+		const query = this.#search.getValue();
+		const filtered = query ? scoped.filter(agent => matchAgent(agent, query)) : scoped;
 		this.#rows = [...filtered.map(agent => ({ kind: "agent", agent }) as ListRow), { kind: "new" }];
 	}
 
@@ -345,7 +381,7 @@ export class AgentsHubComponent implements Component {
 		agent.disabled = !agent.disabled;
 		this.#deps.setAgentDisabled(agent.name, { disabled: agent.disabled });
 		this.#notice = `${agent.name} ${agent.disabled ? "disabled" : "enabled"}`;
-		this.#tui.requestRender();
+		this.#requestRender();
 	}
 
 	#overrideFor(agent: HubAgent, property: PropertyKind): string | undefined {
@@ -374,7 +410,7 @@ export class AgentsHubComponent implements Component {
 		}
 		this.#deps.setAgentOverride(property, agent.name, trimmed);
 		this.#notice = this.#describeProperty(agent, property);
-		this.#tui.requestRender();
+		this.#requestRender();
 	}
 
 	/** One-line effective description used for notices and the status row. */
@@ -567,7 +603,7 @@ export class AgentsHubComponent implements Component {
 	#cancelAssign(): void {
 		this.#assigning = null;
 		this.#browser.setQuery("");
-		this.#tui.requestRender();
+		this.#requestRender();
 	}
 
 	// ═══════════════════════════════════════════════════════════════════════
@@ -592,7 +628,7 @@ export class AgentsHubComponent implements Component {
 			this.#createDescription = value;
 		};
 		this.#createInput = editor;
-		this.#tui.requestRender();
+		this.#requestRender();
 	}
 
 	#clearCreateFlow(): void {
@@ -609,14 +645,14 @@ export class AgentsHubComponent implements Component {
 		this.#createDescription = description;
 		if (!description) {
 			this.#createError = "Description is required.";
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 		this.#createGenerating = true;
 		this.#createError = null;
 		this.#createSpec = null;
 		this.#createStreamingText = "";
-		this.#tui.requestRender();
+		this.#requestRender();
 		try {
 			const spec = await this.#runAgentCreationArchitect(description);
 			this.#createSpec = spec;
@@ -625,14 +661,14 @@ export class AgentsHubComponent implements Component {
 			this.#createError = error instanceof Error ? error.message : String(error);
 		} finally {
 			this.#createGenerating = false;
-			this.#tui.requestRender();
+			this.#requestRender();
 		}
 	}
 
 	async #runAgentCreationArchitect(description: string): Promise<GeneratedAgentSpec> {
 		const raw = await this.#deps.generateAgent(description, text => {
 			this.#createStreamingText += text;
-			this.#tui.requestRender();
+			this.#requestRender();
 		});
 		return parseGeneratedAgentSpec(raw);
 	}
@@ -651,21 +687,22 @@ export class AgentsHubComponent implements Component {
 	// ═══════════════════════════════════════════════════════════════════════
 
 	handleInput(data: string): void {
+		this.#nativeVersion++;
 		if (data.startsWith("\x1b[<")) {
 			routeSgrMouseInput(data, event => this.#routeMouseEvent(event));
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 
 		if (this.#strip) {
 			this.#handleStripInput(data);
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 
 		if (this.#createActive) {
 			this.#handleCreateInput(data);
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 
@@ -674,11 +711,11 @@ export class AgentsHubComponent implements Component {
 				this.#cancelAssign();
 				return;
 			}
-			if (this.#searchQuery.length > 0) {
-				this.#searchQuery = "";
+			if (this.#search.getValue()) {
+				this.#search.setValue("");
 				this.#buildRows();
 				this.#clampRowIndex();
-				this.#tui.requestRender();
+				this.#requestRender();
 				return;
 			}
 			this.#callbacks.onCancel();
@@ -687,7 +724,7 @@ export class AgentsHubComponent implements Component {
 
 		if (this.#assigning) {
 			this.#browser.handleInput(data);
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 
@@ -698,29 +735,29 @@ export class AgentsHubComponent implements Component {
 
 		if (matchesKey(data, "tab") || matchesKey(data, "shift+tab")) {
 			this.#focus = this.#focus === "scope" ? "list" : "scope";
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 		if (matchesKey(data, "left")) {
 			this.#focus = "scope";
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 		if (matchesKey(data, "right")) {
 			this.#focus = "list";
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 
 		if (this.#focus === "scope") {
 			if (matchesSelectUp(data)) {
 				this.#moveSidebar(-1);
-				this.#tui.requestRender();
+				this.#requestRender();
 				return;
 			}
 			if (matchesSelectDown(data)) {
 				this.#moveSidebar(1);
-				this.#tui.requestRender();
+				this.#requestRender();
 				return;
 			}
 			if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
@@ -729,48 +766,47 @@ export class AgentsHubComponent implements Component {
 				} else {
 					this.#focus = "list";
 				}
-				this.#tui.requestRender();
+				this.#requestRender();
 				return;
 			}
 		}
 
 		if (matchesSelectUp(data)) {
 			this.#rowIndex = Math.max(0, this.#rowIndex - 1);
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 		if (matchesSelectDown(data)) {
 			this.#rowIndex = Math.min(this.#rows.length - 1, this.#rowIndex + 1);
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
 		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
 			this.#activateRow(this.#rows[this.#rowIndex]);
-			this.#tui.requestRender();
+			this.#requestRender();
 			return;
 		}
-		if (data === " " && this.#searchQuery.length === 0) {
+		if (data === " " && !this.#search.getValue()) {
 			const agent = this.#selectedAgent();
 			if (agent) this.#toggleAgent(agent);
 			return;
 		}
-		if (matchesKey(data, "backspace")) {
-			if (this.#searchQuery.length > 0) {
-				this.#searchQuery = this.#searchQuery.slice(0, -1);
-				this.#buildRows();
-				this.#clampRowIndex();
-				this.#tui.requestRender();
-			}
-			return;
-		}
-		// Type-to-filter: any printable character extends the query.
-		if (data.length === 1 && data >= " " && data !== "\x7f") {
-			this.#searchQuery += data;
+		// Type-to-filter: every other key edits the search field.
+		const before = this.#search.getValue();
+		if (!this.#search.handleInput(data)) return;
+		const value = this.#search.getValue();
+		if (value === before) {
+			this.#requestRender();
+		} else if (value.length < before.length) {
+			this.#buildRows();
+			this.#clampRowIndex();
+			this.#requestRender();
+		} else {
 			this.#focus = "list";
 			this.#buildRows();
 			this.#rowIndex = 0;
 			this.#listScroll = 0;
-			this.#tui.requestRender();
+			this.#requestRender();
 		}
 	}
 
@@ -787,16 +823,7 @@ export class AgentsHubComponent implements Component {
 		const strip = this.#strip;
 		if (!strip) return;
 		if (matchesSelectCancel(data)) {
-			// A property strip steps back up to the agent strip instead of closing.
-			if (strip.kind === "chips" && strip.property) {
-				this.#openAgentStrip(strip.agent);
-				return;
-			}
-			if (strip.kind === "pattern") {
-				this.#openPropertyStrip(strip.agent, strip.property);
-				return;
-			}
-			this.#closeStrip();
+			this.#stripBack(strip);
 			return;
 		}
 		if (strip.kind === "pattern") {
@@ -814,6 +841,19 @@ export class AgentsHubComponent implements Component {
 		}
 	}
 
+	/** Esc on a strip: a property strip steps back up to the agent strip, the agent strip closes. */
+	#stripBack(strip: StripState): void {
+		if (strip.kind === "chips" && strip.property) {
+			this.#openAgentStrip(strip.agent);
+			return;
+		}
+		if (strip.kind === "pattern") {
+			this.#openPropertyStrip(strip.agent, strip.property);
+			return;
+		}
+		this.#closeStrip();
+	}
+
 	#handleCreateInput(data: string): void {
 		if (this.#createSpec) {
 			if (matchesSelectCancel(data)) {
@@ -831,7 +871,7 @@ export class AgentsHubComponent implements Component {
 			if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
 				void this.#saveGeneratedAgent().catch(error => {
 					this.#createError = error instanceof Error ? error.message : String(error);
-					this.#tui.requestRender();
+					this.#requestRender();
 				});
 			}
 			return;
@@ -990,7 +1030,10 @@ export class AgentsHubComponent implements Component {
 
 	#renderList(width: number, rows: number): string[] {
 		const lines: string[] = [];
-		const searchText = this.#searchQuery ? theme.fg("accent", this.#searchQuery) : theme.fg("dim", "type to filter");
+		const query = this.#search.getValue();
+		const searchText = query
+			? theme.fg("accent", this.#search.render(visibleWidth(query) + 1)[0] ?? "")
+			: theme.fg("dim", "type to filter");
 		lines.push(truncateToWidth(` ${theme.fg("muted", "search:")} ${searchText}`, width));
 		lines.push("");
 		this.#listRowStart = lines.length;
@@ -1200,6 +1243,598 @@ export class AgentsHubComponent implements Component {
 		return this.#frame.renderChips(width, prefix, strip);
 	}
 
+	// ═══════════════════════════════════════════════════════════════════════
+	// Native (TSP) description
+	// ═══════════════════════════════════════════════════════════════════════
+
+	/**
+	 * The agent list (and its chip strips) is a `picker` sheet. The pattern
+	 * input, the model browser and the create wizard stay the generic overlay.
+	 */
+	nativeSheet(cx: DescribeContext): boolean {
+		return cx.supports("picker") && !this.#createActive && !this.#assigning && this.#strip?.kind !== "pattern";
+	}
+
+	describe(cx: DescribeContext): NativeNode {
+		const sheet = this.nativeSheet(cx);
+		const cached = this.#nativeCache;
+		if (cached?.version === this.#nativeVersion && cached.sheet === sheet) return cached.node;
+		if (sheet) {
+			const described = this.#describePicker();
+			this.#nativeCache = { version: this.#nativeVersion, sheet, node: described };
+			return described;
+		}
+		const footer: NativeChild[] = [];
+		const strip = this.#describeStrip();
+		if (strip) footer.push(strip);
+		footer.push(hintsRow(this.#footerHints()));
+		const described = describeHubFrame(
+			"omp.hub.agents",
+			"Agents",
+			describeHubSidebar(this.#entries, this.#activeEntryId, this.#sidebarStyle, "scopes"),
+			this.#describeBody(),
+			node("col", { gap: "xs" }, footer, "footer"),
+		);
+		this.#nativeCache = { version: this.#nativeVersion, sheet, node: described };
+		return described;
+	}
+
+	handleNativeEvent(event: NativeUiEvent): void {
+		const target = event.key.slice(event.key.lastIndexOf("/") + 1);
+		const pick = pickerEvent(event);
+		if (pick) {
+			this.#handlePickerEvent(pick);
+			this.#requestRender();
+			return;
+		}
+		if (event.type === "toggle") {
+			if (target !== "prompt") return;
+			this.#promptCollapsed = event.collapsed;
+		} else if (event.type === "select" || event.type === "activate") {
+			const activate = event.type === "activate";
+			if (target === "strip") {
+				const strip = this.#strip;
+				const index = Number(event.item);
+				if (strip?.kind !== "chips" || !Number.isInteger(index) || !strip.chips[index]) return;
+				strip.index = index;
+				if (activate) this.#activateStripChip();
+			} else if (target === "agents") {
+				// Like the mouse path: the list is inert under a strip, the create flow, or the model browser.
+				if (this.#strip || this.#createActive || this.#assigning) return;
+				const index = this.#rows.findIndex(rowDef => listRowId(rowDef) === event.item);
+				if (index < 0) return;
+				this.#focus = "list";
+				this.#rowIndex = index;
+				if (activate) this.#activateRow(this.#rows[index]);
+			} else if (target === "scopes") {
+				if (this.#strip || this.#createActive || this.#assigning) return;
+				const entry = this.#entries.find(candidate => candidate.id === event.item);
+				if (!entry || entry.kind === "separator") return;
+				if (entry.kind === "new") {
+					this.#beginCreateFlow();
+				} else {
+					this.#activeEntryId = entry.id;
+					this.#buildRows();
+					this.#rowIndex = 0;
+					this.#listScroll = 0;
+					this.#focus = activate ? "list" : "scope";
+				}
+			} else {
+				return;
+			}
+		} else {
+			return;
+		}
+		this.#requestRender();
+	}
+
+	/** Picker pointer events: each runs the path of the key it stands for. */
+	#handlePickerEvent(pick: PickerEvent): void {
+		const strip = this.#strip;
+		if (pick.kind !== "action") {
+			if (strip) return; // the list is inert under a strip, like the mouse path
+			const index = this.#rows.findIndex(rowDef => listRowId(rowDef) === pick.item);
+			if (index < 0) return;
+			this.#focus = "list";
+			this.#rowIndex = index;
+			if (pick.kind === "activate") this.#activateRow(this.#rows[index]);
+			return;
+		}
+		if (pick.act === "close") {
+			this.#callbacks.onCancel();
+			return;
+		}
+		if (strip?.kind === "chips") {
+			if (pick.act === "strip") {
+				const index = Number(pick.value);
+				if (!Number.isInteger(index) || !strip.chips[index]) return;
+				strip.index = index;
+				this.#activateStripChip();
+			} else if (pick.act === "apply") {
+				this.#activateStripChip();
+			} else if (pick.act === "back") {
+				this.#stripBack(strip);
+			}
+			return;
+		}
+		const agent = this.#selectedAgent();
+		switch (pick.act) {
+			case "scope": {
+				const entry = this.#entries.find(candidate => candidate.id === pick.value);
+				if (!entry || entry.kind === "separator" || entry.kind === "new") return;
+				this.#activeEntryId = entry.id;
+				this.#buildRows();
+				this.#rowIndex = 0;
+				this.#listScroll = 0;
+				this.#focus = "scope";
+				return;
+			}
+			case "configure":
+				this.#activateRow(this.#rows[this.#rowIndex]);
+				return;
+			case "toggle":
+				if (agent) this.#toggleAgent(agent);
+				return;
+			case "model":
+				if (agent) this.#openPropertyStrip(agent, "model");
+				return;
+			case "new":
+				this.#beginCreateFlow();
+				return;
+			case "reload":
+				void this.#reload();
+				return;
+		}
+	}
+
+	/** The config hub as a `picker` (§9.1): source scopes, override columns, prompt preview. */
+	#describePicker(): NativeNode {
+		const counts: Record<AgentSource, number> = { project: 0, user: 0, bundled: 0 };
+		for (const agent of this.#allAgents) counts[agent.source]++;
+		const scopes: TspPickerScope[] = [
+			{ id: "all", label: "All agents", icon: "users", count: this.#allAgents.length },
+			...SOURCES.map((source): TspPickerScope => ({
+				id: `source:${source}`,
+				label: SOURCE_LABEL[source],
+				icon: source === "project" ? "folder" : source === "user" ? "user" : "box",
+				count: counts[source],
+				group: "Source",
+				disabled: counts[source] === 0 ? `No ${source} agents` : undefined,
+			})),
+		];
+		const entry = this.#activeEntry();
+		const strip = this.#strip?.kind === "chips" ? this.#strip : null;
+		const agent = this.#selectedAgent();
+		let actions: TspPickerAction[];
+		if (strip) {
+			actions = [
+				{ id: "apply", label: strip.property ? "Apply" : "Open", keys: ["enter"], primary: true },
+				{ id: "back", label: strip.property ? "Back" : "Cancel", keys: ["esc"], end: true },
+			];
+		} else {
+			const noAgent = agent ? undefined : "Select an agent";
+			actions = [
+				{ id: "configure", label: agent ? "Configure" : "Create", keys: ["enter"], primary: true },
+				{
+					id: "toggle",
+					label: "Toggle",
+					keys: ["space"],
+					on: agent ? !agent.disabled : undefined,
+					disabled: noAgent,
+				},
+				{ id: "model", label: "Model", disabled: noAgent },
+				{ id: "new", label: "New agent" },
+				{ id: "reload", label: "Reload", keys: ["ctrl", "r"] },
+				CLOSE_ACTION,
+			];
+		}
+		const selectedRow = this.#rows[this.#rowIndex];
+		return picker(
+			{
+				title: "Agents",
+				subtitle: this.#notice ?? undefined,
+				icon: "users",
+				noun: "agents",
+				size: "lg",
+				layout: "rows",
+				preview: "side",
+				...pickerQuery(this.#search),
+				placeholder: "Search agents…",
+				scopes,
+				scope: entry.kind === "source" ? entry.id : "all",
+				columns: entry.kind === "source" ? AGENT_COLUMNS : [...AGENT_COLUMNS, SOURCE_COLUMN],
+				items: this.#rows.map(rowDef => this.#pickerItem(rowDef)),
+				selected: selectedRow ? listRowId(selectedRow) : null,
+				total: entry.kind === "source" && entry.source ? counts[entry.source] : this.#allAgents.length,
+				state: this.#loadError ? "error" : "ready",
+				message: this.#loadError ?? undefined,
+				strip: strip
+					? {
+							label: strip.property ? `${strip.agent.name} · ${strip.property}` : strip.agent.name,
+							items: strip.chips.map((chip, index) => ({
+								id: String(index),
+								label: this.#stripChipLabel(strip.agent, chip),
+								on: this.#stripChipOn(strip.agent, strip.property, chip),
+							})),
+							selected: String(strip.index),
+						}
+					: null,
+				actions,
+				focus: strip ? "strip" : this.#focus === "scope" ? "scopes" : "list",
+			},
+			this.#describePreview(selectedRow),
+		);
+	}
+
+	#pickerItem(rowDef: ListRow): TspPickerItem {
+		if (rowDef.kind === "new") {
+			return { id: listRowId(rowDef), label: "New agent…", icon: "plus", tone: "muted" };
+		}
+		const agent = rowDef.agent;
+		const prewalk = this.#deps.effectivePrewalkPattern(agent);
+		const advisor = this.#deps.effectiveAdvisorPattern(agent);
+		return {
+			id: listRowId(rowDef),
+			label: agent.name,
+			mono: true,
+			detail: sanitizeDisplaySingleLine(agent.description),
+			dot: agent.disabled ? "muted" : "success",
+			disabled: agent.disabled ? "Disabled · space to enable" : undefined,
+			facts: {
+				model: agent.overrideModel ? agent.overrideModel : [span("auto", "dim")],
+				prewalk: prewalk ?? [span("off", "dim")],
+				advisor: advisor ?? [span("off", "dim")],
+				source: SOURCE_LABEL[agent.source],
+			},
+		};
+	}
+
+	/** Chip text of a configuration strip, without the ANSI state glyphs (the chip's `on` carries state). */
+	#stripChipLabel(agent: HubAgent, chip: StripChip): string {
+		const action = chip.action;
+		if (action.kind === "toggle") return agent.disabled ? "Enable" : "Disable";
+		if (action.kind === "property") return `${action.property}: ${this.#propertySummary(agent, action.property)}`;
+		return chip.label;
+	}
+
+	#stripChipOn(agent: HubAgent, property: PropertyKind | undefined, chip: StripChip): boolean | undefined {
+		const action = chip.action;
+		if (action.kind !== "set" || action.property === "model" || !property) return undefined;
+		return this.#overrideFor(agent, property)?.toLowerCase() === action.value;
+	}
+
+	/** Preview of the selected agent: description, effective settings, system prompt. */
+	#describePreview(rowDef: ListRow | undefined): NativeChild[] {
+		if (!rowDef) return [];
+		if (rowDef.kind === "new") {
+			return [
+				text("New agent", { role: "omp.picker.title" }),
+				md(
+					"Describe what the agent should do; the architect drafts its name, when to use it and its system prompt.",
+				),
+			];
+		}
+		const agent = rowDef.agent;
+		const patterns = this.#deps.effectiveModelPatterns(agent);
+		const resolved = this.#deps.resolvePatterns(patterns);
+		const model: TspSpan[] = [patterns.length > 0 ? span(patterns.join(","), "mono") : span("session model", "dim")];
+		if (resolved) model.push(span(" → ", "dim"), span(resolved, "mono success"));
+		const prewalk = this.#deps.effectivePrewalkPattern(agent);
+		const advisor = this.#deps.effectiveAdvisorPattern(agent);
+		const facts: { k: string; v: TspSpan[] | string }[] = [
+			{ k: "Model", v: model },
+			{ k: "Prewalk", v: [prewalk ? span(prewalk, "mono") : span("off", "dim")] },
+			{ k: "Advisor", v: [advisor ? span(advisor, "mono") : span("off", "dim")] },
+			{ k: "Status", v: [agent.disabled ? span("Disabled", "warning") : span("Enabled", "success")] },
+			{ k: "Source", v: SOURCE_LABEL[agent.source] },
+		];
+		if (agent.filePath) {
+			// Bundled agents live in the binary (`embedded:…`): nothing to open.
+			const href = agent.filePath.startsWith("/") ? { href: `file://${agent.filePath}` } : undefined;
+			facts.push({ k: "File", v: [span(shortenPath(agent.filePath), "path", href)] });
+		}
+		const out: NativeChild[] = [
+			node("text", { text: agent.name, role: "omp.picker.title" }, undefined, "title"),
+			node("md", { text: agent.description }, undefined, "description"),
+			node("kv", { items: facts, layout: "grid" }, undefined, "facts"),
+		];
+		if (agent.systemPrompt.trim()) {
+			out.push(
+				node(
+					"section",
+					{ head: "System prompt", role: "omp.agents.prompt" },
+					[code(agent.systemPrompt, { lang: "md", wrap: true })],
+					"prompt",
+				),
+			);
+		}
+		return out;
+	}
+
+	#describeBody(): NativeNode {
+		const children: NativeChild[] = [
+			node("text", { spans: this.#statusSpans(), truncate: "end" }, undefined, "status"),
+		];
+		if (this.#createActive) {
+			children.push(...this.#describeCreate());
+		} else if (this.#assigning) {
+			this.#browser.setFocused(true);
+			children.push(this.#browser);
+		} else {
+			children.push(...this.#describeList());
+		}
+		return node("col", { gap: "sm", grow: 1 }, children, "body");
+	}
+
+	#statusSpans(): TspSpan[] {
+		if (this.#loadError) return [span(this.#loadError, "error")];
+		if (this.#assigning) {
+			const { agent, property } = this.#assigning;
+			const what = property === "model" ? "model override" : `${property} model`;
+			return [span(`Picking ${what} for `, "accent"), span(agent.name, "accent strong")];
+		}
+		if (this.#createActive) return [span("New agent — describe it and let the architect draft it", "accent")];
+		if (this.#notice) return [span(this.#notice, "success")];
+		const entry = this.#activeEntry();
+		const scopeLabel = entry.kind === "source" ? `${entry.label} agents` : "All agents";
+		const count = this.#rows.filter(rowDef => rowDef.kind === "agent").length;
+		return [span(`${scopeLabel} · ${count}`, "muted")];
+	}
+
+	#describeList(): NativeNode[] {
+		const search = node(
+			"text",
+			{
+				spans: [
+					span("search: ", "muted"),
+					this.#search.getValue() ? span(this.#search.getValue(), "accent") : span("type to filter", "dim"),
+				],
+				truncate: "end",
+			},
+			undefined,
+			"search",
+		);
+		const items = this.#rows.map(rowDef =>
+			rowDef.kind === "new"
+				? node("item", { label: [span("+ New agent…", "dim")] }, undefined, listRowId(rowDef))
+				: this.#describeAgentItem(rowDef.agent),
+		);
+		const selectedRow = this.#rows[this.#rowIndex];
+		const list = node(
+			"list",
+			{
+				selected: selectedRow ? listRowId(selectedRow) : null,
+				filter: this.#search.getValue() || undefined,
+				virtual: true,
+				grow: 1,
+				tone: this.#focus === "list" ? "accent" : undefined,
+				aria: "Agents",
+			},
+			items,
+			"agents",
+		);
+		return [search, list, this.#describeDetail()];
+	}
+
+	#describeAgentItem(agent: HubAgent): NativeNode {
+		const value: TspSpan[] = [];
+		const badge = (t: string, s: string): void => {
+			if (value.length > 0) value.push(span("  "));
+			value.push(span(t, s));
+		};
+		if (agent.overrideModel) badge(agent.overrideModel, "warning");
+		const prewalk = this.#deps.effectivePrewalkPattern(agent);
+		if (prewalk) badge(`pre:${prewalk}`, "dim");
+		const advisor = this.#deps.effectiveAdvisorPattern(agent);
+		if (advisor) badge(`adv:${advisor}`, "dim");
+		return node(
+			"item",
+			{
+				label: [
+					agent.disabled ? span(`${theme.status.disabled} `, "dim") : span(`${theme.status.enabled} `, "success"),
+					span(agent.name, agent.disabled ? "dim" : "strong"),
+				],
+				detail: [span(SOURCE_LABEL[agent.source].toLowerCase(), "dim")],
+				value: value.length > 0 ? value : undefined,
+				tone: agent.disabled ? "muted" : undefined,
+			},
+			undefined,
+			listRowId({ kind: "agent", agent }),
+		);
+	}
+
+	/** Selected-agent detail block under the list. */
+	#describeDetail(): NativeNode {
+		const agent = this.#selectedAgent();
+		if (!agent) {
+			return node("section", {}, [text([span("Select an agent to inspect", "dim")])], "detail");
+		}
+		const patterns = this.#deps.effectiveModelPatterns(agent);
+		const resolved = this.#deps.resolvePatterns(patterns);
+		const model: TspSpan[] = [patterns.length > 0 ? span(patterns.join(",")) : span("(session model)", "dim")];
+		if (resolved) model.push(span(" → ", "dim"), span(resolved, "success"));
+		const prewalk = this.#deps.effectivePrewalkPattern(agent);
+		const advisor = this.#deps.effectiveAdvisorPattern(agent);
+		const children: NativeChild[] = [
+			text([span(agent.description, "dim")], { wrap: "word", lines: 2 }),
+			node("kv", {
+				items: [
+					{ k: [span("model", "muted")], v: model },
+					{ k: [span("prewalk", "muted")], v: [prewalk ? span(prewalk, "success") : span("off", "dim")] },
+					{ k: [span("advisor", "muted")], v: [advisor ? span(advisor, "success") : span("off", "dim")] },
+				],
+				layout: "inline",
+			}),
+		];
+		if (agent.filePath) children.push(text([span(shortenPath(agent.filePath), "path dim")], { truncate: "middle" }));
+		return node("section", { head: [span(agent.name, "accent strong")] }, children, "detail");
+	}
+
+	#describeCreate(): NativeChild[] {
+		const nodes: NativeChild[] = [];
+		const spec = this.#createSpec;
+		if (spec) {
+			nodes.push(
+				text([span("Review generated agent", "accent strong")]),
+				node("kv", {
+					items: [
+						{ k: [span("Identifier", "muted")], v: [span(spec.identifier, "code")] },
+						{ k: [span("Scope", "muted")], v: [span(this.#createScope, "accent")] },
+					],
+				}),
+				node("section", { head: [span("whenToUse", "muted")] }, [text(spec.whenToUse, { wrap: "word", lines: 6 })]),
+				node(
+					"card",
+					{
+						head: [span("System prompt", "muted")],
+						collapsible: true,
+						collapsed: this.#promptCollapsed,
+						preview: { lines: 8 },
+					},
+					[md(spec.systemPrompt)],
+					"prompt",
+				),
+			);
+		} else {
+			nodes.push(
+				text([span("Create new agent", "accent strong")]),
+				text([span("Describe what the agent should do; scope: ", "muted"), span(this.#createScope, "accent")], {
+					wrap: "word",
+				}),
+			);
+			if (this.#createInput && !this.#createGenerating) {
+				nodes.push(this.#createInput);
+			}
+			if (this.#createGenerating) {
+				nodes.push(node("spinner", { label: "Generating…" }, undefined, "generating"));
+				if (this.#createStreamingText) {
+					nodes.push(
+						node("code", { text: this.#createStreamingText, lang: "json", wrap: true }, undefined, "stream"),
+					);
+				}
+			}
+		}
+		if (this.#createError) {
+			nodes.push(node("text", { text: this.#createError, tone: "error", wrap: "word" }, undefined, "error"));
+		}
+		return nodes;
+	}
+
+	/** Styled spans of one footer chip, from its action rather than its ANSI label. */
+	#chipSpans(agent: HubAgent, property: PropertyKind | undefined, chip: StripChip): TspSpan[] {
+		const action = chip.action;
+		switch (action.kind) {
+			case "toggle":
+				return chip.label === "enable"
+					? [span(`${theme.status.enabled} enable`, "success")]
+					: [span(`${theme.status.disabled} disable`, "dim")];
+			case "property":
+				return [span(action.property, "accent"), span(`: ${this.#propertySummary(agent, action.property)}`, "dim")];
+			case "set": {
+				if (action.property === "model") return [span(chip.label, "warning")];
+				const current = property ? this.#overrideFor(agent, property)?.toLowerCase() : undefined;
+				return current === action.value
+					? [span(`${theme.status.enabled} ${chip.label}`, "accent")]
+					: [span(chip.label, "muted")];
+			}
+			case "pick":
+				return [span(chip.label, "accent")];
+			case "pattern":
+				return [span(chip.label, "muted")];
+		}
+	}
+
+	#describeStrip(): NativeNode | undefined {
+		const strip = this.#strip;
+		if (!strip) return undefined;
+		if (strip.kind === "pattern") {
+			return node(
+				"row",
+				{ gap: "sm", align: "center" },
+				[text([span(`${strip.agent.name} ${strip.property} pattern:`, "accent")]), col([strip.input], { grow: 1 })],
+				"pattern",
+			);
+		}
+		const prefix: TspSpan[] = strip.property
+			? [span(strip.agent.name, "accent"), span(` · ${strip.property} →`, "dim")]
+			: [span(strip.agent.name, "accent"), span(" →", "dim")];
+		return row(
+			[
+				text(prefix),
+				node(
+					"tabs",
+					{
+						items: strip.chips.map((chip, index) => ({
+							id: String(index),
+							label: this.#chipSpans(strip.agent, strip.property, chip),
+						})),
+						active: String(strip.index),
+						actions: { click: "activate" },
+					},
+					undefined,
+					"strip",
+				),
+			],
+			{ gap: "sm", align: "center" },
+		);
+	}
+
+	#footerHints(): (NativeHint | undefined)[] {
+		const cancel = (label: string) => actionHint("tui.select.cancel", label);
+		const upDown = (label: string) => actionHint(["tui.select.up", "tui.select.down"], label);
+		const strip = this.#strip;
+		if (strip) {
+			if (strip.kind === "pattern") {
+				const values = strip.property === "model" ? "a model pattern" : '"on", "off", or a model pattern';
+				return [
+					{ keys: ["enter"], label: `${values} (role aliases like @smol and :level suffixes work; empty clears)` },
+					cancel("back"),
+				];
+			}
+			return [
+				{ keys: ["left", "right"], label: "choose" },
+				{ keys: ["enter"], label: strip.property ? "apply" : "open" },
+				cancel(strip.property ? "back" : "cancel"),
+			];
+		}
+		if (this.#assigning) {
+			return [
+				{ keys: ["enter"], label: "pick" },
+				upDown("models"),
+				{ keys: [], label: "type to search" },
+				cancel("cancel"),
+			];
+		}
+		if (this.#createActive) {
+			if (this.#createSpec) {
+				return [
+					{ keys: ["enter"], label: "save" },
+					{ keys: ["tab"], label: "scope" },
+					{ keys: ["r"], label: "regenerate" },
+					cancel("cancel"),
+				];
+			}
+			if (this.#createGenerating) return [];
+			return [
+				{ keys: boundKeys("app.message.followUp", ["ctrl+q", "ctrl+enter"]), label: "generate" },
+				{ keys: ["enter"], label: "newline" },
+				{ keys: ["tab"], label: "scope" },
+				cancel("cancel"),
+			];
+		}
+		if (this.#focus === "scope") {
+			return [upDown("scopes"), { keys: ["right", "enter"], label: "agents" }, cancel("close")];
+		}
+		return [
+			{ keys: ["enter"], label: "configure" },
+			{ keys: ["space"], label: "enable/disable" },
+			upDown("rows"),
+			{ keys: [], label: "type to search" },
+			{ keys: ["ctrl+r"], label: "reload" },
+			cancel("close"),
+		];
+	}
+
 	render(width: number): readonly string[] {
 		return this.#frame.render(width, this.#terminalRows(), this.#entries, this.#renderFooter(width - 4));
 	}