@oh-my-pi/pi-tui 18.13.2 → 18.14.0

package/src/overlays/model-browser.ts

@@ -42,6 +42,7 @@ import type {
 	TspPickerGroup,
 	TspPickerItem,
 	TspPickerMark,
+	TspPickerProps,
 	TspSpan,
 	TspText,
 } from "@oh-my-pi/pi-wire";
@@ -918,6 +919,22 @@ export interface ModelPickerCatalogue {
 	readonly itemsDel?: readonly string[];
 }
 
+/** The search, fact-column and row props every model `picker` sheet sends ({@link ModelBrowser.pickerRows}). */
+export type ModelPickerRows = Pick<
+	TspPickerProps,
+	| "query"
+	| "cursor"
+	| "columns"
+	| "items"
+	| "itemsAdd"
+	| "itemsDel"
+	| "order"
+	| "hits"
+	| "selected"
+	| "current"
+	| "total"
+>;
+
 /** How {@link ModelBrowser.pickerOrder} heads its rows. */
 export interface ModelPickerGrouping {
 	/** One group per provider after the Recent block (the unfiltered All models view). */
@@ -1933,6 +1950,26 @@ export class ModelBrowser implements Component {
 		return selected && !this.#isDisabled(selected) ? selected.selector : null;
 	}
 
+	/**
+	 * A model picker's search field, fact columns and rows: `catalogue` (from
+	 * {@link pickerItems}) in `view` order (from {@link pickerOrder}), the
+	 * selection, and `current` checked. Memoize hosts on its inputs plus
+	 * {@link query}, {@link cursor} and {@link pickerSelected}.
+	 */
+	pickerRows(catalogue: ModelPickerCatalogue, view: ModelPickerOrder, current: string | undefined): ModelPickerRows {
+		return {
+			query: this.query,
+			cursor: this.cursor,
+			columns: MODEL_PICKER_COLUMNS,
+			...catalogue,
+			order: view.order,
+			...(view.hits ? { hits: view.hits } : {}),
+			selected: this.pickerSelected,
+			...(current ? { current: [current] } : {}),
+			total: this.baseCount,
+		};
+	}
+
 	/**
 	 * Picker rows for `catalogue`: the same object while the catalogue, roles
 	 * and row inputs are unchanged, so typing and scope hops never resend it.

package/src/overlays/model-hub.ts

@@ -3370,13 +3370,7 @@ export class ModelHubComponent implements Component {
 				...props,
 				tabs: this.#pickerKindTabs(),
 				tab: this.#modelKindTab,
-				columns: MODEL_PICKER_COLUMNS,
-				...catalogue,
-				order: view.order,
-				...(view.hits ? { hits: view.hits } : {}),
-				selected: this.#browser.pickerSelected,
-				...(current ? { current } : {}),
-				total: this.#browser.baseCount,
+				...this.#browser.pickerRows(catalogue, view, this.#currentSelector),
 				state,
 				...(state === "error" && this.#configError ? { message: this.#configError } : {}),
 				empty:

package/src/overlays/model-picker.ts

@@ -11,7 +11,6 @@ import type { Component, TUI } from "../tui";
 import { type ThemeColor, theme } from "../theme/theme";
 import {
 	buildSessionModelScope,
-	MODEL_PICKER_COLUMNS,
 	ModelBrowser,
 	type ModelBrowserItem,
 	type ModelPickerCatalogue,
@@ -424,17 +423,9 @@ export class ModelPickerComponent implements Component {
 				size: "md",
 				layout: "rows",
 				preview: "below",
-				query,
-				cursor,
 				placeholder:
 					mode === "task" || mode === "selection" ? "Search models…" : "Search models, @ for quick roles…",
-				columns: MODEL_PICKER_COLUMNS,
-				...catalogue,
-				order: view.order,
-				...(view.hits ? { hits: view.hits } : {}),
-				selected,
-				...(current ? { current: [current] } : {}),
-				total: this.#browser.baseCount,
+				...this.#browser.pickerRows(catalogue, view, current),
 				empty: mode === "role" ? `No quick roles in the ${cycleKey} cycle` : "No models available",
 				actions: compact([
 					pickerAction(

package/src/overlays/oauth-selector.ts

@@ -17,7 +17,7 @@ import { OverlayPanel } from "../chrome/overlay-box";
 import { Input } from "../components/input";
 import { MenuSelection } from "../components/menu-selection";
 import { centeredViewportRange } from "../components/scroll-viewport";
-import type { TspPickerItem, TspSpan, TspTone } from "@oh-my-pi/pi-wire";
+import type { TspPickerAction, TspPickerItem, TspSpan, TspText, TspTone } from "@oh-my-pi/pi-wire";
 import { node, span, text } from "../native/describe";
 import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
 import { CLOSE_ACTION, dockedPicker, PICKER_KEY, pickerAction, pickerEvent, pickerQuery } from "../native/picker";
@@ -32,6 +32,21 @@ export interface OAuthSelectorAuthSource {
 	readonly keys: Pick<KeysApi, "source">;
 }
 
+/**
+ * How a host other than `/login` presents the native provider sheet (the
+ * setup wizard): its heading, `role` and size, a status line docked above the
+ * action bar, and the Esc action that leaves in place of Close (the action's
+ * `id` cancels like Esc).
+ */
+export interface OAuthSelectorSheet {
+	readonly title: string;
+	readonly subtitle: TspText;
+	readonly role: string;
+	readonly size: "md" | "lg";
+	readonly status?: TspText;
+	readonly leave: { readonly id: string; readonly label: string };
+}
+
 /**
  * Rendered lines before the provider rows: top border
  * (must mirror the constructor's addChild order).
@@ -80,6 +95,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 	/** Picker rows for the whole catalogue; dropped when an auth state changes. */
 	#pickerItems: readonly TspPickerItem[] | undefined;
 	#pickerRoot: NativeNode | undefined;
+	#sheet: OAuthSelectorSheet | undefined;
 	constructor(
 		mode: "login" | "logout",
 		authStorage: OAuthSelectorAuthSource,
@@ -89,6 +105,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			disabledProviders?: readonly string[];
 			validateAuth?: (providerId: string) => Promise<boolean>;
 			requestRender?: () => void;
+			sheet?: OAuthSelectorSheet;
 		},
 	) {
 		super(mode === "login" ? "Select provider to login" : "Select provider to logout", "omp.overlay.oauth");
@@ -98,6 +115,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 		this.#onCancelCallback = onCancel;
 		this.#validateAuthCallback = options?.validateAuth;
 		this.#requestRenderCallback = options?.requestRender;
+		this.#sheet = options?.sheet;
 		this.#menu = new MenuSelection<OAuthProviderInfo>([], {
 			getKey: provider => provider.id,
 			getSearchText: provider => this.#getProviderSearchText(provider),
@@ -117,6 +135,20 @@ export class OAuthSelectorComponent extends OverlayPanel {
 		this.#stopSpinner();
 	}
 
+	/** Replace the native sheet's presentation (a new outcome line, a relabelled leave action). */
+	setSheet(sheet: OAuthSelectorSheet): void {
+		this.#sheet = sheet;
+		this.#pickerRoot = undefined;
+	}
+
+	/** Re-read credential state after a sign-in stored one, keeping the query and selection. */
+	refreshAuth(): void {
+		this.#nativeItems = undefined;
+		this.#pickerItems = undefined;
+		this.#menu.setItems(this.#menu.items);
+		this.#updateList();
+	}
+
 	/**
 	 * Fit the selector into `lines` rendered rows by shrinking the visible list
 	 * window (the window is centered on the selection, so the selected row is
@@ -504,12 +536,17 @@ export class OAuthSelectorComponent extends OverlayPanel {
 		const query = this.#menu.query;
 		const login = this.#mode === "login";
 		const search = this.#shouldRenderSearchStatus() ? pickerQuery(this.#search) : pickerQuery(null);
+		const sheet = this.#sheet;
+		const leave: TspPickerAction = sheet
+			? pickerAction(sheet.leave.id, sheet.leave.label, "escape", { end: true })
+			: CLOSE_ACTION;
 		this.#pickerRoot = dockedPicker({
-			title: login ? "Sign in" : "Sign out",
-			subtitle: login ? "Pick a provider" : "Remove stored credentials",
+			...(sheet ? { role: sheet.role } : {}),
+			title: sheet?.title ?? (login ? "Sign in" : "Sign out"),
+			subtitle: sheet?.subtitle ?? (login ? "Pick a provider" : "Remove stored credentials"),
 			icon: "key-round",
 			noun: "providers",
-			size: "md",
+			size: sheet?.size ?? "md",
 			layout: "cards",
 			preview: "none",
 			...search,
@@ -520,6 +557,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			total: all.length,
 			empty: login ? "No OAuth providers available" : "No stored provider credentials to log out",
 			...(this.#statusMessage ? { message: this.#statusMessage } : {}),
+			...(sheet?.status ? { strip: { label: sheet.status, items: [] } } : {}),
 			actions: [
 				pickerAction(
 					"confirm",
@@ -527,7 +565,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 					"enter",
 					login ? { primary: true } : { primary: true, danger: true },
 				),
-				CLOSE_ACTION,
+				leave,
 			],
 		});
 		return this.#pickerRoot;
@@ -596,7 +634,7 @@ export class OAuthSelectorComponent extends OverlayPanel {
 			else if (ev.act === "clear") {
 				this.#search.setValue("");
 				this.#syncSearchQuery();
-			} else if (ev.act === "close" || ev.act === "cancel") {
+			} else if (ev.act === "close" || ev.act === "cancel" || ev.act === this.#sheet?.leave.id) {
 				this.stopValidation();
 				this.#onCancelCallback();
 			}

package/src/overlays/plan-review-overlay.ts

@@ -256,6 +256,8 @@ export interface PlanReviewOverlayOptions {
 	slider?: HookSelectorSlider;
 	/** Display label for the external-editor key, surfaced in the footer help. */
 	externalEditorLabel?: string;
+	/** The external editor's name ("Notepad", "nvim") for the native Edit button; `$EDITOR` when unset. */
+	externalEditorName?: string;
 	/** Serializable annotations restored into this overlay instance. */
 	annotationState?: PlanReviewAnnotationState;
 }
