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

package/src/render/utils.ts

@@ -0,0 +1,109 @@
+/**
+ * Shared helpers for tool-rendered UI components.
+ */
+import type { Theme, ThemeBg } from "../theme/theme";
+import { padding, truncateToWidth, visibleWidth } from "../utils";
+import type { State } from "./types";
+
+/** Cached typed-array scratch space for hashing non-string primitives. */
+const hashBuf = new ArrayBuffer(8);
+const hashView = new DataView(hashBuf);
+const hashBytes1 = new Uint8Array(hashBuf, 0, 1);
+const hashBytes4 = new Uint8Array(hashBuf, 0, 4);
+const hashBytes8 = new Uint8Array(hashBuf, 0, 8);
+
+/**
+ * Incremental xxHash64 key builder.
+ *
+ * Chains `Bun.hash.xxHash64` calls via seeding — each fed value
+ * mixes into the running hash without intermediate string allocations.
+ * Accepts strings, numbers (u32), booleans, bigints, and `undefined`/`null`
+ * (hashed as a sentinel byte) natively.
+ */
+export class Hasher {
+	#h = 0n;
+
+	/** Feed a string. */
+	str(s: string): this {
+		hashView.setUint32(0, s.length);
+		this.#h = Bun.hash.xxHash64(hashBytes4, this.#h);
+		this.#h = Bun.hash.xxHash64(s, this.#h);
+		return this;
+	}
+
+	/** Feed an unsigned 32-bit integer. */
+	u32(n: number): this {
+		hashView.setUint32(0, n);
+		this.#h = Bun.hash.xxHash64(hashBytes4, this.#h);
+		return this;
+	}
+
+	/** Feed a 64-bit bigint. */
+	u64(n: bigint): this {
+		hashView.setBigUint64(0, n);
+		this.#h = Bun.hash.xxHash64(hashBytes8, this.#h);
+		return this;
+	}
+
+	/** Feed a boolean (single byte: 1 = true, 0 = false). */
+	bool(b: boolean): this {
+		hashView.setUint8(0, b ? 1 : 0);
+		this.#h = Bun.hash.xxHash64(hashBytes1, this.#h);
+		return this;
+	}
+
+	/** Feed a value that may be `undefined` or `null` (hashed as a 0xFF sentinel byte). */
+	optional(v: string | undefined | null): this {
+		if (v == null) {
+			hashView.setUint8(0, 0xff);
+			this.#h = Bun.hash.xxHash64(hashBytes1, this.#h);
+		} else {
+			this.#h = Bun.hash.xxHash64(v, this.#h);
+		}
+		return this;
+	}
+
+	/** Return the final hash digest. */
+	digest(): bigint {
+		return this.#h;
+	}
+}
+
+/** Render-cache entry used by tool renderers. */
+export interface RenderCache {
+	key: bigint;
+	lines: string[];
+}
+
+/** Build indentation and continuing branches for ancestor levels. */
+export function buildTreePrefix(ancestors: boolean[], theme: Theme): string {
+	return ancestors.map(hasNext => (hasNext ? `${theme.tree.vertical}  ` : "   ")).join("");
+}
+
+/** Return the branch glyph for a final or continuing tree item. */
+export function getTreeBranch(isLast: boolean, theme: Theme): string {
+	return isLast ? theme.tree.last : theme.tree.branch;
+}
+
+/** Return the continuation prefix for subsequent lines of a tree item. */
+export function getTreeContinuePrefix(isLast: boolean, theme: Theme): string {
+	return isLast ? "   " : `${theme.tree.vertical}  `;
+}
+
+/** Pad or truncate visible text to exactly `width` columns and optionally apply a background. */
+export function padToWidth(text: string, width: number, bgFn?: (s: string) => string): string {
+	if (width <= 0) return bgFn ? bgFn(text) : text;
+	const w = visibleWidth(text);
+	if (w === width) return bgFn ? bgFn(text) : text;
+	const fitted = w < width ? text + padding(width - w) : truncateToWidth(text, width);
+	const drift = width - visibleWidth(fitted);
+	const padded = drift > 0 ? fitted + padding(drift) : fitted;
+	return bgFn ? bgFn(padded) : padded;
+}
+
+/** Resolve a tool output state to its background color token. */
+export function getStateBgColor(state: State): ThemeBg {
+	if (state === "success") return "toolSuccessBg";
+	if (state === "error") return "toolErrorBg";
+	return "toolPendingBg";
+}

