@oh-my-pi/pi-tui 18.2.4 → 18.2.6

package/src/overlays/hub-frame.ts

@@ -0,0 +1,262 @@
+import { bottomBorder, dividerSplit, PanelRows, row, topBorderSplit } from "../chrome/overlay-box";
+import { SplitPane } from "../components/layout/split-pane";
+import { Stack } from "../components/layout/stack";
+import { matchesKey } from "../keys";
+import { theme } from "../theme/theme";
+import { truncateToWidth, visibleWidth } from "../utils";
+
+/** A scope row shared by fullscreen hubs, with hub-specific kinds and metadata. */
+export interface SidebarEntry<TKind extends string> {
+	id: string;
+	kind: TKind;
+	label: string;
+	annotation?: string;
+}
+
+/** A pre-styled footer choice carrying a hub-specific action. */
+export interface StripChip<TAction> {
+	label: string;
+	styled: string;
+	action: TAction;
+}
+
+/** Shared selection state for a hub's chip-bearing strip variants. */
+export interface StripState<TChip extends StripChip<unknown>> {
+	chips: TChip[];
+	index: number;
+}
+
+/** A chip hit range in frame-relative columns. */
+export interface ChipRange {
+	start: number;
+	end: number;
+	index: number;
+}
+
+/** Hub-specific sidebar decoration, independent of viewport and row layout. */
+export interface SidebarStyle {
+	icon: string;
+	annotation: string;
+	muted?: boolean;
+	hovered?: boolean;
+	padTruncated?: boolean;
+}
+
+/** Cycle a strip's selection for directional and tab input, returning whether it handled the key. */
+export function moveStripSelection(strip: StripState<StripChip<unknown>>, data: string): boolean {
+	if (matchesKey(data, "left") || matchesKey(data, "up") || matchesKey(data, "shift+tab")) {
+		strip.index = (strip.index - 1 + strip.chips.length) % strip.chips.length;
+		return true;
+	}
+	if (matchesKey(data, "right") || matchesKey(data, "down") || matchesKey(data, "tab")) {
+		strip.index = (strip.index + 1) % strip.chips.length;
+		return true;
+	}
+	return false;
+}
+
+/** Persistent fullscreen split frame, sidebar viewport, and footer chip renderer. */
+export class HubFrame {
+	/** Current sidebar viewport offset, shared with the hub's navigation. */
+	sidebarScroll = 0;
+	/** Chip hit ranges from the last footer render. */
+	chipRanges: ChipRange[] = [];
+	readonly #split: SplitPane;
+	readonly #top = new PanelRows();
+	readonly #divider = new PanelRows();
+	readonly #footer = new PanelRows();
+	readonly #bottom = new PanelRows();
+	readonly #stack: Stack;
+	readonly #title: string;
+	readonly #sidebarBounds: { min: number; max: number };
+
+	/** Compose hub-specific sidebar and body renderers into a persistent frame. */
+	constructor(
+		title: string,
+		sidebarBounds: { min: number; max: number },
+		renderSidebar: (width: number, rows: number) => string[],
+		renderBody: (width: number, height: number | undefined) => readonly string[],
+	) {
+		this.#title = title;
+		this.#sidebarBounds = sidebarBounds;
+		this.#split = new SplitPane({
+			left: (width, height) => {
+				const rows = Math.max(0, Math.floor(height ?? 10));
+				const lines = renderSidebar(width, rows);
+				while (lines.length < rows) lines.push("");
+				return lines.slice(0, rows);
+			},
+			right: renderBody,
+			prefix: () => `${theme.fg("border", theme.boxRound.vertical)} `,
+			divider: () => ` ${theme.fg("border", theme.boxRound.vertical)} `,
+			suffix: () => ` ${theme.fg("border", theme.boxRound.vertical)}`,
+		});
+		this.#stack = new Stack({
+			children: [
+				{ content: this.#top, height: 1 },
+				{ content: this.#split, grow: 1 },
+				{ content: this.#divider, height: 1 },
+				{ content: this.#footer, height: 1 },
+				{ content: this.#bottom, height: 1 },
+			],
+		});
+	}
+
+	/** Invalidate the composed layout. */
+	invalidate(): void {
+		this.#stack.invalidate();
+	}
+
+	/** Measure labels and annotations within this hub's sidebar width bounds. */
+	sidebarWidth(entries: readonly SidebarEntry<string>[]): number {
+		let longest = 0;
+		for (const entry of entries) {
+			longest = Math.max(longest, visibleWidth(entry.label) + visibleWidth(entry.annotation ?? "") + 5);
+		}
+		return Math.max(this.#sidebarBounds.min, Math.min(this.#sidebarBounds.max, longest));
+	}
+
+	/** Pan the sidebar within the current viewport's bounds. */
+	scrollSidebar(delta: number, rows: number, entryCount: number): void {
+		const maxScroll = Math.max(0, entryCount - rows);
+		this.sidebarScroll = Math.max(0, Math.min(this.sidebarScroll + delta, maxScroll));
+	}
+
+	/** Select a footer chip at a frame-relative column, if one was painted there. */
+	selectChipAt(strip: StripState<StripChip<unknown>>, col: number): boolean {
+		for (const range of this.chipRanges) {
+			if (col >= range.start && col < range.end) {
+				strip.index = range.index;
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/** Render the sidebar viewport while retaining each hub's follow and clipping policy. */
+	renderSidebar<TEntry extends SidebarEntry<string>>(
+		entries: readonly TEntry[],
+		width: number,
+		rows: number,
+		selection: { id: string; focused: boolean; follow: boolean; clamp: boolean },
+		style: (entry: TEntry, index: number) => SidebarStyle,
+	): string[] {
+		if (selection.follow) {
+			const activeIndex = Math.max(
+				0,
+				entries.findIndex(entry => entry.id === selection.id),
+			);
+			if (activeIndex < this.sidebarScroll) this.sidebarScroll = activeIndex;
+			else if (activeIndex >= this.sidebarScroll + rows) this.sidebarScroll = activeIndex - rows + 1;
+		}
+		if (selection.clamp) {
+			this.sidebarScroll = Math.max(0, Math.min(this.sidebarScroll, Math.max(0, entries.length - rows)));
+		}
+		const lines: string[] = [];
+		for (let i = this.sidebarScroll; i < Math.min(entries.length, this.sidebarScroll + rows); i++) {
+			const entry = entries[i];
+			if (!entry) continue;
+			if (entry.kind === "separator") {
+				lines.push(theme.fg("border", "─".repeat(width)));
+				continue;
+			}
+			const active = entry.id === selection.id;
+			const cursor = active && selection.focused ? theme.fg("accent", theme.nav.cursor) : " ";
+			const decoration = style(entry, i);
+			const label = decoration.muted
+				? theme.fg("dim", entry.label)
+				: active
+					? theme.bold(theme.fg("accent", entry.label))
+					: entry.label;
+			const left = `${cursor} ${decoration.icon} ${label}`;
+			const leftWidth = visibleWidth(left);
+			const annWidth = visibleWidth(decoration.annotation);
+			let line: string;
+			if (leftWidth + annWidth + 1 <= width) {
+				line = `${left}${" ".repeat(width - leftWidth - annWidth)}${decoration.annotation}`;
+			} else {
+				line = truncateToWidth(left, width);
+				if (decoration.padTruncated) {
+					const lineWidth = visibleWidth(line);
+					if (lineWidth < width) line += " ".repeat(width - lineWidth);
+				}
+			}
+			if (decoration.hovered) line = theme.bg("selectedBg", line);
+			lines.push(line);
+		}
+		return lines;
+	}
+
+	/** Render footer hints or a hub-specific strip, resetting stale mouse ranges. */
+	renderFooter(width: number, hint: string, renderStrip?: () => string): string {
+		this.chipRanges = [];
+		return renderStrip ? renderStrip() : truncateToWidth(theme.fg("dim", hint), width);
+	}
+
+	/** Render footer chips from a hub-selected horizontal window and record their hit ranges. */
+	renderChips(width: number, prefix: string, strip: StripState<StripChip<unknown>>, start = 0): string {
+		let line = prefix;
+		let col = 2 + visibleWidth(prefix);
+		if (start > 0) {
+			line += theme.fg("dim", "… ");
+			col += 2;
+		}
+		for (let i = start; i < strip.chips.length; i++) {
+			const chip = strip.chips[i];
+			if (!chip) continue;
+			const selected = i === strip.index;
+			const body = ` ${chip.styled} `;
+			const rendered = selected
+				? theme.bg("selectedBg", `${theme.fg("accent", "[")}${body}${theme.fg("accent", "]")}`)
+				: body;
+			const w = visibleWidth(body) + (selected ? 2 : 0);
+			this.chipRanges.push({ start: col, end: col + w, index: i });
+			line += rendered;
+			col += w;
+			line += " ";
+			col += 1;
+		}
+		return truncateToWidth(line, width);
+	}
+
+	/** Translate a mouse position into footer, sidebar, and body coordinates. */
+	locate(row: number, col: number) {
+		const hit = this.#stack.locate(row, col);
+		const bodyHeight = this.#stack.childRect(1)?.height ?? 0;
+		let contentLine = -1;
+		let overSidebar = false;
+		let overBody = false;
+		if (hit && hit.index === 1) {
+			const pane = this.#split.locate(hit.line, hit.col);
+			if (pane?.pane === "left") {
+				overSidebar = true;
+				contentLine = pane.line;
+			} else if (pane?.pane === "right") {
+				overBody = true;
+				contentLine = pane.line;
+			}
+		}
+		const overContent = contentLine >= 0 && contentLine < bodyHeight;
+		return {
+			footerColumn: hit?.index === 3 ? hit.col : undefined,
+			bodyHeight,
+			contentLine,
+			overSidebar: overSidebar && overContent,
+			overBody: overBody && overContent,
+			bodyLine: contentLine - 1,
+		};
+	}
+
+	/** Paint a complete fullscreen hub with its title, width bounds, and contextual footer. */
+	render(width: number, height: number, entries: readonly SidebarEntry<string>[], footer: string): readonly string[] {
+		const contentRows = Math.max(10, height - 4);
+		this.#split.setLeftSize({ fixed: this.sidebarWidth(entries) });
+		const leftWidth = this.#split.measure(width).left?.width ?? 0;
+		this.#top.setLines([topBorderSplit(width, this.#title, leftWidth)]);
+		this.#divider.setLines([dividerSplit(width, leftWidth)]);
+		this.#footer.setLines([row(footer, width)]);
+		this.#bottom.setLines([bottomBorder(width)]);
+		this.#stack.setHeight(contentRows + 4);
+		return this.#stack.render(width);
+	}
+}

package/src/overlays/login-dialog.ts

@@ -0,0 +1,231 @@
+import { getOAuthProviders } from "@oh-my-pi/pi-ai/oauth";
+import type { OAuthPrompt } from "@oh-my-pi/pi-ai/oauth/types";
+import { Container, getKeybindings, Spacer, Text, type TUI, wrapTextWithAnsi } from "../index";
+import { theme } from "../theme/theme";
+import { urlHyperlinkAlways, WidthAwareText } from "../render/index";
+import { formTheme } from "../chrome/form-theme";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { TextFormField } from "../components/form";
+
+/**
+ * Login dialog component - replaces editor during OAuth login flow
+ */
+export class LoginDialogComponent extends OverlayPanel {
+	#contentContainer: Container;
+	#input: TextFormField;
+	#tui: TUI;
+	#onComplete: (success: boolean, message?: string) => void;
+	#openUrl: (url: string) => void;
+	#abortController = new AbortController();
+	#inputResolver?: (value: string) => void;
+	#inputRejecter?: (error: Error) => void;
+	#inputAbortCleanup?: () => void;
+
+	constructor(
+		tui: TUI,
+		providerId: string,
+		onComplete: (success: boolean, message?: string) => void,
+		openUrl: (url: string) => void,
+	) {
+		const providerInfo = getOAuthProviders().find(p => p.id === providerId);
+		const providerName = providerInfo?.name || providerId;
+		super(`Login to ${providerName}`);
+		this.#tui = tui;
+		this.#onComplete = onComplete;
+		this.#openUrl = openUrl;
+
+		// Dynamic content area
+		this.#contentContainer = new Container();
+		this.addChild(this.#contentContainer);
+
+		this.#input = this.#createInput();
+	}
+
+	#createInput(secret = false): TextFormField {
+		return new TextFormField({
+			theme: formTheme,
+			secret,
+			empty: "submit",
+			spaceBeforeControl: false,
+			spaceAfterControl: false,
+			onSubmit: value => {
+				const resolve = this.#inputResolver;
+				if (!resolve) return;
+				this.#clearInputHandlers();
+				resolve(value);
+			},
+			onCancel: () => {
+				this.#cancel();
+			},
+			requestRender: () => this.#tui.requestRender(),
+		});
+	}
+
+	get signal(): AbortSignal {
+		return this.#abortController.signal;
+	}
+
+	#cancel(): void {
+		this.#abortController.abort();
+		const reject = this.#inputRejecter;
+		this.#clearInputHandlers();
+		reject?.(new Error("Login cancelled"));
+		this.#onComplete(false, "Login cancelled");
+	}
+
+	/**
+	 * Called by the OAuth `onAuth` callback. Renders the full authorization URL
+	 * as the primary copy target — that works from any machine, including
+	 * SSH/WSL/headless sessions where the OMP-hosted `launchUrl` would resolve
+	 * against the user's local browser and fail. When `launchUrl` is present it
+	 * is offered as an additional local shortcut so narrow local terminals still
+	 * have a truncation-safe copy target (viewport clipping on a long authorize
+	 * URL silently drops trailing OAuth query parameters — e.g.
+	 * `code_challenge_method=S256`). Every physical URL row carries its own OSC 8
+	 * link to the full URL, so clicking any wrapped fragment opens the same target.
+	 */
+	showAuth(url: string, instructions?: string, launchUrl?: string): void {
+		this.#contentContainer.clear();
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(
+			new WidthAwareText(
+				contentWidth =>
+					wrapTextWithAnsi(url, contentWidth)
+						.map(row => theme.fg("accent", urlHyperlinkAlways(url, row)))
+						.join("\n"),
+				0,
+				0,
+			),
+		);
+
+		const clickHint = process.platform === "darwin" ? "Cmd+click to open" : "Ctrl+click to open";
+		const hyperlink = `\x1b]8;;${url}\x07${clickHint}\x1b]8;;\x07`;
+		this.#contentContainer.addChild(new Text(theme.fg("dim", hyperlink), 0, 0));
+
+		if (launchUrl && launchUrl !== url) {
+			this.#contentContainer.addChild(
+				new Text(theme.fg("dim", `Local shortcut (this machine only): ${launchUrl}`), 0, 0),
+			);
+		}
+
+		if (instructions) {
+			this.#contentContainer.addChild(new Spacer(1));
+			this.#contentContainer.addChild(new Text(theme.fg("warning", instructions), 0, 0));
+		}
+
+		// Open browser (best-effort)
+		this.#openUrl(url);
+
+		this.#tui.requestRender();
+	}
+
+	/**
+	 * Show input for manual code/URL entry (for callback server providers)
+	 */
+	showManualInput(prompt: string, signal?: AbortSignal): Promise<string> {
+		// Keep retry chrome in place, but discard prior prompt undo/kill history.
+		const mounted = this.#contentContainer.children.indexOf(this.#input);
+		this.#input = this.#createInput();
+		if (mounted !== -1) {
+			this.#contentContainer.children.splice(mounted, 1, this.#input);
+		} else {
+			this.#contentContainer.addChild(new Spacer(1));
+			this.#contentContainer.addChild(new Text(theme.fg("dim", prompt), 0, 0));
+			this.#contentContainer.addChild(this.#input);
+			this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 0, 0));
+		}
+		this.#tui.requestRender();
+
+		if (signal?.aborted) {
+			return Promise.reject(signal.reason instanceof Error ? signal.reason : new Error("Login input cancelled"));
+		}
+		const { promise, resolve, reject } = Promise.withResolvers<string>();
+		this.#inputResolver = resolve;
+		this.#inputRejecter = reject;
+		if (signal) {
+			const onAbort = () => {
+				if (this.#inputRejecter !== reject) return;
+				this.#clearInputHandlers();
+				reject(signal.reason instanceof Error ? signal.reason : new Error("Login input cancelled"));
+			};
+			signal.addEventListener("abort", onAbort, { once: true });
+			this.#inputAbortCleanup = () => signal.removeEventListener("abort", onAbort);
+		}
+		return promise;
+	}
+
+	/**
+	 * Called by onPrompt callback - show prompt and wait for input
+	 * Note: Does NOT clear content, appends to existing (preserves URL from showAuth)
+	 */
+	showPrompt(prompt: OAuthPrompt): Promise<string> {
+		// Multi-step flows keep prior answers visible, except secrets.
+		const mounted = this.#contentContainer.children.indexOf(this.#input);
+		if (mounted !== -1) {
+			const value = this.#input.input.mask ? "********" : this.#input.getValue();
+			const answer = new Text(theme.fg("dim", `${this.#input.input.prompt}${value}`), 0, 0);
+			this.#contentContainer.removeChild(this.#input);
+			this.#contentContainer.children.splice(mounted, 0, answer);
+		}
+		// A new prompt must not recover a previous secret through undo or yank.
+		this.#input = this.#createInput(prompt.secret === true);
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("text", prompt.message), 0, 0));
+		if (prompt.placeholder) {
+			this.#contentContainer.addChild(new Text(theme.fg("dim", `e.g., ${prompt.placeholder}`), 0, 0));
+		}
+		this.#contentContainer.addChild(this.#input);
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel, Enter to submit)"), 0, 0));
+
+		this.#tui.requestRender();
+
+		this.#inputAbortCleanup?.();
+		this.#inputAbortCleanup = undefined;
+		const { promise, resolve, reject } = Promise.withResolvers<string>();
+		this.#inputResolver = resolve;
+		this.#inputRejecter = reject;
+		return promise;
+	}
+
+	#clearInputHandlers(): void {
+		this.#inputAbortCleanup?.();
+		this.#inputAbortCleanup = undefined;
+		this.#inputResolver = undefined;
+		this.#inputRejecter = undefined;
+	}
+
+	/**
+	 * Show waiting message (for polling flows like GitHub Copilot)
+	 */
+	showWaiting(message: string): void {
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", message), 0, 0));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 0, 0));
+		this.#tui.requestRender();
+	}
+
+	/**
+	 * Called by onProgress callback
+	 */
+	showProgress(message: string): void {
+		this.#contentContainer.addChild(new Text(theme.fg("dim", message), 0, 0));
+		this.#tui.requestRender();
+	}
+
+	/** Route non-bracketed paste transports into the active login input. */
+	pasteText(text: string): void {
+		this.#input.pasteText(text);
+	}
+
+	handleInput(data: string): void {
+		const kb = getKeybindings();
+
+		if (kb.matches(data, "tui.select.cancel")) {
+			this.#cancel();
+			return;
+		}
+
+		// Pass to input
+		this.#input.handleInput(data);
+	}
+}

