@gavin-hu/my-pi-agent 0.8.1 → 0.10.0

package/extensions/bytefly/chrome.ts

@@ -0,0 +1,97 @@
+/**
+ * The transcript rail and the shared `chrome` section of `bytefly.json`.
+ *
+ * The rail is the vertical stroke that leads a block's body — a tool result, a
+ * notice row — while the headline stays at the margin. Its glyph is the one
+ * configurable part; the geometry is fixed by `lib/tui/indent.ts`. A glyph must
+ * be exactly one visible column, or it would push the body right and drift the
+ * width math, so `normalizeChromeConfig` rejects anything else and falls back.
+ *
+ * The value is read at `session_start`/`session_tree` (nothing watches the
+ * document), held in a `RailSource` closure created once per load, and read by
+ * the renderers at render time, so no module state lives here.
+ */
+
+import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { cleanString, loadConfigSection } from "../../lib/config.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
+import { paint, type TuiRole } from "../../lib/tui/tokens.ts";
+
+/** How a railed block reads at a glance. */
+export type RailStatus = "info" | "ok" | "warn" | "bad";
+
+/**
+ * Status to design role: a rail is neutral by default, so a finished or merely
+ * informational block draws no colour and only `warn` and `bad` stand out. A
+ * surface whose `info` means *active* rather than *informational* brightens it
+ * itself — a running tool result takes the accent (see `block/config.ts`).
+ */
+export const RAIL_ROLES: Readonly<Record<RailStatus, TuiRole>> = {
+	info: "info",
+	ok: "faint",
+	warn: "warn",
+	bad: "bad",
+};
+
+/** The rail glyph, painted in the role. `lib/tui/indent.ts` adds the gap. */
+export function railGlyph(theme: Theme, role: TuiRole, glyph: string): string {
+	return paint(theme, role, glyph);
+}
+
+/** Transcript chrome presentation. */
+export interface ChromeConfig {
+	/** The rail glyph: exactly one visible column. */
+	rail: string;
+}
+
+/** The default rail glyph, from the shared vocabulary. */
+export const DEFAULT_RAIL_GLYPH: string = GLYPHS.divider;
+
+export const DEFAULT_CHROME_CONFIG: ChromeConfig = { rail: DEFAULT_RAIL_GLYPH };
+
+/** Whether `value` is a single, unstyled terminal column. */
+function isRailGlyph(value: string): boolean {
+	// Control characters first: a bare ESC confuses a width measurement.
+	if (/[\u0000-\u001f\u007f]/.test(value)) return false;
+	return [...value].length === 1 && visibleWidth(value) === 1;
+}
+
+/** Validate the `chrome` section over `base`. Total: never throws, never guesses. */
+export function normalizeChromeConfig(raw: Record<string, unknown> | undefined, base: ChromeConfig): ChromeConfig {
+	if (!raw) return base;
+	const rail = cleanString(raw.rail, "");
+	return { rail: isRailGlyph(rail) ? rail : base.rail };
+}
+
+/** Effective chrome config for `cwd` (defaults, then the shared `chrome` section). */
+export function loadChromeConfig(cwd: string): ChromeConfig {
+	return loadConfigSection(cwd, "chrome", DEFAULT_CHROME_CONFIG, normalizeChromeConfig);
+}
+
+/** Where a render-time surface reads the current rail glyph. */
+export interface RailSource {
+	/** The configured glyph. */
+	resolve(): string;
+	/** Replace the glyph; a value that is not one column keeps the previous one. */
+	set(glyph: string): void;
+}
+
+/** A store holding the configured rail glyph, created once per extension load. */
+export function createRailSource(initial: string = DEFAULT_RAIL_GLYPH): RailSource {
+	let glyph = isRailGlyph(initial) ? initial : DEFAULT_RAIL_GLYPH;
+	return {
+		resolve: () => glyph,
+		set(next: string) {
+			if (isRailGlyph(next)) glyph = next;
+		},
+	};
+}
+
+/** Register the chrome lifecycle and hand back the rail source it keeps current. */
+export function registerChrome(pi: ExtensionAPI, rail: RailSource = createRailSource()): RailSource {
+	const load = (ctx: ExtensionContext): void => rail.set(loadChromeConfig(ctx.cwd).rail);
+	pi.on("session_start", (_event, ctx) => load(ctx));
+	pi.on("session_tree", (_event, ctx) => load(ctx));
+	return rail;
+}