package/src/render/width-aware-text.ts

@@ -0,0 +1,60 @@
+import { Text } from "../components/text";
+import type { Component } from "../tui";
+import { getPaddingX } from "../utils";
+
+/**
+ * Text whose content is (re)formatted against the actual render width.
+ *
+ * A plain `Text` receives an already-formatted string and only wraps it at
+ * render time, so width-dependent layout (per-line truncation, inline previews)
+ * has to be decided before the width is known. Renderers used to cope by
+ * hard-capping output lines at a fixed column count (e.g. 80), which truncated
+ * to roughly a third of a wide terminal. This defers formatting to
+ * `render(width)`: it computes the same content width the inner `Text` uses
+ * (mirroring its tight-layout flag so the budget can't desync), hands that to
+ * the formatter, and delegates margins/background/vertical padding to the inner
+ * `Text`. Lines the formatter caps at `contentWidth` fit exactly and so never
+ * wrap.
+ */
+export class WidthAwareText implements Component {
+	#format: (contentWidth: number) => string;
+	readonly #paddingX: number;
+	#inner: Text;
+	#cachedContentWidth = -1;
+	#cachedText: string | undefined;
+	#ignoreTight = false;
+
+	constructor(format: (contentWidth: number) => string, paddingX = 1, paddingY = 1) {
+		this.#format = format;
+		this.#paddingX = paddingX;
+		this.#inner = new Text("", paddingX, paddingY);
+	}
+
+	setCustomBgFn(customBgFn?: (text: string) => string): void {
+		this.#inner.setCustomBgFn(customBgFn);
+	}
+
+	setIgnoreTight(ignore: boolean): this {
+		this.#ignoreTight = ignore;
+		this.#inner.setIgnoreTight(ignore);
+		this.invalidate();
+		return this;
+	}
+
+	invalidate(): void {
+		this.#cachedContentWidth = -1;
+		this.#cachedText = undefined;
+		this.#inner.invalidate();
+	}
+
+	render(width: number): readonly string[] {
+		const paddingX = this.#ignoreTight ? this.#paddingX : getPaddingX(this.#paddingX);
+		const contentWidth = Math.max(1, width - paddingX * 2);
+		if (this.#cachedText === undefined || contentWidth !== this.#cachedContentWidth) {
+			this.#cachedContentWidth = contentWidth;
+			this.#cachedText = this.#format(contentWidth);
+			this.#inner.setText(this.#cachedText);
+		}
+		return this.#inner.render(width);
+	}
+}

package/src/setup/lazy.ts

@@ -0,0 +1,17 @@
+import type { SetupHost } from "./scenes/types";
+
+/** Load and run provider setup without completing onboarding or replaying the welcome intro. */
+export async function runProviderSetupWizard(ctx: SetupHost): Promise<void> {
+	// Keep the full setup wizard behind the existing cold-start boundary; a static
+	// import here would load provider/OAuth/search/theme setup deps on every TUI startup.
+	const { ALL_SCENES, runSetupWizard } = await import("./wizard");
+	const providersScene = ALL_SCENES.find(scene => scene.id === "providers");
+	if (!providersScene) {
+		ctx.showError("Provider setup is unavailable.");
+		return;
+	}
+	await runSetupWizard(ctx, [providersScene], {
+		markComplete: false,
+		playWelcomeIntro: false,
+	});
+}

package/src/setup/scenes/composer.ts

