@bismawy/pi-arnative 0.3.10 → 0.5.1

package/extensions/section-headers.ts

@@ -1,8 +1,9 @@
 /**
  * Arnative header box & horizontal tab system:
  * - Round-corner box: left column = the pi block mark (4x8, P accent / i soft) with
- *   "pi vX" under it; a vertical divider; then the info column = "Arnative vY
- *   · Welcome back, <User>", the tab menu, the tab data.
+ *   "pi vX" under it; a vertical divider; then the info column = "Arnative⠙ vY
+ *   · Welcome back, <User>", the tab menu, the tab data. The Braille cell (U+2819)
+ *   marks the live brand, matching `Settings - Arnative⠙`.
  * - Greeting = OS account name (first letter capitalized). The tab box has no label;
  *   its column dividers join the borders with ┬/┴ (full height).
  * - Interactive tab menu (mouse click): Model + Context/Skills/Extensions/Shortcut
@@ -31,8 +32,8 @@ import {
 	type TuiMouseEventResult,
 } from "@earendil-works/pi-tui";
 import type { BoxTheme } from "../lib/box.ts";
-import { renderBoxLines } from "../lib/box.ts";
-import { getActiveTheme, setActiveTheme, stripAnsi, themeOf } from "../lib/ansi.ts";
+import { BRAND, renderBoxLines } from "../lib/box.ts";
+import { getActiveTheme, setActiveTheme, softOf, stripAnsi, themeOf } from "../lib/ansi.ts";
 import { capitalize, expandKeyName, modelDisplayParts } from "../lib/format.ts";
 import { SHORTCUT_NEW_SESSION, SHORTCUT_NEXT_TAB, SHORTCUT_RELOAD } from "../lib/shortcuts.ts";
 import { HEADER_PRESET_KEY as HEADER_PRESET_CONFIG_KEY, loadChoice, saveChoice } from "../lib/preset-store.ts";
@@ -55,6 +56,9 @@ export const SECTION_ICONS: Record<TabKey, string> = {
 // nf-cod-warning, width 1 — prefixes a pi diagnostic block's compact header.
 const DIAGNOSTIC_ICON = "\uea6c";
 
+// The header's brand line shares the one glyph with every `/arnative` screen title.
+export const HEADER_BRAND = `Arnative${BRAND}`;
+
 export type Themeish = { fg?(color: string, text: string): string; bg?(color: string, text: string): string } | null;
 
 const MODEL_SNAPSHOT_KEY = Symbol.for("pi-arnative.currentModel");
@@ -74,6 +78,19 @@ export function fgFirst(th: Themeish, names: string[], text: string): string {
 	return text;
 }
 
+/**
+ * Painter for the header's soft tier. Pi 1.2.0 rejects a custom `accentSoft` key in
+ * `colors`, so `fgFirst(["accentSoft", …])` silently degrades to plain text there and
+ * the two-tone logo/header look flattens. `softOf` derives the same tint from the
+ * resolved accent; a theme that genuinely defines `accentSoft` still wins first.
+ */
+export function softFirst(th: Themeish, fallbacks: string[], text: string): string {
+	const soft = softOf(th as never);
+	const out = soft(text);
+	if (out !== text) return out;
+	return fgFirst(th, fallbacks, text);
+}
+
 /**
  * Collapsed body of a pi startup section ("[Skills]\n  a, b"). pi 0.99 dropped
  * ExpandableText's own getCollapsedText/getExpandedText fields for a `build` callback
@@ -275,7 +292,7 @@ export function centerLine(text: string, width: number, side = "│"): string {
 // bar, column 3) in the theme soft — same P/i split as the old wordmark.
 export function buildLogoLines(th: Themeish): string[] {
 	const a = (s: string) => fgFirst(th, ["accent"], s);
-	const t = (s: string) => fgFirst(th, ["accentSoft", "text"], s);
+	const t = (s: string) => softFirst(th, ["accentSoft", "text"], s);
 	return [
 		`${a("██████")}  `,
 		`${a("██  ██")}  `,
@@ -479,7 +496,7 @@ export class ArnativeHeader implements Component {
 		const side = fgFirst(th, ["dim"], "│");
 
 		const infoLines: string[] = [];
-		const brand = (name: string) => fgFirst(th, ["accent", "accentSoft"], `\x1b[1m${name}\x1b[22m`);
+		const brand = (name: string) => fgFirst(th, ["accent"], `\x1b[1m${name}\x1b[22m`);
 		const dim = (text: string) => fgFirst(th, ["dim"], text);
 
 		// Left column: the mark with the pi version under it (no gap). The column is as
@@ -507,10 +524,11 @@ export class ArnativeHeader implements Component {
 			fgFirst(th, ["dim"], `${l}${"─".repeat(jx - 1)}${mid}${"─".repeat(Math.max(0, width - jx - 2))}${r}`);
 		const out: string[] = [border("╭", "┬", "╮")];
 
-		// 1. Brand + greeting on one line ("Arnative vX · Welcome back, <User>"; the username
-		// is capitalized), then a blank line before the tab box.
+		// 1. Brand + greeting on one line ("Arnative⠙ vX · Welcome back, <User>"; the username
+		// is capitalized), then a blank line before the tab box. The Braille cell marks the
+		// live brand, same glyph as `Settings - Arnative⠙`.
 		const arnVer = ARNATIVE_VERSION ? ` ${dim(`v${ARNATIVE_VERSION}`)}` : "";
-		infoLines.push(`${brand("Arnative")}${arnVer}${dim(" · ")}${dim("Welcome back,")} ${brand(capitalize(deviceUser()))}`);
+		infoLines.push(`${brand(HEADER_BRAND)}${arnVer}${dim(" · ")}${dim("Welcome back,")} ${brand(capitalize(deviceUser()))}`);
 
 		// 2. Tab menu: icon = accent, text = soft (bold when active)
 		const tabs = this.getTabsData(width);
@@ -524,7 +542,7 @@ export class ArnativeHeader implements Component {
 			const isActive = t.key === this.activeTab;
 			const iconStyled = isActive ? fgFirst(th, ["accent"], t.icon) : fgFirst(th, ["dim"], t.icon);
 			const labelStyled = isActive
-				? fgFirst(th, ["accentSoft", "text"], `\x1b[1m${label}\x1b[22m`)
+				? softFirst(th, ["accentSoft", "text"], `\x1b[1m${label}\x1b[22m`)
 				: fgFirst(th, ["dim"], label);
 			return { key: t.key, plain, formatted: `${iconStyled} ${labelStyled}` };
 		};
@@ -588,19 +606,19 @@ export class ArnativeHeader implements Component {
 			// Model name in soft, its "(Provider)" tail dim.
 			const provSuffix = fullName.match(/(\s*\([^()]*\))$/)?.[1] ?? "";
 			const nameMain = provSuffix ? fullName.slice(0, -provSuffix.length) : fullName;
-			let line = `${fgFirst(th, ["accentSoft", "text"], nameMain)}${provSuffix ? fgFirst(th, ["dim"], provSuffix) : ""}${sep}${fgFirst(th, ["accentSoft", "text"], `Thinking: ${thinkLevel}`)}`;
+			let line = `${softFirst(th, ["accentSoft", "text"], nameMain)}${provSuffix ? fgFirst(th, ["dim"], provSuffix) : ""}${sep}${softFirst(th, ["accentSoft", "text"], `Thinking: ${thinkLevel}`)}`;
 
 			// All-time usage of that model (same as /usage): ↑... ↓...  ...
 			const usage = getModelAllTimeUsage(modelObj?.id);
 			const tokenParts: string[] = [];
 			if (usage.input > 0) {
-				tokenParts.push(`${fgFirst(th, ["accent"], "↑")}${fgFirst(th, ["accentSoft", "text"], formatTokens(usage.input))}`);
+				tokenParts.push(`${fgFirst(th, ["accent"], "↑")}${softFirst(th, ["accentSoft", "text"], formatTokens(usage.input))}`);
 			}
 			if (usage.output > 0) {
-				tokenParts.push(`${fgFirst(th, ["accent"], "↓")}${fgFirst(th, ["accentSoft", "text"], formatTokens(usage.output))}`);
+				tokenParts.push(`${fgFirst(th, ["accent"], "↓")}${softFirst(th, ["accentSoft", "text"], formatTokens(usage.output))}`);
 			}
 			if (usage.cacheRead > 0) {
-				tokenParts.push(`${fgFirst(th, ["accent"], "\uf49b ")}${fgFirst(th, ["accentSoft", "text"], formatTokens(usage.cacheRead))}`);
+				tokenParts.push(`${fgFirst(th, ["accent"], "\uf49b ")}${softFirst(th, ["accentSoft", "text"], formatTokens(usage.cacheRead))}`);
 			}
 			if (tokenParts.length > 0) {
 				line += `${sep}${tokenParts.join(" ")}`;
@@ -613,11 +631,11 @@ export class ArnativeHeader implements Component {
 
 		if (this.activeTab === "Directory") {
 			for (const line of wrapPath(getCwd(this.ctx), infoW)) {
-				infoLines.push(fgFirst(th, ["accentSoft", "text"], line));
+				infoLines.push(softFirst(th, ["accentSoft", "text"], line));
 			}
 		} else if (this.activeTab === "Shortcut") {
 			for (const line of wrapTokens(SHORTCUTS, infoW)) {
-				infoLines.push(fgFirst(th, ["accentSoft", "text"], line));
+				infoLines.push(softFirst(th, ["accentSoft", "text"], line));
 			}
 		} else if (activeItems.length === 0) {
 			infoLines.push(
@@ -629,7 +647,7 @@ export class ArnativeHeader implements Component {
 		} else {
 			for (const line of wrapCommaItems(activeItems, infoW)) {
 				// Point 5: selected menu data uses soft only
-				infoLines.push(fgFirst(th, ["accentSoft", "text"], line));
+				infoLines.push(softFirst(th, ["accentSoft", "text"], line));
 			}
 		}
 

package/extensions/timestamps.ts

@@ -79,7 +79,7 @@ export function formatTimeBadge(timeStr: string, th: { fg(color: string, text: s
 // dark for the rest of the line. Re-apply the bubble bg after every reset and close
 // it at end of line so it cannot leak. Same pattern as InputBgEditor below.
 export function repairBubbleBg(line: string, bgOpen: string): string {
-	if (!bgOpen) return line;
+	if (!bgOpen || (!line.includes("\x1b[0m") && !line.includes("\x1b[49m"))) return line;
 	const patched = line.split("\x1b[0m").join(`\x1b[0m${bgOpen}`).split("\x1b[49m").join(`\x1b[49m${bgOpen}`);
 	return patched.endsWith(bgOpen) ? `${patched}\x1b[49m` : patched;
 }

package/extensions/tools.ts

@@ -39,7 +39,7 @@ import {
 import { Markdown, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import { homedir } from "node:os";
 import { renderBoxLines as box } from "../lib/box.ts";
-import { stripAnsi, accentSoftOf } from "../lib/ansi.ts";
+import { stripAnsi, softOf } from "../lib/ansi.ts";
 import { assert, isMain } from "../lib/check.ts";
 import { expandKeyName } from "../lib/format.ts";
 
@@ -49,7 +49,16 @@ type TCtx = { isError?: boolean; toolCallId?: string; args?: any; state?: Record
 type Res = (r: TResult, th: Theme, soft: (s: string) => string, isErr: boolean, expanded: boolean) => string;
 
 const cwd = process.cwd();
-const TIMINGS = new Map<string, number>(); // duration ms per tool call (one run)
+const MAX_TIMINGS = 200;
+const TIMINGS = new Map<string, number>();
+
+export function recordTiming(toolCallId: string, durationMs: number): void {
+	if (TIMINGS.size >= MAX_TIMINGS) {
+		const oldest = TIMINGS.keys().next().value;
+		if (oldest !== undefined) TIMINGS.delete(oldest);
+	}
+	TIMINGS.set(toolCallId, durationMs);
+}
 
 // Running icon 󰔟 󱦠 󱦟: 500ms spin frames from a ticker that only runs while
 // a tool is active (idle = no wasteful re-renders).
@@ -224,15 +233,17 @@ const hasOwnRendererDef = (self: { toolDefinition?: { renderCall?: unknown; rend
 // sequence. Not exported by pi-tui, so match both prefixes.
 export const isImageLine = (line: string): boolean => line.includes("\x1b_G") || line.includes("\x1b]1337;File=");
 
-/** Drop the leading Spacer only when an image preview follows: its blank tail rows
- *  are the image's vertical space, and deleting them made the terminal draw the
- *  image over the rows below (chat text, editor, footer). */
+/** Drop the leading Spacer and the gap between box and image preview:
+ *  its blank tail rows are kept as the image's vertical space so the
+ *  terminal draws the image with balanced spacing above and below. */
 export function stripEdgesKeepingImages(lines: string[]): string[] {
 	const firstImage = lines.findIndex(isImageLine);
 	if (firstImage < 0) return stripBlankEdges(lines);
 	let s = 0;
 	while (s < firstImage && isBlankLine(lines[s])) s++;
-	return lines.slice(s);
+	const head = lines.slice(s, firstImage);
+	while (head.length > 0 && isBlankLine(head[head.length - 1]!)) head.pop();
+	return [...head, ...lines.slice(firstImage)];
 }
 
 const GAP_KEY = Symbol.for("pi-arnative.toolGapStripped");
