@xynogen/pix-pretty 1.7.20 → 1.7.22

package/README.md

@@ -71,17 +71,23 @@ Configuration is read from **`~/.pi/agent/pix.json`** (the unified config file h
 ```jsonc
 {
   "pretty": {
-    "syntaxTheme": "monokai",       // syntax-highlight theme
     "icons": "nerd",          // nerd | unicode | ascii
-    "maxPreviewLines": 50,
-    "diffColors": true
+    "maxPreviewLines": 80,
+    "maxRenderLines": 150,
+    "maxHighlightChars": 80000,
+    "cacheLimit": 128,
+    "diff": {
+      "splitMinWidth": 150,
+      "splitMinCodeWidth": 60
+    }
   }
 }
 ```
 
+Syntax highlighting, diffs, and tool surfaces use the active Pi theme. Color overrides do not live in `pix.json`.
+
 ### Environment Variables (override `pix.json`)
 
-- `PRETTY_THEME` — color theme for syntax highlighting
 - `PRETTY_MAX_HL_CHARS` — max characters to highlight (default: 80000)
 - `PRETTY_MAX_PREVIEW_LINES` — max lines in preview output
 - `PRETTY_CACHE_LIMIT` — FFF cache size limit

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xynogen/pix-pretty",
-	"version": "1.7.20",
+	"version": "1.7.22",
 	"description": "Enhanced tool output rendering with syntax highlighting, file icons, tree views, diff rendering, and FFF search",
 	"type": "module",
 	"main": "src/index.ts",
@@ -58,10 +58,10 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@xynogen/pix-data": "^0.3.0",
+		"@xynogen/pix-data": "^0.3.4",
 		"cli-highlight": "^2.1.11",
 		"@ff-labs/fff-node": "^0.5.2",
-		"diff": "^7.0.0"
+		"diff": "^8.0.3"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-coding-agent": "*",

package/src/ansi.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, test } from "bun:test";
+import * as ansi from "./ansi.ts";
+import { resolveBaseBackground } from "./ansi.ts";
+
+const bg = (r: number, g: number, b: number) => `\x1b[48;2;${r};${g};${b}m`;
+
+describe("themed tool surfaces", () => {
+	test("uses semantic success and error backgrounds from the active theme", () => {
+		resolveBaseBackground({
+			getBgAnsi: (key) => {
+				if (key === "toolSuccessBg") return bg(10, 20, 30);
+				if (key === "toolErrorBg") return bg(40, 50, 60);
+				return "";
+			},
+		});
+		expect(ansi.BG_BASE).toBe(bg(10, 20, 30));
+		expect(ansi.BG_ERROR).toBe(bg(40, 50, 60));
+		expect(ansi.RST).toContain(bg(10, 20, 30));
+	});
+
+	test("resets stale theme backgrounds when no raw theme accessor exists", () => {
+		resolveBaseBackground(undefined);
+		expect(ansi.BG_BASE).toBe("\x1b[49m");
+		expect(ansi.BG_ERROR).toBe("\x1b[49m");
+		expect(ansi.RST).toBe("\x1b[0m");
+	});
+});

package/src/ansi.ts

