@oh-my-pi/pi-coding-agent 15.5.15 → 15.7.0

package/src/modes/setup-wizard/scenes/glyph.ts

@@ -0,0 +1,96 @@
+import { type SelectItem, SelectList } from "@oh-my-pi/pi-tui";
+import { getSelectListTheme, type SymbolPreset, setSymbolPreset, theme } from "../../theme/theme";
+import type { SetupScene, SetupSceneController, SetupSceneHost } from "./types";
+
+const GLYPH_PRESETS = ["nerd", "unicode", "ascii"] as const satisfies readonly SymbolPreset[];
+
+const GLYPH_LABELS: Readonly<Record<SymbolPreset, string>> = {
+	nerd: "Nerd Font",
+	unicode: "Unicode",
+	ascii: "ASCII",
+};
+
+const GLYPH_SAMPLES: Readonly<Record<SymbolPreset, string>> = {
+	nerd: "      󰉋  ",
+	unicode: "✔  ✖  📁  ⬢  ╭─╮  ├─  •  ⠋  →",
+	ascii: "[ok]  [x]  >  +  [D]  +-+  |--  *  ->",
+};
+
+/** One picker row per preset; the description column shows live sample glyphs instead of prose. */
+const GLYPH_ITEMS: readonly SelectItem[] = GLYPH_PRESETS.map((preset, index) => ({
+	value: preset,
+	label: `${index + 1}  ${GLYPH_LABELS[preset]}`,
+	description: preset === "nerd" ? `${GLYPH_SAMPLES.nerd}  ╭─╮  ├─  ◆  ✔  ✖` : GLYPH_SAMPLES[preset],
+}));
+
+class GlyphSceneController implements SetupSceneController {
+	title = "Choose glyph mode";
+	subtitle = "Pick the row that renders cleanly in your terminal.";
+	#selectList: SelectList;
+	#previewRequest = 0;
+	#committing = false;
+
+	constructor(private readonly host: SetupSceneHost) {
+		this.#selectList = new SelectList(GLYPH_ITEMS, GLYPH_ITEMS.length, getSelectListTheme());
+		const current = theme.getSymbolPreset();
+		const currentIndex = GLYPH_PRESETS.indexOf(current);
+		this.#selectList.setSelectedIndex(currentIndex >= 0 ? currentIndex : 0);
+		this.#selectList.onSelectionChange = item => {
+			this.#preview(item.value as SymbolPreset);
+		};
+		this.#selectList.onSelect = item => {
+			void this.#commit(item.value as SymbolPreset);
+		};
+		this.#selectList.onCancel = () => host.finish("skipped");
+	}
+
+	invalidate(): void {
+		this.#selectList.invalidate();
+	}
+
+	handleInput(data: string): void {
+		if (this.#committing) return;
+		const quickIndex = data >= "1" && data <= "3" ? Number(data) - 1 : -1;
+		if (quickIndex >= 0) {
+			const preset = GLYPH_PRESETS[quickIndex];
+			this.#selectList.setSelectedIndex(quickIndex);
+			this.#preview(preset);
+			return;
+		}
+		this.#selectList.handleInput(data);
+	}
+
+	render(width: number): string[] {
+		return [
+			theme.fg("muted", "If a row shows boxes, tofu, or misaligned icons, pick another."),
+			"",
+			...this.#selectList.render(width),
+		];
+	}
+
+	async #commit(preset: SymbolPreset): Promise<void> {
+		if (this.#committing) return;
+		this.#committing = true;
+		this.#previewRequest += 1;
+		this.host.ctx.settings.set("symbolPreset", preset);
+		await setSymbolPreset(preset);
+		this.host.ctx.ui.invalidate();
+		this.host.finish("done");
+	}
+
+	#preview(preset: SymbolPreset): void {
+		const request = ++this.#previewRequest;
+		void setSymbolPreset(preset).then(() => {
+			if (request !== this.#previewRequest || this.#committing) return;
+			this.host.ctx.ui.invalidate();
+			this.host.requestRender();
+		});
+	}
+}
+
+export const glyphSetupScene: SetupScene = {
+	id: "glyph-mode",
+	title: "Choose glyph mode",
+	minVersion: 1,
+	mount: host => new GlyphSceneController(host),
+};

package/src/modes/setup-wizard/scenes/outro.ts

