claudeup 6.6.0 → 6.8.0

package/src/ui/renderers/modelVisuals.tsx

@@ -1,12 +1,18 @@
+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";
@@ -59,7 +65,11 @@ export type CategoryTone = keyof typeof theme.category;
  * 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.
+ * 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;
@@ -77,11 +87,43 @@ export function modelBarFill(model: string): UiColor {
  * `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;
@@ -100,13 +142,19 @@ export function modelBadgeWidth(model: string): number {
  */
 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)}>{model}</span>
+		<span fg={selected ? theme.selection.fg : modelFg(model)}>
+			{label ?? model}
+		</span>
 	);
 }
 
@@ -121,14 +169,19 @@ export function 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 {
-	if (selected) return <ModelText model={model} selected />;
+	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}>{` ${model} `}</span>;
+	return <span bg={ink.bg} fg={ink.fg}>{` ${text} `}</span>;
 }
 
 /** Pad a model COLUMN — emitted after the name, so columns line up. */
@@ -213,8 +266,6 @@ export function EffortGlyph({
 	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);
@@ -225,6 +276,9 @@ export function EffortGlyph({
 			</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);
@@ -237,8 +291,35 @@ export function EffortGlyph({
 	);
 }
 
-/** The word after the glyph. Absent effort says what absent MEANS. */
-export function effortWord(effort: Effort | undefined): string {
+/**
+ * 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";
 }
 
@@ -303,10 +384,16 @@ export function agentDistribution(config: ModelsConfig): AgentSegment[] {
  * 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) {
@@ -319,6 +406,13 @@ export function workflowDistribution(
 					: 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);
@@ -368,7 +462,11 @@ export function modelsInUse(configs: ModelsConfig[]): string[] {
 			if (typeof assignment !== "string") seen.add(baseAlias(assignment.model));
 		}
 	}
-	const order = [...MODEL_ALIASES, "inherit"] as readonly string[];
+	// Aliases, then mates, then `inherit`. The list reads as "what claudeup 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;
@@ -380,10 +478,19 @@ export function modelsInUse(configs: ModelsConfig[]): string[] {
 
 export interface AgentRow {
 	name: string;
-	/** The assignment as written: a grade, `inherit`, or a pinned model. */
+	/** 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. */
+	/** 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;
@@ -409,17 +516,32 @@ export function agentRows(config: ModelsConfig): AgentRow[] {
 		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,
-			effort:
-				typeof assignment === "string"
-					? grade
-						? config.grades[grade].effort
-						: undefined
-					: assignment.effort,
+			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",
 		});
 	}
@@ -465,6 +587,19 @@ function effortColumn(detail: EffortDetail, word: number): number {
 	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.
  *
@@ -490,13 +625,23 @@ export function fitAgentTable(
 		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.model))),
+		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).length,
+			row.inherit ? NONE_CELL.length : effortWord(row.effort, row.model).length,
 		),
 		1,
 	);
@@ -508,11 +653,16 @@ export function fitAgentTable(
 		{ grade: 0, effort: "none" },
 	];
 
-	const measure = (grade: number, effort: EffortDetail, name: number) =>
+	const measure = (
+		grade: number,
+		effort: EffortDetail,
+		name: number,
+		model: number = modelNeeded,
+	) =>
 		name +
 		1 +
 		(grade > 0 ? grade + 1 : 0) +
-		modelNeeded +
+		model +
 		1 +
 		effortColumn(effort, wordNeeded);
 
@@ -532,13 +682,33 @@ export function fitAgentTable(
 	// 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);
+	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: NAME_FLOOR,
 		grade: 0,
-		model: modelNeeded,
+		model,
 		effort: "none",
-		total: measure(0, "none", name),
+		total: measure(0, "none", NAME_FLOOR, model),
 	};
 }
 
@@ -558,37 +728,61 @@ export function agentTableHeaders(
 	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 {
-	const clipped =
-		text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
-	return clipped.padEnd(width);
+	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);
+	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. */
+/**
+ * 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)",
-	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)
-	);
+/** 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. */
@@ -614,8 +808,12 @@ export interface PresetRowLayout {
 /** 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;
 }
@@ -623,6 +821,20 @@ export interface PresetRowInput {
 /** 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. */
@@ -677,9 +889,14 @@ export function fitPresetRows(
 		rows.map((row) => modelWidth(row.main)),
 		1,
 	);
-	const smart = longest(
-		rows.map((row) => modelWidth(row.smart)),
-		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),
@@ -722,132 +939,464 @@ export function fitPresetRows(
 	return { name, main: 0, smart: 0, detail: "none", total: base + markers };
 }
 
-// ─── The spend bar ────────────────────────────────────────────────────────────
+// ─── The workflow bar ─────────────────────────────────────────────────────────
 
 /**
- * Apportion `cells` columns across `values`, exactly.
+ * 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.
  *
- * 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.
+ * 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.
  */
-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) });
-	});
+/** 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 = "▓";
 
-	// 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;
+/**
+ * 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);
 			}
-		});
-		if (victim === -1) break;
-		out[victim] = (out[victim] ?? 0) - 1;
-		used -= 1;
+			mates.share += segment.count;
+			continue;
+		}
+		runs.push({ id: segment.key, model: segment.model, share: segment.count });
 	}
+	return runs;
+}
 
-	// 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;
+/** 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>
+	);
 }
 
-export interface SpendRun {
-	kind: "fill" | "track";
-	cells: number;
-	id: string;
-	colour?: UiColor;
+// ─── 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 spend bar's runs: ONE line, split in half.
+ * 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.
  *
- * 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.
+ * 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.
  *
- * 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.
+ * ## 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 spendRuns(
+export function fitModelKey(
 	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" },
-	];
+	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 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),
+	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>
 	);
+}
 
-	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;
-	});
+/**
+ * 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 },
+		);
 
-	// 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;
+	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>
+	);
 }