@@ -432,7 +443,7 @@ if (ToolExecutionComponent?.prototype?.render && !(globalThis as Record<symbol,
 					? safeCall(() => own.call(this, { content: result.content, details: result.details }, opts, th, ctx))
 					: null;
 			return new Lines((width) => {
-				const soft = accentSoftOf(th);
+				const soft = softOf(th);
 				const inner = Math.max(8, width - 4);
 				const icon = isErr ? th.fg("error", "x") : th.fg("success", "✓");
 				const boxed2 = componentLines(theirs, width - 6);
@@ -586,7 +597,7 @@ function minimal(
 			try {
 				return await tool.execute(toolCallId, params, signal, onUpdate, ctx);
 			} finally {
-				TIMINGS.set(toolCallId, Math.round(performance.now() - start));
+				recordTiming(toolCallId, Math.round(performance.now() - start));
 				ACTIVE--;
 				syncTicker();
 			}
@@ -595,7 +606,7 @@ function minimal(
 			return new Lines((width) => {
 				// Read context.state live (never capture): renderResult may create it after renderCall.
 				if (context.state?.hasResult) return [];
-				const soft = accentSoftOf(theme);
+				const soft = softOf(theme);
 				const inner = Math.max(8, width - 4);
 				const rows = titleRow(
 					theme,
@@ -624,7 +635,7 @@ function minimal(
 			const dur = fmtMs(context.toolCallId ? TIMINGS.get(context.toolCallId) : undefined);
 			const icon = isErr ? theme.fg("error", "x") : theme.fg("success", "✓");
 			return new Lines((width) => {
-				const soft = accentSoftOf(theme);
+				const soft = softOf(theme);
 				const inner = Math.max(8, width - 4);
 				const rows = titleRow(
 					theme,
@@ -659,6 +670,7 @@ function arnativeTools(pi: ExtensionAPI) {
 
 	// Re-render source for the spinner + ticker cleanup when the session closes
 	pi.on("session_start", async (_event, ctx) => {
+		TIMINGS.clear();
 		requestRenderFn = () => {
 			try {
 				(ctx.ui as { requestRender?: () => void }).requestRender?.();
@@ -668,6 +680,7 @@ function arnativeTools(pi: ExtensionAPI) {
 		};
 	});
 	pi.on("session_shutdown", async () => {
+		TIMINGS.clear();
 		if (TICK) {
 			clearInterval(TICK);
 			TICK = null;
@@ -882,9 +895,9 @@ if (isMain(import.meta.url)) {
 	const itermSeq = "\x1b]1337;File=inline=1:AAAA\x07";
 	const withImage = ["", "╭─╮", "│ ✓ read form_crop.png │", "╰─╯", "", kittySeq, "", ""];
 	const kept = stripEdgesKeepingImages(withImage);
-	assert(kept.length === 7, "image: only the leading gap dropped, blank tail kept");
+	assert(kept.length === 6, "image: leading gap and box-image spacer dropped, blank tail kept");
 	assert(kept[0] === "╭─╮", "image: leading Spacer removed");
-	assert(kept.indexOf(kittySeq) === 4 && kept.length - 5 === 2, "image: rows after the sequence intact");
+	assert(kept.indexOf(kittySeq) === 3 && kept.length - 4 === 2, "image: rows after the sequence intact");
 	assert(
 		stripEdgesKeepingImages(["", "a", "", "b", "  ", ""]).join() === "a,,b",
 		"no image: falls back to plain edge stripping",
@@ -1369,5 +1382,11 @@ if (isMain(import.meta.url)) {
 	assert(cdpExpanded.some((l) => l.includes('"pageId": "p1"')), "chrome-devtools: expanded shows the full tool output");
 	assert(cdpCollapsed.some((l) => l.includes("navigated") && l.includes("to expand")), "chrome-devtools: collapsed shows the first line + hint");
 	assert([...cdpCollapsed, ...cdpExpanded].every((l) => visibleWidth(l) === 74), "chrome-devtools: box fills the given width");
+	// Capped timings map self-check
+	for (let i = 0; i < 250; i++) recordTiming(`call_${i}`, i);
+	assert(TIMINGS.size === MAX_TIMINGS, `TIMINGS size is bounded to ${MAX_TIMINGS}`);
+	assert(!TIMINGS.has("call_0") && TIMINGS.has("call_249"), "TIMINGS evicts oldest entries");
+	TIMINGS.clear();
+
 	console.log("OK");
 }

package/extensions/ui-render-tweaks.ts

@@ -39,7 +39,7 @@ import {
 } from "@earendil-works/pi-tui";
 import { readdirSync, readFileSync } from "node:fs";
 import { renderBoxLines } from "../lib/box.ts";
-import { ansiBgOpen, getActiveTheme, setActiveTheme, stripAnsi, themeOf, accentSoftOf } from "../lib/ansi.ts";
+import { ansiBgOpen, getActiveTheme, setActiveTheme, stripAnsi, themeOf, softOf } from "../lib/ansi.ts";
 import { assert, isMain } from "../lib/check.ts";
 import { contrast, parseOklch, toHex } from "../lib/color.ts";
 import { expandKeyName } from "../lib/format.ts";
@@ -57,8 +57,9 @@ const RELOAD_TEXT = "Reloading keybindings, extensions, skills, prompts, themes,
  * whole chat the moment a transcript line mentioned the phrase.
  */
 export function shouldHideReloadBox(lines: readonly string[]): boolean {
+	if (!lines.some((l) => l.includes("Reloading keybindings"))) return false;
 	const rows = lines.map((l) => stripAnsi(l).trim());
-	return rows.some((r) => r.includes("Reloading keybindings")) && rows.every((r) => r === "" || /^[─-]+$/.test(r) || RELOAD_TEXT.includes(r));
+	return rows.every((r) => r === "" || /^[─-]+$/.test(r) || RELOAD_TEXT.includes(r));
 }
 const RELOAD_BOX_KEY = Symbol.for("pi-arnative.reloadBoxHidden");
 if (UserMessageComponent?.prototype && !(globalThis as Record<symbol, boolean>)[RELOAD_BOX_KEY]) {
@@ -173,7 +174,7 @@ const SELECT_ROW_KEY = Symbol.for("pi-arnative.selectRowColors");
 
 /** Selected row body: `·` separators accent, the text around them soft. */
 export function selectRowText(row: string, th: { fg(c: string, t: string): string }): string {
-	const soft = accentSoftOf(th);
+	const soft = softOf(th);
 	return row
 		.split("·")
 		.map((part) => soft(part))
@@ -397,7 +398,11 @@ if (isMain(import.meta.url)) {
 	const hex = (tok: string) => resolve(themeJson.colors[tok] ?? tok);
 	// The built-in theme adds fallbacks (scrollbarTrack<-muted, thinkingMax<-thinkingXhigh),
 	// so the fg map must be complete; take the whole palette like pi's loader does.
-	const fgPalette = Object.fromEntries(Object.entries(themeJson.colors).map(([k, v]) => [k, resolve(v)]));
+	const fgPalette = Object.fromEntries(
+		Object.entries(themeJson.colors)
+			.filter(([k]) => k !== "accentSoft")
+			.map(([k, v]) => [k, resolve(v)]),
+	);
 	const thPill = new Theme(fgPalette, { toolPendingBg: hex("toolPendingBg"), selectedBg: hex("selectedBg") }, "truecolor");
 	const pillOriginal = thPill.bg("selectedBg", thPill.fg("text", " ↓ Jump to latest message · End "));
 	const rgb = (h: string) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16)).join(";");
@@ -444,13 +449,38 @@ if (isMain(import.meta.url)) {
 		thinkingMedium: 2.7, thinkingHigh: 3.6, thinkingXhigh: 4.0,
 	};
 	const isColor = (v: string) => /^#[0-9a-f]{6}$/i.test(v) || parseOklch(v) !== null;
+	// The tokens pi's published theme schema allows as keys in `colors`. Pi 1.2.0 validates
+	// with `additionalProperties: false`, so ANY other key (arnative's `accentSoft` was the
+	// offender) fails the whole theme at startup with "must not have additional properties"
+	// and "Theme not found". Arnative's own colors belong in `vars`, referenced from these.
+	const SCHEMA_TOKENS = new Set([
+		"accent", "border", "borderAccent", "borderMuted", "success", "error", "warning",
+		"muted", "dim", "text", "thinkingText", "scrollbarTrack", "scrollbarThumb",
+		"selectedBg", "searchMatchBg", "searchMatchText", "userMessageBg", "userMessageText",
+		"customMessageBg", "customMessageText", "customMessageLabel", "toolPendingBg",
+		"toolSuccessBg", "toolErrorBg", "toolTitle", "toolOutput", "mdHeading", "mdLink",
+		"mdLinkUrl", "mdCode", "mdCodeBlock", "mdCodeBlockBorder", "mdQuote", "mdQuoteBorder",
+		"mdHr", "mdListBullet", "toolDiffAdded", "toolDiffRemoved", "toolDiffContext",
+		"syntaxComment", "syntaxKeyword", "syntaxFunction", "syntaxVariable", "syntaxString",
+		"syntaxNumber", "syntaxType", "syntaxOperator", "syntaxPunctuation", "thinkingOff",
+		"thinkingMinimal", "thinkingLow", "thinkingMedium", "thinkingHigh", "thinkingXhigh",
+		"thinkingMax", "bashMode",
+	]);
 	for (const f of readdirSync(themesDir).filter((n) => n.endsWith(".json")).sort()) {
 		const d = JSON.parse(readFileSync(new URL(f, themesDir), "utf8")) as {
+			$schema?: string;
 			name: string;
 			vars: Record<string, string>;
 			colors: Record<string, string>;
 		};
 		assert(d.name === f.replace(/\.json$/, ""), `theme ${f}: name = file name`);
+		// Pi 1.2.0 validates `colors` strictly; an extra key rejects the theme at startup.
+		const rogue = Object.keys(d.colors).filter((k) => !SCHEMA_TOKENS.has(k));
+		assert(rogue.length === 0, `theme ${f}: colors has non-schema keys [${rogue.join(", ")}] — move them to vars`);
+		assert(
+			d.$schema === "https://pi.dev/schemas/theme.schema.json",
+			`theme ${f}: $schema must be the published pi.dev theme schema (got ${d.$schema})`,
+		);
 		const missing = required.filter((k) => !(k in d.colors));
 		assert(missing.length === 0, `theme ${f}: required colors complete (missing ${missing.join(",")})`);
 		// colors values may only be: hex, oklch, 256-index, empty, or a REAL variable name —
@@ -478,6 +508,8 @@ if (isMain(import.meta.url)) {
 		// Accent pill: accent bg + toolPendingBg colored text.
 		assert(contrast(hex("accent"), hex("toolPendingBg")) >= 4.5, `theme ${f}: accent vs toolPendingBg contrast >= 4.5`);
 		assert(isColor(d.vars.accentSoft ?? ""), `theme ${f}: vars.accentSoft is a color`);
+		assert(isColor(d.vars.primary ?? ""), `theme ${f}: vars.primary is a color`);
+		assert(isColor(d.vars.secondary ?? ""), `theme ${f}: vars.secondary is a color`);
 		const canvas = hex("userMessageBg");
 		for (const tok of Object.keys(d.colors)) {
 			if (nonText.has(tok) || tok === "thinkingMax") continue;