@bismawy/pi-arnative 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.3.6] - 2026-10-05
+
+### Fixed
+- Fixed a startup crash: `Cannot read properties of null (reading 'fg')`. pi's `[Extension issues]` diagnostic box passed a null theme into the box renderer, which dereferenced it and killed the process with `uncaughtException`. It only surfaced on machines where an extension reported a problem (a conflicting shortcut, a failed `session_start`, …), because that is when the diagnostic is drawn. The renderer now draws an uncolored box for the first frame instead of throwing (`lib/box.ts`).
+- The active theme now lives in a single `globalThis` slot. `/reload` re-imports extension modules, so two copies can coexist, and only one of them receives `session_start`. The copy that owns the `loadedResourcesContainer` patch used to keep a permanently-null theme; it now paints with the live theme (`lib/ansi.ts`, `extensions/section-headers.ts`, `extensions/ui-render-tweaks.ts`).
+- Removed the `activeThemeProxy ?? Theme` fallback in the package-update box: `Theme` is a class, not an instance, so the fallback would itself have thrown `th.fg is not a function`. The box component now tolerates a null theme (`extensions/ui-render-tweaks.ts`).
+
 ## [0.3.5] - 2026-10-04
 
 ### Fixed

package/extensions/section-headers.ts

@@ -31,7 +31,7 @@ import {
 	type TuiMouseEventResult,
 } from "@earendil-works/pi-tui";
 import { renderBoxLines } from "../lib/box.ts";
-import { stripAnsi, themeOf } from "../lib/ansi.ts";
+import { getActiveTheme, setActiveTheme, stripAnsi, themeOf } from "../lib/ansi.ts";
 import { assert, isMain } from "../lib/check.ts";
 import { capitalize, markedLabels, modelDisplayParts } from "../lib/format.ts";
 import { SHORTCUT_NEW_SESSION, SHORTCUT_NEXT_TAB, SHORTCUT_RELOAD } from "../lib/shortcuts.ts";