@@ -286,6 +288,7 @@ export class PlanReviewOverlay implements Component {
 	#disabled: Set<number>;
 	#helpSuffix: string | undefined;
 	#externalEditorLabel: string | undefined;
+	#externalEditorName: string | undefined;
 	#promptTitle: string | undefined;
 	#selectedIndex: number;
 	#slider: HookSelectorSlider | undefined;
@@ -354,6 +357,7 @@ export class PlanReviewOverlay implements Component {
 		);
 		this.#helpSuffix = options.helpText;
 		this.#externalEditorLabel = options.externalEditorLabel;
+		this.#externalEditorName = options.externalEditorName;
 		this.#promptTitle = options.promptTitle;
 		this.#selectedIndex = this.#coerceIndex(options.initialIndex ?? 0);
 		if (options.slider && options.slider.segments.length > 0) {
@@ -1632,7 +1636,13 @@ export class PlanReviewOverlay implements Component {
 		// Unbound: the button still mirrors the callback, without a keycap.
 		const editorKeyId = getKeybindings().getKeys("app.editor.external")[0];
 		if (this.callbacks.onExternalEditor) {
-			buttons.push(actionButton("Edit in $EDITOR", "externalEditor", editorKeyId ? { keys: editorKeyId } : {}));
+			buttons.push(
+				actionButton(
+					`Edit in ${this.#externalEditorName ?? "$EDITOR"}`,
+					"externalEditor",
+					editorKeyId ? { keys: editorKeyId } : {},
+				),
+			);
 		}
 		// Cancel the review the way the cancel key does; while annotating that key
 		// only leaves the draft/chooser, so the button is hidden there.
@@ -1754,7 +1764,8 @@ export class PlanReviewOverlay implements Component {
 			"tabs",
 		);
 		const track: NativeChild[] = slider.caption ? [text([span(slider.caption, "dim")]), tabs] : [tabs];
-		const out = [keyed(rowNode(track, { gap: "sm", align: "center" }), "slider")];
+		// A role of its own: Tern's sheet lets only the role-less split row (Contents + body) shrink and scroll.
+		const out = [keyed(rowNode(track, { role: "omp.plan.slider", gap: "sm", align: "center" }), "slider")];
 		const detail = slider.segments[this.#sliderIndex]?.detail;
 		if (detail) out.push(keyed(text([span("↳ ", "dim"), span(detail, "muted")], { wrap: "word" }), "sliderDetail"));
 		return out;

package/src/overlays/rewind-selector.ts

@@ -46,7 +46,11 @@ import { recentTranscriptEntries, type TranscriptEntryLike as TranscriptEntry }
 import { theme } from "../theme/theme";
 import { matchesAppToolsExpand, matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
 import { ChatTranscriptBuilder } from "../chat/chat-transcript-builder";
-import { TranscriptBrowser, type TranscriptBrowserFrame } from "../chat/transcript-browser";
+import {
+	nearestVisibleOutlineTarget,
+	TranscriptBrowser,
+	type TranscriptBrowserFrame,
+} from "../chat/transcript-browser";
 import { padToWidth } from "../render/utils";
 import { expandKeyHint } from "../render/render-utils";
 import { formatKeyHint, formatKeyHints } from "../app-keybindings";
@@ -55,6 +59,7 @@ import {
 	appendOutlineEntries,
 	type ComposedColumn,
 	composeOutlineColumn,
+	describedVisibility,
 	type OutlineTarget,
 	isUserTurnEntry,
 	outlineVisibility,
@@ -682,6 +687,21 @@ export class RewindSelectorComponent implements Component {
 		return this.#mainVisible?.[index] ?? true;
 	}
 
+	/**
+	 * Adopt the main path's per-target visibility. A selection on a target
+	 * that shows nothing (the empty turn an interrupt leaves last, a turn the
+	 * expansion toggle collapsed) moves to the nearest one that shows and
+	 * leaves the strip.
+	 */
+	#adoptVisibility(visible: boolean[]): void {
+		this.#mainVisible = visible;
+		const selected = nearestVisibleOutlineTarget(visible, this.#selected);
+		if (selected === this.#selected) return;
+		this.#selected = selected;
+		this.#activeVariant = 0;
+		this.#siblingSelected = 0;
+	}
+
 	// ========================================================================
 	// Native: the transcript as a page
 	// ========================================================================
@@ -694,12 +714,13 @@ export class RewindSelectorComponent implements Component {
 	 * of branch columns, the current path first. The bar is this component's
 	 * own node, docked under the page, so the filter field keeps the caret.
 	 */
-	describeScreen(_cx: DescribeContext): NativeScreen {
-		return { role: "omp.rewind", main: this.#page(), dock: [this] };
+	describeScreen(cx: DescribeContext): NativeScreen {
+		this.#adoptVisibility(describedVisibility(this.#builder.container.children, this.#targets, cx));
+		return { role: "omp.rewind", main: this.#page(cx), dock: [this] };
 	}
 
 	/** The page's blocks, marked for the current outline. */
-	#page(): NativeChild[] {
+	#page(cx: DescribeContext): NativeChild[] {
 		const blocks = this.#builder.container.children;
 		const page: NativeChild[] = [];
 		const filter = this.#filter;
@@ -741,6 +762,9 @@ export class RewindSelectorComponent implements Component {
 		for (let index = 0; index < columns.length; index++) {
 			const column = columns[index]!;
 			const active = this.#activeVariant === index + 1;
+			if (active) {
+				this.#siblingVisible = describedVisibility(column.builder.container.children, column.targets, cx);
+			}
 			const children: NativeChild[] = [this.#columnHead(index + 1, count, column.label)];
 			const picked = active ? this.#siblingSelected : -1;
 			this.#markRun(children, column.builder.container.children, 0, column.targets, picked, column.rootId);
@@ -900,15 +924,8 @@ export class RewindSelectorComponent implements Component {
 		// rows a matching two-column left gutter so blocks never shift while stepping.
 		const children = this.#builder.container.children;
 		const prepared = this.#browser.prepareOutline(children, this.#targets, this.#selected, contentWidth);
-		this.#mainVisible = prepared.visible;
 		this.#mainRows = prepared.childRows;
-		if (prepared.selected !== this.#selected) {
-			// The current target collapsed (e.g. expansion toggle): rest on the
-			// nearest visible one and leave the strip.
-			this.#selected = prepared.selected;
-			this.#activeVariant = 0;
-			this.#siblingSelected = 0;
-		}
+		this.#adoptVisibility(prepared.visible);
 
 		if (this.#filter !== undefined) return this.#filterFrame(this.#filter, prepared.childRows, contentWidth);