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

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

@@ -2,15 +2,18 @@ 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";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
+import { SelectListSheet } from "../native/picker";
 
 /**
  * Component that renders a show images selector with borders
  */
 export class ShowImagesSelectorComponent extends OverlayPanel {
 	#selectList: SelectList;
+	#sheet: SelectListSheet;
 
 	constructor(currentValue: boolean, onSelect: (show: boolean) => void, onCancel: () => void) {
-		super("Show Images");
+		super("Show Images", "omp.overlay.show-images");
 
 		const items: SelectItem[] = [
 			{ value: "yes", label: "Yes", description: "Show images inline in terminal" },
@@ -32,6 +35,20 @@ export class ShowImagesSelectorComponent extends OverlayPanel {
 		};
 
 		this.addChild(this.#selectList);
+		this.#sheet = new SelectListSheet(this.#selectList, {
+			title: "Show images",
+			noun: "options",
+			current: [currentValue ? "yes" : "no"],
+		});
+	}
+
+	override describe(cx: DescribeContext): NativeNode | null {
+		return cx.supports("picker") ? this.#sheet.describe() : super.describe(cx);
+	}
+
+	/** Picker pointer events drive the list exactly as its keys do. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		this.#sheet.handle(event);
 	}
 
 	getSelectList(): SelectList {

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

@@ -29,6 +29,9 @@ import {
 } from "@oh-my-pi/snapcompact";
 import { theme } from "../theme/theme";
 import sampleDoc from "./snapcompact-shape-preview-doc.md" with { type: "text" };
+import type { DescribeContext, NativeNode } from "../native/node";
+import { col, node, span, text } from "../native/describe";
+import { registerNativeBlob } from "../native/blobs";
 
 /** Mini-frame edge in px — a small page from the real rasterizer ≈ a zoomed crop. */
 const SRC_FRAME_PX = 128;
@@ -46,7 +49,15 @@ const PREVIEW_TEXT = sampleDoc
 type PreviewEntry =
 	| { state: "rendering" }
 	| { state: "failed" }
-	| { state: "ready"; data: string; edgePx: number; imageId: number; transmitted: boolean };
+	| {
+			state: "ready";
+			data: string;
+			/** The PNG `data` decodes to; a native `image` blob. */
+			bytes: Uint8Array;
+			edgePx: number;
+			imageId: number;
+			transmitted: boolean;
+	  };
 
 export interface SnapcompactShapePreviewOptions {
 	/** Active model (api + id); resolves what `auto` maps to for this reader. */
@@ -63,6 +74,7 @@ export class SnapcompactShapePreview implements Component {
 	#requestRender: () => void;
 	#variant: ShapeVariantName | "auto" = "auto";
 	#entries = new Map<ShapeVariantName, PreviewEntry>();
+	#native: { variant: ShapeVariantName | "auto"; entry: PreviewEntry | undefined; node: NativeNode } | undefined;
 
 	constructor(currentValue: string, options: SnapcompactShapePreviewOptions = {}) {
 		this.#model = options.model;
@@ -76,9 +88,35 @@ export class SnapcompactShapePreview implements Component {
 		this.#variant = isShapeVariantName(value) ? value : "auto";
 	}
 
-	render(width: number): readonly string[] {
+	describe(cx: DescribeContext): NativeNode {
 		const shape = resolveShape(this.#model, this.#variant);
 		const name = resolvedVariantName(shape);
+		const entry = cx.supports("image") ? this.#ensureEntry(name, shape) : undefined;
+		const memo = this.#native;
+		if (memo !== undefined && memo.variant === this.#variant && memo.entry === entry) return memo.node;
+		const { label, stats } = this.#caption(shape, name);
+		let sample: NativeNode;
+		if (!entry) sample = text([span("(graphic sample needs an image-capable terminal)", "dim")]);
+		else if (entry.state === "rendering") sample = node("spinner", { label: [span("rendering sample…", "dim")] });
+		else if (entry.state === "failed") sample = text([span("(sample render failed)", "dim")]);
+		else {
+			sample = node("image", {
+				blob: registerNativeBlob(entry.bytes, "image/png"),
+				alt: `snapcompact ${label} sample`,
+				w: entry.edgePx,
+				h: entry.edgePx,
+				max: { w: `${MAX_IMAGE_COLS}ch`, h: `${MAX_IMAGE_ROWS}lines` },
+			});
+		}
+		const described = col(
+			[text([span(`Sample (zoomed) · ${label} · ${stats}`, "muted")], { wrap: "word" }), sample],
+			{ role: "omp.preview.snapcompact-shape", gap: "sm" },
+		);
+		this.#native = { variant: this.#variant, entry, node: described };
+		return described;
+	}
+
+	#caption(shape: Shape, name: ShapeVariantName): { label: string; stats: string } {
 		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);
@@ -86,7 +124,13 @@ export class SnapcompactShapePreview implements Component {
 			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`;
+		return { label, stats: `full frame ${geo.cols}×${geo.rows} cells ≈ ${chars} chars ≈ ${tokens} tokens` };
+	}
+
+	render(width: number): readonly string[] {
+		const shape = resolveShape(this.#model, this.#variant);
+		const name = resolvedVariantName(shape);
+		const { label, stats } = this.#caption(shape, name);
 		const lines: string[] = [theme.fg("muted", `  Sample (zoomed) · ${label} · ${stats}`), ""];
 
 		if (!this.#budget || !TERMINAL.imageProtocol) {
@@ -158,6 +202,7 @@ export class SnapcompactShapePreview implements Component {
 			this.#entries.set(name, {
 				state: "ready",
 				data: zoomed.toBase64(),
+				bytes: zoomed,
 				edgePx,
 				// Keyed id: reopening settings reuses the id, so data already in the
 				// terminal store is never re-transmitted (enqueueTransmit no-ops).

package/src/overlays/stats-notice.ts

@@ -0,0 +1,31 @@
+/**
+ * `/stats` result: omp serves the stats dashboard in the browser. ANSI keeps
+ * the dim status line; natively it is an inline notice with an
+ * `Open dashboard ↗` button that opens the URL terminal-side.
+ */
+import { Spacer } from "../components/spacer";
+import { Text } from "../components/text";
+import { theme } from "../theme/theme";
+import { Container } from "../tui";
+import { node, span } from "../native/describe";
+import type { NativeNode } from "../native/node";
+import { actionButton } from "../native/overlay";
+
+export class StatsNotice extends Container {
+	readonly #native: NativeNode;
+
+	/** `message` is the launch status line; `url` the dashboard address. */
+	constructor(message: string, url: string) {
+		super();
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(message, 1, 0).setStyleFn(line => theme.fg("dim", line)));
+		this.#native = node("row", { gap: "md", align: "center", wrap: true }, [
+			node("text", { spans: [span(message)], role: "omp.stats", wrap: "word", grow: 1 }),
+			actionButton("Open dashboard ↗", "open", { href: url, title: url }),
+		]);
+	}
+
+	override describe(): NativeNode {
+		return this.#native;
+	}
+}

package/src/overlays/theme-selector.ts

@@ -2,6 +2,25 @@ 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";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
+import { type SelectPickerOptions, SelectListSheet } from "../native/picker";
+
+/**
+ * Picker options for a theme list (this selector and the settings theme
+ * submenu): a swatch `mark` seeded by the theme id, the current theme dotted,
+ * `Apply ⏎`. Moving the selection previews through the list's `onSelectionChange`.
+ */
+export function themePickerOptions(title: string, current: string): SelectPickerOptions {
+	return {
+		title,
+		icon: "ink",
+		noun: "themes",
+		searchable: true,
+		current: [current],
+		confirm: "Apply",
+		decorate: item => ({ mark: { text: item.value.slice(0, 2), seed: item.value } }),
+	};
+}
 
 /**
  * Component that renders a theme selector.
@@ -9,6 +28,7 @@ import { routeSelectListMouseWithTopBorder } from "../chrome/select-list-mouse-r
  */
 export class ThemeSelectorComponent extends OverlayPanel {
 	#selectList: SelectList;
+	#sheet: SelectListSheet;
 	#onPreview: (themeName: string) => void;
 
 	constructor(
@@ -18,7 +38,7 @@ export class ThemeSelectorComponent extends OverlayPanel {
 		onCancel: () => void,
 		onPreview: (themeName: string) => void,
 	) {
-		super("Theme");
+		super("Theme", "omp.overlay.theme");
 		this.#onPreview = onPreview;
 
 		// Create select items from provided themes
@@ -50,6 +70,16 @@ export class ThemeSelectorComponent extends OverlayPanel {
 		};
 
 		this.addChild(this.#selectList);
+		this.#sheet = new SelectListSheet(this.#selectList, themePickerOptions("Theme", currentTheme));
+	}
+
+	override describe(cx: DescribeContext): NativeNode | null {
+		return cx.supports("picker") ? this.#sheet.describe() : super.describe(cx);
+	}
+
+	/** Picker pointer events drive the list exactly as its keys do. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		this.#sheet.handle(event);
 	}
 
 	getSelectList(): SelectList {

package/src/overlays/thinking-selector.ts

@@ -4,12 +4,15 @@ import { getSelectListTheme } from "../theme/theme";
 import { getThinkingLevelMetadata } from "../thinking";
 import { OverlayPanel } from "../chrome/overlay-box";
 import { routeSelectListMouseWithTopBorder } from "../chrome/select-list-mouse-routing";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
+import { SelectListSheet } from "../native/picker";
 
 /**
  * Component that renders a thinking level selector with borders
  */
 export class ThinkingSelectorComponent extends OverlayPanel {
 	#selectList: SelectList;
+	#sheet: SelectListSheet;
 
 	constructor(
 		currentLevel: Effort,
@@ -17,7 +20,7 @@ export class ThinkingSelectorComponent extends OverlayPanel {
 		onSelect: (level: Effort) => void,
 		onCancel: () => void,
 	) {
-		super("Thinking Level");
+		super("Thinking Level", "omp.overlay.thinking");
 
 		const thinkingLevels: SelectItem[] = availableLevels.map(getThinkingLevelMetadata);
 
@@ -39,6 +42,24 @@ export class ThinkingSelectorComponent extends OverlayPanel {
 		};
 
 		this.addChild(this.#selectList);
+		this.#sheet = new SelectListSheet(this.#selectList, {
+			title: "Thinking level",
+			icon: "brain",
+			noun: "levels",
+			current: [currentLevel],
+			decorate: item => ({
+				chips: [{ text: "", dot: `thinking${item.value.charAt(0).toUpperCase()}${item.value.slice(1)}` }],
+			}),
+		});
+	}
+
+	override describe(cx: DescribeContext): NativeNode | null {
+		return cx.supports("picker") ? this.#sheet.describe() : super.describe(cx);
+	}
+
+	/** Picker pointer events drive the list exactly as its keys do. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		this.#sheet.handle(event);
 	}
 
 	getSelectList(): SelectList {