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

package/src/overlays/login-dialog.ts

@@ -8,6 +8,18 @@ import { OverlayPanel } from "../chrome/overlay-box";
 import { TextFormField } from "../components/form";
 import { formatKeyHint, keyHintPlatform } from "../app-keybindings";
 import { editorKey } from "../chrome/keybinding-hints";
+import { col, keyed, node, span, text } from "../native/describe";
+import type { NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { actionBar, actionButton } from "../native/overlay";
+import { plainText } from "../native/spans";
+
+/** `Enter code: ABCD-1234` style device-flow instructions: the lead-in and the code. */
+const DEVICE_CODE_INSTRUCTIONS = /^(.*\bcode:?\s+)([A-Za-z0-9][A-Za-z0-9-]{3,})\s*$/s;
+
+/** One native step after the sign-in link: a text answer (live or given) or a progress message. */
+type LoginStep =
+	| { kind: "input"; message: string; placeholder?: string; paste: boolean; field: TextFormField; answer?: string }
+	| { kind: "progress"; message: string };
 
 /**
  * Login dialog component - replaces editor during OAuth login flow
@@ -22,6 +34,12 @@ export class LoginDialogComponent extends OverlayPanel {
 	#inputResolver?: (value: string) => void;
 	#inputRejecter?: (error: Error) => void;
 	#inputAbortCleanup?: () => void;
+	readonly #providerName: string;
+	/** The sign-in link from `showAuth` (native step 1 and the device code). */
+	#nativeAuth: { url: string; launchUrl?: string; instructions?: string } | undefined;
+	/** Native steps after the link, in arrival order; the live input field is embedded by identity. */
+	#nativeSteps: LoginStep[] = [];
+	#nativeRoot: NativeNode | undefined;
 
 	constructor(
 		tui: TUI,
@@ -31,7 +49,8 @@ export class LoginDialogComponent extends OverlayPanel {
 	) {
 		const providerInfo = getOAuthProviders().find(p => p.id === providerId);
 		const providerName = providerInfo?.name || providerId;
-		super(`Login to ${providerName}`);
+		super(`Login to ${providerName}`, "omp.overlay.login");
+		this.#providerName = providerName;
 		this.#tui = tui;
 		this.#onComplete = onComplete;
 		this.#openUrl = openUrl;
@@ -115,6 +134,14 @@ export class LoginDialogComponent extends OverlayPanel {
 			this.#contentContainer.addChild(new Text(theme.fg("warning", instructions), 0, 0));
 		}
 
+		this.#nativeAuth = {
+			url,
+			launchUrl: launchUrl && launchUrl !== url ? launchUrl : undefined,
+			instructions: instructions ? plainText(instructions) : undefined,
+		};
+		this.#nativeSteps = [];
+		this.#nativeRoot = undefined;
+
 		// Open browser (best-effort)
 		this.#openUrl(url);
 
@@ -127,10 +154,14 @@ export class LoginDialogComponent extends OverlayPanel {
 	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);
+		const previousInput = this.#input;
 		this.#input = this.#createInput();
+		const nativeMounted = this.#nativeSteps.find(step => step.kind === "input" && step.field === previousInput);
 		if (mounted !== -1) {
 			this.#contentContainer.children.splice(mounted, 1, this.#input);
+			if (nativeMounted?.kind === "input") nativeMounted.field = this.#input;
 		} else {
+			this.#nativeSteps.push({ kind: "input", message: plainText(prompt), paste: true, field: this.#input });
 			this.#contentContainer.addChild(new Spacer(1));
 			this.#contentContainer.addChild(new Text(theme.fg("dim", prompt), 0, 0));
 			this.#contentContainer.addChild(this.#input);
@@ -138,6 +169,7 @@ export class LoginDialogComponent extends OverlayPanel {
 				new Text(theme.fg("dim", `(${editorKey("tui.select.cancel")} to cancel)`), 0, 0),
 			);
 		}
+		this.#nativeRoot = undefined;
 		this.#tui.requestRender();
 
 		if (signal?.aborted) {
@@ -170,6 +202,8 @@ export class LoginDialogComponent extends OverlayPanel {
 			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);
+			const answered = this.#nativeSteps.find(step => step.kind === "input" && step.field === this.#input);
+			if (answered?.kind === "input") answered.answer = `${plainText(this.#input.input.prompt)}${value}`;
 		}
 		// A new prompt must not recover a previous secret through undo or yank.
 		this.#input = this.#createInput(prompt.secret === true);
@@ -189,6 +223,14 @@ export class LoginDialogComponent extends OverlayPanel {
 				0,
 			),
 		);
+		this.#nativeSteps.push({
+			kind: "input",
+			message: plainText(prompt.message),
+			placeholder: prompt.placeholder ? plainText(prompt.placeholder) : undefined,
+			paste: false,
+			field: this.#input,
+		});
+		this.#nativeRoot = undefined;
 
 		this.#tui.requestRender();
 