@@ -0,0 +1,127 @@
+import { type SgrMouseEvent } from "../../mouse";
+import { type SelectItem, SelectList } from "../../components/select-list";
+import { Container } from "../../tui";
+import { Text } from "../../components/text";
+import { WizardStep } from "../../components/wizard-step";
+import type { ComposerShape } from "../../overlays/composer-shape-registry";
+import { renderComposerShapePreview } from "../../overlays/composer-shape-preview";
+import { getComposerShapeOptions } from "../../overlays/composer-shape-registry";
+import { getSelectListTheme, theme } from "../../theme/theme";
+import type { SetupScene, SetupSceneController, SetupSceneHost } from "./types";
+
+class ComposerSceneController implements SetupSceneController {
+	title = "Choose composer shape";
+	subtitle = "Pick the prompt and status line layout for your workflow.";
+	#selectList: SelectList;
+	#shapes: readonly ComposerShape[];
+	#items: readonly SelectItem[];
+	#currentShape: ComposerShape = "band";
+	#committing = false;
+	#step: WizardStep | undefined;
+
+	readonly #host: SetupSceneHost;
+
+	constructor(host: SetupSceneHost) {
+		this.#host = host;
+		const choices = getComposerShapeOptions();
+		this.#shapes = choices.map(choice => choice.value);
+		this.#items = choices.map((choice, index) => ({
+			value: choice.value,
+			label: `${index + 1}  ${choice.label}`,
+			description: choice.description,
+		}));
+		const configuredShape = host.ctx.composerShape ?? "band";
+		const initialShape = this.#shapes.includes(configuredShape) ? configuredShape : "band";
+		this.#currentShape = initialShape;
+		const initialIndex = Math.max(0, this.#shapes.indexOf(initialShape));
+
+		const selectListTheme = getSelectListTheme();
+		this.#selectList = new SelectList(this.#items, this.#items.length, selectListTheme);
+		this.#selectList.setSelectedIndex(initialIndex);
+		this.#selectList.onSelectionChange = item => {
+			this.#preview(item.value);
+		};
+		this.#selectList.onSelect = item => {
+			void this.#commit(item.value);
+		};
+		this.#selectList.onCancel = () => {
+			// Esc skips the scene without saving; the configured shape stays untouched.
+			this.#host.finish("skipped");
+		};
+	}
+
+	invalidate(): void {
+		if (this.#step) this.#step.invalidate();
+		else this.#selectList.invalidate();
+	}
+
+	handleInput(data: string): void {
+		if (this.#committing) return;
+		const quickIndex = data.length === 1 ? Number(data) - 1 : -1;
+		if (Number.isInteger(quickIndex) && quickIndex >= 0 && quickIndex < this.#items.length) {
+			this.#selectList.setSelectedIndex(quickIndex);
+			this.#preview(this.#shapes[quickIndex] ?? "band");
+			return;
+		}
+		if (this.#step) this.#step.handleInput(data);
+		else this.#selectList.handleInput(data);
+	}
+
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		this.#step?.routeMouse(event, line, col);
+	}
+
+	render(width: number, maxLines?: number): readonly string[] {
+		const intro = new Text(
+			theme.fg("muted", "Select a layout; live preview updates below. Press Enter to confirm."),
+			0,
+			0,
+		);
+		const preview = new Container();
+		preview.addChild(new Text(theme.fg("muted", "Preview:"), 0, 0));
+		for (const line of renderComposerShapePreview(this.#currentShape, width, this.#host.ctx.statusLine)) {
+			preview.addChild(new Text(line, 0, 0));
+		}
+		const items = this.#items.length;
+		if (!this.#step) {
+			this.#step = new WizardStep({
+				kind: "choice",
+				intro,
+				preview: { component: preview, optional: true },
+				content: this.#selectList,
+				minContentLines: items,
+				fitContent: () => {
+					this.#selectList.setMaxVisible(items);
+				},
+			});
+		} else {
+			this.#step.setIntro(intro);
+			this.#step.setPreview({ component: preview, optional: true });
+		}
+		this.#step.setMaxHeight(maxLines);
+		return this.#step.render(width);
+	}
+
+	async #commit(shape: ComposerShape): Promise<void> {
+		if (this.#committing) return;
+		this.#committing = true;
+		try {
+			await this.#host.ctx.saveComposerShape(shape);
+		} finally {
+			this.#host.finish("done");
+		}
+	}
+
+	#preview(shape: ComposerShape): void {
+		this.#currentShape = shape;
+		this.#host.requestRender();
+	}
+}
+
+/** Select and persist the prompt composer layout. */
+export const composerSetupScene: SetupScene = {
+	id: "composer-shape",
+	title: "Choose composer shape",
+	minVersion: 2,
+	mount: host => new ComposerSceneController(host),
+};

