@bismawy/pi-arnative 0.5.3 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.6.0] - 2026-10-17
+
+### Fixed
+- **A model id no longer reports another route's tokens.** The match rule also accepted a stored name the target merely *ends* with (`target.endsWith("/" + name)`), so a first run under `river/deepseek-ai/DeepSeek-V4.1-Flash` showed wally+yarz's `deepseek-v4.1-flash` history — 29.5M in / 3.2M out / 360.5M cache reads — as its own. Matching is now exact after `canonicalModel` (trimmed, case-folded, `:route` tag dropped), so the header's Model tab and `/usage` state the tokens of the id they name. Measured on the operator's own history: River reports 148.5k in / 26.5k out / 1.6M cache reads, and the old totals stay reachable under `deepseek-v4.1-flash` (`lib/usage-store.ts`).
+- Self-check pinning per-id totals: a bare id does not absorb a longer id that ends with it, a path id counts its own provider only, case does not split one model's history, and a `:free` tag still folds into the model it tags. Proved negative: restoring the suffix rule fails `npm test` (`extensions/usage.ts`).
+- **The `[g]` sweep no longer strobes.** One cycle now takes 20s (`GRADIENT_CYCLE_MS`) instead of 4s. The frame interval is fixed per preset, so a fast cycle forces a huge colour jump between frames — measured worst-case step was 64.9 RGB units at 200ms and 26.2 at 80ms, which the eye reads as flashing rather than a sweep. 20s brings that to 13.2 and 5.7; the self-check pins those ceilings so a later speed-up cannot silently reintroduce the strobe (`lib/spinner.ts`).
+
+### Added
+- **The Animations picker previews the live frame, and lists presets in a stable order.** The selected row's note now ends in the preset's *current* frame — the picker repaints every 80ms and reads the frame from the clock (`previewFrameAt`), so a dropped repaint costs one frame and can never desynchronise the animation. The glyph is padded to the widest frame of that preset, so the row does not shift as it moves. Rows are `Pi (system)`, `Arnative`, then the rest alphabetically: the escape hatch and the package's own spinner are the two a user reaches for and must not move when a preset is added. The self-check pins the order, name uniqueness, and the clock arithmetic; the picker was rendered at 80/100/120 columns with 0 width mismatches (`lib/spinner.ts`, `extensions/animations.ts`, `extensions/arnative.ts`).
+- **`Dot Spine` preset.** A dot body growing outward from a two-cell core — `⠂⠐` → `⠺ ⠂⠐ ⠗` → `⠺ ⠪ ⠂⠐ ⠕ ⠗` at 200ms, one cell added at each end per frame. All three frames are 10 columns so the label never shifts, and the self-check pins the frames plus two properties the animation depends on: the core `⠂⠐` stays in columns 4–5 in every frame, and the dot count grows `2,4,6`. Named off the `Braille *` prefix so it does not read as a third variant of `Braille Column`/`Braille Level`; the note still says braille, which is what the glyphs are (`lib/spinner.ts`).
+- **`Bagua Trigram` preset.** Three I Ching trigrams — `☶` (U+2636, mountain) → `☵` (U+2635, water) → `☳` (U+2633, thunder) at 200ms. Like `Yin Yang Lines`, none of the three exists in the terminal face (JetBrainsMono Nerd Font) but all three are served by the same fallback face at the same 1.50 cells, so the row keeps its place. Three of the eight trigrams are used, not all eight: a spinner is a short loop. Frames are pinned by codepoint in the operator's order, and the self-check asserts all three are distinct (`lib/spinner.ts`).
+- **`Yin Yang Lines` preset.** The four I Ching digrams — `⚌` (U+268C, both lines whole) → `⚎` (U+268E, lower line broken) → `⚍` (U+268D, break moves up) → `⚏` (U+268F, both broken) at 200ms, so a single broken yin line travels through the pair. All four glyphs are absent from the terminal face (JetBrainsMono Nerd Font) but every one is served by the same fallback face at the same 1.50 cells, which is the property that matters: a constant width means no sideways shift, unlike a set that mixes native and fallback glyphs. Frames are pinned by codepoint in the operator's order, and the self-check asserts all four are distinct (`lib/spinner.ts`).
+- **`Pacman` preset.** Pacman eating his way across the row, one cell per frame — `ᗧ + − ×` → `~ ᗧ − ×` → `~ ~ ᗧ ×` → `~ ~ ~ ᗧ` at 200ms, with the eaten pellets left as a ghost trail. `ᗧ` is U+15E7 (Canadian Syllabics `ye`), the glyph the pacman CLI spinners use because it reads as an open mouth facing right. The self-check pins the exact frames and asserts the mouth sits in column `2 × frameIndex`, which is the animation's whole point (`lib/spinner.ts`).
+- **The package now has its own spinner and ships it as the default: `Arnative`.** A spark (`✧` / `✦`) and a Braille cell trading places around the centre — `✧⠙` → `✧⣠` → `⣄✧` → `⠋✦` at 200ms, painted with the theme accent (or the brand sweep under `[g]`). `DEFAULT_SPINNER_PRESET` moved from `Diamond Glow` to `Arnative`, so a fresh install shows it without opening a menu; an existing install keeps whatever it already stored. Two frames carry a trailing space; it is load-bearing, because both cells are one column wide and dropping it would shift the label sideways on every second frame. The self-check pins the exact frames by codepoint, asserts every frame of a multi-glyph preset has one length, and pins the default (`lib/spinner.ts`).
+- **The `arnative` theme is applied on a fresh install.** `session_start` checks pi's own theme setting and calls `ctx.ui.setTheme("arnative")` only when no setting exists and the theme actually loaded. A theme you chose is never overridden, and because `setTheme` writes the setting, the check is a no-op on every later session (`extensions/arnative.ts`).
+- **`Arrow Orbit` preset.** A four-arrow ring turning clockwise one position per frame — `▴▸▾◂` → `▸▾◂▴` → `▾◂▴▸` → `◂▴▸▾` at 200ms, one full turn per 0.8s, the same rate as `Diamond Glow`. Frames are pinned by codepoint in the self-check (U+25B4, U+25B8, U+25BE, U+25C2) so a font fallback cannot swap a glyph unnoticed (`lib/spinner.ts`).
+- **`[g]` in `/arnative` → Animations paints accent presets with the Google brand sweep.** The switch sits on the Animations screen only, states its current mode in the legend (`[g] Gradient on`), saves as `spinnerGradient` in `arnative-config.json`, and repaints the live spinner the moment it is pressed. Esc and `←` undo it together with a previewed preset, so leaving the screen restores what it opened with. `Gemini` already sweeps and `Claudeon` carries its own mark colour, so the override leaves both untouched (`lib/spinner.ts`, `extensions/animations.ts`, `extensions/arnative.ts`).
+
+### Changed
+- **`UsageModalComponent.hintText` is gone: the render path calls `legendUsage(width)` directly.** A private one-line method that returned another function added a name with no behaviour, so the call site now states what it wants (`extensions/usage.ts`).
+- **`Claudeon`: the `Claude` preset, renamed and restyled — inspired by Claude.** The preset was called `Claude` and reused Claude Code's own dingbats; it is now `Claudeon`, a mark of this package's own that reads as the Claude-style pulse without borrowing Claude's name for a glyph set Claude does not use. The attribution lives in the row's note (`inspired by Claude — pulsing marks, 120ms`) rather than only in the code, and the paint mode and colour constant follow (`claude` → `claudeon`, `CLAUDE_RGB` → `CLAUDEON_RGB`); the grey-orange mark colour is kept, because that colour is what makes the pulse read as the Claude-style spinner. The preset had not shipped yet, so no stored config can reference the old name (`lib/spinner.ts`, `extensions/animations.ts`).
+- **`Claudeon`'s frames are native-only, so the row cannot walk sideways.** The old set (`· ✢ ✳ * ✶ ✻ ✽`) mixed font-fallback widths: `✢` `✻` `✽` are absent from most monospace faces, so the terminal served them from a fallback font — measured in the terminal face (JetBrainsMono Nerd Font) `✢`/`✤`/`✻`/`✽`/`❋` advance **1.48** cells and `✳` **2.29**, against a **1.00** native cell, so the label shifted on every tick that used one and `✳` sheared the row. The set is now `· * ⋆ ✶` (U+00B7, U+002A, U+22C6, U+2736) — four marks that every monospace face checked (JetBrainsMono Nerd Font, Consolas, Cascadia, Lucida, Courier) reports at exactly 1.00 — giving an 8-frame there-and-back loop (`· * ⋆ ✶ ✶ ⋆ * ·`, the peak held for two frames as elsewhere in the package) at 120ms, so the displacement is 0.00 cells. There is no fifth mark to add: a scan of all 86 installed families found none covering the Dingbats block at ~1 em (`lib/spinner.ts`).
+
 ## [0.5.3] - 2026-10-14
 
 ### Fixed
