@adeildo/pi-look 5.1.0 → 5.3.0

package/src/ui/screen.ts

@@ -6,7 +6,14 @@ import type { Paint } from "../render/paint.ts";
 import { renderSegments, type SegmentId, type SegmentOptions } from "../render/segments.ts";
 import type { CursorStyle } from "../settings.ts";
 
-export type SlotName = "strip" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "below";
+export type SlotName =
+	| "strip"
+	| "topLeft"
+	| "topRight"
+	| "bottomLeft"
+	| "bottomRight"
+	| "below"
+	| "belowRight";
 
 export interface Screen {
 	snapshot(): Snapshot;

package/src/ui/tool-frame.ts

@@ -0,0 +1,474 @@
+// Draws every tool call in a frame of its own: the mark and the name on the top rule, the call and
+// its result inside, and how it went on the bottom rule.
+import {
+	type CallRuling,
+	type FeatureScope,
+	FRAMED,
+	isObject,
+	RULING_CHANGED,
+	type RulingTone,
+	rulingOf,
+} from "@adeildo/pi-kit";
+import type { Theme, ToolRenderers } from "@earendil-works/pi-coding-agent";
+import {
+	type Component,
+	getKeybindings,
+	stripTerminalSequences,
+	Text,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+
+import { type IconSet, resolveIcons } from "../render/glyphs.ts";
+import { stateMark, toolIcon, toolLabel } from "../render/tools.ts";
+import { icons } from "../settings.ts";
+
+/** What the call is doing, which is what the bottom rule says while it has no result yet. */
+type Phase = "writing" | "waiting" | "running" | "done" | "failed";
+
+const PHASE_COLORS = {
+	writing: "muted",
+	waiting: "accent",
+	running: "accent",
+	done: "success",
+	failed: "error",
+} as const;
+const BODY_PAD = 4;
+const COLLAPSED_ARGS_CHARS = 100;
+/** How many lines of a result the frame prints before telling you the rest is there. */
+const RESULT_PREVIEW_LINES = 10;
+
+export function registerToolFrames(scope: FeatureScope): void {
+	const redraws = new Map<string, () => void>();
+	scope.events.on(FRAMED, (data) => {
+		if (isObject(data)) data.framed = true;
+	});
+	scope.events.on(RULING_CHANGED, (data) => {
+		if (isObject(data) && typeof data.toolCallId === "string") redraws.get(data.toolCallId)?.();
+	});
+
+	scope.registerToolRenderer((toolName, next) =>
+		framed(scope, next(), {
+			name: toolName,
+			set: () => resolveIcons(icons.get(scope)).set,
+			redraws,
+		}),
+	);
+}
+
+interface FrameContext {
+	name: string;
+	set: () => IconSet;
+	redraws: Map<string, () => void>;
+}
+
+function framed(
+	scope: FeatureScope,
+	base: ToolRenderers | undefined,
+	frame: FrameContext,
+): ToolRenderers {
+	// A tool may bring renderers of its own, one of them, or none: the frame wraps whichever half
+	// exists, and the arguments or the text of the result stand in for the rest.
+	const call = base?.renderCall ?? genericCall;
+	const result = base?.renderResult ?? genericResult;
+
+	// A renderer of pi's own mutates the component it returned last time, which sits inside the
+	// frame, so it gets that one back instead of the frame.
+	const inner = new WeakMap<Component, Component>();
+	const passed = (last: Component | undefined): Component | undefined =>
+		last === undefined ? undefined : (inner.get(last) ?? last);
+
+	return {
+		...base,
+		// The frame is the shell, so pi does not wrap it in a box of its own.
+		renderShell: "self",
+		renderCall(args, theme, context) {
+			frame.redraws.set(context.toolCallId, context.invalidate);
+			const clock = clockOf(context);
+			const now = Date.now();
+			clock.writingAt ??= now;
+			if (context.argsComplete) clock.writtenAt ??= now;
+			if (context.executionStarted) clock.startedAt ??= now;
+			const body = call(args, theme, { ...context, lastComponent: passed(context.lastComponent) });
+
+			const box = new CallFrame({
+				theme,
+				icon: toolIcon(frame.name, frame.set()),
+				label: toolLabel(frame.name),
+				body,
+				ruling: rulingOf(scope.events, context.toolCallId),
+				expanded: context.expanded,
+				phase: phaseOf(context),
+				mark: stateMark,
+				set: frame.set,
+				elapsed: elapsedOf(clock, context),
+			});
+			inner.set(box, body);
+			return box;
+		},
+		renderResult(shown, options, theme, context) {
+			const clock = clockOf(context);
+			// A blocked call prints nothing but the reason the line above already gives.
+			const blocked = rulingOf(scope.events, context.toolCallId)?.blocked === true;
+			// Pi draws the pictures of a result right below the frame, so the frame counts them.
+			const images = shown.content.filter((block) => block.type === "image").length;
+			if (!options.isPartial) clock.endedAt ??= Date.now();
+			const body = result(shown, options, theme, {
+				...context,
+				lastComponent: passed(context.lastComponent),
+			});
+			const phase: Phase = options.isPartial ? "running" : context.isError ? "failed" : "done";
+			const box = new ResultFrame({
+				theme,
+				body,
+				quiet: blocked,
+				phase,
+				mark: stateMark(phase, frame.set()),
+				elapsed: ranFor(clock, phase === "running"),
+				wrote: wroteFor(clock),
+				images: images === 0 ? undefined : `${images} image${images === 1 ? "" : "s"}`,
+			});
+			inner.set(box, body);
+			return box;
+		},
+	};
+}
+
+/*
+ * The stand-in for a tool that brings no renderer of its own: the arguments, under the top rule
+ * that already names the tool, and the text of the result.
+ */
+const genericCall: NonNullable<ToolRenderers["renderCall"]> = (args, theme, context) =>
+	new Text(callText(args, theme, context.expanded), 0, 0);
+
+const genericResult: NonNullable<ToolRenderers["renderResult"]> = (result, options, theme) =>
+	new Text(resultText(result, options.expanded, theme), 0, 0);
+
+/**
+ * The phase the call closes with while it still has no result: writing the arguments, then waiting
+ * to run. A call with a result, live or replayed, stays open for the result half to close.
+ */
+function phaseOf(context: {
+	isPartial: boolean;
+	executionStarted: boolean;
+	argsComplete: boolean;
+}): Phase | undefined {
+	if (!context.isPartial || context.executionStarted) return undefined;
+	return context.argsComplete ? "waiting" : "writing";
+}
+
+function callText(args: unknown, theme: Theme, expanded: boolean): string {
+	if (args === null || args === undefined) return "";
+
+	const entries: [string, unknown][] =
+		typeof args === "object" && !Array.isArray(args) ? Object.entries(args) : [["args", args]];
+	if (entries.length === 0) return "";
+
+	if (expanded) {
+		const lines = entries.map(([key, value]) => {
+			const text =
+				typeof value === "string" ? value : (JSON.stringify(value, null, 2) ?? String(value));
+			return `  ${key}: ${replaceTabs(text).split("\n").join("\n    ")}`;
+		});
+		return theme.fg("muted", lines.join("\n"));
+	}
+
+	const pairs = entries
+		.map(([key, value]) => `${key}=${JSON.stringify(value) ?? String(value)}`)
+		.join(" ");
+	const preview =
+		pairs.length > COLLAPSED_ARGS_CHARS ? `${pairs.slice(0, COLLAPSED_ARGS_CHARS - 3)}...` : pairs;
+	return theme.fg("muted", preview);
+}
+
+function resultText(
+	result: { content: readonly { type: string; text?: string }[] },
+	expanded: boolean,
+	theme: Theme,
+): string {
+	const text = result.content
+		.filter((block) => block.type === "text")
+		.map((block) => stripTerminalSequences(block.text ?? "").replace(/\r/g, ""))
+		.join("\n");
+	if (text === "") return "";
+
+	const lines = text.split("\n");
+	const shown = expanded ? lines : lines.slice(0, RESULT_PREVIEW_LINES);
+	const printed = shown.map((line) => theme.fg("toolOutput", line));
+	if (shown.length < lines.length)
+		printed.push(
+			theme.fg("muted", `... (${lines.length - shown.length} more lines, ${expandHint(theme)})`),
+		);
+	return printed.join("\n");
+}
+
+function expandHint(theme: Theme): string {
+	const keys = getKeybindings().getKeys("app.tools.expand");
+	if (keys.length === 0) return theme.fg("muted", "expand");
+	return `${theme.fg("dim", keys.join("/"))}${theme.fg("muted", " to expand")}`;
+}
+
+function replaceTabs(text: string): string {
+	return text.replace(/\t/g, "   ");
+}
+
+interface FrameParts {
+	theme: Theme;
+	body: Component;
+}
+
+/** The top rule, the call inside it, and the phase while the call has nothing to show yet. */
+class CallFrame implements Component {
+	#drawn?: Drawn;
+
+	constructor(private readonly parts: FrameParts & CallParts) {}
+
+	invalidate(): void {
+		this.#drawn = undefined;
+		this.parts.body.invalidate();
+	}
+
+	render(width: number): string[] {
+		const { theme, icon, label, ruling, expanded, phase } = this.parts;
+		const body = this.parts.body.render(room(width));
+		const drawn = { width, body, rest: [ruling, expanded, phase, this.parts.elapsed] };
+		if (unchanged(this.#drawn, drawn)) return this.#drawn.lines;
+
+		const title = `${theme.fg("toolTitle", icon)} ${theme.fg("toolTitle", theme.bold(label))}`;
+		const lines = [rule("top", title, width, theme), ...inside(withoutBlanks(body), width, theme)];
+		// The decision is about the call, so it stays with the call.
+		if (ruling !== undefined)
+			lines.push(...inside([rulingText(ruling, theme, expanded)], width, theme));
+		// The call has nothing else to show yet, so the frame closes with what it is doing.
+		if (phase !== undefined) {
+			const mark = this.parts.mark(phase, this.parts.set());
+			const times = [this.parts.elapsed];
+			lines.push(
+				rule("bottom", phaseLabel(theme, mark, phase, times), width, theme, PHASE_COLORS[phase]),
+			);
+		}
+		this.#drawn = { ...drawn, lines };
+		return lines;
+	}
+}
+
+interface CallParts {
+	icon: string;
+	label: string;
+	ruling?: CallRuling;
+	expanded: boolean;
+	phase?: Phase;
+	mark: (phase: Phase, set: IconSet) => string;
+	set: () => IconSet;
+	elapsed?: string;
+}
+
+/** The result, behind a cut, and the bottom rule with how it went and how long it took. */
+class ResultFrame implements Component {
+	#drawn?: Drawn;
+
+	constructor(private readonly parts: FrameParts & ResultParts) {}
+
+	invalidate(): void {
+		this.#drawn = undefined;
+		this.parts.body.invalidate();
+	}
+
+	render(width: number): string[] {
+		const { theme, phase, mark, wrote, quiet, images } = this.parts;
+		const time = this.parts.elapsed;
+		const body = this.parts.body.render(room(width));
+		const drawn = { width, body, rest: [phase, mark, time, wrote, images, quiet] };
+		if (unchanged(this.#drawn, drawn)) return this.#drawn.lines;
+
+		const printed = quiet === true ? [] : withoutBlanks(dropTime(body));
+		const lines = [
+			// The cut opens what the call printed, and a call with nothing to print has no cut.
+			...(printed.length === 0 ? [] : [cut(width, theme), ...inside(printed, width, theme)]),
+			rule(
+				"bottom",
+				phaseLabel(theme, mark, phase, [
+					time,
+					wrote === undefined ? undefined : `wrote ${wrote}`,
+					images === undefined ? undefined : `with ${images}`,
+				]),
+				width,
+				theme,
+				PHASE_COLORS[phase],
+			),
+		];
+		this.#drawn = { ...drawn, lines };
+		return lines;
+	}
+}
+
+interface ResultParts {
+	phase: Phase;
+	mark: string;
+	elapsed?: string;
+	wrote?: string;
+	/** How many pictures follow the frame, which pi draws outside it. */
+	images?: string;
+	/** Nothing worth printing under the line, like a call the gate blocked. */
+	quiet?: boolean;
+}
+
+/** One rule of the frame: two corners, and what sits on the left. */
+function rule(
+	edge: "top" | "bottom",
+	left: string,
+	width: number,
+	theme: Theme,
+	color: "accent" | "success" | "error" | "muted" | "border" = "border",
+): string {
+	const [start, end] = edge === "top" ? ["\u256d", "\u256e"] : ["\u2570", "\u256f"];
+	const paint = (text: string) => theme.fg(color, text);
+	const cell = left === "" ? "" : ` ${left} `;
+	const fill = Math.max(1, width - BODY_PAD - visibleWidth(cell));
+	const line =
+		paint(`${start}\u2500`) + cell + paint("\u2500".repeat(fill)) + paint(`\u2500${end}`);
+	return truncateToWidth(line, width, "");
+}
+
+/** The line that ends the call and starts what it printed. */
+function cut(width: number, theme: Theme): string {
+	const paint = (text: string) => theme.fg("border", text);
+	const fill = Math.max(1, width - BODY_PAD);
+	const line = `${paint("\u251c")}${paint("\u2500".repeat(fill + 2))}${paint("\u2524")}`;
+	return truncateToWidth(line, width, "");
+}
+
+/** The bottom rule: what the call is doing, how long it ran, and how long the model took to write it. */
+function phaseLabel(
+	theme: Theme,
+	mark: string,
+	phase: Phase,
+	times: readonly (string | undefined)[],
+): string {
+	const cells = times
+		.filter((time) => time !== undefined)
+		.map((time) => theme.fg("dim", time ?? ""));
+	return [`${theme.fg(PHASE_COLORS[phase], mark)} ${theme.fg("muted", phase)}`, ...cells].join(
+		"  ",
+	);
+}
+
+function inside(lines: readonly string[], width: number, theme: Theme): string[] {
+	const paint = (text: string) => theme.fg("border", text);
+	const inner = room(width);
+	return trim(lines).map((line) => {
+		// Measuring is cheap, and cutting a line that already fits is not.
+		const text = visibleWidth(line) > inner ? truncateToWidth(line, inner, "\u2026", true) : line;
+		const pad = " ".repeat(Math.max(0, inner - visibleWidth(text)));
+		return `${paint("\u2502")} ${text}${pad} ${paint("\u2502")}`;
+	});
+}
+
+interface Drawn {
+	width: number;
+	body: readonly string[];
+	/** What the frame drew around the body: the ruling, the phase, the times. */
+	rest: readonly unknown[];
+	lines: string[];
+}
+
+/** Whether the frame was already drawn for this body and this state, which keeps typing cheap. */
+function unchanged(drawn: Drawn | undefined, next: Omit<Drawn, "lines">): drawn is Drawn {
+	if (drawn === undefined || drawn.width !== next.width) return false;
+	if (drawn.body.length !== next.body.length || drawn.rest.length !== next.rest.length)
+		return false;
+	if (drawn.rest.some((part, index) => part !== next.rest[index])) return false;
+	return drawn.body.every((line, index) => line === next.body[index]);
+}
+
+function room(width: number): number {
+	return Math.max(1, width - BODY_PAD);
+}
+
+/** Pi prints the time of a call itself, and the frame says it on the bottom rule instead. */
+function dropTime(lines: readonly string[]): string[] {
+	const at = lines.findLastIndex((line) => !isBlank(line));
+	if (at === -1) return [...lines];
+	if (!/^(Took|Elapsed) [\d.]/u.test(stripTerminalSequences(lines[at] ?? "").trim()))
+		return [...lines];
+	return lines.slice(0, at);
+}
+
+interface Clock {
+	/** When the model started writing the call, and when it finished. */
+	writingAt?: number;
+	writtenAt?: number;
+	/** When the call started running, and when it answered. */
+	startedAt?: number;
+	endedAt?: number;
+}
+
+/** Pi shares one state object between the two halves of a call. */
+function clockOf(context: { state: unknown }): Clock {
+	return context.state as Clock;
+}
+
+/** How long the model took to write the call. */
+function wroteFor(clock: Clock): string | undefined {
+	if (clock.writingAt === undefined || clock.writtenAt === undefined) return undefined;
+	return elapsed(clock.writtenAt - clock.writingAt);
+}
+
+function ranFor(clock: Clock, running: boolean): string | undefined {
+	if (clock.startedAt === undefined) return undefined;
+	const end = clock.endedAt ?? (running ? Date.now() : undefined);
+	return end === undefined ? undefined : elapsed(end - clock.startedAt);
+}
+
+/** How long the call has spent waiting to run, which only the call half of the frame asks for. */
+function elapsedOf(clock: Clock, context: { argsComplete: boolean }): string | undefined {
+	if (clock.writingAt === undefined) return undefined;
+	const from = context.argsComplete ? (clock.writtenAt ?? clock.writingAt) : clock.writingAt;
+	return elapsed(Date.now() - from);
+}
+
+function elapsed(ms: number): string {
+	const seconds = ms / 1000;
+	if (seconds < 60) return `${seconds.toFixed(1)}s`;
+	const total = Math.floor(seconds);
+	if (total < 3600) return `${Math.floor(total / 60)}m ${total % 60}s`;
+	return `${Math.floor(total / 3600)}h ${Math.floor((total % 3600) / 60)}m`;
+}
+
+/** Pi's renderers pad their part with blank lines, which the frame does not need. */
+function trim(lines: readonly string[]): string[] {
+	let [from, to] = [0, lines.length];
+	while (from < to && isBlank(lines[from])) from++;
+	while (to > from && isBlank(lines[to - 1])) to--;
+	return lines.slice(from, to);
+}
+
+/** A renderer that separates its parts with a blank line leaves a gap the frame does not need. */
+function withoutBlanks(lines: readonly string[]): string[] {
+	return lines.filter((line) => !isBlank(line));
+}
+
+function isBlank(line: string | undefined): boolean {
+	// A line of nothing but colour codes reads as blank, and pi's renderers end their parts with one.
+	return stripTerminalSequences(line ?? "").trim() === "";
+}
+
+export function rulingText(ruling: CallRuling, theme: Theme, expanded: boolean): string {
+	const color = PHASE_COLORS[stateOf(ruling.tone)];
+	let line = `${theme.fg(color, "\u25c8")} ${theme.fg(color, ruling.head)}`;
+	if (ruling.note) line += ` ${theme.fg("accent", "\u203a")} ${ruling.note}`;
+	if (ruling.why) line += `  ${theme.fg("muted", ruling.why)}`;
+	if (expanded && ruling.detail) line += ` ${theme.fg("dim", `(${ruling.detail})`)}`;
+	return line;
+}
+
+function stateOf(tone: RulingTone): Phase {
+	switch (tone) {
+		case "pending":
+			return "running";
+		case "success":
+			return "done";
+		default:
+			return "failed";
+	}
+}

package/src/desktop/palette.ts

@@ -1,193 +0,0 @@
-import type { ThemeColor } from "@earendil-works/pi-coding-agent";
-
-export const DESKTOP_THEME = "desktop";
-
-export type Mode = "dark" | "light";
-
-export interface DesktopColors {
-	mode: Mode;
-	roles: Readonly<Record<string, string>>;
-	terminal: Readonly<Record<string, string>>;
-}
-
-export interface ThemeJson {
-	$schema: string;
-	name: string;
-	vars: Record<string, string>;
-	colors: Record<string, string>;
-	export: { pageBg: string; cardBg: string; infoBg: string };
-}
-
-const HEX = /^#[0-9a-f]{6}$/i;
-
-export function parseDesktopColors(json: unknown, mode?: Mode): DesktopColors | undefined {
-	if (!isRecord(json) || !isRecord(json.colors) || !isRecord(json.dank16)) return undefined;
-	const chosen: Mode = mode ?? (json.mode === "light" ? "light" : "dark");
-	const roles = json.colors[chosen];
-	if (!isRecord(roles)) return undefined;
-
-	const terminal: Record<string, string> = {};
-	for (const [name, value] of Object.entries(json.dank16)) {
-		const hex = isRecord(value) ? (value[chosen] ?? value.default) : value;
-		if (typeof hex === "string" && HEX.test(hex)) terminal[name] = hex;
-	}
-
-	const material: Record<string, string> = {};
-	for (const [name, value] of Object.entries(roles)) {
-		if (typeof value === "string" && HEX.test(value)) material[name] = value;
-	}
-	return { mode: chosen, roles: material, terminal };
-}
-
-const REQUIRED_ROLES = [
-	"primary",
-	"secondary",
-	"tertiary",
-	"error",
-	"error_container",
-	"outline",
-	"outline_variant",
-	"on_surface",
-	"on_surface_variant",
-	"surface",
-	"surface_container_low",
-	"surface_container",
-	"surface_container_high",
-	"surface_container_highest",
-];
-const REQUIRED_TERMINAL = ["color1", "color2", "color3", "color6", "color9"];
-
-export function missingColors(colors: DesktopColors): string[] {
-	return [
-		...REQUIRED_ROLES.filter((role) => colors.roles[role] === undefined),
-		...REQUIRED_TERMINAL.filter((name) => colors.terminal[name] === undefined),
-	];
-}
-
-export function desktopTheme(colors: DesktopColors): ThemeJson {
-	const role = (name: string): string => colors.roles[name] ?? "#808080";
-	const term = (name: string): string => colors.terminal[name] ?? "#808080";
-
-	const vars: Record<string, string> = {
-		primary: role("primary"),
-		secondary: role("secondary"),
-		tertiary: role("tertiary"),
-		error: role("error"),
-		outline: role("outline"),
-		outlineVariant: role("outline_variant"),
-		text: role("on_surface"),
-		subtext: role("on_surface_variant"),
-		surface: role("surface"),
-		containerLow: role("surface_container_low"),
-		container: role("surface_container"),
-		containerHigh: role("surface_container_high"),
-		containerHighest: role("surface_container_highest"),
-		red: term("color1"),
-		green: term("color2"),
-		yellow: term("color3"),
-		cyan: term("color6"),
-		brightRed: term("color9"),
-		successBg: mix(role("surface_container_low"), term("color2"), 0.12),
-		errorBg: mix(role("surface_container_low"), role("error"), 0.14),
-		infoBg: mix(role("surface_container"), term("color3"), 0.1),
-	};
-
-	const colorsByToken: Record<ThemeColor | BackgroundToken, string> = {
-		accent: "primary",
-		border: "outline",
-		borderAccent: "primary",
-		borderMuted: "outlineVariant",
-		success: "green",
-		error: "error",
-		warning: "yellow",
-		muted: "subtext",
-		dim: "outline",
-		text: "text",
-		thinkingText: "subtext",
-
-		selectedBg: "containerHigh",
-		scrollbarTrack: "outlineVariant",
-		scrollbarThumb: "subtext",
-		searchMatchBg: "containerHighest",
-		searchMatchText: "text",
-		userMessageBg: "container",
-		userMessageText: "text",
-		customMessageBg: "containerLow",
-		customMessageText: "text",
-		customMessageLabel: "tertiary",
-		toolPendingBg: "containerLow",
-		toolSuccessBg: "successBg",
-		toolErrorBg: "errorBg",
-		toolTitle: "text",
-		toolOutput: "subtext",
-
-		mdHeading: "tertiary",
-		mdLink: "primary",
-		mdLinkUrl: "outline",
-		mdCode: "secondary",
-		mdCodeBlock: "text",
-		mdCodeBlockBorder: "outlineVariant",
-		mdQuote: "subtext",
-		mdQuoteBorder: "outlineVariant",
-		mdHr: "outlineVariant",
-		mdListBullet: "primary",
-
-		toolDiffAdded: "green",
-		toolDiffRemoved: "red",
-		toolDiffContext: "subtext",
-
-		syntaxComment: "outline",
-		syntaxKeyword: "primary",
-		syntaxFunction: "tertiary",
-		syntaxVariable: "text",
-		syntaxString: "green",
-		syntaxNumber: "yellow",
-		syntaxType: "cyan",
-		syntaxOperator: "subtext",
-		syntaxPunctuation: "subtext",
-
-		thinkingOff: "outlineVariant",
-		thinkingMinimal: "outline",
-		thinkingLow: "secondary",
-		thinkingMedium: "primary",
-		thinkingHigh: "tertiary",
-		thinkingXhigh: "brightRed",
-		thinkingMax: "red",
-
-		bashMode: "green",
-	};
-
-	return {
-		$schema:
-			"https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
-		name: DESKTOP_THEME,
-		vars,
-		colors: colorsByToken,
-		export: { pageBg: vars.surface ?? "", cardBg: vars.container ?? "", infoBg: vars.infoBg ?? "" },
-	};
-}
-
-type BackgroundToken =
-	| "selectedBg"
-	| "searchMatchBg"
-	| "userMessageBg"
-	| "customMessageBg"
-	| "toolPendingBg"
-	| "toolSuccessBg"
-	| "toolErrorBg";
-
-export function mix(base: string, tint: string, amount: number): string {
-	const a = channels(base);
-	const b = channels(tint);
-	const mixed = a.map((value, index) => Math.round(value + ((b[index] ?? value) - value) * amount));
-	return `#${mixed.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
-}
-
-function channels(hex: string): number[] {
-	const value = HEX.test(hex) ? hex.slice(1) : "808080";
-	return [0, 2, 4].map((offset) => Number.parseInt(value.slice(offset, offset + 2), 16));
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}