@bismawy/pi-arnative 0.2.12 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## [0.3.1] - 2026-10-04
+
+### Changed
+- `/arnative headers` and `/arnative footers` picker rows are reordered built-in first (`Pi (system)`, `Arnative (Full)`) and the parenthetical suffix now renders in the theme's `dim` token, so the preset name carries the row and the qualifier reads as a footnote (`extensions/arnative.ts`).
+- Preset ids renamed: `Pi` → `Pi (system)`. `Arnative (Full)` is still the default and the header/footer slot logic is unchanged.
+- Picker subtitles no longer repeat the preset names: "Selection applies live — custom header or built-in."
+- README shows only `assets/pi-arnative.webp` as the hero image; the full-width `assets/banner.webp` stays reserved for the pi.dev package page via `pi.image`.
+- `package.json` `description` now leads with the README tagline ("Refined aesthetics. Cohesive tools. Built for Pi.") followed by the capability summary, per the `/arnative-pi` manifest standard — pi.dev/packages renders this field verbatim as the package card description.
+
+## [0.3.0] - 2026-10-03
+
+### Fixed
+- `package.json` `files` now ships `LICENSE`; README hero banner uses the standard full-width `assets/banner.webp`.
+- Unit-boundary display bugs in the usage numbers (`lib/usage-store.ts` `formatTokens`, `extensions/usage.ts` `formatCost`): a value that rounds up to the next unit printed `"1000k"` / `"$1000.00"` instead of `"1M"` / `"$1.0k"`; every unit now promotes through `fmtUnit()` (also strips a `.0` tail below 10k, so `9,999` is `"10k"` not `"10.0k"`).
+- `getModelAllTimeUsage()` without a model id matched **every** model, so the header's Model tab showed the grand total under "No Model"; it now matches nothing (zeros).
+- The usage disk cache never dropped session files deleted from disk, so `~/.pi/agent/arnative-usage-cache.json` only ever grew; `collectUsageSummary()` now prunes missing files while scanning.
+- A git refresh arriving while one was in flight was dropped (early return in `refreshGit()`), so the footer's git state stayed stale until the next trigger; it is now queued (last requested cwd wins) and re-run after the in-flight one (`extensions/footer.ts`).
+- `USER_TIMESTAMPS_MAP` grew for the whole process lifetime (it survives `/reload`); `session_start` now clears it first — it is refilled from the branch right after, so it is bounded by the current session (`extensions/timestamps.ts`).
+- The footer's token usage could show numbers up to 2s stale while a reply streamed: the cache only refreshed when the branch length changed, but a stream tick mutates the last message in place. The delta of that message is now applied on top of the cached sums — O(1) per frame, always fresh, still no O(N) rescan (`getUsage()` in `extensions/footer.ts`).
+
+### Changed (breaking — theme contents)
+- All 12 `themes/*.json` are now generated from `themes/gen-themes.mjs` and store **OKLCH** values (`oklch(L% C H)`) instead of hand-written hex. `vars` was renamed to a role-based scheme (`text`→`fg`, `gray`→`fgMuted`, `dimGray`→`fgDim`, `darkGray`→`fgFaint`, `cyan`→`accentBorder`, `softCyan`→`accentSoft`, `blue`→`border`, `green/red/yellow`→`success/error/warning`, `searchBg`→`surfaceSearch`, `selectedBg`→`surfaceSelected`, `userMsgBg`→`surfaceMsg`, `toolPendingBg`→`surfaceRaised`, `toolSuccessBg`→`surfaceToolOk`, `toolErrorBg`→`surfaceToolErr`, `customMsgBg`→`surfaceCustom`); the custom `colors.tint` token was renamed to `colors.accentSoft`. Any theme copied from the old 0.2.x files must be updated by hand — there is no compatibility shim.
+- Colour sets are now derived from a shared ramp, so every theme has consistent lightness/saturation per type and no two `vars` resolve to the same value (the old base had `accent` = `cyan`, `syntaxOperator` = `syntaxPunctuation` = `text`, and variants that copied 12+ identical hex values).
+- `lib/color.ts` (new) holds the OKLCH↔sRGB math, WCAG contrast and `toHex`, shared by the generator and the theme self-check.
+
+### Changed
+- The header's `Themes` tab is gone: pi 1.0 no longer emits a startup `[Themes]` section (only Context, Skills, Prompts, Extensions), so the tab could only ever read `Themes [0]`. The theme list stays reachable through `/settings` → Theme and `/arnative themes` (`extensions/section-headers.ts`).
+- Select menus (`ctx.ui.select`, e.g. `/arnative` and `/jev-eye`): the selected row no longer turns fully accent — only the `→` marker and `·` separators keep accent, the selected text uses `accentSoft` (fallback accent on themes without the token). Live-preview theme picker follows the same rule (`extensions/ui-render-tweaks.ts`, `extensions/arnative.ts`).
+- `accentSoftOf` (accentSoft token with accent fallback) moved to `lib/ansi.ts`, shared by `tools.ts`, `usage.ts` and the new select-row patch; the theme picker no longer crashes when a built-in theme without `accentSoft` is previewed.
+- Theme self-check (`extensions/ui-render-tweaks.ts`) now accepts hex **or** validated OKLCH, converts through `lib/color.ts` before building pi's `Theme` (the bundled 0.87.1 parser only understands hex), asserts every `vars` value is unique per theme, and asserts the thinking ramp rises monotonically.
+
+### Added
+- `/arnative footers` picks the footer preset with the same live-preview picker as headers: `Arnative (Full)` (default, the 3-row grid footer) or `Pi` (pi's built-in footer, stock line count). Moving the selection swaps the footer on the spot, Enter keeps it, Esc restores the preset the picker opened with. The boxed editor is registered once per session and stays arnative in both presets — pi's `setEditorComponent()` calls `disposeActiveSelector()`, which would close the picker mid-preview (`extensions/footer.ts`, `extensions/arnative.ts`).
+- `/arnative headers` picks the header preset: `Arnative (Full)` (default, this extension's header) or `Pi` (pi's built-in header). It uses the same live-preview picker as themes — moving the selection swaps the header on the spot via `ctx.ui.setHeader()`, Enter keeps it, Esc restores the preset the picker opened with. The choice lasts for the process (a new pi launch starts at `Arnative (Full)` again) (`extensions/section-headers.ts`, `extensions/arnative.ts`).
+- `/arnative <menu>` settings command, shaped like `/jev-eye`: no argument opens the menu picker with autocomplete; first menu `themes` is a live-preview picker over the `/settings` → Theme list — moving the selection applies the theme instantly via `ctx.ui.setTheme()`, Enter keeps it, Esc reverts to the theme opened with (`extensions/arnative.ts`). The picker component (`ListPicker`) is shared by the themes, headers and footers menus, and the three identical picker-label helpers were consolidated into `markedLabels()` in `lib/format.ts`.
+
+### Changed
+- Header layout reworked (`extensions/section-headers.ts`): the left column is the pi block mark with `pi vX` directly under it (10 columns wide). The info column starts with `Arnative vY · Welcome back, <User>` (username's first letter capitalized via `capitalize()`), then the tab box and the tab data — no blank lines, so no row is left half empty. The box is 7 lines.
+- The mark is the pi logo's grid rendered at terminal aspect (8 columns x 4 lines) instead of the 6-line "Pi" wordmark, and keeps the old wordmark's two-tone: P (the salmon/blue structure, columns 0-2) in the theme accent, i (the yellow bar, column 3) in the theme tint.
+- The column divider joins the frame with `┬`/`┴` (`render()`, `border()`), so the left/right split runs the full height with no gap at the top or bottom border.
+- The tab box lost its ` Menu ` label, and its tab dividers now join its own borders with `┬`/`┴` (`tabRule()`, `tabSeps`), so each divider is full height instead of a lone `│` on the middle row.
+
 ## [0.2.12] - 2026-10-02
 
 ### Changed

package/README.md

@@ -13,7 +13,7 @@ Refined aesthetics. Cohesive tools. Built for Pi.
 pi-arnative replaces pi’s default terminal chrome with a unified, cohesive visual aesthetic.
 
 - Warm Themes: Cohesive, contrast-checked color palettes generated without drift.
-- Tabbed Header: Greeting, version line, and a compact box menu over Directory, Model, Context, Skills, Extensions, Themes, and Shortcut.
+- Tabbed Header: Greeting, version line, and a compact box menu over Directory, Model, Context, Skills, Extensions, and Shortcut.
 - Rounded Tool Boxes: Clear status, spinner, and duration for every tool call.
 - Enhanced Footer: fixed 3-row grid — directory/git line, then extension status paired with token metrics.
 - Transcript Clock: Timestamps for messages with clean bubble backgrounds.
@@ -41,6 +41,7 @@ pi --extension ./extensions/footer.ts
 | `ctrl+alt+r` · `alt+r` | Quick reload (`/reload`) |
 | `ctrl+alt+n` · `alt+n` | New session (`/new`) — requires keybinding below |
 | `/usage` | Show session usage & token metrics |
+| `/arnative` | Settings menu — Themes, Headers, Footers |
 | Click tab | Open selected header tab |
 | Click tool / `ctrl+e` | Toggle tool output box |
 
@@ -67,8 +68,9 @@ Add to `~/.pi/agent/keybindings.json` to bind `app.session.new`:
 | File | Role |
 | --- | --- |
 | `extensions/tools.ts` | Rounded tool boxes, spinners, and duration |
-| `extensions/section-headers.ts` | Tabbed header and resource box |
-| `extensions/footer.ts` | 3-row status grid footer and boxed editor |
+| `extensions/section-headers.ts` | Tabbed header and resource box (preset: `/arnative headers`) |
+| `extensions/footer.ts` | 3-row status grid footer and boxed editor (preset: `/arnative footers`) |
+| `extensions/arnative.ts` | `/arnative` settings menu — live-preview theme/header/footer pickers |
 | `extensions/timestamps.ts` | Message clock and bubble background fixes |
 | `extensions/ui-render-tweaks.ts` | Contrast tweaks, selection style, and UI polish |
 | `extensions/usage.ts` | `/usage` token dashboard |
@@ -78,8 +80,9 @@ Add to `~/.pi/agent/keybindings.json` to bind `app.session.new`:
 <details>
 <summary><b>Themes</b></summary>
 
-- `themes/arnative.json` serves as the structure source of truth.
-- `themes/gen-themes.mjs` generates variants with automated contrast checks.
+- `themes/gen-themes.mjs` is the single source of truth: it **writes every** `themes/*.json`, including the base `arnative.json`.
+- Each theme is a few parameters (accent hue, chroma, canvas lightness, neutral tint) plus optional hue overrides for the strong palettes; all colors are derived as OKLCH from a shared ramp, so lightness/saturation stay consistent and no two `vars` collapse to the same value.
+- `lib/color.ts` holds the OKLCH↔sRGB math and WCAG contrast used by both the generator and the self-check.
 
 **Variants:** `sun` · `zinc` · `violet` · `emerald` · `matrix` · `cyberpunk` · `synthwave` · `gruvbox` · `nord` · `dracula`
 

package/extensions/arnative.ts

@@ -0,0 +1,363 @@
+/**
+ * Arnative settings menu (/arnative <menu>) — same shape as /jev-eye:
+ * no argument opens the menu picker, each menu is a subcommand with autocomplete.
+ * First menu: themes — the theme list from /settings with live preview: moving the
+ * selection calls ctx.ui.setTheme() immediately (applies + persists like the
+ * /settings picker), Enter keeps it, Esc restores the theme opened with.
+ * `headers` uses the same picker over the header presets, swapping
+ * the header on every move (ctx.ui.setHeader()) and restoring it on Esc.
+ */
+import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { matchesKey, truncateToWidth, visibleWidth, type AutocompleteItem, type Component } from "@earendil-works/pi-tui";
+import { accentSoftOf } from "../lib/ansi.ts";
+import { boxEdge, boxRow } from "../lib/box.ts";
+import { assert, isMain } from "../lib/check.ts";
+import { markedLabels } from "../lib/format.ts";
+import { FOOTER_PRESETS, activeFooterPreset, setFooterPreset, type FooterPreset } from "./footer.ts";
+import { HEADER_PRESETS, activeHeaderPreset, setHeaderPreset, type HeaderPreset } from "./section-headers.ts";
+
+export interface ArnativeMenu {
+	value: string;
+	label: string;
+	description: string;
+	open: (ctx: ExtensionCommandContext) => Promise<void>;
+}
+
+/** Menu picker rows: `Label  ·  description` (same rhythm as /jev-eye's menu). */
+export function menuLabels(menus: Pick<ArnativeMenu, "label" | "description">[]): string[] {
+	return menus.map((m) => `${m.label}  ·  ${m.description}`);
+}
+
+interface ListPickerHooks {
+	/** Apply a value on every selection move (live preview). */
+	preview: (name: string) => void;
+	/** Restore the value the picker opened with (Esc). */
+	revert: () => void;
+	done: () => void;
+	requestRender: () => void;
+}
+
+/** Box copy, so one picker serves every menu ("Arnative · Themes", "Arnative · Headers", …). */
+export interface ListPickerText {
+	title: string;
+	subtitle: string;
+	footer: string;
+}
+
+/** Live-preview picker: ↑↓ previews instantly, Enter keeps, Esc reverts. */
+export class ListPicker implements Component {
+	private theme: { fg(c: string, t: string): string; bold?(t: string): string };
+	private names: string[];
+	private hooks: ListPickerHooks;
+	private text: ListPickerText;
+	private selected: number;
+	private applied: string | undefined;
+	private readonly opened: string | undefined;
+
+	constructor(
+		theme: { fg(c: string, t: string): string; bold?(t: string): string },
+		names: string[],
+		current: string | undefined,
+		hooks: ListPickerHooks,
+		text: ListPickerText,
+	) {
+		this.theme = theme;
+		this.names = names;
+		this.hooks = hooks;
+		this.text = text;
+		this.opened = current;
+		this.applied = current;
+		this.selected = Math.max(0, names.indexOf(current ?? ""));
+	}
+
+	invalidate(): void {}
+	dispose(): void {}
+
+	private move(delta: number): void {
+		const next = Math.min(this.names.length - 1, Math.max(0, this.selected + delta));
+		if (next === this.selected) return;
+		this.selected = next;
+		this.applied = this.names[next];
+		this.hooks.preview(this.applied);
+		this.hooks.requestRender();
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesKey(keyData, "q") || matchesKey(keyData, "Q") || matchesKey(keyData, "escape")) {
+			if (this.applied !== this.opened) this.hooks.revert();
+			this.hooks.done();
+			return;
+		}
+		if (matchesKey(keyData, "up") || matchesKey(keyData, "k")) {
+			this.move(-1);
+			return;
+		}
+		if (matchesKey(keyData, "down") || matchesKey(keyData, "j")) {
+			this.move(1);
+			return;
+		}
+		if (matchesKey(keyData, "enter")) this.hooks.done();
+	}
+
+	render(width: number): string[] {
+		const th = this.theme;
+		const bold = th.bold ?? ((t: string) => `\x1b[1m${t}\x1b[22m`);
+		const soft = accentSoftOf(th);
+		const row = (text: string) => boxRow(text, width, soft);
+		const out: string[] = [boxEdge("╭", "╮", width, soft)];
+		out.push(row(th.fg("accent", bold(this.text.title))));
+		out.push(row(th.fg("muted", this.text.subtitle)));
+		out.push(row(""));
+		for (let i = 0; i < this.names.length; i++) {
+			const name = this.names[i]!;
+			const isSelected = i === this.selected;
+			const mark = name === this.applied ? "● " : "  ";
+			const plain = truncateToWidth(`${isSelected ? "▸" : " "} ${mark}${name}`, width - 4);
+			// Preset rows end in a parenthetical (`Pi (system)`, `Arnative (Full)`): the suffix reads softer than the name.
+			const suffix = /(\(.*\))$/.exec(plain)?.[1] ?? "";
+			const head = plain.slice(0, plain.length - suffix.length);
+			const tail = suffix ? th.fg("dim", suffix) : "";
+			// Same rule as the select dialogs: marker accent, name soft.
+			out.push(row(isSelected ? th.fg("accent", head.slice(0, 2 + mark.length)) + soft(head.slice(2 + mark.length)) + tail : th.fg("text", head) + tail));
+		}
+		out.push(row(""));
+		out.push(row(th.fg("dim", this.text.footer)));
+		out.push(boxEdge("╰", "╯", width, soft));
+		return out.map((l) => truncateToWidth(l, width, ""));
+	}
+}
+
+const THEMES_PICKER_TEXT: ListPickerText = {
+	title: "Arnative · Themes",
+	subtitle: "Selection previews live — same list as /settings → Theme.",
+	footer: "[↑↓] Preview live  [Enter] Keep  [Esc] Revert",
+};
+
+const openThemes = async (ctx: ExtensionCommandContext): Promise<void> => {
+	const themes = ctx.ui.getAllThemes();
+	if (themes.length === 0) {
+		ctx.ui.notify("[arnative] No themes found. Add files to ~/.pi/agent/themes/ and run /reload.", "warning");
+		return;
+	}
+	const names = themes.map((t) => t.name);
+	const current = ctx.ui.theme.name;
+
+	if (typeof ctx.ui.custom !== "function") {
+		// No custom components (headless/RPC): fall back to the blocking picker.
+		const labels = markedLabels(names, current);
+		const pick = await ctx.ui.select("Arnative · Themes", labels);
+		if (pick === undefined) return;
+		const result = ctx.ui.setTheme(names[labels.indexOf(pick)]!);
+		ctx.ui.notify(
+			result.success ? `[arnative] Theme: ${names[labels.indexOf(pick)]}` : `[arnative] ${result.error ?? "failed"}`,
+			result.success ? "info" : "error",
+		);
+		return;
+	}
+
+	await ctx.ui.custom<void>((tui, theme, _kb, done) =>
+		new ListPicker(theme, names, current, {
+			preview: (name) => {
+				const result = ctx.ui.setTheme(name);
+				if (!result.success) ctx.ui.notify(`[arnative] ${result.error ?? `failed to apply ${name}`}`, "error");
+			},
+			revert: () => {
+				if (current) ctx.ui.setTheme(current);
+			},
+			done,
+			requestRender: () => tui.requestRender(),
+		}, THEMES_PICKER_TEXT),
+	);
+};
+
+const FOOTERS_PICKER_TEXT: ListPickerText = {
+	title: "Arnative · Footers",
+	subtitle: "Selection applies live — custom footer or built-in.",
+	footer: "[↑↓] Preview live  [Enter] Keep  [Esc] Revert",
+};
+
+const openFooters = async (ctx: ExtensionCommandContext): Promise<void> => {
+	const opened = activeFooterPreset();
+
+	if (typeof ctx.ui.custom !== "function") {
+		// No custom components (headless/RPC): fall back to the blocking picker.
+		const labels = markedLabels(FOOTER_PRESETS, opened);
+		const pick = await ctx.ui.select("Arnative · Footers", labels);
+		if (pick === undefined) return;
+		const name = FOOTER_PRESETS[labels.indexOf(pick)]!;
+		setFooterPreset(name, ctx);
+		ctx.ui.notify(`[arnative] Footer: ${name}`, "info");
+		return;
+	}
+
+	await ctx.ui.custom<void>((tui, theme, _kb, done) =>
+		new ListPicker(
+			theme,
+			[...FOOTER_PRESETS],
+			opened,
+			{
+				preview: (name) => setFooterPreset(name as FooterPreset, ctx),
+				revert: () => setFooterPreset(opened, ctx),
+				done,
+				requestRender: () => tui.requestRender(),
+			},
+			FOOTERS_PICKER_TEXT,
+		),
+	);
+};
+
+const HEADERS_PICKER_TEXT: ListPickerText = {
+	title: "Arnative · Headers",
+	subtitle: "Selection applies live — custom header or built-in.",
+	footer: "[↑↓] Preview live  [Enter] Keep  [Esc] Revert",
+};
+
+const openHeaders = async (ctx: ExtensionCommandContext): Promise<void> => {
+	const opened = activeHeaderPreset();
+
+	if (typeof ctx.ui.custom !== "function") {
+		// No custom components (headless/RPC): fall back to the blocking picker.
+		const labels = markedLabels(HEADER_PRESETS, opened);
+		const pick = await ctx.ui.select("Arnative · Headers", labels);
+		if (pick === undefined) return;
+		const name = HEADER_PRESETS[labels.indexOf(pick)]!;
+		setHeaderPreset(name, ctx);
+		ctx.ui.notify(`[arnative] Header: ${name}`, "info");
+		return;
+	}
+
+	await ctx.ui.custom<void>((tui, theme, _kb, done) =>
+		new ListPicker(
+			theme,
+			[...HEADER_PRESETS],
+			opened,
+			{
+				preview: (name) => setHeaderPreset(name as HeaderPreset, ctx),
+				revert: () => setHeaderPreset(opened, ctx),
+				done,
+				requestRender: () => tui.requestRender(),
+			},
+			HEADERS_PICKER_TEXT,
+		),
+	);
+};
+
+export const MENUS: ArnativeMenu[] = [
+	{
+		value: "themes",
+		label: "Themes",
+		description: "list & apply themes (the /settings → Theme list)",
+		open: openThemes,
+	},
+	{
+		value: "headers",
+		label: "Headers",
+		description: "choose the header preset",
+		open: openHeaders,
+	},
+	{
+		value: "footers",
+		label: "Footers",
+		description: "choose the footer preset",
+		open: openFooters,
+	},
+];
+
+export async function arnativeHandler(args: string, ctx: ExtensionCommandContext): Promise<void> {
+	if (!ctx.hasUI) return;
+	const sub = args.trim().toLowerCase();
+
+	if (sub === "") {
+		const labels = menuLabels(MENUS);
+		const pick = await ctx.ui.select("Arnative · Settings", labels);
+		if (pick === undefined) return;
+		await MENUS[labels.indexOf(pick)]!.open(ctx);
+		return;
+	}
+
+	const menu = MENUS.find((m) => m.value === sub);
+	if (!menu) {
+		ctx.ui.notify(`[arnative] Unknown menu "${sub}". Menus: ${MENUS.map((m) => m.value).join(" | ")}`, "warning");
+		return;
+	}
+	await menu.open(ctx);
+}
+
+export function arnativeCompletions(prefix: string): AutocompleteItem[] | null {
+	const items: AutocompleteItem[] = MENUS.filter((m) => m.value.startsWith(prefix.trim().toLowerCase())).map((m) => ({
+		value: m.value,
+		label: m.label,
+		description: m.description,
+	}));
+	return items.length > 0 ? items : null;
+}
+
+export default function (pi: ExtensionAPI) {
+	pi.registerCommand("arnative", {
+		description: "Arnative settings menu: themes, headers, footers",
+		getArgumentCompletions: arnativeCompletions,
+		handler: arnativeHandler,
+	});
+}
+
+// Self-check: `node extensions/arnative.ts`
+if (isMain(import.meta.url)) {
+	assert(markedLabels(["a", "b"], "b")[1] === "● b", "markedLabels marks the active theme");
+	assert(markedLabels(["a", "b"], "b")[0] === "  a", "markedLabels leaves others unmarked");
+	assert(markedLabels(["a"], undefined)[0] === "  a", "markedLabels handles no active theme");
+	const labels = menuLabels(MENUS);
+	assert(labels.length === MENUS.length, "menuLabels one row per menu");
+	assert(labels[0] === "Themes  ·  list & apply themes (the /settings → Theme list)", "menu row format");
+	assert(MENUS.every((m) => typeof m.open === "function"), "every menu opens");
+	assert(MENUS.some((m) => m.value === "headers"), "headers menu registered");
+
+	assert(arnativeCompletions("th")!.length === 1, "completions match prefix");
+	assert(arnativeCompletions("th")![0]!.value === "themes", "completions value = menu value");
+	assert(arnativeCompletions("he")![0]!.value === "headers", "headers menu has completions");
+	assert(arnativeCompletions("fo")![0]!.value === "footers", "footers menu has completions");
+	assert(MENUS.some((m) => m.value === "footers"), "footers menu registered");
+	assert(arnativeCompletions("zz") === null, "completions null when nothing matches");
+
+	// Live-preview picker (shared by Themes and Headers): move = preview, Enter = keep, Esc = revert.
+	const fakeTheme = { fg: (_c: string, t: string) => t, bold: (t: string) => t };
+	const pickerText: ListPickerText = { title: "Arnative · Themes", subtitle: "sub", footer: "[Esc] Revert" };
+	const previews: string[] = [];
+	let reverted = 0;
+	let done = 0;
+	const picker = new ListPicker(fakeTheme, ["arnative", "arnative-nord"], "arnative", {
+		preview: (n) => previews.push(n),
+		revert: () => reverted++,
+		done: () => done++,
+		requestRender: () => {},
+	}, pickerText);
+	const lines = picker.render(50);
+	assert(lines[0]!.startsWith("╭") && lines[lines.length - 1]!.startsWith("╰"), "picker framed");
+	assert(lines.every((l) => visibleWidth(l) === 50), "picker lines fit width 50");
+	assert(lines.some((l) => l.includes("Arnative · Themes")), "picker renders the configured title");
+	assert(lines.some((l) => l.includes("● arnative")), "applied value marked");
+	picker.handleInput("\x1b[B"); // down
+	assert(previews.length === 1 && previews[0] === "arnative-nord", "move previews immediately");
+	assert(picker.render(50).some((l) => l.includes("● arnative-nord")), "mark follows the preview");
+	picker.handleInput("\r"); // enter
+	assert(done === 1 && reverted === 0, "Enter keeps (no revert)");
+	picker.handleInput("\x1b[B");
+	picker.handleInput("\x1b"); // escape
+	assert(reverted === 1 && done === 2, "Esc reverts after preview");
+
+	// Headers reuses the same picker with its own copy and presets.
+	assert(HEADER_PRESETS[0] === "Pi (system)", "built-in header preset is listed first");
+	const headerPicker = new ListPicker(fakeTheme, [...HEADER_PRESETS], "Arnative (Full)", { preview: () => {}, revert: () => {}, done: () => {}, requestRender: () => {} }, HEADERS_PICKER_TEXT);
+	const headerLines = headerPicker.render(50);
+	assert(headerLines.some((l) => l.includes("Arnative · Headers")), "headers picker title");
+	assert(headerLines.some((l) => l.includes("● Arnative (Full)")), "headers picker marks the active preset");
+	assert(headerLines.some((l) => l.includes("  Pi (system)")), "headers picker lists the built-in preset");
+
+	// Footers reuses the same picker too.
+	assert(FOOTER_PRESETS[0] === "Pi (system)", "built-in footer preset is listed first");
+	const footerPicker = new ListPicker(fakeTheme, [...FOOTER_PRESETS], "Pi (system)", { preview: () => {}, revert: () => {}, done: () => {}, requestRender: () => {} }, FOOTERS_PICKER_TEXT);
+	const footerLines = footerPicker.render(50);
+	assert(footerLines.some((l) => l.includes("Arnative · Footers")), "footers picker title");
+	assert(footerLines.some((l) => l.includes("● Pi (system)")), "footers picker marks the active preset");
+
+	console.log("arnative.ts self-check OK");
+}