@@ -8,7 +31,7 @@
 - **One space after the glyph, not two.** The two spaces existed because the previous glyph's ink overran its cell (`\uedcf`); with `\uf21b` in place they read as a gap in `  Eye: ● ON (Clef Flash)`. Pinned in pi-jev-eye's render check as one space, with an explicit assert that the glyph is not followed by two.
 
 ### Changed
-- **The cell glyph is U+F21B (`fa-user_secret`), chosen by the operator.** U+EDCF (`fa-user_shield`) was the previous one; both exist in JetBrainsMono Nerd Font, and the codepoint is pinned by number in pi-jev-eye's render check because a Nerd glyph that renders blank on another platform is the bug the ponytail cell had (`\uf51` -> `\uef04`).
+- **The cell glyph is U+F21B (`fa-user_secret`), chosen by the operator.** U+EDCF (`fa-user_shield`) was the previous one; both exist in JetBrainsMono Nerd Font, and the codepoint is pinned by number in pi-jev-eye's render check because a Nerd glyph that renders blank on another platform is the bug the ponytail cell had (`\uef51` -> `\uef04`).
 - **The pi-jev-eye status cell renders `Eye: ● ON (Backend)`, parsed from the value instead of hardcoded.** The format is `Eye: ● ON (Clef Flash)` when a Clef model answers and `Eye: ● ON (Jev)` when TypeSafe or OpenRouter does. `jevEyeStatusLine()` reads the label before the first colon and the backend from the trailing parentheses — so nothing about the cell is a literal in this repo, and an older pi-jev-eye value with no suffix gains no guessed one.
 - **The backend suffix takes `dim`, while `Eye:` and the state keep their tiers.** A backend painted like the label would bury `Eye: ● ON`, which is the case this cell exists for; the spaced `Clef Flash` (not a nested `clef (flash)`) reads as one label on a single line.
 - **The status line moved out of the render closure**, next to `ponytailStatusLine`, so the self-check in `node extensions/footer.ts` drives the exact path the footer uses instead of a copy of it.
@@ -88,7 +111,7 @@
 ## [0.3.10] - 2026-10-11
 
 ### Fixed
-- The ponytail icon rendered as a blank cell on Windows. The status drew `U+EF51` (`fa-circle_radiation`), a codepoint the Windows JetBrainsMono Nerd Font build lists in its cmap but rasterizes with no outline, so the footer left an empty gap before `ponytail:`. It now draws `U+EF04` (`fa-horse`), which renders on both platforms. The cell also spends one space after the icon instead of two, matching `MCP:`. A self-check pins the codepoint, so an edit back to an invisible glyph fails `bun run test` instead of shipping silently (`extensions/footer.ts`).
+- The ponytail icon rendered as a blank cell on Windows. The status drew `U+EF51` (`fa-circle_radiation`), a codepoint the Windows JetBrainsMono Nerd Font build lists in its cmap but rasterizes with no outline, so the footer left an empty gap before `ponytail:`. It now draws `U+EF04` (`fa-horse`), which renders on both platforms. The cell also spends one space after the icon instead of two, matching `MCP:`. A self-check pins the codepoint, so an edit back to an invisible glyph fails `npm test` instead of shipping silently (`extensions/footer.ts`).
 
 ## [0.3.9] - 2026-10-08
 

package/README.md

@@ -23,10 +23,8 @@ pi-arnative replaces pi’s default terminal chrome with a unified, cohesive vis
 <summary><b>Configuration & Presets</b></summary>
 
 ### Working Spinner Presets
-Configurable via `/arnative` → **Animations** (saved to `arnative-config.json`):
-- `Diamond Glow` (default), `Diamond Pulse`, `Circle Pulse`, `Circle Wave`, `Shade Wave`
-- `Braille Column`, `Braille Level`, `Kanji Count`, `Suzhou Tally`
-- `Pi (system)`, `Gemini` (Google gradient sweep), and `Claude` (pulsing marks)
+Configurable via `/arnative` → **Animations** (saved to `arnative-config.json`).
+Features 18 presets with live animated preview in the picker (`Arnative` as default, `Pi (system)`, and alphabetical variants). Press `[g]` in the picker to toggle Google brand gradient sweep on accent presets.
 
 ### Footer Presets
 Configurable via `/arnative` → **Footers**:
@@ -43,6 +41,8 @@ pi install npm:@bismawy/pi-arnative
 ```
 
 Apply a theme via `/settings` → **Theme** → `arnative` (or variant). Requires a [Nerd Font](https://www.nerdfonts.com/font-downloads).
+On a fresh install the `arnative` theme is applied automatically when pi has no theme of its
+own; a theme you already chose is never overridden.
 
 To test locally:
 ```bash

package/extensions/animations.ts

