magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/renderers/modelVisuals.tsx

@@ -0,0 +1,1402 @@
+import type { BoxRenderable } from "@opentui/core";
+import type React from "react";
+import { Fragment, useState } from "react";
+import {
+	type AgentModel,
+	EFFORTS,
+	type Effort,
+	GRADES,
+	MATES,
+	MODEL_ALIASES,
+	type ModelsConfig,
+	baseAlias,
+	isMate,
+	mateEffort,
+	modelLabel,
+} 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 another choice.
+ *
+ * A mate is not one of Claude Code's models either, but it IS a decision — the author sent
+ * that agent to claudish on purpose — so it takes an ink of its own from the warm family
+ * rather than the grey that means "nobody chose".
+ */
+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.
+ *
+ * Takes the string that is DRAWN, which for a mate is its bound id and not the slot. Pass it
+ * `modelLabel(config, model)`, never the routing value — measuring `mate1` (5) while drawing
+ * `gemini-omni-1.1-flash` (21) is a sixteen-cell overrun, not a one-cell drift.
+ */
+export function modelWidth(model: string): number {
+	return model.length;
+}
+
+// ─── Identity vs label: two things a "model" means on this screen ─────────────
+//
+// A slot is a ROLE and the id it is bound to is a MODEL, and the screen needs both at once:
+// the ink has to stay with the role, the text has to name the model.
+//
+// COLOUR FOLLOWS THE SLOT, deliberately. `mate1` is the stable identity — it is what the
+// agent table's Tier column says, what the workflow bar's legend names, and what does not
+// change when someone rebinds the slot to a different model next week. Giving each external
+// model its own hue would mean the bar's colours moved every time a binding changed, and
+// there is no palette that can hold a catalogue of hundreds anyway.
+//
+// So every drawing function takes `model` (the routing value — decides the ink) and an
+// optional `label` (what is written). They are the same string everywhere except a mate,
+// which is precisely why they were one parameter until a slot could be bound.
+
+/** The text for a routing value, and the identity that colours it. */
+export interface ModelCell {
+	/** The routing value: an alias, `inherit`, or a slot. Decides ink. */
+	model: string;
+	/** What is drawn: a bound id for a mate, otherwise the same as `model`. */
+	label: string;
+}
+
+/** Resolve one routing value into the pair the renderers need. */
+export function modelCell(config: ModelsConfig, model: string): ModelCell {
+	return { model, label: modelLabel(config, model) };
+}
+
+/** 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,
+	label,
+	selected = false,
+}: {
+	/** The routing value — decides the INK. For a mate this is the slot. */
+	model: string;
+	/** What to write. Defaults to `model`; a mate passes its bound id. */
+	label?: string;
+	selected?: boolean;
+}): React.ReactNode {
+	return (
+		<span fg={selected ? theme.selection.fg : modelFg(model)}>
+			{label ?? 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,
+	label,
+	selected = false,
+}: {
+	/** The routing value — decides the INK. For a mate this is the slot. */
+	model: string;
+	/** What to write. Defaults to `model`; a mate passes its bound id. */
+	label?: string;
+	selected?: boolean;
+}): React.ReactNode {
+	const text = label ?? model;
+	if (selected) return <ModelText model={model} label={text} selected />;
+	const ink = modelBadge(baseAlias(model));
+	return <span bg={ink.bg} fg={ink.fg}>{` ${text} `}</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;
+	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>
+		);
+	}
+	// Every level is on the effort ramp, a mate's included. An external model's effort is as
+	// in force as a Claude subagent's — claudish applies it per run — so a second visual
+	// grade for it would say the two mean different things when they do not.
+	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>
+		</>
+	);
+}
+
+/**
+ * What the effort column says for a mate carrying no effort of its own.
+ *
+ * Not "no effort": every model in claudish's catalogue has a preset, and a slot that names
+ * none runs at its model's. `--pro-on-ultracode` in `claudish --help` is the flag that opts
+ * into that preset explicitly, which is what makes it a real default rather than an absence.
+ */
+export const MATE_EFFORT_NOTE = "model preset";
+
+/**
+ * The word after the glyph. Absent effort says what absent MEANS.
+ *
+ * `model` is optional and matters for one case: an absent effort means something different
+ * for a mate. A Claude subagent with none inherits the session's; an external model has no
+ * session to inherit from, and falls to its own catalogue preset instead.
+ *
+ * A mate's effort IS in force, and is written plainly. It reaches the model through claudish
+ * rather than through `settings.modelSettings` — that map is keyed by models Claude Code
+ * runs, so `buildSettingsPatch` correctly drops a mate's — and claudish applies it per run,
+ * subject to a per-model clamp (`--effort-override` is the flag that skips the clamp). A
+ * clamp is a bound on the value, not a reason to doubt it, so the cell reads like any other.
+ *
+ * Taking the model here rather than special-casing it at the two call sites is what keeps
+ * `fitAgentTable`'s width maths agreeing with what `AgentTableRow` draws. A column measured
+ * from a different string than the one rendered drifts by a cell as the data changes, which
+ * is the defect `modelWidth` exists to prevent on the other column.
+ */
+export function effortWord(effort: Effort | undefined, model?: string): string {
+	if (isMate(model)) return effort ?? MATE_EFFORT_NOTE;
+	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.
+ *
+ * `externalSteps` is a property of the WORKFLOW, not of the config. `WORKFLOWS[].external`
+ * declares the phases a command runs on an outside model, read out of the command file that
+ * runs them, so the run is drawn under every preset: changing the tier preset does not change
+ * whether `/dev:dev` reviews its plan on an external model.
+ */
+export function workflowDistribution(
+	config: ModelsConfig,
+	agents: string[],
+	externalSteps = 0,
+): 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);
+	}
+	// One run under the shared family tone: the bar answers "how much of this leaves Claude
+	// Code", which is one number however many slots serve it. Added to whatever `config.agents`
+	// already routes to a slot, so a project that hand-binds an agent and runs a workflow with
+	// external phases counts both.
+	if (externalSteps > 0) {
+		counts.set(MATES_SEGMENT, (counts.get(MATES_SEGMENT) ?? 0) + externalSteps);
+	}
+
+	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));
+		}
+	}
+	// Aliases, then mates, then `inherit`. The list reads as "what magus routes", then
+	// "what it hands to claudish", then "what it leaves alone" — decreasing involvement, which
+	// is the only ordering that stays stable as slots are added. `inherit` keeps the tail it
+	// already had: it is the absence of a decision and belongs after every decision.
+	const order = [...MODEL_ALIASES, ...MATES, "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. The Tier cell. */
+	key: string;
+	/** What that assignment resolves to — the row's COLOUR comes from this. */
+	model: string;
+	/**
+	 * What the Model cell WRITES: a mate's bound id, or `unset` when the slot is unbound.
+	 * Identical to `model` for everything else.
+	 *
+	 * Separate from `model` because the Model column used to print the routing value and so
+	 * printed a slot name — a row read `mate1 mate1 —`, the same word in the Tier and Model
+	 * columns, with neither of them naming a model.
+	 */
+	label: 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);
+		// An assignment's own effort, else the grade's. A MATE adds a third source: when
+		// neither names one, the slot's own declared effort from the `mates` block stands in,
+		// so `{"mate1": {"effort": "high"}}` reaches every agent on that slot without being
+		// repeated per agent. An agent-level effort still wins — it is the more specific
+		// statement, and the same precedence an override already has over a grade.
+		const written =
+			typeof assignment === "string"
+				? grade
+					? config.grades[grade].effort
+					: undefined
+				: assignment.effort;
+		const effort =
+			written ?? (isMate(model) ? mateEffort(config, model) : undefined);
+		rows.push({
+			name,
+			key,
+			model,
+			label: modelLabel(config, model),
+			effort,
+			fill: modelBarFill(model),
+			// A MATE DOES NOT SET THIS. `inherit` blanks both the model and the effort cell to
+			// `—`, which is right for "nothing was decided" and wrong for a mate: the slot name
+			// IS the answer, and blanking it would hide real routing behind the same dash that
+			// means the opposite. `baseAlias("mate1")` is `mate1`, so the existing test already
+			// gives the right answer — stated here because it is right by luck of the string
+			// rather than by a rule anyone wrote down.
+			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);
+}
+
+/** The fewest cells the agent-name column is ever squeezed to. */
+const NAME_FLOOR = 6;
+
+/**
+ * The fewest cells the MODEL column is ever squeezed to.
+ *
+ * Enough for a prefix plus the `…` that says it is one. Catalogue ids are front-loaded with
+ * the family — `grok-4.6`, `glm-5.3`, `kimi-k3` — so eight cells still distinguishes the
+ * bindings a project is realistically running side by side, while `gemini…` and `gemini-…`
+ * would not.
+ */
+const MODEL_FLOOR = 8;
+
+/**
+ * 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,
+	);
+	// Measured from `row.label` — the string the row DRAWS — not from `row.model`.
+	//
+	// The column was sized for `kangaroo` (8) on the reasoning that a slot name was the widest
+	// thing it would ever hold. Binding a slot broke that by a wide margin: real catalogue ids
+	// run to `gemini-omni-1.1-flash` (21) and `deepseek-v4.1-flash` (19), so a column measured
+	// from the slot would under-count by sixteen cells and every row would overrun its
+	// neighbour. This is the same defect `modelWidth`'s comment warns about, at scale.
+	const modelNeeded = longest(
+		rows.map((row) => (row.inherit ? NONE_CELL.length : modelWidth(row.label))),
+		HEADERS.model.length,
+	);
+	// `row.model` is passed so a mate's `via claudish` (or `high (declared)`) is measured,
+	// not `inherits session`. Measuring the wrong string here is how the effort column ends up
+	// a cell short of what the row draws.
+	const wordNeeded = longest(
+		rows.map((row) =>
+			row.inherit ? NONE_CELL.length : effortWord(row.effort, row.model).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,
+		model: number = modelNeeded,
+	) =>
+		name +
+		1 +
+		(grade > 0 ? grade + 1 : 0) +
+		model +
+		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(NAME_FLOOR, width - fixed);
+	const total = measure(0, "none", name);
+	if (total <= width) {
+		return { name, grade: 0, model: modelNeeded, effort: "none", total };
+	}
+
+	// THE LAST RUNG, AND IT IS NEW.
+	//
+	// The model column used to be the one column that never gave way: every value it could
+	// hold was an alias (≤6) or a slot (≤8), so surrendering the name column always got the
+	// table under the width. A bound id is up to 21 cells, and at that size the old floor
+	// stopped being reachable — at 30 columns the fixed part alone is 27, the name floor adds
+	// 7, and the table overran by four with no rung left to take them from.
+	//
+	// So the model column truncates too, with the `…` `clipCell` puts there. It keeps
+	// `MODEL_FLOOR` cells, which is enough to tell two bound ids apart in practice; below that
+	// the table is not readable at any setting and the name floor is the last thing standing.
+	const model = Math.max(
+		MODEL_FLOOR,
+		width - (NAME_FLOOR + 1 + 1 + effortColumn("none", wordNeeded)),
+	);
+	return {
+		name: NAME_FLOOR,
+		grade: 0,
+		model,
+		effort: "none",
+		total: measure(0, "none", NAME_FLOOR, model),
+	};
+}
+
+/** 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`, with an ellipsis marking that something was cut.
+ *
+ * NEVER a silent clip. `gemini-omni-1.1-flash` cut to `gemini-omni-1.1-flas` is a model id
+ * that looks complete and is not — a reader would take it for the whole name and go looking
+ * for it in the catalogue. The `…` costs one cell and makes the cut visible.
+ *
+ * Split out of `padCell` because the model column needs the truncation WITHOUT the padding:
+ * it is drawn as a coloured `ModelText` followed by its own pad span, so padding here would
+ * paint the gap in the model's ink instead of the border's.
+ */
+export function clipCell(text: string, width: number): string {
+	if (width <= 0) return "";
+	return text.length > width
+		? `${text.slice(0, Math.max(0, width - 1))}…`
+		: text;
+}
+
+/** Truncate to `width`, then pad to it. A cell is exactly its column, always. */
+export function padCell(text: string, width: number): string {
+	return clipCell(text, width).padEnd(width);
+}
+
+/** The effort word as the layout wants it: the word, its initial, or nothing. */
+export function effortLabel(
+	effort: Effort | undefined,
+	detail: EffortDetail,
+	model?: string,
+): string {
+	if (detail === "none") return "";
+	const word = effortWord(effort, model);
+	// A mate's fallback note does not abbreviate. `short` keeps a real effort's initial
+	// because the four dots beside it still carry the level, so one letter disambiguates
+	// rather than being the whole message — but "model preset" clipped to `m` is not a
+	// shorter way of saying anything, it is a character with no meaning in a column of them.
+	if (word === MATE_EFFORT_NOTE) return detail === "short" ? "" : word;
+	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.
+ *
+ * A custom row carries NONE. `Custom` is already the whole claim — the row exists only
+ * because the settings differ from every built-in — so a marker beside it repeats the label
+ * in different words.
+ */
+export const PRESET_MARKERS = {
+	default: " (default)",
+} as const;
+
+/** Columns a row's markers occupy — 0 or the default marker. */
+export function presetMarkerWidth(isDefault: boolean): number {
+	return isDefault ? PRESET_MARKERS.default.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;
+	/** The main model. Never a mate — the validator refuses one on `main.model`. */
+	main: string;
+	/** The routing value for `smart` — decides its INK. May be a slot. */
+	smart: string;
+	/** What the `smart` column WRITES: a bound id for a mate, else the same as `smart`. */
+	smartLabel: 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 longest a MODEL may be in a list row before it truncates.
+ *
+ * The list panel is the narrow one — it shares the screen with the detail pane — and a
+ * 21-cell `gemini-omni-1.1-flash` here does not merely widen the row, it knocks the whole
+ * list down the degradation ladder to `main`, so every row loses its second model to one
+ * row's long binding. Truncating the one long value keeps the field for all of them, and the
+ * detail pane three columns to the right shows it in full.
+ *
+ * 14 is chosen against real ids: `deepseek-v4.1…`, `gemini-3.8-fla…`, and `grok-4.6` /
+ * `kimi-k3` / `glm-5.3` untouched.
+ */
+export const PRESET_MODEL_MAX = 14;
+
+/** `[●] ` — 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,
+	);
+	// Measured from the LABEL and capped. `smart` is the one column here that can hold a
+	// bound id, so it is the one that had to learn a ceiling — see `PRESET_MODEL_MAX`.
+	const smart = Math.min(
+		PRESET_MODEL_MAX,
+		longest(
+			rows.map((row) => modelWidth(row.smartLabel)),
+			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 workflow bar ─────────────────────────────────────────────────────────
+
+/**
+ * The bar is laid out by YOGA, not by arithmetic in this file.
+ *
+ * What used to be here — `spendRuns` and `splitCells` — divided N cells among K counts by
+ * largest remainder, floored every share at one cell, and then paid whatever was left over
+ * in track so the row still came out exactly its allotted width. Every one of those steps
+ * is a thing a flex engine already does, and doing it twice is how a row ends up a cell
+ * short of the box it sits in.
+ *
+ * So a segment is a `<box>` with `flexGrow` set to its share of the workflow's agents, and
+ * the row filling its width exactly is a property of the layout rather than a correction
+ * this module applies. MEASURED with the real renderer at 20/26/32/40/64/80 columns: the
+ * captured spans sum to the row width at every rung, with no shortfall to pay.
+ *
+ * ## Three findings that shape the code below, all measured against OpenTUI 0.1.107
+ *
+ * 1. `flexBasis: 0` + `flexGrow: n` alone lets a small share resolve to ZERO cells and
+ *    vanish: shares 40/1/1/1/1 at 20 columns drew three segments, not five. `minWidth: 1`
+ *    is what keeps every segment on screen, and it is the layout-native spelling of the
+ *    min-one-cell rule `splitCells` used to carry. It costs a little proportionality at
+ *    narrow widths — Yoga takes the floor out of the free space first, so 9/3/3/2 at 20
+ *    columns resolves 9,4,4,3 rather than 11,3,4,2 — which is a fair trade at a width where
+ *    one cell is a twentieth of the bar.
+ *
+ * 2. A segment's CONTENT never perturbs the distribution. A 200-character fill and an empty
+ *    box resolve to identical widths at every rung, which is what makes it safe to measure a
+ *    segment and then draw into it: the measurement cannot invalidate itself.
+ *
+ * 3. `flexDirection: "row"` on a box that also clips (`overflow: "hidden"`) loses ONE CELL
+ *    off the right of its text child — 9,4,4,3 drew `000000000111 222 33 `. The same tree in
+ *    the default column direction is gapless at every rung. So a segment box is NEVER a row;
+ *    the row direction lives on the container above it.
+ */
+
+/** The unlit cell between two neighbouring segments. */
+export const BAR_DIVIDER = "░";
+
+/**
+ * The weave a MATE segment is drawn with, so it is not colour alone that says this work
+ * leaves Claude Code.
+ *
+ * `▓` is 75% ink, which is the whole reason it is this glyph and not `▒` or `░`. Drawn in
+ * the mate's `bar` tone over its `bg` tone, three quarters of every cell is the same fill
+ * weight the four Claude models carry, so a mate reads as a peer with a texture rather than
+ * as something dimmed, disabled or errored — the failure mode a lighter glyph walks straight
+ * into. `░` is spoken for anyway: it is the unlit track, and reusing it would say "nothing
+ * runs here" about a segment that is running someone else's model.
+ */
+export const MATE_WEFT = "▓";
+
+/**
+ * The id, the routing sentinel and the WORD for the one run every mate-routed agent in a
+ * workflow collapses into.
+ *
+ * Not a routing value and never written to a config — `models-core` knows nothing about it.
+ * It is a bar-only identity, which is why it lives here beside the drawing code: the bar
+ * answers "how much of this workflow leaves Claude Code", and that is one number however
+ * many slots it is spread across.
+ *
+ * A workflow that routes two agents to two different slots used to draw two narrow textured
+ * runs labelled `mate1` and `mate2`. At the widths this panel gets, neither label fitted, so
+ * the distinction cost two segments and bought nothing — while the number the bar exists to
+ * show was split in half.
+ *
+ * The word is `mates` even when exactly ONE slot is in play. A lone `mate1` there would say
+ * the label names a slot, and the next config over — same label, two slots — would prove it
+ * does not. The detail pane names the slots; the key under the chart names them with their
+ * bindings. This is the only place that deliberately does not.
+ */
+export const MATES_SEGMENT = "mates";
+
+/**
+ * Is this bar segment external work — a slot, or the collapsed run standing for several?
+ *
+ * The one predicate the weave, the label-fit rule and the ground colour all read, so a
+ * collapsed segment cannot end up woven-but-uncoloured or coloured-but-plain.
+ */
+export function isMateSegment(model: string): boolean {
+	return model === MATES_SEGMENT || isMate(baseAlias(model));
+}
+
+/**
+ * A fill long enough to outrun any segment, since the box clips it to size.
+ *
+ * The alternative is to repeat the glyph to a MEASURED width, which is a frame behind the
+ * layout and would leave a mate segment plain on the frame it first appears. Clipping is
+ * exact (finding 3 above), so an over-long run is simply the fill, with no arithmetic and
+ * nothing to be stale about. 240 clears any pane a terminal can offer this panel.
+ */
+const WEFT_RUN = 240;
+
+/**
+ * Columns an inline label needs: the name, plus one padding cell each side.
+ *
+ * The same measure `modelBadgeWidth` uses, and deliberately so — an inline label IS the
+ * chip, inset into the bar, so it costs what a chip costs.
+ */
+export function inlineLabelWidth(label: string): number {
+	return modelBadgeWidth(label);
+}
+
+/**
+ * What a segment writes inside itself.
+ *
+ * A mate writes its SLOT — `mate1` — and never the id it is bound to. The slot is the stable
+ * identity the rest of this screen is keyed on, it is what the legend names, and a bound id
+ * runs to 21 characters (`gemini-omni-1.1-flash`), which no segment at a real pane width
+ * could hold. `baseAlias` gives the slot for a mate and the plain alias for everything else,
+ * so one call covers both.
+ */
+export function segmentLabel(model: string): string {
+	return baseAlias(model);
+}
+
+/**
+ * Does the label fit inside the segment, given the width the layout resolved?
+ *
+ * `undefined` means the layout has not reported yet — the first frame after mount — and is
+ * a NO. There is no third answer here on purpose: a label either sits inside its segment
+ * whole or it does not appear at all, and the legend under the bar carries it instead.
+ * Clipping `sonnet` to `son…` inside a coloured block reads as a model id that does not
+ * exist, which is worse than the segment being unlabelled.
+ *
+ * A MATE ASKS FOR TWO CELLS MORE than its label needs, and that is the rule that keeps the
+ * weave honest. At exactly `inlineLabelWidth` the chip fills the segment edge to edge and
+ * not one cell of `▓` survives — so the one segment on the row that is supposed to be
+ * distinguishable without colour would, at that single width, be distinguishable only by
+ * colour. Two spare cells is one weave cell each side, which is the least that still reads
+ * as a texture rather than as a stray character.
+ */
+export function inlineLabelFits(
+	model: string,
+	cells: number | undefined,
+): boolean {
+	const weave = isMateSegment(model) ? 2 : 0;
+	return (
+		cells !== undefined &&
+		inlineLabelWidth(segmentLabel(model)) + weave <= cells
+	);
+}
+
+/** One run of the bar: what it routes to, and how much of the workflow it is. */
+export interface BarSegmentSpec {
+	/** Identity within the row — the distribution key, so two tiers on one model stay two. */
+	id: string;
+	/** The routing value: an alias, `inherit`, or a slot. Decides ink, weave and label. */
+	model: string;
+	/** Agents this segment stands for. Becomes its `flexGrow`. */
+	share: number;
+}
+
+/**
+ * A tier distribution as the runs a bar actually draws: every mate folded into ONE.
+ *
+ * The fold is a SUM, not a pick, so the proportion is untouched — two agents on two slots
+ * occupy exactly the cells the two separate runs occupied, less the divider that used to sit
+ * between them. Shares stay counts and the layout stays Yoga's; nothing here divides cells
+ * (see the note above `BAR_DIVIDER` for why that matters).
+ *
+ * Collapsing keys off the MODEL, never the key: a grade bound to `mate1` reaches the bar as
+ * `{key: "cheap", model: "mate1"}`, and folding by key would leave that one outside the run
+ * it belongs in.
+ *
+ * The collapsed run takes the position of the FIRST mate in the order, so adding a second
+ * slot to a config does not move the bar's other segments around.
+ */
+export function barSegments(segments: AgentSegment[]): BarSegmentSpec[] {
+	const runs: BarSegmentSpec[] = [];
+	let mates: BarSegmentSpec | undefined;
+	for (const segment of segments) {
+		// `isMateSegment`, not `isMate`: two kinds of segment belong in this run — a slot a
+		// config bound to an agent, and the workflow's own external phases, which arrive
+		// already carrying the family name. Matching only the slots leaves the second kind
+		// outside and draws two `mates` runs side by side.
+		if (isMateSegment(segment.model)) {
+			if (!mates) {
+				mates = { id: MATES_SEGMENT, model: MATES_SEGMENT, share: 0 };
+				runs.push(mates);
+			}
+			mates.share += segment.count;
+			continue;
+		}
+		runs.push({ id: segment.key, model: segment.model, share: segment.count });
+	}
+	return runs;
+}
+
+/** Callback a segment uses to report the width the layout gave it. */
+type Measure = (id: string, cells: number) => void;
+
+/**
+ * One segment: a coloured box that Yoga sizes, with its label drawn inside when it fits.
+ *
+ * The fill is the box's `backgroundColor` rather than a run of `█`, which is the same
+ * picture with none of the counting — a `█` in a colour and a cell painted that colour are
+ * indistinguishable in a terminal, and only one of them needs to know how wide the box is.
+ *
+ * ## The label is written ON the fill, not in a chip inset into it
+ *
+ * It used to be the model's CHIP — `bg` under `fg`, inset — which put a second, visibly
+ * different rectangle inside a block that is supposed to read as one thing. Reported as
+ * "do not add additional background colour to model segments".
+ *
+ * The reason the chip was there in the first place still stands and is why deleting it was
+ * not the fix on its own: MEASURED across both pages, a model's `fg` laid on its own `bar`
+ * runs 1.74–2.99:1 on the dark page, which is a smudge rather than a word. So the palette
+ * grew a fourth ink — `label`, chosen against each model's own `bar` and nothing else,
+ * 4.80–4.93:1 on every model and both pages — and the segment writes the name in that,
+ * directly on its own fill. No second background, and no unreadable text.
+ *
+ * A MATE is the one case that still sets a background, and it sets it to `bar` — the tone
+ * its own weave is painted in. A mate's box ground is `bg` with `▓` (75% ink) of `bar` over
+ * it, so the segment READS as `bar`; leaving the label cells at the raw `bg` would punch a
+ * darker patch where the weave stops, which is the same defect in the other direction.
+ * Painting those few cells `bar` makes the whole segment one tone, and it means one rule
+ * covers every model: the label sits on `bar`, so it is measured against `bar`.
+ */
+function BarSegment({
+	segment,
+	cells,
+	onMeasure,
+}: {
+	segment: BarSegmentSpec;
+	/** Columns the layout resolved for this box, or `undefined` before the first report. */
+	cells: number | undefined;
+	onMeasure: Measure;
+}): React.ReactNode {
+	const identity = baseAlias(segment.model);
+	const ink = modelBadge(identity);
+	const mate = isMateSegment(identity);
+	const label = segmentLabel(segment.model);
+	const fits = inlineLabelFits(segment.model, cells);
+	// EVERY segment has ONE ground, and it is `bar` — mates included. A mate's texture is a
+	// pale MARK painted on that ground, never a second surface behind it: two tones inside
+	// one run read as two blocks, a solid patch of colour with a patterned margin beside it.
+	//
+	// One ground is also what keeps the contrast numbers honest. Every model's `label` ink is
+	// measured against its `bar`, and `bar` is what the label sits on in every segment.
+	const ground = ink.bar;
+	const pad = fits && cells !== undefined ? cells - inlineLabelWidth(label) : 0;
+	const left = Math.floor(pad / 2);
+	const weft = mate ? MATE_WEFT : " ";
+
+	return (
+		<box
+			flexGrow={segment.share}
+			flexBasis={0}
+			minWidth={1}
+			overflow="hidden"
+			backgroundColor={ground}
+			onSizeChange={function (this: BoxRenderable) {
+				onMeasure(segment.id, this.width);
+			}}
+		>
+			{fits ? (
+				// The weave is drawn in `bg`, the model's PALEST tone, over the `bar` ground.
+				// A Claude segment's weft is a space, so its ink never shows.
+				<text fg={(mate ? ink.bg : ink.bar) as UiColor}>
+					<span>{weft.repeat(left)}</span>
+					{/* No `bg` on the label, for any model: the box is already `bar`, and naming
+					    a background here could only repaint it as a second tone. */}
+					<span fg={ink.label}>{` ${label} `}</span>
+					<span>{weft.repeat(pad - left)}</span>
+				</text>
+			) : mate ? (
+				<text fg={ink.bg as UiColor}>{MATE_WEFT.repeat(WEFT_RUN)}</text>
+			) : null}
+		</box>
+	);
+}
+
+// ─── The colour key under the bars ────────────────────────────────────────────
+
+/** One chip in the key: the ink it is painted in, and the words written on it. */
+export interface KeyChip {
+	/**
+	 * Decides the INK, and it is not always the model.
+	 *
+	 * Every slot resolves to `MATES_SEGMENT`, because the key describes the CHART and the
+	 * chart paints all external work in one tone. Chipping `mate1` in ochre here would put a
+	 * colour in the legend that appears at no width in the graphic above it — the exact
+	 * defect `ModelKey`'s own note records, in a new place.
+	 */
+	ink: string;
+	/** What the chip writes: `opus`, or `mate1 grok-4.6`, or `mate1 unset`. */
+	text: string;
+}
+
+/**
+ * The key's chips, fitted to the row it has.
+ *
+ * A slot is written WITH ITS BINDING, which is the detail the bar gave up when it collapsed
+ * its mates into one run. The bar answers how much work leaves Claude Code; this answers
+ * where it goes, in the one place on this screen with the width for a 21-character
+ * catalogue id.
+ *
+ * An unbound slot writes `unset` — `modelLabel`'s word, the same one the tier table's Model
+ * column already uses for that state, rather than a second word for one thing. What it must
+ * never write is the slot name twice: `mate1 mate1` names no model and is what binding a
+ * slot exists to remove.
+ *
+ * ## Four rungs, and it never wraps
+ *
+ * Wrapping is not available: this block is budgeted at `SUMMARY_COST.key` = 2 rows in a
+ * fixed-height panel, and an over-tall block there OVERPRINTS rather than scrolling or
+ * clipping (see `planModelsSummary`). A second row would land on whatever is drawn below it.
+ *
+ *   bound      every chip with its slot's model      `mate1 grok-4.6   mate2 kimi-k3`
+ *   slots      every chip, bindings dropped          `mate1   mate2`
+ *   folded     the slots as the bar's own one word   `mates`
+ *   truncated  chips dropped from the right, folded
+ *
+ * The first three rungs are ALL-OR-NOTHING for the whole row, the way `fitPresetRows` is for
+ * the whole list: one long binding would otherwise show its model while its neighbour showed
+ * a bare slot, which reads as two formats rather than as one terse row. Keeping every colour
+ * in the key beats keeping one binding — a legend missing an entry cannot decode the chart.
+ *
+ * The `folded` rung is why truncation is the LAST resort rather than the second. Dropping
+ * chips from the right takes them in `modelsInUse` order, which puts the mates near the end
+ * — so a two-slot config at 40 columns kept `mate1` and silently dropped `mate2`, naming one
+ * slot as though it were the only external one. Folding says exactly what the bar says, in
+ * the tone the bar paints, and costs one chip instead of two.
+ */
+export function fitModelKey(
+	config: ModelsConfig,
+	width: number,
+	labelCells: number,
+	/**
+	 * Does a WORKFLOW put a mates run on the chart, independently of this config?
+	 *
+	 * The key describes the chart, and the chart draws mates for two reasons: a config that
+	 * binds a slot to an agent, and a workflow whose own phases run outside Claude Code. Only
+	 * the first is visible in `config`, so without this a built-in preset — which binds no
+	 * slot — drew a textured run with no chip under it to say what the texture meant.
+	 */
+	externalWorkflows = false,
+): KeyChip[] {
+	const models = modelsInUse([config]);
+	const form = (rung: "bound" | "slots" | "folded"): KeyChip[] => {
+		const chips: KeyChip[] = [];
+		let folded = false;
+		let sawMate = false;
+		for (const model of models) {
+			if (!isMate(model)) {
+				chips.push({ ink: model, text: model });
+				continue;
+			}
+			sawMate = true;
+			// Folded exactly as `barSegments` folds the bar: one entry, at the position of
+			// the first slot, standing for all of them.
+			if (rung === "folded") {
+				if (folded) continue;
+				folded = true;
+				chips.push({ ink: MATES_SEGMENT, text: MATES_SEGMENT });
+				continue;
+			}
+			chips.push({
+				ink: MATES_SEGMENT,
+				text:
+					rung === "bound" ? `${model} ${modelLabel(config, model)}` : model,
+			});
+		}
+		// The workflow's own external phases, when the config named no slot of its own. One
+		// unnamed chip, because there is no slot to name — the run stands for whichever model
+		// claudish reaches for, and the config has not said which.
+		//
+		// Placed BEFORE `inherit`, never appended. Chips are dropped from the right when the
+		// row will not fit, and last place is first to go — which lost the one chip that
+		// explains a texture the reader cannot otherwise decode, while keeping the chip for a
+		// flat grey that means "nothing was chosen". `inherit` is the one that can go.
+		if (!sawMate && externalWorkflows) {
+			const chip = { ink: MATES_SEGMENT, text: MATES_SEGMENT };
+			const inherit = chips.findIndex((c) => c.ink === "inherit");
+			if (inherit === -1) chips.push(chip);
+			else chips.splice(inherit, 0, chip);
+		}
+		return chips;
+	};
+	// A chip costs its own two padding cells (`modelBadgeWidth`) plus one space separating it
+	// from the chip before it — measured the way the row is drawn, so it cannot overflow by
+	// exactly the padding the chips paint.
+	const cost = (chips: KeyChip[]) =>
+		chips.reduce(
+			(sum, chip, index) => sum + modelBadgeWidth(chip.text) + (index ? 1 : 0),
+			labelCells,
+		);
+
+	for (const rung of ["bound", "slots", "folded"] as const) {
+		const chips = form(rung);
+		if (cost(chips) <= width) return chips;
+	}
+
+	const shown: KeyChip[] = [];
+	let used = labelCells;
+	for (const chip of form("folded")) {
+		const next = modelBadgeWidth(chip.text) + (shown.length > 0 ? 1 : 0);
+		if (used + next > width) break;
+		shown.push(chip);
+		used += next;
+	}
+	return shown;
+}
+
+/** The unlit cell that keeps two neighbouring segments from reading as one. */
+function BarDivider(): React.ReactNode {
+	return (
+		<box width={1} flexShrink={0}>
+			<text fg={trackFill() as UiColor}>{BAR_DIVIDER}</text>
+		</box>
+	);
+}
+
+/**
+ * A whole bar: every segment side by side, filling whatever the row leaves it.
+ *
+ * Holds the measurements because they are one reading of one row — a map keyed by segment
+ * id, written only when a width actually changes, so a label appearing cannot start a loop.
+ * It converges in one extra frame and then sits still; finding 2 above is what guarantees
+ * that, since the label it draws cannot move the box it is drawn in.
+ *
+ * The one-cell divider is kept from the bar this replaces, for the reason it was added:
+ * 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 BarRow({
+	segments,
+}: {
+	segments: BarSegmentSpec[];
+}): React.ReactNode {
+	const [measured, setMeasured] = useState<Record<string, number>>({});
+	const record: Measure = (id, cells) =>
+		setMeasured((previous) =>
+			previous[id] === cells ? previous : { ...previous, [id]: cells },
+		);
+
+	const drawn = segments.filter((segment) => segment.share > 0);
+	return (
+		<box flexDirection="row" flexGrow={1} minWidth={0}>
+			{drawn.length === 0 ? (
+				<box flexGrow={1} minWidth={0} overflow="hidden">
+					<text fg={trackFill() as UiColor}>
+						{BAR_DIVIDER.repeat(WEFT_RUN)}
+					</text>
+				</box>
+			) : (
+				drawn.map((segment, index) => (
+					<Fragment key={segment.id}>
+						{index > 0 ? <BarDivider /> : null}
+						<BarSegment
+							segment={segment}
+							cells={measured[segment.id]}
+							onMeasure={record}
+						/>
+					</Fragment>
+				))
+			)}
+		</box>
+	);
+}