magus-cli 7.3.0 → 7.4.0

package/src/ui/renderers/cliToolRenderers.tsx

@@ -6,16 +6,46 @@ import {
 } from "../../services/cli-tool-commands.js";
 import { formatCommand } from "../../utils/command-utils.js";
 import {
+	type CliToolEnterAction,
 	type CliToolRow,
+	cliToolEnterAction,
 	cliToolStatusText,
 	displayVersion,
 	isInstalled,
 } from "../adapters/cliToolsAdapter.js";
+import { rowLead } from "../components/primitives/index.js";
 import { type UiColor, theme } from "../theme.js";
 import type { StatusTone } from "./pluginStatusText.js";
+import { wrapText } from "./styleRenderers.js";
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
+/** The Enter chip's background, by what Enter does. */
+const ENTER_CHIP_BG: Record<CliToolEnterAction["kind"], UiColor> = {
+	install: theme.colors.success,
+	update: theme.colors.warning,
+	"update-anyway": theme.colors.muted,
+	reinstall: theme.colors.muted,
+};
+
+/** "Status   ", "Update   " …: every detail label is this many columns. */
+const LABEL_COLS = 9;
+
+/**
+ * A detail value broken at SPACES, to the columns beside the label.
+ *
+ * Left to itself OpenTUI breaks a long line at the column edge, mid-token, and
+ * these values are commands and notes carrying paths. MEASURED at 150 columns
+ * (a 63-cell value column): `npm install -g --prefix /Users/…/node/v24.14.0
+ * @charmland/crush@latest` broke after `v24.14.`, with `0 @charmland/…` below
+ * — which reads as two paths, neither real. Broken here, every token that fits
+ * the column stays whole. One longer than the column (that same path at 100
+ * columns, where the value column is 38 cells) still has to break.
+ */
+function wrapValue(text: string, width: number): string {
+	return wrapText(text, width - LABEL_COLS).join("\n");
+}
+
 /**
  * The uninstall command as a line the reader can copy.
  *
@@ -93,7 +123,7 @@ export function renderCliToolRow(
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{" "}
+				{rowLead(true)}
 				{icon} {tool.displayName}
 				{versionText}
 				{methodTag}
@@ -104,7 +134,10 @@ export function renderCliToolRow(
 
 	return (
 		<text fg={theme.colors.text}>
-			<span fg={iconColor}> {icon}</span>
+			<span fg={iconColor}>
+				{rowLead(false)}
+				{icon}
+			</span>
 			<span fg={theme.colors.text}> {tool.displayName}</span>
 			{versionText ? (
 				<span fg={theme.colors.success}>{versionText}</span>
@@ -123,6 +156,8 @@ export function renderCliToolRow(
 
 export function renderCliToolDetail(
 	row: CliToolRow | undefined,
+	/** Usable detail-panel columns (`detailPanelWidth`); the scrollbox does not constrain width. */
+	width: number,
 ): React.ReactNode {
 	if (!row) {
 		return (
@@ -144,15 +179,13 @@ export function renderCliToolDetail(
 	const brewFormula = install?.brewFormula;
 	const hasConflict = allMethods.length > 1;
 	const state = status?.state;
+	const enter = cliToolEnterAction(row);
 
 	return (
-		<box flexDirection="column">
-			<box marginBottom={1}>
+		<box flexDirection="column" width={width}>
+			<box flexDirection="row" marginBottom={1}>
 				<text fg={theme.colors.info}>
-					<strong>
-						{"⚙ "}
-						{tool.displayName}
-					</strong>
+					<strong>{tool.displayName}</strong>
 				</text>
 				{state === "upgrade" ? <text fg={theme.colors.warning}> ⬆</text> : null}
 				{hasConflict ? <text fg={theme.colors.danger}> !</text> : null}
@@ -161,36 +194,58 @@ export function renderCliToolDetail(
 			<text fg={theme.colors.muted}>{tool.description}</text>
 
 			<box marginTop={1} flexDirection="column">
-				<box>
-					<text fg={theme.colors.muted}>{"Status   "}</text>
+				<box flexDirection="row">
+					<text fg={theme.colors.muted} flexShrink={0}>
+						{"Status   "}
+					</text>
 					{checking || !status ? (
-						<text fg={theme.colors.muted}>{"● Checking..."}</text>
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"● Checking..."}
+						</text>
 					) : state === "install" ? (
-						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"○ Not installed"}
+						</text>
 					) : state === "upgrade" ? (
 						<text fg={theme.colors.warning}>{"● Update available"}</text>
 					) : state === "unknown" ? (
-						<text fg={theme.colors.warning}>{"? Unverified"}</text>
+						// A version that was read but cannot be checked for updates is
+						// still a version: say "installed", and let Why say the rest.
+						<text fg={theme.colors.warning}>
+							{status.installed
+								? "? Installed — not checked"
+								: "? Version unreadable"}
+						</text>
 					) : (
 						<text fg={theme.colors.success}>{"● Up to date"}</text>
 					)}
 				</box>
 				{state === "unknown" && status?.note ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Why      "}</text>
-						<text fg={theme.colors.warning}>{status.note}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Why      "}
+						</text>
+						<text fg={theme.colors.warning} minWidth={0}>
+							{wrapValue(status.note, width)}
+						</text>
 					</box>
 				) : null}
 				{/* An upgrade that also takes the tool over from another installer. */}
 				{status?.adopted ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Note     "}</text>
-						<text fg={theme.colors.warning}>{status.adopted}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Note     "}
+						</text>
+						<text fg={theme.colors.warning} minWidth={0}>
+							{status.adopted}
+						</text>
 					</box>
 				) : null}
 				{status?.installed ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Version  "}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Version  "}
+						</text>
 						<text fg={theme.colors.text}>
 							<span fg={theme.colors.success}>
 								{displayVersion(status.installed)}
@@ -204,33 +259,51 @@ export function renderCliToolDetail(
 						</text>
 					</box>
 				) : status?.latest ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Latest   "}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Latest   "}
+						</text>
 						<text fg={theme.colors.text}>{displayVersion(status.latest)}</text>
 					</box>
 				) : null}
 				{status?.pin ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Pinned   "}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Pinned   "}
