@zenodinh/pi-render 0.0.0-stage → 0.1.0

package/themes/dracula-soft.json

@@ -0,0 +1,81 @@
+{
+	"$schema": "https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
+	"name": "dracula-soft",
+	"appearance": "dark",
+	"vars": {
+		"text": "#f6f6f4",
+		"muted": "#7b7f8b",
+		"purple": "#bf9eee",
+		"pink": "#f286c4",
+		"cyan": "#97e1f1",
+		"green": "#62e884",
+		"red": "#ee6666",
+		"orange": "#ffb86c",
+		"yellow": "#e7ee98",
+		"selection": "#44475a",
+		"surface": "#343746"
+	},
+	"colors": {
+		"accent": "purple",
+		"border": "muted",
+		"borderAccent": "pink",
+		"borderMuted": "selection",
+		"success": "green",
+		"error": "red",
+		"warning": "orange",
+		"muted": "muted",
+		"dim": "#646773",
+		"text": "text",
+		"thinkingText": "muted",
+		"selectedBg": "selection",
+		"scrollbarTrack": "surface",
+		"scrollbarThumb": "muted",
+		"searchMatchBg": "#52554c",
+		"searchMatchText": "muted",
+		"userMessageBg": "surface",
+		"userMessageText": "text",
+		"customMessageBg": "#403d53",
+		"customMessageText": "muted",
+		"customMessageLabel": "purple",
+		"toolPendingBg": "#2e313e",
+		"toolSuccessBg": "#324c44",
+		"toolErrorBg": "#4c353f",
+		"toolTitle": "text",
+		"toolOutput": "muted",
+		"mdHeading": "purple",
+		"mdLink": "cyan",
+		"mdLinkUrl": "muted",
+		"mdCode": "green",
+		"mdCodeBlock": "yellow",
+		"mdCodeBlockBorder": "muted",
+		"mdQuote": "muted",
+		"mdQuoteBorder": "muted",
+		"mdHr": "muted",
+		"mdListBullet": "cyan",
+		"toolDiffAdded": "green",
+		"toolDiffRemoved": "red",
+		"toolDiffContext": "muted",
+		"syntaxComment": "muted",
+		"syntaxKeyword": "pink",
+		"syntaxFunction": "green",
+		"syntaxVariable": "orange",
+		"syntaxString": "yellow",
+		"syntaxNumber": "purple",
+		"syntaxType": "cyan",
+		"syntaxOperator": "muted",
+		"syntaxPunctuation": "muted",
+		"thinkingOff": "#53516c",
+		"thinkingMinimal": "#776b97",
+		"thinkingLow": "#9b84c3",
+		"thinkingMedium": "#bf9eee",
+		"thinkingHigh": "#d4a7c3",
+		"thinkingXhigh": "#eaaf97",
+		"thinkingMax": "#ffb86c",
+		"bashMode": "cyan"
+	},
+	"export": {
+		"pageBg": "#282a36",
+		"cardBg": "surface",
+		"infoBg": "#52554c"
+	}
+}

package/themes/one-dark.json

@@ -0,0 +1,80 @@
+{
+	"$schema": "https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
+	"name": "one-dark",
+	"appearance": "dark",
+	"vars": {
+		"text": "#abb2bf",
+		"muted": "#7f848e",
+		"blue": "#61afef",
+		"purple": "#c678dd",
+		"green": "#98c379",
+		"red": "#e06c75",
+		"orange": "#d19a66",
+		"yellow": "#e5c07b",
+		"selection": "#4e5666",
+		"surface": "#2c313c"
+	},
+	"colors": {
+		"accent": "blue",
+		"border": "muted",
+		"borderAccent": "blue",
+		"borderMuted": "#3e4452",
+		"success": "green",
+		"error": "red",
+		"warning": "yellow",
+		"muted": "muted",
+		"dim": "#636b78",
+		"text": "text",
+		"thinkingText": "muted",
+		"selectedBg": "selection",
+		"scrollbarTrack": "surface",
+		"scrollbarThumb": "selection",
+		"searchMatchBg": "#524d44",
+		"searchMatchText": "muted",
+		"userMessageBg": "surface",
+		"userMessageText": "text",
+		"customMessageBg": "#41384f",
+		"customMessageText": "muted",
+		"customMessageLabel": "purple",
+		"toolPendingBg": "#323842",
+		"toolSuccessBg": "#3c4740",
+		"toolErrorBg": "#493840",
+		"toolTitle": "text",
+		"toolOutput": "muted",
+		"mdHeading": "red",
+		"mdLink": "blue",
+		"mdLinkUrl": "muted",
+		"mdCode": "green",
+		"mdCodeBlock": "orange",
+		"mdCodeBlockBorder": "muted",
+		"mdQuote": "muted",
+		"mdQuoteBorder": "muted",
+		"mdHr": "muted",
+		"mdListBullet": "yellow",
+		"toolDiffAdded": "green",
+		"toolDiffRemoved": "red",
+		"toolDiffContext": "muted",
+		"syntaxComment": "muted",
+		"syntaxKeyword": "purple",
+		"syntaxFunction": "blue",
+		"syntaxVariable": "red",
+		"syntaxString": "green",
+		"syntaxNumber": "orange",
+		"syntaxType": "yellow",
+		"syntaxOperator": "#56b6c2",
+		"syntaxPunctuation": "muted",
+		"thinkingOff": "#5c5a74",
+		"thinkingMinimal": "#5e769d",
+		"thinkingLow": "#5f93c6",
+		"thinkingMedium": "#61afef",
+		"thinkingHigh": "#8db5c8",
+		"thinkingXhigh": "#b9baa2",
+		"thinkingMax": "#e5c07b",
+		"bashMode": "green"
+	},
+	"export": {
+		"pageBg": "#282c34",
+		"cardBg": "surface",
+		"infoBg": "#524d44"
+	}
+}