@@ -15,9 +15,11 @@ import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-a
 import { loadChoice, saveChoice } from "../lib/preset-store.ts";
 import {
 	DEFAULT_SPINNER_PRESET,
+	SPINNER_GRADIENT_KEY,
 	SPINNER_PRESETS,
 	SPINNER_PRESET_DEFS,
 	SPINNER_PRESET_KEY,
+	previewFrameAt,
 	previewFrames,
 	spinnerPainter,
 	type SpinnerPreset,
@@ -31,6 +33,7 @@ const ROW_DIVIDER = " · ";
 /** The arnative editor instance, published by `footer.ts` so the live spinner is reachable. */
 export const EDITOR_KEY = Symbol.for("pi-arnative.editor");
 const SPINNER_PRESET_CONFIG_KEY = Symbol.for("pi-arnative.spinnerPreset");
+const SPINNER_GRADIENT_CONFIG_KEY = Symbol.for("pi-arnative.spinnerGradient");
 
 /** The `setWorkingMessage`/`setWorkingIndicator` surface of `ctx.ui`. */
 type WorkingUi = { setWorkingIndicator?: (options?: unknown) => void } | null | undefined;
@@ -69,6 +72,22 @@ export function activeSpinnerPreset(): SpinnerPreset {
 	return SPINNER_PRESETS.includes(stored as SpinnerPreset) ? (stored as SpinnerPreset) : DEFAULT_SPINNER_PRESET;
 }
 
+/** Is the `accent` → gradient override on? Stored as `"on"`/`"off"` so an absent key reads as
+ *  off through the same allow-list path every other choice uses. */
+export function activeSpinnerGradient(): boolean {
+	const stored =
+		(globalThis as Record<symbol, unknown>)[SPINNER_GRADIENT_CONFIG_KEY] ??
+		loadChoice(SPINNER_GRADIENT_KEY, ["on", "off"] as const);
+	return stored === "on";
+}
+
+/** Flip the gradient override, persist it, and repaint the live spinner at once. */
+export function setSpinnerGradient(on: boolean): void {
+	(globalThis as Record<symbol, unknown>)[SPINNER_GRADIENT_CONFIG_KEY] = on ? "on" : "off";
+	saveChoice(SPINNER_GRADIENT_KEY, on ? "on" : "off");
+	applySpinnerPreset(activeWorkingUi(), activeWorkingTheme());
+}
+
 /**
  * Publish the choice for this process, write it to `arnative-config.json`, and install it on
  * the running session right away — the picker previews by moving the cursor, so a choice that
@@ -94,7 +113,7 @@ export function paintLiveIndicator(painter: (text: string) => string): void {
 export function applySpinnerPreset(ui: WorkingUi, theme: ThemeLike): void {
 	const preset = activeSpinnerPreset();
 	const def = SPINNER_PRESET_DEFS[preset];
-	const painter = spinnerPainter(preset, theme);
+	const painter = spinnerPainter(preset, theme, activeSpinnerGradient());
 	try {
 		if (def.frames.length === 0) ui?.setWorkingIndicator?.();
 		else ui?.setWorkingIndicator?.({ frames: [...def.frames], intervalMs: def.intervalMs });
@@ -104,12 +123,16 @@ export function applySpinnerPreset(ui: WorkingUi, theme: ThemeLike): void {
 	paintLiveIndicator(painter);
 }
 
-/** Picker text. The description states the one seam: a preset applies to the next spinner. */
-export const ANIMATIONS_PICKER_TEXT = {
-	title: "Animations - Arnative\u2819",
-	description: "The working spinner — applies on the next tool call.",
-	legend: "[↑↓] Preview  [Enter] Select  [Esc] Close",
-} as const;
+/** Picker copy. The description states the one seam: a preset applies to the next spinner.
+ *  The legend is built per call because its `[g]` row states the current mode — a constant
+ *  would keep saying `off` after the user turned it on. */
+export function animationsPickerText(): { title: string; description: string; legend: string } {
+	return {
+		title: "Animations - Arnative\u2819",
+		description: "The working spinner — applies on the next tool call.",
+		legend: `[↑↓] Preview  [g] Gradient ${activeSpinnerGradient() ? "on" : "off"}  [Enter] Select  [Esc] Close`,
+	};
+}
 
 /** One row per preset: the name, then its note and the frames it actually cycles. The
  *  frames belong in the note — a user picking an animation wants to see the glyphs, and this
@@ -126,6 +149,19 @@ export function animationRowText(preset: SpinnerPreset): string {
 	return `${preset}${ROW_DIVIDER}${SPINNER_PRESET_DEFS[preset].note}  ${previewFrames(preset)}`;
 }
 
+/** Repaint cadence for the picker's animated row. Fast enough to read as motion at every
+ *  preset's own interval (the slowest is 200ms, the fastest 80ms), cheap because the row only
+ *  redraws one line. */
+export const PREVIEW_TICK_MS = 80;
+
+/** Note for one row with the frame that is live *now*, padded to the widest frame so the
+ *  text after it does not shift as the glyph changes. */
+export function animationRowNote(preset: SpinnerPreset, now = Date.now()): string {
+	const { text, width } = previewFrameAt(preset, now);
+	const pad = " ".repeat(Math.max(0, width - [...text].length));
+	return `${SPINNER_PRESET_DEFS[preset].note}  ${text}${pad}`;
+}
+
 /** Register the extension: keep the installed preset in step with the session's theme. */
 export default function registerAnimations(pi: ExtensionAPI): void {
 	pi.on("session_start", async (_event, ctx: ExtensionContext) => {
@@ -151,6 +187,17 @@ if (isMain(import.meta.url)) {
 	);
 	assert(animationRowText("Diamond Glow").includes("\u2b25"), "the row text previews the frames");
 
+	// The picker's animated note shows exactly one live frame, padded to the widest one so the
+	// row does not shift. `animationRowNote` takes `now`, so the assertion does not race a clock.
+	assert(animationRowNote("Diamond Glow", 0).endsWith("\u2b25"), "the live note shows frame 0");
+	assert(animationRowNote("Diamond Glow", 200).endsWith("\u25c8"), "the live note advances with the clock");
+	assert(animationRowNote("Pacman", 0).endsWith("\u15e7 + \u2212 \u00d7"), "a wide frame is shown whole");
+	assert(
+		animationRowNote("Pacman", 0).length === animationRowNote("Pacman", 600).length,
+		"every frame pads to the same width, so the note never shifts",
+	);
+	assert(PREVIEW_TICK_MS <= 80, "the preview ticks at least as fast as the quickest preset");
+
 	// Installing a preset goes through pi's indicator API; `Pi (system)` passes nothing.
 	const calls: Array<Record<string, unknown> | undefined> = [];
 	const ui = { setWorkingIndicator: (options?: Record<string, unknown>) => calls.push(options) };
@@ -187,7 +234,7 @@ if (isMain(import.meta.url)) {
 	pickCalls.length = 0;
 	// Instance B — a second copy of the module, like the one `arnative.ts` holds — does the pick.
 	const instanceB = await import(`./animations.ts?second=${Date.now()}`);
-	instanceB.setSpinnerPreset("Claude");
+	instanceB.setSpinnerPreset("Claudeon");
 	assert(pickCalls.length === 1, "a second module instance installs through the shared ui");
 	assert(pickCalls[0]?.frames?.[0] === "\u00b7", "the chosen preset's frames are installed, not the old ones");
 	assert(pickCalls[0]?.intervalMs === 120, "and its cadence (120ms)");

package/extensions/arnative.ts

@@ -14,9 +14,13 @@ import { markedLabels } from "../lib/format.ts";
 import { LEGEND_LIVE, LEGEND_MOVE, matchesBack } from "../lib/shortcuts.ts";
 import { SPINNER_PRESETS, type SpinnerPreset } from "../lib/spinner.ts";
 import {
-	ANIMATIONS_PICKER_TEXT,
+	activeSpinnerGradient,
+	animationsPickerText,
 	activeSpinnerPreset,
+	animationRowNote,
 	animationRows,
+	PREVIEW_TICK_MS,
+	setSpinnerGradient,
 	setSpinnerPreset,
 } from "./animations.ts";
 import { FOOTER_PRESETS, activeFooterPreset, setFooterPreset, type FooterPreset } from "./footer.ts";
@@ -76,6 +80,18 @@ interface ListPickerHooks {
 	/** `←`: leave this screen for its parent (the menu, or the chat when there is none).
 	 *  Distinct from `cancel`/Esc, which closes or reverts the screen it is on. */
 	back?: () => void;
+	/** `g`: toggle a screen-level switch (Animations → gradient). Only a screen that passes
+	 *  this hook reacts to the key, so `g` stays a plain letter everywhere else. */
+	toggleGradient?: () => void;
+	/** Note re-read on every render, so a row can animate (Animations → a moving frame).
+	 *  Returning undefined keeps the row's static note. */
+	note?: (label: string) => string | undefined;
+	/** Repaint cadence for an animated note. The frame itself is read from the clock, so a
+	 *  missed repaint costs one frame and never desynchronises the animation. */
+	tickMs?: number;
+	/** Legend re-read on every render, for a key row that states live state
+	 *  (`[g] Gradient on`). A constant legend would keep advertising the value it opened with. */
+	legend?: () => string;
 }
 
 /** Box copy, so one picker serves every menu ("Themes - Arnative⠙", "Headers - Arnative⠙", …).
@@ -94,6 +110,7 @@ export class ListPicker implements Component {
 	private applied: string | undefined;
 	private readonly livePreview: boolean;
 	private readonly opened: string | undefined;
+	private readonly tick: ReturnType<typeof setInterval> | undefined;
 	/** Border painter, from the session's thinking level — the box follows the model. */
 	private readonly edge: (s: string) => string;
 
@@ -117,10 +134,13 @@ export class ListPicker implements Component {
 		this.applied = current;
 		this.selected = Math.max(0, rows.findIndex((r) => r.label === current));
 		this.edge = thinkingColorOf(theme, thinkingLevel);
+		this.tick = hooks.tickMs ? setInterval(() => hooks.requestRender(), hooks.tickMs) : undefined;
 	}
 
 	invalidate(): void {}
-	dispose(): void {}
+	dispose(): void {
+		if (this.tick) clearInterval(this.tick);
+	}
 
 	/** Selected row, for callers that need the choice after `done()` resolves. */
 	get index(): number {
@@ -166,7 +186,11 @@ export class ListPicker implements Component {
 			this.move(1);
 			return;
 		}
-		if (matchesKey(keyData, "enter")) this.hooks.done();
+		if (matchesKey(keyData, "enter")) {
+			this.hooks.done();
+			return;
+		}
+		if (this.hooks.toggleGradient && matchesKey(keyData, "g")) this.hooks.toggleGradient();
 	}
 
 	render(width: number): string[] {
@@ -181,7 +205,8 @@ export class ListPicker implements Component {
 			const isSelected = i === this.selected;
 			const paint = isSelected ? (s: string) => soft(bold(s)) : (s: string) => th.fg(item.note ? "text" : "muted", s);
 			const pad = " ".repeat(Math.max(0, column - visibleWidth(item.label)));
-			const note = item.note ? `${th.fg("dim", ROW_DIVIDER)}${th.fg("dim", item.note)}` : "";
+			const noteText = this.hooks.note?.(item.label) ?? item.note;
+			const note = noteText ? `${th.fg("dim", ROW_DIVIDER)}${th.fg("dim", noteText)}` : "";
 			// Extract parenthetical suffix to render softly
 			const suffix = /(\(.*\))$/.exec(item.label)?.[1] ?? "";
 			const head = suffix ? item.label.slice(0, item.label.length - suffix.length) : item.label;
@@ -189,7 +214,7 @@ export class ListPicker implements Component {
 			const content = `${isSelected ? th.fg("accent", "→ ") : "  "}${paint(head)}${tail}${pad}${note}`;
 			body.push(truncateToWidth(content, width - 4, ""));
 		}
-		return renderScreen(th, width, this.text, body, edge);
+		return renderScreen(th, width, this.hooks.legend ? { ...this.text, legend: this.hooks.legend() } : this.text, body, edge);
 	}
 }
 
@@ -342,9 +367,10 @@ const openAnimations = async (ctx: ExtensionCommandContext): Promise<boolean | v
 	const rows: ListRow[] = animationRows();
 
 	if (ctx.mode !== "tui") {
-		// No custom components (RPC/headless): fall back to the blocking picker.
+		// No custom components (RPC/headless): fall back to the blocking picker. The gradient
+		// switch has no row here, so it is reported rather than silently unreachable.
 		const labels = markedLabels(SPINNER_PRESETS, opened);
-		const pick = await ctx.ui.select(ANIMATIONS_PICKER_TEXT.title, labels);
+		const pick = await ctx.ui.select(animationsPickerText().title, labels);
 		if (pick === undefined) return;
 		setSpinnerPreset(SPINNER_PRESETS[labels.indexOf(pick)]!);
 		ctx.ui.notify(`[arnative] Animation: ${SPINNER_PRESETS[labels.indexOf(pick)]}`, "info");
@@ -365,9 +391,20 @@ const openAnimations = async (ctx: ExtensionCommandContext): Promise<boolean | v
 					if (activeSpinnerPreset() !== opened) setSpinnerPreset(opened);
 					done(true);
 				},
+				// `[g]` is a switch, not a preview: it is a command the user asked for and the legend
+				// states its state, so Esc and `←` leave it on. Only the preset preview reverts.
+				toggleGradient: () => {
+					setSpinnerGradient(!activeSpinnerGradient());
+					tui.requestRender();
+				},
+				legend: () => animationsPickerText().legend,
+				// The row animates: its note is re-read each tick and the frame comes from the
+				// clock, so the picker shows motion instead of a static glyph list.
+				note: (label) => animationRowNote(label as SpinnerPreset),
+				tickMs: PREVIEW_TICK_MS,
 				requestRender: () => tui.requestRender(),
 			},
-			ANIMATIONS_PICKER_TEXT,
+			animationsPickerText(),
 			true,
 			ctx.thinkingLevel,
 		),
@@ -470,7 +507,26 @@ export function arnativeCompletions(prefix: string): AutocompleteItem[] | null {
 	return items.length > 0 ? items : null;
 }
 
+/** The theme this package ships. Applied only when pi has no theme setting of its own, so a
+ *  fresh install lands on Arnative without ever overriding a choice someone made. */
+export const DEFAULT_THEME = "arnative";
+
+/** Should the shipped theme be installed? Only when no theme is set at all (pi would fall back
+ *  to `system`) and the theme actually loaded, which a headless or filtered load may not do. */
+export function shouldApplyDefaultTheme(
+	themeSetting: string | undefined,
+	themes: readonly { name: string }[],
+): boolean {
+	return themeSetting === undefined && themes.some((t) => t.name === DEFAULT_THEME);
+}
+
 export default function (pi: ExtensionAPI) {
+	pi.on("session_start", async (_event, ctx) => {
+		// `setTheme` writes the choice into pi's settings, so this runs once per install and the
+		// second session already sees an explicit setting.
+		if (!shouldApplyDefaultTheme(pi.getSettings()?.theme, ctx.ui.getAllThemes())) return;
+		ctx.ui.setTheme(DEFAULT_THEME);
+	});
 	pi.registerCommand("arnative", {
 		description: "Arnative settings menu: themes, headers, footers, usage",
 		getArgumentCompletions: arnativeCompletions,
@@ -509,6 +565,12 @@ if (isMain(import.meta.url)) {
 	assert(MENUS.some((m) => m.value === "usage"), "usage menu registered");
 	assert(arnativeCompletions("us")![0]!.value === "usage", "usage menu has completions");
 	assert(typeof MENUS.find((m) => m.value === "usage")!.open === "function", "the usage row opens the dashboard");
+
+	// The shipped theme is applied only when pi has no theme setting of its own.
+	assert(shouldApplyDefaultTheme(undefined, [{ name: "arnative" }]), "an unset theme installs Arnative");
+	assert(!shouldApplyDefaultTheme("arnative", [{ name: "arnative" }]), "an explicit Arnative setting is left alone");
+	assert(!shouldApplyDefaultTheme("gruvbox", [{ name: "arnative" }]), "a chosen theme is never overridden");
+	assert(!shouldApplyDefaultTheme(undefined, [{ name: "dark" }]), "no install when the theme did not load");
 	assert(arnativeCompletions("zz") === null, "completions null when nothing matches");
 
 	// Live-preview picker (shared by Themes and Headers): move = preview, Enter = keep, Esc = revert.
@@ -679,10 +741,36 @@ if (isMain(import.meta.url)) {
 		animationRows(),
 		"Pi (system)",
 		{ preview: () => {}, revert: () => {}, done: () => {}, requestRender: () => {} },
-		ANIMATIONS_PICKER_TEXT,
+		animationsPickerText(),
 	);
 	const animLines = animPicker.render(120);
 	assert(animLines.some((l) => l.includes("Pi ") && l.includes("<dim>(system)</dim>")), "animations picker dims (system)");
 
+	// `g` reaches only a screen that passes the hook, and its legend follows the toggle.
+	const quiet = (): void => undefined;
+	let gradientOn = false;
+	const gradientPicker = new ListPicker(
+		fakeTheme,
+		animationRows(),
+		"Pi (system)",
+		{
+			preview: quiet,
+			revert: quiet,
+			done: quiet,
+			requestRender: quiet,
+			toggleGradient: () => {
+				gradientOn = !gradientOn;
+			},
+			legend: () => `[g] Gradient ${gradientOn ? "on" : "off"}`,
+		},
+		animationsPickerText(),
+	);
+	gradientPicker.handleInput("g");
+	assert(gradientOn, "g reaches the screen's own toggle");
+	assert(gradientPicker.render(120).some((l) => l.includes("[g] Gradient on")), "the legend follows the toggle");
+	assert(gradientPicker.index === 0, "g is not a row key: the cursor stays put");
+	mainPicker.handleInput("g");
+	assert(gradientOn, "a screen without the hook ignores g");
+
 	console.log("arnative.ts self-check OK");
 }

package/extensions/footer.ts

@@ -18,7 +18,7 @@ import { capitalize, markedLabels, modelDisplayParts } from "../lib/format.ts";
 import { IS_WINDOWS_LIKE, SHORTCUT_RELOAD, SHORTCUT_TOGGLE_FOOTER } from "../lib/shortcuts.ts";
 import { formatTokens } from "../lib/usage-store.ts";
 import { FOOTER_PRESET_KEY as FOOTER_PRESET_CONFIG_KEY, loadChoice, resetPresetCache, saveChoice } from "../lib/preset-store.ts";
-import { EDITOR_KEY, activeSpinnerPreset } from "./animations.ts";
+import { EDITOR_KEY, activeSpinnerGradient, activeSpinnerPreset } from "./animations.ts";
 import { spinnerPainter } from "../lib/spinner.ts";
 
 // ctrl+alt+r (alt+r on Windows/WSL — see lib/shortcuts.ts).
@@ -211,15 +211,6 @@ export function currentToolVerb(active: ReadonlyMap<string, string>): string {
 	return verb;
 }
 
-/**
- * The pi-jev-eye status cell: `Eye: ● MODE (Backend)`. pi-jev-eye writes the value plain because a status
- * is a fact, not a layout; this decides the painting.
- *
- * The trailing parenthesised backend is a modifier, so it takes `dim` while the `Eye:` label and the state
- * keep the soft and state tiers — that is what makes `(Clef Flash)` recede and `Eye: ● ON` stay readable
- * at a glance. The backend name itself is read out of the value, never hardcoded here: the extension
- * reports the active backend from `/jev-eye models`, so the footer cannot know it in advance.
- */
 /**
  * Is this status value pi-jev-eye's own cell? It is matched on the LABEL the value carries (`Eye:`), not on
  * the internal key name: the value is `Eye: ● ON (Clef Flash)` and contains no `jev-eye` anywhere, so the
@@ -231,6 +222,15 @@ export function currentToolVerb(active: ReadonlyMap<string, string>): string {
  */
 export const isJevEyeStatus = (status: string): boolean => /^\s*Eye\s*:/i.test(stripAnsi(status));
 
+/**
+ * The pi-jev-eye status cell: `Eye: ● MODE (Backend)`. pi-jev-eye writes the value plain because a status
+ * is a fact, not a layout; this decides the painting.
+ *
+ * The trailing parenthesised backend is a modifier, so it takes `dim` while the `Eye:` label and the state
+ * keep the soft and state tiers — that is what makes `(Clef Flash)` recede and `Eye: ● ON` stay readable
+ * at a glance. The backend name itself is read out of the value, never hardcoded here: the extension
+ * reports the active backend from `/jev-eye models`, so the footer cannot know it in advance.
+ */
 export function jevEyeStatusLine(
 	status: string,
 	acc: (text: string) => string,
@@ -1079,7 +1079,7 @@ export default function (pi: ExtensionAPI) {
 					if (!indicator) return;
 					// Clear renderIndicatorVerbatim so custom frames pass through spinnerColorFn.
 					indicator.renderIndicatorVerbatim = false;
-					indicator.spinnerColorFn = spinnerPainter(activeSpinnerPreset(), this.getActiveTheme());
+					indicator.spinnerColorFn = spinnerPainter(activeSpinnerPreset(), this.getActiveTheme(), activeSpinnerGradient());
 					indicator.messageColorFn = (text: string) => {
 						try {
 							const th = this.getActiveTheme();

package/extensions/ui-render-tweaks.ts

@@ -1,5 +1,5 @@
 /**
- * Five small patches to pi's fullscreen renderer (render layer only, session data
+ * Six small patches to pi's fullscreen renderer (render layer only, session data
  * untouched):
  * 1. Hide pi's built-in "Reloading keybindings, extensions, skills..." box
  *    (hardcoded in handleReloadCommand, no auto-hide).

package/extensions/usage.ts

@@ -13,7 +13,7 @@ import { assert, isMain } from "../lib/check.ts";
 import { capitalize } from "../lib/format.ts";
 import { thinkingColorOf, softSecondaryOf } from "../lib/ansi.ts";
 import { legendUsage, matchesBack } from "../lib/shortcuts.ts";
-import { collectUsageSummary, estimateCost, formatTokens, getModelAllTimeUsage, hasPrice, loadPriceTable, type UsageSummary } from "../lib/usage-store.ts";
+import { collectUsageSummary, estimateCost, formatTokens, getModelAllTimeUsage, hasPrice, loadPriceTable, resetUsageCache, type UsageSummary } from "../lib/usage-store.ts";
 
 export function formatCost(n: number): string {
 	if (!n || n <= 0) return "-";
@@ -309,7 +309,7 @@ export class UsageModalComponent implements Component {
 			{
 				title: screenTitle("Usage"),
 				description: width >= 70 ? "Token, message & cache usage across all local Pi sessions." : "Usage across all local sessions.",
-				legend: this.hintText(width),
+				legend: legendUsage(width),
 			},
 			body,
 			edge,
@@ -334,10 +334,6 @@ export class UsageModalComponent implements Component {
 		const divider = soft(" · ");
 		return `${icon}${soft(capitalize(title))}${divider}${soft(parts.join(" · "))}`;
 	}
-
-	private hintText(width: number): string {
-		return legendUsage(width);
-	}
 }
 
 /** Open the dashboard. Shared by `/usage` and `/arnative` → Usage, so the two cannot drift. */
@@ -386,7 +382,7 @@ if (isMain(import.meta.url)) {
 	const asst = (model: string, input: number) => JSON.stringify({ message: { role: "assistant", provider: "google", model, usage: { input, output: 5, cacheRead: 1, cost: { total: 0.02 } } } });
 	writeFileSync(
 		join(fixture, "sessions", "proj", "a.jsonl"),
-		[JSON.stringify({ message: { role: "user", content: "hi" } }), asst("gemini-3.8-flash", 100), asst("gemini-3.8-flash", 50), asst("other-model", 7)].join(String.fromCharCode(10)),
+		[JSON.stringify({ message: { role: "user", content: "hi" } }), asst("gemini-3.8-flash", 100), asst("gemini-3.8-flash", 50), asst("other-model", 7)].join(String.fromCharCode(10)) + String.fromCharCode(10),
 	);
 
 	const summary = collectUsageSummary(true);
@@ -419,6 +415,9 @@ if (isMain(import.meta.url)) {
 	const incremental = JSON.stringify(getModelAllTimeUsage("gemini-3.8-flash"));
 	const cacheRaw = JSON.parse(readFileSync(join(fixture, "arnative-usage-cache.json"), "utf8")) as Record<string, unknown>;
 	// Drop the cache (as a fresh machine, or a version bump, would) and rescan the whole file.
+	// Writing `{}` is not enough on its own: the disk cache is memoized per process, so the
+	// memo would answer and this assert would compare a value against itself, never failing.
+	resetUsageCache();
 	writeFileSync(join(fixture, "arnative-usage-cache.json"), "{}", "utf8");
 	collectUsageSummary(true);
 	assert(
@@ -445,14 +444,29 @@ if (isMain(import.meta.url)) {
 	// These use a provider that reports NO cost (cost.total = 0), which is the case the estimate
 	// exists for; `asst` above reports 0.02 per message and would be priced by the provider.
 	mkdirSync(join(fixture, "sessions", "ui"), { recursive: true });
-	const freeAsst = (model: string, input: number) =>
-		JSON.stringify({ message: { role: "assistant", provider: "wally", model, usage: { input, output: 5, cacheRead: 1, cost: { total: 0 } } } });
+	const freeAsstOf = (provider: string, model: string, input: number) =>
+		JSON.stringify({ message: { role: "assistant", provider, model, usage: { input, output: 5, cacheRead: 1, cost: { total: 0 } } } });
+	const freeAsst = (model: string, input: number) => freeAsstOf("wally", model, input);
 	writeFileSync(
 		join(fixture, "sessions", "ui", "rows.jsonl"),
-		[freeAsst("gemini-3.8-flash", 100), freeAsst("other-model", 7)].join(String.fromCharCode(10)),
+		[
+			freeAsst("gemini-3.8-flash", 100),
+			freeAsst("other-model", 7),
+			// The shipped shape of the collision: a bare id and, on another provider, a path id
+			// that merely ENDS with it. Suffix matching folded the second into the first, so a first
+			// run under `river/…` showed wally+yarz's 29.5M/3.2M/360.5M as if it were its own.
+			freeAsst("deepseek-v4.1-flash", 300),
+			freeAsstOf("9router", "river/deepseek-ai/DeepSeek-V4.1-Flash", 200),
+		].join(String.fromCharCode(10)),
 	);
 	collectUsageSummary(true);
 
+	// Per-id totals: a model id reports its own tokens only, whatever it is a suffix of.
+	assert(getModelAllTimeUsage("deepseek-v4.1-flash").input === 300, "a bare id does not absorb a longer id that ends with it");
+	assert(getModelAllTimeUsage("river/deepseek-ai/DeepSeek-V4.1-Flash").input === 200, "a path id counts its own provider's tokens only");
+	assert(getModelAllTimeUsage("RIVER/DeepSeek-AI/deepseek-V4.1-Flash").input === 200, "case still does not split one model's history");
+	assert(getModelAllTimeUsage("deepseek-v4.1-flash:free").input === 300, "a route tag folds into the model it tags");
+
 	// Cost estimation: unpriced pairs use rates declared automatically in models.json.
 	assert(loadPriceTable() !== null && Object.keys(loadPriceTable()).length === 0, "no models.json rates means an empty table");
 	assert(!hasPrice("wally", "gemini-3.8-flash"), "a pair absent from models.json has no price");

package/lib/spinner.ts

@@ -3,26 +3,38 @@
  * Single source of truth for frames, cadence, and colours.
  */
 import { assert, isMain } from "./check.ts";
+import { visibleWidth } from "@earendil-works/pi-tui";
 
+/** Picker order: the escape hatch first, this package's own spinner second, then the rest
+ *  alphabetically. `Pi (system)` and `Arnative` are not sorted in — they are the two rows a
+ *  user is most likely to want and they should never move. */
 export const SPINNER_PRESETS = [
 	"Pi (system)",
-	"Diamond Glow",
-	"Diamond Pulse",
-	"Circle Pulse",
-	"Circle Wave",
-	"Shade Wave",
+	"Arnative",
+	"Arrow Orbit",
+	"Bagua Trigram",
 	"Braille Column",
 	"Braille Level",
+	"Circle Pulse",
+	"Circle Wave",
+	"Claudeon",
+	"Diamond Glow",
+	"Diamond Pulse",
+	"Dot Spine",
+	"Gemini",
 	"Kanji Count",
+	"Pacman",
+	"Shade Wave",
 	"Suzhou Tally",
-	"Gemini",
-	"Claude",
+	"Yin Yang Lines",
 ] as const;
 export type SpinnerPreset = (typeof SPINNER_PRESETS)[number];
-export const DEFAULT_SPINNER_PRESET: SpinnerPreset = "Diamond Glow";
+export const DEFAULT_SPINNER_PRESET: SpinnerPreset = "Arnative";
 
 /** Persistence key in `arnative-config.json` (see `lib/preset-store.ts`). */
 export const SPINNER_PRESET_KEY = "spinnerPreset";
+/** Persistence key for the gradient override on `accent` presets. Values: `"on"` / `"off"`. */
+export const SPINNER_GRADIENT_KEY = "spinnerGradient";
 
 interface Preset {
 	/** Animation frames. Empty leaves pi's indicator alone. */
@@ -30,22 +42,24 @@ interface Preset {
 	/** Frame delay in ms. `0` keeps pi's interval. */
 	intervalMs: number;
 	/** How the frame is painted. */
-	paint: "accent" | "gradient" | "claude";
+	paint: "accent" | "gradient" | "claudeon";
 	/** Shown in the picker row after `·`. */
 	note: string;
 }
 
-/** Claude Code mark animation frames, adapting to Ghostty and non-macOS font fallbacks. */
-function defaultClaudeCharacters(): readonly string[] {
-	if (process.env.TERM === "xterm-ghostty") {
-		return ["\u00b7", "\u2722", "\u2733", "\u2736", "\u273b", "*"];
-	}
-	return process.platform === "darwin"
-		? ["\u00b7", "\u2722", "\u2733", "\u2736", "\u273b", "\u273d"]
-		: ["\u00b7", "\u2722", "*", "\u2736", "\u273b", "\u273d"];
-}
-
-const CLAUDE_BASE_FRAMES = defaultClaudeCharacters();
+/** The Claude Code mark, restyled: the four marks Claudeon pulses through.
+ *
+ *  Only one rule decides the set: every frame must be a glyph the terminal font *itself* carries,
+ *  so it advances exactly one cell. A glyph the font lacks is served by a fallback font, and
+ *  fallbacks are not monospaced — measured in the terminal face (JetBrainsMono Nerd Font), the
+ *  Dingbats marks `✢` `✤` `✻` `✽` `❋` advance **1.48** cells and `✳` **2.29**, against a **1.00**
+ *  native cell, which walks the label sideways on every tick that uses one. `·` `*` `⋆` `✶` all
+ *  advance 1.00 in that face (and in Consolas, Cascadia, Lucida, Courier), so the four-mark swell
+ *  `· → * → ⋆ → ✶` is smooth on all of them. A scan of all 86 installed families found none that
+ *  covers the Dingbats block at ~1 em, so a fifth mark cannot be added by picking a nicer glyph —
+ *  only by finding one the monospace faces already ship. Frames are pinned by codepoint in the
+ *  self-check, so a silent swap cannot creep back in. */
+const CLAUDE_BASE_FRAMES = ["\u00b7", "\u002a", "\u22c6", "\u2736"] as const;
 const CLAUDE_PING_PONG_FRAMES = [...CLAUDE_BASE_FRAMES, ...[...CLAUDE_BASE_FRAMES].reverse()] as const;
 
 /**
@@ -110,6 +124,17 @@ export const SPINNER_PRESET_DEFS: Record<SpinnerPreset, Preset> = {
 		paint: "accent",
 		note: "rising braille dot level fill",
 	},
+	// A dot body growing outward from a two-cell core: each frame adds one dot cell on both ends
+	// (⠂⠐ → ⠺ ⠂⠐ ⠗ → ⠺ ⠪ ⠂⠐ ⠕ ⠗). Every frame is 10 columns so the label stays put; the
+	// spacing between the cells is what makes the growth read as a body rather than a row. Named
+	// off the `Braille *` prefix so it does not read as a third variant of the two above; the
+	// note still says braille, which is what the glyphs are.
+	"Dot Spine": {
+		frames: ["    \u2802\u2810    ", "  \u283a \u2802\u2810 \u2817  ", "\u283a \u282a \u2802\u2810 \u2815 \u2817"],
+		intervalMs: 200,
+		paint: "accent",
+		note: "braille dot body growing out from the centre, 3 frames",
+	},
 	// Kanji stroke count: one, two, three lines (一 二 三).
 	"Kanji Count": {
 		frames: ["\u4e00", "\u4e8c", "\u4e09"],
@@ -124,6 +149,54 @@ export const SPINNER_PRESET_DEFS: Record<SpinnerPreset, Preset> = {
 		paint: "accent",
 		note: "vertical tally bars, one to three",
 	},
+	// Bagua trigrams (three stacked lines): mountain, water, thunder (☶ ☵ ☳). Only three of the
+	// eight are used — a spinner is a short loop, not a catalogue — and all three arrive from the
+	// same fallback face at the same width, so the row holds its place even though the terminal
+	// font itself has none of them.
+	"Bagua Trigram": {
+		frames: ["\u2636", "\u2635", "\u2633"],
+		intervalMs: 200,
+		paint: "accent",
+		note: "bagua trigrams — mountain, water, thunder",
+	},
+	// I Ching digrams: two stacked lines that go solid, then break one at a time (⚌ ⚎ ⚍ ⚏).
+	// Read as a movement, the broken (yin) line travels downward — both lines whole, the lower
+	// one breaks, the break moves up, then both are broken — and the loop restarts. All four
+	// glyphs come from one fallback face at one width, so the row is constant even though the
+	// terminal font itself has none of them.
+	"Yin Yang Lines": {
+		frames: ["\u268c", "\u268e", "\u268d", "\u268f"],
+		intervalMs: 200,
+		paint: "accent",
+		note: "I Ching digrams, a broken line travelling through two",
+	},
+	// A four-arrow ring turning clockwise one position per frame (▴▸▾◂ ▸▾◂▴ ▾◂▴▸ ◂▴▸▾).
+	// 200ms × 4 matches Diamond Glow: one full turn per 0.8s.
+	"Arrow Orbit": {
+		frames: ["\u25b4\u25b8\u25be\u25c2", "\u25b8\u25be\u25c2\u25b4", "\u25be\u25c2\u25b4\u25b8", "\u25c2\u25b4\u25b8\u25be"],
+		intervalMs: 200,
+		paint: "accent",
+		note: "four-arrow ring, turning clockwise",
+	},
+	// The package's own spinner, and the default: a spark and a braille cell trading places
+	// around the centre. The trailing space in two frames is load-bearing: both cells are one
+	// column wide, so dropping it would shift the label by a column every second frame.
+	"Arnative": {
+		frames: [" \u2727\u2819", " \u2727\u28e0", "\u28c4\u2727 ", "\u280b\u2726 "],
+		intervalMs: 200,
+		paint: "accent",
+		note: "spark and dot cell circling, the Arnative mark",
+	},
+	// Pacman eating his way across the row, one cell per frame, with the trail behind him
+	// (`~` = ghost tail, `+ − ×` = the pellets still ahead). Every frame is 7 columns so the
+	// label stays put; `ᗧ` is U+15E7, the Canadian Syllabics `ye`, the glyph the pacman CLI
+	// spinners use because it reads as an open mouth facing right.
+	Pacman: {
+		frames: ["\u15e7 + \u2212 \u00d7", "~ \u15e7 \u2212 \u00d7", "~ ~ \u15e7 \u00d7", "~ ~ ~ \u15e7"],
+		intervalMs: 200,
+		paint: "accent",
+		note: "pacman eating the pellets, 4 frames",
+	},
 	// Gemini CLI's spinner is the `dots` entry from the `cli-spinners` package, the same
 	// Braille set pi ships; what makes it Gemini is the Google brand gradient sweeping the
 	// glyph on a 4s cycle (GeminiSpinner.tsx paints `CliSpinner` through `tinygradient`).
@@ -133,13 +206,13 @@ export const SPINNER_PRESET_DEFS: Record<SpinnerPreset, Preset> = {
 		paint: "gradient",
 		note: "pi's Braille + Google gradient",
 	},
-	// Claude Code's mark animation: ping-pong loop of dingbats swelling and contracting,
-	// matching upstream SpinnerAnimationRow (120ms per frame).
-	Claude: {
+	// Claudeon: a mark of our own, inspired by Claude Code's pulsing dingbats. The shape is
+	// Claude's; the glyphs are not — they are picked to be one cell wide in the terminal font.
+	Claudeon: {
 		frames: CLAUDE_PING_PONG_FRAMES,
 		intervalMs: 120,
-		paint: "claude",
-		note: "Claude Code's pulsing marks, 120ms",
+		paint: "claudeon",
+		note: "inspired by Claude — pulsing marks, 120ms",
 	},
 };
 
@@ -154,8 +227,9 @@ const GOOGLE_BRAND: ReadonlyArray<readonly [number, number, number]> = [
 	[168, 130, 234], // back to purple
 ];
 
-/** Claude Code's own spinner colour: the 256-colour grey-orange index it brands around. */
-const CLAUDE_RGB: readonly [number, number, number] = [215, 119, 87];
+/** Claude Code's own spinner colour: the grey-orange it brands around. Claudeon keeps it,
+ *  because the colour is what makes the mark read as "the Claude-style spinner". */
+const CLAUDEON_RGB: readonly [number, number, number] = [215, 119, 87];
 
 const lerp = (a: number, b: number, t: number): number => a + (b - a) * t;
 
@@ -174,18 +248,36 @@ export function googleGradientRgb(t: number): [number, number, number] {
 /** Truecolor SGR for one glyph. pi's own `fg` cannot take a raw RGB, so the escape is ours. */
 const fgRgb = ([r, g, b]: readonly [number, number, number]): string => `\x1b[38;2;${r};${g};${b}m`;
 
-/** Painter for a preset's spinner; gradient and claude use fixed branding, accent uses theme. */
+/**
+ * How long one full sweep of the brand gradient takes, in ms.
+ *
+ * The frame interval decides how many steps the sweep gets, so the step size — what the eye reads
+ * as smooth or as stepping — is `cycle / interval`. At 4s a 200ms preset moves up to 65 RGB units
+ * per frame, which reads as a strobe rather than a sweep; 20s brings that to 13 (measured:
+ * `200ms` 64.9 → 13.2, `80ms` 26.2 → 5.7 max delta). 20s is also slow enough to stay readable on
+ * `Pi (system)`, where the same sweep would otherwise finish in one blink.
+ */
+export const GRADIENT_CYCLE_MS = 20000;
+
+/** The Google sweep, shared by the `gradient` presets and the `accent` override. */
+const gradientPainter = (text: string): string => `${fgRgb(googleGradientRgb(Date.now() / GRADIENT_CYCLE_MS))}${text}\x1b[0m`;
+
+/** Painter for a preset's spinner; gradient and claudeon use fixed branding, accent uses theme.
+ *
+ *  `gradient` is the `/arnative` → Animations `[g]` override. It only reaches presets whose
+ *  own paint mode is `accent`: `Gemini` is already the brand sweep, and `Claudeon` carries its
+ *  own mark colour, so overriding either would erase what the preset exists to be. */
 export function spinnerPainter(
 	preset: SpinnerPreset,
 	theme: { fg?(color: string, text: string): string } | null,
+	gradient = false,
 ): (text: string) => string {
 	const def = SPINNER_PRESET_DEFS[preset];
-	if (def.paint === "gradient") {
-		return (text) => `${fgRgb(googleGradientRgb(Date.now() / 4000))}${text}\x1b[0m`;
-	}
-	if (def.paint === "claude") {
-		return (text) => `${fgRgb(CLAUDE_RGB)}${text}\x1b[0m`;
+	if (def.paint === "gradient") return gradientPainter;
+	if (def.paint === "claudeon") {
+		return (text) => `${fgRgb(CLAUDEON_RGB)}${text}\x1b[0m`;
 	}
+	if (gradient) return gradientPainter;
 	const fg = theme?.fg?.bind(theme);
 	if (!fg) return (text) => text;
 	return (text) => fg("accent", text);
@@ -198,6 +290,19 @@ export function previewFrames(preset: SpinnerPreset): string {
 	return frames.join(" ");
 }
 
+/** The frame a live preview should show at `now`, and the width to reserve for it.
+ *
+ *  The picker animates the selected row from the wall clock instead of a stored counter, so a
+ *  dropped repaint cannot desynchronise it — the index is a function of `now`. The width is the
+ *  widest frame, so the row does not jump as the cell changes. */
+export function previewFrameAt(preset: SpinnerPreset, now = Date.now()): { text: string; width: number } {
+	const def = SPINNER_PRESET_DEFS[preset];
+	const frames = def.frames.length > 0 ? def.frames : SPINNER_PRESET_DEFS.Gemini.frames;
+	const intervalMs = def.frames.length > 0 ? def.intervalMs : 80;
+	const index = Math.floor(now / intervalMs) % frames.length;
+	return { text: frames[index]!, width: Math.max(...frames.map((f) => [...f].length)) };
+}
+
 
 // Self-check: `node lib/spinner.ts`
 if (isMain(import.meta.url)) {
@@ -234,13 +339,68 @@ if (isMain(import.meta.url)) {
 		assert(/^[\u25a0-\u25ff\u2b00-\u2bff]$/.test(f), `Diamond Glow frame ${f} is a geometric shape`);
 	}
 
-	// Claude preset: upstream dingbats in ping-pong order, matching Claude Code.
-	const claude = SPINNER_PRESET_DEFS.Claude.frames;
-	assert(claude[0] === "\u00b7", "Claude starts on the interpunct");
-	assert(claude.length === 12, "Claude uses a 12-frame ping-pong loop");
-	assert(SPINNER_PRESET_DEFS.Claude.intervalMs === 120, "Claude matches upstream 120ms cadence");
-	assert(claude.join("") === [...claude].reverse().join(""), "Claude's ping-pong frames are a palindrome");
-	for (const f of claude) assert(f !== " " && f.length === 1, `Claude frame ${JSON.stringify(f)} is one glyph`);
+	// Claudeon preset: a mark of our own, inspired by Claude Code's pulsing dingbats. The
+	// attribution lives in the preset's note; the type and colour keep the `claudeon` name.
+	const claudeon = SPINNER_PRESET_DEFS.Claudeon.frames;
+	assert(claudeon[0] === "\u00b7", "Claudeon starts on the interpunct");
+	assert(claudeon.length === 8, "Claudeon uses an 8-frame there-and-back loop over 4 base marks");
+	assert(SPINNER_PRESET_DEFS.Claudeon.intervalMs === 120, "Claudeon matches upstream 120ms cadence");
+	assert(claudeon.join("") === [...claudeon].reverse().join(""), "Claudeon's ping-pong frames are a palindrome");
+	assert(
+		claudeon.join("") === "\u00b7\u002a\u22c6\u2736\u2736\u22c6\u002a\u00b7",
+		"Claudeon's base marks are pinned by codepoint",
+	);
+	// Every frame must be one column by the Unicode width tables — that catches a fullwidth or
+	// CJK mark slipped in. It cannot catch the *real* failure mode (a glyph the terminal font
+	// lacks, served ~1.5 cells wide by a fallback font), because that width is a font property
+	// and is invisible from here. Those frames are pinned by codepoint above instead, so the set
+	// cannot change silently.
+	assert(
+		claudeon.every((f) => visibleWidth(f) === 1),
+		`Claudeon frames must be single-column, got ${claudeon.filter((f) => visibleWidth(f) !== 1).join(" ")}`,
+	);
+
+	// Arrow Orbit, Arnative and Pacman each draw several glyphs per frame, so every frame must
+	// be the same width or the label jumps sideways each tick. Pinned by codepoint: a font
+	// fallback that swaps one arrow/star for a double-width glyph is exactly what this catches.
+	const arrow = SPINNER_PRESET_DEFS["Arrow Orbit"].frames;
+	assert(arrow.join("|") === "\u25b4\u25b8\u25be\u25c2|\u25b8\u25be\u25c2\u25b4|\u25be\u25c2\u25b4\u25b8|\u25c2\u25b4\u25b8\u25be", "Arrow Orbit turns clockwise one position per frame");
+	const spark = SPINNER_PRESET_DEFS.Arnative.frames;
+	assert(spark.join("|") === " \u2727\u2819| \u2727\u28e0|\u28c4\u2727 |\u280b\u2726 ", "Arnative frames as specified");
+	const pacman = SPINNER_PRESET_DEFS.Pacman.frames;
+	assert(
+		pacman.join("|") === "\u15e7 + \u2212 \u00d7|~ \u15e7 \u2212 \u00d7|~ ~ \u15e7 \u00d7|~ ~ ~ \u15e7",
+		"Pacman eats one cell per frame",
+	);
+	// The mouth moves one cell right each frame, so the glyph's column is the frame index.
+	for (const [i, frame] of pacman.entries()) {
+		assert([...frame].indexOf("\u15e7") === i * 2, `Pacman frame ${i} puts the mouth in column ${i * 2}`);
+	}
+	assert(DEFAULT_SPINNER_PRESET === "Arnative", "a fresh install gets the Arnative spinner");
+	// The four I Ching digrams, pinned by codepoint, in the order the operator gave them.
+	const yinYang = SPINNER_PRESET_DEFS["Yin Yang Lines"].frames;
+	assert(
+		yinYang.join("|") === "\u268c|\u268e|\u268d|\u268f",
+		"Yin Yang Lines frames as specified (all whole, lower breaks, break rises, both break)",
+	);
+	assert(new Set(yinYang).size === 4, "Yin Yang Lines shows four distinct digrams");
+	// The three bagua trigrams, pinned by codepoint, in the order the operator gave them.
+	const bagua = SPINNER_PRESET_DEFS["Bagua Trigram"].frames;
+	assert(bagua.join("|") === "\u2636|\u2635|\u2633", "Bagua Trigram frames as specified (mountain, water, thunder)");
+	assert(new Set(bagua).size === 3, "Bagua Trigram shows three distinct trigrams");
+	const worm = SPINNER_PRESET_DEFS["Dot Spine"].frames;
+	assert(
+		worm.join("|") === "    \u2802\u2810    |  \u283a \u2802\u2810 \u2817  |\u283a \u282a \u2802\u2810 \u2815 \u2817",
+		"Dot Spine frames as specified",
+	);
+	// The core `⠂⠐` sits at columns 4-5 in every frame and the body grows outward around it, so
+	// the centre never drifts; the glyph count grows 2 → 4 → 6.
+	for (const frame of worm) assert([...frame].slice(4, 6).join("") === "\u2802\u2810", `Dot Spine keeps its core centred: ${JSON.stringify(frame)}`);
+	assert(worm.map((f) => [...f].filter((c) => c !== " ").length).join() === "2,4,6", "Dot Spine adds one cell at each end per frame");
+	for (const frames of [arrow, spark, pacman, worm]) {
+		const widths = new Set(frames.map((f) => [...f].length));
+		assert(widths.size === 1, `every frame of a multi-glyph preset is the same length: ${[...widths].join()}`);
+	}
 
 	// The gradient closes: t=1 must equal t=0, or the 4s sweep would jump at the seam.
 	assert(
@@ -259,12 +419,61 @@ if (isMain(import.meta.url)) {
 		"accent presets paint through the theme token",
 	);
 	assert(spinnerPainter("Diamond Glow", null)("x") === "x", "no theme -> identity painter, never a crash");
+
+	// The `[g]` override reaches accent presets only: the two branded presets keep their identity.
+	const override = spinnerPainter("Diamond Glow", { fg: (c, t) => `<${c}>${t}` }, true)("x");
+	assert(override.startsWith("\x1b[38;2;") && override.endsWith("x\x1b[0m"), "gradient overrides an accent preset");
+	assert(spinnerPainter("Diamond Glow", null, true)("x").startsWith("\x1b[38;2;"), "the override needs no theme");
+	assert(
+		spinnerPainter("Claudeon", { fg: (c, t) => `<${c}>${t}` }, true)("x").startsWith("\x1b[38;2;215;119;87m"),
+		"gradient leaves Claudeon's own mark colour alone",
+	);
+	// Gemini already sweeps and Claudeon owns its mark colour, so `[g]` must not repaint either.
+	assert(
+		spinnerPainter("Gemini", null, true) === spinnerPainter("Gemini", null),
+		"the flag is ignored on a preset that already sweeps",
+	);
+	assert(
+		spinnerPainter("Claudeon", null, true)("x") === spinnerPainter("Claudeon", null)("x"),
+		"the flag is ignored on the preset that carries a mark colour",
+	);
 	const grad = spinnerPainter("Gemini", null)("x");
 	assert(grad.startsWith("\x1b[38;2;") && grad.endsWith("x\x1b[0m"), "the gradient painter emits truecolor + reset");
-	assert(spinnerPainter("Claude", null)("x").startsWith("\x1b[38;2;215;119;87m"), "Claude uses its own mark colour");
+
+	// The sweep must be slow enough to read as motion: the frame interval is fixed per preset, so
+	// the step size is what the cycle decides. Pin the measured ceiling rather than a taste.
+	const stepCeiling = (intervalMs: number): number => {
+		const steps = GRADIENT_CYCLE_MS / intervalMs;
+		let worst = 0;
+		for (let i = 0; i < steps; i++) {
+			const a = googleGradientRgb(i / steps);
+			const b = googleGradientRgb((i + 1) / steps);
+			worst = Math.max(worst, Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]));
+		}
+		return worst;
+	};
+	assert(stepCeiling(200) <= 15, `the slowest preset steps <= 15 RGB units (got ${stepCeiling(200).toFixed(1)})`);
+	assert(stepCeiling(80) <= 8, `the fastest preset steps <= 8 RGB units (got ${stepCeiling(80).toFixed(1)})`);
+	assert(spinnerPainter("Claudeon", null)("x").startsWith("\x1b[38;2;215;119;87m"), "Claudeon uses its own mark colour");
 
 	assert(previewFrames("Diamond Glow").split(" ").length === 4, "the picker preview shows every Diamond frame");
 	assert(previewFrames("Pi (system)").length > 0, "Pi (system) still previews pi's Braille set");
 
+	// Picker order: the two fixed rows first, then everything else alphabetically. Pinned
+	// because a new preset must not land wherever the edit happened to be.
+	assert(SPINNER_PRESETS[0] === "Pi (system)" && SPINNER_PRESETS[1] === "Arnative", "the two fixed rows lead the picker");
+	const rest = SPINNER_PRESETS.slice(2);
+	assert(
+		rest.join() === [...rest].sort((a, b) => a.localeCompare(b)).join(),
+		`the rest is alphabetical, got ${rest.join()}`,
+	);
+	assert(new Set(SPINNER_PRESETS).size === SPINNER_PRESETS.length, "every preset name is unique");
+
+	// The live preview reads the clock, so it advances without any stored counter.
+	assert(previewFrameAt("Diamond Glow", 0).text === "\u2b25", "the preview starts on frame 0");
+	assert(previewFrameAt("Diamond Glow", 200).text === "\u25c8", "the preview advances one frame per interval");
+	assert(previewFrameAt("Diamond Glow", 800).text === "\u2b25", "the preview wraps at the end of the loop");
+	assert(previewFrameAt("Pacman", 0).width === 7, "the preview reserves the widest frame");
+
 	console.log("spinner.ts self-check OK");
 }

package/lib/usage-store.ts

@@ -348,6 +348,16 @@ function readTail(filePath: string, fromByte: number): Buffer | null {
 let cachedSummary: UsageSummary | null = null;
 let lastScanMs = 0;
 
+/** Drop every in-memory memo so the next scan reads the cache file and the session files
+ *  again. The self-check needs this: `forceScan` skips the 5s summary cache but still
+ *  trusts the memoized disk cache, so without it a "cold parse" test asserts a value
+ *  against itself and can never fail. */
+export function resetUsageCache(): void {
+	diskMemo = null;
+	cachedSummary = null;
+	lastScanMs = 0;
+}
+
 export function collectUsageSummary(forceScan = false): UsageSummary {
 	const now = Date.now();
 	if (!forceScan && cachedSummary && now - lastScanMs < 5000) {
@@ -536,12 +546,22 @@ export function collectUsageSummary(forceScan = false): UsageSummary {
 	return cachedSummary;
 }
 
-// Match model names across id shapes ("gemini-3.8-flash", "vendor/gemini-…").
-const modelMatches = (mNameLower: string, targetLower: string): boolean =>
-	mNameLower === targetLower ||
-	mNameLower.endsWith("/" + targetLower) ||
-	mNameLower.split(":")[0] === targetLower ||
-	targetLower.endsWith("/" + mNameLower);
+/** One model id in its canonical form: trimmed, case-folded, route tag (`:free`) dropped. */
+const canonicalModel = (id: string): string => {
+	const lower = id.trim().toLowerCase();
+	const tag = lower.indexOf(":");
+	return tag === -1 ? lower : lower.slice(0, tag);
+};
+
+/** Do these two ids name the same model? Exact after `canonicalModel` — deliberately not fuzzy.
+ *
+ *  The rule used to also match a bare tail (`target.endsWith("/" + name)`), so the first run
+ *  under a new provider inherited the history of every other provider whose id ended the same
+ *  way: `river/deepseek-ai/DeepSeek-V4.1-Flash` reported wally+yarz's deepseek totals
+ *  (29.5M in / 3.2M out / 360.5M cache) as its own (2026-10-17). Two ids that differ are two
+ *  routes — billed, rate-limited and counted apart — and only the vendor knows whether a short
+ *  id and a path id are the same model, so the tab shows the tokens of the id it names. */
+const modelMatches = (mName: string, target: string): boolean => canonicalModel(mName) === canonicalModel(target);
 
 /** All-time usage for one model (same numbers as /usage; the active session is already in its own file). */
 export function getModelAllTimeUsage(modelId?: string): { input: number; output: number; cacheRead: number } {
@@ -552,10 +572,10 @@ export function getModelAllTimeUsage(modelId?: string): { input: number; output:
 	let out = 0;
 	let read = 0;
 
-	const target = modelId.toLowerCase();
+	const target = modelId;
 	for (const p of summary.providers) {
 		for (const m of p.models) {
-			if (modelMatches(m.name.toLowerCase(), target)) {
+			if (modelMatches(m.name, target)) {
 				inp += m.input;
 				out += m.output;
 				read += m.cacheRead;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bismawy/pi-arnative",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Refined aesthetics. Cohesive tools. Built for Pi. Warm themes, rounded tool boxes, tabbed header, compact footer and a /usage dashboard.",
   "keywords": [
     "pi-package",