package/extensions/bytefly/doctor/format.ts

@@ -12,7 +12,8 @@ import type { Theme } from "@earendil-works/pi-coding-agent";
 import { wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import { sanitizeLine } from "../../../lib/format.ts";
 import type { ExtensionReport, Finding, FindingSeverity } from "../../../lib/requirements.ts";
-import { GLYPHS } from "../../../lib/ui.ts";
+import { GLYPHS } from "../../../lib/tui/glyphs.ts";
+import { paint, type TuiRole } from "../../../lib/tui/tokens.ts";
 
 /** Counts the report headline uses. */
 export interface ReportCounts {
@@ -102,15 +103,40 @@ export function formatWarning(findings: readonly Finding[]): string {
 		byExtension.set(finding.extension, list);
 	}
 	const parts = [...byExtension].map(([extension, checks]) => `${sanitizeLine(extension)} (${checks.join(", ")})`);
-	return `doctor: missing ${parts.join("; ")} — run /doctor`;
+	return `doctor: missing ${parts.join("; ")} — run /bytefly doctor`;
 }
 
-/** The severity glyph, from the shared vocabulary. */
+/** The design role a severity is drawn in. */
+export function severityRole(severity: FindingSeverity): TuiRole {
+	switch (severity) {
+		case "missing":
+			return "bad";
+		case "degraded":
+			return "warn";
+		case "info":
+			return "faint";
+		default:
+			return "ok";
+	}
+}
+
+/** The bare severity glyph, from the shared vocabulary. */
+export function severityGlyphChar(severity: FindingSeverity): string {
+	switch (severity) {
+		case "missing":
+			return GLYPHS.cross;
+		case "degraded":
+			return GLYPHS.warn;
+		case "info":
+			return GLYPHS.disabled;
+		default:
+			return GLYPHS.check;
+	}
+}
+
+/** The severity glyph, themed by role. */
 export function severityGlyph(severity: FindingSeverity, theme: Theme): string {
-	if (severity === "missing") return theme.fg("error", GLYPHS.cross);
-	if (severity === "degraded") return theme.fg("warning", GLYPHS.warn);
-	if (severity === "info") return theme.fg("dim", GLYPHS.disabled);
-	return theme.fg("success", GLYPHS.check);
+	return paint(theme, severityRole(severity), severityGlyphChar(severity));
 }
 
 /** The severity that represents an extension: worst finding wins. */
@@ -147,7 +173,7 @@ export function detailLines(
 	const budget = Math.max(1, rows);
 	const shown = includeInfo ? report.findings : report.findings.filter((finding) => finding.severity !== "info");
 	if (shown.length === 0) {
-		return [`  ${theme.fg("dim", report.enabled ? "no problems" : "disabled")}`];
+		return [`  ${paint(theme, "faint", report.enabled ? "no problems" : "disabled")}`];
 	}
 
 	const lines: string[] = [];
@@ -160,10 +186,10 @@ export function detailLines(
 		}
 		if (finding.hint) {
 			for (const line of wrapTextWithAnsi(`→ ${sanitizeLine(finding.hint)}`, Math.max(1, width - 4))) {
-				lines.push(`    ${theme.fg("dim", line)}`);
+				lines.push(`    ${paint(theme, "faint", line)}`);
 			}
 		}
 	}
 	if (lines.length <= budget) return lines;
-	return [...lines.slice(0, budget - 1), `  ${theme.fg("dim", "…")}`];
+	return [...lines.slice(0, budget - 1), `  ${paint(theme, "faint", "…")}`];
 }

package/extensions/bytefly/doctor/tools.ts

@@ -8,8 +8,10 @@
  */
 
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { sanitizeLine } from "../../../lib/format.ts";
 import { missingFindings } from "../../../lib/requirements.ts";
-import { reuseText, toolDetails } from "../../../lib/tui.ts";
+import { reuseText, toolDetails } from "../../../lib/tui/chrome.ts";
+import { paint, type TuiRole } from "../../../lib/tui/tokens.ts";
 import { formatExtension, formatReport, isProblemSeverity } from "./format.ts";
 import type { DoctorRuntime } from "./runtime.ts";
 import { DoctorOutput, DoctorParams, TOOL_NAME, type DoctorArgs, type DoctorStructured } from "./schema.ts";