@@ -0,0 +1,35 @@
+import { padding, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { gradientLogo, PI_LOGO } from "../../components/welcome";
+import { theme } from "../../theme/theme";
+import { renderStarfield, SETUP_TICK_MS } from "./splash";
+
+export const SETUP_OUTRO_MS = 1200;
+
+function centerLine(line: string, width: number): string {
+	const lineWidth = visibleWidth(line);
+	if (lineWidth >= width) return truncateToWidth(line, width);
+	const left = Math.floor((width - lineWidth) / 2);
+	return padding(left) + line + padding(width - left - lineWidth);
+}
+
+function clampLine(line: string, width: number): string {
+	const truncated = truncateToWidth(line, width);
+	return truncated + padding(Math.max(0, width - visibleWidth(truncated)));
+}
+
+export function renderSetupOutro(width: number, height: number, elapsedMs: number): string[] {
+	const frame = Math.floor(elapsedMs / SETUP_TICK_MS);
+	const lines = renderStarfield(width, height, frame + 1000);
+	const progress = Math.max(0, Math.min(1, elapsedMs / SETUP_OUTRO_MS));
+	const logo = gradientLogo(PI_LOGO, progress * 1.2, { pos: (progress * 2) % 1, strength: 1 - progress });
+	const title = theme.bold(theme.fg("success", `${theme.status.success} Setup saved`));
+	const subtitle = theme.fg("muted", "Handing off to the normal CLI…");
+	const sweepWidth = Math.max(1, Math.min(width - 8, Math.floor((width - 8) * progress)));
+	const sweep = `${theme.fg("accent", "━".repeat(sweepWidth))}${theme.fg("dim", "─".repeat(Math.max(0, width - 8 - sweepWidth)))}`;
+	const content = [...logo, "", title, subtitle, "", sweep];
+	const start = Math.max(0, Math.floor((height - content.length) / 2));
+	for (let i = 0; i < content.length && start + i < lines.length; i++) {
+		lines[start + i] = centerLine(content[i] ?? "", width);
+	}
+	return lines.map(line => clampLine(line, width));
+}

package/src/modes/setup-wizard/scenes/providers.ts

@@ -0,0 +1,69 @@
+import { TabBar } from "@oh-my-pi/pi-tui";
+import { getTabBarTheme } from "../../shared";
+import { SignInTab } from "./sign-in";
+import type { SetupScene, SetupSceneController, SetupSceneHost, SetupTab } from "./types";
+import { WebSearchTab } from "./web-search";
+
+/**
+ * Tabbed "Set up your providers" scene. Composes independent panels (model
+ * sign-in, web search) behind a {@link TabBar}; the active panel owns
+ * rendering and input, while modal panels (e.g. an in-flight OAuth login)
+ * temporarily suppress tab switching.
+ */
+class ProvidersSceneController implements SetupSceneController {
+	title = "Set up your providers";
+	subtitle = "Sign in and pick a web search provider. Press Esc when you're done.";
+
+	#tabs: SetupTab[];
+	#tabBar: TabBar;
+
+	constructor(host: SetupSceneHost) {
+		this.#tabs = [new SignInTab(host), new WebSearchTab(host)];
+		this.#tabBar = new TabBar(
+			"Providers",
+			this.#tabs.map(tab => ({ id: tab.id, label: tab.label })),
+			getTabBarTheme(),
+		);
+		this.#tabBar.onTabChange = () => {
+			this.#activeTab().onActivate?.();
+			host.requestRender();
+		};
+	}
+
+	#activeTab(): SetupTab {
+		return this.#tabs[this.#tabBar.getActiveIndex()] ?? this.#tabs[0];
+	}
+
+	onMount(): void {
+		this.#activeTab().onActivate?.();
+	}
+
+	invalidate(): void {
+		for (const tab of this.#tabs) tab.invalidate();
+	}
+
+	handleInput(data: string): void {
+		const tab = this.#activeTab();
+		if (tab.modal) {
+			tab.handleInput(data);
+			return;
+		}
+		if (this.#tabBar.handleInput(data)) return;
+		tab.handleInput(data);
+	}
+
+	render(width: number): string[] {
+		return [...this.#tabBar.render(width), "", ...this.#activeTab().render(width)];
+	}
+
+	dispose(): void {
+		for (const tab of this.#tabs) tab.dispose();
+	}
+}
+
+export const providersSetupScene: SetupScene = {
+	id: "providers",
+	title: "Set up your providers",
+	minVersion: 1,
+	mount: host => new ProvidersSceneController(host),
+};

package/src/modes/setup-wizard/scenes/sign-in.ts

@@ -0,0 +1,193 @@
+import type { AuthStorage } from "@oh-my-pi/pi-ai";
+import type { OAuthProvider } from "@oh-my-pi/pi-ai/utils/oauth/types";
+import { Input, matchesKey, truncateToWidth } from "@oh-my-pi/pi-tui";
+import { getAgentDbPath } from "@oh-my-pi/pi-utils";
+import { OAuthSelectorComponent } from "../../components/oauth-selector";
+import { theme } from "../../theme/theme";
+import type { SetupSceneHost, SetupTab } from "./types";
+
+/** Providers whose OAuth flow needs a pasted code/redirect URL rather than a callback server. */
+const CALLBACK_SERVER_PROVIDERS: Partial<Record<OAuthProvider, true>> = {
+	anthropic: true,
+	"openai-codex": true,
+	"gitlab-duo": true,
+	"google-gemini-cli": true,
+	"google-antigravity": true,
+};
+
+interface PromptState {
+	message: string;
+	placeholder?: string;
+	input: Input;
+}
+
+/**
+ * "Sign in" panel: lets the user authenticate one or more model providers via
+ * OAuth. Unlike a standalone scene it never auto-advances the wizard — the user
+ * may sign in to several providers and then continue with Esc.
+ */
+export class SignInTab implements SetupTab {
+	readonly id = "sign-in";
+	readonly label = "Sign in";
+
+	#authStorage: AuthStorage;
+	#selector: OAuthSelectorComponent;
+	#statusLines: string[] = [];
+	#prompt: PromptState | undefined;
+	#promptResolve: ((value: string) => void) | undefined;
+	#loginAbort: AbortController | undefined;
+	#loggingInProvider: string | undefined;
+	#disposed = false;
+
+	constructor(private readonly host: SetupSceneHost) {
+		this.#authStorage = host.ctx.session.modelRegistry.authStorage;
+		this.#selector = this.#createSelector();
+	}
+
+	/** Modal while an OAuth flow is running so the scene won't switch tabs or finish. */
+	get modal(): boolean {
+		return this.#loggingInProvider !== undefined;
+	}
+
+	dispose(): void {
+		this.#disposed = true;
+		this.#selector.stopValidation();
+		this.#loginAbort?.abort();
+		this.#resolvePrompt("");
+	}
+
+	invalidate(): void {
+		this.#selector.invalidate();
+		this.#prompt?.input.invalidate();
+	}
+
+	handleInput(data: string): void {
+		if (this.#loggingInProvider) {
+			if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+				this.#loginAbort?.abort();
+			}
+			return;
+		}
+		this.#selector.handleInput(data);
+	}
+
+	render(width: number): string[] {
+		const lines = [theme.fg("muted", "Pick a provider to sign in — you can connect more than one."), ""];
+		if (this.#loggingInProvider) {
+			lines.push(theme.bold(`Signing in to ${this.#loggingInProvider}`), "");
+		} else {
+			lines.push(...this.#selector.render(width));
+		}
+		if (this.#statusLines.length > 0) {
+			lines.push("", ...this.#statusLines.map(line => truncateToWidth(line, width)));
+		}
+		if (this.#prompt) {
+			lines.push("", theme.fg("warning", this.#prompt.message));
+			if (this.#prompt.placeholder) {
+				lines.push(theme.fg("dim", this.#prompt.placeholder));
+			}
+			lines.push(this.#prompt.input.render(width)[0] ?? "");
+		}
+		return lines;
+	}
+
+	#createSelector(): OAuthSelectorComponent {
+		return new OAuthSelectorComponent(
+			"login",
+			this.#authStorage,
+			providerId => {
+				void this.#login(providerId);
+			},
+			() => this.host.finish("skipped"),
+			{ requestRender: () => this.host.requestRender() },
+		);
+	}
+
+	async #login(providerId: string): Promise<void> {
+		if (this.#loggingInProvider || this.#disposed) return;
+		const useManualInput = CALLBACK_SERVER_PROVIDERS[providerId as OAuthProvider] === true;
+		this.#selector.stopValidation();
+		this.#loggingInProvider = providerId;
+		this.#statusLines = [theme.fg("dim", "Starting OAuth flow…")];
+		this.#loginAbort = new AbortController();
+		this.host.restoreFocus();
+		this.host.requestRender();
+		try {
+			await this.#authStorage.login(providerId as OAuthProvider, {
+				signal: this.#loginAbort.signal,
+				onAuth: info => {
+					this.#statusLines.push(theme.fg("accent", `Open this URL: ${info.url}`));
+					if (info.instructions) {
+						this.#statusLines.push(theme.fg("warning", info.instructions));
+					}
+					if (useManualInput) {
+						this.#statusLines.push(theme.fg("dim", "Paste the returned code or redirect URL when prompted."));
+					}
+					this.host.ctx.openInBrowser(info.url);
+					this.host.requestRender();
+				},
+				onPrompt: prompt => this.#showPrompt(prompt),
+				onProgress: message => {
+					this.#statusLines.push(theme.fg("dim", message));
+					this.host.requestRender();
+				},
+				onManualCodeInput: () =>
+					this.#showPrompt({ message: "Paste the authorization code (or full redirect URL):" }),
+			});
+			await this.host.ctx.session.modelRegistry.refresh();
+			if (this.#disposed) return;
+			this.#statusLines = [
+				theme.fg("success", `${theme.status.success} Signed in to ${providerId}`),
+				theme.fg("dim", `Credentials saved to ${getAgentDbPath()}`),
+			];
+			this.#loggingInProvider = undefined;
+			this.#loginAbort = undefined;
+			this.#selector.stopValidation();
+			this.#selector = this.#createSelector();
+			this.host.restoreFocus();
+			this.host.requestRender();
+		} catch (error) {
+			if (this.#disposed) return;
+			if (this.#loginAbort?.signal.aborted) {
+				this.#statusLines = [theme.fg("dim", "Login cancelled.")];
+			} else {
+				const message = error instanceof Error ? error.message : String(error);
+				this.#statusLines = [
+					theme.fg("error", `Login failed: ${message}`),
+					theme.fg("dim", "Choose another provider or press Esc to continue."),
+				];
+			}
+			this.#loggingInProvider = undefined;
+			this.#loginAbort = undefined;
+			this.host.restoreFocus();
+			this.host.requestRender();
+		}
+	}
+
+	#showPrompt(prompt: { message: string; placeholder?: string }): Promise<string> {
+		this.#resolvePrompt("");
+		const input = new Input();
+		const pending = Promise.withResolvers<string>();
+		this.#promptResolve = pending.resolve;
+		this.#prompt = { message: prompt.message, placeholder: prompt.placeholder, input };
+		input.onSubmit = value => {
+			this.#resolvePrompt(value);
+		};
+		input.onEscape = () => {
+			this.#resolvePrompt("");
+		};
+		this.host.setFocus(input);
+		this.host.requestRender();
+		return pending.promise;
+	}
+
+	#resolvePrompt(value: string): void {
+		const resolve = this.#promptResolve;
+		if (!resolve) return;
+		this.#promptResolve = undefined;
+		this.#prompt = undefined;
+		this.host.restoreFocus();
+		resolve(value);
+		this.host.requestRender();
+	}
+}

package/src/modes/setup-wizard/scenes/splash.ts

@@ -0,0 +1,201 @@
+import { padding, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { gradientEscape, gradientLogo, PI_LOGO, type ShineConfig } from "../../components/welcome";
+import { theme } from "../../theme/theme";
+
+export const SETUP_SPLASH_MS = 2600;
+export const SETUP_TICK_MS = 33;
+
+/** Brand mark at 2x: every glyph doubled horizontally, every row doubled vertically. */
+const LARGE_LOGO = PI_LOGO.flatMap(line => {
+	let wide = "";
+	for (const char of line) {
+		wide += char === " " ? "  " : `${char}${char}`;
+	}
+	return [wide, wide];
+});
+const LOGO_WIDTH = Math.max(...LARGE_LOGO.map(line => visibleWidth(line)));
+const LOGO_HEIGHT = LARGE_LOGO.length;
+const RESET = "\x1b[0m";
+
+/** Full scene needs comfortable room; below this we drop to a centered mark. */
+const MIN_SCENE_WIDTH = 56;
+const MIN_SCENE_HEIGHT = 22;
+
+const SKIP_HINT = "press enter to skip";
+
+/** Density ramp for the rippling water, lightest → heaviest. */
+const WATER_RAMP = [
+	{ min: 0.62, char: "█" },
+	{ min: 0.5, char: "▓" },
+	{ min: 0.36, char: "▒" },
+	{ min: 0.24, char: "░" },
+];
+
+function clampLine(line: string, width: number): string {
+	const truncated = truncateToWidth(line, width);
+	return truncated + padding(Math.max(0, width - visibleWidth(truncated)));
+}
+
+function centerLine(line: string, width: number): string {
+	const lineWidth = visibleWidth(line);
+	if (lineWidth >= width) return truncateToWidth(line, width);
+	const left = Math.floor((width - lineWidth) / 2);
+	return padding(left) + line + padding(width - left - lineWidth);
+}
+
+function starAt(x: number, y: number, frame: number): string {
+	const hash = (x * 73856093) ^ (y * 19349663) ^ (frame * 83492791);
+	const bucket = Math.abs(hash) % 97;
+	if (bucket === 0) return theme.fg("accent", "✦");
+	if (bucket === 1) return theme.fg("muted", "·");
+	return " ";
+}
+
+export function renderStarfield(width: number, height: number, frame: number): string[] {
+	const lines: string[] = [];
+	for (let y = 0; y < height; y++) {
+		let line = "";
+		for (let x = 0; x < width; x++) {
+			line += starAt(x, y, frame >> 3);
+		}
+		lines.push(line);
+	}
+	return lines;
+}
+
+/** Continuous diagonal gradient position (bottom-left → top-right) across the whole screen. */
+function screenGradientT(x: number, y: number, width: number, height: number, phase: number): number {
+	const span = Math.max(1, width + height - 1);
+	const base = (x + (height - 1 - y)) / span;
+	return (((base + phase) % 1) + 1) % 1;
+}
+
+/** Twinkling sparkle for the upper "sky". Returns a styled glyph, or null for empty space. */
+function skyGlyph(x: number, y: number, frame: number): string | null {
+	const hash = (x * 73856093) ^ (y * 19349663) ^ (frame * 83492791);
+	const bucket = Math.abs(hash) % 150;
+	if (bucket === 0) return theme.fg("accent", "✦");
+	if (bucket === 1) return theme.fg("border", "✧");
+	if (bucket === 2) return theme.fg("border", "·");
+	return null;
+}
+
+/** Static value-jitter in [0,1) that softens the water's threshold banding. */
+function waterJitter(x: number, y: number): number {
+	let h = Math.imul(x, 374761393) + Math.imul(y, 668265263);
+	h = Math.imul(h ^ (h >>> 13), 1274126177);
+	h ^= h >>> 16;
+	return (h >>> 0) / 4294967296;
+}
+
+/**
+ * Rippling water amplitude in [0,1] at (x, y): three travelling sine waves
+ * interfere, then a radial edge falloff and a downward fade concentrate the
+ * ripples beneath the mark and dissolve them toward the edges/bottom. `t`
+ * advances each tick, so the surface drifts.
+ */
+function waterAmplitude(
+	x: number,
+	y: number,
+	cx: number,
+	waterTop: number,
+	waterHeight: number,
+	width: number,
+	t: number,
+): number {
+	const dx = (x - cx) / 2;
+	const dy = y - waterTop;
+	const dist = Math.sqrt(dx * dx + dy * dy);
+	const wave =
+		0.5 * Math.sin(dist * 0.55 - t) +
+		0.3 * Math.sin(x * 0.22 + y * 0.45 - t * 0.7) +
+		0.2 * Math.sin(Math.abs(dx) * 0.8 + dy * 0.5 - t * 1.4);
+	const level = 0.5 + 0.5 * wave;
+	const edge = Math.max(0, 1 - Math.abs(x - cx) / (width * 0.5));
+	const fade = Math.max(0, 1 - (dy / Math.max(1, waterHeight)) * 0.55);
+	return level * edge ** 0.7 * fade;
+}
+
+/**
+ * Animated setup splash, in the spirit of the omp landing page: the brand π
+ * mark rendered with the live diagonal gradient + shine sweep, rising out of a
+ * rippling, gradient-lit water surface, under a faint twinkling starfield. The
+ * mark and water share one continuous gradient so the sweep reads across the
+ * whole scene; the water surface drifts each frame.
+ */
+export function renderSetupSplash(width: number, height: number, elapsedMs: number): string[] {
+	const w = Math.max(1, width);
+	const h = Math.max(1, height);
+	const progress = Math.max(0, Math.min(1, elapsedMs / SETUP_SPLASH_MS));
+	const phase = progress * 1.8;
+	const shine: ShineConfig = { pos: (progress * 2.5) % 1, strength: Math.max(0, 1 - progress * 0.35) };
+
+	if (w < MIN_SCENE_WIDTH || h < MIN_SCENE_HEIGHT) return renderCompactSplash(w, h, phase, shine);
+
+	const frame = Math.floor(elapsedMs / SETUP_TICK_MS);
+	const cx = Math.floor(w / 2);
+	const surfaceTime = frame * 0.13;
+
+	const cells: string[][] = Array.from({ length: h }, () => new Array<string>(w).fill(" "));
+	const put = (x: number, y: number, glyph: string): void => {
+		if (y >= 0 && y < h && x >= 0 && x < w) cells[y][x] = glyph;
+	};
+
+	const hx = Math.floor((w - LOGO_WIDTH) / 2);
+	const hy = Math.max(2, Math.floor(h * 0.16));
+	const waterTop = hy + LOGO_HEIGHT;
+	const waterHeight = Math.max(1, h - waterTop);
+
+	// 1. rippling water surface (shares the screen-wide gradient with the mark)
+	for (let y = waterTop; y < h; y++) {
+		for (let x = 0; x < w; x++) {
+			const amp = waterAmplitude(x, y, cx, waterTop, waterHeight, w, surfaceTime) + (waterJitter(x, y) - 0.5) * 0.06;
+			const cell = WATER_RAMP.find(step => amp > step.min);
+			if (cell) put(x, y, gradientEscape(screenGradientT(x, y, w, h, phase), shine) + cell.char + RESET);
+		}
+	}
+	// 2. twinkling starfield in the sky above the water
+	for (let y = 0; y < waterTop - 1; y++) {
+		for (let x = 0; x < w; x++) {
+			const star = skyGlyph(x, y, frame >> 3);
+			if (star) put(x, y, star);
+		}
+	}
+	// 3. hero — the brand mark with the live gradient + shine sweep
+	LARGE_LOGO.forEach((line, row) => {
+		let col = 0;
+		for (const ch of line) {
+			if (ch !== " ") {
+				put(
+					hx + col,
+					hy + row,
+					gradientEscape(screenGradientT(hx + col, hy + row, w, h, phase), shine) + ch + RESET,
+				);
+			}
+			col++;
+		}
+	});
+	// 4. skip hint on a cleared strip at the bottom so it stays legible over the water
+	const hintWidth = visibleWidth(SKIP_HINT);
+	const hintStart = Math.floor((w - hintWidth) / 2);
+	const hintRow = h - 1;
+	for (let x = hintStart - 1; x <= hintStart + hintWidth; x++) put(x, hintRow, " ");
+	let col = hintStart;
+	for (const ch of SKIP_HINT) put(col++, hintRow, ch === " " ? " " : theme.fg("dim", ch));
+
+	return cells.map(row => row.join(""));
+}
+
+/** Centered fallback for windows too small to hold the full scene. */
+function renderCompactSplash(width: number, height: number, phase: number, shine: ShineConfig): string[] {
+	const art = height >= 14 ? LARGE_LOGO : PI_LOGO;
+	const content = [...gradientLogo(art, phase, shine), "", theme.bold("O h   M y   P i")];
+	const start = Math.max(0, Math.floor((height - content.length) / 2));
+	const lines: string[] = [];
+	for (let y = 0; y < height; y++) {
+		const item = content[y - start];
+		lines.push(clampLine(item !== undefined ? centerLine(item, width) : "", width));
+	}
+	if (height > 2) lines[height - 2] = clampLine(centerLine(theme.fg("dim", SKIP_HINT), width), width);
+	return lines;
+}