+						</text>
 						<text fg={theme.colors.text}>{displayVersion(status.pin)}</text>
 					</box>
 				) : null}
 				{installed && updateCommand ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Update   "}</text>
-						<text fg={theme.colors.accent}>{formatCommand(updateCommand)}</text>
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Update   "}
+						</text>
+						<text fg={theme.colors.info} minWidth={0}>
+							{wrapValue(formatCommand(updateCommand), width)}
+						</text>
 					</box>
 				) : !installed && !checking ? (
-					<box>
-						<text fg={theme.colors.muted}>{"Install  "}</text>
-						<text fg={theme.colors.accent}>
-							{formatCommand(installCommand)}
+					<box flexDirection="row">
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{"Install  "}
+						</text>
+						<text fg={theme.colors.info} minWidth={0}>
+							{wrapValue(formatCommand(installCommand), width)}
 						</text>
 					</box>
 				) : null}
-				<box>
-					<text fg={theme.colors.muted}>{"Website  "}</text>
-					<text fg={theme.colors.link}>{tool.website}</text>
+				<box flexDirection="row">
+					<text fg={theme.colors.muted} flexShrink={0}>
+						{"Website  "}
+					</text>
+					{/* A URL has no spaces, so word wrap cannot break it: it breaks anywhere,
+					    inside the width the label leaves. */}
+					<box flexGrow={1} minWidth={0}>
+						<text fg={theme.colors.info} wrapMode="char">
+							{tool.website}
+						</text>
+					</box>
 				</box>
 			</box>
 
@@ -268,7 +341,7 @@ export function renderCliToolDetail(
 							</text>
 						</box>
 					))}
-					<box marginTop={1}>
+					<box flexDirection="row" marginTop={1}>
 						<text bg={theme.colors.danger} fg={theme.hints.fg}>
 							{" "}
 							c{" "}
@@ -279,47 +352,36 @@ export function renderCliToolDetail(
 			) : null}
 
 			{/* Actions */}