@@ -54,8 +54,6 @@ export const SECTION_ICONS: Record<TabKey, string> = {
 
 export type Themeish = { fg?(color: string, text: string): string; bg?(color: string, text: string): string } | null;
 
-let activeThemeProxy: Themeish = null;
-
 const MODEL_SNAPSHOT_KEY = Symbol.for("pi-arnative.currentModel");
 const THINKING_SNAPSHOT_KEY = Symbol.for("pi-arnative.currentThinking");
 
@@ -474,7 +472,7 @@ export class ArnativeHeader implements Component {
 		if (width < 36) {
 			return [centerLine(`pi v${VERSION}`, width)];
 		}
-		const th = this.themeProxy || (activeThemeProxy as Themeish);
+		const th = this.themeProxy || getActiveTheme<Themeish>();
 		const side = fgFirst(th, ["dim"], "│");
 
 		const infoLines: string[] = [];
@@ -689,7 +687,7 @@ if (UserMessageComponent?.prototype && !(globalThis as Record<symbol, boolean>)[
 					const text = themedTextOf(child);
 					if (text.includes("[Extension issues]") && typeof child.render === "function") {
 						const origRender = child.render.bind(child);
-						child.render = (w: number) => renderBoxLines(activeThemeProxy, w, origRender(w), undefined, "warning");
+						child.render = (w: number) => renderBoxLines(getActiveTheme<Themeish>(), w, origRender(w), undefined, "warning");
 						return origAddChild.call(this, child);
 					}
 					// Any other element inside loadedResourcesContainer (e.g. Spacer) is hidden too
@@ -729,7 +727,9 @@ export default function (pi: ExtensionAPI) {
 		}
 		resourcesListingShown(quiet === false);
 		for (const key of ["Context", "Skills", "Extensions"] as const) tabStore.set(key, []);
-		activeThemeProxy = themeOf<Themeish>(ctx) ?? activeThemeProxy;
+		// A context without a theme (project-trust prompt) must not drop the one we have.
+		const th = themeOf<Themeish>(ctx);
+		if (th) setActiveTheme(th);
 		// Register the header for the active preset
 		applyHeaderPreset(ctx);
 	});
@@ -1067,5 +1067,27 @@ if (isMain(import.meta.url)) {
 	assert(sectionBodyOf(helpBlock) === "\u2580\u2580\u2588  v0.99.1\n\u2588\u2580 \u2588 escape interrupt", "sectionBodyOf reads the build shape");
 	assert(sectionNameOf(sectionBodyOf(helpBlock)!) === null, "startup help block is not a resource section");
 
+	// pi's "[Extension issues]" diagnostic renders while the installing module's theme is
+	// still null (a `/reload` copy never saw session_start). The box must draw uncolored,
+	// not deref null — that crash was reported in the wild.
+	setActiveTheme(null);
+	const issuesChild = {
+		build: () => "[Extension issues]\n  extension \"x\" failed",
+		render: (_w: number) => ["[Extension issues]", '  extension "x" failed'],
+	};
+	container.addChild(issuesChild);
+	const issuesLines = issuesChild.render(80);
+	assert(issuesLines[0]!.startsWith("\u256d") && issuesLines.at(-1)!.startsWith("\u2570"), "extension-issues box renders without a theme");
+
+	// The theme proxy is globalThis-backed, so the copy that owns the addChild patch still
+	// paints once the other copy's session_start has stored the theme.
+	setActiveTheme({ fg: (c: string, t: string) => `<${c}>${t}</${c}>` });
+	const coloredChild = {
+		build: () => "[Extension issues]\n  extension \"x\" failed",
+		render: (_w: number) => ["[Extension issues]", '  extension "x" failed'],
+	};
+	container.addChild(coloredChild);
+	assert(coloredChild.render(80)[0]!.includes("<warning>"), "shared theme proxy colors the box even in the patched copy");
+
 	console.log("section-headers.ts self-check OK");
 }

package/extensions/ui-render-tweaks.ts

@@ -21,7 +21,6 @@ import {
 	getMarkdownTheme,
 	initTheme,
 	InteractiveMode,
-	keyText,
 	Theme,
 	UserMessageComponent,
 	type ExtensionAPI,
@@ -40,12 +39,13 @@ import {
 } from "@earendil-works/pi-tui";
 import { readdirSync, readFileSync } from "node:fs";
 import { renderBoxLines } from "../lib/box.ts";
-import { ansiBgOpen, stripAnsi, themeOf, accentSoftOf } from "../lib/ansi.ts";
+import { ansiBgOpen, getActiveTheme, setActiveTheme, stripAnsi, themeOf, accentSoftOf } 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";
 
-let activeThemeProxy: { fg(color: string, text: string): string; bg?(color: string, text: string): string } | null = null;
+type ActiveTheme = { fg(color: string, text: string): string; bg?(color: string, text: string): string } | null;
+const activeTheme = () => getActiveTheme<Exclude<ActiveTheme, null>>();
 
 // Hide pi's built-in "Reloading keybindings, extensions, skills..." box
 // (hardcoded in handleReloadCommand, no auto-hide). Patches Container.render
@@ -141,8 +141,8 @@ if (TuiAltScreen?.prototype && !(globalThis as Record<symbol, boolean>)[SELECTIO
 	if (typeof origHighlight === "function") {
 		TuiAltScreen.prototype.applySelectionHighlight = function (text: string): string {
 			const highlighted = origHighlight.call(this, text);
-			const fgOpen = ansiFgOpen(activeThemeProxy);
-			const bgOpen = ansiBgOpen(activeThemeProxy, "selectedBg");
+			const fgOpen = ansiFgOpen(activeTheme());
+			const bgOpen = ansiBgOpen(activeTheme(), "selectedBg");
 			return fgOpen && bgOpen ? recolorSelection(highlighted, fgOpen, bgOpen) : highlighted;
 		};
 	}
@@ -161,7 +161,7 @@ if (TuiAltScreen?.prototype && !(globalThis as Record<symbol, boolean>)[PILL_KEY
 			layout: unknown,
 			width: number,
 		) {
-			return withAccentPill(this, () => origComposite.call(this, screen, layout, width), activeThemeProxy);
+			return withAccentPill(this, () => origComposite.call(this, screen, layout, width), activeTheme());
 		};
 	}
 }
@@ -190,7 +190,7 @@ if (ExtensionSelectorComponent?.prototype && !(globalThis as Record<symbol, bool
 	};
 	const origUpdateList = proto.updateList;
 	proto.updateList = function (this: typeof proto) {
-		const th = activeThemeProxy;
+		const th = activeTheme();
 		if (!th) return origUpdateList.call(this); // no theme yet -> pi's default
 		this.listContainer.clear();
 		for (let i = 0; i < this.options.length; i++) {
@@ -206,7 +206,8 @@ if (ExtensionSelectorComponent?.prototype && !(globalThis as Record<symbol, bool
 export default function uiRenderTweaks(pi: ExtensionAPI) {
 	// The active theme is re-read per session (ctx.ui.theme); render reads it lazily.
 	pi.on("session_start", async (_event, ctx) => {
-		activeThemeProxy = themeOf<typeof activeThemeProxy>(ctx) ?? activeThemeProxy;
+		const th = themeOf<Exclude<ActiveTheme, null>>(ctx);
+		if (th) setActiveTheme(th);
 	});
 
 	// 4. `pi-jev-eye-review` contract message: use our own border box.
@@ -224,9 +225,9 @@ export default function uiRenderTweaks(pi: ExtensionAPI) {
 // body text is unchanged.
 export class PackageUpdateBoxComponent implements Component {
 	private packages: string[];
-	private th: { fg(c: string, t: string): string };
+	private th: { fg(c: string, t: string): string } | null;
 
-	constructor(packages: string[], th: { fg(c: string, t: string): string }) {
+	constructor(packages: string[], th: { fg(c: string, t: string): string } | null) {
 		this.packages = packages;
 		this.th = th;
 	}
@@ -235,10 +236,11 @@ export class PackageUpdateBoxComponent implements Component {
 
 	render(width: number): string[] {
 		const th = this.th;
+		const fg = (color: string, text: string) => (th ? th.fg(color, text) : text);
 		const rows = [
-			th.fg("warning", "\x1b[1m\uf449  Package Updates Available\x1b[22m"),
-			`${th.fg("muted", "Package updates are available. Run ")}${th.fg("accent", "pi update --extensions")}`,
-			th.fg("muted", "Packages:"),
+			fg("warning", "\x1b[1m\uf449  Package Updates Available\x1b[22m"),
+			`${fg("muted", "Package updates are available. Run ")}${fg("accent", "pi update --extensions")}`,
+			fg("muted", "Packages:"),
 			...this.packages.map((pkg) => `- ${pkg}`),
 		];
 		return renderBoxLines(th, width, rows, undefined, "warning");
@@ -257,7 +259,7 @@ if (InteractiveMode?.prototype && !(globalThis as Record<symbol, boolean>)[PACKA
 			ui: { requestRender(): void };
 		};
 		self.chatContainer.addChild(new Spacer(1));
-		self.chatContainer.addChild(new PackageUpdateBoxComponent(packages, activeThemeProxy ?? Theme));
+		self.chatContainer.addChild(new PackageUpdateBoxComponent(packages, activeTheme()));
 		self.ui.requestRender();
 	};
 }
@@ -333,7 +335,7 @@ if (CompactionSummaryMessageComponent?.prototype && !(globalThis as Record<symbo
 	const proto = CompactionSummaryMessageComponent.prototype as any;
 	const origUpdateDisplay = proto.updateDisplay;
 	proto.updateDisplay = function (): void {
-		const th = activeThemeProxy;
+		const th = activeTheme();
 		if (!th) return origUpdateDisplay.call(this);
 		const message = this.message as { tokensBefore?: number; summary?: string } | undefined;
 		const tokenStr = Number(message?.tokensBefore ?? 0).toLocaleString();

package/lib/ansi.ts

@@ -25,6 +25,19 @@ export function themeOf<T>(ctx: unknown): T | null {
 	return (ctx as { ui?: { theme?: T } } | null | undefined)?.ui?.theme ?? null;
 }
 
+// Shared active-theme slot. `/reload` re-imports an extension's modules, so two copies
+// can coexist: one carries the session_start handler, the other owns a stacked UI patch.
+// globalThis gives both the same theme, so the patched copy paints instead of drawing
+// uncolored (or, before the null-guard fix, crashing). Set from `session_start`.
+const THEME_PROXY_KEY = Symbol.for("pi-arnative.activeThemeProxy");
+export function getActiveTheme<T>(): T | null {
+	return (globalThis as Record<symbol, T>)[THEME_PROXY_KEY] ?? null;
+}
+export function setActiveTheme<T>(th: T | null): void {
+	if (th) (globalThis as Record<symbol, T>)[THEME_PROXY_KEY] = th;
+	else delete (globalThis as Record<symbol, T>)[THEME_PROXY_KEY];
+}
+
 /** Painter for the `accentSoft` token, which only arnative themes define; other themes fall back to accent (probed once). */
 export function accentSoftOf(th: { fg?(c: string, t: string): string } | null): (s: string) => string {
 	const fg = th?.fg?.bind(th);
@@ -46,6 +59,11 @@ if (isMain(import.meta.url)) {
 	assert(themeOf({ ui: { theme: "T" } }) === "T", "themeOf reads ctx.ui.theme");
 	assert(themeOf(null) === null, "themeOf tolerates a missing ctx");
 
+	setActiveTheme({ fg: (c, t) => `<${c}>${t}</${c}>` });
+	assert(getActiveTheme<object>() !== null, "active theme round-trips through globalThis");
+	setActiveTheme(null);
+	assert(getActiveTheme<object>() === null, "clearing the active theme leaves no stale slot");
+
 	const tag = { fg: (c: string, t: string) => `<${c}>${t}</${c}>` };
 	assert(accentSoftOf(tag)("x") === "<accentSoft>x</accentSoft>", "accentSoftOf uses accentSoft when the theme defines it");
 	const noSoft = {

package/lib/box.ts

@@ -23,18 +23,21 @@ const applyBg = (line: string, width: number, bgFn: (text: string) => string): s
 	return bgFn(line + " ".repeat(pad));
 };
 
-/** Wrap `rows` (plain or ANSI-colored) into a box. `bgType` = theme bg name (no-op when the theme has no `bg`); `borderColor` = border color. */
-export function renderBoxLines(theme: BoxTheme, width: number, rows: string[], bgType?: string, borderColor = "dim"): string[] {
-	const dim = (s: string) => theme.fg(borderColor, s);
+/** Wrap `rows` (plain or ANSI-colored) into a box. `bgType` = theme bg name (no-op when the theme has no `bg`); `borderColor` = border color.
+ *  `theme` may be null: a box is patched in at module load, before `session_start`
+ *  delivers the active theme. An uncolored box for that first frame beats a null
+ *  deref that kills the process. */
+export function renderBoxLines(theme: BoxTheme | null, width: number, rows: string[], bgType?: string, borderColor = "dim"): string[] {
+	const dim = (s: string) => (theme ? theme.fg(borderColor, s) : s);
 	const inner = Math.max(8, width - 4);
 	const lines = [boxEdge("╭", "╮", width, dim)];
 	for (const row of rows) {
 		for (const line of wrapTextWithAnsi(row, inner)) lines.push(boxRow(line, width, dim));
 	}
 	lines.push(boxEdge("╰", "╯", width, dim));
-	if (bgType && theme.bg) {
+	if (bgType && theme?.bg) {
 		try {
-			return lines.map((l) => applyBg(l, width, (s) => theme.bg!(bgType, s)));
+			return lines.map((l) => applyBg(l, width, (s) => theme!.bg!(bgType, s)));
 		} catch {
 			return lines;
 		}
@@ -50,5 +53,8 @@ if (isMain(import.meta.url)) {
 	assert(plain[1] === "│ hello                │", "content line padded flush");
 	assert(renderBoxLines(th, 24, ["x".repeat(40)]).length === 4, "long line wrapped");
 	assert(renderBoxLines(th, 20, ["hi"], "customMessageBg").length === 3, "bg ignored when the theme has no bg");
+	const nullTheme = renderBoxLines(null, 24, ["hello"], "customMessageBg");
+	assert(nullTheme.every((l) => visibleWidth(l) === 24), "null theme renders an uncolored box instead of throwing");
+	assert(nullTheme[0]!.startsWith("╭") && nullTheme[1] === "│ hello                │", "null-theme frame and padding intact");
 	console.log("lib/box.ts OK");
 }

package/package.json

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