@@ -34,9 +34,19 @@ function getThemeBgAnsi(theme: BgTheme, key: string): string | null {
 /** Read themed tool backgrounds and update BG_BASE / BG_ERROR + RST.
  *  Recompute on each render so runtime theme changes are respected. */
 export function resolveBaseBackground(theme: BgTheme | null | undefined): void {
-	if (!theme?.getBgAnsi) return;
+	if (!theme?.getBgAnsi) {
+		BG_BASE = BG_DEFAULT;
+		BG_ERROR = BG_DEFAULT;
+		RST = "\x1b[0m";
+		return;
+	}
 
-	BG_BASE = getThemeBgAnsi(theme, "toolBg") ?? getThemeBgAnsi(theme, "background") ?? BG_DEFAULT;
+	BG_BASE =
+		getThemeBgAnsi(theme, "toolSuccessBg") ??
+		getThemeBgAnsi(theme, "toolPendingBg") ??
+		getThemeBgAnsi(theme, "toolBg") ??
+		getThemeBgAnsi(theme, "background") ??
+		BG_DEFAULT;
 	BG_ERROR = getThemeBgAnsi(theme, "toolErrorBg") ?? BG_BASE;
 	RST = `\x1b[0m${BG_BASE}`;
 }

package/src/dependency-security.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "bun:test";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
+const repoRoot = dirname(dirname(packageRoot));
+
+interface PackageManifest {
+	dependencies?: Record<string, string>;
+	overrides?: Record<string, string>;
+}
+
+function readManifest(path: string): PackageManifest {
+	try {
+		return JSON.parse(readFileSync(path, "utf8")) as PackageManifest;
+	} catch (cause) {
+		throw new Error(`Unable to read package manifest: ${path}`, { cause });
+	}
+}
+
+describe("dependency security floors", () => {
+	it("uses a jsdiff release without GHSA-73rr-hh4g-fpgx", () => {
+		const manifest = readManifest(join(packageRoot, "package.json"));
+		expect(manifest.dependencies?.diff).toBe("^8.0.3");
+	});
+
+	it("pins protobufjs above GHSA-j3f2-48v5-ccww", () => {
+		const manifest = readManifest(join(repoRoot, "package.json"));
+		expect(manifest.overrides?.protobufjs).toBe("7.6.5");
+	});
+});

package/src/diff-render.ts

@@ -14,7 +14,7 @@ import { BG_BASE, BOLD, FG_DIM, FG_LNUM, FG_RULE, RST } from "./ansi.js";
 import { MAX_HL_CHARS, MAX_RENDER_LINES, WORD_DIFF_MIN_SIM } from "./config.js";
 import type { DiffLine, ParsedDiff } from "./diff.js";
 import { hlBlock } from "./highlight.js";
-import type { BundledLanguage } from "./types.js";
+import type { BundledLanguage, FgTheme } from "./types.js";
 import { termW as utilsTermW } from "./utils.js";
 
 // ---------------------------------------------------------------------------
@@ -26,59 +26,22 @@ function envInt(name: string, fallback: number): number {
 	return Number.isFinite(v) ? v : fallback;
 }
 
-function envFg(name: string, fallback: string): string {
-	const hex = process.env[name];
-	if (!hex || !/^#[0-9a-fA-F]{6}$/.test(hex)) return fallback;
-	const r = Number.parseInt(hex.slice(1, 3), 16);
-	const g = Number.parseInt(hex.slice(3, 5), 16);
-	const b = Number.parseInt(hex.slice(5, 7), 16);
-	return `\x1b[38;2;${r};${g};${b}m`;
-}
-
-function envBg(name: string, fallback: string): string {
-	const hex = process.env[name];
-	if (!hex || !/^#[0-9a-fA-F]{6}$/.test(hex)) return fallback;
-	const r = Number.parseInt(hex.slice(1, 3), 16);
-	const g = Number.parseInt(hex.slice(3, 5), 16);
-	const b = Number.parseInt(hex.slice(5, 7), 16);
-	return `\x1b[48;2;${r};${g};${b}m`;
-}
-
 // ---------------------------------------------------------------------------
-// Diff-specific ANSI (override via env → pix.json → hardcoded)
+// Diff-specific ANSI. Theme-backed colors are resolved per render; these
+// constants are readable fallbacks for hosts that do not expose raw theme ANSI.
 // ---------------------------------------------------------------------------
 
 const DIM = "\x1b[2m";
-
-function hexToBg(hex: string): string {
-	if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return "";
-	const r = Number.parseInt(hex.slice(1, 3), 16);
-	const g = Number.parseInt(hex.slice(3, 5), 16);
-	const b = Number.parseInt(hex.slice(5, 7), 16);
-	return `\x1b[48;2;${r};${g};${b}m`;
-}
-
-function hexToFg(hex: string): string {
-	if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return "";
-	const r = Number.parseInt(hex.slice(1, 3), 16);
-	const g = Number.parseInt(hex.slice(3, 5), 16);
-	const b = Number.parseInt(hex.slice(5, 7), 16);
-	return `\x1b[38;2;${r};${g};${b}m`;
-}
-
 const dc = pixConfig().pretty.diff;
 
-// Subtle diff backgrounds — muted tones to let syntax fg shine through.
-// Precedence: env → pix.json → hardcoded default
-const BG_ADD = envBg("DIFF_BG_ADD", hexToBg(dc.bgAdd) || "\x1b[48;2;22;38;32m");
-const BG_DEL = envBg("DIFF_BG_DEL", hexToBg(dc.bgDel) || "\x1b[48;2;45;25;25m");
-const BG_ADD_W = envBg("DIFF_BG_ADD_HL", hexToBg(dc.bgAddHighlight) || "\x1b[48;2;35;75;50m");
-const BG_DEL_W = envBg("DIFF_BG_DEL_HL", hexToBg(dc.bgDelHighlight) || "\x1b[48;2;80;35;35m");
-const BG_GUTTER_ADD = envBg("DIFF_BG_GUTTER_ADD", hexToBg(dc.bgGutterAdd) || "\x1b[48;2;18;32;26m");
-const BG_GUTTER_DEL = envBg("DIFF_BG_GUTTER_DEL", hexToBg(dc.bgGutterDel) || "\x1b[48;2;38;22;22m");
-
-const FG_ADD = envFg("DIFF_FG_ADD", hexToFg(dc.fgAdd) || "\x1b[38;2;100;180;120m");
-const FG_DEL = envFg("DIFF_FG_DEL", hexToFg(dc.fgDel) || "\x1b[38;2;200;100;100m");
+const FALLBACK_BG_ADD = "\x1b[48;2;22;38;32m";
+const FALLBACK_BG_DEL = "\x1b[48;2;45;25;25m";
+const FALLBACK_BG_ADD_W = "\x1b[48;2;35;75;50m";
+const FALLBACK_BG_DEL_W = "\x1b[48;2;80;35;35m";
+const FALLBACK_BG_GUTTER_ADD = "\x1b[48;2;18;32;26m";
+const FALLBACK_BG_GUTTER_DEL = "\x1b[48;2;38;22;22m";
+const FG_ADD = "\x1b[38;2;100;180;120m";
+const FG_DEL = "\x1b[38;2;200;100;100m";
 const FG_STRIPE = "\x1b[38;2;40;40;40m"; // diagonal stripes on filler cells
 
 const BORDER_BAR = "▌";
@@ -113,12 +76,26 @@ export interface DiffColors {
 	fgAdd: string;
 	fgDel: string;
 	fgCtx: string;
+	/** Active Pi theme, forwarded to syntax highlighting. */
+	theme?: FgTheme;
+	bgAdd: string;
+	bgDel: string;
+	bgAddHighlight: string;
+	bgDelHighlight: string;
+	bgGutterAdd: string;
+	bgGutterDel: string;
 }
 
 export const DEFAULT_DIFF_COLORS: DiffColors = {
 	fgAdd: FG_ADD,
 	fgDel: FG_DEL,
 	fgCtx: FG_DIM,
+	bgAdd: FALLBACK_BG_ADD,
+	bgDel: FALLBACK_BG_DEL,
+	bgAddHighlight: FALLBACK_BG_ADD_W,
+	bgDelHighlight: FALLBACK_BG_DEL_W,
+	bgGutterAdd: FALLBACK_BG_GUTTER_ADD,
+	bgGutterDel: FALLBACK_BG_GUTTER_DEL,
 };
 
 // --- contrast helpers -------------------------------------------------------
@@ -171,23 +148,53 @@ function ensureContrast(fg: string, bgSeq: string, min = 3): string {
  *
  *  Theme hue is preserved, but each add/del fg is contrast-checked against the
  *  gutter bg it is painted on and lifted if it would render too dark to read. */
-export function resolveDiffColors(theme?: { getFgAnsi?: (key: string) => string }): DiffColors {
-	if (!theme?.getFgAnsi) return DEFAULT_DIFF_COLORS;
+type DiffTheme = {
+	fg?: FgTheme["fg"];
+	getFgAnsi?: (key: string) => string;
+	getBgAnsi?: (key: string) => string;
+};
+
+function themeFg(theme: DiffTheme, key: string, fallback: string): string {
 	try {
-		return {
-			fgAdd: ensureContrast(theme.getFgAnsi("toolDiffAdded") || FG_ADD, BG_GUTTER_ADD),
-			fgDel: ensureContrast(theme.getFgAnsi("toolDiffRemoved") || FG_DEL, BG_GUTTER_DEL),
-			fgCtx: theme.getFgAnsi("toolDiffContext") || FG_DIM,
-		};
+		return theme.getFgAnsi?.(key) || fallback;
 	} catch {
-		return DEFAULT_DIFF_COLORS;
+		return fallback;
 	}
 }
 
+function tintedBackground(fg: string, strength: number, fallback: string): string {
+	const rgb = parseAnsiRgb(fg, "38");
+	if (!rgb) return fallback;
+	const [r, g, b] = rgb.map((channel) => Math.round(channel * strength)) as Rgb;
+	return `\x1b[48;2;${r};${g};${b}m`;
+}
+
+export function resolveDiffColors(theme?: DiffTheme): DiffColors {
+	if (!theme) return DEFAULT_DIFF_COLORS;
+	const rawFgAdd = themeFg(theme, "toolDiffAdded", FG_ADD);
+	const rawFgDel = themeFg(theme, "toolDiffRemoved", FG_DEL);
+	const bgAdd = tintedBackground(rawFgAdd, 0.2, FALLBACK_BG_ADD);
+	const bgDel = tintedBackground(rawFgDel, 0.2, FALLBACK_BG_DEL);
+	const bgGutterAdd = tintedBackground(rawFgAdd, 0.15, FALLBACK_BG_GUTTER_ADD);
+	const bgGutterDel = tintedBackground(rawFgDel, 0.15, FALLBACK_BG_GUTTER_DEL);
+	return {
+		fgAdd: ensureContrast(rawFgAdd, bgGutterAdd),
+		fgDel: ensureContrast(rawFgDel, bgGutterDel),
+		fgCtx: themeFg(theme, "toolDiffContext", FG_DIM),
+		theme: typeof theme.fg === "function" ? (theme as FgTheme) : undefined,
+		bgAdd,
+		bgDel,
+		bgAddHighlight: tintedBackground(rawFgAdd, 0.35, FALLBACK_BG_ADD_W),
+		bgDelHighlight: tintedBackground(rawFgDel, 0.35, FALLBACK_BG_DEL_W),
+		bgGutterAdd,
+		bgGutterDel,
+	};
+}
+
 /** Stable cache key for the resolved diff theme colors. */
-export function diffThemeCacheKey(theme?: { getFgAnsi?: (key: string) => string }): string {
-	const c = resolveDiffColors(theme);
-	return `${c.fgAdd}|${c.fgDel}|${c.fgCtx}|${BG_BASE}`;
+export function diffThemeCacheKey(theme?: DiffTheme): string {
+	const { theme: _theme, ...colors } = resolveDiffColors(theme);
+	return `${Object.values(colors).join("|")}|${BG_BASE}`;
 }
 
 // ---------------------------------------------------------------------------
@@ -371,12 +378,27 @@ function rule(w: number): string {
 	return `${BG_BASE}${FG_RULE}${"─".repeat(w)}${RST}`;
 }
 
-/** Compact "+a -d" summary string (or "no changes"). */
+/** Compact plain "+a -d" summary for persisted renderer details. */
 export function summarize(a: number, d: number): string {
-	const p: string[] = [];
-	if (a > 0) p.push(`${FG_ADD}+${a}${RST}`);
-	if (d > 0) p.push(`${FG_DEL}-${d}${RST}`);
-	return p.length ? p.join(" ") : `${FG_DIM}no changes${RST}`;
+	const parts: string[] = [];
+	if (a > 0) parts.push(`+${a}`);
+	if (d > 0) parts.push(`-${d}`);
+	return parts.length ? parts.join(" ") : "no changes";
+}
+
+/** Apply active Pi theme colors to a plain diff summary at render time. */
+export function renderDiffSummary(summary: string, theme: FgTheme): string {
+	if (summary === "no changes") return theme.fg("toolDiffContext", summary);
+	return summary
+		.split(" ")
+		.map((part) =>
+			part.startsWith("+")
+				? theme.fg("toolDiffAdded", part)
+				: part.startsWith("-")
+					? theme.fg("toolDiffRemoved", part)
+					: part,
+		)
+		.join(" ");
 }
 
 // ---------------------------------------------------------------------------
@@ -467,13 +489,17 @@ function injectBg(
 }
 
 /** Simple word diff (no syntax hl) — fallback when highlighting is unavailable. */
-function plainWordDiff(oldText: string, newText: string): { old: string; new: string } {
+function plainWordDiff(
+	oldText: string,
+	newText: string,
+	dc: DiffColors,
+): { old: string; new: string } {
 	const parts = Diff.diffWords(oldText, newText);
 	let o = "";
 	let n = "";
 	for (const p of parts) {
-		if (p.removed) o += `${BG_DEL_W}${p.value}${RST}${BG_DEL}`;
-		else if (p.added) n += `${BG_ADD_W}${p.value}${RST}${BG_ADD}`;
+		if (p.removed) o += `${dc.bgDelHighlight}${p.value}${RST}${dc.bgDel}`;
+		else if (p.added) n += `${dc.bgAddHighlight}${p.value}${RST}${dc.bgAdd}`;
 		else {
 			o += p.value;
 			n += p.value;
@@ -548,8 +574,8 @@ export async function renderUnified(
 	}
 	const [oldHL, newHL] = canHL
 		? await Promise.all([
-				hlBlock(oldSrc.join("\n"), language),
-				hlBlock(newSrc.join("\n"), language),
+				hlBlock(oldSrc.join("\n"), language, dc.theme),
+				hlBlock(newSrc.join("\n"), language, dc.theme),
 			])
 		: [oldSrc, newSrc];
 
@@ -634,42 +660,42 @@ export async function renderUnified(
 		if (isPaired && wdBalanced && wd.similarity >= WORD_DIFF_MIN_SIM && canHL) {
 			const del0 = at(dels, 0);
 			const add0 = at(adds, 0);
-			const delBody = injectBg(del0.hl, wd.oldRanges, BG_DEL, BG_DEL_W);
-			const addBody = injectBg(add0.hl, wd.newRanges, BG_ADD, BG_ADD_W);
-			emitRow(del0.l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, delBody, BG_DEL);
-			emitRow(add0.l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, addBody, BG_ADD);
+			const delBody = injectBg(del0.hl, wd.oldRanges, dc.bgDel, dc.bgDelHighlight);
+			const addBody = injectBg(add0.hl, wd.newRanges, dc.bgAdd, dc.bgAddHighlight);
+			emitRow(del0.l.oldNum, "-", dc.bgGutterDel, `${dc.fgDel}${BOLD}`, delBody, dc.bgDel);
+			emitRow(add0.l.newNum, "+", dc.bgGutterAdd, `${dc.fgAdd}${BOLD}`, addBody, dc.bgAdd);
 			continue;
 		}
 		if (isPaired && wdBalanced && wd.similarity >= WORD_DIFF_MIN_SIM && !canHL) {
 			const del0 = at(dels, 0);
 			const add0 = at(adds, 0);
-			const pwd = plainWordDiff(del0.l.content, add0.l.content);
+			const pwd = plainWordDiff(del0.l.content, add0.l.content, dc);
 			emitRow(
 				del0.l.oldNum,
 				"-",
-				BG_GUTTER_DEL,
+				dc.bgGutterDel,
 				`${dc.fgDel}${BOLD}`,
-				`${BG_DEL}${pwd.old}`,
-				BG_DEL,
+				`${dc.bgDel}${pwd.old}`,
+				dc.bgDel,
 			);
 			emitRow(
 				add0.l.newNum,
 				"+",
-				BG_GUTTER_ADD,
+				dc.bgGutterAdd,
 				`${dc.fgAdd}${BOLD}`,
-				`${BG_ADD}${pwd.new}`,
-				BG_ADD,
+				`${dc.bgAdd}${pwd.new}`,
+				dc.bgAdd,
 			);
 			continue;
 		}
 
 		for (const d of dels) {
-			const body = canHL ? `${BG_DEL}${d.hl}` : `${BG_DEL}${d.l.content}`;
-			emitRow(d.l.oldNum, "-", BG_GUTTER_DEL, `${dc.fgDel}${BOLD}`, body, BG_DEL);
+			const body = canHL ? `${dc.bgDel}${d.hl}` : `${dc.bgDel}${d.l.content}`;
+			emitRow(d.l.oldNum, "-", dc.bgGutterDel, `${dc.fgDel}${BOLD}`, body, dc.bgDel);
 		}
 		for (const a of adds) {
-			const body = canHL ? `${BG_ADD}${a.hl}` : `${BG_ADD}${a.l.content}`;
-			emitRow(a.l.newNum, "+", BG_GUTTER_ADD, `${dc.fgAdd}${BOLD}`, body, BG_ADD);
+			const body = canHL ? `${dc.bgAdd}${a.hl}` : `${dc.bgAdd}${a.l.content}`;
+			emitRow(a.l.newNum, "+", dc.bgGutterAdd, `${dc.fgAdd}${BOLD}`, body, dc.bgAdd);
 		}
 	}
 
@@ -740,8 +766,8 @@ export async function renderSplit(
 	}
 	const [leftHL, rightHL] = canHL
 		? await Promise.all([
-				hlBlock(leftSrc.join("\n"), language),
-				hlBlock(rightSrc.join("\n"), language),
+				hlBlock(leftSrc.join("\n"), language, dc.theme),
+				hlBlock(rightSrc.join("\n"), language, dc.theme),
 			])
 		: [leftSrc, rightSrc];
 
@@ -776,8 +802,8 @@ export async function renderSplit(
 
 		const isDel = line.type === "del";
 		const isAdd = line.type === "add";
-		const gBg = isDel ? BG_GUTTER_DEL : isAdd ? BG_GUTTER_ADD : BG_BASE;
-		const cBg = isDel ? BG_DEL : isAdd ? BG_ADD : BG_BASE;
+		const gBg = isDel ? dc.bgGutterDel : isAdd ? dc.bgGutterAdd : BG_BASE;
+		const cBg = isDel ? dc.bgDel : isAdd ? dc.bgAdd : BG_BASE;
 		const sFg = isDel ? dc.fgDel : isAdd ? dc.fgAdd : dc.fgCtx;
 		const sign = isDel ? "-" : isAdd ? "+" : " ";
 		const num = isDel
@@ -793,7 +819,7 @@ export async function renderSplit(
 
 		let body: string;
 		if (ranges && ranges.length > 0) {
-			body = injectBg(hl, ranges, cBg, isDel ? BG_DEL_W : BG_ADD_W);
+			body = injectBg(hl, ranges, cBg, isDel ? dc.bgDelHighlight : dc.bgAddHighlight);
 		} else if (isDel || isAdd) {
 			body = `${cBg}${hl}`;
 		} else {
@@ -828,7 +854,7 @@ export async function renderSplit(
 			lResult = halfBuild(leftLine, lhl, wd.oldRanges, "left");
 			rResult = halfBuild(rightLine, rhl, wd.newRanges, "right");
 		} else if (paired && wd && wd.similarity >= WORD_DIFF_MIN_SIM && !canHL) {
-			const pwd = plainWordDiff(leftLine.content, rightLine.content);
+			const pwd = plainWordDiff(leftLine.content, rightLine.content, dc);
 			lI++;
 			rI++;
 			lResult = halfBuild(leftLine, pwd.old, null, "left");

package/src/diff.test.ts

@@ -1,10 +1,45 @@
 import { describe, expect, it } from "bun:test";
-
 import { parseDiff } from "./diff.js";
+import { diffThemeCacheKey, renderDiffSummary, resolveDiffColors } from "./diff-render.js";
 
 const OLD = "line1\nline2\nline3";
 const NEW = "line1\nCHANGED\nline3";
 
+describe("theme-derived diff rendering", () => {
+	const theme = {
+		fg: (key: string, text: string) => `<${key}>${text}</${key}>`,
+		getFgAnsi: (key: string) => {
+			if (key === "toolDiffAdded") return "\x1b[38;2;120;210;150m";
+			if (key === "toolDiffRemoved") return "\x1b[38;2;230;120;130m";
+			if (key === "toolDiffContext") return "\x1b[38;2;130;140;150m";
+			return "";
+		},
+	};
+
+	it("derives foregrounds and tint backgrounds from semantic theme tokens", () => {
+		const colors = resolveDiffColors(theme);
+		expect(colors.fgAdd).toBe("\x1b[38;2;120;210;150m");
+		expect(colors.fgDel).toBe("\x1b[38;2;230;120;130m");
+		expect(colors.fgCtx).toBe("\x1b[38;2;130;140;150m");
+		expect(colors.bgAdd).toBe("\x1b[48;2;24;42;30m");
+		expect(colors.bgDel).toBe("\x1b[48;2;46;24;26m");
+	});
+
+	it("includes semantic theme colors in cache identity", () => {
+		const changed = { ...theme, getFgAnsi: () => "\x1b[38;2;1;2;3m" };
+		expect(diffThemeCacheKey(theme)).not.toBe(diffThemeCacheKey(changed));
+	});
+
+	it("colors persisted plain summaries only at render time", () => {
+		expect(renderDiffSummary("+3 -2", theme)).toBe(
+			"<toolDiffAdded>+3</toolDiffAdded> <toolDiffRemoved>-2</toolDiffRemoved>",
+		);
+		expect(renderDiffSummary("no changes", theme)).toBe(
+			"<toolDiffContext>no changes</toolDiffContext>",
+		);
+	});
+});
+
 describe("parseDiff baseLine", () => {
 	it("is snippet-relative when baseLine omitted (default 0)", () => {
 		const { lines } = parseDiff(OLD, NEW);

package/src/gate-overlay.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, test } from "bun:test";
+import { describe, expect, jest, test } from "bun:test";
 import { type OverlayUI, showOverlay } from "./gate-overlay.ts";
 
 // ── Mock host ─────────────────────────────────────────────────────────────────
@@ -240,28 +240,40 @@ function makeTimerUI(onReady?: (comp: Wired) => void): OverlayUI {
 
 describe("showOverlay — auto-deny timer", () => {
 	test("expires to timeout when left untouched", async () => {
-		const result = await showOverlay(makeTimerUI(), {
-			mode: "confirm",
-			title: "T",
-			timeoutMs: 1000, // ceil → 1s, fires on first tick
-		});
-		expect(result.action).toBe("timeout");
+		jest.useFakeTimers();
+		try {
+			const pending = showOverlay(makeTimerUI(), {
+				mode: "confirm",
+				title: "T",
+				timeoutMs: 1000, // ceil → 1s, fires on first tick
+			});
+			jest.advanceTimersByTime(1000); // fire the auto-deny tick without a real wait
+			const result = await pending;
+			expect(result.action).toBe("timeout");
+		} finally {
+			jest.useRealTimers();
+		}
 	});
 
 	test("first keypress cancels the timer (no auto-deny)", async () => {
-		let live: Wired | undefined;
-		const pending = showOverlay(
-			makeTimerUI((comp) => {
-				live = comp;
-				comp.handleInput(DOWN); // any key — cancels the dead-man's switch
-			}),
-			{ mode: "confirm", title: "T", timeoutMs: 1000 },
-		);
-		// Wait well past the 1s window. A live timer would have resolved "timeout";
-		// since the keypress cancelled it, the promise is still pending here.
-		await new Promise((r) => setTimeout(r, 1300));
-		live?.handleInput(ENTER); // now deny explicitly
-		const result = await pending;
-		expect(result.action).toBe("denied");
+		jest.useFakeTimers();
+		try {
+			let live: Wired | undefined;
+			const pending = showOverlay(
+				makeTimerUI((comp) => {
+					live = comp;
+					comp.handleInput(DOWN); // any key — cancels the dead-man's switch
+				}),
+				{ mode: "confirm", title: "T", timeoutMs: 1000 },
+			);
+			// Advance well past the 1s window. A live timer would have resolved
+			// "timeout"; the keypress cancelled it, so the promise stays pending.
+			jest.advanceTimersByTime(1300);
+			live?.handleInput(ENTER); // now deny explicitly
+			const result = await pending;
+			expect(result.action).toBe("denied");
+		} finally {
+			jest.useRealTimers();
+		}
 	});
 });

package/src/highlight.test.ts

@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { _cache, clearHighlightCache, hlBlock } from "./highlight.ts";
+
+function theme(color: string) {
+	return {
+		fg: (key: string, text: string) => `\x1b[38;2;${color}m${key}:${text}\x1b[0m`,
+		getFgAnsi: (key: string) => `\x1b[38;2;${color}m:${key}`,
+	};
+}
+
+describe("active-theme syntax highlighting", () => {
+	beforeEach(() => clearHighlightCache());
+
+	test("maps JSON scopes to semantic Pi syntax roles", async () => {
+		const out = (await hlBlock('{"name":"pix","count":2}', "json", theme("10;20;30"))).join("\n");
+		expect(out).toContain("syntaxVariable");
+		expect(out).toContain("syntaxString");
+		expect(out).toContain("syntaxNumber");
+	});
+
+	test("separates cached output by active theme colors", async () => {
+		await hlBlock("const value = 1", "typescript", theme("10;20;30"));
+		await hlBlock("const value = 1", "typescript", theme("30;40;50"));
+		expect(_cache.size).toBe(2);
+	});
+});

package/src/highlight.ts

@@ -1,6 +1,6 @@
 import { normalizeShikiContrast } from "./ansi.js";
 import { CACHE_LIMIT, MAX_HL_CHARS } from "./config.js";
-import type { BundledLanguage } from "./types.js";
+import type { BundledLanguage, FgTheme } from "./types.js";
 
 // Engine: cli-highlight (highlight.js-backed, synchronous ANSI output).
 //
@@ -63,6 +63,60 @@ function toHljsLang(language: BundledLanguage): string | undefined {
 	return hl.supportsLanguage(mapped) ? mapped : undefined;
 }
 
+type HighlightTheme = Record<string, (text: string) => string>;
+
+const SYNTAX_THEME_KEYS = [
+	"syntaxComment",
+	"syntaxKeyword",
+	"syntaxFunction",
+	"syntaxVariable",
+	"syntaxString",
+	"syntaxNumber",
+	"syntaxType",
+	"syntaxOperator",
+	"syntaxPunctuation",
+] as const;
+
+function highlightThemeKey(theme?: FgTheme): string {
+	if (!theme?.getFgAnsi) return "default";
+	try {
+		return SYNTAX_THEME_KEYS.map((key) => theme.getFgAnsi?.(key) ?? "").join("|");
+	} catch {
+		return "default";
+	}
+}
+
+/** Map highlight.js scopes onto the active Pi theme's semantic syntax colors. */
+function buildHighlightTheme(theme?: FgTheme): HighlightTheme | undefined {
+	if (!theme) return undefined;
+	const fg = (key: string) => (text: string) => theme.fg(key, text);
+	return {
+		keyword: fg("syntaxKeyword"),
+		built_in: fg("syntaxType"),
+		literal: fg("syntaxKeyword"),
+		number: fg("syntaxNumber"),
+		regexp: fg("syntaxString"),
+		string: fg("syntaxString"),
+		comment: fg("syntaxComment"),
+		doctag: fg("syntaxComment"),
+		meta: fg("syntaxComment"),
+		function: fg("syntaxFunction"),
+		title: fg("syntaxFunction"),
+		class: fg("syntaxType"),
+		type: fg("syntaxType"),
+		tag: fg("syntaxPunctuation"),
+		name: fg("syntaxKeyword"),
+		attr: fg("syntaxVariable"),
+		attribute: fg("syntaxVariable"),
+		variable: fg("syntaxVariable"),
+		params: fg("syntaxVariable"),
+		operator: fg("syntaxOperator"),
+		punctuation: fg("syntaxPunctuation"),
+		addition: fg("toolDiffAdded"),
+		deletion: fg("toolDiffRemoved"),
+	};
+}
+
 export const _cache = new Map<string, string[]>();
 
 function _touch(k: string, v: string[]): string[] {
@@ -81,6 +135,7 @@ function _touch(k: string, v: string[]): string[] {
 export async function hlBlock(
 	code: string,
 	language: BundledLanguage | undefined,
+	theme?: FgTheme,
 ): Promise<string[]> {
 	if (!code) return [""];
 	if (!language || code.length > MAX_HL_CHARS) return code.split("\n");
@@ -88,7 +143,7 @@ export async function hlBlock(
 	const hljsLang = toHljsLang(language);
 	if (!hljsLang) return code.split("\n");
 
-	const k = `${hljsLang}\0${code}`;
+	const k = `${hljsLang}\0${highlightThemeKey(theme)}\0${code}`;
 	const hit = _cache.get(k);
 	if (hit) return _touch(k, hit);
 
@@ -97,7 +152,11 @@ export async function hlBlock(
 
 	try {
 		const ansi = normalizeShikiContrast(
-			hl.highlight(code, { language: hljsLang, ignoreIllegals: true }),
+			hl.highlight(code, {
+				language: hljsLang,
+				ignoreIllegals: true,
+				theme: buildHighlightTheme(theme),
+			}),
 		);
 		const out = (ansi.endsWith("\n") ? ansi.slice(0, -1) : ansi).split("\n");
 		return _touch(k, out);

package/src/icons.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test";
+import { dirIcon, fileIcon } from "./icons.ts";
+
+const theme = {
+	fg: (key: string, text: string) => `<${key}>${text}</${key}>`,
+};
+
+describe("theme-derived file icons", () => {
+	test("uses semantic theme roles instead of embedded ANSI colors", () => {
+		expect(fileIcon("example.ts", theme)).toContain("<syntaxType>");
+		expect(fileIcon("data.json", theme)).toContain("<syntaxNumber>");
+		expect(fileIcon("unknown.zzz", theme)).toContain("<muted>");
+	});
+
+	test("themes directory icons with the active accent", () => {
+		expect(dirIcon(theme)).toContain("<accent>");
+	});
+});

package/src/icons.ts

@@ -1,120 +1,102 @@
 import { basename, extname } from "node:path";
-
-import { FG_BLUE, FG_DIM, RST } from "./ansi.js";
+import type { FgTheme } from "./types.js";
 
 const ICONS_MODE = (process.env.PRETTY_ICONS ?? "nerd").toLowerCase();
-
 const USE_ICONS = ICONS_MODE !== "none" && ICONS_MODE !== "off";
 
-// Nerd Font codepoints + ANSI color per file type
-const NF_DIR = `${FG_BLUE}\ue5ff${RST}`; // folder
-
-const NF_DEFAULT = `${FG_DIM}\uf15b${RST}`; // generic file
-
-const EXT_ICON: Record<string, string> = {
-	// TypeScript / JavaScript
-	ts: `\x1b[38;2;49;120;198m\ue628${RST}`, // blue
-	tsx: `\x1b[38;2;49;120;198m\ue7ba${RST}`, // react blue
-	js: `\x1b[38;2;241;224;90m\ue74e${RST}`, // yellow
-	jsx: `\x1b[38;2;97;218;251m\ue7ba${RST}`, // react cyan
-	mjs: `\x1b[38;2;241;224;90m\ue74e${RST}`,
-	cjs: `\x1b[38;2;241;224;90m\ue74e${RST}`,
-
-	// Systems / Backend
-	py: `\x1b[38;2;55;118;171m\ue73c${RST}`, // python blue
-	rs: `\x1b[38;2;222;165;132m\ue7a8${RST}`, // rust orange
-	go: `\x1b[38;2;0;173;216m\ue724${RST}`, // go cyan
-	java: `\x1b[38;2;204;62;68m\ue738${RST}`, // java red
-	swift: `\x1b[38;2;255;172;77m\ue755${RST}`, // swift orange
-	rb: `\x1b[38;2;204;52;45m\ue739${RST}`, // ruby red
-	kt: `\x1b[38;2;126;103;200m\ue634${RST}`, // kotlin purple
-	c: `\x1b[38;2;85;154;211m\ue61e${RST}`, // c blue
-	cpp: `\x1b[38;2;85;154;211m\ue61d${RST}`, // cpp blue
-	h: `\x1b[38;2;140;160;185m\ue61e${RST}`, // header muted
-	hpp: `\x1b[38;2;140;160;185m\ue61d${RST}`,
-	cs: `\x1b[38;2;104;33;122m\ue648${RST}`, // c# purple
-
-	// Web
-	html: `\x1b[38;2;228;77;38m\ue736${RST}`, // html orange
-	css: `\x1b[38;2;66;165;245m\ue749${RST}`, // css blue
-	scss: `\x1b[38;2;207;100;154m\ue749${RST}`, // scss pink
-	less: `\x1b[38;2;66;165;245m\ue749${RST}`,
-	vue: `\x1b[38;2;65;184;131m\ue6a0${RST}`, // vue green
-	svelte: `\x1b[38;2;255;62;0m\ue697${RST}`, // svelte red-orange
-
-	// Config / Data
-	json: `\x1b[38;2;241;224;90m\ue60b${RST}`, // json yellow
-	jsonc: `\x1b[38;2;241;224;90m\ue60b${RST}`,
-	yaml: `\x1b[38;2;160;116;196m\ue6a8${RST}`, // yaml purple
-	yml: `\x1b[38;2;160;116;196m\ue6a8${RST}`,
-	toml: `\x1b[38;2;160;116;196m\ue6b2${RST}`, // toml purple
-	xml: `\x1b[38;2;228;77;38m\ue619${RST}`, // xml orange
-	sql: `\x1b[38;2;218;218;218m\ue706${RST}`, // sql gray
-
-	// Markdown / Docs
-	md: `\x1b[38;2;66;165;245m\ue73e${RST}`, // markdown blue
-	mdx: `\x1b[38;2;66;165;245m\ue73e${RST}`,
-
-	// Shell / Scripts
-	sh: `\x1b[38;2;137;180;130m\ue795${RST}`, // shell green
-	bash: `\x1b[38;2;137;180;130m\ue795${RST}`,
-	zsh: `\x1b[38;2;137;180;130m\ue795${RST}`,
-	fish: `\x1b[38;2;137;180;130m\ue795${RST}`,
-	lua: `\x1b[38;2;81;160;207m\ue620${RST}`, // lua blue
-	php: `\x1b[38;2;137;147;186m\ue73d${RST}`, // php purple
-	dart: `\x1b[38;2;87;182;240m\ue798${RST}`, // dart blue
-
-	// Images
-	png: `\x1b[38;2;160;116;196m\uf1c5${RST}`,
-	jpg: `\x1b[38;2;160;116;196m\uf1c5${RST}`,
-	jpeg: `\x1b[38;2;160;116;196m\uf1c5${RST}`,
-	gif: `\x1b[38;2;160;116;196m\uf1c5${RST}`,
-	svg: `\x1b[38;2;255;180;50m\uf1c5${RST}`,
-	webp: `\x1b[38;2;160;116;196m\uf1c5${RST}`,
-	ico: `\x1b[38;2;160;116;196m\uf1c5${RST}`,
+interface IconSpec {
+	glyph: string;
+	color: string;
+}
 
-	// Misc
-	lock: `\x1b[38;2;130;130;130m\uf023${RST}`, // lock gray
-	env: `\x1b[38;2;241;224;90m\ue615${RST}`, // env yellow
-	graphql: `\x1b[38;2;224;51;144m\ue662${RST}`, // graphql pink
-	dockerfile: `\x1b[38;2;56;152;236m\ue7b0${RST}`,
+const FILE = "\uf15b";
+const EXT_ICON: Record<string, IconSpec> = {
+	ts: { glyph: "\ue628", color: "syntaxType" },
+	tsx: { glyph: "\ue7ba", color: "syntaxType" },
+	js: { glyph: "\ue74e", color: "syntaxNumber" },
+	jsx: { glyph: "\ue7ba", color: "syntaxVariable" },
+	mjs: { glyph: "\ue74e", color: "syntaxNumber" },
+	cjs: { glyph: "\ue74e", color: "syntaxNumber" },
+	py: { glyph: "\ue73c", color: "syntaxFunction" },
+	rs: { glyph: "\ue7a8", color: "syntaxType" },
+	go: { glyph: "\ue724", color: "syntaxVariable" },
+	java: { glyph: "\ue738", color: "syntaxKeyword" },
+	swift: { glyph: "\ue755", color: "syntaxNumber" },
+	rb: { glyph: "\ue739", color: "syntaxKeyword" },
+	kt: { glyph: "\ue634", color: "syntaxType" },
+	c: { glyph: "\ue61e", color: "syntaxFunction" },
+	cpp: { glyph: "\ue61d", color: "syntaxFunction" },
+	h: { glyph: "\ue61e", color: "muted" },
+	hpp: { glyph: "\ue61d", color: "muted" },
+	cs: { glyph: "\ue648", color: "syntaxType" },
+	html: { glyph: "\ue736", color: "syntaxKeyword" },
+	css: { glyph: "\ue749", color: "syntaxFunction" },
+	scss: { glyph: "\ue749", color: "syntaxType" },
+	less: { glyph: "\ue749", color: "syntaxFunction" },
+	vue: { glyph: "\ue6a0", color: "syntaxString" },
+	svelte: { glyph: "\ue697", color: "syntaxKeyword" },
+	json: { glyph: "\ue60b", color: "syntaxNumber" },
+	jsonc: { glyph: "\ue60b", color: "syntaxNumber" },
+	yaml: { glyph: "\ue6a8", color: "syntaxType" },
+	yml: { glyph: "\ue6a8", color: "syntaxType" },
+	toml: { glyph: "\ue6b2", color: "syntaxType" },
+	xml: { glyph: "\ue619", color: "syntaxKeyword" },
+	sql: { glyph: "\ue706", color: "text" },
+	md: { glyph: "\ue73e", color: "accent" },
+	mdx: { glyph: "\ue73e", color: "accent" },
+	sh: { glyph: "\ue795", color: "syntaxString" },
+	bash: { glyph: "\ue795", color: "syntaxString" },
+	zsh: { glyph: "\ue795", color: "syntaxString" },
+	fish: { glyph: "\ue795", color: "syntaxString" },
+	lua: { glyph: "\ue620", color: "syntaxFunction" },
+	php: { glyph: "\ue73d", color: "syntaxType" },
+	dart: { glyph: "\ue798", color: "syntaxFunction" },
+	png: { glyph: "\uf1c5", color: "syntaxType" },
+	jpg: { glyph: "\uf1c5", color: "syntaxType" },
+	jpeg: { glyph: "\uf1c5", color: "syntaxType" },
+	gif: { glyph: "\uf1c5", color: "syntaxType" },
+	svg: { glyph: "\uf1c5", color: "syntaxNumber" },
+	webp: { glyph: "\uf1c5", color: "syntaxType" },
+	ico: { glyph: "\uf1c5", color: "syntaxType" },
+	lock: { glyph: "\uf023", color: "muted" },
+	env: { glyph: "\ue615", color: "syntaxNumber" },
+	graphql: { glyph: "\ue662", color: "syntaxType" },
+	dockerfile: { glyph: "\ue7b0", color: "syntaxFunction" },
 };
 
-const NAME_ICON: Record<string, string> = {
-	"package.json": `\x1b[38;2;137;180;130m\ue71e${RST}`, // npm green
-	"package-lock.json": `\x1b[38;2;130;130;130m\ue71e${RST}`, // npm gray
-	"tsconfig.json": `\x1b[38;2;49;120;198m\ue628${RST}`, // ts blue
-	"biome.json": `\x1b[38;2;96;165;250m\ue615${RST}`, // config blue
-	".gitignore": `\x1b[38;2;222;165;132m\ue702${RST}`, // git orange
-	".git": `\x1b[38;2;222;165;132m\ue702${RST}`,
-	".env": `\x1b[38;2;241;224;90m\ue615${RST}`, // env yellow
-	".envrc": `\x1b[38;2;241;224;90m\ue615${RST}`,
-	dockerfile: `\x1b[38;2;56;152;236m\ue7b0${RST}`, // docker blue
-	makefile: `\x1b[38;2;130;130;130m\ue615${RST}`, // make gray
-	gnumakefile: `\x1b[38;2;130;130;130m\ue615${RST}`,
-	"readme.md": `\x1b[38;2;66;165;245m\ue73e${RST}`, // readme blue
-	license: `\x1b[38;2;218;218;218m\ue60a${RST}`, // license white
-	"cargo.toml": `\x1b[38;2;222;165;132m\ue7a8${RST}`, // rust
-	"go.mod": `\x1b[38;2;0;173;216m\ue724${RST}`, // go
-	"pyproject.toml": `\x1b[38;2;55;118;171m\ue73c${RST}`, // python
+const NAME_ICON: Record<string, IconSpec> = {
+	"package.json": { glyph: "\ue71e", color: "syntaxString" },
+	"package-lock.json": { glyph: "\ue71e", color: "muted" },
+	"tsconfig.json": { glyph: "\ue628", color: "syntaxType" },
+	"biome.json": { glyph: "\ue615", color: "syntaxFunction" },
+	".gitignore": { glyph: "\ue702", color: "syntaxType" },
+	".git": { glyph: "\ue702", color: "syntaxType" },
+	".env": { glyph: "\ue615", color: "syntaxNumber" },
+	".envrc": { glyph: "\ue615", color: "syntaxNumber" },
+	dockerfile: { glyph: "\ue7b0", color: "syntaxFunction" },
+	makefile: { glyph: "\ue615", color: "muted" },
+	gnumakefile: { glyph: "\ue615", color: "muted" },
+	"readme.md": { glyph: "\ue73e", color: "accent" },
+	license: { glyph: "\ue60a", color: "text" },
+	"cargo.toml": { glyph: "\ue7a8", color: "syntaxType" },
+	"go.mod": { glyph: "\ue724", color: "syntaxVariable" },
+	"pyproject.toml": { glyph: "\ue73c", color: "syntaxFunction" },
 };
 
-export function fileIcon(fp: string): string {
+function paint(spec: IconSpec, theme?: FgTheme): string {
+	return theme ? theme.fg(spec.color, spec.glyph) : spec.glyph;
+}
+
+/** File icon whose color is derived from the active Pi theme when available. */
+export function fileIcon(fp: string, theme?: FgTheme): string {
 	if (!USE_ICONS) return "";
 	const base = basename(fp).toLowerCase();
-	if (NAME_ICON[base]) return `${NAME_ICON[base]} `;
 	const ext = extname(fp).slice(1).toLowerCase();
-	return EXT_ICON[ext] ? `${EXT_ICON[ext]} ` : `${NF_DEFAULT} `;
+	const spec = NAME_ICON[base] ?? EXT_ICON[ext] ?? { glyph: FILE, color: "muted" };
+	return `${paint(spec, theme)} `;
 }
 
-export function dirIcon(): string {
-	return USE_ICONS ? `${NF_DIR} ` : "";
+/** Directory icon whose color is derived from the active Pi theme. */
+export function dirIcon(theme?: FgTheme): string {
+	return USE_ICONS ? `${paint({ glyph: "\ue5ff", color: "accent" }, theme)} ` : "";
 }
-
-// ---------------------------------------------------------------------------
-// cli-highlight ANSI cache
-//
-// highlight.js uses different language ids than shiki for a few entries
-// (no tsx/jsx grammar, jsonc, mdx, make, etc.). Map the shiki-style ids the
-// EXT_LANG table produces onto highlight.js-supported ids.
-// ---------------------------------------------------------------------------

package/src/renderers.ts

@@ -1,11 +1,12 @@
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { getLsStyle } from "@xynogen/pix-data/pix-config";
 
-import { BOLD, FG_BLUE, FG_DIM, FG_GREEN, FG_RED, FG_RULE, FG_YELLOW, RST } from "./ansi.js";
+import { FG_DIM, FG_RULE, RST } from "./ansi.js";
 import { MAX_PREVIEW_LINES } from "./config.js";
 import { hlBlock } from "./highlight.js";
 import { dirIcon, fileIcon } from "./icons.js";
 import { lang } from "./lang.js";
+import type { FgTheme } from "./types.js";
 import { lnum, normalizeLineEndings, pluralize, rule, termW } from "./utils.js";
 
 /** Render syntax-highlighted file content with line numbers. */
@@ -14,13 +15,14 @@ export async function renderFileContent(
 	filePath: string,
 	offset = 1,
 	maxLines = MAX_PREVIEW_LINES,
+	theme?: FgTheme,
 ): Promise<string> {
 	const normalizedContent = normalizeLineEndings(content);
 	const lines = normalizedContent.split("\n");
 	const total = lines.length;
 	const show = lines.slice(0, maxLines);
 	const lg = lang(filePath);
-	const hl = await hlBlock(show.join("\n"), lg);
+	const hl = await hlBlock(show.join("\n"), lg, theme);
 
 	const tw = termW();
 	const startLine = offset;
@@ -50,14 +52,13 @@ export async function renderFileContent(
 export function renderBashOutput(
 	text: string,
 	exitCode: number | null,
+	theme?: FgTheme,
 ): { summary: string; body: string } {
 	const isOk = exitCode === 0;
-	const statusFg = isOk ? FG_GREEN : FG_RED;
 	const statusIcon = isOk ? "✓" : "✗";
-	const codeStr =
-		exitCode !== null
-			? `${statusFg}${statusIcon} exit ${exitCode}${RST}`
-			: `${FG_YELLOW}⚡ killed${RST}`;
+	const semantic = isOk ? "success" : "error";
+	const codeText = exitCode !== null ? `${statusIcon} exit ${exitCode}` : "⚡ killed";
+	const codeStr = theme ? theme.fg(exitCode !== null ? semantic : "warning", codeText) : codeText;
 
 	const lines = text.split("\n");
 	const maxShow = MAX_PREVIEW_LINES;
@@ -73,12 +74,14 @@ export function renderBashOutput(
 }
 
 /** Render ls output using the configured style (grid or tree). */
-export function renderTree(text: string, basePath: string): string {
-	return getLsStyle() === "tree" ? renderLsTree(text, basePath) : renderLsGrid(text, basePath);
+export function renderTree(text: string, basePath: string, theme?: FgTheme): string {
+	return getLsStyle() === "tree"
+		? renderLsTree(text, basePath, theme)
+		: renderLsGrid(text, basePath, theme);
 }
 
 /** Vertical tree view with connectors and icons. */
-function renderLsTree(text: string, _basePath: string): string {
+function renderLsTree(text: string, _basePath: string, theme?: FgTheme): string {
 	const lines = text.trim().split("\n").filter(Boolean);
 	if (!lines.length) return `${FG_DIM}(empty directory)${RST}`;
 
@@ -94,11 +97,10 @@ function renderLsTree(text: string, _basePath: string): string {
 
 		const isDir = entry.endsWith("/");
 		const name = isDir ? entry.slice(0, -1) : entry;
-		const icon = isDir ? dirIcon() : fileIcon(name);
-		const fg = isDir ? FG_BLUE + BOLD : "";
-		const reset = isDir ? RST : "";
+		const icon = isDir ? dirIcon(theme) : fileIcon(name, theme);
+		const displayName = isDir && theme ? theme.fg("accent", name) : name;
 
-		out.push(`${connector}${icon}${fg}${name}${reset}`);
+		out.push(`${connector}${icon}${displayName}`);
 	}
 
 	if (total > MAX_PREVIEW_LINES) {
@@ -111,7 +113,7 @@ function renderLsTree(text: string, _basePath: string): string {
 }
 
 /** Horizontal grid with icons (like eza/ls). */
-function renderLsGrid(text: string, _basePath: string): string {
+function renderLsGrid(text: string, _basePath: string, theme?: FgTheme): string {
 	const lines = text.trim().split("\n").filter(Boolean);
 	if (!lines.length) return `${FG_DIM}(empty directory)${RST}`;
 
@@ -126,10 +128,9 @@ function renderLsGrid(text: string, _basePath: string): string {
 		const entry = raw.trim();
 		const isDir = entry.endsWith("/");
 		const name = isDir ? entry.slice(0, -1) : entry;
-		const icon = isDir ? dirIcon() : fileIcon(name);
-		const fg = isDir ? FG_BLUE + BOLD : "";
-		const reset = isDir ? RST : "";
-		const cell = `${icon}${fg}${name}${reset}`;
+		const icon = isDir ? dirIcon(theme) : fileIcon(name, theme);
+		const displayName = isDir && theme ? theme.fg("accent", name) : name;
+		const cell = `${icon}${displayName}`;
 		cells.push(cell);
 		cellWidths.push(visibleWidth(cell));
 	}

package/src/tools/context.ts

@@ -14,4 +14,6 @@ export interface ToolContext {
 	fffState: FffState;
 	/** FFF cursor store */
 	cursorStore: CursorStore;
+	/** Optional terminal-width override — used by tests to avoid process-global mutation. */
+	terminalWidth?: () => number;
 }

package/src/types.ts

@@ -28,8 +28,8 @@ export type BgTheme = { getBgAnsi?: (key: string) => string };
 
 export type FgTheme = {
 	fg: (key: string, text: string) => string;
-	// Optional raw-ANSI accessor pi's theme exposes; used by the diff renderer
-	// to pull toolDiffAdded/Removed/Context colors. Absent on minimal themes.
+	// Optional raw-ANSI accessors exposed by Pi's theme. Diff foregrounds and
+	// generated tint backgrounds derive from these semantic theme colors.
 	getFgAnsi?: (key: string) => string;
 };
 

package/src/utils.test.ts

@@ -43,9 +43,8 @@ describe("collapsed tool rows", () => {
 		expect(formatCollapsedToolRow(rowTheme, "read", "src/a.ts", "12 lines")).toBe(
 			"✓ read src/a.ts · 12 lines",
 		);
-		expect(plain(renderCollapsedToolRow(rowTheme, "read", "src/a.ts", "12 lines"))).toContain(
-			"✓ read src/a.ts · 12 lines",
-		);
+		const rendered = plain(renderCollapsedToolRow(rowTheme, "read", "src/a.ts", "12 lines"));
+		expect(rendered).toStartWith("✓ read src/a.ts · 12 lines");
 	});
 
 	it("hides only collapsed, non-expanded call rows", () => {

package/src/utils.ts

@@ -35,14 +35,14 @@ function preserveToolBackground(ansi: string, bg: string): string {
 	});
 }
 
-export function fillToolBackground(text: string, bg = BG_BASE): string {
-	const width = termW();
+export function fillToolBackground(text: string, bg = BG_BASE, width?: number): string {
+	const resolvedWidth = width ?? termW();
 	return text
 		.split("\n")
 		.map((line) => {
 			const normalized = preserveToolBackground(line, bg);
-			const fitted = preserveToolBackground(truncateToWidth(normalized, width, ""), bg);
-			const padding = Math.max(0, width - visibleWidth(fitted));
+			const fitted = preserveToolBackground(truncateToWidth(normalized, resolvedWidth, ""), bg);
+			const padding = Math.max(0, resolvedWidth - visibleWidth(fitted));
 			return `${bg}${fitted}${" ".repeat(padding)}${RST}`;
 		})
 		.join("\n");
@@ -87,7 +87,7 @@ export function renderCollapsedToolRow(
 	meta = "",
 	status: CollapsedToolStatus = "success",
 ): string {
-	return fillToolBackground(`  ${formatCollapsedToolRow(theme, tool, target, meta, status)}`);
+	return fillToolBackground(formatCollapsedToolRow(theme, tool, target, meta, status));
 }
 
 /** Hide renderCall after its paired result has auto-collapsed. */