package/src/setup/scenes/glyph.ts

@@ -0,0 +1,120 @@
+import { type SgrMouseEvent } from "../../mouse";
+import { type SelectItem, SelectList } from "../../components/select-list";
+import { Text } from "../../components/text";
+import { WizardStep } from "../../components/wizard-step";
+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;
+	#step: WizardStep | undefined;
+
+	readonly #host: SetupSceneHost;
+
+	constructor(host: SetupSceneHost) {
+		this.#host = host;
+		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 {
+		if (this.#step) this.#step.invalidate();
+		else 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;
+		}
+		if (this.#step) this.#step.handleInput(data);
+		else this.#selectList.handleInput(data);
+	}
+
+	/** Wheel moves the highlight (live preview); hover lights the row under the pointer; click confirms it. */
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		if (this.#committing) return;
+		this.#step?.routeMouse(event, line, col);
+	}
+
+	render(width: number, maxLines?: number): readonly string[] {
+		if (!this.#step) {
+			this.#step = new WizardStep({
+				kind: "choice",
+				intro: new Text(theme.fg("muted", "If a row shows boxes, tofu, or misaligned icons, pick another."), 0, 0),
+				content: this.#selectList,
+				minContentLines: GLYPH_ITEMS.length,
+				fitContent: () => {
+					this.#selectList.setMaxVisible(GLYPH_ITEMS.length);
+				},
+			});
+		}
+		this.#step.setMaxHeight(maxLines);
+		return this.#step.render(width);
+	}
+
+	async #commit(preset: SymbolPreset): Promise<void> {
+		if (this.#committing) return;
+		this.#committing = true;
+		this.#previewRequest += 1;
+		this.#host.ctx.saveSymbolPreset(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();
+		});
+	}
+}
+
+/** Preview and persist the terminal glyph preset. */
+export const glyphSetupScene: SetupScene = {
+	id: "glyph-mode",
+	title: "Choose glyph mode",
+	minVersion: 1,
+	mount: host => new GlyphSceneController(host),
+};

package/src/setup/scenes/model.ts

