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

package/src/overlays/show-images-selector.ts

@@ -0,0 +1,44 @@
+import { type SelectItem, SelectList, type SgrMouseEvent } from "../index";
+import { getSelectListTheme } from "../theme/theme";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { routeSelectListMouseWithTopBorder } from "../chrome/select-list-mouse-routing";
+
+/**
+ * Component that renders a show images selector with borders
+ */
+export class ShowImagesSelectorComponent extends OverlayPanel {
+	#selectList: SelectList;
+
+	constructor(currentValue: boolean, onSelect: (show: boolean) => void, onCancel: () => void) {
+		super("Show Images");
+
+		const items: SelectItem[] = [
+			{ value: "yes", label: "Yes", description: "Show images inline in terminal" },
+			{ value: "no", label: "No", description: "Show text placeholder instead" },
+		];
+
+		// Create selector
+		this.#selectList = new SelectList(items, 5, getSelectListTheme());
+
+		// Preselect current value
+		this.#selectList.setSelectedIndex(currentValue ? 0 : 1);
+
+		this.#selectList.onSelect = item => {
+			onSelect(item.value === "yes");
+		};
+
+		this.#selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.addChild(this.#selectList);
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		routeSelectListMouseWithTopBorder(this.#selectList, event, line, col);
+	}
+}

package/src/overlays/snapcompact-shape-preview-doc.md

@@ -0,0 +1,14 @@
+¶user:Fix the settings overlay crash. Wheeling past the last row throws.
+
+¶call:read(path="src/select-list.ts:140-180")//Reading the select-list hit test
+<out>
+162: const index = Math.floor(line / rowHeight); index is never checked against bounds.
+</out>
+
+¶ai:Found it. The hit test indexes past the filtered list; clamping to the last row fixes the crash.
+
+¶user:Does the fix survive filtering?
+
+¶think:Check whether the clamp runs before or after filtering.
+
+¶ai:Yes. The clamp applies after the filter pass, so a narrowed list keeps the hit map in sync. Added a regression test that wheels past the last row with a filter active and asserts no throw.

package/src/overlays/snapcompact-shape-preview.ts