+			{/* The words come from `cliToolEnterAction`, which the footer hint and
+			    the Enter handler read too — so all three name the same action. */}
 			<box marginTop={2} flexDirection="column">
-				{checking || !status ? null : !installed ? (
-					<box>
-						<text bg={theme.colors.success} fg={theme.hints.fg}>
-							{" "}
-							Enter{" "}
-						</text>
-						<text fg={theme.colors.muted}> Install</text>
-						<text fg={theme.colors.dim}> {formatCommand(installCommand)}</text>
-					</box>
-				) : state === "upgrade" ? (
-					<box>
-						<text bg={theme.colors.warning} fg={theme.hints.fg}>
-							{" "}
-							Enter{" "}
-						</text>
-						<text fg={theme.colors.muted}>
-							{" "}
-							Update
-							{status.target ? ` to ${displayVersion(status.target)}` : ""}
-						</text>
-					</box>
-				) : (
+				{enter ? (
 					<box flexDirection="column">
-						<box>
-							<text bg={theme.colors.muted} fg={theme.hints.fg}>
+						<box flexDirection="row">
+							<text bg={ENTER_CHIP_BG[enter.kind]} fg={theme.hints.fg}>
 								{" "}
 								Enter{" "}
 							</text>
-							<text fg={theme.colors.muted}>
-								{state === "unknown" ? " Update anyway" : " Reinstall"}
-							</text>
+							<text fg={theme.colors.muted}> {enter.detail}</text>
+							{enter.kind === "install" ? (
+								<text fg={theme.colors.dim}>
+									{" "}
+									{formatCommand(enter.command)}
+								</text>
+							) : null}
 						</box>
 						{/* The status warns that this command may not replace the
 						    running binary; the menu still offers it, as an explicit
 						    user action, and says so beside it. */}
-						{status.reason === "not-managed" && status.note ? (
-							<text fg={theme.colors.warning}>{`  ${status.note}`}</text>
+						{enter.kind === "update-anyway" &&
+						status?.reason === "not-managed" &&
+						status.note ? (
+							<text fg={theme.colors.warning}>
+								{wrapText(`  ${status.note}`, width).join("\n")}
+							</text>
 						) : null}
 					</box>
-				)}
+				) : null}
 			</box>
 		</box>
 	);

package/src/ui/renderers/gitignoreRenderers.tsx

@@ -1,5 +1,7 @@
 import type React from "react";
 import type { ResolvedRule, Violation } from "../../types/gitignore.js";
+import { rowLead } from "../components/primitives/SelectableRow.js";
+import { truncate } from "../text-width.js";
 import { theme } from "../theme.js";
 
 /**
@@ -11,69 +13,65 @@ export interface RuleRow {
 	violations: Violation[];
 }
 
-// Two color channels that never collide:
-//   • Badge color = direction (where the item ends up): green = tracked by git,
-//     reddish = ignored/dropped from git. Same on clean AND violation rows.
-//   • Filename color = severity: dim gray when fine, red when it's a violation.
-// No row background tints — red is reserved entirely for "needs attention".
-const TRACK_FG = theme.colors.success; // green — item ends up tracked by git
-const IGNORE_FG = theme.colors.danger; // reddish — item ends up ignored / dropped
-const VIOLATION_PATH_FG = theme.colors.danger; // bright red filename = look here
-const CLEAN_PATH_FG = theme.colors.muted;
-const SELECTED_BG = theme.surface.bg; // faint slate highlight for the cursor row
+// One colour channel, and it means one thing: something is wrong.
+//
+//   • The action word ("ignore" / "track") is what the rule INTENDS. An intended
+//     state is not a problem, so it is neutral on every row. It used to be red
+//     for "ignore" and green for "track", which put the danger hue on every
+//     ignore rule in the list — half the screen read as broken while nothing was.
+//   • A violation is what is wrong, so its path wears `danger`, and its action
+//     sits on a neutral chip so the row reads as "this needs fixing" at a glance
+//     without the chip's colour claiming anything the word does not.
+//   • A clean row stays quiet: action and path in `muted`/`text`.
+const INTENT_FG = theme.colors.muted;
+const CLEAN_PATH_FG = theme.colors.text;
+const VIOLATION_PATH_FG = theme.colors.danger;
+const CHIP_BG = theme.colors.dim;
+const CHIP_FG = theme.hints.fg;
 
-// Violation badges are solid chips so the required direction reads at a glance:
-// green chip = will be tracked, red chip = will be ignored/dropped.
-const TRACK_CHIP_BG = theme.colors.success;
-const IGNORE_CHIP_BG = theme.colors.danger;
-const CHIP_FG = theme.colors.text;
-
-// The only marker is the cursor: ▶ on the selected row, blank otherwise.
-// Action (track/ignore) is read from the badge word and, for clean items,
-// from the group the row sits under — so no per-row dot is needed.
-const MARKER_SELECTED = "▶";
-const MARKER_NONE = " ";
-
-// Layout: "  M action  path" — keep the prefix compact so the narrow terminal
+// Layout: "▌ action  path" — keep the prefix compact so the narrow terminal
 // case still has room for the path without wrapping.
 const MAX_PATH_LEN = 22;
 
-function truncatePath(p: string): string {
-	return p.length > MAX_PATH_LEN ? `${p.slice(0, MAX_PATH_LEN - 1)}…` : p;
-}
-
 export function renderRuleRow(
 	row: RuleRow,
 	isSelected: boolean,
 ): React.ReactNode {
 	const { rule, violations } = row;
-	const path = truncatePath(rule.pattern);
+	const path = truncate(rule.pattern, MAX_PATH_LEN);
 	const key = `${rule.action}:${rule.pattern}`;
-	// Badge text padded to a fixed width so paths line up in a column.
+	// Badge text padded to a fixed width, and drawn in the same padded cell on
+	// every row — chip or not — so paths line up in one column.
 	const badge = rule.action === "ignore" ? "ignore" : "track ";
-	const badgeFg = rule.action === "ignore" ? IGNORE_FG : TRACK_FG;
 	const suffix = violations.length > 1 ? ` +${violations.length - 1}` : "";
-	const rowBg = isSelected ? SELECTED_BG : undefined;
-	const marker = isSelected ? MARKER_SELECTED : MARKER_NONE;
-	const isViolation = violations.length > 0;
+	const lead = `${rowLead(isSelected)} `;
+
+	// The selection owns the colour channel, as on every other screen: the mark
+	// and the fill say where the cursor is, the words say the rest.
+	if (isSelected) {
+		return (
+			<text key={key} bg={theme.selection.bg} fg={theme.selection.fg}>
+				{lead}
+				{` ${badge} `}
+				{`  ${path}${suffix} `}
+			</text>
+		);
+	}
 
-	if (isViolation) {
-		// Solid badge chip + red filename. The chip color is the fix direction.
-		const chipBg = rule.action === "ignore" ? IGNORE_CHIP_BG : TRACK_CHIP_BG;
+	if (violations.length > 0) {
 		return (
-			<text key={key} bg={rowBg}>
-				<span fg={VIOLATION_PATH_FG}>{`  ${marker} `}</span>
-				<span bg={chipBg} fg={CHIP_FG}>{` ${badge} `}</span>
+			<text key={key} fg={theme.colors.text}>
+				<span fg={VIOLATION_PATH_FG}>{lead}</span>
+				<span bg={CHIP_BG} fg={CHIP_FG}>{` ${badge} `}</span>
 				<span fg={VIOLATION_PATH_FG}>{`  ${path}${suffix}`}</span>
 			</text>
 		);
 	}
 
-	// Clean row: flat colored badge word, dim path, no chip.
 	return (
-		<text key={key} bg={rowBg}>
-			<span fg={badgeFg}>{`  ${marker} `}</span>
-			<span fg={badgeFg}>{badge}</span>
+		<text key={key} fg={theme.colors.text}>
+			<span fg={INTENT_FG}>{lead}</span>
+			<span fg={INTENT_FG}>{` ${badge} `}</span>
 			<span fg={CLEAN_PATH_FG}>{`  ${path}`}</span>
 		</text>
 	);

package/src/ui/renderers/markdownRenderer.tsx

@@ -55,7 +55,7 @@ function inlineSpans(text: string, keyPrefix: string): React.ReactNode[] {
 		}
 		if (match[1]) {
 			nodes.push(
-				<span key={`${keyPrefix}-c${i}`} fg={theme.colors.link}>
+				<span key={`${keyPrefix}-c${i}`} fg={theme.colors.info}>
 					{match[1].slice(1, -1)}
 				</span>,
 			);
@@ -212,7 +212,7 @@ export function renderMarkdown(
 			while (i < lines.length && !/^\s*```/.test(lines[i])) {
 				const code = lines[i];
 				push(
-					<text key={`fc${i}`} fg={theme.colors.link}>
+					<text key={`fc${i}`} fg={theme.colors.info}>
 						{`  ${code}` || " "}
 					</text>,
 				);

package/src/ui/renderers/mcpRenderers.tsx

@@ -1,7 +1,15 @@
 import type React from "react";
 import type { McpServer } from "../../types/index.js";
+import { rowLead } from "../components/primitives/index.js";
 import { theme } from "../theme.js";
 
+/**
+ * The MCP-server glyph, shared with the Plugins screen's component chips.
+ * Single-width on purpose: `⚡` (U+26A1) is East-Asian-Width Wide, two cells,
+ * which shifted everything after it on the line.
+ */
+const SERVER_ICON = "⬢";
+
 // ─── List item types ───────────────────────────────────────────────────────────
 
 export type McpListItem =
@@ -16,8 +24,10 @@ export function renderMcpRow(
 	isSelected: boolean,
 ): React.ReactNode {
 	if (item.kind === "category") {
+		// A section heading, so the accent — as a word, never as the fill the
+		// cursor wears.
 		return (
-			<text fg={theme.selection.bg}>
+			<text fg={theme.colors.accent}>
 				<strong>
 					{"▸ "}
 					{item.label}
@@ -33,15 +43,19 @@ export function renderMcpRow(
 	if (isSelected) {
 		return (
 			<text bg={theme.selection.bg} fg={theme.selection.fg}>
-				{" "}
-				{icon} {server.name}{" "}
+				{rowLead(true)}
+				{icon} {server.name}
+				{server.requiresConfig ? " ⚙" : ""}{" "}
 			</text>
 		);
 	}
 
 	return (
 		<text fg={theme.colors.text}>
-			<span fg={iconColor}>{icon}</span>
+			<span fg={iconColor}>
+				{rowLead(false)}
+				{icon}
+			</span>
 			<span fg={theme.colors.text}> {server.name}</span>
 			{server.requiresConfig ? <span fg={theme.colors.warning}> ⚙</span> : null}
 		</text>
@@ -75,10 +89,10 @@ export function renderMcpDetail(
 
 	return (
 		<box flexDirection="column">
-			<box marginBottom={1}>
+			<box flexDirection="row" marginBottom={1}>
 				<text fg={theme.colors.info}>
 					<strong>
-						{"⚡ "}
+						{`${SERVER_ICON} `}
 						{server.name}
 					</strong>
 				</text>
@@ -90,7 +104,7 @@ export function renderMcpDetail(
 			<text fg={theme.colors.muted}>{server.description}</text>
 
 			<box marginTop={1} flexDirection="column">
-				<box>
+				<box flexDirection="row">
 					<text fg={theme.colors.muted}>{"Status "}</text>
 					{isInstalled ? (
 						<text fg={theme.colors.success}>{"● Installed"}</text>
@@ -98,25 +112,25 @@ export function renderMcpDetail(
 						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
 					)}
 				</box>
-				<box>
+				<box flexDirection="row">
 					<text fg={theme.colors.muted}>{"Type "}</text>
 					<text fg={theme.colors.text}>
 						{server.type === "http" ? "HTTP" : "Command"}
 					</text>
 				</box>
 				{server.type === "http" ? (
-					<box>
+					<box flexDirection="row">
 						<text fg={theme.colors.muted}>{"URL "}</text>
-						<text fg={theme.colors.link}>{server.url}</text>
+						<text fg={theme.colors.info}>{server.url}</text>
 					</box>
 				) : (
-					<box>
+					<box flexDirection="row">
 						<text fg={theme.colors.muted}>{"Command "}</text>
 						<text fg={theme.colors.info}>{server.command}</text>
 					</box>
 				)}
 				{server.requiresConfig ? (
-					<box>
+					<box flexDirection="row">
 						<text fg={theme.colors.muted}>{"Config "}</text>
 						<text fg={theme.colors.warning}>
 							{server.configFields?.length ?? 0} fields required
@@ -127,7 +141,7 @@ export function renderMcpDetail(
 
 			<box marginTop={2}>
 				{isInstalled ? (
-					<box>
+					<box flexDirection="row">
 						<text bg={theme.colors.danger} fg={theme.hints.fg}>
 							{" "}
 							Enter{" "}
@@ -135,7 +149,7 @@ export function renderMcpDetail(
 						<text fg={theme.colors.muted}> Remove server</text>
 					</box>
 				) : (
-					<box>
+					<box flexDirection="row">
 						<text bg={theme.colors.success} fg={theme.hints.fg}>
 							{" "}
 							Enter{" "}

package/src/ui/renderers/modelRenderers.tsx

@@ -30,7 +30,7 @@ import {
 	SelectableRow,
 } from "../components/primitives/index.js";
 import { effortInk, trackFill } from "../theme-mode.js";
-import { type UiColor, theme } from "../theme.js";
+import { type BadgeTone, type UiColor, theme } from "../theme.js";
 import {
 	type AgentRow,
 	type AgentTableLayout,
@@ -85,14 +85,13 @@ const STATE_TONE: Record<ModelsState, UiColor> = {
 	unhooked: theme.colors.danger,
 };
 
-/** Badge tone for the header row. `unhooked` is red with `invalid`: both route nothing. */
-const STATE_CATEGORY: Record<ModelsState, "gray" | "green" | "yellow" | "red"> =
-	{
-		off: "gray",
-		on: "green",
-		invalid: "red",
-		unhooked: "red",
-	};
+/** Badge tone for the header row. `unhooked` is danger with `invalid`: both route nothing. */
+const STATE_CATEGORY: Record<ModelsState, BadgeTone> = {
+	off: "neutral",
+	on: "success",
+	invalid: "danger",
+	unhooked: "danger",
+};
 
 /**
  * How many validation errors to draw before summarising the rest.
@@ -131,9 +130,9 @@ function Chip({
 	tone,
 }: {
 	label: string;
-	tone: keyof typeof theme.category;
+	tone: BadgeTone;
 }): React.ReactNode {
-	const colors = theme.category[tone];
+	const colors = theme.badge[tone];
 	return (
 		<span bg={colors.bg} fg={colors.fg}>
 			<strong>{` ${label} `}</strong>
@@ -206,7 +205,7 @@ function StateBlock({
 					<text fg={theme.colors.text}>
 						<Chip
 							label={`${isInvalid ? "errors" : "drift"} ${status.drift.length}`}
-							tone={isInvalid ? "red" : "yellow"}
+							tone={isInvalid ? "danger" : "warning"}
 						/>
 					</text>
 					{status.drift.slice(0, MAX_DRIFT_LINES).map((line) => (
@@ -231,7 +230,7 @@ function StateBlock({
 			{status.warnings.length > 0 ? (
 				<box flexDirection="column" marginTop={1}>
 					<text fg={theme.colors.text}>
-						<Chip label={`warnings ${status.warnings.length}`} tone="yellow" />
+						<Chip label={`warnings ${status.warnings.length}`} tone="warning" />
 					</text>
 					{status.warnings.map((line) => (
 						<Wrapped

package/src/ui/renderers/modelVisuals.tsx

@@ -55,8 +55,6 @@ import { type UiColor, theme } from "../theme.js";
  * `theme-mode.ts`, so the palette is a theme decision and this file is a consumer of one.
  */
 
-export type CategoryTone = keyof typeof theme.category;
-
 /**
  * The ink a model's NAME is written in.
  *