@oh-my-pi/pi-tui 18.4.8 → 18.4.9

package/src/native/encode.ts

@@ -106,9 +106,13 @@ export function encodeTspJson(verb: TspVerb, value: unknown, params?: TspParams,
 	return encodeTspMessage(verb, JSON.stringify(value), params, limit);
 }
 
-/** The `hello` query; callers follow it with a DA1 sentinel. */
+/**
+ * The `hello` query; callers follow it with a DA1 sentinel. `features: ["edit"]`
+ * tells the terminal that omp applies its `edit` events (TSP §8.5), so it may keep a
+ * native selection in omp's editors; without it, every key stays omp's.
+ */
 export function encodeTspHelloQuery(version?: string): string {
-	return encodeTspJson("q", { q: "hello", v: [TSP_VERSION], app: "omp", ver: version });
+	return encodeTspJson("q", { q: "hello", v: [TSP_VERSION], app: "omp", features: ["edit"], ver: version });
 }
 
 /** One decoded APC message: verb, parameters and raw body. */
@@ -166,6 +170,7 @@ const EVENT_REQUIRED: Readonly<Record<string, Readonly<Record<string, "string" |
 	activate: { id: "string", item: "string" },
 	action: { id: "string", act: "string" },
 	edit: { id: "string", from: "number", to: "number", text: "string", cursor: "number", len: "number" },
+	focus: { id: "string" },
 	error: { msg: "string" },
 	gone: { ids: "array" },
 };

package/src/native/node.ts

@@ -13,7 +13,7 @@
  * See `packages/wire/src/tsp.ts` for the wire vocabulary and
  * `crates/tern/SURFACE_PROTOCOL.md` (Stencil repository) for the spec.
  */
-import type { TspEvent, TspKind, TspProps, TspSpan } from "@oh-my-pi/pi-wire";
+import type { TspEvent, TspKind, TspProps, TspScrollBy, TspSpan } from "@oh-my-pi/pi-wire";
 import type { Component } from "../tui";
 
 /** A described node: a wire node minus its id, with components allowed as children. */
@@ -33,9 +33,23 @@ export type NativeNode = {
 		 * added. Key a node by what it points at to reveal it again on a move.
 		 */
 		readonly reveal?: "start" | "end" | "nearest";
+		/**
+		 * Keyboard scrolling forwarded to the terminal (PgUp/PgDn/End reach the
+		 * program): moves the scroller at or above the node by `by` whenever
+		 * `n` differs from the previous description of the same node. Bump `n`
+		 * per key press; presses between two frames repeat the latest `by` once
+		 * each (`start`/`end` once). A freshly added node never scrolls.
+		 */
+		readonly scroll?: NativeScroll;
 	};
 }[TspKind];
 
+/** A {@link NativeNode.scroll} request. */
+export interface NativeScroll {
+	readonly by: TspScrollBy;
+	readonly n: number;
+}
+
 /** A child slot: a described node, or a component that describes itself. */
 export type NativeChild = NativeNode | Component;
 

package/src/native/reconcile.ts

@@ -28,7 +28,7 @@
  * into `layer`; their anchor keypaths are rewritten to wire ids.
  */
 import * as logger from "@oh-my-pi/pi-utils/logger";
-import { TSP_TEXT_KINDS, type TspKind, type TspNode, type TspOp } from "@oh-my-pi/pi-wire";
+import { TSP_TEXT_KINDS, type TspKind, type TspNode, type TspOp, type TspScrollBy } from "@oh-my-pi/pi-wire";
 import { type Component, Container, CURSOR_MARKER } from "../tui";
 import { normalizeIconProps } from "./icons";
 import type { DescribeContext, NativeChild, NativeNode } from "./node";
@@ -58,6 +58,8 @@ const REGION_IDS = ["main", "dock", "layer"] as const;
 type RegionId = (typeof REGION_IDS)[number];
 const RESERVED_IDS: ReadonlySet<string> = new Set(REGION_IDS);
 const TEXT_KINDS: ReadonlySet<string> = new Set(TSP_TEXT_KINDS);
+/** Most `scroll` ops one node's coalesced key presses send in a frame. */
+const MAX_SCROLL_REPEAT = 32;
 let nextComponentId = 0;
 
 /** Stable base-36 wire id of a component instance (its root node's id). */