@@ -0,0 +1,192 @@
+/**
+ * Live preview for the `snapcompact.shape` setting: renders a sample session
+ * transcript through the real snapcompact rasterizer as a miniature page and
+ * shows it zoomed, so cell size, ink hues, highlight bands, and dim tool-result
+ * spans are legible at terminal scale.
+ *
+ * The mini-frame (a {@link SRC_FRAME_PX}px page) is upscaled with
+ * nearest-neighbor so the glyph pixels stay crisp when the terminal scales the
+ * placement box. Graphics display requires the Kitty unicode-placeholder path —
+ * `renderImage` returning `lines` is the gate — because the bordered settings
+ * frame re-fits every row, which direct cursor-positioned placements (iTerm2,
+ * Sixel, Kitty `a=p`) do not survive. Everything else falls back to the stats
+ * line plus a dim notice.
+ */
+import { type Component, type ImageBudget, renderImage, TERMINAL } from "../index";
+import {
+	DIM_OFF,
+	DIM_ON,
+	geometry,
+	isShapeVariantName,
+	normalize,
+	renderMany,
+	resolveShape,
+	SHAPE_VARIANT_NAMES,
+	SHAPE_VARIANTS,
+	type Shape,
+	type ShapeTarget,
+	type ShapeVariantName,
+} from "@oh-my-pi/snapcompact";
+import { theme } from "../theme/theme";
+import sampleDoc from "./snapcompact-shape-preview-doc.md" with { type: "text" };
+
+/** Mini-frame edge in px — a small page from the real rasterizer ≈ a zoomed crop. */
+const SRC_FRAME_PX = 128;
+/** Nearest-neighbor upscale factor; keeps glyph pixels crisp on HiDPI cell boxes. */
+const ZOOM_SCALE = 4;
+/** Display box in terminal cells (square-ish at the typical 1:2 cell aspect). */
+const MAX_IMAGE_COLS = 28;
+const MAX_IMAGE_ROWS = 14;
+
+/** Sample transcript with `<out>…</out>` bodies wrapped in dim-ink toggles. */
+const PREVIEW_TEXT = sampleDoc
+	.trim()
+	.replace(/<out>\n([\s\S]*?)\n<\/out>/g, (_match, body: string) => `<out>\n${DIM_ON}${body}${DIM_OFF}\n</out>`);
+
+type PreviewEntry =
+	| { state: "rendering" }
+	| { state: "failed" }
+	| { state: "ready"; data: string; edgePx: number; imageId: number; transmitted: boolean };
+
+export interface SnapcompactShapePreviewOptions {
+	/** Active model (api + id); resolves what `auto` maps to for this reader. */
+	model?: ShapeTarget;
+	/** Shared TUI image budget: stable graphics ids, transmit-once, exit cleanup. */
+	imageBudget?: ImageBudget;
+	/** Schedules a re-render once an async sample render completes. */
+	requestRender?: () => void;
+}
+
+export class SnapcompactShapePreview implements Component {
+	#model: ShapeTarget | undefined;
+	#budget: ImageBudget | undefined;
+	#requestRender: () => void;
+	#variant: ShapeVariantName | "auto" = "auto";
+	#entries = new Map<ShapeVariantName, PreviewEntry>();
+
+	constructor(currentValue: string, options: SnapcompactShapePreviewOptions = {}) {
+		this.#model = options.model;
+		this.#budget = options.imageBudget;
+		this.#requestRender = options.requestRender ?? (() => {});
+		this.setValue(currentValue);
+	}
+
+	/** Track the highlighted option; the next render reflects it. */
+	setValue(value: string): void {
+		this.#variant = isShapeVariantName(value) ? value : "auto";
+	}
+
+	render(width: number): readonly string[] {
+		const shape = resolveShape(this.#model, this.#variant);
+		const name = resolvedVariantName(shape);
+		const geo = geometry(shape);
+		const label = this.#variant === "auto" ? `auto → ${name}` : name;
+		const chars = geo.capacity >= 1000 ? `${(geo.capacity / 1000).toFixed(1)}k` : String(geo.capacity);
+		const tokens =
+			shape.frameTokenEstimate >= 1000
+				? `${(shape.frameTokenEstimate / 1000).toFixed(1)}k`
+				: String(shape.frameTokenEstimate);
+		const stats = `full frame ${geo.cols}×${geo.rows} cells ≈ ${chars} chars ≈ ${tokens} tokens`;
+		const lines: string[] = [theme.fg("muted", `  Sample (zoomed) · ${label} · ${stats}`), ""];
+
+		if (!this.#budget || !TERMINAL.imageProtocol) {
+			lines.push(theme.fg("dim", "  (graphic sample needs a Kitty-graphics terminal)"));
+			return lines;
+		}
+
+		const entry = this.#ensureEntry(name, shape);
+		if (entry.state === "rendering") {
+			lines.push(theme.fg("dim", "  rendering sample…"));
+			return lines;
+		}
+		if (entry.state === "failed") {
+			lines.push(theme.fg("dim", "  (sample render failed)"));
+			return lines;
+		}
+
+		const result = renderImage(
+			entry.data,
+			{ widthPx: entry.edgePx, heightPx: entry.edgePx },
+			{
+				maxWidthCells: Math.max(8, Math.min(MAX_IMAGE_COLS, width - 4)),
+				maxHeightCells: MAX_IMAGE_ROWS,
+				imageId: entry.imageId,
+				includeTransmit: !entry.transmitted,
+			},
+		);
+		// Only the unicode-placeholder path returns text-cell `lines`; cursor-moving
+		// placements would corrupt the bordered settings frame, so skip them.
+		if (!result?.lines) {
+			lines.push(theme.fg("dim", "  (graphic sample needs Kitty unicode-placeholder graphics)"));
+			return lines;
+		}
+		if (result.transmit) {
+			this.#budget.enqueueTransmit(entry.imageId, result.transmit);
+			entry.transmitted = true;
+		}
+		for (const line of result.lines) {
+			lines.push(`  ${line}`);
+		}
+		return lines;
+	}
+
+	#ensureEntry(name: ShapeVariantName, shape: Shape): PreviewEntry {
+		let entry = this.#entries.get(name);
+		if (!entry) {
+			entry = { state: "rendering" };
+			this.#entries.set(name, entry);
+			void this.#buildEntry(name, shape);
+		}
+		return entry;
+	}
+
+	async #buildEntry(name: ShapeVariantName, shape: Shape): Promise<void> {
+		try {
+			// Fill the mini-page so every variant shows a fully inked window.
+			const capacity = geometry(shape, SRC_FRAME_PX).capacity;
+			let text = PREVIEW_TEXT;
+			while (normalize(text).length < capacity) {
+				text += ` ${PREVIEW_TEXT}`;
+			}
+			const frame = (await renderMany(text, { shape, frameSize: SRC_FRAME_PX, maxFrames: 1 }))[0];
+			if (!frame) throw new Error("empty sample frame");
+			const edgePx = SRC_FRAME_PX * ZOOM_SCALE;
+			const zoomed = await new Bun.Image(Buffer.from(frame.data, "base64"))
+				.resize(edgePx, edgePx, { filter: "nearest" })
+				.png()
+				.bytes();
+			this.#entries.set(name, {
+				state: "ready",
+				data: zoomed.toBase64(),
+				edgePx,
+				// Keyed id: reopening settings reuses the id, so data already in the
+				// terminal store is never re-transmitted (enqueueTransmit no-ops).
+				imageId: this.#budget?.acquireId(`snapshape:${name}:${edgePx}`) ?? 0,
+				transmitted: false,
+			});
+		} catch {
+			this.#entries.set(name, { state: "failed" });
+		}
+		this.#requestRender();
+	}
+}
+
+/** Research name of the concrete geometry `resolveShape` picked (for `auto`). */
+function resolvedVariantName(shape: Shape): ShapeVariantName {
+	for (const name of SHAPE_VARIANT_NAMES) {
+		const candidate = SHAPE_VARIANTS[name];
+		if (
+			candidate.font === shape.font &&
+			candidate.cellWidth === shape.cellWidth &&
+			candidate.cellHeight === shape.cellHeight &&
+			candidate.variant === shape.variant &&
+			candidate.lineRepeat === shape.lineRepeat &&
+			candidate.frameSize === shape.frameSize
+		) {
+			return name;
+		}
+	}
+	// resolveShape only hands out table geometries; the legacy shape is the
+	// conservative label if that invariant ever changes.
+	return "5x8-sent";
+}

