pi-compact-tools 0.8.1 → 0.9.0

package/README.md

@@ -2,17 +2,18 @@
 
 Compact, expandable rendering for Pi's built-in tools, with a GitHub Dark theme.
 
-![Compact tool workflow](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/nerd-font-workflow-optimized.gif)
+![Compact rows for every built-in tool](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/compact-workflow.gif)
 
-![Spinner and elapsed-time display](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/spinner-duration-optimized.gif)
+![Syntax-highlighted edit diff](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/edit-diff.gif)
 
-![Edit diff](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/edit-diff.gif)
+![Numbered read code view](https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/code-aware-results.gif)
 
 ## Features
 
 - Compact rows for `read`, `write`, `edit`, `bash`, `powershell`, `grep`, `find`, and `ls`, with status, duration, and line count
 - Syntax-highlighted edit diffs and numbered `read`/`write` code views, including Markdown code fences
-- Animated working label above the prompt and a `Ctrl+T` thinking summary/detail cycle
+- Animated working label above the prompt, lit in the session's own thinking-level color, and a `Ctrl+T` thinking summary/detail cycle
+- Theme-agnostic chrome: rails, the tool indicator, and the working label are derived from the active theme and stay legible on light and dark backgrounds
 - No Nerd Font required
 
 ## Install

package/extensions/compact-tools-color.ts

@@ -25,22 +25,42 @@ function ansi256ToRgb(index: number): Rgb {
 	return { r: gray, g: gray, b: gray };
 }
 
