pi-compact-tools 0.8.3 → 0.9.1

package/README.md

@@ -12,7 +12,8 @@ Compact, expandable rendering for Pi's built-in tools, with a GitHub Dark theme.
 
 - 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

@@ -53,7 +53,14 @@ function rgbToAnsi256(rgb: Rgb): number {
 
 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);
@@ -83,20 +90,75 @@ 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);
 }
 
 /**
  * Diff rows need a tint that reads on the terminal background without hijacking `toolSuccessBg`
  * and `toolErrorBg`, which Pi paints across the whole tool row.
  */
-export function diffTintRgb(theme: Theme, color: ThemeForeground, amount = 0.16): Rgb | undefined {
+export function diffTintRgb(theme: Theme, color: ThemeForeground, amount = 0.20): 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);
 }
 

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 {

package/extensions/compact-tools-layout.ts

@@ -11,6 +11,7 @@ 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 {
@@ -112,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);
@@ -129,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";
@@ -311,7 +312,7 @@ function renderCodeRows(lines: CodeDiffLine[], path: string, theme: Theme, optio
 	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;
@@ -392,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?.());
 }
@@ -400,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-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.72;
+/** 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,8 +90,9 @@ export class ProgressController {
 	private frames: string[] = [];
 	private frame = 0;
 	private timer: ReturnType<typeof setInterval> | undefined;
+	private level: ThinkingLevel = "medium";
 
-	constructor(pi: ExtensionAPI) {
+	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.
@@ -111,11 +124,24 @@ export class ProgressController {
 			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 = [];
@@ -137,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-compact-tools",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "description": "Compact, expandable UI for pi's built-in tools, bundled with a polished GitHub Dark theme.",
   "type": "module",
   "license": "MIT",

package/themes/github-dark-pro.json

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