@@ -91,22 +93,24 @@ export function registerTools(pi: ExtensionAPI, runtime: DoctorRuntime): void {
 
 		renderCall(args, theme, context) {
 			const input = args as DoctorArgs;
-			const scope = `${input.extension ? ` ${input.extension}` : ""}${input.refresh ? " (refresh)" : ""}`;
+			const scope = typeof input.extension === "string" && input.extension ? sanitizeLine(input.extension) : "";
 			const text = reuseText(context?.lastComponent);
-			text.setText(`${theme.fg("toolTitle", "doctor")}${theme.fg("dim", scope)}`);
+			text.setText(
+				`${theme.fg("toolTitle", theme.bold(TOOL_NAME))}${scope ? ` ${paint(theme, "label", scope)}` : ""}${input.refresh ? paint(theme, "faint", " (refresh)") : ""}`,
+			);
 			return text;
 		},
 
 		renderResult(result, _options, theme, context) {
 			const structured = toolDetails<DoctorStructured>(result.details);
-			const tone = (structured?.missing ?? 0) > 0 ? "error" : (structured?.degraded ?? 0) > 0 ? "warning" : "success";
+			const tone: TuiRole = (structured?.missing ?? 0) > 0 ? "bad" : (structured?.degraded ?? 0) > 0 ? "warn" : "ok";
 			const text = reuseText(context?.lastComponent);
 			if (!structured) {
 				const first = result.content[0];
-				text.setText(first?.type === "text" ? first.text : theme.fg("muted", "doctor: no result"));
+				text.setText(first?.type === "text" ? first.text : paint(theme, "meta", "doctor: no result"));
 				return text;
 			}
-			text.setText(theme.fg(tone, summaryLines(structured).join("\n")));
+			text.setText(paint(theme, tone, summaryLines(structured).join("\n")));
 			return text;
 		},
 	});

package/extensions/bytefly/footer/config.ts

@@ -7,7 +7,7 @@
  * configuration is `bytefly.json`, read by `../price/config.ts`.
  */
 