@@ -0,0 +1,138 @@
+import type { Model } from "@oh-my-pi/pi-ai";
+import type { SgrMouseEvent } from "../../mouse";
+import { Text } from "../../components/text";
+import { WizardStep } from "../../components/wizard-step";
+import { buildBrowserItems, ModelBrowser, resolveRoleAssignments, sortModelItems } from "../../overlays/model-browser";
+import { BROWSER_FRAME_ROWS } from "../../overlays/model-picker";
+import { theme } from "../../theme/theme";
+import type { SetupScene, SetupSceneController, SetupSceneHost } from "./types";
+
+const MAX_VISIBLE_MODELS = 10;
+
+class ModelSceneController implements SetupSceneController {
+	title = "Choose your default model";
+	subtitle = "Search configured models and save the model used for new sessions.";
+	#browser: ModelBrowser;
+	#status: string | undefined;
+	#selecting = false;
+	#disposed = false;
+	#step: WizardStep | undefined;
+
+	readonly #host: SetupSceneHost;
+
+	constructor(host: SetupSceneHost) {
+		this.#host = host;
+		this.#browser = new ModelBrowser(host.ctx.modelSource);
+		this.#browser.onActivate = item => {
+			void this.#select(item.model, item.selector);
+		};
+		this.#browser.onCancel = () => host.finish("skipped");
+		this.#syncModels();
+	}
+
+	async onMount(): Promise<void> {
+		this.#status = theme.fg("muted", "Discovering available models…");
+		this.#host.requestRender();
+		await this.#refreshModels();
+	}
+
+	dispose(): void {
+		this.#disposed = true;
+	}
+
+	invalidate(): void {
+		if (this.#step) this.#step.invalidate();
+		else this.#browser.invalidate();
+	}
+
+	handleInput(data: string): void {
+		if (this.#selecting) return;
+		if (this.#step) this.#step.handleInput(data);
+		else this.#browser.handleInput(data);
+	}
+
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		if (this.#selecting) return;
+		this.#step?.routeMouse(event, line, col);
+	}
+
+	render(width: number, maxLines?: number): readonly string[] {
+		const intro = new Text(
+			this.#status ?? theme.fg("muted", "Type to search. Enter saves the highlighted model as your default."),
+			0,
+			0,
+		);
+		if (!this.#step) {
+			this.#step = new WizardStep({
+				kind: "choice",
+				intro,
+				content: this.#browser,
+				minContentLines: 1,
+				fitContent: budget => {
+					const visible = budget === undefined ? MAX_VISIBLE_MODELS : budget - BROWSER_FRAME_ROWS;
+					this.#browser.setMaxVisible(Math.max(1, Math.min(MAX_VISIBLE_MODELS, visible)));
+				},
+			});
+		} else {
+			this.#step.setIntro(intro);
+		}
+		this.#step.setMaxHeight(maxLines);
+		return this.#step.render(width);
+	}
+
+	#syncModels(): void {
+		const { available, all, current } = this.#host.ctx.getModels();
+		const source = this.#host.ctx.modelSource;
+		const roles = resolveRoleAssignments(source, all, available);
+		const items = buildBrowserItems(available);
+		sortModelItems(items, { roles, mruOrder: source.mruOrder });
+		this.#browser.setRoles(roles);
+		this.#browser.setMruOrder(source.mruOrder);
+		this.#browser.setPerfStats(source.modelPerf);
+		this.#browser.setItems(items);
+
+		if (current) {
+			const selector = `${current.provider}/${current.id}`;
+			this.#browser.setCurrentSelector(selector);
+			this.#browser.selectSelector(selector);
+		}
+	}
+
+	async #refreshModels(): Promise<void> {
+		try {
+			await this.#host.ctx.refreshModels();
+			if (this.#disposed) return;
+			this.#syncModels();
+			this.#status = undefined;
+			this.#host.requestRender();
+		} catch (error) {
+			if (this.#disposed) return;
+			this.#status = theme.fg("error", error instanceof Error ? error.message : String(error));
+			this.#host.requestRender();
+		}
+	}
+
+	async #select(model: Model, selector: string): Promise<void> {
+		if (this.#selecting) return;
+		this.#selecting = true;
+		this.#status = theme.fg("muted", `Saving ${selector} as the default model…`);
+		this.#host.requestRender();
+		try {
+			await this.#host.ctx.selectModel(model, selector);
+			if (!this.#disposed) this.#host.finish("done");
+		} catch (error) {
+			if (this.#disposed) return;
+			this.#selecting = false;
+			this.#status = theme.fg("error", error instanceof Error ? error.message : String(error));
+			this.#host.requestRender();
+		}
+	}
+}
+
+/** Setup step that assigns one available model to the persisted default role. */
+export const modelSetupScene: SetupScene = {
+	id: "model",
+	title: "Choose your default model",
+	minVersion: 1,
+	mount: host => new ModelSceneController(host),
+};

package/src/setup/scenes/outro.ts

@@ -0,0 +1,24 @@
+import { centerLine } from "../../utils";
+import { padToWidth } from "../../render/utils";
+import { gradientLogo, PI_LOGO } from "../../prompt/welcome";
+import { theme } from "../../theme/theme";
+import { renderStarfield, SETUP_TICK_MS } from "./splash";
+
+export const SETUP_OUTRO_MS = 1200;
+
+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 => (width > 0 ? padToWidth(line, width) : ""));
+}