claudeup 6.6.0 → 6.8.0

package/src/__tests__/model-visuals.test.tsx

@@ -1,36 +1,66 @@
 import { describe, expect, test } from "bun:test";
-import { BUILT_IN_PRESETS, findPreset } from "../data/models-presets.js";
+import { type CapturedFrame, rgbToHex } from "@opentui/core";
+import { testRender } from "@opentui/react/test-utils";
+import { act } from "react";
+import {
+	BUILT_IN_PRESETS,
+	WORKFLOWS,
+	findPreset,
+} from "../data/models-presets.js";
 import {
 	EFFORTS,
 	type Effort,
 	GRADES,
+	MATES,
 	MODEL_ALIASES,
 	type ModelsConfig,
+	type ModelsStatus,
+	UNBOUND_MATE,
+	modelLabel,
 } from "../services/models-core.js";
+import type { ModelsPresetItem } from "../ui/adapters/modelsAdapter.js";
 import {
 	detailPanelWidth,
 	listPanelWidth,
 } from "../ui/components/layout/ScreenLayout.js";
 import {
+	AgentSpread,
+	SPREAD_LABEL_CELLS,
+	SUBAGENT_ROW_LABEL,
+	WORKFLOW_GAP_ROWS,
+	WORKFLOW_ROWS,
 	planModelsSummary,
+	renderModelsSummary,
 	shortConfigPath,
+	specModelColumn,
 } from "../ui/renderers/modelRenderers.js";
 import {
+	BAR_DIVIDER,
 	EFFORT_GLYPH_CELLS,
 	EFFORT_OFF,
 	EFFORT_ON,
+	MATES_SEGMENT,
+	MATE_EFFORT_NOTE,
+	MATE_WEFT,
 	NONE_CELL,
 	NO_EFFORT_GLYPH,
+	PRESET_MODEL_MAX,
 	PRESET_NAME_MAX,
 	type PresetRowInput,
 	agentDistribution,
 	agentRows,
 	agentTableHeaders,
+	barSegments,
+	clipCell,
 	effortGlyph,
 	effortLabel,
 	effortLevel,
+	effortWord,
 	fitAgentTable,
+	fitModelKey,
 	fitPresetRows,
+	inlineLabelWidth,
+	isMateSegment,
 	modelBadgeWidth,
 	modelBarFill,
 	modelFg,
@@ -39,9 +69,17 @@ import {
 	modelsInUse,
 	padCell,
 	presetMarkerWidth,
+	segmentLabel,
+	workflowDistribution,
 } from "../ui/renderers/modelVisuals.js";
 import { wrapText } from "../ui/renderers/styleRenderers.js";
-import { CONTRAST_REFERENCE_KEYS, MODEL_BADGE } from "../ui/theme-mode.js";
+import {
+	CONTRAST_REFERENCE_KEYS,
+	MODEL_BADGE,
+	modelBadge,
+	resetThemeMode,
+	setThemeMode,
+} from "../ui/theme-mode.js";
 import { theme } from "../ui/theme.js";
 
 /**
@@ -79,27 +117,48 @@ describe("the model → colour map", () => {
 	/** The grounds a dark terminal actually uses: pure black, our reference, One Dark. */
 	const DARK_GROUNDS = ["#000000", CONTRAST_REFERENCE_KEYS.dark, "#282C34"];
 
-	test("is total over every alias the Agent tool accepts, plus inherit", () => {
+	/**
+	 * Everything the map has to answer for: four aliases, three mate slots, the mate FAMILY
+	 * tone, and `inherit`.
+	 *
+	 * `mates` is not a slot and not a routing value — it is the ink of the one collapsed run
+	 * a workflow bar draws for all external work at once. It is in this list because it is
+	 * painted at full size on the chart, so every contrast rule below applies to it exactly
+	 * as it applies to a model's own tone.
+	 */
+	const ALL_INKS = [
+		...MODEL_ALIASES,
+		...MATES,
+		MATES_SEGMENT,
+		"inherit",
+	] as const;
+	/** The ones that carry a hue — `inherit` is grey on purpose and is excluded. */
+	const COLOURED = [...MODEL_ALIASES, ...MATES, MATES_SEGMENT] as const;
+
+	test("is total over every alias the Agent tool accepts, the mates, and inherit", () => {
 		// A colourless model must be a build error, not a grey surprise at runtime.
-		expect(Object.keys(MODEL_BADGE).sort()).toEqual(
-			[...MODEL_ALIASES, "inherit"].sort(),
-		);
-		for (const alias of [...MODEL_ALIASES, "inherit"] as const) {
+		expect(Object.keys(MODEL_BADGE).sort()).toEqual([...ALL_INKS].sort());
+		for (const alias of ALL_INKS) {
 			for (const mode of ["light", "dark"] as const) {
 				const ink = MODEL_BADGE[alias][mode];
 				expect(ink.bg).toMatch(/^#[0-9A-Fa-f]{6}$/);
 				expect(ink.fg).toMatch(/^#[0-9A-Fa-f]{6}$/);
 				expect(ink.bar).toMatch(/^#[0-9A-Fa-f]{6}$/);
+				expect(ink.label).toMatch(/^#[0-9A-Fa-f]{6}$/);
 			}
 		}
 	});
 
 	test("one colour per model, and no two models share one", () => {
 		// Rule 1: colour is semantic. Two models on one fill means the colour stops
-		// answering "which model" the moment both appear on screen.
+		// answering "which model" the moment both appear on screen. The mates are in scope:
+		// they are one FAMILY, which is a statement about hue, not a licence to repeat a fill
+		// — three slots that painted the same colour would say there is one of them.
 		for (const mode of ["light", "dark"] as const) {
-			const fills = MODEL_ALIASES.map((a) => MODEL_BADGE[a][mode].bg);
-			expect(new Set(fills).size).toBe(MODEL_ALIASES.length);
+			const fills = COLOURED.map((a) => MODEL_BADGE[a][mode].bg);
+			expect(new Set(fills).size).toBe(COLOURED.length);
+			const bars = COLOURED.map((a) => MODEL_BADGE[a][mode].bar);
+			expect(new Set(bars).size).toBe(COLOURED.length);
 		}
 	});
 
@@ -109,7 +168,7 @@ describe("the model → colour map", () => {
 	 * Dark's they measure ~1.0:1 and the chip reads as a hole punched in the row.
 	 */
 	test("every dark fill clears every plausible dark ground", () => {
-		for (const alias of [...MODEL_ALIASES, "inherit"] as const) {
+		for (const alias of ALL_INKS) {
 			for (const ground of DARK_GROUNDS) {
 				expect(contrast(MODEL_BADGE[alias].dark.bg, ground)).toBeGreaterThan(
 					1.2,
@@ -119,7 +178,7 @@ describe("the model → colour map", () => {
 	});
 
 	test("ink is readable on its own fill, on both pages", () => {
-		for (const alias of [...MODEL_ALIASES, "inherit"] as const) {
+		for (const alias of ALL_INKS) {
 			for (const mode of ["light", "dark"] as const) {
 				const ink = MODEL_BADGE[alias][mode];
 				expect(contrast(ink.fg, ink.bg)).toBeGreaterThan(3);
@@ -127,6 +186,93 @@ describe("the model → colour map", () => {
 		}
 	});
 
+	/**
+	 * THE GUARD ON THE INLINE LABEL, and the reason `label` exists at all.
+	 *
+	 * A bar segment is one block of one colour with a word written on it — no chip and no
+	 * second background, because a chip is what was reported ("do not add additional
+	 * background colour to model segments"). That leaves the word sitting directly on `bar`,
+	 * so the ink has to be chosen against `bar` and measured against `bar`.
+	 *
+	 * Without this test a palette tweak reintroduces an unreadable label in silence: the
+	 * screen still draws, the word is still there, and it is a smudge. Which is precisely
+	 * where `fg` was — the negative control below measures it at 1.74:1.
+	 */
+	test("every model's LABEL ink clears 4.5:1 on its own bar, on both pages", () => {
+		const measured: Array<{ key: string; clears: boolean }> = [];
+		for (const alias of ALL_INKS) {
+			for (const mode of ["light", "dark"] as const) {
+				const ink = MODEL_BADGE[alias][mode];
+				measured.push({
+					key: `${alias}.${mode}`,
+					clears: contrast(ink.label, ink.bar) >= 4.5,
+				});
+			}
+		}
+		// Asserted as one array so a failure names every model that regressed rather than
+		// stopping at the first, which is what makes fixing a palette one edit.
+		expect(measured.filter((entry) => !entry.clears)).toEqual([]);
+	});
+
+	/**
+	 * The collapsed run's own numbers, pinned rather than covered by the loop above.
+	 *
+	 * The loop asserts a threshold over every ink; this records what THIS one measures, so a
+	 * palette nudge that still clears 4.5:1 but moves the tone is a visible diff rather than
+	 * a silent one. It is the ink most worth pinning: it is the widest single block of colour
+	 * the chart ever paints, and it is the newest.
+	 */
+	test("the collapsed `mates` run's label is 4.97:1 light / 4.78:1 dark on its bar", () => {
+		const measured = (["light", "dark"] as const).map((mode) => ({
+			mode,
+			label: Number(
+				contrast(
+					MODEL_BADGE.mates[mode].label,
+					MODEL_BADGE.mates[mode].bar,
+				).toFixed(2),
+			),
+			chip: Number(
+				contrast(
+					MODEL_BADGE.mates[mode].fg,
+					MODEL_BADGE.mates[mode].bg,
+				).toFixed(2),
+			),
+		}));
+		expect(measured).toEqual([
+			{ mode: "light", label: 4.97, chip: 5.87 },
+			{ mode: "dark", label: 4.78, chip: 4.83 },
+		]);
+		// And it is nobody's slot ink: a run standing for several slots may not wear one of
+		// their colours, which is the whole reason this entry exists.
+		for (const mode of ["light", "dark"] as const) {
+			for (const mate of MATES) {
+				expect(MODEL_BADGE.mates[mode].bar).not.toBe(
+					MODEL_BADGE[mate][mode].bar,
+				);
+			}
+		}
+	});
+
+	test("and `fg` would NOT have — the reason a fourth ink was added at all", () => {
+		// The negative control. `fg` is built to sit on `bg`, and on the dark page it
+		// collapses on `bar`: sonnet 1.74:1, opus 1.90, mate1 2.12. Deleting the chip and
+		// keeping `fg` would have shipped exactly that.
+		const worst = Math.min(
+			...MODEL_ALIASES.map((alias) =>
+				contrast(MODEL_BADGE[alias].dark.fg, MODEL_BADGE[alias].dark.bar),
+			),
+		);
+		expect(worst).toBeLessThan(2);
+		// And no model's label IS its `fg`, so nothing can quietly fall back to the pairing
+		// this replaced.
+		for (const alias of ALL_INKS) {
+			for (const mode of ["light", "dark"] as const) {
+				const ink = MODEL_BADGE[alias][mode];
+				expect(ink.label).not.toBe(ink.fg);
+			}
+		}
+	});
+
 	/**
 	 * Dark is NOT a mirror of light, and that is the whole design. Cream carries the light
 	 * already, so a light chip stays quiet; a near-black page carries none, so the same
@@ -134,7 +280,7 @@ describe("the model → colour map", () => {
 	 * theme". A dark chip is a saturated mid-tone, so its FILL is the brighter half.
 	 */
 	test("a dark chip is a mid-tone fill, a light chip is a pale one", () => {
-		for (const alias of MODEL_ALIASES) {
+		for (const alias of COLOURED) {
 			const light = MODEL_BADGE[alias].light;
 			const dark = MODEL_BADGE[alias].dark;
 			// Light: the fill is barely off the page, the ink carries the colour.
@@ -146,12 +292,138 @@ describe("the model → colour map", () => {
 
 	test("the bar is a softer step than the badge ink it sits beside", () => {
 		// Twenty characters of badge ink is a slab; a chart needs its own strength.
-		for (const alias of MODEL_ALIASES) {
+		for (const alias of COLOURED) {
 			const dark = MODEL_BADGE[alias].dark;
 			expect(luminance(dark.bar)).toBeLessThan(luminance(dark.fg));
 		}
 	});
 
+	/**
+	 * The mates read as ONE FAMILY and still separate as three slots.
+	 *
+	 * Both halves matter and they pull against each other. All three mean the same thing —
+	 * someone else's model, reached through claudish — so three unrelated hues would say the
+	 * opposite; but they are three genuinely different external models, so one hue would say
+	 * there is one of them.
+	 *
+	 * The resolution is a shared warm band (hue 6°–41° on both pages, which nothing else on
+	 * this screen occupies) with ~17° between neighbours. It is asserted as hue rather than
+	 * as luminance because that IS the design: at one or two characters a luminance step of
+	 * this size is invisible, while a hue difference of this size is not.
+	 */
+	const hue = (hex: string): number => {
+		const n = Number.parseInt(hex.slice(1), 16);
+		const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+		const max = Math.max(r, g, b);
+		const min = Math.min(r, g, b);
+		if (max === min) return Number.NaN; // grey has no hue at all
+		const delta = max - min;
+		const raw =
+			max === r
+				? ((g - b) / delta) % 6
+				: max === g
+					? (b - r) / delta + 2
+					: (r - g) / delta + 4;
+		return (raw * 60 + 360) % 360;
+	};
+
+	/**
+	 * How far a colour is from grey, 0–255.
+	 *
+	 * `hue` cannot answer that: a near-grey has a hue angle like any other colour, so
+	 * "is this neutral" has to be asked of the channel spread instead.
+	 */
+	const chroma = (hex: string): number => {
+		const n = Number.parseInt(hex.slice(1), 16);
+		const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+		return Math.max(r, g, b) - Math.min(r, g, b);
+	};
+
+	test("a label is the model's own hue deepened, not a fifth palette", () => {
+		// Every label keeps the hue of the bar it is written on, so a labelled segment reads
+		// as one colour with a darker word on it rather than as two colours meeting. This is
+		// what stops the contrast rule above being satisfied by painting every label black.
+		for (const alias of COLOURED) {
+			for (const mode of ["light", "dark"] as const) {
+				const ink = MODEL_BADGE[alias][mode];
+				const drift = Math.abs(hue(ink.label) - hue(ink.bar));
+				expect({
+					alias,
+					mode,
+					near: Math.min(drift, 360 - drift) < 12,
+				}).toEqual({ alias, mode, near: true });
+			}
+		}
+		// `inherit` is the exception, deliberately: it means "nobody chose", so its label is
+		// a NEUTRAL — asserted as chroma rather than as hue, because a near-grey still has a
+		// hue angle (60° here) and pinning that would read as a colour decision it is not.
+		for (const mode of ["light", "dark"] as const) {
+			expect(chroma(MODEL_BADGE.inherit[mode].label)).toBeLessThanOrEqual(12);
+		}
+	});
+
+	test("the three mates share one warm band, which no Claude model is in", () => {
+		for (const mode of ["light", "dark"] as const) {
+			// The family tone is IN the band with them — it is the ink of the run that stands
+			// for all three at once, so it has to read as the same family and not as a fifth
+			// kind of thing.
+			const mateHues = [...MATES, MATES_SEGMENT].map((mate) =>
+				hue(MODEL_BADGE[mate][mode].bg),
+			);
+			for (const angle of mateHues) {
+				expect(angle).toBeGreaterThanOrEqual(0);
+				expect(angle).toBeLessThanOrEqual(50);
+			}
+			// No Claude model may be in the band. `haiku` and `inherit` are grey, so their hue
+			// is NaN and every comparison against it is false — which is the right answer and
+			// not an accident: a grey cannot be confused with an ochre.
+			for (const alias of MODEL_ALIASES) {
+				const angle = hue(MODEL_BADGE[alias][mode].bg);
+				expect(angle >= 0 && angle <= 50).toBe(false);
+			}
+		}
+	});
+
+	test("and they still separate from each other, by hue rather than by weight", () => {
+		for (const mode of ["light", "dark"] as const) {
+			const angles = MATES.map((mate) => hue(MODEL_BADGE[mate][mode].bg));
+			for (let i = 1; i < angles.length; i++) {
+				const previous = angles[i - 1] as number;
+				const current = angles[i] as number;
+				// Ordered ochre → terracotta → red earth, and far enough apart to read.
+				expect(previous - current).toBeGreaterThan(10);
+			}
+		}
+	});
+
+	test("`kangaroo` is an earth tone, not the danger red this app already uses", () => {
+		// Red means "failed" everywhere else in claudeup. The reddest mate has to stay clearly
+		// off that meaning, so it is pinned as a desaturated, dark-of-mid fill rather than a
+		// bright signal red.
+		const dark = MODEL_BADGE.kangaroo.dark.bg;
+		expect(hue(dark)).toBeLessThan(15);
+		expect(luminance(dark)).toBeLessThan(luminance("#FF0000"));
+	});
+
+	test("modelBadge returns the mate's own ink, never inherit's grey", () => {
+		// The fallback is correct for a name this build does not know. A mate IS known, and a
+		// mate falling through to grey would say "claudeup does not recognise this" about a
+		// slot it ships — on a screen where grey already means "nobody chose".
+		//
+		// Both pages, explicitly: the resolved mode is process-wide module state, so a test
+		// that just called `modelBadge` would be asserting whatever the previous file left.
+		for (const mode of ["light", "dark"] as const) {
+			setThemeMode(mode);
+			for (const mate of MATES) {
+				expect(modelBadge(mate)).toEqual(MODEL_BADGE[mate][mode]);
+				expect(modelBadge(mate)).not.toEqual(modelBadge("inherit"));
+			}
+			// Negative control: the fallback still works for something genuinely unknown.
+			expect(modelBadge("mate7")).toEqual(modelBadge("inherit"));
+		}
+		resetThemeMode();
+	});
+
 	test("a long-context variant keeps its base model's colour", () => {
 		expect(modelFg("opus[1m]")).toBe(modelFg("opus"));
 		expect(modelFg("fable[1m]")).toBe(modelFg("fable"));
@@ -372,6 +644,106 @@ describe("the agent table", () => {
 		expect(row?.effort).toBeUndefined();
 		expect(NONE_CELL).toBe("—");
 	});
+
+	/**
+	 * A mate row is NOT an inherit row, and the distinction is the whole point.
+	 *
+	 * `inherit` blanks the model cell to `—`, which is right for "nothing was decided". A
+	 * mate WAS decided — the author sent that agent to claudish — so blanking it would hide
+	 * real routing behind the dash that means the opposite. The flag drives the blanking, so
+	 * this is the assertion that keeps the slot name on screen.
+	 */
+	test("a mate row keeps its slot name, so it never blanks to the inherit dash", () => {
+		for (const mate of MATES) {
+			const config: ModelsConfig = {
+				...fableAdvisor,
+				agents: { "x:y": { model: mate } },
+			};
+			const row = agentRows(config)[0];
+			expect(row?.model).toBe(mate);
+			expect(row?.key).toBe(mate);
+			expect(row?.inherit).toBe(false);
+			// The preset's mate effort, since the slot names none of its own. `fableAdvisor`
+			// sends its external work at `xhigh`, and an agent on a slot runs at that.
+			expect(row?.effort).toBe(fableAdvisor.mateEffort);
+			// And it takes its own ink, not the grey `inherit` would have given it.
+			expect(row?.fill).toBe(modelBarFill(mate));
+			expect(row?.fill).not.toBe(modelBarFill("inherit"));
+		}
+	});
+
+	test("a mate sorts after every grade, with `inherit`, because it is not a tier", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: {
+				a: "smart",
+				b: { model: "kangaroo" },
+				c: "cheap",
+				d: { model: "inherit" },
+			},
+		};
+		expect(agentRows(config).map((row) => row.key)).toEqual([
+			"smart",
+			"cheap",
+			"inherit",
+			"kangaroo",
+		]);
+	});
+
+	test("the effort cell says where the call went, not that it inherits the session", () => {
+		// Nothing of the session reaches an external model, so `inherits session` — what an
+		// absent effort says everywhere else — would be false on exactly these rows.
+		expect(effortWord(undefined, "mate1")).toBe(MATE_EFFORT_NOTE);
+		expect(effortWord(undefined, "opus")).toBe("inherits session");
+		expect(effortWord(undefined)).toBe("inherits session");
+
+		expect(effortLabel(undefined, "full", "kangaroo")).toBe(MATE_EFFORT_NOTE);
+		expect(effortLabel(undefined, "none", "kangaroo")).toBe("");
+		// `short` keeps an effort's initial because the dots beside it still carry the level.
+		// The note has no level and no useful initial, so it yields the column instead.
+		expect(effortLabel(undefined, "short", "kangaroo")).toBe("");
+		expect(effortLabel("medium", "short")).toBe("m");
+	});
+
+	test("a mate's effort reads like any other — it is in force", () => {
+		// An external model's effort is applied by claudish, per run, subject to a per-model
+		// clamp (`--effort-override` is the flag that skips it). A clamp bounds the value; it
+		// is not a reason to write the cell differently from the one beside it.
+		expect(effortWord("high", "mate1")).toBe("high");
+		expect(effortWord("high", "opus")).toBe("high");
+	});
+
+	test("an ABSENT effort means a different thing for a mate", () => {
+		// A Claude subagent with no effort inherits the session's. An external model has no
+		// session to inherit from and falls to its own catalogue preset instead, so the two
+		// absences cannot share a word.
+		expect(effortWord(undefined, "opus")).toBe("inherits session");
+		expect(effortWord(undefined, "mate1")).toBe(MATE_EFFORT_NOTE);
+	});
+
+	test("the effort word survives every width rung the table has", () => {
+		expect(effortLabel("high", "full", "mate1")).toBe("high");
+		expect(effortLabel("high", "short", "mate1")).toBe("h");
+		expect(effortLabel("high", "none", "mate1")).toBe("");
+	});
+
+	test("a mate's declared effort reaches its agent rows from the `mates` block", () => {
+		// Declared once on the slot rather than repeated on every agent that uses it. An
+		// agent-level effort still wins — it is the more specific statement.
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: {
+				a: { model: "mate1" },
+				b: { model: "mate1", effort: "low" },
+			},
+			mates: { mate1: { model: "grok-4.6", effort: "high" } },
+		};
+		const rows = agentRows(config);
+		expect(rows.map((r) => ({ name: r.name, effort: r.effort }))).toEqual([
+			{ name: "a", effort: "high" },
+			{ name: "b", effort: "low" },
+		]);
+	});
 });
 
 describe("fitting the agent table to a panel", () => {
@@ -420,7 +792,7 @@ describe("fitting the agent table to a panel", () => {
 	test("the name column truncates rather than wrapping", () => {
 		const layout = fitAgentTable(rows, 24);
 		expect(layout.name).toBeGreaterThanOrEqual(6);
-		expect(padCell("code-analysis:detective", layout.name)).toHaveLength(
+		expect(padCell("code-search:analyze", layout.name)).toHaveLength(
 			layout.name,
 		);
 	});
@@ -458,22 +830,168 @@ describe("fitting the agent table to a panel", () => {
 		expect(padCell("abcdefgh", 5)).toHaveLength(5);
 	});
 
+	/**
+	 * A mate row is where this column goes wrong, and what makes it wide changed.
+	 *
+	 * It used to be the SLOT NAME: `kangaroo` is 8 cells, wider than every model name
+	 * (`sonnet`, 6) and wider than `inherit` (7). A slot is now bound to a real catalogue id
+	 * and the column draws THAT, so the widest value is no longer 8 but up to 21
+	 * (`gemini-omni-1.1-flash`) — and an unbound slot draws `unset`, which is 5.
+	 *
+	 * The column therefore has to be measured from `row.label`, the string the row actually
+	 * draws, and — new — it has to be allowed to truncate, because at 21 cells the old
+	 * "name column absorbs everything" rule stops being reachable on a narrow terminal.
+	 */
+	describe("with a mate row in it", () => {
+		const mateConfig = {
+			...fableAdvisor,
+			agents: {
+				"code-search:analyze": { model: "kangaroo" as const },
+				"dev:architect": "smart" as const,
+				Explore: "cheap" as const,
+			},
+		};
+		const mateRows = agentRows(mateConfig);
+		const boundRows = agentRows({
+			...mateConfig,
+			mates: { kangaroo: { model: "grok-4.6" } },
+		});
+
+		test("an UNBOUND slot draws `unset`, never the slot name", () => {
+			// The defect this whole change exists for: the Model column printed the slot, so a
+			// row read `kangaroo  kangaroo  —`. A slot is a role. `unset` says the author chose
+			// to route here and has not yet said where — which is a different state from the
+			// `—` that means nothing was decided at all.
+			const row = mateRows.find((r) => r.name === "code-search:analyze");
+			expect({ key: row?.key, label: row?.label }).toEqual({
+				key: "kangaroo",
+				label: UNBOUND_MATE,
+			});
+			expect(row?.inherit).toBe(false);
+		});
+
+		test("a BOUND slot draws its catalogue id, and keeps the slot as its Tier", () => {
+			const row = boundRows.find((r) => r.name === "code-search:analyze");
+			// Tier says the role, Model says the model. Two columns, two answers.
+			expect({ key: row?.key, model: row?.model, label: row?.label }).toEqual({
+				key: "kangaroo",
+				model: "kangaroo",
+				label: "grok-4.6",
+			});
+		});
+
+		test("the model column is measured from the bound id, not the slot", () => {
+			for (const width of [57, 80, 120]) {
+				const layout = fitAgentTable(boundRows, width);
+				expect(layout.model).toBeGreaterThanOrEqual(modelWidth("grok-4.6"));
+				expect(layout.total).toBeLessThanOrEqual(width);
+				// Drawn exactly, with nothing clipped at these widths.
+				const drawn = `grok-4.6${modelPad("grok-4.6", layout.model)}`;
+				expect(drawn).toHaveLength(layout.model);
+				expect(drawn).toContain("grok-4.6");
+			}
+		});
+
+		test("a LONG binding widens the column at a normal width", () => {
+			const longRows = agentRows({
+				...mateConfig,
+				mates: { kangaroo: { model: "gemini-omni-1.1-flash" } },
+			});
+			const layout = fitAgentTable(longRows, 120);
+			expect(layout.model).toBe(modelWidth("gemini-omni-1.1-flash"));
+			expect(layout.total).toBeLessThanOrEqual(120);
+		});
+
+		test("and TRUNCATES with a marker when even the name floor cannot pay for it", () => {
+			// The rung that did not exist. Every value this column could hold used to be ≤8, so
+			// surrendering the name column always got the table under the width. At 21 cells it
+			// does not: at width 30 the fixed part is already 27 and the name floor adds 7, so
+			// the table overran by four with no rung left to take them from.
+			const longRows = agentRows({
+				...mateConfig,
+				mates: { kangaroo: { model: "gemini-omni-1.1-flash" } },
+			});
+			const layout = fitAgentTable(longRows, 30);
+			expect(layout.total).toBeLessThanOrEqual(30);
+			expect(layout.model).toBeLessThan(modelWidth("gemini-omni-1.1-flash"));
+			// Never a silent clip: the `…` is what stops a cut id reading as a complete one.
+			const drawn = clipCell("gemini-omni-1.1-flash", layout.model);
+			expect(drawn).toHaveLength(layout.model);
+			expect(drawn.endsWith("…")).toBe(true);
+		});
+
+		test("the effort column measures the string a mate row actually draws", () => {
+			// A mate row draws an effort word like any other — its own, or the preset's. The
+			// column has to be measured from THAT string: measuring `inherits session` would
+			// leave it wide of what is on it, and a mate never inherits a session. Asserted as
+			// the table's exact total, which is the only way to see which string was used.
+			const layout = fitAgentTable(mateRows, detailPanelWidth(120));
+			expect(layout.effort).toBe("full");
+			const widest = Math.max(
+				...mateRows.map((row) => effortWord(row.effort, row.model).length),
+			);
+			expect(widest).toBe(
+				Math.max(
+					...mateRows.map((row) =>
+						row.effort === undefined
+							? MATE_EFFORT_NOTE.length
+							: row.effort.length,
+					),
+				),
+			);
+			expect(layout.total).toBe(
+				layout.name +
+					1 +
+					(layout.grade > 0 ? layout.grade + 1 : 0) +
+					layout.model +
+					1 +
+					EFFORT_GLYPH_CELLS +
+					1 +
+					widest,
+			);
+		});
+
+		test("it still never exceeds the width it was given, at any width", () => {
+			for (let width = 20; width <= 200; width++) {
+				const layout = fitAgentTable(mateRows, width);
+				if (layout.name > 6) expect(layout.total).toBeLessThanOrEqual(width);
+				expect(layout.name).toBeGreaterThanOrEqual(6);
+			}
+		});
+
+		test("a long binding never exceeds its width either — the case the old floor missed", () => {
+			// The old ladder ran out of rungs here and returned a layout wider than the panel.
+			// Swept rather than spot-checked, because the failure was at one end of the range.
+			const longRows = agentRows({
+				...mateConfig,
+				mates: { kangaroo: { model: "gemini-omni-1.1-flash" } },
+			});
+			const over: number[] = [];
+			for (let width = 30; width <= 200; width++) {
+				if (fitAgentTable(longRows, width).total > width) over.push(width);
+			}
+			expect(over).toEqual([]);
+		});
+	});
+
 	test("the model column is the name's own width — no chip padding left in it", () => {
 		// The column used to carry `+2` for the fill's padding, and the header
 		// was indented a column to match. With the chip gone, a column still
 		// reserving that space leaves the header floating off its data.
 		for (const width of [40, 60, 80, 120]) {
 			const layout = fitAgentTable(rows, width);
+			// `row.label`, which is what the row DRAWS. Identical to `row.model` for every
+			// value except a mate, and the whole point of the split is that those two differ.
 			const widest = rows.reduce(
 				(max, row) =>
-					Math.max(max, row.inherit ? NONE_CELL.length : modelWidth(row.model)),
+					Math.max(max, row.inherit ? NONE_CELL.length : modelWidth(row.label)),
 				"Model".length,
 			);
 			expect(layout.model).toBe(widest);
 			for (const row of rows) {
 				const drawn = row.inherit
 					? padCell(NONE_CELL, layout.model)
-					: row.model + modelPad(row.model, layout.model);
+					: row.label + modelPad(row.label, layout.model);
 				expect(drawn).toHaveLength(layout.model);
 			}
 			const header = agentTableHeaders(layout).find(
@@ -484,6 +1002,81 @@ describe("fitting the agent table to a panel", () => {
 	});
 });
 
+/**
+ * The tier table's own column, which is measured separately from the agent table's.
+ *
+ * It has to know whether the mate rows are being DRAWN, because `kangaroo` is two cells wider
+ * than any model name a preset can hold. Measuring without it while drawing it leaves
+ * `modelPad` returning an empty string on that one row, and the effort glyphs — which the
+ * whole table is aligned on — jump left on it.
+ */
+describe("the tier table's model column", () => {
+	test("is the widest model in the config when no mates are drawn", () => {
+		const widest = Math.max(
+			modelWidth(fableAdvisor.main.model),
+			...GRADES.map((grade) => modelWidth(fableAdvisor.grades[grade].model)),
+		);
+		expect(specModelColumn(fableAdvisor, false)).toBe(widest);
+	});
+
+	test("with mates drawn but UNBOUND, it fits `unset` — not the slot names", () => {
+		// The column measures what each row WRITES. An unbound slot writes `unset` (5), so a
+		// config whose models are 4–6 cells is not widened by drawing the slot rows at all.
+		// Measuring `kangaroo` (8) here would reserve three cells nothing occupies.
+		const column = specModelColumn(fableAdvisor, true);
+		const widestModel = Math.max(
+			modelWidth(fableAdvisor.main.model),
+			...GRADES.map((grade) => modelWidth(fableAdvisor.grades[grade].model)),
+		);
+		expect(column).toBe(Math.max(widestModel, UNBOUND_MATE.length));
+		for (const mate of MATES) {
+			const drawn = modelLabel(fableAdvisor, mate);
+			expect(drawn).toBe(UNBOUND_MATE);
+			expect(drawn + modelPad(drawn, column)).toHaveLength(column);
+		}
+	});
+
+	test("a BOUND slot widens it to the model, and every row still ends at that column", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			mates: {
+				mate1: { model: "grok-4.6" },
+				kangaroo: { model: "deepseek-v4.1-flash" },
+			},
+		};
+		const column = specModelColumn(config, true);
+		expect(column).toBe(modelWidth("deepseek-v4.1-flash"));
+		// Alignment IS this: every row, mate or model, ends at the same column — which is what
+		// the effort glyphs to their right are lined up on.
+		for (const mate of MATES) {
+			const drawn = modelLabel(config, mate);
+			expect(drawn + modelPad(drawn, column)).toHaveLength(column);
+		}
+		for (const grade of GRADES) {
+			const model = config.grades[grade].model;
+			expect(model + modelPad(model, column)).toHaveLength(column);
+		}
+	});
+
+	test("a config that names a mate itself does not need the flag to fit it", () => {
+		// The flag decides whether the three SLOT rows are drawn. A mate a config already
+		// names arrives through `grades`, and is measured whether or not the plugin is there
+		// — which is what keeps a mate-using config rendering correctly on a machine without
+		// the multimodel plugin installed.
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			grades: {
+				...fableAdvisor.grades,
+				cheap: { model: "kangaroo" },
+			},
+			mates: { kangaroo: { model: "gemini-omni-1.1-flash" } },
+		};
+		expect(specModelColumn(config, false)).toBe(
+			modelWidth("gemini-omni-1.1-flash"),
+		);
+	});
+});
+
 describe("the panel widths ScreenLayout hands out", () => {
 	/**
 	 * MEASURED against real renders in tmux at each of these widths — the row
@@ -589,6 +1182,40 @@ describe("the colour key under the bars", () => {
 		expect(models).not.toContain("opus[1m]");
 	});
 
+	/**
+	 * A mate is keyed only when it is USED, and it sorts between the aliases and `inherit`.
+	 *
+	 * The order reads as decreasing involvement: what claudeup routes, what it hands to
+	 * claudish, what it leaves alone. No shipped preset names a mate, so the key is unchanged
+	 * for every built-in — the slots are vocabulary, and a legend for a colour that appears
+	 * nowhere on screen is a legend for a thing that is not there.
+	 */
+	test("a mate appears in the key when a config names one, after the aliases", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: {
+				"seo:editor": { model: "inherit" },
+				"x:y": { model: "kangaroo" },
+				"a:b": { model: "mate1" },
+			},
+		};
+		expect(modelsInUse([config])).toEqual([
+			"opus",
+			"sonnet",
+			"fable",
+			"mate1",
+			"kangaroo",
+			"inherit",
+		]);
+	});
+
+	test("no built-in preset puts a mate in the key", () => {
+		// The vocabulary shipped; the routing did not change. Asserted so re-routing a shipped
+		// agent to an external model stays a decision someone has to make on purpose.
+		const models = modelsInUse(BUILT_IN_PRESETS);
+		for (const mate of MATES) expect(models).not.toContain(mate);
+	});
+
 	test("lists nothing a preset does not name", () => {
 		const config: ModelsConfig = {
 			...fableAdvisor,
@@ -670,13 +1297,47 @@ describe("budgeting the list panel's summary", () => {
 	});
 
 	test("drops by value: the key goes before the spread or the facts", () => {
-		// The 80×24 case: twelve rows left under a five-row list.
-		const tight = planModelsSummary(11, true);
+		// 16 rows, not the 15 this asserted before the workflows were separated. The two
+		// blank rows between the three groups are two more rows of chart, so the height at
+		// which the spread and the facts both fit moved up with it — the ORDER is what this
+		// pins, and the order is unchanged: the key is still the first thing to go.
+		const tight = planModelsSummary(16, true);
 		expect(tight.spread).toBe(true);
 		expect(tight.facts).toBe(true);
 		expect(tight.key).toBe(false);
 	});
 
+	test("a short panel keeps the chart and drops everything under it", () => {
+		// Thirteen rows. The chart alone costs ten of them — a margin, its header, two rows
+		// for each of the three workflows and a blank row between each pair — on top of the
+		// two the leading blank line and the rule take. Nothing else fits, and the chart is
+		// the right thing to spend them on: it is the only graphic on the screen.
+		const plan = planModelsSummary(13, true);
+		expect(plan.spread).toBe(true);
+		expect(plan.facts).toBe(false);
+		expect(plan.key).toBe(false);
+	});
+
+	/**
+	 * WHAT THE SEPARATORS COST, stated rather than discovered.
+	 *
+	 * Eleven rows is what the list leaves under itself on an 80×24 terminal, and it used to
+	 * be exactly enough for the chart. The two blank rows between the three workflow groups
+	 * take it over, so at that height the panel now draws nothing at all.
+	 *
+	 * That is the honest reading of the budget and not a rounding to soften: the block sits
+	 * in a fixed-height box, and a box asked for more rows than it has OVERPRINTS — two
+	 * preset names composited into one line — rather than clipping. Drawing no chart is the
+	 * correct answer at a height where the chart does not fit.
+	 */
+	test("an 80×24 panel no longer has room for the separated chart", () => {
+		const plan = planModelsSummary(11, true);
+		expect(plan).toMatchObject({ spread: false, facts: false, key: false });
+		// And the first height at which it comes back is the chart's own cost plus the
+		// blank line and the rule that precede it.
+		expect(planModelsSummary(12, true).spread).toBe(true);
+	});
+
 	test("there is no height at which a lesser block survives a greater one", () => {
 		for (let available = 0; available <= 40; available++) {
 			const plan = planModelsSummary(available, true);
@@ -700,7 +1361,10 @@ describe("the preset list's shared row layout", () => {
 		label: preset.preset,
 		main: preset.main.model,
 		smart: preset.grades.smart.model,
-		markers: presetMarkerWidth(preset.preset === "fable-advisor", false),
+		// No built-in names a mate, so the routing value and the drawn label are the same
+		// string here. They diverge only for a bound slot — the case below.
+		smartLabel: preset.grades.smart.model,
+		markers: presetMarkerWidth(preset.preset === "fable-advisor"),
 	}));
 
 	test("ONE layout for the whole list — never one per row", () => {
@@ -772,6 +1436,7 @@ describe("the preset list's shared row layout", () => {
 				label: "a-very-long-preset-name-indeed",
 				main: "opus",
 				smart: "fable",
+				smartLabel: "fable",
 				markers: 0,
 			},
 		];
@@ -782,12 +1447,1020 @@ describe("the preset list's shared row layout", () => {
 		);
 	});
 
+	test("a bound mate is measured by its MODEL, not by its slot", () => {
+		// `main` can never be a mate — the validator refuses one — but `smart` can. What the
+		// column has to fit is the BOUND id, which is the string the row draws; measuring the
+		// slot (`kangaroo`, 8) while drawing `grok-4.6` (8) happened to agree, and measuring
+		// it while drawing `deepseek-v4.1-flash` (19) is an eleven-cell overrun.
+		const withMate: PresetRowInput[] = [
+			...rows,
+			{
+				label: "outback",
+				main: "opus",
+				smart: "kangaroo",
+				smartLabel: "grok-4.6",
+				markers: 0,
+			},
+		];
+		const layout = fitPresetRows(withMate, 200);
+		expect(layout.smart).toBe(modelWidth("grok-4.6"));
+		expect(`grok-4.6${modelPad("grok-4.6", layout.smart)}`).toHaveLength(
+			layout.smart,
+		);
+	});
+
+	test("a long binding is CAPPED, so one row cannot cost the list its whole column", () => {
+		// Real ids run long: `gemini-omni-1.1-flash` is 21 cells, two and a half times the
+		// widest slot name. Without a ceiling that one row widens the shared column, the list
+		// stops fitting `compact`, and EVERY row loses its second model to one row's binding.
+		const withLong: PresetRowInput[] = [
+			...rows,
+			{
+				label: "outback",
+				main: "opus",
+				smart: "kangaroo",
+				smartLabel: "gemini-omni-1.1-flash",
+				markers: 0,
+			},
+		];
+		const layout = fitPresetRows(withLong, 200);
+		expect(layout.smart).toBe(PRESET_MODEL_MAX);
+		// Truncated with the marker that says so — never a silent clip, which would read as a
+		// complete id that simply is not in the catalogue.
+		const drawn = clipCell("gemini-omni-1.1-flash", layout.smart);
+		expect(drawn).toHaveLength(PRESET_MODEL_MAX);
+		expect(drawn.endsWith("…")).toBe(true);
+	});
+
+	test("a bound mate still fits whatever panel it is given, at every width", () => {
+		const withMate: PresetRowInput[] = [
+			...rows,
+			{
+				label: "outback",
+				main: "opus",
+				smart: "kangaroo",
+				smartLabel: "gemini-omni-1.1-flash",
+				markers: 0,
+			},
+		];
+		for (let width = 10; width <= 200; width++) {
+			const fitted = fitPresetRows(withMate, width);
+			if (fitted.detail !== "none") {
+				expect({ width, total: fitted.total }).toEqual({
+					width,
+					total: fitted.total,
+				});
+				expect(fitted.total).toBeLessThanOrEqual(width);
+			}
+		}
+	});
+
 	test("marker widths carry their own leading space", () => {
-		expect(presetMarkerWidth(false, false)).toBe(0);
-		expect(presetMarkerWidth(true, false)).toBe(" (default)".length);
-		expect(presetMarkerWidth(false, true)).toBe(" (yours)".length);
-		expect(presetMarkerWidth(true, true)).toBe(
-			" (default)".length + " (yours)".length,
+		// One marker, and only `(default)`. A custom row carries none: `Custom` is already the
+		// whole claim, and a marker beside it repeats the label in different words.
+		expect(presetMarkerWidth(false)).toBe(0);
+		expect(presetMarkerWidth(true)).toBe(" (default)".length);
+	});
+});
+
+/**
+ * The workflow bar, judged from the RENDERED FRAME rather than from a helper.
+ *
+ * Everything above this line is a pure function on a config, which is the right shape for
+ * column maths. The bar is not one any more: its widths come out of Yoga, so an assertion
+ * about a width has to come out of Yoga too. A test against an arithmetic helper would pin
+ * a number this code no longer computes — the helper it used to pin (`splitCells`) is gone
+ * precisely because the layout engine was already doing that job.
+ *
+ * So these render `AgentSpread` into a real terminal-sized renderer and read the frame back.
+ * TWO passes, always: a segment's inline label is decided from the width the LAYOUT reported
+ * for it, and that report arrives after the first layout. One frame is the unlabelled state
+ * by construction, not a flake.
+ */
+describe("the workflow bar", () => {
+	/** The rungs this layout has to survive. 20 is narrower than any real pane. */
+	const WIDTHS = [20, 26, 32, 40, 64, 80];
+
+	/** Rows before the first bar: the block's own top margin, then its header. */
+	const HEADER_ROWS = 2;
+
+	const mateConfig: ModelsConfig = {
+		...fableAdvisor,
+		agents: {
+			...fableAdvisor.agents,
+			"dev:qa-engineer": { model: "mate1" },
+		},
+		mates: { mate1: { model: "kimi-k3" } },
+	};
+
+	interface Frame {
+		chars: string[];
+		lines: CapturedFrame["lines"];
+	}
+
+	async function draw(
+		config: ModelsConfig,
+		width: number,
+		mode?: "light" | "dark",
+	): Promise<Frame> {
+		// The palette is resolved once per process and other cases in this file set it, so
+		// the page is pinned here rather than inherited from whatever ran last.
+		resetThemeMode();
+		if (mode) setThemeMode(mode);
+		const { captureCharFrame, captureSpans, renderOnce, renderer } =
+			await testRender(<AgentSpread config={config} width={width} />, {
+				width,
+				height: 14,
+			});
+		// `act` because the second pass exists to let a LAYOUT-driven state update land, and
+		// an update outside act is both a warning and a frame that may not have flushed.
+		await act(async () => {
+			await renderOnce();
+			await renderOnce();
+		});
+		const frame = {
+			chars: captureCharFrame().split("\n"),
+			lines: captureSpans().lines,
+		};
+		// Every renderer is torn down: thirty live ones in one file exhausts the console
+		// cache's listener budget and the leak is reported as an unrelated warning.
+		await act(async () => renderer.destroy());
+		return frame;
+	}
+
+	/**
+	 * The row a workflow's two bars land on.
+	 *
+	 * A group is its two bars plus the blank row that separates it from the group above, so
+	 * the stride is three and the first group — which has nothing above it to separate from
+	 * — is the one that pays no gap. Derived from the same two constants the renderer
+	 * budgets with, so a change to either moves the test with the picture.
+	 */
+	const groupStride = WORKFLOW_ROWS + WORKFLOW_GAP_ROWS;
+	const mainRow = (index: number) => HEADER_ROWS + index * groupStride;
+	const subsRow = (index: number) => mainRow(index) + 1;
+	/** The blank row above group `index`. Only groups after the first have one. */
+	const gapRow = (index: number) => mainRow(index) - 1;
+
+	/**
+	 * Which columns of a row are BAR: painted with a segment's ground, or holding a divider.
+	 *
+	 * The page's own background is read off column 0, which is inside the label column and so
+	 * is never a segment. Comparing serialised RGBA rather than the object identity because a
+	 * capture hands back a fresh one per span.
+	 */
+	function barColumns(line: CapturedFrame["lines"][number], chars: string) {
+		const page = JSON.stringify(line.spans[0]?.bg);
+		const painted: boolean[] = [];
+		for (const span of line.spans) {
+			const isGround = JSON.stringify(span.bg) !== page;
+			for (let i = 0; i < span.width; i++) painted.push(isGround);
+		}
+		return painted.map(
+			(ground, column) => ground || chars[column] === BAR_DIVIDER,
+		);
+	}
+
+	test("every workflow is exactly two rows, and both fill the same columns", async () => {
+		for (const width of WIDTHS) {
+			const frame = await draw(mateConfig, width);
+			for (const [index, workflow] of WORKFLOWS.entries()) {
+				const rows = [mainRow(index), subsRow(index)];
+				// The pair is labelled once and indented once, so it reads as one workflow
+				// rather than as two of them.
+				expect(frame.chars[rows[0] as number]).toStartWith(
+					padCell(workflow.name, SPREAD_LABEL_CELLS),
+				);
+				expect(frame.chars[rows[1] as number]).toStartWith(
+					padCell(SUBAGENT_ROW_LABEL, SPREAD_LABEL_CELLS),
+				);
+				// One divider between neighbours and nowhere else. Asserted separately
+				// because `barColumns` counts a divider AS bar, so without this a bar that
+				// filled its shortfall with track — the thing the old code did by hand and
+				// this layout must not need — would satisfy the width check below.
+				// Counted off `barSegments`, which is what the row actually draws — the
+				// mates fold into one run, so a folded pair costs one divider fewer than
+				// the distribution it came from.
+				const dividers = [
+					0,
+					Math.max(
+						0,
+						barSegments(
+							workflowDistribution(mateConfig, workflow.agents),
+						).filter((segment) => segment.share > 0).length - 1,
+					),
+				];
+				for (const [which, row] of rows.entries()) {
+					const line = frame.lines[row];
+					const chars = frame.chars[row];
+					if (!line || chars === undefined) throw new Error(`no row ${row}`);
+					const bar = barColumns(line, chars);
+					// EXACTLY its allotted width: every column from the label to the right
+					// edge is bar, and no column left of the label is. A shortfall used to be
+					// paid in track by hand; it is now the layout's to get right, and this is
+					// what says it did.
+					expect({
+						width,
+						row,
+						label: bar.slice(0, SPREAD_LABEL_CELLS).some(Boolean),
+						unpainted: bar
+							.slice(SPREAD_LABEL_CELLS, width)
+							.filter((cell) => !cell).length,
+						dividers: [...chars.slice(SPREAD_LABEL_CELLS, width)].filter(
+							(cell) => cell === BAR_DIVIDER,
+						).length,
+					}).toEqual({
+						width,
+						row,
+						label: false,
+						unpainted: 0,
+						dividers: dividers[which] as number,
+					});
+				}
+			}
+			// Nothing below the last pair, so three workflows never read as six.
+			expect(frame.chars[subsRow(WORKFLOWS.length - 1) + 1]?.trim()).toBe("");
+		}
+	});
+
+	/**
+	 * The grouping, asserted as rows rather than as an eyeball.
+	 *
+	 * Six adjacent bar rows read as one block of six: `dev`'s subagent row and `debug`'s main
+	 * row touched, so which two belonged together had to be worked out from the labels. The
+	 * blank row goes BETWEEN groups and never inside one — the pair's adjacency is the thing
+	 * that says they belong together, and a gap in the middle of it would say the opposite.
+	 */
+	test("a blank row separates the workflows, and never splits one", async () => {
+		for (const width of WIDTHS) {
+			const frame = await draw(mateConfig, width);
+			for (const index of WORKFLOWS.keys()) {
+				expect({
+					index,
+					// Both rows of the pair are drawn, with nothing between them.
+					main: frame.chars[mainRow(index)]?.trim() === "",
+					subs: frame.chars[subsRow(index)]?.trim() === "",
+					// And a blank row above every group but the first.
+					gap: index === 0 ? null : frame.chars[gapRow(index)]?.trim(),
+				}).toEqual({
+					index,
+					main: false,
+					subs: false,
+					gap: index === 0 ? null : "",
+				});
+			}
+			// No trailing gap: a blank row under the last group separates the chart from
+			// nothing, and the rows below it belong to whatever the panel draws next.
+			const lastRow = subsRow(WORKFLOWS.length - 1);
+			expect(frame.chars[lastRow]?.trim()).not.toBe("");
+			// The whole block is exactly what `SUMMARY_COST.spread` budgets for: the margin,
+			// the header, two rows per workflow and one gap between each pair.
+			expect(lastRow + 1).toBe(
+				1 +
+					1 +
+					WORKFLOWS.length * WORKFLOW_ROWS +
+					(WORKFLOWS.length - 1) * WORKFLOW_GAP_ROWS,
+			);
+		}
+	});
+
+	/**
+	 * ONE gutter, one alignment, and the bars starting at one column.
+	 *
+	 * Reported off a real screen: "on left dev and subagents wrongly aligned". The subagent
+	 * label carried a two-cell indent, so the six labels started at two different columns and
+	 * the pairs read as ragged rather than as groups.
+	 */
+	test("both rows of a workflow share one gutter, and their bars start together", async () => {
+		// Derived, not 11: `investigate` is the longest label today and a constant here would
+		// keep passing while the picture clipped the first longer name anyone adds.
+		const longest = Math.max(
+			SUBAGENT_ROW_LABEL.length,
+			...WORKFLOWS.map((workflow) => workflow.name.length),
 		);
+		expect(SPREAD_LABEL_CELLS).toBe(longest + 1);
+		// Left-aligned, so no label carries leading whitespace — that indent is the defect.
+		expect(SUBAGENT_ROW_LABEL).toBe(SUBAGENT_ROW_LABEL.trimStart());
+
+		for (const width of WIDTHS) {
+			const frame = await draw(mateConfig, width);
+			for (const [index, workflow] of WORKFLOWS.entries()) {
+				const main = frame.chars[mainRow(index)] ?? "";
+				const subs = frame.chars[subsRow(index)] ?? "";
+				// Every label begins at column 0 and every bar begins at the same column, so
+				// the pair has one straight edge on the outside and one against the chart.
+				const barStarts = (line: CapturedFrame["lines"][number]) => {
+					const page = JSON.stringify(line.spans[0]?.bg);
+					let column = 0;
+					for (const span of line.spans) {
+						if (JSON.stringify(span.bg) !== page) return column;
+						column += span.width;
+					}
+					return -1;
+				};
+				expect({
+					index,
+					width,
+					mainLabel: main.slice(0, workflow.name.length),
+					subsLabel: subs.slice(0, SUBAGENT_ROW_LABEL.length),
+					mainBar: barStarts(
+						frame.lines[mainRow(index)] as CapturedFrame["lines"][number],
+					),
+					subsBar: barStarts(
+						frame.lines[subsRow(index)] as CapturedFrame["lines"][number],
+					),
+				}).toEqual({
+					index,
+					width,
+					mainLabel: workflow.name,
+					subsLabel: SUBAGENT_ROW_LABEL,
+					mainBar: SPREAD_LABEL_CELLS,
+					subsBar: SPREAD_LABEL_CELLS,
+				});
+			}
+		}
+	});
+
+	/**
+	 * The boundary, from both sides, on the main row — one segment across the whole bar, so
+	 * its width is the panel's width less the label column and nothing else can move it.
+	 */
+	test("a label goes inline when it fits and is absent, never clipped, when it does not", async () => {
+		// The DRAWN name, not the routing value: they differ for a long-context variant
+		// (`opus[1m]` draws `opus`), and measuring the wrong one puts the boundary four
+		// cells off — which is a test that passes on both sides of it.
+		const label = segmentLabel(fableAdvisor.main.model);
+		const fits = SPREAD_LABEL_CELLS + inlineLabelWidth(label);
+
+		const wide = await draw(fableAdvisor, fits);
+		expect(wide.chars[mainRow(0)]).toContain(label);
+
+		const narrow = await draw(fableAdvisor, fits - 1);
+		// Not merely "not the whole word" — no PREFIX of it either. A model id cut to
+		// `opu` reads as a model that does not exist, which is the failure this rules out.
+		expect(narrow.chars[mainRow(0)]).not.toContain(label.slice(0, 3));
+	});
+
+	test("a mate segment is woven; a Claude segment is not", async () => {
+		const woven = await draw(mateConfig, 80);
+		// `dev` is the only workflow of the three that leaves Claude Code: it is the only one
+		// with `external` phases, and the only one dispatching the re-routed agent.
+		expect(woven.chars[subsRow(0)]).toContain(MATE_WEFT);
+		expect(woven.chars[subsRow(1)]).not.toContain(MATE_WEFT);
+		expect(woven.chars[subsRow(2)]).not.toContain(MATE_WEFT);
+		// Wide enough for the label, so the weave has to survive BEHIND it. The word is
+		// `mates` even with ONE slot routed — see `MATES_SEGMENT`.
+		expect(woven.chars[subsRow(0)]).toContain(
+			`${MATE_WEFT} ${MATES_SEGMENT} ${MATE_WEFT}`,
+		);
+	});
+
+	/**
+	 * The weave follows the WORKFLOW, not the preset.
+	 *
+	 * A built-in binds no slot, and `dev` still leaves Claude Code under it — the plan and
+	 * code reviews are phases of the command, not consequences of the routing applied to it.
+	 * So the control for "not woven" is a workflow with no external phases, never a preset.
+	 */
+	test("a built-in preset still weaves `dev`, and never `debug` or `investigate`", async () => {
+		const plain = await draw(fableAdvisor, 80);
+		expect(plain.chars[subsRow(0)]).toContain(MATE_WEFT);
+		expect(plain.chars[subsRow(1)]).not.toContain(MATE_WEFT);
+		expect(plain.chars[subsRow(2)]).not.toContain(MATE_WEFT);
+	});
+
+	/**
+	 * The regression guard the correction asked for, and it is asked in COLOUR.
+	 *
+	 * Under the old apportionment a mate was measured never to drop at these widths. Under
+	 * flex that is a fresh question — and a real one: `flexBasis: 0` with `flexGrow` alone
+	 * resolved a 1-in-45 share to ZERO cells at 20 columns, which is exactly a mate quietly
+	 * vanishing. `minWidth: 1` is what stops it.
+	 *
+	 * The assertion is on the segment's GROUND, not on its weave. A glyph test answers
+	 * "is the texture drawn"; only the ground answers "is the segment there at all", which
+	 * is what a rounding change would take away.
+	 */
+	test("the mate segment survives at every width", async () => {
+		for (const width of WIDTHS) {
+			const frame = await draw(mateConfig, width);
+			const line = frame.lines[subsRow(0)];
+			if (!line) throw new Error(`no row at ${width}`);
+			const grounds = new Set(
+				line.spans.map((span) => rgbToHex(span.bg).slice(0, 7).toUpperCase()),
+			);
+			expect({
+				width,
+				// `bar`, because that is now the ground of EVERY segment including a mate's.
+				// It was `bg` while a mate carried a second ground of its own; the weave is
+				// a mark painted on this tone rather than a surface behind it.
+				ground: grounds.has(modelBadge(MATES_SEGMENT).bar.toUpperCase()),
+				woven: frame.chars[subsRow(0)]?.includes(MATE_WEFT),
+			}).toEqual({ width, ground: true, woven: true });
+		}
+	});
+
+	/**
+	 * ONE BLOCK OF ONE COLOUR, with a word on it. No chip.
+	 *
+	 * The label used to be drawn as the model's chip — `fg` on `bg`, inset into the bar —
+	 * which put a visibly different rectangle inside a segment that is meant to read as one
+	 * thing. Reported as "do not add additional background colour to model segments".
+	 *
+	 * The assertion is on the label span's BACKGROUND: it has to be the segment's own `bar`,
+	 * the same fill the unlabelled cells carry, because that is what "no chip" means at the
+	 * pixel. The ink is the palette's `label`, which is measured against `bar` up in the
+	 * palette tests — `fg` here would be 1.90:1 on the dark page.
+	 */
+	test("an inline label is written ON the fill, with no chip behind it", async () => {
+		for (const mode of ["light", "dark"] as const) {
+			const frame = await draw(mateConfig, 80, mode);
+			const line = frame.lines[mainRow(0)];
+			const chip = line?.spans.find((span) => span.text.includes("opus"));
+			if (!chip) throw new Error(`no inline label on the ${mode} page`);
+			expect({
+				mode,
+				bg: rgbToHex(chip.bg).slice(0, 7).toUpperCase(),
+				fg: rgbToHex(chip.fg).slice(0, 7).toUpperCase(),
+			}).toEqual({
+				mode,
+				bg: modelBadge("opus").bar.toUpperCase(),
+				fg: modelBadge("opus").label.toUpperCase(),
+			});
+			// The whole point, said directly: the label's ground is the same colour as the
+			// segment around it, so nothing about the label changes the block's colour.
+			const ground = line?.spans.find(
+				(span) => span.text.trim() === "" && span.width > 1,
+			);
+			expect(rgbToHex(chip.bg).slice(0, 7).toUpperCase()).toBe(
+				rgbToHex(ground?.bg ?? chip.bg)
+					.slice(0, 7)
+					.toUpperCase(),
+			);
+
+			// A MATE HAS ONE GROUND, exactly like every other segment, and it is `bar`.
+			//
+			// This is the regression this pair exists for. The mate used to ground its box in
+			// `bg` and weave `bar` over it, lifting only the label cells to `bar` so the text
+			// had a measured tone under it — two grounds in one run, which on screen read as a
+			// solid block of colour with a paler patterned margin either side of the word.
+			// Reported as "mates still has weird background, double background".
+			//
+			// The tone is the FAMILY's, not `mate1`'s, because the run stands for however
+			// many slots the workflow reaches — see `MODEL_BADGE.mates`.
+			const mateLabel = frame.lines[subsRow(0)]?.spans.find((span) =>
+				span.text.includes(MATES_SEGMENT),
+			);
+			if (!mateLabel) throw new Error(`no mate label on the ${mode} page`);
+			expect({
+				mode,
+				bg: rgbToHex(mateLabel.bg).slice(0, 7).toUpperCase(),
+				fg: rgbToHex(mateLabel.fg).slice(0, 7).toUpperCase(),
+			}).toEqual({
+				mode,
+				bg: modelBadge(MATES_SEGMENT).bar.toUpperCase(),
+				fg: modelBadge(MATES_SEGMENT).label.toUpperCase(),
+			});
+
+			// The weave is a pale MARK on that same ground, not a second surface showing
+			// through it: `bg` ink over the `bar` the label also sits on.
+			const weave = frame.lines[subsRow(0)]?.spans.find((span) =>
+				span.text.includes(MATE_WEFT),
+			);
+			if (!weave) throw new Error(`no weave on the ${mode} page`);
+			expect({
+				mode,
+				bg: rgbToHex(weave.bg).slice(0, 7).toUpperCase(),
+				fg: rgbToHex(weave.fg).slice(0, 7).toUpperCase(),
+			}).toEqual({
+				mode,
+				bg: modelBadge(MATES_SEGMENT).bar.toUpperCase(),
+				fg: modelBadge(MATES_SEGMENT).bg.toUpperCase(),
+			});
+
+			// Said directly, and the assertion that would have caught the original defect
+			// whatever the tones were: the woven cells and the label cells share a ground.
+			expect(rgbToHex(weave.bg).slice(0, 7)).toBe(
+				rgbToHex(mateLabel.bg).slice(0, 7),
+			);
+		}
+		resetThemeMode();
+	});
+
+	// ── The mates collapse into ONE run ──────────────────────────────────────
+	//
+	// A workflow routing two agents to two different slots used to draw two narrow textured
+	// runs labelled `mate1` and `mate2`. Neither label fitted at a real pane width, so the
+	// distinction cost a segment and bought nothing — while the number the bar exists to
+	// answer, how much of this workflow leaves Claude Code, was split in half.
+
+	/** `dev` is the workflow every case below re-routes inside. */
+	const dev = WORKFLOWS[0] as (typeof WORKFLOWS)[number];
+
+	/** Two agents, two DIFFERENT slots. */
+	const twoSlots: ModelsConfig = {
+		...fableAdvisor,
+		agents: {
+			...fableAdvisor.agents,
+			"dev:qa-engineer": { model: "mate1" },
+			"dev:reviewer": { model: "mate2" },
+		},
+		mates: { mate1: { model: "kimi-k3" }, mate2: { model: "grok-4.6" } },
+	};
+
+	/**
+	 * The control for the proportion claim: the same two agents on ONE slot.
+	 *
+	 * Same agent counts, same number of drawn runs, same shares — so if the fold is a SUM
+	 * rather than a pick, these two configs must resolve the mates run to the identical
+	 * width. Anything else means slot identity is leaking into the layout.
+	 */
+	const oneSlotTwice: ModelsConfig = {
+		...fableAdvisor,
+		agents: {
+			...fableAdvisor.agents,
+			"dev:qa-engineer": { model: "mate1" },
+			"dev:reviewer": { model: "mate1" },
+		},
+		mates: { mate1: { model: "kimi-k3" } },
+	};
+
+	/**
+	 * Contiguous stretches of one model's ink on a row — one entry per DRAWN segment.
+	 *
+	 * Counted off the ground rather than off the weave glyph, for the reason the survival
+	 * test gives: a glyph answers "is the texture there", only the ground answers "is this
+	 * one segment or two". Both of a mate segment's tones count — the box is `bg` and its
+	 * label cells are lifted to `bar`.
+	 */
+	function inkRuns(
+		line: CapturedFrame["lines"][number],
+		ink: { bg: string; bar: string },
+	): number[] {
+		const tones = new Set([ink.bg.toUpperCase(), ink.bar.toUpperCase()]);
+		const painted: boolean[] = [];
+		for (const span of line.spans) {
+			const on = tones.has(rgbToHex(span.bg).slice(0, 7).toUpperCase());
+			for (let i = 0; i < span.width; i++) painted.push(on);
+		}
+		const runs: number[] = [];
+		let run = 0;
+		for (const cell of painted) {
+			if (cell) run += 1;
+			else if (run > 0) {
+				runs.push(run);
+				run = 0;
+			}
+		}
+		if (run > 0) runs.push(run);
+		return runs;
+	}
+
+	test("two agents on two different slots draw ONE run, labelled `mates`", async () => {
+		// The DISTRIBUTION still tells them apart — the fold belongs to the bar, not to the
+		// data, and the key under the chart reads the distribution to name both slots.
+		const spread = workflowDistribution(twoSlots, dev.agents);
+		expect(
+			spread
+				.filter((segment) => isMateSegment(segment.model))
+				.map((s) => s.key),
+		).toEqual(["mate1", "mate2"]);
+
+		// The bar folds them, and the fold is one run carrying BOTH agents.
+		expect(
+			barSegments(spread).filter((run) => isMateSegment(run.model)),
+		).toEqual([{ id: MATES_SEGMENT, model: MATES_SEGMENT, share: 2 }]);
+
+		const frame = await draw(twoSlots, 80);
+		const row = frame.chars[subsRow(0)] ?? "";
+		const line = frame.lines[subsRow(0)];
+		if (!line) throw new Error("no subagent row");
+		expect({
+			runs: inkRuns(line, modelBadge(MATES_SEGMENT)).length,
+			labelled: row.includes(`${MATE_WEFT} ${MATES_SEGMENT} ${MATE_WEFT}`),
+			// No slot name survives on the bar — that detail moved to the key, in full.
+			slots: MATES.filter((mate) => row.includes(mate)),
+		}).toEqual({ runs: 1, labelled: true, slots: [] });
+	});
+
+	test("the folded run is the SUM of its agents, not one of them", async () => {
+		for (const width of WIDTHS) {
+			const folded = await draw(twoSlots, width);
+			const control = await draw(oneSlotTwice, width);
+			const single = await draw(mateConfig, width);
+			const cells = (frame: Frame) => {
+				const line = frame.lines[subsRow(0)];
+				if (!line) throw new Error(`no subagent row at ${width}`);
+				return inkRuns(line, modelBadge(MATES_SEGMENT))[0] ?? 0;
+			};
+			// At the narrowest widths every run sits on its `minWidth: 1` floor and there is
+			// nothing left to be proportional WITH — the documented price of the floor (see
+			// the note above `BAR_DIVIDER`). So the strict claim is made where the panel has
+			// room, and only the weaker ordering is claimed where it does not.
+			const room = width >= 32;
+			expect({
+				width,
+				// Two slots and one slot, same agents: identical geometry. This is the
+				// proportion claim — the share is the count, and slot identity is not in it.
+				sameAsControl: cells(folded) === cells(control),
+				// And a real sum rather than a pick: one re-routed agent makes a strictly
+				// narrower run than two, wherever the difference is worth more than a cell.
+				widerThanOne: room
+					? cells(folded) > cells(single)
+					: cells(folded) >= cells(single),
+			}).toEqual({ width, sameAsControl: true, widerThanOne: true });
+		}
+	});
+
+	/**
+	 * The share is exactly the agents' share of the workflow.
+	 *
+	 * `dev` dispatches five agents; two of them are re-routed, so the run is 2/5 of the
+	 * FLEX space — the bar less the one-cell dividers between its runs, which Yoga never
+	 * gets to distribute. Measured at the widths where a fifth of a bar is more than a
+	 * rounding: at 80 the flex space is 65 cells and the run resolves to 26, dead on 0.400.
+	 */
+	test("and that sum is the right fraction of the bar", async () => {
+		for (const width of [40, 64, 80]) {
+			const frame = await draw(twoSlots, width);
+			const line = frame.lines[subsRow(0)];
+			const chars = frame.chars[subsRow(0)];
+			if (!line || chars === undefined) throw new Error(`no row at ${width}`);
+			const runs = barSegments(
+				workflowDistribution(twoSlots, dev.agents, dev.external.length),
+			);
+			const dividers = runs.length - 1;
+			const flex = width - SPREAD_LABEL_CELLS - dividers;
+			const cells = inkRuns(line, modelBadge(MATES_SEGMENT))[0] ?? 0;
+			// The two re-routed agents plus the workflow's own external phases: the bar draws
+			// both, because both leave Claude Code when this workflow runs.
+			const share =
+				(2 + dev.external.length) /
+				runs.reduce((sum, run) => sum + run.share, 0);
+			// The tolerance is ONE CELL, not a percentage. A bar is drawn in whole cells, so
+			// the only error the layout can introduce is rounding a fractional share up or
+			// down — an absolute quantity. A percentage tolerance says nothing at 80 columns
+			// and forgives more than a cell at 40, which is the wrong way round.
+			// The tolerance is ONE CELL PER COMPETING RUN, and it is a cell count rather than
+			// a percentage because a bar is drawn in whole cells: the only error the layout
+			// can introduce is rounding a fractional share, an absolute quantity.
+			//
+			// It scales with the number of OTHER runs, not with the width, because each of
+			// them rounds independently and the largest run absorbs the accumulated deficit.
+			// MEASURED at 40 columns: flex is 25 cells over `smart:1 normal:1 cheap:1 mates:4`,
+			// the three single-share runs each round up, and mates lands on 13 where its exact
+			// share is 14.29 — 1.29 cells light with three neighbours to pay for.
+			expect({
+				width,
+				off: Math.abs(cells - share * flex) <= runs.length - 1,
+			}).toEqual({ width, off: true });
+		}
+	});
+
+	test("a workflow with ONE mate-routed agent still says `mates`", async () => {
+		// Consistency beats a special case. `mate1` here would teach that the label names a
+		// slot, and the very next config over — same label, two slots — would disprove it.
+		const runs = barSegments(
+			workflowDistribution(mateConfig, dev.agents, dev.external.length),
+		);
+		expect(runs.filter((run) => isMateSegment(run.model))).toEqual([
+			{
+				id: MATES_SEGMENT,
+				model: MATES_SEGMENT,
+				share: 1 + dev.external.length,
+			},
+		]);
+		const frame = await draw(mateConfig, 80);
+		const row = frame.chars[subsRow(0)] ?? "";
+		expect(row).toContain(`${MATE_WEFT} ${MATES_SEGMENT} ${MATE_WEFT}`);
+		expect(row).not.toContain("mate1");
+	});
+
+	/**
+	 * THE CAPTION IS GONE, and this is the guard that keeps it gone.
+	 *
+	 * `▓ external model, via claudish` used to sit right-aligned on the header row. Reported:
+	 * "why do we have on top of diagram 'external models via claudish' if we already have
+	 * this described in the right and in the bottom in the list of models" — three statements
+	 * of one fact, on one screen.
+	 *
+	 * Asserted over the WHOLE frame rather than the header row alone, so relocating the
+	 * sentence somewhere else in the chart fails this too. Deleting was the instruction.
+	 */
+	test("no caption above the chart explains the weave", async () => {
+		const CAPTION = "external model, via claudish";
+		const says = (chars: string[]) =>
+			chars.some((row) => row.includes(CAPTION));
+
+		// THE NEGATIVE CONTROL, and it is the point of the test. An assertion that the
+		// string is absent passes just as happily against a predicate that can never find
+		// anything, so the predicate is first shown catching the exact row the old renderer
+		// drew — `workflow`, padding, the weave glyph, the sentence.
+		expect(says([`workflow${" ".repeat(40)}${MATE_WEFT} ${CAPTION}`])).toBe(
+			true,
+		);
+
+		// A config that DRAWS the weave — the only one that ever carried the caption — at a
+		// width with room to spare for it.
+		const woven = await draw(mateConfig, 80);
+		expect(woven.chars.some((row) => row.includes(MATE_WEFT))).toBe(true);
+		expect(says(woven.chars)).toBe(false);
+
+		const plain = await draw(fableAdvisor, 80);
+		expect(says(plain.chars)).toBe(false);
+	});
+});
+
+/**
+ * The colour key describes the CHART, which is the defect this section exists for.
+ *
+ * Reported as "the mate is missing from the bar". It was not: the key was built from every
+ * preset in the list while the bar drew the selected one, so a project config binding an
+ * agent to `mate1` put `mate1` in the key while the cursor sat on a built-in that has no
+ * mate and no width at which it could grow one.
+ */
+describe("the colour key names the config the chart is drawing", () => {
+	const mateConfig: ModelsConfig = {
+		...fableAdvisor,
+		agents: {
+			...fableAdvisor.agents,
+			"dev:qa-engineer": { model: "mate1" },
+		},
+		mates: { mate1: { model: "kimi-k3" } },
+	};
+
+	const status: ModelsStatus = {
+		state: "on",
+		preset: "outback",
+		drift: [],
+		warnings: [],
+	};
+
+	const preset = (
+		id: string,
+		label: string,
+		config: ModelsConfig,
+		custom: boolean,
+	): ModelsPresetItem => ({
+		id,
+		kind: "preset",
+		label,
+		config,
+		active: custom,
+		isDefault: !custom,
+		custom,
+	});
+
+	const items = [
+		preset("outback", "outback", mateConfig, true),
+		preset("fable-advisor", "fable-advisor", fableAdvisor, false),
+	];
+
+	async function legendOf(selected: ModelsPresetItem): Promise<string> {
+		const { captureCharFrame, renderOnce, renderer } = await testRender(
+			<box>
+				{renderModelsSummary({
+					selected,
+					status,
+					configPath: null,
+					width: 80,
+					available: 40,
+				})}
+			</box>,
+			{ width: 80, height: 40 },
+		);
+		await act(async () => {
+			await renderOnce();
+			await renderOnce();
+		});
+		const line = captureCharFrame()
+			.split("\n")
+			.find((row) => row.trimStart().startsWith("models"));
+		await act(async () => renderer.destroy());
+		if (line === undefined) throw new Error("the colour key was not drawn");
+		return line;
+	}
+
+	test("names the selected config's models", async () => {
+		const legend = await legendOf(items[0] as ModelsPresetItem);
+		for (const model of ["opus", "sonnet", "fable", "mate1"]) {
+			expect(legend).toContain(model);
+		}
+	});
+
+	test("a built-in names `mates` but no SLOT — the key describes the chart", async () => {
+		// Two claims in one row, and they pull opposite ways.
+		//
+		// It MUST carry `mates`: a built-in binds no slot, but `dev` still leaves Claude Code
+		// for its plan and code reviews, so the chart draws a textured run — and a run with
+		// no chip under it is a texture the reader cannot decode.
+		//
+		// It must NOT carry a slot name: `mate1` belongs to the OTHER item's config, the
+		// chart cannot contain it, and so neither may the key.
+		const legend = await legendOf(items[1] as ModelsPresetItem);
+		expect(legend).toContain(MATES_SEGMENT);
+		for (const mate of MATES) expect(legend).not.toContain(mate);
+		expect(legend).toContain("opus");
+	});
+
+	/**
+	 * The other half of collapsing the bar's mates: the slots come back HERE, with their
+	 * bindings, because this is the only row on the screen wide enough for a catalogue id.
+	 */
+	test("names every slot in use with the model it is bound to", async () => {
+		const twoSlots: ModelsConfig = {
+			...fableAdvisor,
+			agents: {
+				...fableAdvisor.agents,
+				"dev:qa-engineer": { model: "mate1" },
+				"dev:reviewer": { model: "mate2" },
+			},
+			mates: { mate1: { model: "kimi-k3" }, mate2: { model: "grok-4.6" } },
+		};
+		const legend = await legendOf(preset("outback", "outback", twoSlots, true));
+		expect(legend).toContain("mate1 kimi-k3");
+		expect(legend).toContain("mate2 grok-4.6");
+		// A slot the config never routes to is not in the key, bound or not — the key
+		// describes the chart, and the chart has no run for a slot nobody uses.
+		expect(legend).not.toContain("kangaroo");
+	});
+
+	test("an unbound slot says so, and never says its own name twice", async () => {
+		const unbound: ModelsConfig = {
+			...fableAdvisor,
+			agents: {
+				...fableAdvisor.agents,
+				"dev:qa-engineer": { model: "mate1" },
+			},
+		};
+		const legend = await legendOf(preset("outback", "outback", unbound, true));
+		expect(legend).toContain(`mate1 ${UNBOUND_MATE}`);
+		expect(legend).not.toContain("mate1 mate1");
+	});
+
+	/**
+	 * The fitting, asked of the pure function so every rung is checked rather than the one
+	 * an 80-column render happens to land on.
+	 *
+	 * It NEVER wraps. The block is budgeted at two rows in a fixed-height panel, and an
+	 * over-tall block there overprints whatever is below it — see `planModelsSummary`. So
+	 * the bindings go first, for the whole row at once, then the slots fold into the bar's
+	 * own word, and only then do chips drop.
+	 */
+	describe("and degrades without wrapping or overflowing", () => {
+		/**
+		 * A config with one agent on `inherit`, stated outright.
+		 *
+		 * `fable-advisor` used to supply one by itself: it pinned `seo:editor`, the single
+		 * agent in the marketplace whose own frontmatter named a model. That plugin was
+		 * removed, so no shipped preset produces the value any more — but `inherit` is still
+		 * a model any project may set on any agent, and the chart still paints it the flat
+		 * grey these rungs exist to decode. Naming it here tests the key rather than the
+		 * preset, which is what these cases were ever about.
+		 */
+		const withInherit: ModelsConfig = {
+			...fableAdvisor,
+			agents: { ...fableAdvisor.agents, "x:pinned": { model: "inherit" } },
+		};
+		const twoSlots: ModelsConfig = {
+			...withInherit,
+			agents: {
+				...withInherit.agents,
+				"dev:qa-engineer": { model: "mate1" },
+				"dev:reviewer": { model: "mate2" },
+			},
+			mates: { mate1: { model: "kimi-k3" }, mate2: { model: "grok-4.6" } },
+		};
+		const LABEL = "models  ".length;
+		/** What the row costs as drawn: each chip plus its padding, one space between. */
+		const cost = (chips: { text: string }[]) =>
+			LABEL +
+			chips.reduce(
+				(sum, chip, index) =>
+					sum + modelBadgeWidth(chip.text) + (index ? 1 : 0),
+				0,
+			);
+
+		/**
+		 * A preset that binds NO slot still needs the `mates` chip, and it must outlive
+		 * `inherit` when the row will not fit.
+		 *
+		 * Both halves matter. The chart draws a mates run for every workflow with external
+		 * phases, whatever the config says — so without the chip the reader sees a texture
+		 * with nothing to decode it. And chips are dropped from the right, so appending it
+		 * made it the first casualty at exactly the widths where the bar is too narrow to
+		 * label its own runs: the two failures compound instead of cancelling.
+		 *
+		 * `inherit` is the chip that can go. It explains a flat grey meaning "nothing was
+		 * chosen"; the weave means "this work leaves Claude Code".
+		 */
+		test("narrow: `mates` survives and `inherit` is dropped", () => {
+			const wide = fitModelKey(withInherit, 200, LABEL, true);
+			expect(wide.map((c) => c.text)).toContain(MATES_SEGMENT);
+			expect(wide.map((c) => c.text)).toContain("inherit");
+			// `mates` sits before `inherit`, so the drop takes `inherit` first.
+			expect(wide.findIndex((c) => c.text === MATES_SEGMENT)).toBeLessThan(
+				wide.findIndex((c) => c.text === "inherit"),
+			);
+
+			const tight = fitModelKey(withInherit, cost(wide) - 1, LABEL, true);
+			expect(tight.map((c) => c.text)).toContain(MATES_SEGMENT);
+			expect(tight.map((c) => c.text)).not.toContain("inherit");
+		});
+
+		test("no external workflows, no chip — the negative control", () => {
+			// Without the flag there is no mates run on the chart, so the key must not claim
+			// one. This is what stops the chip being unconditional decoration.
+			const chips = fitModelKey(fableAdvisor, 200, LABEL, false);
+			expect(chips.map((c) => c.text)).not.toContain(MATES_SEGMENT);
+		});
+
+		test("wide: every slot carries its binding", () => {
+			const chips = fitModelKey(twoSlots, 120, LABEL);
+			// `inherit` is in the list because the fixture pins an agent to it — the key has
+			// to explain that grey too, and it sorts last as the absence of a decision
+			// always does.
+			expect(chips.map((chip) => chip.text)).toEqual([
+				"opus",
+				"sonnet",
+				"fable",
+				"mate1 kimi-k3",
+				"mate2 grok-4.6",
+				"inherit",
+			]);
+			// Every mate chip wears the FAMILY ink, which is the one tone the chart paints
+			// them in. A per-slot hue here would name a colour the bar cannot contain.
+			expect(chips.filter((chip) => chip.ink === MATES_SEGMENT).length).toBe(2);
+		});
+
+		test("narrower: the bindings go, ALL of them, and every colour stays", () => {
+			// One cell under what the bound row needs. The whole row steps down together —
+			// a key with one binding shown and one not reads as two formats.
+			const full = fitModelKey(twoSlots, 120, LABEL);
+			const chips = fitModelKey(twoSlots, cost(full) - 1, LABEL);
+			expect(chips.map((chip) => chip.text)).toEqual([
+				"opus",
+				"sonnet",
+				"fable",
+				"mate1",
+				"mate2",
+				"inherit",
+			]);
+		});
+
+		/**
+		 * The rung that exists because truncation named ONE slot.
+		 *
+		 * Chips drop from the right and the mates sit near the end of `modelsInUse` order, so
+		 * before this rung a 40-column key read `opus sonnet fable mate1` — with `mate2`
+		 * gone and nothing saying so, which claims `mate1` is the only external model in a
+		 * config that has two. Folded, the key says what the bar says.
+		 */
+		test("narrower still: the slots fold into the bar's own word", () => {
+			// Each rung found by stepping one cell under what the rung above needs, so the
+			// widths are derived from the palette and the bindings rather than typed here.
+			const bound = fitModelKey(twoSlots, 1000, LABEL);
+			const slots = fitModelKey(twoSlots, cost(bound) - 1, LABEL);
+			const chips = fitModelKey(twoSlots, cost(slots) - 1, LABEL);
+			expect(chips.map((chip) => chip.text)).toEqual([
+				"opus",
+				"sonnet",
+				"fable",
+				MATES_SEGMENT,
+				"inherit",
+			]);
+			// One chip fewer than the slot rung, and no colour lost: the folded chip is the
+			// same family ink both slots wore.
+			expect(chips.length).toBe(slots.length - 1);
+			expect(chips.filter((chip) => chip.ink === MATES_SEGMENT).length).toBe(1);
+		});
+
+		test("narrowest: chips drop from the right, and the row never overflows", () => {
+			for (let width = 8; width <= 120; width++) {
+				const chips = fitModelKey(twoSlots, width, LABEL);
+				expect({ width, over: cost(chips) > width }).toEqual({
+					width,
+					over: false,
+				});
+				// Whatever the width, a slot is never named without the other one beside it.
+				// Half the mates is the misreading the fold rung exists to prevent, and the
+				// assertion is on that state directly rather than on a count derived from
+				// what was found — which would agree with itself.
+				const named = MATES.filter((mate) =>
+					chips.some((chip) => chip.text.startsWith(mate)),
+				);
+				expect({ width, halfTheSlots: named.length === 1 }).toEqual({
+					width,
+					halfTheSlots: false,
+				});
+			}
+			// And it does drop, rather than clipping a name into something unreadable: at 20
+			// columns only the first chip or two survive, whole.
+			const narrow = fitModelKey(twoSlots, 20, LABEL);
+			expect(narrow.length).toBeLessThan(
+				fitModelKey(twoSlots, 120, LABEL).length,
+			);
+			for (const chip of narrow) expect(chip.text).not.toContain("…");
+		});
 	});
 });