@@ -214,6 +256,8 @@ export class LoginDialogComponent extends OverlayPanel {
 		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", `(${editorKey("tui.select.cancel")} to cancel)`), 0, 0));
+		this.#nativeSteps.push({ kind: "progress", message: plainText(message) });
+		this.#nativeRoot = undefined;
 		this.#tui.requestRender();
 	}
 
@@ -222,9 +266,147 @@ export class LoginDialogComponent extends OverlayPanel {
 	 */
 	showProgress(message: string): void {
 		this.#contentContainer.addChild(new Text(theme.fg("dim", message), 0, 0));
+		this.#nativeSteps.push({ kind: "progress", message: plainText(message) });
+		this.#nativeRoot = undefined;
 		this.#tui.requestRender();
 	}
 
+	/**
+	 * A glass sheet over the composer (the dialog replaces the editor in the
+	 * dock; the `overlay` hoists into the terminal's layer): numbered steps —
+	 * open or copy the sign-in link, the device code, the live wait, the paste
+	 * field — and Cancel.
+	 */
+	override describe(): NativeNode {
+		if (this.#nativeRoot) return this.#nativeRoot;
+		const steps: NativeChild[] = [];
+		const auth = this.#nativeAuth;
+		if (auth) {
+			steps.push(this.#describeLinkStep(auth.url, auth.launchUrl));
+			if (auth.instructions) steps.push(this.#describeInstructionsStep(auth.instructions));
+		}
+		const live = this.#nativeSteps.findLastIndex(step => step.kind === "progress");
+		// Progress messages share one step: settled ones dim, the latest one the live spinner.
+		let progress: NativeChild[] | undefined;
+		for (const [index, step] of this.#nativeSteps.entries()) {
+			if (step.kind === "progress") {
+				const line =
+					index === live
+						? node("row", { role: "omp.login.waiting", gap: "sm", align: "center" }, [
+								node("spinner", { label: step.message, tone: "muted" }),
+							])
+						: text([span(step.message, "dim")], { wrap: "word" });
+				if (progress) {
+					progress.push(line);
+				} else {
+					progress = [line];
+					steps.push(node("col", { role: "omp.login.step", gap: "xs" }, progress, `p${index}`));
+				}
+				continue;
+			}
+			if (step.answer !== undefined) {
+				steps.push(keyed(text([span(step.answer, "dim")]), `a${index}`));
+				continue;
+			}
+			const children: NativeChild[] = [text(step.message, { wrap: "word" })];
+			if (step.placeholder) children.push(text([span(`e.g., ${step.placeholder}`, "dim")]));
+			children.push(node("col", { role: "omp.login.paste" }, [step.field], "field"));
+			steps.push(node("col", { role: "omp.login.step", gap: "xs" }, children, `i${index}`));
+		}
+		const cancelKey = getKeybindings().getKeys("tui.select.cancel")[0];
+		const buttons: (NativeNode | null)[] = [
+			null,
+			actionButton("Cancel", "cancel", cancelKey ? { keys: cancelKey } : {}),
+		];
+		if (this.#activeField()) {
+			const submitKey = getKeybindings().getKeys("tui.input.submit")[0];
+			buttons.push(
+				actionButton("Continue", "submit", { tone: "accent", ...(submitKey ? { keys: submitKey } : {}) }),
+			);
+		}
+		const sheet = node(
+			"overlay",
+			{
+				role: this.nativeRole,
+				head: `Sign in to ${this.#providerName}`,
+				anchor: "center",
+				size: "md",
+				modal: true,
+			},
+			[
+				col([node("col", { role: "omp.login.steps", gap: "md" }, steps, "steps"), actionBar(buttons)], {
+					gap: "lg",
+				}),
+			],
+			"sheet",
+		);
+		this.#nativeRoot = col([sheet]);
+		return this.#nativeRoot;
+	}
+
+	/** Step 1: open the sign-in page (Tern opens the link) or copy it; the full URL beneath on one mono line. */
+	#describeLinkStep(url: string, launchUrl: string | undefined): NativeNode {
+		const children: NativeChild[] = [
+			actionBar(
+				[
+					actionButton("Open sign-in page ↗", "open", { href: url, key: "openLink", title: url }),
+					actionButton("Copy link", "copy", { href: url, key: "copyLink", title: "Copy the sign-in link" }),
+				],
+				"links",
+			),
+			text([span(url, "dim mono", { href: url })], {
+				role: "omp.login.url",
+				truncate: "middle",
+				lines: 1,
+				title: url,
+			}),
+		];
+		if (launchUrl) {
+			children.push(
+				text(
+					[span("Local shortcut (this machine only): ", "dim"), span(launchUrl, "dim link", { href: launchUrl })],
+					{
+						truncate: "middle",
+						lines: 1,
+					},
+				),
+			);
+		}
+		return node("col", { role: "omp.login.step", gap: "sm" }, children, "link");
+	}
+
+	/** Step 2: a device code large and click-to-copy, or the provider's instructions as they came. */
+	#describeInstructionsStep(instructions: string): NativeNode {
+		const device = DEVICE_CODE_INSTRUCTIONS.exec(instructions);
+		const children: NativeChild[] = device
+			? [
+					text(device[1]!.trimEnd()),
+					text([span(device[2]!, "mono")], {
+						role: "omp.login.code",
+						actions: { click: "copy" },
+						title: "Copy code",
+					}),
+				]
+			: [text([span(instructions, "warning")], { wrap: "word" })];
+		return node("col", { role: "omp.login.step", gap: "sm" }, children, "code");
+	}
+
+	/** The input field still waiting for an answer, if any. */
+	#activeField(): TextFormField | undefined {
+		for (let i = this.#nativeSteps.length - 1; i >= 0; i--) {
+			const step = this.#nativeSteps[i]!;
+			if (step.kind === "input" && step.answer === undefined && step.field === this.#input) return step.field;
+		}
+		return undefined;
+	}
+
+	/** Cancel and Continue run what Esc and Enter run. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type !== "action") return;
+		if (event.act === "cancel") this.#cancel();
+		else if (event.act === "submit") this.#activeField()?.submit();
+	}
+
 	/** Route non-bracketed paste transports into the active login input. */
 	pasteText(text: string): void {
 		this.#input.pasteText(text);

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

@@ -6,6 +6,11 @@ import { MenuSelection } from "../components/menu-selection";
 import { centeredViewportRange } from "../components/scroll-viewport";
 import { formatKeyHint } from "../app-keybindings";
 import { editorKey, editorKeys } from "../chrome/keybinding-hints";
+import { node, span } from "../native/describe";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
+import { CLOSE_ACTION, dockedPicker, PICKER_KEY, pickerAction, pickerEvent } from "../native/picker";
+import type { TspPickerItem } from "@oh-my-pi/pi-wire";
+import { actionHint, hintsRow, overlayCard } from "../native/overlay";
 
 const LOGOUT_SELECTOR_MAX_VISIBLE = 10;
 
@@ -24,6 +29,13 @@ export class LogoutAccountSelectorComponent extends OverlayPanel {
 	#menu: MenuSelection<LogoutAccount>;
 	#onSelectCallback: (account: LogoutAccount) => void;
 	#onCancelCallback: () => void;
+	#nativeItems: readonly NativeNode[] | undefined;
+	#nativeHints: NativeNode | undefined;
+	#nativeRoot: NativeNode | undefined;
+	#pickerRoot: NativeNode | undefined;
+	#pickerItems: readonly TspPickerItem[] | undefined;
+	readonly #providerName: string;
+	readonly #accounts: readonly LogoutAccount[];
 
 	constructor(
 		providerName: string,
@@ -31,9 +43,11 @@ export class LogoutAccountSelectorComponent extends OverlayPanel {
 		onSelect: (account: LogoutAccount) => void,
 		onCancel: () => void,
 	) {
-		super(`Select ${providerName} account to log out`);
+		super(`Select ${providerName} account to log out`, "omp.overlay.logout");
 		this.#onSelectCallback = onSelect;
 		this.#onCancelCallback = onCancel;
+		this.#providerName = providerName;
+		this.#accounts = accounts;
 		const active = accounts.find(account => account.active);
 		this.#menu = new MenuSelection<LogoutAccount>(
 			accounts,
@@ -50,6 +64,8 @@ export class LogoutAccountSelectorComponent extends OverlayPanel {
 	}
 
 	#updateList(): void {
+		this.#nativeRoot = undefined;
+		this.#pickerRoot = undefined;
 		this.#listContainer.clear();
 
 		const items = this.#menu.visibleItems;
@@ -116,9 +132,91 @@ export class LogoutAccountSelectorComponent extends OverlayPanel {
 			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);
+			this.#confirmSelection();
 		}
 	}
+
+	#confirmSelection(): void {
+		const account = this.#menu.selectedItem;
+		if (!account) return;
+		this.#onSelectCallback(account);
+	}
+
+	override describe(cx: DescribeContext): NativeNode {
+		if (cx.supports("picker")) {
+			this.#pickerRoot ??= dockedPicker({
+				title: `${this.#providerName} accounts`,
+				subtitle: "Pick the account to sign out",
+				icon: "key-round",
+				noun: "accounts",
+				size: "md",
+				layout: "cards",
+				preview: "none",
+				query: null,
+				items: (this.#pickerItems ??= this.#accounts.map(account => ({
+					id: String(account.credentialId),
+					label: account.label,
+					...(account.detail ? { detail: account.detail } : {}),
+					badges: [{ text: account.type === "oauth" ? "login" : "api key" }],
+				}))),
+				current: this.#accounts.filter(account => account.active).map(account => String(account.credentialId)),
+				selected: this.#menu.selectedKey ?? null,
+				empty: "No stored accounts to log out",
+				actions: [pickerAction("confirm", "Sign out", "enter", { primary: true, danger: true }), CLOSE_ACTION],
+			});
+			return this.#pickerRoot;
+		}
+		if (this.#nativeRoot) return this.#nativeRoot;
+		this.#nativeItems ??= this.#menu.visibleItems.map(account =>
+			node(
+				"item",
+				{
+					label: account.label,
+					detail: account.detail || undefined,
+					value: account.active ? [span("active", "muted")] : undefined,
+				},
+				undefined,
+				String(account.credentialId),
+			),
+		);
+		this.#nativeRoot = overlayCard(this.nativeRole, this.title, [
+			node(
+				"list",
+				{
+					selected: this.#menu.selectedKey ?? null,
+					empty: "No stored accounts to log out",
+					max: { lines: LOGOUT_SELECTOR_MAX_VISIBLE },
+				},
+				this.#nativeItems,
+				"list",
+			),
+			(this.#nativeHints ??= hintsRow([
+				actionHint(["tui.select.up", "tui.select.down"], "select"),
+				{ keys: ["enter"], label: "log out account" },
+				actionHint("tui.select.cancel", "cancel"),
+			])),
+		]);
+		return this.#nativeRoot;
+	}
+
+	/** A click (or double-click) on an account highlights it and logs it out, like Enter. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		const ev = pickerEvent(event, PICKER_KEY);
+		if (ev?.kind === "action") {
+			if (ev.act === "confirm") this.#confirmSelection();
+			else if (ev.act === "close" || ev.act === "cancel") this.#onCancelCallback();
+			return;
+		}
+		if (ev?.kind === "select") {
+			this.#menu.setSelectedKey(ev.item);
+			this.#updateList();
+			return;
+		}
+		if ((event.type !== "select" && event.type !== "activate") || (event.key !== "list" && ev?.kind !== "activate"))
+			return;
+		this.#menu.setSelectedKey(event.item);
+		if (this.#menu.selectedKey !== event.item) return;
+		this.#updateList();
+		this.#confirmSelection();
+	}
 }