package/src/overlays/theme-selector.ts

@@ -0,0 +1,62 @@
+import { type SelectItem, SelectList, type SgrMouseEvent } from "../index";
+import { getSelectListTheme } from "../theme/theme";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { routeSelectListMouseWithTopBorder } from "../chrome/select-list-mouse-routing";
+
+/**
+ * Component that renders a theme selector.
+ * Themes must be pre-loaded and passed to the constructor.
+ */
+export class ThemeSelectorComponent extends OverlayPanel {
+	#selectList: SelectList;
+	#onPreview: (themeName: string) => void;
+
+	constructor(
+		currentTheme: string,
+		themes: string[],
+		onSelect: (themeName: string) => void,
+		onCancel: () => void,
+		onPreview: (themeName: string) => void,
+	) {
+		super("Theme");
+		this.#onPreview = onPreview;
+
+		// Create select items from provided themes
+		const themeItems: SelectItem[] = themes.map(name => ({
+			value: name,
+			label: name,
+			description: name === currentTheme ? "(current)" : undefined,
+		}));
+
+		// Create selector
+		this.#selectList = new SelectList(themeItems, 10, getSelectListTheme());
+
+		// Preselect current theme
+		const currentIndex = themes.indexOf(currentTheme);
+		if (currentIndex !== -1) {
+			this.#selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.#selectList.onSelect = item => {
+			onSelect(item.value);
+		};
+
+		this.#selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.#selectList.onSelectionChange = item => {
+			this.#onPreview(item.value);
+		};
+
+		this.addChild(this.#selectList);
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		routeSelectListMouseWithTopBorder(this.#selectList, event, line, col);
+	}
+}

package/src/overlays/thinking-selector.ts

@@ -0,0 +1,51 @@
+import type { Effort } from "@oh-my-pi/pi-ai";
+import { type SelectItem, SelectList, type SgrMouseEvent } from "../index";
+import { getSelectListTheme } from "../theme/theme";
+import { getThinkingLevelMetadata } from "../thinking";
+import { OverlayPanel } from "../chrome/overlay-box";
+import { routeSelectListMouseWithTopBorder } from "../chrome/select-list-mouse-routing";
+
+/**
+ * Component that renders a thinking level selector with borders
+ */
+export class ThinkingSelectorComponent extends OverlayPanel {
+	#selectList: SelectList;
+
+	constructor(
+		currentLevel: Effort,
+		availableLevels: Effort[],
+		onSelect: (level: Effort) => void,
+		onCancel: () => void,
+	) {
+		super("Thinking Level");
+
+		const thinkingLevels: SelectItem[] = availableLevels.map(getThinkingLevelMetadata);
+
+		// Create selector
+		this.#selectList = new SelectList(thinkingLevels, thinkingLevels.length, getSelectListTheme());
+
+		// Preselect current level
+		const currentIndex = thinkingLevels.findIndex(item => item.value === currentLevel);
+		if (currentIndex !== -1) {
+			this.#selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.#selectList.onSelect = item => {
+			onSelect(item.value as Effort);
+		};
+
+		this.#selectList.onCancel = () => {
+			onCancel();
+		};
+
+		this.addChild(this.#selectList);
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		routeSelectListMouseWithTopBorder(this.#selectList, event, line, col);
+	}
+}

package/src/overlays/tiny-title-download-progress.ts

@@ -0,0 +1,102 @@
+import { type Component, truncateToWidth, visibleWidth } from "../index";
+import { formatBytes } from "@oh-my-pi/pi-utils";
+import { ProgressBar } from "../components/progress-bar";
+/** Download progress fields consumed by the status display. */
+export interface TinyTitleDownloadProgress {
+	status: "initiate" | "download" | "progress" | "progress_total" | "done" | "ready" | "error";
+	file?: string;
+	progress?: number;
+	loaded?: number;
+	total?: number;
+	files?: Record<string, { loaded: number; total: number }>;
+}
+import { theme } from "../theme/theme";
+
+const DEFAULT_BAR_WIDTH = 24;
+
+function padLine(line: string, width: number): string {
+	const visible = visibleWidth(line);
+	return visible >= width ? truncateToWidth(line, width) : `${line}${" ".repeat(width - visible)}`;
+}
+
+function currentFile(event: TinyTitleDownloadProgress | undefined): string | undefined {
+	if (!event) return undefined;
+	if (event.file) return event.file.split("/").at(-1) ?? event.file;
+	if (event.files) {
+		let largestFile: string | undefined;
+		let largestLoaded = -1;
+		for (const file in event.files) {
+			const state = event.files[file];
+			if (state.loaded <= largestLoaded || state.loaded >= state.total) continue;
+			largestFile = file;
+			largestLoaded = state.loaded;
+		}
+		return largestFile?.split("/").at(-1) ?? largestFile;
+	}
+	return undefined;
+}
+
+function statusLabel(event: TinyTitleDownloadProgress | undefined): string {
+	if (!event) return "Preparing";
+	if (event.status === "error") return "Failed";
+	if (event.status === "ready") return "Ready";
+	if (event.status === "done") return "Downloaded";
+	if (event.status === "download") return "Downloading";
+	if (event.status === "progress" || event.status === "progress_total") return "Downloading";
+	return "Preparing";
+}
+
+function byteLabel(event: TinyTitleDownloadProgress | undefined): string | undefined {
+	if (!event?.loaded || !event.total) return undefined;
+	return `${formatBytes(event.loaded)} / ${formatBytes(event.total)}`;
+}
+
+export class TinyTitleDownloadProgressComponent implements Component {
+	#modelLabel: string;
+	#event: TinyTitleDownloadProgress | undefined;
+	#bar = new ProgressBar(undefined, {
+		min: 0,
+		max: 100,
+		minWidth: 8,
+		maxWidth: DEFAULT_BAR_WIDTH,
+		style: {
+			filled: "█",
+			empty: "░",
+			styleFilled: text => theme.fg("accent", text),
+			styleEmpty: text => theme.fg("muted", text),
+			styleIndeterminate: text => theme.fg("muted", text),
+		},
+	});
+
+	constructor(modelLabel: string) {
+		this.#modelLabel = modelLabel;
+	}
+
+	update(event: TinyTitleDownloadProgress): void {
+		this.#event = event;
+		this.#bar.setValue(event.progress);
+	}
+
+	isComplete(): boolean {
+		return this.#event?.status === "ready" || this.#event?.status === "error";
+	}
+
+	invalidate(): void {
+		this.#bar.invalidate();
+	}
+
+	render(width: number): readonly string[] {
+		width = Math.max(1, width);
+		const border = theme.fg("border", theme.boxRound.horizontal.repeat(width));
+		const status = statusLabel(this.#event);
+		const file = currentFile(this.#event);
+		const pct =
+			this.#event?.progress === undefined ? "" : `${Math.floor(this.#event.progress).toString().padStart(3, " ")}%`;
+		const bytes = byteLabel(this.#event);
+		const title = `${theme.fg("accent", "Tiny model")} ${theme.fg("muted", status)} ${this.#modelLabel}`;
+		const bar = this.#bar.render(Math.max(8, width - 36))[0] ?? "";
+		const details = [bar, pct, bytes, file].filter((part): part is string => Boolean(part)).join(" ");
+
+		return [border, padLine(` ${title}`, width), padLine(` ${details}`, width), border];
+	}
+}