@linxiraos/pi-tui 1.2.1 → 1.3.0

package/src/overlays/login-dialog.ts

@@ -16,11 +16,48 @@ 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;
 
+/** A prompt's trailing `, then press Enter:` — the sheet's Continue button says it. */
+const PRESS_KEY_SUFFIX = /,?\s*then press\s+\S+\s*:?\s*$/i;
+
+/** Progress that reports a problem rather than a finished stage. */
+const PROGRESS_PROBLEM = /\b(?:fail(?:ed|ure)?|error|unavailable|in use|could ?n[o']t|unable)\b/i;
+
+/** Shown on the field when the flow asks for the manual code again: the last paste had no usable code. */
+const RETRY_MESSAGE = "Couldn't read a code from that. Paste the authorization code or the full redirect URL.";
+
+/** Shown while the browser half of the flow runs and the provider reports nothing. */
+const BROWSER_WAIT = "Waiting for you to finish in the browser…";
+
+/** The sign-in link from `showAuth`: the provider's instructions, or the device code split out of them. */
+interface LoginAuth {
+	url: string;
+	launchUrl?: string;
+	instructions?: string;
+	device?: { code: string };
+}
+
 /** 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: "input"; message: string; field: TextFormField; answer?: string }
 	| { kind: "progress"; message: string };
 
+/** Sheet copy: plain text, a trailing ASCII ellipsis as `…`. */
+function sheetText(message: string): string {
+	return plainText(message)
+		.trim()
+		.replace(/\.\.\.$/, "…");
+}
+
+/** `github.com/login/device` for a tooltip; the input when it isn't a URL. */
+function urlPlace(url: string): string {
+	try {
+		const parsed = new URL(url);
+		return `${parsed.host}${parsed.pathname === "/" ? "" : parsed.pathname}`;
+	} catch {
+		return url;
+	}
+}
+
 /**
  * Login dialog component - replaces editor during OAuth login flow
  */
@@ -35,8 +72,7 @@ export class LoginDialogComponent extends OverlayPanel {
 	#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;
+	#nativeAuth: LoginAuth | undefined;
 	/** Native steps after the link, in arrival order; the live input field is embedded by identity. */
 	#nativeSteps: LoginStep[] = [];
 	#nativeRoot: NativeNode | undefined;
@@ -134,10 +170,13 @@ export class LoginDialogComponent extends OverlayPanel {
 			this.#contentContainer.addChild(new Text(theme.fg("warning", instructions), 0, 0));
 		}
 
+		const plain = instructions ? plainText(instructions) : undefined;
+		const device = plain ? DEVICE_CODE_INSTRUCTIONS.exec(plain) : null;
 		this.#nativeAuth = {
 			url,
 			launchUrl: launchUrl && launchUrl !== url ? launchUrl : undefined,
-			instructions: instructions ? plainText(instructions) : undefined,
+			instructions: plain,
+			device: device ? { code: device[2]! } : undefined,
 		};
 		this.#nativeSteps = [];
 		this.#nativeRoot = undefined;
@@ -158,10 +197,12 @@ export class LoginDialogComponent extends OverlayPanel {
 		this.#input = this.#createInput();
 		const nativeMounted = this.#nativeSteps.find(step => step.kind === "input" && step.field === previousInput);
 		if (mounted !== -1) {
+			// The flow asks again only when the last paste carried no usable code.
+			this.#input.setError(RETRY_MESSAGE);
 			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.#nativeSteps.push({ kind: "input", message: plainText(prompt), 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);
@@ -203,10 +244,11 @@ export class LoginDialogComponent extends OverlayPanel {
 			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}`;
+			if (answered?.kind === "input") answered.answer = value;
 		}
 		// A new prompt must not recover a previous secret through undo or yank.
 		this.#input = this.#createInput(prompt.secret === true);
+		if (prompt.placeholder) this.#input.input.placeholder = plainText(prompt.placeholder);
 		this.#contentContainer.addChild(new Spacer(1));
 		this.#contentContainer.addChild(new Text(theme.fg("text", prompt.message), 0, 0));
 		if (prompt.placeholder) {
@@ -223,13 +265,7 @@ 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.#nativeSteps.push({ kind: "input", message: plainText(prompt.message), field: this.#input });
 		this.#nativeRoot = undefined;
 
 		this.#tui.requestRender();
@@ -273,56 +309,91 @@ export class LoginDialogComponent extends OverlayPanel {
 
 	/**
 	 * 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.
+	 * dock; the `overlay` hoists into the terminal's layer). Top to bottom: one
+	 * sentence saying what to do, the device code as a large click-to-copy
+	 * well, the sign-in link as a read-only field with Copy, the questions
+	 * (answered ones as label/value lines, the live one as a field), and the
+	 * flow's status — finished stages checked, the current one spinning. The
+	 * footer holds Cancel and one primary action: Continue while a field waits
+	 * for an answer (Open sign-in page then leads the footer as a plain
+	 * button), else Open sign-in page.
 	 */
 	override describe(): NativeNode {
 		if (this.#nativeRoot) return this.#nativeRoot;
-		const steps: NativeChild[] = [];
 		const auth = this.#nativeAuth;
+		const field = this.#activeField();
+		const body: NativeChild[] = [];
 		if (auth) {
-			steps.push(this.#describeLinkStep(auth.url, auth.launchUrl));
-			if (auth.instructions) steps.push(this.#describeInstructionsStep(auth.instructions));
+			body.push(keyed(text(this.#lead(auth), { role: "zeta.login.lead", wrap: "word" }), "lead"));
+			if (auth.device) body.push(this.#describeCode(auth.device.code));
+			body.push(this.#describeLink(auth.url));
+			if (auth.launchUrl) {
+				body.push(
+					keyed(
+						text([span("On this machine  ", "dim"), span(auth.launchUrl, "mono", { href: auth.launchUrl })], {
+							role: "zeta.login.shortcut",
+							truncate: "middle",
+							lines: 1,
+							title: auth.launchUrl,
+						}),
+						"shortcut",
+					),
+				);
+			}
 		}
+		const status: NativeNode[] = [];
 		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 =
+				status.push(
 					index === live
-						? node("row", { role: "zeta.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: "zeta.login.step", gap: "xs" }, progress, `p${index}`));
-				}
+						? this.#describeLive(step.message, `p${index}`)
+						: this.#describeDone(step.message, `p${index}`),
+				);
 				continue;
 			}
+			// A field label: the footer's Continue says the prompt's `then press Enter`.
+			const label = step.message.trim().replace(PRESS_KEY_SUFFIX, "").replace(/:$/, "");
 			if (step.answer !== undefined) {
-				steps.push(keyed(text([span(step.answer, "dim")]), `a${index}`));
-				continue;
+				body.push(
+					node(
+						"row",
+						{ role: "zeta.login.answer", gap: "sm", align: "baseline" },
+						[
+							keyed(text(label, { truncate: "end", lines: 1 }), "label"),
+							keyed(text(step.answer || "—", { truncate: "end", lines: 1 }), "value"),
+						],
+						`a${index}`,
+					),
+				);
+			} else {
+				body.push(
+					node(
+						"col",
+						{ role: "zeta.login.prompt", gap: "sm" },
+						[keyed(text(label, { role: "zeta.login.label", wrap: "word" }), "label"), step.field],
+						`i${index}`,
+					),
+				);
 			}
-			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: "zeta.login.paste" }, [step.field], "field"));
-			steps.push(node("col", { role: "zeta.login.step", gap: "xs" }, children, `i${index}`));
 		}
+		// The provider reports nothing while the browser half runs (GitHub's device poll): say so.
+		if (auth && live === -1 && !field) status.push(this.#describeLive(BROWSER_WAIT, "browser"));
+		if (status.length > 0) body.push(node("col", { role: "zeta.login.status", gap: "xs" }, status, "status"));
+
 		const cancelKey = getKeybindings().getKeys("tui.select.cancel")[0];
-		const buttons: (NativeNode | null)[] = [
-			null,
-			actionButton("Cancel", "cancel", cancelKey ? { keys: cancelKey } : {}),
-		];
-		if (this.#activeField()) {
+		const cancel = actionButton("Cancel", "cancel", cancelKey ? { keys: cancelKey } : {});
+		const open = auth ? this.#describeOpen(auth.url, !field) : null;
+		let buttons: (NativeNode | null)[];
+		if (field) {
 			const submitKey = getKeybindings().getKeys("tui.input.submit")[0];
-			buttons.push(
-				actionButton("Continue", "submit", { tone: "accent", ...(submitKey ? { keys: submitKey } : {}) }),
-			);
+			const submit = actionButton("Continue", "submit", {
+				tone: "accent",
+				...(submitKey ? { keys: submitKey } : {}),
+			});
+			buttons = open ? [open, null, cancel, submit] : [null, cancel, submit];
+		} else {
+			buttons = open ? [null, cancel, open] : [null, cancel];
 		}
 		const sheet = node(
 			"overlay",
@@ -333,62 +404,101 @@ export class LoginDialogComponent extends OverlayPanel {
 				size: "md",
 				modal: true,
 			},
-			[
-				col([node("col", { role: "zeta.login.steps", gap: "md" }, steps, "steps"), actionBar(buttons)], {
-					gap: "lg",
-				}),
-			],
+			[col([node("col", { role: "zeta.login.body", gap: "md" }, body, "body"), 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: "zeta.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 })],
+	/** What to do, in one sentence: enter the code, follow the provider's instructions, or finish in the browser. */
+	#lead(auth: LoginAuth): string {
+		if (auth.device) return "Enter this code on the sign-in page to connect your account.";
+		if (auth.instructions) return sheetText(auth.instructions);
+		return "Continue in your browser. If it didn't open, open or copy the link below.";
+	}
+
+	/** The device code, large in a well; a click copies it. */
+	#describeCode(code: string): NativeNode {
+		return node(
+			"row",
+			{ role: "zeta.login.code", align: "center", actions: { click: "copy" }, href: code, title: "Copy code" },
+			[keyed(text([span(code, "mono")]), "value"), node("icon", { name: "copy" }, undefined, "icon")],
+			"code",
+		);
+	}
+
+	/** The sign-in link as a read-only field: the full URL (middle-truncated; a click opens it) and Copy. */
+	#describeLink(url: string): NativeNode {
+		const shown = text([span(url, "mono", { href: url })], {
+			role: "zeta.login.url",
+			truncate: "middle",
+			lines: 1,
+			title: url,
+		});
+		return node(
+			"row",
+			{ role: "zeta.login.link", gap: "sm", align: "center" },
+			[
+				node("icon", { name: "link" }, undefined, "icon"),
+				keyed(shown, "url"),
+				node(
+					"row",
 					{
-						truncate: "middle",
-						lines: 1,
+						role: "zeta.btn",
+						align: "center",
+						actions: { click: "copy" },
+						href: url,
+						title: "Copy the sign-in link",
 					},
+					[text("Copy")],
+					"copyLink",
 				),
-			);
-		}
-		return node("col", { role: "zeta.login.step", gap: "sm" }, children, "link");
+			],
+			"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: "zeta.login.code",
-						actions: { click: "copy" },
-						title: "Copy code",
-					}),
-				]
-			: [text([span(instructions, "warning")], { wrap: "word" })];
-		return node("col", { role: "zeta.login.step", gap: "sm" }, children, "code");
+	/** Open sign-in page (Tern opens the link itself): the primary action while nothing waits for an answer. */
+	#describeOpen(url: string, primary: boolean): NativeNode {
+		return node(
+			"row",
+			{
+				role: "zeta.btn",
+				gap: "xs",
+				align: "center",
+				actions: { click: "open" },
+				href: url,
+				title: `Open ${urlPlace(url)} in your browser`,
+				...(primary ? { tone: "accent" as const } : {}),
+			},
+			[text("Open sign-in page"), node("icon", { name: "open" }, undefined, "icon")],
+			"openLink",
+		);
+	}
+
+	/** The stage running now: a spinner and what it waits for. */
+	#describeLive(message: string, key: string): NativeNode {
+		return node(
+			"row",
+			{ role: "zeta.login.waiting", gap: "sm", align: "center" },
+			[node("spinner", { style: "orbit", label: sheetText(message), tone: "muted" })],
+			key,
+		);
+	}
+
+	/** A finished stage, checked; one that reported a problem keeps a warning mark. */
+	#describeDone(message: string, key: string): NativeNode {
+		const problem = PROGRESS_PROBLEM.test(message);
+		return node(
+			"row",
+			{ role: "zeta.login.done", gap: "sm", align: "baseline", ...(problem ? { tone: "warning" as const } : {}) },
+			[
+				node("icon", { name: problem ? "warn" : "check" }, undefined, "icon"),
+				keyed(text(sheetText(message).replace(/…$/, ""), { wrap: "word" }), "text"),
+			],
+			key,
+		);
 	}
 
 	/** The input field still waiting for an answer, if any. */