@@ -213,6 +215,8 @@ export class Reconciler {
 	#settles: string[] = [];
 	/** Selected list items and added `reveal` nodes sent this frame, revealed once the frame's adds have landed. */
 	#reveals: [id: string, at: "start" | "end" | "nearest"][] = [];
+	/** `scroll` requests whose `n` moved this frame, sent after the reveals. */
+	#scrolls: [id: string, by: TspScrollBy][] = [];
 	/** Wire ids `list.selected` keys resolved to (an unresolved key names no node to reveal). */
 	#selectedIds = new Set<string>();
 	#moves: PendingMove[] = [];
@@ -250,6 +254,7 @@ export class Reconciler {
 		this.#dels = [];
 		this.#settles = [];
 		this.#reveals = [];
+		this.#scrolls = [];
 		this.#selectedIds.clear();
 		this.#framePortals = [];
 		this.#rows = 0;
@@ -293,6 +298,7 @@ export class Reconciler {
 		this.#parked = [];
 		for (const id of this.#settles) this.#ops.push(["settle", id]);
 		for (const [id, at] of this.#reveals) this.#ops.push(["reveal", id, at]);
+		if (cx.feature("scroll")) for (const [id, by] of this.#scrolls) this.#ops.push(["scroll", id, by]);
 		const ops = this.#ops;
 		this.#ops = [];
 		return this.#gone.size === 0 ? ops : ops.filter(op => !this.#touchesGone(op));
@@ -339,6 +345,19 @@ export class Reconciler {
 		return { component: state.comp, keypath };
 	}
 
+	/**
+	 * The component that described wire node `id`, then each component whose
+	 * node contains it, innermost first (empty for an unknown id).
+	 */
+	owners(id: string): Component[] {
+		const dot = id.indexOf(".");
+		const out: Component[] = [];
+		for (let state = this.#byId.get(dot === -1 ? id : id.slice(0, dot)) ?? null; state; state = state.container) {
+			out.push(state.comp);
+		}
+		return out;
+	}
+
 	/** The key a list item node was described with (its key, else its child index). */
 	itemKey(id: string): string {
 		const dot = id.indexOf(".");
@@ -583,6 +602,14 @@ export class Reconciler {
 			this.#flushMoves();
 			return;
 		}
+		const scroll = next.node.scroll;
+		if (scroll && scroll.n !== old.node.scroll?.n) {
+			// Presses described in one frame coalesce: repeat the latest step once per
+			// press (an end once), so key repeat keeps its distance.
+			const jump = scroll.by === "start" || scroll.by === "end";
+			const presses = jump ? 1 : Math.min(Math.max(scroll.n - (old.node.scroll?.n ?? 0), 1), MAX_SCROLL_REPEAT);
+			for (let i = 0; i < presses; i++) this.#scrolls.push([next.id, scroll.by]);
+		}
 		const oldEntries = this.#entries(old.node.c, old.keypath, old.owner, old.hoist, null);
 		const newEntries = this.#entries(next.node.c, next.keypath, next.owner, next.hoist, inner);
 		this.#diffProps(

package/src/overlays/extensions/extension-dashboard.ts

@@ -12,8 +12,19 @@
  * - Space/Enter or click: toggle selected item (or provider master switch)
  * - Wheel over the inspector, or PageUp/PageDown when the inspector overflows: scroll the detail pane
  * - Esc: clear search (if active) then close
+ *
+ * Natively (Tern) it is a `picker` sheet: provider scopes, the inventory as
+ * rows grouped by kind, the inspector as the side preview, and Toggle /
+ * Expand / Close actions; without `picker` it describes a page with the same
+ * parts. Pointer events run the key paths above.
  */
+import type { TspPickerAction, TspPickerColumn, TspPickerScope } from "@oh-my-pi/pi-wire";
 import type { Component } from "../../tui";
+import { col, keyed, node, span, text } from "../../native/describe";
+import { Memo } from "../../native/memo";
+import type { DescribeContext, NativeNode, NativeScroll, NativeUiEvent } from "../../native/node";
+import { actionBar, actionButton } from "../../native/overlay";
+import { CLOSE_ACTION, type PickerEvent, picker, pickerAction, pickerEvent } from "../../native/picker";
 import { matchesKey } from "../../keys";
 import { parseSgrMouse } from "../../mouse";
 import { SplitPane, type SplitPaneHit } from "../../components/layout/split-pane";
@@ -31,9 +42,9 @@ import {
 } from "../../keybinding-matchers";
 import { expandKeyHint } from "../../render/render-utils";
 import { formatKeyHint, formatKeyHints } from "../../app-keybindings";
-import { editorKeys, interruptKey } from "../../chrome/keybinding-hints";
+import { boundKeys, editorKeys, interruptKey } from "../../chrome/keybinding-hints";
 import { bottomBorder, divider, PanelRows, row, topBorder } from "../../chrome/overlay-box";
-import { ExtensionList } from "./extension-list";
+import { ExtensionList, type ExtensionListSwitch } from "./extension-list";
 import { InspectorPanel, type ToolRuntimeSource } from "./inspector-panel";
 import type { ExtensionInspectorSource } from "./inspector-model";
 import { snapshotToolRuntimeSource } from "./live-tool-session";
@@ -99,8 +110,50 @@ export function buildTabBarTabs(tabs: ProviderTab[]): Tab[] {
 	});
 }
 
+/** The sheet/page title, shared by the ANSI frame and the native views. */
+const DASHBOARD_TITLE = "Extension Control Center";
+
+/** The kind column shown when rows are not grouped under kind headers (a provider scope or a search). */
+const KIND_COLUMNS: readonly TspPickerColumn[] = [{ id: "kind", format: "dim", priority: 1 }];
+
+/** Up to two initials of a provider label, for its scope mark. */
+function providerInitials(label: string): string {
+	const words = label.split(/[\s()_-]+/).filter(word => word.length > 0);
+	return words
+		.slice(0, 2)
+		.map(word => word[0]?.toUpperCase() ?? "")
+		.join("");
+}
+
+/**
+ * Picker scopes from the provider tabs: "all" first, then each provider with
+ * its mark and count. Empty enabled providers are disabled (muted in the
+ * {@link TabBar}); switched-off providers keep a muted dot and stay
+ * selectable so their master switch can be turned back on.
+ */
+export function buildPickerScopes(tabs: ProviderTab[]): TspPickerScope[] {
+	return tabs.map(tab => {
+		if (tab.id === "all") return { id: tab.id, label: "All", icon: "extension", count: tab.count };
+		const emptyEnabled = tab.count === 0 && tab.enabled;
+		return {
+			id: tab.id,
+			label: tab.label,
+			mark: { text: providerInitials(tab.label), seed: tab.id },
+			count: tab.count,
+			group: "Providers",
+			dot: !tab.enabled ? "muted" : emptyEnabled ? "warning" : "success",
+			disabled: emptyEnabled ? "No extensions" : undefined,
+		};
+	});
+}
+
 export class ExtensionDashboard implements Component {
 	#state!: DashboardState;
+	/** Bumped by every state change that reaches the screen; keys {@link #native}. */
+	#nativeVersion = 0;
+	readonly #native = new Memo<NativeNode>();
+	/** The last inspector page key, forwarded to the native preview (see {@link NativeNode.scroll}). */
+	#inspectorScroll: NativeScroll | undefined;
 	#mainList!: ExtensionList;
 	#inspector!: InspectorPanel;
 	#tabBar!: TabBar;
@@ -231,7 +284,7 @@ export class ExtensionDashboard implements Component {
 		this.#mainList.setToolSource(toolFrame);
 		this.#inspector.setToolSource(toolFrame);
 
-		this.#frameTop.setLines([topBorder(width, "Extension Control Center")]);
+		this.#frameTop.setLines([topBorder(width, DASHBOARD_TITLE)]);
 		this.#frameTabs.setLines(tabLines.map(line => row(line, width)));
 		this.#frameUpperDivider.setLines([divider(width)]);
 		this.#frameBody.setLines(this.#body.render(innerWidth).map(line => row(line, width)));
@@ -242,6 +295,7 @@ export class ExtensionDashboard implements Component {
 	}
 
 	invalidate(): void {
+		this.#nativeVersion++;
 		this.#frame.invalidate();
 		this.#tabBar.invalidate();
 		this.#mainList.invalidate();
@@ -280,10 +334,10 @@ export class ExtensionDashboard implements Component {
 		if (event.wheel !== null) {
 			if (overList) {
 				this.#mainList.handleWheel(event.wheel);
-				this.onRequestRender?.();
+				this.#requestRender();
 			} else if (overInspector) {
 				this.#body.scrollInspector(event.wheel);
-				this.onRequestRender?.();
+				this.#requestRender();
 			}
 			return;
 		}
@@ -292,7 +346,7 @@ export class ExtensionDashboard implements Component {
 			const hoveredTab = overTabs ? this.#tabBar.tabAt(tabLine, innerCol) : undefined;
 			this.#tabBar.setHoverTab(hoveredTab && !hoveredTab.muted ? hoveredTab.id : null);
 			this.#mainList.setHoverIndex(overList ? this.#mainList.hitTest(paneLine) : null);
-			this.onRequestRender?.();
+			this.#requestRender();
 			return;
 		}
 
@@ -305,7 +359,7 @@ export class ExtensionDashboard implements Component {
 		}
 		if (overList) {
 			this.#mainList.handleClick(paneLine);
-			this.onRequestRender?.();
+			this.#requestRender();
 		}
 	}
 
@@ -329,7 +383,7 @@ export class ExtensionDashboard implements Component {
 			this.#inspector.setExtension(this.#state.selected);
 		}
 		this.#body.resetInspectorScroll();
-		this.onRequestRender?.();
+		this.#requestRender();
 	}
 
 	#handleProviderToggle(providerId: string): void {
@@ -479,7 +533,7 @@ export class ExtensionDashboard implements Component {
 		}
 
 		this.#tabBar.setTabs(buildTabBarTabs(this.#state.tabs), currentTabId);
-		this.onRequestRender?.();
+		this.#requestRender();
 	}
 
 	#applyDisabledExtensions(disabledIds: string[]): void {
@@ -489,7 +543,7 @@ export class ExtensionDashboard implements Component {
 			this.#inspector.setExtension(this.#state.selected);
 		}
 		this.#tabBar.setTabs(buildTabBarTabs(this.#state.tabs), this.#state.tabs[this.#state.activeTabIndex]?.id);
-		this.onRequestRender?.();
+		this.#requestRender();
 	}
 
 	handleInput(data: string): void {
@@ -501,34 +555,32 @@ export class ExtensionDashboard implements Component {
 
 		// Ctrl+C - close immediately
 		if (matchesKey(data, "ctrl+c")) {
-			this.dispose();
-			this.onClose?.();
+			this.#close();
 			return;
 		}
 
 		// Escape - clear search first, then close
 		if (matchesAppInterrupt(data)) {
 			if (this.#state.searchQuery.length > 0) {
-				this.#state.searchQuery = "";
-				this.#state.searchFiltered = this.#state.tabFiltered;
-				this.#mainList.setExtensions(this.#state.searchFiltered);
-				this.#mainList.clearSearch();
-				this.onRequestRender?.();
+				this.#clearSearch();
 				return;
 			}
-			this.dispose();
-			this.onClose?.();
+			this.#close();
 			return;
 		}
 
 		if (matchesAppToolsExpand(data)) {
 			this.#inspector.toggleExpanded();
-			this.onRequestRender?.();
+			this.#requestRender();
 			return;
 		}
 
-		if (this.#body.pageInspector(matchesSelectPageUp(data) ? -1 : matchesSelectPageDown(data) ? 1 : 0)) {
-			this.onRequestRender?.();
+		const page = matchesSelectPageUp(data) ? -1 : matchesSelectPageDown(data) ? 1 : 0;
+		if (page !== 0) {
+			this.#inspectorScroll = { by: page < 0 ? "page-up" : "page-down", n: (this.#inspectorScroll?.n ?? 0) + 1 };
+		}
+		if (this.#body.pageInspector(page)) {
+			this.#requestRender();
 			return;
 		}
 
@@ -546,16 +598,216 @@ export class ExtensionDashboard implements Component {
 			this.#state.searchQuery = query;
 			this.#state.searchFiltered = applyFilter(this.#state.tabFiltered, query);
 		}
+		this.#requestRender();
+	}
+
+	#close(): void {
+		this.dispose();
+		this.onClose?.();
+	}
+
+	#clearSearch(): void {
+		this.#state.searchQuery = "";
+		this.#state.searchFiltered = this.#state.tabFiltered;
+		this.#mainList.setExtensions(this.#state.searchFiltered);
+		this.#mainList.clearSearch();
+		this.#requestRender();
+	}
+
+	/** Every repaint request: the native description is stale too. */
+	#requestRender(): void {
+		this.#nativeVersion++;
 		this.onRequestRender?.();
 	}
 
+	/** The dashboard is a `picker` sheet (scopes = providers, preview = inspector) wherever Tern draws pickers. */
+	nativeSheet(cx: DescribeContext): boolean {
+		return cx.supports("picker");
+	}
+
+	/**
+	 * The picker sheet, or without `picker` a page: head, provider tabs,
+	 * search, the inventory list beside the inspector, and an action bar.
+	 * Rebuilt when state moves or the live tool set changes (MCP health
+	 * changes arrive as render requests, which bump the version).
+	 */
+	describe(cx: DescribeContext): NativeNode {
+		const sheet = this.nativeSheet(cx);
+		const toolFrame = snapshotToolRuntimeSource(this.#toolSource);
+		let tools = "";
+		for (const tool of toolFrame?.listLiveTools?.() ?? []) tools += `${tool.name}${tool.hidden ? "!" : ""}\0`;
+		return this.#native.get([this.#nativeVersion, sheet, tools, this.#inspectorScroll], () => {
+			this.#mainList.setToolSource(toolFrame);
+			this.#inspector.setToolSource(toolFrame);
+			return sheet ? this.#describePicker() : this.#describePage();
+		});
+	}
+
+	#describePicker(): NativeNode {
+		const view = this.#mainList.pickerView();
+		const activeTab = this.#state.tabs[this.#state.activeTabIndex];
+		return picker(
+			{
+				title: DASHBOARD_TITLE,
+				icon: "extension",
+				noun: "extensions",
+				size: "lg",
+				layout: "rows",
+				preview: "side",
+				...this.#mainList.nativeQuery(),
+				placeholder: "Search extensions…",
+				scopes: buildPickerScopes(this.#state.tabs),
+				scope: activeTab?.id ?? "all",
+				columns: view.grouped ? undefined : KIND_COLUMNS,
+				items: view.items,
+				order: view.order,
+				hits: view.hits,
+				selected: view.selected,
+				total: this.#state.tabFiltered.length,
+				empty: "No extensions found for this provider.",
+				actions: this.#pickerActions(this.#mainList.selectedSwitch()),
+				focus: "list",
+			},
+			this.#inspectorPreview(),
+		);
+	}
+
+	/** The inspector's preview nodes, the first carrying the page-key scroll so Tern scrolls the pane holding it. */
+	#inspectorPreview(): NativeNode[] {
+		const preview = this.#inspector.describePreview();
+		const scroll = this.#inspectorScroll;
+		const [first, ...rest] = preview;
+		return scroll && first ? [{ ...first, scroll }, ...rest] : preview;
+	}
+
+	/** Action bar: Toggle (Space/Enter), Expand (the tools-expand key), Close (Esc). */
+	#pickerActions(selected: ExtensionListSwitch | undefined): TspPickerAction[] {
+		const expanded = this.#inspector.isExpanded();
+		return [
+			pickerAction("toggle", "Toggle", "space", {
+				primary: true,
+				on: selected?.on,
+				disabled: selected ? selected.blocked : "Select an extension",
+			}),
+			pickerAction("expand", expanded ? "Collapse" : "Expand", this.#expandKey(), { on: expanded }),
+			CLOSE_ACTION,
+		];
+	}
+
+	#expandKey(): string {
+		return boundKeys("app.tools.expand", ["ctrl+o"])[0] ?? "ctrl+o";
+	}
+
+	#describePage(): NativeNode {
+		const selected = this.#mainList.selectedSwitch();
+		const query = this.#state.searchQuery;
+		const shown = this.#state.searchFiltered.length;
+		const total = this.#state.tabFiltered.length;
+		const head = node(
+			"row",
+			{ justify: "between", align: "center", role: "omp.app.head" },
+			[
+				node("row", { gap: "sm", align: "center", role: "omp.app.where" }, [
+					text(DASHBOARD_TITLE, { role: "omp.app.title" }),
+					text([span(query ? `${shown} of ${total}` : `${total} extensions`, "muted")], { truncate: "end" }),
+				]),
+				node("icon", {
+					name: "x",
+					role: "omp.app.ibtn",
+					title: `Close  ${interruptKey()}`,
+					aria: "Close",
+					actions: { click: "close" },
+				}),
+			],
+			"head",
+		);
+		const search = text([span("Search: ", "muted"), query ? span(query, "accent") : span("type to filter", "dim")], {
+			truncate: "end",
+		});
+		const body = node(
+			"row",
+			{ gap: "md", grow: 1 },
+			[
+				this.#mainList.describeList("list"),
+				{
+					...keyed(col(this.#inspector.describePreview(), { gap: "sm", grow: 1, basis: 0 }), "inspector"),
+					scroll: this.#inspectorScroll,
+				},
+			],
+			"body",
+		);
+		const expanded = this.#inspector.isExpanded();
+		const buttons: (NativeNode | null)[] = [
+			actionButton(selected?.on === false ? "Enable" : selected ? "Disable" : "Toggle", "toggle", {
+				keys: "space",
+				tone: "accent",
+				title: selected?.blocked ?? (selected ? undefined : "Select an extension"),
+			}),
+			actionButton(expanded ? "Collapse" : "Expand", "expand", { keys: this.#expandKey() }),
+		];
+		if (query) buttons.push(actionButton("Clear search", "clear", { keys: "escape" }));
+		buttons.push(null, actionButton("Close", "close", { keys: "escape" }));
+		return col([head, this.#tabBar, keyed(search, "search"), body, actionBar(buttons)], { gap: "md", grow: 1 });
+	}
+
+	/**
+	 * Pointer input, each on the path of the key it stands for: a row click
+	 * selects (click on the selected row or double click toggles, like
+	 * Space/Enter), a scope switches provider (←/→), `toggle`/`expand` run
+	 * Space and the expand key, `clear` empties the search (first Esc) and
+	 * `close` closes. Provider tabs in the page route to the {@link TabBar}.
+	 */
+	handleNativeEvent(event: NativeUiEvent): void {
+		const pick = pickerEvent(event);
+		if (pick) {
+			this.#handlePick(pick);
+			return;
+		}
+		if (event.type === "action") {
+			this.#handlePick({ kind: "action", act: event.act, value: event.value });
+			return;
+		}
+		if (
+			(event.type === "select" || event.type === "activate") &&
+			event.key.slice(event.key.lastIndexOf("/") + 1) === "list"
+		) {
+			this.#handlePick({ kind: event.type, item: event.item });
+		}
+	}
+
+	#handlePick(pick: PickerEvent): void {
+		if (pick.kind !== "action") {
+			if (this.#mainList.pickNative(pick.item, pick.kind === "activate")) this.#requestRender();
+			return;
+		}
+		switch (pick.act) {
+			case "close":
+				this.#close();
+				return;
+			case "clear":
+				this.#clearSearch();
+				return;
+			case "scope":
+				if (pick.value) this.#tabBar.selectTab(pick.value);
+				return;
+			case "toggle":
+				this.#mainList.activateSelected();
+				this.#requestRender();
+				return;
+			case "expand":
+				this.#inspector.toggleExpanded();
+				this.#requestRender();
+				return;
+		}
+	}
+
 	/**
 	 * Live MCP health is joined at render time. Connection-status events and
 	 * list-changed notifications only need to request a repaint — they must not
 	 * rewrite Extension.raw.
 	 */
 	#subscribeMcpRuntime(): void {
-		this.#unsubscribers.push(...this.#runtime.subscribeMcpChanges(() => this.onRequestRender?.()));
+		this.#unsubscribers.push(...this.#runtime.subscribeMcpChanges(() => this.#requestRender()));
 	}
 
 	dispose(): void {