-import { GLYPHS, SEPARATORS, STATUS_KEYS } from "../../../lib/ui.ts";
+import { GLYPHS, SEPARATORS, STATUS_KEYS } from "../../../lib/tui/glyphs.ts";
 
 export const CONFIG = {
 	/** Context percentage thresholds. */

package/extensions/bytefly/footer/render/format.ts

@@ -6,9 +6,10 @@
  */
 
 import type { ThinkingLevel } from "@earendil-works/pi-agent-core";
-import type { ThemeColor } from "@earendil-works/pi-coding-agent";
 import { stripTerminalSequences, truncateToWidth } from "@earendil-works/pi-tui";
 import { shortenPath } from "../../../../lib/format.ts";
+import { gaugeRole } from "../../../../lib/tui/gauge.ts";
+import type { TuiRole } from "../../../../lib/tui/tokens.ts";
 import { CONFIG } from "../config.ts";
 import { DEFAULT_CURRENCY } from "../price/config.ts";
 import type { Currency } from "../price/types.ts";
@@ -65,23 +66,9 @@ export function formatCwd(cwd: string, home: string | undefined, level: 0 | 1 |
 	return parts.length <= 2 ? shortened : `…/${parts.slice(-2).join("/")}`;
 }
 
-/** Filled/empty block counts for a percentage across `blocks` cells. */
-export function computeGauge(percent: number | null, blocks: number): { filled: number; empty: number } {
-	if (blocks <= 0) return { filled: 0, empty: 0 };
-	if (percent === null) return { filled: 0, empty: blocks };
-	const clamped = Math.max(0, Math.min(100, percent));
-	// Floor so the bar is only full at 100%; force one block for any non-zero
-	// usage so a small percentage is still visible.
-	const filled = Math.max(clamped > 0 ? 1 : 0, Math.floor((clamped / 100) * blocks));
-	return { filled, empty: blocks - filled };
-}
-
-/** Gauge color for a context percentage. Neutral until it crosses a threshold. */
-export function contextColor(percent: number | null): ThemeColor {
-	if (percent === null) return "muted";
-	if (percent > CONFIG.thresholds.danger) return "error";
-	if (percent > CONFIG.thresholds.warn) return "warning";
-	return "muted";
+/** The design role a context percentage is drawn in. Neutral until it crosses a threshold. */
+export function contextRole(percent: number | null): TuiRole {
+	return gaugeRole(percent, CONFIG.thresholds);
 }
 
 const THINKING_TOKENS: Record<ThinkingLevel, ThinkingColor> = {

package/extensions/bytefly/footer/render/layout.ts

@@ -10,6 +10,7 @@
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { paint } from "../../../../lib/tui/tokens.ts";
 import { CONFIG } from "../config.ts";
 import type { LineSpec, Segment } from "../types.ts";
 
@@ -135,5 +136,5 @@ export function renderLine(spec: LineSpec, width: number, theme: Theme): string
 		if (!collapseSeparator(states)) break;
 	}
 
-	return truncateToWidth(assemble(states, target), target, theme.fg("dim", "…"));
+	return truncateToWidth(assemble(states, target), target, paint(theme, "faint", "…"));
 }

package/extensions/bytefly/footer/render/segments.ts

@@ -3,26 +3,23 @@
  *
  * Each segment carries progressively shorter `forms` and a `weight`; the layout
  * engine advances forms and drops segments from the highest weight down, so the
- * bar degrades predictably instead of clipping arbitrary text.
+ * bar degrades predictably instead of clipping arbitrary text. Colors come from
+ * the design-system roles, so the bar follows the active theme.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { stripTerminalSequences } from "@earendil-works/pi-tui";
 import { formatTokens, sanitize, sanitizeLine } from "../../../../lib/format.ts";
+import { gaugeBar } from "../../../../lib/tui/gauge.ts";
+import { chip } from "../../../../lib/tui/rows.ts";
+import { paint } from "../../../../lib/tui/tokens.ts";
 import { CONFIG } from "../config.ts";
-import {
-	computeGauge,
-	contextColor,
-	formatCost,
-	formatCwd,
-	formatPercent,
-	thinkingColor,
-	truncateLabel,
-} from "./format.ts";
+import { contextRole, formatCost, formatCwd, formatPercent, thinkingColor, truncateLabel } from "./format.ts";
 import { compactStatus, dropStatusDetail } from "./status.ts";
 import type { Segment, StatusSnapshot } from "../types.ts";
 
-const dim = (theme: Theme, text: string): string => theme.fg("dim", text);
+/** Tertiary text: paths and de-emphasized meters. */
+const faint = (theme: Theme, text: string): string => paint(theme, "faint", text);
 
 /**
  * The label part of a themed status chip: strip its escape sequences, sanitize
@@ -41,9 +38,9 @@ export function pwdSegment(snapshot: StatusSnapshot, theme: Theme, home: string
 		droppable: false,
 		separator: "",
 		forms: [
-			dim(theme, formatCwd(snapshot.cwd, home, 0)),
-			dim(theme, formatCwd(snapshot.cwd, home, 1)),
-			dim(theme, formatCwd(snapshot.cwd, home, 2)),
+			faint(theme, formatCwd(snapshot.cwd, home, 0)),
+			faint(theme, formatCwd(snapshot.cwd, home, 1)),
+			faint(theme, formatCwd(snapshot.cwd, home, 2)),
 		],
 	};
 }
@@ -54,13 +51,13 @@ export function sessionSegment(snapshot: StatusSnapshot, theme: Theme): Segment
 	const short = truncateLabel(name, CONFIG.sessionLabelMax);
 	// Brackets and a brighter token keep the session name from reading as a
 	// trailing path segment.
-	const forms = [theme.fg("muted", `[${name}]`)];
-	if (short !== name) forms.push(theme.fg("muted", `[${short}]`));
+	const forms = [paint(theme, "meta", `[${name}]`)];
+	if (short !== name) forms.push(paint(theme, "meta", `[${short}]`));
 	return {
 		id: "session",
 		weight: 3,
 		droppable: true,
-		separator: dim(theme, CONFIG.separators.item),
+		separator: faint(theme, CONFIG.separators.item),
 		forms,
 	};
 }
@@ -68,14 +65,13 @@ export function sessionSegment(snapshot: StatusSnapshot, theme: Theme): Segment
 export function branchSegment(snapshot: StatusSnapshot, theme: Theme): Segment | null {
 	if (!snapshot.branch) return null;
 	const detached = snapshot.branch === CONFIG.labels.detached;
-	const color = detached ? "warning" : "muted";
 	const icon = detached ? CONFIG.icons.detached : CONFIG.icons.branch;
 	return {
 		id: "branch",
 		weight: 1,
 		droppable: true,
-		separator: dim(theme, CONFIG.separators.item),
-		forms: [theme.fg(color, `${icon} ${snapshot.branch}`)],
+		separator: faint(theme, CONFIG.separators.item),
+		forms: [chip(theme, icon, snapshot.branch, detached ? "warn" : "meta")],
 	};
 }
 
@@ -83,27 +79,16 @@ export function worktreeSegment(snapshot: StatusSnapshot, theme: Theme): Segment
 	const raw = snapshot.statuses.get(CONFIG.worktreeStatusKey);
 	if (!raw) return null;
 	const icon = CONFIG.icons.worktree;
+	const separator = faint(theme, CONFIG.separators.item);
 	const label = chipLabel(raw);
 	if (!label) {
-		return {
-			id: "worktree",
-			weight: 3,
-			droppable: true,
-			separator: dim(theme, CONFIG.separators.item),
-			forms: [theme.fg("success", icon)],
-		};
+		return { id: "worktree", weight: 3, droppable: true, separator, forms: [paint(theme, "ok", icon)] };
 	}
 	const short = truncateLabel(label, CONFIG.worktreeLabelMax);
-	const forms = [theme.fg("success", `${icon} ${label}`)];
-	if (short !== label) forms.push(theme.fg("success", `${icon} ${short}`));
-	forms.push(theme.fg("success", icon));
-	return {
-		id: "worktree",
-		weight: 3,
-		droppable: true,
-		separator: dim(theme, CONFIG.separators.item),
-		forms,
-	};
+	const forms = [chip(theme, icon, label, "ok")];
+	if (short !== label) forms.push(chip(theme, icon, short, "ok"));
+	forms.push(paint(theme, "ok", icon));
+	return { id: "worktree", weight: 3, droppable: true, separator, forms };
 }
 
 export function browseSegment(snapshot: StatusSnapshot, theme: Theme): Segment | null {
@@ -111,25 +96,20 @@ export function browseSegment(snapshot: StatusSnapshot, theme: Theme): Segment |
 	if (!raw) return null;
 	const icon = CONFIG.icons.browse;
 	const label = chipLabel(raw);
-	const separator = dim(theme, CONFIG.separators.item);
+	const separator = faint(theme, CONFIG.separators.item);
 	if (!label) {
-		return {
-			id: "browse",
-			weight: 3,
-			droppable: true,
-			separator,
-			forms: [theme.fg("success", icon)],
-		};
+		return { id: "browse", weight: 3, droppable: true, separator, forms: [paint(theme, "ok", icon)] };
 	}
+	// A two-tone chip: the `◉` glyph stays green while the port reads as accent.
 	return {
 		id: "browse",
 		weight: 3,
 		droppable: true,
 		separator,
 		forms: [
-			`${theme.fg("success", icon)} ${theme.fg("accent", label)}`,
-			`${theme.fg("success", icon)}${theme.fg("accent", label)}`,
-			theme.fg("success", icon),
+			`${paint(theme, "ok", icon)} ${paint(theme, "accent", label)}`,
+			`${paint(theme, "ok", icon)}${paint(theme, "accent", label)}`,
+			paint(theme, "ok", icon),
 		],
 	};
 }
@@ -150,7 +130,7 @@ export function modesSegment(snapshot: StatusSnapshot, theme: Theme): Segment |
 		})
 		.filter(Boolean);
 	if (others.length === 0) return null;
-	const full = others.join(dim(theme, CONFIG.separators.item));
+	const full = others.join(faint(theme, CONFIG.separators.item));
 	// The compact form keeps each status's own colour (see `compactStatus`); a
 	// two-token badge keeps its count (`↺ 2` -> `↺2`) instead of collapsing to a
 	// bare icon.
@@ -161,31 +141,22 @@ export function modesSegment(snapshot: StatusSnapshot, theme: Theme): Segment |
 		// than truncating the model, which sits at the end of the line.
 		weight: 1,
 		droppable: true,
-		separator: dim(theme, CONFIG.separators.group),
+		separator: faint(theme, CONFIG.separators.group),
 		forms: [full, icons],
 	};
 }
 
 export function contextSegment(snapshot: StatusSnapshot, theme: Theme): Segment {
 	const percent = snapshot.context.percent;
-	const color = contextColor(percent);
-	const percentText = theme.fg(color, formatPercent(percent));
-	const gaugeWidths: readonly number[] = percent === null ? [0] : CONFIG.gauge.widths;
-	const forms = gaugeWidths.map((blocks) => {
-		const { filled, empty } = computeGauge(percent, blocks);
-		const gauge =
-			blocks > 0
-				? theme.fg(color, CONFIG.gauge.full.repeat(filled)) + theme.fg("dim", CONFIG.gauge.empty.repeat(empty)) + " "
-				: "";
-		return `${gauge}${percentText}`;
-	});
-	return {
-		id: "context",
-		weight: 1,
-		droppable: false,
-		separator: "",
-		forms,
-	};
+	const role = contextRole(percent);
+	const percentText = paint(theme, role, formatPercent(percent));
+	// Unknown usage draws no track, so `?` sits where the gauge would be rather
+	// than a full row of empty blocks claiming a known zero.
+	const widths: readonly number[] = percent === null ? [0] : CONFIG.gauge.widths;
+	const forms = widths.map((blocks) =>
+		blocks > 0 ? `${gaugeBar(theme, { percent, blocks, role, emptyRole: "faint" })} ${percentText}` : percentText,
+	);
+	return { id: "context", weight: 1, droppable: false, separator: "", forms };
 }
 
 export function windowSegment(snapshot: StatusSnapshot, theme: Theme): Segment | null {
@@ -195,7 +166,7 @@ export function windowSegment(snapshot: StatusSnapshot, theme: Theme): Segment |
 		weight: 3,
 		droppable: true,
 		separator: "",
-		forms: [dim(theme, `/${formatTokens(snapshot.context.contextWindow)}`)],
+		forms: [faint(theme, `/${formatTokens(snapshot.context.contextWindow)}`)],
 	};
 }
 
@@ -205,8 +176,8 @@ export function costSegment(snapshot: StatusSnapshot, theme: Theme): Segment | n
 		id: "cost",
 		weight: 2,
 		droppable: true,
-		separator: dim(theme, CONFIG.separators.item),
-		forms: [theme.fg("muted", formatCost(snapshot.usage.cost, snapshot.currency))],
+		separator: faint(theme, CONFIG.separators.item),
+		forms: [paint(theme, "meta", formatCost(snapshot.usage.cost, snapshot.currency))],
 	};
 }
 
@@ -220,8 +191,8 @@ export function tokensSegment(snapshot: StatusSnapshot, theme: Theme): Segment |
 		id: "tokens",
 		weight: 4,
 		droppable: true,
-		separator: dim(theme, CONFIG.separators.item),
-		forms: [dim(theme, parts.join(" "))],
+		separator: faint(theme, CONFIG.separators.item),
+		forms: [faint(theme, parts.join(" "))],
 	};
 }
 
@@ -240,8 +211,8 @@ export function cacheSegment(snapshot: StatusSnapshot, theme: Theme): Segment |
 		id: "cache",
 		weight: 5,
 		droppable: true,
-		separator: dim(theme, CONFIG.separators.item),
-		forms: [dim(theme, parts.join(" "))],
+		separator: faint(theme, CONFIG.separators.item),
+		forms: [faint(theme, parts.join(" "))],
 	};
 }
 
@@ -254,7 +225,7 @@ export function modelSegment(snapshot: StatusSnapshot, theme: Theme): Segment {
 			weight: 1,
 			droppable: false,
 			separator: "",
-			forms: [theme.fg("muted", CONFIG.labels.noModel)],
+			forms: [paint(theme, "meta", CONFIG.labels.noModel)],
 		};
 	}
 	const provider = snapshot.providerCount > 1 ? `(${model.provider}) ` : "";
@@ -263,19 +234,21 @@ export function modelSegment(snapshot: StatusSnapshot, theme: Theme): Segment {
 		weight: 1,
 		droppable: false,
 		separator: "",
-		forms: [theme.fg("accent", `${provider}${model.id}`), theme.fg("accent", model.id)],
+		forms: [paint(theme, "accent", `${provider}${model.id}`), paint(theme, "accent", model.id)],
 	};
 }
 
 export function thinkingSegment(snapshot: StatusSnapshot, theme: Theme): Segment | null {
 	if (!snapshot.model?.reasoning) return null;
 	const level = snapshot.thinkingLevel ?? "off";
+	// The reasoning scale is Pi's own seven-token ramp, not a design role: a
+	// level colors itself from `thinkingColor`.
 	const color = thinkingColor(level);
 	return {
 		id: "thinking",
 		weight: 2,
 		droppable: true,
-		separator: dim(theme, CONFIG.separators.item),
+		separator: faint(theme, CONFIG.separators.item),
 		forms: [theme.fg(color, level)],
 	};
 }