package/themes/themes.test.ts

@@ -0,0 +1,251 @@
+// Fixture provenance — schema: recorded-from @earendil-works/pi-coding-agent@1.0.4
+//   (dist/modes/interactive/theme/theme-schema.json, located with findPackageJSON), read 2026-10-06.
+// Fixture provenance — palettes: recorded-from @shikijs/themes 4.4.3 (dracula-soft, one-dark-pro), read 2026-10-06.
+
+// shape: type predicates + plain functions — trigger #7 (fixed-shape record) narrowed from `unknown`;
+//   a class, enum, namespace, or registry would be ceremony over two data files.
+import { readFileSync } from "node:fs";
+import { findPackageJSON } from "node:module";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, test } from "vitest";
+
+const HOST_PACKAGE = "@earendil-works/pi-coding-agent";
+const SCHEMA_ENTRY = "dist/modes/interactive/theme/theme-schema.json";
+const THEME_FILE_NAMES = ["dracula-soft.json", "one-dark.json"] as const;
+const HEX_COLOR = /^#[0-9a-f]{6}$/;
+const COLOR_FUNCTION = /^ok(lch|hsl)\(/i;
+const EXPORT_TOKENS = ["pageBg", "cardBg", "infoBg"];
+const THINKING_TOKENS = [
+	"thinkingOff",
+	"thinkingMinimal",
+	"thinkingLow",
+	"thinkingMedium",
+	"thinkingHigh",
+	"thinkingXhigh",
+	"thinkingMax",
+];
+const TEXT_BACKGROUND_TOKENS = [
+	"selectedBg",
+	"userMessageBg",
+	"customMessageBg",
+	"toolPendingBg",
+	"toolSuccessBg",
+	"toolErrorBg",
+	"searchMatchBg",
+];
+
+function readJson(path: string): unknown {
+	const parsed: unknown = JSON.parse(readFileSync(path, "utf8"));
+	return parsed;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function asRecord(value: unknown, label: string): Record<string, unknown> {
+	if (!isRecord(value)) throw new Error(`${label}: expected an object, got ${typeof value}`);
+	return value;
+}
+
+function asStringArray(value: unknown, label: string): string[] {
+	if (!Array.isArray(value) || !value.every((entry) => typeof entry === "string")) {
+		throw new Error(`${label}: expected a string array`);
+	}
+	return value;
+}
+
+function asString(value: unknown, label: string): string {
+	if (typeof value !== "string") throw new Error(`${label}: expected a string, got ${typeof value}`);
+	return value;
+}
+
+const hostPackageJson = findPackageJSON(HOST_PACKAGE, import.meta.url);
+if (hostPackageJson === undefined) {
+	throw new Error(`${HOST_PACKAGE} is not resolvable — the pinned host devDependency supplies theme-schema.json`);
+}
+const schema = asRecord(readJson(join(dirname(hostPackageJson), SCHEMA_ENTRY)), "theme-schema.json");
+const schemaProperties = asRecord(schema.properties, "theme-schema.properties");
+const colorValueSpec = asRecord(
+	asRecord(schema.$defs, "theme-schema.$defs").colorValue,
+	"theme-schema.$defs.colorValue",
+);
+const colorTokens = Object.keys(
+	asRecord(asRecord(schemaProperties.colors, "theme-schema.properties.colors").properties, "colors.properties"),
+);
+const exportTokens = Object.keys(
+	asRecord(asRecord(schemaProperties.export, "theme-schema.properties.export").properties, "export.properties"),
+);
+const requiredTopLevel = asStringArray(schema.required, "theme-schema.required");
+const appearances = asStringArray(
+	asRecord(schemaProperties.appearance, "theme-schema.properties.appearance").enum,
+	"theme-schema.properties.appearance.enum",
+);
+const colorValueBranches = (Array.isArray(colorValueSpec.oneOf) ? colorValueSpec.oneOf : []).map((branch, index) =>
+	asRecord(branch, `theme-schema.$defs.colorValue.oneOf[${index}]`),
+);
+
+/** Spec: theme-schema.json $defs.colorValue — a string (#RGB/#RRGGBB, OKLCH, OKHSL, var name, ""), or a 0-255 index. */
+function isColorValue(value: unknown): boolean {
+	return colorValueBranches.some((branch) => {
+		if (branch.type === "string") return typeof value === "string";
+		if (branch.type !== "integer" || typeof value !== "number" || !Number.isInteger(value)) return false;
+		const minimum = typeof branch.minimum === "number" ? branch.minimum : Number.NEGATIVE_INFINITY;
+		const maximum = typeof branch.maximum === "number" ? branch.maximum : Number.POSITIVE_INFINITY;
+		return value >= minimum && value <= maximum;
+	});
+}
+
+interface Theme {
+	readonly label: string;
+	readonly doc: Record<string, unknown>;
+	readonly colors: Record<string, unknown>;
+	readonly vars: Record<string, unknown>;
+}
+
+function readTheme(file: string): Theme {
+	const doc = asRecord(readJson(fileURLToPath(new URL(file, import.meta.url))), file);
+	return {
+		label: file,
+		doc,
+		colors: asRecord(doc.colors, `${file}.colors`),
+		vars: doc.vars === undefined ? {} : asRecord(doc.vars, `${file}.vars`),
+	};
+}
+
+/** Host literal grammar (theme.js resolveVarRefs): "#…", "", a palette index, okhsl()/oklch() — anything else names a var. */
+function resolveColor(theme: Theme, value: unknown): unknown {
+	if (typeof value === "string" && value !== "" && !value.startsWith("#") && !COLOR_FUNCTION.test(value)) {
+		return theme.vars[value];
+	}
+	return value;
+}
+
+function hexOf(theme: Theme, value: unknown, label: string): string {
+	const resolved = resolveColor(theme, value);
+	if (typeof resolved !== "string" || !HEX_COLOR.test(resolved)) {
+		throw new Error(`${theme.label}.${label}: expected a #rrggbb color, got ${JSON.stringify(resolved)}`);
+	}
+	return resolved;
+}
+
+function exportColor(theme: Theme, key: string): unknown {
+	return asRecord(theme.doc.export, `${theme.label}.export`)[key];
+}
+
+function relativeLuminance(hex: string): number {
+	const rgb = Number.parseInt(hex.slice(1), 16);
+	const channel = (byte: number): number => {
+		const ratio = byte / 255;
+		return ratio <= 0.04045 ? ratio / 12.92 : ((ratio + 0.055) / 1.055) ** 2.4;
+	};
+	return 0.2126 * channel((rgb >> 16) & 0xff) + 0.7152 * channel((rgb >> 8) & 0xff) + 0.0722 * channel(rgb & 0xff);
+}
+
+function contrastRatio(a: string, b: string): number {
+	const lighter = Math.max(relativeLuminance(a), relativeLuminance(b));
+	const darker = Math.min(relativeLuminance(a), relativeLuminance(b));
+	return (lighter + 0.05) / (darker + 0.05);
+}
+
+describe("host theme definitions", () => {
+	for (const theme of THEME_FILE_NAMES.map(readTheme)) {
+		test(`${theme.label} validates against the host theme schema`, () => {
+			// spec: schema requires {name, colors}; name matches ^[^/]+$; appearance ∈ {dark, light}; no key outside
+			//   properties; colors carries the schema's own 56 token names, each a $defs.colorValue.
+			// fails_when: the host would reject the file — a missing/extra/mistyped token, an unknown key, a bad name or appearance.
+			for (const key of requiredTopLevel) {
+				expect(Object.hasOwn(theme.doc, key), `missing top-level "${key}"`).toBe(true);
+			}
+			const schemaTopLevel = new Set(Object.keys(schemaProperties));
+			expect(Object.keys(theme.doc).filter((key) => !schemaTopLevel.has(key))).toEqual([]);
+			expect(asString(theme.doc.name, "name")).not.toContain("/");
+			expect(appearances).toContain(theme.doc.appearance);
+
+			expect(colorTokens).toHaveLength(56);
+			expect(Object.keys(theme.colors).sort()).toEqual([...colorTokens].sort());
+			for (const token of colorTokens) {
+				expect(isColorValue(theme.colors[token]), `${theme.label}.colors.${token}`).toBe(true);
+			}
+			for (const [name, value] of Object.entries(theme.vars)) {
+				expect(isColorValue(value), `${theme.label}.vars.${name}`).toBe(true);
+			}
+			const exportSection = Object.entries(asRecord(theme.doc.export, `${theme.label}.export`));
+			expect(exportSection.map(([key]) => key).filter((key) => !exportTokens.includes(key))).toEqual([]);
+			for (const [key, value] of exportSection) {
+				expect(isColorValue(value), `${theme.label}.export.${key}`).toBe(true);
+			}
+		});
+
+		test(`${theme.label} resolves every color through its vars`, () => {
+			// spec: each value is a form the host parses (#rrggbb / "" / 0-255 / okhsl|oklch) or the name of a declared var;
+			//   the host throws "Variable reference not found" for an undeclared name.
+			// fails_when: a token or export color names a var that does not exist.
+			for (const token of colorTokens) {
+				hexOf(theme, theme.colors[token], token);
+			}
+			for (const token of EXPORT_TOKENS) {
+				hexOf(theme, exportColor(theme, token), `export.${token}`);
+			}
+			const referenced = new Set<string>();
+			const collect = (value: unknown): void => {
+				if (typeof value === "string" && value !== "" && !value.startsWith("#") && !COLOR_FUNCTION.test(value)) {
+					referenced.add(value);
+					expect(Object.hasOwn(theme.vars, value), `undeclared var "${value}"`).toBe(true);
+				}
+			};
+			for (const token of colorTokens) collect(theme.colors[token]);
+			for (const token of EXPORT_TOKENS) collect(exportColor(theme, token));
+			expect(Object.keys(theme.vars).filter((name) => !referenced.has(name))).toEqual([]);
+		});
+
+		test(`${theme.label} is dark with readable text on every background`, () => {
+			// spec: export.pageBg is the page the theme assumes; text > muted > dim in contrast against it, and text stays
+			//   legible on every *Bg token the renderer draws content over.
+			// fails_when: a light page background, or a foreground that vanishes against the page or a message/tool background.
+			const page = hexOf(theme, exportColor(theme, "pageBg"), "export.pageBg");
+			expect(relativeLuminance(page)).toBeLessThan(0.1);
+
+			const text = hexOf(theme, theme.colors.text, "text");
+			const onPage = contrastRatio(text, page);
+			const onMuted = contrastRatio(hexOf(theme, theme.colors.muted, "muted"), page);
+			const onDim = contrastRatio(hexOf(theme, theme.colors.dim, "dim"), page);
+			expect(onPage).toBeGreaterThanOrEqual(4.5);
+			expect(onMuted).toBeGreaterThanOrEqual(3);
+			expect(onDim).toBeGreaterThanOrEqual(1.5);
+			expect(onPage).toBeGreaterThan(onMuted);
+			expect(onMuted).toBeGreaterThan(onDim);
+
+			for (const token of TEXT_BACKGROUND_TOKENS) {
+				const background = hexOf(theme, theme.colors[token], token);
+				expect(contrastRatio(text, background), `text on ${token}`).toBeGreaterThanOrEqual(3);
+			}
+		});
+
+		test(`${theme.label} steps its thinking tiers monotonically`, () => {
+			// spec: the renderer maps thinking level to a border color; off → max must read brighter tier by tier.
+			// fails_when: a lower tier renders brighter than a higher one, two tiers collapse to one color, or the ladder
+			//   fails to span the range.
+			const tierColors = THINKING_TOKENS.map((token) => hexOf(theme, theme.colors[token], token));
+			expect(new Set(tierColors).size).toBe(THINKING_TOKENS.length);
+			const luminances = tierColors.map(relativeLuminance);
+			const steps = luminances.slice(1).map((luminance, index) => luminance - (luminances[index] ?? 0));
+			expect(steps.every((step) => step > 0)).toBe(true);
+			expect(Math.max(...luminances) - Math.min(...luminances)).toBeGreaterThan(0.2);
+		});
+	}
+
+	test("the two themes are distinct dark palettes", () => {
+		// spec: dracula-soft and one-dark are independent community palettes — no shared token value, different page background.
+		// fails_when: one file is a copy of the other, so the theme list ships the same look twice.
+		const first = readTheme("dracula-soft.json");
+		const second = readTheme("one-dark.json");
+		const shared = colorTokens.filter(
+			(token) => hexOf(first, first.colors[token], token) === hexOf(second, second.colors[token], token),
+		);
+		expect(shared).toEqual([]);
+		expect(first.doc.appearance).toBe(second.doc.appearance);
+		expect(exportColor(first, "pageBg")).not.toBe(exportColor(second, "pageBg"));
+	});
+});