claudeup 6.3.2 → 6.4.0

package/src/ui/renderers/modelVisuals.tsx

@@ -0,0 +1,853 @@
+import type React from "react";
+import {
+	type AgentModel,
+	EFFORTS,
+	type Effort,
+	GRADES,
+	MODEL_ALIASES,
+	type ModelsConfig,
+	baseAlias,
+} from "../../services/models-core.js";
+import { effortInk, modelBadge, trackFill } from "../theme-mode.js";
+import { type UiColor, theme } from "../theme.js";
+
+/**
+ * The Models screen's visual vocabulary: which colour a model owns, how effort
+ * is drawn, and how the agent table becomes one bar.
+ *
+ * Everything here is shared by the list rows and the detail pane on purpose.
+ * The two used to describe the same routing in two unrelated shapes — a row
+ * said "opus lead", the detail said "main opus (medium)" — and nothing stopped
+ * them drifting apart. One module, one mapping, one set of glyphs.
+ *
+ * ## Where a fill is allowed, and where it is not
+ *
+ * MEASURED on the real TUI: when every model was a chip AND every effort a filled meter,
+ * seventeen agent rows stacked those into two solid vertical colour columns. A screen where
+ * everything is saturated has no signal in it — the eye cannot pick a row out of a slab.
+ *
+ * So a fill is spent where there are FEW of them and it reads as a swatch: the four-row tier
+ * table, the models key, the distribution bar, the selected row, and a problem that needs
+ * action. The agent table gets none — a model is its own ink there (`ModelText`), and effort
+ * is four dots of text.
+ *
+ * An earlier pass concluded the opposite, that colour could not carry "which model" at all,
+ * because the `theme.category` tones it was drawing from measure within 0.02 of each other:
+ * `fable` 5.04:1 on cream / 3.16 on dark, `opus` 5.02 / 3.18, with `haiku` and `inherit` the
+ * identical hex. That was true of THOSE colours. It is not a law about colour — the palette
+ * now lives in `theme-mode.ts` as `MODEL_BADGE`, is chosen per page, and separates the four
+ * models by hue and by fill rather than by luminance alone.
+ *
+ * ## Two colour channels, and why they do not collide
+ *
+ * Model identity is one channel; effort is the other. They stay legible together because
+ * they differ in KIND, not only in hue: a model is a fill or a name's ink, effort is always
+ * four small glyphs of text, and effort's ramp skips green and red, which already mean "on"
+ * and "failed" on this screen.
+ *
+ * Nothing in this file holds a colour literal. Every value comes from `theme.ts` or
+ * `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.
+ *
+ * Comes from the theme (`MODEL_BADGE` in `theme-mode.ts`), never from a hex literal here:
+ * colour is a theme decision, a renderer is a consumer of one, and the same palette has to
+ * serve this screen, its badges and its chart without three copies drifting apart.
+ *
+ * `inherit` is not a model but the absence of a routing decision, and the palette gives it
+ * grey on both pages so it recedes instead of reading as a fifth choice.
+ */
+export function modelFg(model: string): UiColor {
+	return modelBadge(baseAlias(model)).fg as UiColor;
+}
+
+/** The distribution bar's fill for a model — a softer step than the badge ink. */
+export function modelBarFill(model: string): UiColor {
+	return modelBadge(baseAlias(model)).bar as UiColor;
+}
+
+/**
+ * Columns a model name occupies as plain text. Its own length.
+ *
+ * Kept as a function rather than inlining `.length` at four call sites: the column maths in
+ * `fitAgentTable`, `fitPresetRows` and `specModelColumn` all have to agree with what
+ * `ModelText` actually draws, and one of them disagreeing is a column that drifts by a cell
+ * as the data changes.
+ */
+export function modelWidth(model: string): number {
+	return model.length;
+}
+
+/** Columns a model BADGE occupies: the name plus one space of padding each side. */
+export function modelBadgeWidth(model: string): number {
+	return model.length + 2;
+}
+
+/**
+ * A model name, in the model's own ink.
+ *
+ * Returns a `<span>`, so it MUST be placed inside a `<text>`. A `<span>` with no `<text>`
+ * parent replaces the whole UI with an error page while the process carries on exiting 0,
+ * which no test and no typecheck notices.
+ *
+ * `selected` surrenders the hue: on the selection fill every page-level tone measures under
+ * 1.2:1 (see `theme.ts`), so a selected row has exactly two inks and neither is this one.
+ * The WORD still says which model it is, which is why losing the tone there costs nothing.
+ */
+export function ModelText({
+	model,
+	selected = false,
+}: {
+	model: string;
+	selected?: boolean;
+}): React.ReactNode {
+	return (
+		<span fg={selected ? theme.selection.fg : modelFg(model)}>{model}</span>
+	);
+}
+
+/**
+ * A model as a filled CHIP — the one place a fill earns its place on this screen.
+ *
+ * Used in the tier table and the models key, where there are four of them and a chip reads
+ * as a swatch. Deliberately NOT used in the agent table: seventeen stacked chips is the
+ * solid colour column this redesign exists to remove, so an agent row gets `ModelText`.
+ *
+ * On a selected row it falls back to text, for the contrast reason in `ModelText`.
+ */
+export function ModelBadge({
+	model,
+	selected = false,
+}: {
+	model: string;
+	selected?: boolean;
+}): React.ReactNode {
+	if (selected) return <ModelText model={model} selected />;
+	const ink = modelBadge(baseAlias(model));
+	return <span bg={ink.bg} fg={ink.fg}>{` ${model} `}</span>;
+}
+
+/** Pad a model COLUMN — emitted after the name, so columns line up. */
+export function modelPad(model: string, column: number): string {
+	return " ".repeat(Math.max(0, column - modelWidth(model)));
+}
+
+/** Pad a BADGE column, which is two cells wider than the name. */
+export function modelBadgePad(model: string, column: number): string {
+	return " ".repeat(Math.max(0, column - modelBadgeWidth(model)));
+}
+
+// ─── Effort: a bounded ordinal, so a ramp glyph ───────────────────────────────
+
+/**
+ * Four dots, filled to the level: `••··` is two of four.
+ *
+ * Three shapes were built and shown before this one. A four-cell `████`/`░░░░` meter read as
+ * a second painted block beside the model's chip, and seventeen rows of that is the solid
+ * column this screen was reported for. A single height-coded glyph (`▁▃▅▇`) was quiet enough
+ * but did not read AS an indicator at all — "i dont see what is the new inidato". A fraction
+ * (`2/4 medium`) read as arithmetic where a picture belonged.
+ *
+ * Dots work because the ON dot and the OFF dot differ in WEIGHT, not in area: `•` and `·`
+ * are plain punctuation present in every monospace font, so the row reads as a fill without
+ * painting a block.
+ *
+ * The unlit dots are DRAWN, not omitted. Dots that simply stop read as a count ("two"); dots
+ * on a track read as a level ("two of four"), and the level is the point.
+ */
+export const EFFORT_ON = "•";
+export const EFFORT_OFF = "·";
+
+/** Columns the indicator occupies — one per level, always four. */
+export const EFFORT_GLYPH_CELLS = 4;
+
+/**
+ * Effort not set: a dash, deliberately NOT zero filled dots.
+ *
+ * `low` and `absent` are different answers — one is a decision, the other is "inherits
+ * whatever the session is on" — so they may not share a shape. An empty track would read as
+ * the bottom of the same scale.
+ */
+export const NO_EFFORT_GLYPH = "—";
+
+/**
+ * 0 for "no effort set", else 1..4 for low/medium/high/xhigh.
+ *
+ * 0 is a real answer, not a failure: a grade with no effort inherits the
+ * session's, and drawing the dash says that without a sentence.
+ */
+export function effortLevel(effort: Effort | undefined): number {
+	if (!effort) return 0;
+	const index = (EFFORTS as readonly string[]).indexOf(effort);
+	return index === -1 ? 0 : index + 1;
+}
+
+/** The four-cell indicator as plain text, for width maths and tests. */
+export function effortGlyph(effort: Effort | undefined): string {
+	const level = effortLevel(effort);
+	if (level === 0) return NO_EFFORT_GLYPH.padEnd(EFFORT_GLYPH_CELLS);
+	return (
+		EFFORT_ON.repeat(level) + EFFORT_OFF.repeat(EFFORT_GLYPH_CELLS - level)
+	);
+}
+
+/**
+ * The effort indicator, as spans for ONE `<text>`.
+ *
+ * Coloured BY EFFORT, from the theme's ramp — which is a reversal, and deliberate. The
+ * previous rule was that colour may only mean one thing, so the glyph borrowed the model's
+ * hue and let height carry the level. That holds only while the model's hue is the ONLY
+ * colour on the row; once the model is a chip or its own ink, borrowing it again puts the
+ * same hue in two adjacent columns meaning two different things.
+ *
+ * These two channels never collide: effort's ramp is a single hue family per step, effort is
+ * TEXT and a model chip is a FILL, and the ramp skips green and red, which already mean "on"
+ * and "failed" elsewhere on this screen.
+ */
+export function EffortGlyph({
+	effort,
+	selected = false,
+}: {
+	effort: Effort | undefined;
+	/** Accepted and ignored — kept so call sites read the same as the model columns. */
+	model?: string;
+	selected?: boolean;
+}): React.ReactNode {
+	const level = effortLevel(effort);
+	if (level === 0) {
+		return (
+			<span fg={selected ? theme.selection.dim : theme.colors.muted}>
+				{NO_EFFORT_GLYPH.padEnd(EFFORT_GLYPH_CELLS)}
+			</span>
+		);
+	}
+	const on = selected
+		? theme.selection.fg
+		: (effortInk(effort as string) as UiColor);
+	const off = selected ? theme.selection.dim : (trackFill() as UiColor);
+	return (
+		<>
+			<span fg={on}>{EFFORT_ON.repeat(level)}</span>
+			<span fg={off}>{EFFORT_OFF.repeat(EFFORT_GLYPH_CELLS - level)}</span>
+		</>
+	);
+}
+
+/** The word after the glyph. Absent effort says what absent MEANS. */
+export function effortWord(effort: Effort | undefined): string {
+	return effort ?? "inherits session";
+}
+
+// ─── The agent table, as one distribution ─────────────────────────────────────
+
+export interface AgentSegment {
+	/** A grade name, `inherit`, or a model an agent was pinned to outright. */
+	key: string;
+	count: number;
+	/** The model this key routes to — what decides the segment's colour. */
+	model: string;
+	/** The bar fill this model paints, from the theme. */
+	fill: UiColor;
+}
+
+/**
+ * Every agent the config names, counted by what it routes to.
+ *
+ * The whole table, `default` grade included — the bar answers "how is the work
+ * spread", which an omitted majority answers wrongly. An earlier version left
+ * the default-grade agents out and drew a bar saying the routing was mostly
+ * `critical`, when critical was the exception.
+ *
+ * Two keys that resolve to the same model get the same colour, and that is
+ * correct rather than a collision: the reader is being told those agents run on
+ * the same model. The bar puts a track cell between them so they still read as
+ * two runs, and the legend names the keys.
+ */
+export function agentDistribution(config: ModelsConfig): AgentSegment[] {
+	// EVERY tier starts at zero, so the chart is the same four rows whichever preset the
+	// cursor is on. Emitting only the tiers that happen to have agents made the chart change
+	// height and row order as you moved down the list, which reads as the data changing
+	// shape rather than as one tier being empty — and "nothing runs at `default` here" is
+	// itself worth seeing.
+	const counts = new Map<string, number>(GRADES.map((grade) => [grade, 0]));
+	for (const assignment of Object.values(config.agents ?? {})) {
+		const key = typeof assignment === "string" ? assignment : assignment.model;
+		counts.set(key, (counts.get(key) ?? 0) + 1);
+	}
+
+	const rank = (key: string) => {
+		const index = (GRADES as readonly string[]).indexOf(key);
+		return index === -1 ? GRADES.length : index;
+	};
+
+	return [...counts.entries()]
+		.sort(([a], [b]) => rank(a) - rank(b) || a.localeCompare(b))
+		.map(([key, count]) => {
+			const model = resolveKeyModel(config, key);
+			return { key, count, model, fill: modelBarFill(model) };
+		});
+}
+
+/**
+ * The tier spread for ONE workflow's agents.
+ *
+ * Same shape as `agentDistribution`, over a named subset rather than everything in the
+ * config. An agent the workflow dispatches that the config never mentions still counts — it
+ * falls to `fallback`, exactly as it will at runtime, and leaving it out would draw a bar
+ * for four agents when five get spawned.
+ *
+ * Empty tiers are dropped here, unlike in `agentDistribution`: a workflow that touches two
+ * agents genuinely has two segments, and padding it to four would suggest it reaches tiers
+ * it never does.
+ */
+export function workflowDistribution(
+	config: ModelsConfig,
+	agents: string[],
+): AgentSegment[] {
+	const counts = new Map<string, number>();
+	for (const agent of agents) {
+		const assignment = config.agents?.[agent];
+		const key =
+			assignment === undefined
+				? config.fallback
+				: typeof assignment === "string"
+					? assignment
+					: assignment.model;
+		counts.set(key, (counts.get(key) ?? 0) + 1);
+	}
+
+	const rank = (key: string) => {
+		const index = (GRADES as readonly string[]).indexOf(key);
+		return index === -1 ? GRADES.length : index;
+	};
+
+	return [...counts.entries()]
+		.sort(([a], [b]) => rank(a) - rank(b) || a.localeCompare(b))
+		.map(([key, count]) => {
+			const model = keyModel(config, key);
+			return { key, count, model, fill: modelBarFill(model) };
+		});
+}
+
+/**
+ * What a grade name, `inherit`, or a pinned model actually runs on.
+ *
+ * This is the whole reason an agent's colour is not its own: colour here means
+ * "which model", so every agent at one grade takes that grade's model colour
+ * and they read as one tier. Colouring agents individually produced six hues
+ * carrying no information — with red, which means danger everywhere else in
+ * this app, decorating an agent name.
+ */
+export function keyModel(config: ModelsConfig, key: string): string {
+	const index = (GRADES as readonly string[]).indexOf(key);
+	if (index === -1) return key;
+	const grade = GRADES[index];
+	return grade ? config.grades[grade].model : key;
+}
+
+/** Alias kept for the local call site below. */
+const resolveKeyModel = keyModel;
+
+/**
+ * Every distinct model these configs name, in alias order.
+ *
+ * Feeds the key under the bar. The bar is coloured by MODEL and labelled by
+ * GRADE, so without this the colours have no key at all — a reader can see that
+ * two runs differ and not what they differ INTO.
+ */
+export function modelsInUse(configs: ModelsConfig[]): string[] {
+	const seen = new Set<string>();
+	for (const config of configs) {
+		seen.add(baseAlias(config.main.model));
+		for (const grade of GRADES) seen.add(baseAlias(config.grades[grade].model));
+		for (const assignment of Object.values(config.agents ?? {})) {
+			if (typeof assignment !== "string") seen.add(baseAlias(assignment.model));
+		}
+	}
+	const order = [...MODEL_ALIASES, "inherit"] as readonly string[];
+	const rank = (model: string) => {
+		const index = order.indexOf(model);
+		return index === -1 ? order.length : index;
+	};
+	return [...seen].sort((a, b) => rank(a) - rank(b) || a.localeCompare(b));
+}
+
+// ─── The agent table ──────────────────────────────────────────────────────────
+
+export interface AgentRow {
+	name: string;
+	/** The assignment as written: a grade, `inherit`, or a pinned model. */
+	key: string;
+	/** What that assignment resolves to — the row's colour comes from this. */
+	model: string;
+	effort: Effort | undefined;
+	/** The bar fill this model paints, from the theme. */
+	fill: UiColor;
+	/** Nothing is set for this agent, so its model and effort cells read `—`. */
+	inherit: boolean;
+}
+
+/**
+ * EVERY agent the config names, one row each, in reading order.
+ *
+ * No sampling and no "+N more". A reader comes to this table to find their own
+ * agent and read its answer off the row, which a truncated list cannot answer —
+ * and the detail pane scrolls, so length is not the constraint it looks like.
+ *
+ * Sorted by grade in ROUTING order (critical, standard, fast, then `inherit`
+ * and any pinned model), then alphabetically inside each. The strongest tier is
+ * at the top and a name is where the eye expects it.
+ */
+export function agentRows(config: ModelsConfig): AgentRow[] {
+	const rows: AgentRow[] = [];
+	for (const [name, assignment] of Object.entries(config.agents ?? {})) {
+		const key = typeof assignment === "string" ? assignment : assignment.model;
+		const gradeIndex = (GRADES as readonly string[]).indexOf(key);
+		const grade = gradeIndex === -1 ? undefined : GRADES[gradeIndex];
+		const model = keyModel(config, key);
+		rows.push({
+			name,
+			key,
+			model,
+			effort:
+				typeof assignment === "string"
+					? grade
+						? config.grades[grade].effort
+						: undefined
+					: assignment.effort,
+			fill: modelBarFill(model),
+			inherit: baseAlias(model) === "inherit",
+		});
+	}
+
+	const rank = (key: string) => {
+		const index = (GRADES as readonly string[]).indexOf(key);
+		return index === -1 ? GRADES.length : index;
+	};
+
+	return rows.sort(
+		(a, b) =>
+			rank(a.key) - rank(b.key) ||
+			a.key.localeCompare(b.key) ||
+			a.name.localeCompare(b.name),
+	);
+}
+
+/** What the effort cell shows when a column has to give way. */
+export type EffortDetail = "full" | "short" | "none";
+
+export interface AgentTableLayout {
+	name: number;
+	/** 0 when the grade column was dropped to make the table fit. */
+	grade: number;
+	model: number;
+	effort: EffortDetail;
+	/** Columns the whole table occupies, gaps included. */
+	total: number;
+}
+
+/** The cell an inherit row shows where a model or an effort would go. */
+export const NONE_CELL = "—";
+
+const HEADERS = {
+	name: "Agent",
+	grade: "Tier",
+	model: "Model",
+	effort: "Effort",
+};
+
+function effortColumn(detail: EffortDetail, word: number): number {
+	if (detail === "none") return EFFORT_GLYPH_CELLS;
+	return EFFORT_GLYPH_CELLS + 1 + (detail === "short" ? 1 : word);
+}
+
+/**
+ * Column widths for the agent table, from the data rather than from constants.
+ *
+ * Degrades in a fixed order, because some columns are recoverable and others
+ * are not: the grade goes first (the model name beside it already says which
+ * tier this is, in colour), then the effort word shrinks to its initial (the
+ * glyph still carries the level), and only then does the name column truncate.
+ * NOTHING wraps — a wrapped cell turns a table back into the paragraph this
+ * replaced.
+ */
+export function fitAgentTable(
+	rows: AgentRow[],
+	width: number,
+): AgentTableLayout {
+	const longest = (values: number[], floor: number) =>
+		values.reduce((max, value) => Math.max(max, value), floor);
+
+	const nameNeeded = longest(
+		rows.map((row) => row.name.length),
+		HEADERS.name.length,
+	);
+	const gradeNeeded = longest(
+		rows.map((row) => row.key.length),
+		HEADERS.grade.length,
+	);
+	const modelNeeded = longest(
+		rows.map((row) => (row.inherit ? NONE_CELL.length : modelWidth(row.model))),
+		HEADERS.model.length,
+	);
+	const wordNeeded = longest(
+		rows.map((row) =>
+			row.inherit ? NONE_CELL.length : effortWord(row.effort).length,
+		),
+		1,
+	);
+
+	const candidates: Array<{ grade: number; effort: EffortDetail }> = [
+		{ grade: gradeNeeded, effort: "full" },
+		{ grade: 0, effort: "full" },
+		{ grade: 0, effort: "short" },
+		{ grade: 0, effort: "none" },
+	];
+
+	const measure = (grade: number, effort: EffortDetail, name: number) =>
+		name +
+		1 +
+		(grade > 0 ? grade + 1 : 0) +
+		modelNeeded +
+		1 +
+		effortColumn(effort, wordNeeded);
+
+	for (const candidate of candidates) {
+		const total = measure(candidate.grade, candidate.effort, nameNeeded);
+		if (total <= width) {
+			return {
+				name: nameNeeded,
+				grade: candidate.grade,
+				model: modelNeeded,
+				effort: candidate.effort,
+				total,
+			};
+		}
+	}
+
+	// Nothing fit even stripped down: give the name whatever is left, and
+	// truncate into it rather than wrapping.
+	const fixed = measure(0, "none", 0);
+	const name = Math.max(6, width - fixed);
+	return {
+		name,
+		grade: 0,
+		model: modelNeeded,
+		effort: "none",
+		total: measure(0, "none", name),
+	};
+}
+
+/** The header cells, already padded to the layout's columns. */
+export function agentTableHeaders(
+	layout: AgentTableLayout,
+): Array<{ key: string; text: string }> {
+	const cells = [{ key: "name", text: padCell(HEADERS.name, layout.name) }];
+	if (layout.grade > 0) {
+		cells.push({ key: "grade", text: padCell(HEADERS.grade, layout.grade) });
+	}
+	cells.push({ key: "model", text: padCell(HEADERS.model, layout.model) });
+	cells.push({
+		key: "effort",
+		text: padCell(HEADERS.effort, effortColumn(layout.effort, 6)),
+	});
+	return cells;
+}
+
+/** Truncate to `width`, then pad to it. A cell is exactly its column, always. */
+export function padCell(text: string, width: number): string {
+	const clipped =
+		text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
+	return clipped.padEnd(width);
+}
+
+/** The effort word as the layout wants it: the word, its initial, or nothing. */
+export function effortLabel(
+	effort: Effort | undefined,
+	detail: EffortDetail,
+): string {
+	if (detail === "none") return "";
+	const word = effortWord(effort);
+	return detail === "short" ? word.slice(0, 1) : word;
+}
+
+// ─── The preset list rows ─────────────────────────────────────────────────────
+
+/** The trailing markers a preset row may carry. Their leading space is theirs. */
+export const PRESET_MARKERS = {
+	default: " (default)",
+	custom: " (yours)",
+} as const;
+
+/** Columns a row's markers occupy — 0, one of them, or both. */
+export function presetMarkerWidth(isDefault: boolean, custom: boolean): number {
+	return (
+		(isDefault ? PRESET_MARKERS.default.length : 0) +
+		(custom ? PRESET_MARKERS.custom.length : 0)
+	);
+}
+
+/** What a preset row shows beside its name, widest form first. */
+export type PresetSummaryDetail =
+	| "labelled"
+	| "smart"
+	| "compact"
+	| "main"
+	| "none";
+
+export interface PresetRowLayout {
+	/** The name column, identical on every row. */
+	name: number;
+	/** The `main` model column. 0 when no summary is drawn at all. */
+	main: number;
+	/** The `critical` model column. 0 when that field was dropped. */
+	smart: number;
+	detail: PresetSummaryDetail;
+	/** Columns the widest row occupies, markers included. */
+	total: number;
+}
+
+/** One row's inputs — a preset reduced to the fields the column maths needs. */
+export interface PresetRowInput {
+	label: string;
+	main: string;
+	smart: string;
+	/** Columns this row's trailing markers need. */
+	markers: number;
+}
+
+/** The longest a preset name may be before it truncates into an ellipsis. */
+export const PRESET_NAME_MAX = 20;
+
+/** `[●] ` — the active marker and the space after it, on every row. */
+const PRESET_GUTTER = 4;
+/** The indent `SelectableRow` adds. */
+const PRESET_INDENT = 1;
+/** Between the name column and the summary. */
+const PRESET_NAME_GAP = 2;
+/** Between the two models. */
+const PRESET_SEP = " · ";
+
+const MAIN_LABEL = "main ";
+const SMART_LABEL = "smart ";
+
+/**
+ * ONE layout for the WHOLE list, not one per row.
+ *
+ * The bug this exists for, reported off a 120×30 screenshot: each row decided
+ * its own form from its own width, so the selected row dropped its `main` /
+ * `critical` labels while the other three kept theirs. The same field was
+ * labelled on some rows and not on others, and nothing lined up down the
+ * column. A list that is uniformly terse beats a list in two formats.
+ *
+ * So the fit is measured against the WIDEST row and applied to every row. If
+ * the widest row cannot carry the labels, none of them do.
+ *
+ * Degrades in value order, five rungs:
+ *
+ *   labelled  `main opus   · critical fable`
+ *   critical  `opus   · critical fable`   — `critical` is the grade this whole
+ *              screen is about, so its label outlives `main`'s; the leading
+ *              column is positionally main and the detail pane says so.
+ *   compact   `opus   · fable`
+ *   main      `opus`                      — at a narrow panel one model beats
+ *              none: it is what the orchestrator runs, and a bare second model
+ *              with no label beside it says nothing a reader can use.
+ *   none      the name alone.
+ */
+export function fitPresetRows(
+	rows: PresetRowInput[],
+	width: number,
+): PresetRowLayout {
+	const longest = (values: number[], floor: number) =>
+		values.reduce((max, value) => Math.max(max, value), floor);
+
+	const name = Math.min(
+		PRESET_NAME_MAX,
+		longest(
+			rows.map((row) => row.label.length),
+			4,
+		),
+	);
+	const main = longest(
+		rows.map((row) => modelWidth(row.main)),
+		1,
+	);
+	const smart = longest(
+		rows.map((row) => modelWidth(row.smart)),
+		1,
+	);
+	const markers = longest(
+		rows.map((row) => row.markers),
+		0,
+	);
+
+	const base = PRESET_INDENT + PRESET_GUTTER + name;
+	const summary = (detail: PresetSummaryDetail) => {
+		if (detail === "none") return 0;
+		if (detail === "main") return PRESET_NAME_GAP + main;
+		const pair = main + PRESET_SEP.length + smart;
+		if (detail === "compact") return PRESET_NAME_GAP + pair;
+		if (detail === "smart") {
+			return PRESET_NAME_GAP + pair + SMART_LABEL.length;
+		}
+		return PRESET_NAME_GAP + pair + SMART_LABEL.length + MAIN_LABEL.length;
+	};
+
+	const order: PresetSummaryDetail[] = [
+		"labelled",
+		"smart",
+		"compact",
+		"main",
+		"none",
+	];
+	for (const detail of order) {
+		const total = base + summary(detail) + markers;
+		if (total <= width || detail === "none") {
+			return {
+				name,
+				main: detail === "none" ? 0 : main,
+				smart: detail === "none" || detail === "main" ? 0 : smart,
+				detail,
+				total,
+			};
+		}
+	}
+	// Unreachable: `none` always returns above. Kept so the function is total
+	// without the compiler having to prove the loop covers every case.
+	return { name, main: 0, smart: 0, detail: "none", total: base + markers };
+}
+
+// ─── The spend bar ────────────────────────────────────────────────────────────
+
+/**
+ * Apportion `cells` columns across `values`, exactly.
+ *
+ * Largest-remainder, with one extra rule: a value with any members gets at least one cell
+ * while cells remain. A distribution where the smallest group rounds to zero draws a bar
+ * saying that group does not exist, while the numbers beside it say it does.
+ */
+export function splitCells(values: number[], cells: number): number[] {
+	const total = values.reduce((sum, value) => sum + value, 0);
+	const out = values.map(() => 0);
+	if (total <= 0 || cells <= 0) return out;
+
+	let used = 0;
+	const remainders: { index: number; rest: number }[] = [];
+	values.forEach((value, index) => {
+		if (value <= 0) return;
+		const exact = (value / total) * cells;
+		const floor = Math.max(1, Math.floor(exact));
+		out[index] = floor;
+		used += floor;
+		remainders.push({ index, rest: exact - Math.floor(exact) });
+	});
+
+	// Over-allocated by the min-one rule: take cells back from the largest runs first, never
+	// below one, so the smallest group keeps the cell the rule gave it.
+	while (used > cells) {
+		let victim = -1;
+		let most = 1;
+		out.forEach((value, index) => {
+			if (value > most) {
+				most = value;
+				victim = index;
+			}
+		});
+		if (victim === -1) break;
+		out[victim] = (out[victim] ?? 0) - 1;
+		used -= 1;
+	}
+
+	// Under-allocated: hand the rest out by largest remainder.
+	remainders.sort((a, b) => b.rest - a.rest);
+	let i = 0;
+	while (used < cells && remainders.length > 0) {
+		const target = remainders[i % remainders.length];
+		if (!target) break;
+		out[target.index] = (out[target.index] ?? 0) + 1;
+		used += 1;
+		i += 1;
+	}
+	return out;
+}
+
+export interface SpendRun {
+	kind: "fill" | "track";
+	cells: number;
+	id: string;
+	colour?: UiColor;
+}
+
+/**
+ * The spend bar's runs: ONE line, split in half.
+ *
+ * The left half is the MAIN model and the right half is everything it dispatches, because
+ * that is the shape of the spend — the orchestrator is running for most of a session, and
+ * every subagent put together is the other side of the trade. Four separate tier bars
+ * compared the tiers with each other and never showed that, so the one decision the screen
+ * exists to explain — how much model the main thread gets versus the work it hands out —
+ * was the one thing it did not draw.
+ *
+ * A one-cell track sits between neighbouring runs. MEASURED on a dark screenshot: two
+ * adjacent runs resolving to the same model merged into a single rectangle, and three
+ * segments read as two.
+ */
+export function spendRuns(
+	config: ModelsConfig,
+	segments: AgentSegment[],
+	width: number,
+): SpendRun[] {
+	const cells = Math.max(4, width);
+	// One cell of divider, then the two halves. The left is rounded down so the subagent
+	// side never loses a cell to rounding — it is the half carrying several values.
+	const divider = 1;
+	const left = Math.floor((cells - divider) / 2);
+	const right = cells - divider - left;
+
+	const runs: SpendRun[] = [
+		{
+			kind: "fill",
+			cells: left,
+			id: "main",
+			colour: modelBarFill(config.main.model),
+		},
+		{ kind: "track", cells: divider, id: "divider" },
+	];
+
+	const drawn = segments.filter((segment) => segment.count > 0);
+	const gaps = Math.max(0, drawn.length - 1);
+	const split = splitCells(
+		drawn.map((segment) => segment.count),
+		Math.max(0, right - gaps),
+	);
+
+	let used = 0;
+	drawn.forEach((segment, index) => {
+		const run = split[index] ?? 0;
+		if (run === 0) return;
+		if (used > 0) {
+			runs.push({ kind: "track", cells: 1, id: `gap:${segment.key}` });
+			used += 1;
+		}
+		runs.push({
+			kind: "fill",
+			cells: run,
+			id: segment.key,
+			colour: segment.fill,
+		});
+		used += run;
+	});
+
+	// Any shortfall is paid in track, so the row is EXACTLY `cells` wide however the
+	// apportionment landed — a bar that ends somewhere arbitrary reads as a painted
+	// rectangle rather than as a proportion.
+	if (used < right) {
+		runs.push({ kind: "track", cells: right - used, id: "rest" });
+	}
+	return runs;
+}