package/src/overlays/logout-account-selector.ts

@@ -0,0 +1,115 @@
+import { Container, matchesKey, ScrollView, TruncatedText } from "../index";
+import { theme } from "../theme/theme";
+import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { MenuSelection } from "../components/menu-selection";
+import { centeredViewportRange } from "../components/scroll-viewport";
+
+const LOGOUT_SELECTOR_MAX_VISIBLE = 10;
+
+export interface LogoutAccount {
+	credentialId: number;
+	provider: string;
+	label: string;
+	detail: string;
+	type: "api_key" | "oauth";
+	active: boolean;
+}
+
+/** Account picker for `/logout` after the provider has been selected. */
+export class LogoutAccountSelectorComponent extends OverlayPanel {
+	#listContainer: Container;
+	#menu: MenuSelection<LogoutAccount>;
+	#onSelectCallback: (account: LogoutAccount) => void;
+	#onCancelCallback: () => void;
+
+	constructor(
+		providerName: string,
+		accounts: LogoutAccount[],
+		onSelect: (account: LogoutAccount) => void,
+		onCancel: () => void,
+	) {
+		super(`Select ${providerName} account to log out`);
+		this.#onSelectCallback = onSelect;
+		this.#onCancelCallback = onCancel;
+		const active = accounts.find(account => account.active);
+		this.#menu = new MenuSelection<LogoutAccount>(
+			accounts,
+			{
+				getKey: account => String(account.credentialId),
+				getSearchText: account => `${account.label} ${account.detail} ${account.provider}`,
+			},
+			active ? String(active.credentialId) : undefined,
+		);
+
+		this.#listContainer = new Container();
+		this.addChild(this.#listContainer);
+		this.#updateList();
+	}
+
+	#updateList(): void {
+		this.#listContainer.clear();
+
+		const items = this.#menu.visibleItems;
+		const total = items.length;
+		const maxVisible = LOGOUT_SELECTOR_MAX_VISIBLE;
+		const { start: startIndex, end: endIndex } = centeredViewportRange(this.#menu.selectedIndex, total, maxVisible);
+
+		const rows: string[] = [];
+		for (let i = startIndex; i < endIndex; i++) {
+			const account = items[i];
+			if (!account) continue;
+			const activeTag = account.active ? theme.fg("muted", " (active)") : "";
+			const detail = account.detail ? theme.fg("dim", `  ${account.detail}`) : "";
+			if (i === this.#menu.selectedIndex) {
+				rows.push(`${theme.fg("accent", `${theme.nav.cursor} ${account.label}`)}${activeTag}${detail}`);
+			} else {
+				rows.push(`  ${account.label}${activeTag}${detail}`);
+			}
+		}
+
+		if (rows.length > 0) {
+			const sv = new ScrollView(rows, {
+				height: rows.length,
+				scrollbar: "auto",
+				totalRows: total,
+				theme: { track: text => theme.fg("muted", text), thumb: text => theme.fg("accent", text) },
+			});
+			sv.setScrollOffset(startIndex);
+			this.#listContainer.addChild(sv);
+		}
+
+		if (total === 0) {
+			this.#listContainer.addChild(new TruncatedText(theme.fg("muted", "No stored accounts to log out"), 0, 0));
+		}
+
+		this.#listContainer.addChild(
+			new TruncatedText(theme.fg("muted", "↑/↓ select · ↵ log out account · Esc cancel"), 0, 0),
+		);
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesSelectCancel(keyData)) {
+			this.#onCancelCallback();
+			return;
+		}
+
+		if (matchesSelectUp(keyData)) {
+			this.#menu.move(-1, true);
+			this.#updateList();
+		} else if (matchesSelectDown(keyData)) {
+			this.#menu.move(1, true);
+			this.#updateList();
+		} else if (matchesKey(keyData, "pageUp")) {
+			this.#menu.move(-LOGOUT_SELECTOR_MAX_VISIBLE, false);
+			this.#updateList();
+		} else if (matchesKey(keyData, "pageDown")) {
+			this.#menu.move(LOGOUT_SELECTOR_MAX_VISIBLE, false);
+			this.#updateList();
+		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			const account = this.#menu.selectedItem;
+			if (!account) return;
+			this.#onSelectCallback(account);
+		}
+	}
+}