+const ANSI_256_RGB: readonly Rgb[] = Array.from({ length: 256 }, (_, index) => ansi256ToRgb(index));
+
+/**
+ * The nearest-color search runs per character on 256-color terminals, so both the
+ * palette and the answers are kept. Callers interpolate between a handful of theme
+ * colors, so the memo holds tens of entries rather than growing with output size.
+ */
+const ansi256ByRgb = new Map<number, number>();
+
 function rgbToAnsi256(rgb: Rgb): number {
+	const key = (rgb.r << 16) | (rgb.g << 8) | rgb.b;
+	const memoized = ansi256ByRgb.get(key);
+	if (memoized !== undefined) return memoized;
 	let bestIndex = 0;
 	let bestDistance = Number.POSITIVE_INFINITY;
 	for (let index = 0; index < 256; index++) {
-		const candidate = ansi256ToRgb(index);
+		const candidate = ANSI_256_RGB[index]!;
 		const distance = (rgb.r - candidate.r) ** 2 + (rgb.g - candidate.g) ** 2 + (rgb.b - candidate.b) ** 2;
 		if (distance >= bestDistance) continue;
 		bestIndex = index;
 		bestDistance = distance;
 	}
+	ansi256ByRgb.set(key, bestIndex);
 	return bestIndex;
 }
 
 export function themeColorRgb(theme: Theme, color: ThemeForeground): Rgb | undefined {
 	if (typeof theme.getFgAnsi !== "function") return undefined;
-	const ansi = theme.getFgAnsi(color);
+	// Pi throws on a color it does not know, and callers reach this with names computed from
+	// host state — a thinking level Pi adds later would otherwise take down a render.
+	let ansi: string;
+	try {
+		ansi = theme.getFgAnsi(color);
+	} catch {
+		return undefined;
+	}
 	const trueColor = ansi.match(/\[38;2;(\d+);(\d+);(\d+)m/u);
 	if (trueColor) return { r: Number(trueColor[1]), g: Number(trueColor[2]), b: Number(trueColor[3]) };
 	const indexed = ansi.match(/\[38;5;(\d+)m/u);
@@ -57,17 +77,78 @@ export function interpolateRgb(from: Rgb, to: Rgb, amount: number): Rgb {
 	};
 }
 
-export function colorizeRgb(theme: Theme, color: Rgb, text: string): string {
+/** Shared by the foreground (38/39) and background (48/49) SGR pairs. */
+function paintRgb(theme: Theme, color: Rgb, text: string, set: 38 | 48): string {
+	const reset = set === 38 ? 39 : 49;
 	if (typeof theme.getColorMode === "function" && theme.getColorMode() === "256color") {
-		return `\x1b[38;5;${rgbToAnsi256(color)}m${text}\x1b[39m`;
+		return `\x1b[${set};5;${rgbToAnsi256(color)}m${text}\x1b[${reset}m`;
 	}
-	return `\x1b[38;2;${color.r};${color.g};${color.b}m${text}\x1b[39m`;
+	return `\x1b[${set};2;${color.r};${color.g};${color.b}m${text}\x1b[${reset}m`;
+}
+
+export function colorizeRgb(theme: Theme, color: Rgb, text: string): string {
+	return paintRgb(theme, color, text, 38);
+}
+
+/** Perceived brightness on the same 0-255 scale as the channels, and linear under interpolation. */
+function luminanceRgb(rgb: Rgb): number {
+	return rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
 }
 
 function isDarkTheme(theme: Theme): boolean {
 	const text = themeColorRgb(theme, "text");
 	if (!text) return true;
-	return text.r * 0.299 + text.g * 0.587 + text.b * 0.114 > 128;
+	return luminanceRgb(text) > 128;
+}
+
+/** Themes never expose their terminal background, so the poles stand in for it. */
+const BLACK: Rgb = { r: 0, g: 0, b: 0 };
+const WHITE: Rgb = { r: 255, g: 255, b: 255 };
+
+/** Mix a color toward its own gray so a vivid theme hue cannot turn chrome into a highlight. */
+export function neutralizeRgb(rgb: Rgb, keepHue: number): Rgb {
+	const gray = Math.round(luminanceRgb(rgb));
+	return interpolateRgb({ r: gray, g: gray, b: gray }, rgb, keepHue);
+}
+
+/**
+ * Reach a luminance by scaling every channel, which moves the color along its own ray from
+ * black and so leaves hue and saturation untouched — the same color, brighter or darker.
+ * Scaling up stops where the first channel would clip; past that only white can add light,
+ * and the color washes out the way a real highlight does.
+ */
+function atBrightness(rgb: Rgb, target: number): Rgb {
+	const brightness = luminanceRgb(rgb);
+	if (brightness <= 0) return interpolateRgb(BLACK, WHITE, target / 255);
+	const headroom = 255 / Math.max(rgb.r, rgb.g, rgb.b, 1);
+	const scale = Math.min(target / brightness, headroom);
+	const scaled: Rgb = { r: rgb.r * scale, g: rgb.g * scale, b: rgb.b * scale };
+	const reached = luminanceRgb(scaled);
+	const rounded: Rgb = { r: Math.round(scaled.r), g: Math.round(scaled.g), b: Math.round(scaled.b) };
+	return reached >= target - 0.5 ? rounded : interpolateRgb(rounded, WHITE, (target - reached) / (255 - reached));
+}
+
+/** Lift a color part of the way to maximum contrast, keeping its hue for as long as it can. */
+export function liftContrast(theme: Theme, rgb: Rgb, amount: number): Rgb {
+	const dark = isDarkTheme(theme);
+	const brightness = luminanceRgb(rgb) / 255;
+	const level = dark ? brightness : 1 - brightness;
+	const target = level + (1 - level) * amount;
+	return atBrightness(rgb, (dark ? target : 1 - target) * 255);
+}
+
+/**
+ * Move a color until how far it stands off the theme background — 0 for invisible, 1 for
+ * the opposite pole — lands inside the band. A color already inside is returned untouched,
+ * so a theme's own choice survives wherever it is legible to begin with.
+ */
+export function withContrast(theme: Theme, rgb: Rgb, minimum: number, maximum: number): Rgb {
+	const dark = isDarkTheme(theme);
+	const brightness = luminanceRgb(rgb) / 255;
+	const level = dark ? brightness : 1 - brightness;
+	const target = level > maximum ? maximum : level < minimum ? minimum : level;
+	if (target === level) return rgb;
+	return atBrightness(rgb, (dark ? target : 1 - target) * 255);
 }
 
 /**
@@ -77,13 +158,10 @@ function isDarkTheme(theme: Theme): boolean {
 export function diffTintRgb(theme: Theme, color: ThemeForeground, amount = 0.16): Rgb | undefined {
 	const rgb = themeColorRgb(theme, color);
 	if (!rgb) return undefined;
-	const base: Rgb = isDarkTheme(theme) ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 };
+	const base = isDarkTheme(theme) ? BLACK : WHITE;
 	return interpolateRgb(base, rgb, amount);
 }
 
 export function fillRgb(theme: Theme, color: Rgb, text: string): string {
-	if (typeof theme.getColorMode === "function" && theme.getColorMode() === "256color") {
-		return `\x1b[48;5;${rgbToAnsi256(color)}m${text}\x1b[49m`;
-	}
-	return `\x1b[48;2;${color.r};${color.g};${color.b}m${text}\x1b[49m`;
+	return paintRgb(theme, color, text, 48);
 }

package/extensions/compact-tools-core.ts

@@ -2,7 +2,7 @@
 
 export type RowStatus = "pending" | "running" | "success" | "error";
 
-export type IndicatorTone = "borderAccent" | "border" | "borderMuted" | "success" | "error";
+export type IndicatorTone = "muted" | "dim" | "borderMuted" | "success" | "error";
 
 export const RUNNING_INDICATOR_FRAME_COUNT = 14;
 const RUNNING_INDICATOR_MIN_STRENGTH = 0.08;
@@ -19,9 +19,9 @@ export function indicatorStrength(status: RowStatus, frame = 0): number {
 export function indicatorTone(status: RowStatus, frame = 0): IndicatorTone {
 	if (status === "success") return "success";
 	if (status === "error") return "error";
-	if (status === "pending") return "borderAccent";
+	if (status === "pending") return "muted";
 	const strength = indicatorStrength(status, frame);
-	return strength >= 0.7 ? "borderAccent" : strength >= 0.35 ? "border" : "borderMuted";
+	return strength >= 0.7 ? "muted" : strength >= 0.35 ? "dim" : "borderMuted";
 }
 
 export function indicatorGlyph(_status: RowStatus, _frame = 0): string {
@@ -38,6 +38,16 @@ export function classifyCallStatus(isError: boolean, executionStarted: boolean,
 	return executionStarted ? "running" : "pending";
 }
 
+/**
+ * Sub-minute durations keep millisecond precision; longer runs switch to the
+ * minute and hour grouping Pi's own bash and powershell renderers use.
+ */
 export function formatDurationMs(elapsedMs: number): string {
-	return `${(elapsedMs / 1000).toFixed(3)}s`;
+	const seconds = elapsedMs / 1000;
+	if (seconds < 60) return `${seconds.toFixed(3)}s`;
+	const totalSeconds = Math.floor(seconds);
+	const minutes = Math.floor(totalSeconds / 60);
+	const remainderSeconds = totalSeconds % 60;
+	if (minutes < 60) return `${minutes}m ${remainderSeconds}s`;
+	return `${Math.floor(minutes / 60)}h ${minutes % 60}m ${remainderSeconds}s`;
 }

package/extensions/compact-tools-language.ts

@@ -0,0 +1,146 @@
+import { getLanguageFromPath } from "@earendil-works/pi-coding-agent";
+
+/**
+ * Pi resolves a language from the file extension and deliberately never falls back to
+ * content auto-detection, because highlight.js guesses confidently and wrongly on the
+ * things people read most: prose scores as AppleScript or LiveCode, logs and `git log`
+ * output as Apache, a one-line TypeScript statement as AutoIt. Relevance scores do not
+ * separate those from real matches, and the library is not reachable from this package
+ * anyway — Pi keeps it nested.
+ *
+ * So this module only widens the deterministic signals: names that identify a file
+ * without an extension, extensions Pi's table omits, and an interpreter the file
+ * declares itself. Anything still unknown stays unhighlighted rather than guessed.
+ */
+
+/** Files whose name, not extension, states the language. Keyed by lowercased basename. */
+const FILENAME_LANGUAGES: Readonly<Record<string, string>> = {
+	dockerfile: "dockerfile",
+	containerfile: "dockerfile",
+	makefile: "makefile",
+	gnumakefile: "makefile",
+	"cmakelists.txt": "cmake",
+	rakefile: "ruby",
+	gemfile: "ruby",
+	guardfile: "ruby",
+	podfile: "ruby",
+	brewfile: "ruby",
+	vagrantfile: "ruby",
+	jenkinsfile: "groovy",
+	".bashrc": "bash",
+	".bash_profile": "bash",
+	".bash_aliases": "bash",
+	".zshrc": "bash",
+	".zprofile": "bash",
+	".profile": "bash",
+	".editorconfig": "ini",
+	".npmrc": "ini",
+	".yarnrc": "ini",
+};
+
+/** Extensions Pi's own table does not cover. Unsupported names degrade to plain text. */
+const EXTENSION_LANGUAGES: Readonly<Record<string, string>> = {
+	mts: "typescript",
+	cts: "typescript",
+	jsonc: "json",
+	json5: "json",
+	bat: "dos",
+	cmd: "dos",
+	psm1: "powershell",
+	psd1: "powershell",
+	ini: "ini",
+	cfg: "ini",
+	conf: "ini",
+	properties: "properties",
+	diff: "diff",
+	patch: "diff",
+	svg: "xml",
+	gradle: "groovy",
+	groovy: "groovy",
+	dart: "dart",
+	nix: "nix",
+	zig: "zig",
+	mm: "objectivec",
+	pl: "perl",
+	pm: "perl",
+	rake: "ruby",
+	kts: "kotlin",
+	sc: "scala",
+	vb: "vbnet",
+	jl: "julia",
+	cr: "crystal",
+	awk: "awk",
+	tcl: "tcl",
+	f90: "fortran",
+	f95: "fortran",
+};
+
+/** Interpreters seen after `#!`, with any version suffix already stripped. */
+const INTERPRETER_LANGUAGES: Readonly<Record<string, string>> = {
+	bash: "bash",
+	sh: "bash",
+	zsh: "bash",
+	dash: "bash",
+	ksh: "bash",
+	fish: "fish",
+	python: "python",
+	node: "javascript",
+	deno: "typescript",
+	bun: "typescript",
+	ruby: "ruby",
+	perl: "perl",
+	php: "php",
+	lua: "lua",
+	awk: "awk",
+	gawk: "awk",
+	rscript: "r",
+	pwsh: "powershell",
+	powershell: "powershell",
+	tclsh: "tcl",
+};
+
+function basename(path: string): string {
+	const separator = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+	return separator === -1 ? path : path.slice(separator + 1);
+}
+
+/** `python3.12` and `ruby2.7` name the same languages as `python` and `ruby`. */
+function stripVersion(interpreter: string): string {
+	return interpreter.replace(/[\d.]+$/u, "");
+}
+
+/** Read the language a `#!` line declares, e.g. `#!/usr/bin/env -S python3 -u`. */
+export function languageFromShebang(line: string): string | undefined {
+	const shebang = line.match(/^#!\s*(\S+)((?:\s+\S+)*)$/u);
+	if (!shebang) return undefined;
+	const command = basename(shebang[1]!).toLowerCase();
+	if (command !== "env") return INTERPRETER_LANGUAGES[stripVersion(command)];
+	// `env` forwards to the first argument that is not one of its own flags.
+	for (const argument of shebang[2]!.trim().split(/\s+/u)) {
+		if (!argument || argument.startsWith("-") || argument.includes("=")) continue;
+		return INTERPRETER_LANGUAGES[stripVersion(basename(argument).toLowerCase())];
+	}
+	return undefined;
+}
+
+/** Resolve a language from the path alone, without looking at file contents. */
+export function languageFromPath(path: string): string | undefined {
+	const fromPi = getLanguageFromPath(path);
+	if (fromPi) return fromPi;
+	const name = basename(path).toLowerCase();
+	const byName = FILENAME_LANGUAGES[name];
+	if (byName) return byName;
+	// `.env`, `.env.local`, and `.env.production` all hold the same KEY=value shape.
+	if (name === ".env" || name.startsWith(".env.")) return "ini";
+	const extension = name.includes(".") ? name.slice(name.lastIndexOf(".") + 1) : undefined;
+	return extension ? EXTENSION_LANGUAGES[extension] : undefined;
+}
+
+/**
+ * Resolve a language for a file view. `firstLine` is only consulted when it is genuinely
+ * the file's first line, so a `read` starting at an offset never mistakes a comment for
+ * a shebang.
+ */
+export function resolveLanguage(path: string, firstLine?: string): string | undefined {
+	return languageFromPath(path) ?? (firstLine === undefined ? undefined : languageFromShebang(firstLine));
+}

package/extensions/compact-tools-layout.ts

@@ -1,4 +1,4 @@
-import { getLanguageFromPath, highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
+import { highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
 import type { Component } from "@earendil-works/pi-tui";
 import {
 	Container,
@@ -9,7 +9,9 @@ import {
 } from "@earendil-works/pi-tui";
 import { diffTintRgb, fillRgb } from "./compact-tools-color.ts";
 import { normalizeLineEndings } from "./compact-tools-core.ts";
+import { resolveLanguage } from "./compact-tools-language.ts";
 import { highlightMarkdown } from "./compact-tools-markdown.ts";
+import { paintChrome } from "./compact-tools-palette.ts";
 import type { ToolArgs } from "./compact-tools-types.ts";
 
 class CachedComponent implements Component {
@@ -111,7 +113,7 @@ export function hardWrapTextWithAnsi(text: string, width: number): string[] {
 export function renderToolCall(title: string, details: string | undefined, theme: Theme): Component {
 	const text = details ? `${title} ${details}` : title;
 	const firstPrefix = " ";
-	const continuationPrefix = theme.fg("border", " │ ");
+	const continuationPrefix = paintChrome(theme, " │ ");
 	const prefixWidth = visibleWidth(continuationPrefix);
 	return new CachedComponent((width) => {
 		const lines = hardWrapTextWithAnsi(text, width - prefixWidth);
@@ -128,7 +130,7 @@ export function renderOutput(output: string, theme: Theme, isError: boolean): Co
 	if (!normalized) return undefined;
 	const color = isError ? "error" : "toolOutput";
 	const styled = normalized.split("\n").map((line) => theme.fg(color, line)).join("\n");
-	return prefixedText(styled, theme.fg("border", " │ "));
+	return prefixedText(styled, paintChrome(theme, " │ "));
 }
 
 export type CodeDiffLineKind = "context" | "add" | "remove" | "separator";
@@ -304,9 +306,13 @@ type CodeRowsOptions = {
 
 /** Render numbered, syntax-highlighted code rows shared by edit diffs and read/write file views. */
 function renderCodeRows(lines: CodeDiffLine[], path: string, theme: Theme, options: CodeRowsOptions): Component {
-	const highlighted = highlightCodeLines(lines, getLanguageFromPath(path), theme);
+	// A shebang only speaks for the file when the first row really is line 1, so a
+	// read at an offset or a diff hunk never reads one out of a comment.
+	const first = lines[0];
+	const shebangLine = first?.lineNumber === 1 && first.kind !== "separator" ? first.content : undefined;
+	const highlighted = highlightCodeLines(lines, resolveLanguage(path, shebangLine), theme);
 	const numberWidth = Math.max(1, ...lines.map((line) => String(line.lineNumber ?? "").length));
-	const prefix = theme.fg("border", " \u2502 ");
+	const prefix = paintChrome(theme, " \u2502 ");
 	const prefixWidth = visibleWidth(prefix);
 	const gutterWidth = numberWidth + (options.signs ? 3 : 2);
 	const addedTint = options.signs ? diffTintRgb(theme, "toolDiffAdded") : undefined;
@@ -387,7 +393,8 @@ export function limitComponentLines(component: Component, maximumLines: number,
 		const omitted = lines.length - maximumLines;
 		return [
 			...lines.slice(0, maximumLines),
-			theme.fg("border", " │ ") + theme.fg("borderAccent", `… ${omitted} more ${omitted === 1 ? "line" : "lines"}`),
+			paintChrome(theme, " │ ")
+				+ theme.fg("toolOutput", `… ${omitted} more ${omitted === 1 ? "line" : "lines"}`),
 		];
 	}, () => component.invalidate?.());
 }
@@ -395,5 +402,5 @@ export function limitComponentLines(component: Component, maximumLines: number,
 export function renderArguments(args: ToolArgs, theme: Theme): Component {
 	const json = JSON.stringify(args, null, 2) ?? "{}";
 	const styled = styleMultiline(json, (line) => theme.fg("toolOutput", line));
-	return prefixedText(styled, theme.fg("border", " │ "));
+	return prefixedText(styled, paintChrome(theme, " │ "));
 }

package/extensions/compact-tools-markdown.ts

@@ -1,4 +1,5 @@
-import { getLanguageFromPath, highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
+import { highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
+import { languageFromPath } from "./compact-tools-language.ts";
 
 type Fence = { char: string; length: number; language: string | undefined; start: number };
 
@@ -14,7 +15,7 @@ const INLINE = /(`+)(.+?)\1|\[([^\]\n]+)\]\(([^)\s]+)\)|\*\*(?=\S)(.+?)\*\*|__(?
 function fenceLanguage(info: string): string | undefined {
 	const name = info.toLowerCase();
 	if (!name) return undefined;
-	return getLanguageFromPath(`fence.${name}`) ?? name;
+	return languageFromPath(`fence.${name}`) ?? name;
 }
 
 function highlightInline(text: string, theme: Theme): string {

package/extensions/compact-tools-palette.ts

@@ -0,0 +1,117 @@
+import type { ExtensionAPI, Theme } from "@earendil-works/pi-coding-agent";
+import {
+	colorizeRgb,
+	liftContrast,
+	neutralizeRgb,
+	themeColorRgb,
+	withContrast,
+	type Rgb,
+} from "./compact-tools-color.ts";
+
+/**
+ * Colors this extension draws with, derived from the active theme rather than named on it.
+ *
+ * Naming a color does not travel. `borderAccent` is a quiet gray in github-dark-pro and
+ * electric cyan in Pi's own dark theme; `dim` is the dimmest name a theme offers yet is
+ * still sized for body text, a step louder than a rail should be; and a hard-coded white
+ * highlight disappears entirely on a light background. So each value here takes a theme
+ * color for its hue and then places it: chrome and the indicator give up most of their
+ * saturation and are pulled into a fixed contrast band, while the working label keeps its
+ * hue exactly and is moved only in brightness. Everything is measured against the theme
+ * background, so the same code reads the same way on light and dark alike: against a light
+ * background the moves invert, and standing out means going darker.
+ */
+
+type ThemeForeground = Parameters<Theme["getFgAnsi"]>[0];
+
+type ContrastBand = { color: ThemeForeground; keepHue: number; minimum: number; maximum: number };
+
+/** A band with no color attached, for a derivation that supplies its own source. */
+type ContrastRange = { minimum: number; maximum: number };
+
+/**
+ * One tone for the whole frame — rails, the result connector, and the status line it leads
+ * to — so the frame reads as a single quiet object rather than competing with the output.
+ */
+const CHROME: ContrastBand = { color: "dim", keepHue: 0.35, minimum: 0.22, maximum: 0.28 };
+/** The indicator breathes either side of the chrome tone, dipping below it and peaking above. */
+const PULSE_LOW: ContrastBand = { color: "dim", keepHue: 0.4, minimum: 0.18, maximum: 0.3 };
+const PULSE_HIGH: ContrastBand = { color: "muted", keepHue: 0.4, minimum: 0.4, maximum: 0.6 };
+/**
+ * The working label is painted in the session's own thinking level, the piece of state the
+ * row is already reporting on. Themes size those colors for a one-word status chip, so the
+ * label takes a brighter shade of the same color and the sweep lifts it again: the row
+ * carries the level's hue at a weight that reads across the width of a sentence, and the
+ * highlight is that color catching light rather than white laid over it. Both lifts are a
+ * share of the light left between the color and full contrast, so a level the theme
+ * already paints brightly moves least.
+ */
+const GLOW_REST_LIFT = 0.3;
+const GLOW_CREST_LIFT = 0.35;
+/** Themes paint the lowest levels at rail weight; a floor keeps the label off the background. */
+const GLOW_FLOOR: ContrastRange = { minimum: 0.4, maximum: 1 };
+
+export type ThinkingLevel = ReturnType<ExtensionAPI["getThinkingLevel"]>;
+
+const THINKING_LEVEL_COLOR = {
+	off: "thinkingOff",
+	minimal: "thinkingMinimal",
+	low: "thinkingLow",
+	medium: "thinkingMedium",
+	high: "thinkingHigh",
+	xhigh: "thinkingXhigh",
+	max: "thinkingMax",
+} as const satisfies Record<ThinkingLevel, ThemeForeground>;
+
+/** The theme color a thinking level is painted with. */
+function thinkingLevelColor(level: ThinkingLevel): ThemeForeground {
+	return THINKING_LEVEL_COLOR[level] ?? "thinkingMedium";
+}
+
+/**
+ * Derivation is deliberately not cached against the Theme: `/theme` can swap a palette behind
+ * the same instance, and a stale entry would outlive the switch. Callers that redraw per line
+ * hold the derived value themselves instead.
+ */
+function bandedRgb(theme: Theme, band: ContrastBand): Rgb | undefined {
+	const rgb = themeColorRgb(theme, band.color);
+	if (!rgb) return undefined;
+	return withContrast(theme, neutralizeRgb(rgb, band.keepHue), band.minimum, band.maximum);
+}
+
+/**
+ * A chrome painter bound to one theme. Deriving the tone costs a parse and a dozen floating
+ * point operations, and the frame is drawn once per line of tool output or thinking detail,
+ * so callers in a loop take a painter once and callers with a single rail use `paintChrome`.
+ */
+export function chromePainter(theme: Theme): (text: string) => string {
+	const chrome = bandedRgb(theme, CHROME);
+	return chrome ? (text) => colorizeRgb(theme, chrome, text) : (text) => theme.fg("dim", text);
+}
+
+/** Paint one rail, connector, or status line in the chrome tone. */
+export function paintChrome(theme: Theme, text: string): string {
+	return chromePainter(theme)(text);
+}
+
+export type ColorRamp = { from: Rgb; to: Rgb };
+
+function ramp(theme: Theme, low: ContrastBand, high: ContrastBand): ColorRamp | undefined {
+	const from = bandedRgb(theme, low);
+	const to = bandedRgb(theme, high);
+	return from && to ? { from, to } : undefined;
+}
+
+/** Fade endpoints for the running tool indicator, or undefined when the theme resolves no RGB. */
+export function indicatorPulse(theme: Theme): ColorRamp | undefined {
+	return ramp(theme, PULSE_LOW, PULSE_HIGH);
+}
+
+/** Sweep endpoints for the working label at a thinking level, resting color to crest. */
+export function progressGlow(theme: Theme, level: ThinkingLevel): ColorRamp | undefined {
+	const raw = themeColorRgb(theme, thinkingLevelColor(level));
+	if (!raw) return undefined;
+	const lifted = liftContrast(theme, raw, GLOW_REST_LIFT);
+	const from = withContrast(theme, lifted, GLOW_FLOOR.minimum, GLOW_FLOOR.maximum);
+	return { from, to: liftContrast(theme, from, GLOW_CREST_LIFT) };
+}

package/extensions/compact-tools-progress.ts

@@ -1,10 +1,10 @@
 import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import { stripTerminalSequences, truncateToWidth } from "@earendil-works/pi-tui";
-import { colorizeRgb, interpolateRgb, themeColorRgb, type Rgb } from "./compact-tools-color.ts";
+import { colorizeRgb, interpolateRgb } from "./compact-tools-color.ts";
+import { progressGlow, type ColorRamp, type ThinkingLevel } from "./compact-tools-palette.ts";
 import type { ToolArgs } from "./compact-tools-types.ts";
 
 const GLOW_INTERVAL_MS = 80;
-const WHITE: Rgb = { r: 255, g: 255, b: 255 };
 
 const TOOL_PROGRESS_MESSAGES: Readonly<Record<string, string>> = {
 	read: "Reading file…",
@@ -45,29 +45,41 @@ function glowRadius(length: number): number {
 	return Math.max(2, Math.min(8, Math.ceil(length / 4)));
 }
 
-/** Render a thinking-summary-colored label with a proportional white highlight sweeping left to right. */
-export function glowProgressMessage(message: string, frame: number, theme: Theme): string {
+/** Render the working label with a proportional highlight sweeping left to right. */
+export function glowProgressMessage(
+	message: string,
+	frame: number,
+	theme: Theme,
+	level: ThinkingLevel,
+): string {
+	return paintGlowFrame(message, frame, theme, progressGlow(theme, level));
+}
+
+function paintGlowFrame(message: string, frame: number, theme: Theme, glow: ColorRamp | undefined): string {
 	const characters = [...message];
 	if (characters.length === 0) return "";
 	const radius = glowRadius(characters.length);
 	const center = frame % (characters.length + radius * 2) - radius;
-	const base = themeColorRgb(theme, "thinkingMax");
-	if (!base) {
+	// Reached only when the level's color did not resolve, so the sweep falls back to names
+	// every theme carries rather than to the one that just failed.
+	if (!glow) {
 		return characters.map((character, index) =>
-			theme.fg(Math.abs(index - center) < radius ? "mdHeading" : "thinkingMax", character)).join("");
+			theme.fg(Math.abs(index - center) < radius ? "text" : "muted", character)).join("");
 	}
 	return characters.map((character, index) => {
 		const distance = Math.abs(index - center);
 		const strength = Math.max(0, 1 - distance / radius);
-		return colorizeRgb(theme, interpolateRgb(base, WHITE, strength), character);
+		return colorizeRgb(theme, interpolateRgb(glow.from, glow.to, strength), character);
 	}).join("");
 }
 
-function createGlowFrames(message: string, theme: Theme): string[] {
+function createGlowFrames(message: string, theme: Theme, level: ThinkingLevel): string[] {
 	const length = [...message].length;
 	if (length === 0) return [""];
+	// One ramp for the whole cycle; only the sweep position changes between frames.
+	const glow = progressGlow(theme, level);
 	return Array.from({ length: length + glowRadius(length) * 2 }, (_, frame) =>
-		glowProgressMessage(message, frame, theme));
+		paintGlowFrame(message, frame, theme, glow));
 }
 
 /** Owns Pi's single working row so animation remains continuous across thinking and tool execution. */
@@ -78,34 +90,58 @@ export class ProgressController {
 	private frames: string[] = [];
 	private frame = 0;
 	private timer: ReturnType<typeof setInterval> | undefined;
+	private level: ThinkingLevel = "medium";
 
-	constructor(pi: ExtensionAPI) {
-		pi.on("agent_start", () => this.setMessage("Thinking…"));
+	constructor(private readonly pi: ExtensionAPI) {
+		// Every handler leaves early while unbound. Pi keeps dispatching to this
+		// extension in non-TUI modes, and guarding at the top keeps that work — and
+		// any future handler added here — out of the detached path.
+		pi.on("agent_start", () => {
+			if (!this.context) return;
+			this.setMessage("Thinking…");
+		});
 		pi.on("message_update", (event) => {
+			if (!this.context) return;
 			const type = event.assistantMessageEvent.type;
 			if (type === "thinking_start" || type === "thinking_delta") this.setMessage("Thinking…");
 			else if (type === "text_start" || type === "text_delta") this.setMessage("Responding…");
 			else if (type === "toolcall_start" || type === "toolcall_delta") this.setMessage("Preparing tools…");
 		});
 		pi.on("tool_execution_start", (event) => {
+			if (!this.context) return;
 			const message = formatToolProgress(event.toolName, event.args ?? {});
 			this.activeTools.set(event.toolCallId, message);
 			this.setMessage(message);
 		});
 		pi.on("tool_execution_end", (event) => {
+			if (!this.context) return;
 			this.activeTools.delete(event.toolCallId);
 			const remaining = [...this.activeTools.values()].at(-1);
 			this.setMessage(remaining ?? "Processing results…");
 		});
 		pi.on("agent_end", () => {
+			if (!this.context) return;
 			this.activeTools.clear();
 			this.clearMessage();
 		});
+		pi.on("thinking_level_select", (event) => {
+			if (!this.context || event.level === this.level) return;
+			this.level = event.level;
+			// Recolor in place: the label and its animation phase are unchanged.
+			this.frames = createGlowFrames(this.message ?? "", this.context.ui.theme, this.level);
+			this.renderMessage();
+		});
+	}
+
+	/** Guarded, like the Theme accessors, so a host supplying a partial API cannot break binding. */
+	private readLevel(): void {
+		if (typeof this.pi.getThinkingLevel === "function") this.level = this.pi.getThinkingLevel();
 	}
 
 	bind(ctx: ExtensionContext): void {
 		this.stopAnimation();
 		this.context = ctx;
+		this.readLevel();
 		this.activeTools.clear();
 		this.message = undefined;
 		this.frames = [];
@@ -127,7 +163,7 @@ export class ProgressController {
 	private setMessage(message: string): void {
 		if (!this.context || (this.message === message && this.timer)) return;
 		this.message = message;
-		this.frames = createGlowFrames(message, this.context.ui.theme);
+		this.frames = createGlowFrames(message, this.context.ui.theme, this.level);
 		this.frame = 0;
 		this.renderMessage();
 		if (this.timer) return;

package/extensions/compact-tools-thinking.ts

@@ -10,6 +10,7 @@ import {
 	truncateToWidth,
 	wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
+import { chromePainter } from "./compact-tools-palette.ts";
 
 export type ThinkingView = "summary" | "detail" | "hidden";
 export type ThinkingPhase = "summary" | "detail" | "summary-after-detail" | "hidden";
@@ -213,21 +214,27 @@ export class ThinkingCycleController {
 			this.hasToggleableThinking ||= sectionsHaveDetail(sections);
 			const theme = this.theme;
 			const detailTextPrefix = theme?.getFgAnsi("thinkingText");
+			// Derived once per transform: the rail is drawn for every wrapped line of detail.
+			const rail = theme ? chromePainter(theme) : undefined;
 			return renderThinkingSections(sections, thinkingViewForPhase(this.phase), context.availableWidth, {
-				styleSummary: theme ? (summary) => theme.fg("thinkingMax", theme.bold(summary)) : undefined,
-				// border styling resets the foreground; resume detail gray immediately.
-				styleDetailPrefix: theme && detailTextPrefix
-					? (prefix) => theme.fg("border", prefix) + detailTextPrefix
+				// Keep thinking chrome neutral across themes: effort-level and border colors can
+				// be intentionally vivid and are not content hierarchy colors.
+				styleSummary: theme ? (summary) => theme.fg("text", theme.bold(summary)) : undefined,
+				// Prefix styling resets the foreground; resume the host's thinking text color.
+				// The rail and connector are the same frame the tool rows draw, so they take
+				// the same chrome tone rather than a color name of their own.
+				styleDetailPrefix: rail && detailTextPrefix
+					? (prefix) => rail(prefix) + detailTextPrefix
 					: undefined,
 				controls: theme
 					? (hasDetail) => hasDetail
 						? theme.fg(
-								"borderAccent",
+								"dim",
 								`${theme.italic("ctrl+t")} toggle • ${theme.italic("click")} to hide`,
 							)
 						: undefined
 					: undefined,
-				styleControlPrefix: theme ? (prefix) => theme.fg("border", prefix) : undefined,
+				styleControlPrefix: rail,
 			});
 		});
 	}
@@ -238,10 +245,10 @@ export class ThinkingCycleController {
 		this.hasToggleableThinking = false;
 		// Match Pi's persisted host visibility after startup or /reload. When the
 		// host is hidden, Markdown transformers are not invoked at all. Pi wraps
-		// this label in thinkingText, so an inner thinkingMax span is required to
-		// keep it consistent with completed summary titles.
+		// this label in thinkingText, so an inner text span keeps it consistent with
+		// completed summary titles.
 		this.phase = getInitialThinkingPhase();
-		const hiddenLabel = this.theme.fg("thinkingMax", this.theme.bold("Thinking..."));
+		const hiddenLabel = this.theme.fg("text", this.theme.bold("Thinking..."));
 		// Pi does not currently expose transcript invalidation directly. Updating
 		// this label rebuilds assistant Markdown and requests a render without
 		// changing the message or its hidden/visible state.

package/extensions/compact-tools.ts

@@ -27,7 +27,7 @@ import {
 	normalizeLineEndings,
 	type RowStatus,
 } from "./compact-tools-core.ts";
-import { colorizeRgb, interpolateRgb, themeColorRgb } from "./compact-tools-color.ts";
+import { colorizeRgb, interpolateRgb } from "./compact-tools-color.ts";
 import { loadConfig } from "./compact-tools-config.ts";
 import {
 	formatResultLineSummary,
@@ -52,6 +52,7 @@ import {
 	renderToolCall,
 	styleMultiline,
 } from "./compact-tools-layout.ts";
+import { chromePainter, indicatorPulse } from "./compact-tools-palette.ts";
 import { ProgressController } from "./compact-tools-progress.ts";
 import { ToolRuntime } from "./compact-tools-runtime.ts";
 import { ThinkingCycleController } from "./compact-tools-thinking.ts";
@@ -83,10 +84,9 @@ function renderIndicator(theme: Theme, ctx: RenderContext, status: RowStatus): s
 	const frame = runtime.syncIndicator(ctx.toolCallId, status === "running", () => ctx.invalidate());
 	const glyph = indicatorGlyph(status, frame);
 	if (status === "running") {
-		const bright = themeColorRgb(theme, "borderAccent");
-		const dim = themeColorRgb(theme, "borderMuted");
-		if (bright && dim) {
-			return colorizeRgb(theme, interpolateRgb(dim, bright, indicatorStrength(status, frame)), glyph);
+		const pulse = indicatorPulse(theme);
+		if (pulse) {
+			return colorizeRgb(theme, interpolateRgb(pulse.from, pulse.to, indicatorStrength(status, frame)), glyph);
 		}
 	}
 	return theme.fg(indicatorTone(status, frame), glyph);
@@ -139,9 +139,12 @@ function renderControls(
 	const status = running
 		? (duration ?? "Running")
 		: `${isError ? "Failed" : "Done"}${duration ? ` in ${duration}` : ""}`;
-	let details = theme.fg("borderAccent", status);
-	if (lineSummary && !running) details += theme.fg("borderAccent", ` (${lineSummary})`);
-	return prefixedText(details, theme.fg("border", " └─ "), "    ");
+	// A failed row already reads as an error through its output color and Pi's row
+	// background, so the status word stays chrome rather than repeating that signal.
+	const chrome = chromePainter(theme);
+	let details = chrome(status);
+	if (lineSummary && !running) details += chrome(` (${lineSummary})`);
+	return prefixedText(details, chrome(" └─ "), "    ");
 }
 
 function renderCallTitle(name: string, theme: Theme, ctx: RenderContext, state: RowState): string {
@@ -356,6 +359,14 @@ function configure(pi: ExtensionAPI, cwd?: string, projectTrusted = false): void
 }
 
 export default function compactTools(pi: ExtensionAPI): void {
+	// Pi caches this factory and re-invokes it with a fresh `pi` for every session
+	// replacement (/resume, /new, /fork) as well as /reload, each time starting from
+	// an empty tool registry. The module itself survives those invocations, so the
+	// memo below has to be dropped here or configure() mistakes the previous
+	// instance's registration for this one and never installs the renderers.
+	registeredConfiguration = undefined;
+	registeredTools.clear();
+
 	const thinkingCycle = new ThinkingCycleController(pi);
 	const progress = new ProgressController(pi);
 	// Register once while the extension runtime is being built. In particular, this
@@ -376,8 +387,5 @@ export default function compactTools(pi: ExtensionAPI): void {
 		thinkingCycle.dispose();
 		progress.dispose();
 		runtime.reset(event.reason !== "reload");
-		// Some Pi hosts rebuild the active tool registry during reload while keeping
-		// this module instance. Force the next session to restore our renderers.
-		if (event.reason === "reload") registeredConfiguration = undefined;
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-compact-tools",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Compact, expandable UI for pi's built-in tools, bundled with a polished GitHub Dark theme.",
   "type": "module",
   "license": "MIT",
@@ -42,15 +42,15 @@
     "themes": [
       "./themes/github-dark-pro.json"
     ],
-    "image": "https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/nerd-font-workflow-optimized.gif"
+    "image": "https://raw.githubusercontent.com/nedleeds/pi-compact-tools/main/assets/compact-workflow.gif"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": "*",
-    "@earendil-works/pi-tui": "*"
+    "@earendil-works/pi-coding-agent": ">=0.85.1",
+    "@earendil-works/pi-tui": ">=0.85.1"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.85.1",
-    "@earendil-works/pi-tui": "0.85.1",
+    "@earendil-works/pi-coding-agent": "0.86.0",
+    "@earendil-works/pi-tui": "0.86.0",
     "@types/node": "^24.0.0",
     "tsx": "^4.23.13",
     "typescript": "^5.9.0"

package/themes/github-dark-pro.json

@@ -41,7 +41,7 @@
     "selectedBg": "surfaceMuted",
     "searchMatchBg": "#3B2E10",
     "searchMatchText": "textBright",
-    "userMessageBg": "#16181C",
+    "userMessageBg": "#0E1014",
     "userMessageText": "textBright",
     "customMessageBg": "",
     "customMessageText": "text",