claudeup 6.3.0 → 6.4.0

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

@@ -0,0 +1,789 @@
+import { describe, expect, test } from "bun:test";
+import { BUILT_IN_PRESETS, findPreset } from "../data/models-presets.js";
+import {
+	EFFORTS,
+	type Effort,
+	GRADES,
+	MODEL_ALIASES,
+	type ModelsConfig,
+} from "../services/models-core.js";
+import {
+	detailPanelWidth,
+	listPanelWidth,
+} from "../ui/components/layout/ScreenLayout.js";
+import {
+	planModelsSummary,
+	shortConfigPath,
+} from "../ui/renderers/modelRenderers.js";
+import {
+	EFFORT_GLYPH_CELLS,
+	EFFORT_OFF,
+	EFFORT_ON,
+	NONE_CELL,
+	NO_EFFORT_GLYPH,
+	PRESET_NAME_MAX,
+	type PresetRowInput,
+	agentDistribution,
+	agentRows,
+	agentTableHeaders,
+	effortGlyph,
+	effortLabel,
+	effortLevel,
+	fitAgentTable,
+	fitPresetRows,
+	modelBadgeWidth,
+	modelBarFill,
+	modelFg,
+	modelPad,
+	modelWidth,
+	modelsInUse,
+	padCell,
+	presetMarkerWidth,
+} from "../ui/renderers/modelVisuals.js";
+import { wrapText } from "../ui/renderers/styleRenderers.js";
+import { CONTRAST_REFERENCE_KEYS, MODEL_BADGE } from "../ui/theme-mode.js";
+import { theme } from "../ui/theme.js";
+
+/**
+ * The Models screen's visual vocabulary, tested as data.
+ *
+ * Everything asserted here is a pure function on a config — the widgets that
+ * consume them return `<span>`s, which cannot be rendered without a terminal
+ * and, more to the point, cannot be judged from a character frame at all: a
+ * stacked bar is coloured SPACES. So the maths is pinned here and the colour is
+ * pinned by looking at a screenshot.
+ */
+
+const fableAdvisor = findPreset("fable-advisor");
+if (!fableAdvisor) throw new Error("the default preset went missing");
+
+describe("the model → colour map", () => {
+	/** WCAG relative luminance, so the contrast claims below are measured, not asserted. */
+	const luminance = (hex: string): number => {
+		const channel = (c: number) => {
+			const v = c / 255;
+			return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+		};
+		const n = Number.parseInt(hex.slice(1), 16);
+		return (
+			0.2126 * channel((n >> 16) & 255) +
+			0.7152 * channel((n >> 8) & 255) +
+			0.0722 * channel(n & 255)
+		);
+	};
+	const contrast = (a: string, b: string): number => {
+		const [x, y] = [luminance(a), luminance(b)];
+		return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+	};
+
+	/** 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", () => {
+		// 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) {
+			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}$/);
+			}
+		}
+	});
+
+	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.
+		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);
+		}
+	});
+
+	/**
+	 * The defect this palette was built to fix. `COMPONENT_BADGE`'s dark fills are washes
+	 * toward black, which assumes the page IS `#1C1C1E`; against a slate ground like One
+	 * 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 ground of DARK_GROUNDS) {
+				expect(contrast(MODEL_BADGE[alias].dark.bg, ground)).toBeGreaterThan(
+					1.2,
+				);
+			}
+		}
+	});
+
+	test("ink is readable on its own fill, on both pages", () => {
+		for (const alias of [...MODEL_ALIASES, "inherit"] as const) {
+			for (const mode of ["light", "dark"] as const) {
+				const ink = MODEL_BADGE[alias][mode];
+				expect(contrast(ink.fg, ink.bg)).toBeGreaterThan(3);
+			}
+		}
+	});
+
+	/**
+	 * 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
+	 * construction goes grey — built once, shown, and rejected as "dark looks like the light
+	 * 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) {
+			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.
+			expect(luminance(light.bg)).toBeGreaterThan(luminance(light.fg));
+			// Dark: the ink is near-white, the fill carries the colour.
+			expect(luminance(dark.fg)).toBeGreaterThan(luminance(dark.bg));
+		}
+	});
+
+	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) {
+			const dark = MODEL_BADGE[alias].dark;
+			expect(luminance(dark.bar)).toBeLessThan(luminance(dark.fg));
+		}
+	});
+
+	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"));
+	});
+
+	test("anything a hand-edited config invented takes inherit's grey", () => {
+		for (const invented of ["gpt-9", "", "OPUS", "opus-lead"]) {
+			expect(modelFg(invented)).toBe(modelFg("inherit"));
+		}
+	});
+
+	test("a model costs its own name in text, and two more as a badge", () => {
+		// The three places that measure a model column all go through these, because a
+		// column measured differently from what is drawn drifts by a cell as the data
+		// changes. A badge adds exactly the one space of padding it draws on each side.
+		expect(modelWidth("opus")).toBe(4);
+		expect(modelBadgeWidth("opus")).toBe(6);
+		expect(modelPad("opus", 8)).toBe("    ");
+		expect(modelPad("opus", 4)).toBe("");
+		expect(modelPad("opus", 2)).toBe("");
+	});
+});
+
+describe("the effort indicator", () => {
+	test("always four columns, filled to the level", () => {
+		expect(EFFORT_GLYPH_CELLS).toBe(4);
+		expect(EFFORTS.map(effortLevel)).toEqual([1, 2, 3, 4]);
+		for (const effort of EFFORTS) {
+			expect([...effortGlyph(effort)]).toHaveLength(EFFORT_GLYPH_CELLS);
+		}
+		// Absent pads to the same width, so the column never jumps.
+		expect([...effortGlyph(undefined)]).toHaveLength(EFFORT_GLYPH_CELLS);
+	});
+
+	test("the filled count IS the level, and the rest stays as a track", () => {
+		// Drawn, not omitted: dots that simply stop read as a count ("two"), dots on a
+		// track read as a level ("two of four"), and the level is the point.
+		for (const effort of EFFORTS) {
+			const drawn = effortGlyph(effort);
+			const level = effortLevel(effort);
+			expect([...drawn].filter((c) => c === EFFORT_ON)).toHaveLength(level);
+			expect([...drawn].filter((c) => c === EFFORT_OFF)).toHaveLength(
+				EFFORT_GLYPH_CELLS - level,
+			);
+		}
+	});
+
+	test("every level draws a different row, so shape alone is the ordinal", () => {
+		const drawn = EFFORTS.map(effortGlyph);
+		expect(new Set(drawn).size).toBe(EFFORTS.length);
+	});
+
+	test("absent effort is visibly NOT low — a dash, not an empty track", () => {
+		// `low` is a decision; absent means "inherits whatever the session is on". They
+		// are different answers and may not share a shape, and an empty track would read
+		// as the bottom of the same scale.
+		expect(effortGlyph(undefined).trim()).toBe(NO_EFFORT_GLYPH);
+		expect(effortGlyph(undefined)).not.toBe(effortGlyph("low"));
+		expect(effortGlyph(undefined)).not.toContain(EFFORT_OFF);
+		expect(effortLevel(undefined)).toBe(0);
+	});
+
+	test("every level indexes a glyph that exists", () => {
+		for (const effort of [undefined, ...EFFORTS]) {
+			const level = effortLevel(effort as Effort | undefined);
+			expect(level).toBeGreaterThanOrEqual(0);
+			expect(level).toBeLessThanOrEqual(EFFORT_GLYPH_CELLS);
+			expect(effortGlyph(effort as Effort | undefined)).toBeTruthy();
+		}
+	});
+
+	test("the level is ordered the same way the vocabulary is", () => {
+		expect(effortLevel("low")).toBeLessThan(effortLevel("medium"));
+		expect(effortLevel("medium")).toBeLessThan(effortLevel("high"));
+		expect(effortLevel("high")).toBeLessThan(effortLevel("xhigh"));
+	});
+
+	test("the word shortens to its initial, and every initial is distinct", () => {
+		const initials = EFFORTS.map((effort) => effortLabel(effort, "short"));
+		expect(new Set(initials).size).toBe(EFFORTS.length);
+		expect(effortLabel("xhigh", "full")).toBe("xhigh");
+		expect(effortLabel("xhigh", "none")).toBe("");
+	});
+});
+
+describe("the agent distribution", () => {
+	test("the segments sum to the number of agents the config names", () => {
+		for (const preset of BUILT_IN_PRESETS) {
+			const total = agentDistribution(preset).reduce(
+				(sum, segment) => sum + segment.count,
+				0,
+			);
+			expect(total).toBe(Object.keys(preset.agents).length);
+		}
+	});
+
+	test("counts the normal tier too — the bar is proportions, not exceptions", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: { a: "normal", b: "normal", c: "smart" },
+			fallback: "normal",
+		};
+		const segments = agentDistribution(config);
+		expect(segments.map((segment) => segment.key)).toEqual([
+			"smart",
+			"normal",
+			"cheap",
+		]);
+		expect(segments.map((segment) => segment.count)).toEqual([1, 2, 0]);
+	});
+
+	/**
+	 * The chart is the same rows whichever preset the cursor is on.
+	 *
+	 * Emitting only the tiers that happen to have agents made it change height and row
+	 * order as you moved down the list, which reads as the DATA changing shape rather
+	 * than as one tier being empty. "Nothing runs at `normal` here" is a fact worth
+	 * seeing, and it is invisible if the row is absent.
+	 */
+	test("every tier gets a row, even at zero", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: { only: "smart" },
+		};
+		const segments = agentDistribution(config);
+		for (const grade of GRADES) {
+			expect(segments.map((segment) => segment.key)).toContain(grade);
+		}
+		expect(segments.find((segment) => segment.key === "cheap")?.count).toBe(0);
+	});
+
+	test("a segment takes the colour of the model its grade routes to", () => {
+		const segments = agentDistribution(fableAdvisor);
+		const smart = segments.find((segment) => segment.key === "smart");
+		expect(smart?.model).toBe(fableAdvisor.grades.smart.model);
+		expect(smart?.fill).toBe(modelBarFill(fableAdvisor.grades.smart.model));
+	});
+
+	test("grades lead, in routing order, whatever order the config was written in", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: { a: "cheap", b: { model: "inherit" }, c: "smart" },
+		};
+		expect(agentDistribution(config).map((segment) => segment.key)).toEqual([
+			"smart",
+			"normal",
+			"cheap",
+			"inherit",
+		]);
+	});
+});
+
+describe("the agent table", () => {
+	test("one row per agent — every one, with no sampling", () => {
+		for (const preset of BUILT_IN_PRESETS) {
+			const rows = agentRows(preset);
+			expect(rows).toHaveLength(Object.keys(preset.agents).length);
+			expect(new Set(rows.map((row) => row.name)).size).toBe(rows.length);
+			expect(rows.map((row) => row.name).sort()).toEqual(
+				Object.keys(preset.agents).sort(),
+			);
+		}
+	});
+
+	test("sorted by grade in ROUTING order, then alphabetically inside it", () => {
+		const rows = agentRows(fableAdvisor);
+		const rank = (key: string) => {
+			const index = (GRADES as readonly string[]).indexOf(key);
+			return index === -1 ? GRADES.length : index;
+		};
+		for (let i = 1; i < rows.length; i++) {
+			const previous = rows[i - 1];
+			const current = rows[i];
+			if (!previous || !current) throw new Error("row went missing");
+			expect(rank(previous.key)).toBeLessThanOrEqual(rank(current.key));
+			if (previous.key === current.key) {
+				expect(previous.name.localeCompare(current.name)).toBeLessThan(0);
+			}
+		}
+		// critical is the strongest tier and leads; `inherit` is not a grade and trails.
+		expect(rows[0]?.key).toBe("smart");
+		expect(rows.at(-1)?.key).toBe("inherit");
+	});
+
+	test("each row carries the model and effort its grade actually routes", () => {
+		for (const row of agentRows(fableAdvisor)) {
+			const index = (GRADES as readonly string[]).indexOf(row.key);
+			if (index === -1) continue;
+			const grade = GRADES[index];
+			if (!grade) throw new Error("grade went missing");
+			expect(row.model).toBe(fableAdvisor.grades[grade].model);
+			expect(row.effort).toBe(fableAdvisor.grades[grade].effort);
+		}
+	});
+
+	test("an agent pinned to a model of its own keeps that model and effort", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: { "x:y": { model: "haiku", effort: "low" } },
+		};
+		const row = agentRows(config)[0];
+		expect(row?.model).toBe("haiku");
+		expect(row?.effort).toBe("low");
+		expect(row?.inherit).toBe(false);
+	});
+
+	test("an inherit row sets nothing, so it reads as an em dash", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			agents: { "seo:editor": { model: "inherit" } },
+		};
+		const row = agentRows(config)[0];
+		expect(row?.inherit).toBe(true);
+		expect(row?.effort).toBeUndefined();
+		expect(NONE_CELL).toBe("—");
+	});
+});
+
+describe("fitting the agent table to a panel", () => {
+	const rows = agentRows(fableAdvisor);
+
+	test("at a real detail width every column is present", () => {
+		const layout = fitAgentTable(rows, detailPanelWidth(120));
+		expect(layout.grade).toBeGreaterThan(0);
+		expect(layout.effort).toBe("full");
+		expect(layout.total).toBeLessThanOrEqual(detailPanelWidth(120));
+	});
+
+	test("the table never exceeds the width it was given, at any width", () => {
+		for (let width = 20; width <= 200; width++) {
+			const layout = fitAgentTable(rows, width);
+			// Below the point where even the stripped table fits, the name column
+			// is floored rather than going negative — that case is reported by
+			// `total`, and it is the only one allowed to exceed.
+			if (layout.name > 6) expect(layout.total).toBeLessThanOrEqual(width);
+			expect(layout.name).toBeGreaterThanOrEqual(6);
+		}
+	});
+
+	test("the grade column is what gives way first", () => {
+		const full = fitAgentTable(rows, detailPanelWidth(120));
+		const squeezed = fitAgentTable(rows, full.total - 1);
+		expect(squeezed.grade).toBe(0);
+		// The effort word is still there — it is the SECOND thing to go.
+		expect(squeezed.effort).toBe("full");
+	});
+
+	test("the effort word shortens only after the grade column is gone", () => {
+		// Walk the whole range: at no width may the word be abbreviated while
+		// the grade column — the cheaper thing to lose — is still being drawn.
+		let sawShortened = false;
+		for (let width = 20; width <= 200; width++) {
+			const layout = fitAgentTable(rows, width);
+			if (layout.effort !== "full") {
+				sawShortened = true;
+				expect(layout.grade).toBe(0);
+			}
+		}
+		expect(sawShortened).toBe(true);
+	});
+
+	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(
+			layout.name,
+		);
+	});
+
+	test("every header cell is exactly its column, so the columns line up", () => {
+		for (const width of [40, 60, 80, 120]) {
+			const layout = fitAgentTable(rows, width);
+			const headers = agentTableHeaders(layout);
+			const keys = headers.map((cell) => cell.key);
+			expect(keys).toContain("name");
+			expect(keys).toContain("model");
+			// The grade header appears exactly when the grade column does.
+			expect(keys.includes("grade")).toBe(layout.grade > 0);
+			expect(headers.find((cell) => cell.key === "name")?.text).toHaveLength(
+				layout.name,
+			);
+			expect(headers.find((cell) => cell.key === "model")?.text).toHaveLength(
+				layout.model,
+			);
+			const grade = headers.find((cell) => cell.key === "grade");
+			if (grade) expect(grade.text).toHaveLength(layout.grade);
+			// The header row is the table's own width, gaps included.
+			const rendered = headers
+				.map((cell, index) => (index > 0 ? ` ${cell.text}` : cell.text))
+				.join("");
+			expect(rendered.length).toBeLessThanOrEqual(
+				Math.max(width, layout.total),
+			);
+		}
+	});
+
+	test("padCell is exactly the column, whether it pads or truncates", () => {
+		expect(padCell("ab", 5)).toBe("ab   ");
+		expect(padCell("abcdefgh", 5)).toBe("abcd…");
+		expect(padCell("abcdefgh", 5)).toHaveLength(5);
+	});
+
+	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);
+			const widest = rows.reduce(
+				(max, row) =>
+					Math.max(max, row.inherit ? NONE_CELL.length : modelWidth(row.model)),
+				"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);
+				expect(drawn).toHaveLength(layout.model);
+			}
+			const header = agentTableHeaders(layout).find(
+				(cell) => cell.key === "model",
+			);
+			expect(header?.text).toBe(padCell("Model", layout.model));
+		}
+	});
+});
+
+describe("the panel widths ScreenLayout hands out", () => {
+	/**
+	 * MEASURED against real renders in tmux at each of these widths — the row
+	 * is the width of the wrapped ruler in the panel, with the scrollbar column
+	 * excluded. Yoga rounds a fractional percentage to whole cells, so these
+	 * cannot be derived from the JSX; they have to be looked at.
+	 */
+	const MEASURED: Array<[terminal: number, list: number, detail: number]> = [
+		[70, 32, 32],
+		[80, 37, 37],
+		[90, 42, 42],
+		[100, 47, 47],
+		[110, 52, 52],
+		[120, 57, 57],
+		[121, 57, 58],
+		[130, 62, 62],
+		[140, 67, 67],
+		[160, 76, 77],
+		[181, 87, 87],
+		[200, 96, 97],
+	];
+
+	test("never asks for more columns than the panel has", () => {
+		// One column short folds nothing; one column over paints into the
+		// scrollbar and is cut at the terminal edge.
+		for (const [terminal, list, detail] of MEASURED) {
+			expect(listPanelWidth(terminal)).toBeLessThanOrEqual(list);
+			expect(detailPanelWidth(terminal)).toBeLessThanOrEqual(detail);
+		}
+	});
+
+	test("is never more than one column short of the panel either", () => {
+		for (const [terminal, list, detail] of MEASURED) {
+			expect(listPanelWidth(terminal)).toBeGreaterThanOrEqual(list - 1);
+			expect(detailPanelWidth(terminal)).toBeGreaterThanOrEqual(detail - 1);
+		}
+	});
+
+	test("the old hand-copied formula asked for MORE than the panel below 56 columns", () => {
+		// `Math.max(24, floor(width * 0.5) - 4)`, carried in two screens. The
+		// floor of 24 is the bug: it survives past the point where the panel is
+		// narrower than 24 columns.
+		const old = (width: number) => Math.max(24, Math.floor(width * 0.5) - 4);
+		expect(old(48)).toBeGreaterThan(detailPanelWidth(48));
+		expect(detailPanelWidth(48)).toBeLessThan(24);
+	});
+
+	test("grows with the terminal and never goes negative", () => {
+		for (let width = 1; width <= 400; width++) {
+			expect(detailPanelWidth(width)).toBeGreaterThan(0);
+			expect(listPanelWidth(width)).toBeGreaterThan(0);
+		}
+		expect(detailPanelWidth(200)).toBeGreaterThan(detailPanelWidth(120));
+	});
+});
+
+describe("wrapping to a narrow panel", () => {
+	test("respects a narrow width down to wrapText's own floor", () => {
+		const text =
+			"stale — settings no longer match the config, so part of it is not in force";
+		for (const width of [20, 24, 32, 40, 57]) {
+			for (const line of wrapText(text, width)) {
+				expect(line.length).toBeLessThanOrEqual(Math.max(20, width));
+			}
+		}
+	});
+
+	test("the agent table's own cells never exceed the layout, at any width", () => {
+		const rows = agentRows(fableAdvisor);
+		for (const width of [24, 40, 57, 80, 120]) {
+			const layout = fitAgentTable(rows, width);
+			for (const row of rows) {
+				expect(padCell(row.name, layout.name)).toHaveLength(layout.name);
+				if (layout.grade > 0) {
+					expect(padCell(row.key, layout.grade)).toHaveLength(layout.grade);
+				}
+			}
+		}
+	});
+});
+
+describe("the colour key under the bars", () => {
+	test("names every model the presets actually use, and nothing else", () => {
+		const models = modelsInUse(BUILT_IN_PRESETS);
+		expect(models).toContain("fable");
+		expect(models).toContain("opus");
+		expect(models).toContain("sonnet");
+		// NOT haiku: the presets no longer use it, and a key naming a colour that appears
+		// nowhere on screen is a legend for a thing that is not there.
+		expect(models).not.toContain("haiku");
+		// `seo:editor` is pinned to `inherit`, so the key has to explain that grey.
+		expect(models).toContain("inherit");
+		expect(new Set(models).size).toBe(models.length);
+	});
+
+	test("a long-context variant is keyed by its base model, not twice", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			main: { model: "opus[1m]" },
+		};
+		const models = modelsInUse([config]);
+		expect(models).toContain("opus");
+		expect(models).not.toContain("opus[1m]");
+	});
+
+	test("lists nothing a preset does not name", () => {
+		const config: ModelsConfig = {
+			...fableAdvisor,
+			main: { model: "opus" },
+			grades: {
+				smart: { model: "opus" },
+				normal: { model: "opus" },
+				cheap: { model: "opus" },
+			},
+			agents: {},
+		};
+		expect(modelsInUse([config])).toEqual(["opus"]);
+	});
+});
+
+describe("the config path under the list", () => {
+	test("is shown relative to the project, which is the part that identifies it", () => {
+		expect(
+			shortConfigPath("/home/x/proj/.claude/models.json", "/home/x/proj", 40),
+		).toBe(".claude/models.json");
+	});
+
+	test("truncates from the LEFT, keeping the filename", () => {
+		const short = shortConfigPath(
+			"/some/very/long/elsewhere/.claude/models.json",
+			"/home/x/proj",
+			20,
+		);
+		expect(short.length).toBeLessThanOrEqual(20);
+		expect(short.endsWith("models.json")).toBe(true);
+		expect(short.startsWith("…")).toBe(true);
+	});
+
+	test("a trailing slash on the project path changes nothing", () => {
+		expect(
+			shortConfigPath("/home/x/proj/.claude/models.json", "/home/x/proj/", 40),
+		).toBe(".claude/models.json");
+	});
+});
+
+describe("budgeting the list panel's summary", () => {
+	/**
+	 * MEASURED at 80×24 before this existed: the blocks wanted about 17 rows in
+	 * the 12 the list left, and Yoga answered by shrinking them —
+	 * `fable-advisor` and `fable-lead` composited into `fable-leadical`, and
+	 * `off` printed on top of `—`. An over-tall panel in a fixed-height box does
+	 * not scroll and does not clip; it overprints.
+	 */
+	test("never plans more rows than it was given", () => {
+		for (let available = 0; available <= 40; available++) {
+			for (const hasPath of [true, false]) {
+				const plan = planModelsSummary(available, hasPath);
+				expect(plan.rows).toBeLessThanOrEqual(available);
+			}
+		}
+	});
+
+	test("no room at all means no block, not a partial one", () => {
+		const plan = planModelsSummary(1, true);
+		expect(plan.rows).toBe(0);
+		expect(plan).toMatchObject({ spread: false, key: false, facts: false });
+	});
+
+	test("a tall panel gets everything", () => {
+		expect(planModelsSummary(40, true)).toMatchObject({
+			spread: true,
+			key: true,
+			facts: true,
+		});
+	});
+
+	test("the comparison strip is gone, not merely unplanned", () => {
+		// It rendered as one purple bar, then a single teal rectangle spanning
+		// the two presets that share a colour, then grey — three blocks where
+		// four comparisons were meant. There is no height at which it comes back.
+		for (let available = 0; available <= 60; available++) {
+			expect(planModelsSummary(available, true)).not.toHaveProperty("compare");
+		}
+	});
+
+	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);
+		expect(tight.spread).toBe(true);
+		expect(tight.facts).toBe(true);
+		expect(tight.key).toBe(false);
+	});
+
+	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);
+			if (plan.key) expect(plan.spread).toBe(true);
+			if (plan.key) expect(plan.facts).toBe(true);
+			if (plan.facts) expect(plan.spread).toBe(true);
+		}
+	});
+
+	test("a project with no config path costs one row less", () => {
+		// The facts block prints a `config` line only when there is one, and the
+		// budget has to know that or the panel overprints by a row.
+		const withPath = planModelsSummary(40, true);
+		const without = planModelsSummary(40, false);
+		expect(without.rows).toBe(withPath.rows - 1);
+	});
+});
+
+describe("the preset list's shared row layout", () => {
+	const rows: PresetRowInput[] = BUILT_IN_PRESETS.map((preset) => ({
+		label: preset.preset,
+		main: preset.main.model,
+		smart: preset.grades.smart.model,
+		markers: presetMarkerWidth(preset.preset === "fable-advisor", false),
+	}));
+
+	test("ONE layout for the whole list — never one per row", () => {
+		// The bug, off a 120×30 screenshot: the selected row dropped its `main` /
+		// `critical` labels while its three neighbours kept theirs. A layout
+		// measured from the widest row is the same object for every row, so the
+		// form cannot vary down the column.
+		const layout = fitPresetRows(rows, 57);
+		const widestName = Math.max(...rows.map((row) => row.label.length));
+		const widestMain = Math.max(...rows.map((row) => row.main.length));
+		expect(layout.name).toBe(Math.min(PRESET_NAME_MAX, widestName));
+		expect(layout.main).toBe(widestMain);
+		// Every row's name cell is exactly the shared column, so they align.
+		for (const row of rows) {
+			expect(padCell(row.label, layout.name)).toHaveLength(layout.name);
+		}
+	});
+
+	test("a row that alone would fit the labels still loses them with the list", () => {
+		// `opus-lead` is the shortest name and the narrowest pair, so on its own
+		// it fits a form the list as a whole cannot. Uniformly terse beats two
+		// formats in one column.
+		const short = rows.filter((row) => row.label === "opus-lead");
+		const width = fitPresetRows(short, 200).total;
+		expect(fitPresetRows(short, width).detail).toBe("labelled");
+		expect(fitPresetRows(rows, width).detail).not.toBe("labelled");
+	});
+
+	test("never asks for more columns than the panel has, at any width", () => {
+		for (let width = 10; width <= 200; width++) {
+			const layout = fitPresetRows(rows, width);
+			// `none` is the floor: the name and its markers are not negotiable,
+			// and that case is reported by `total` rather than hidden.
+			if (layout.detail !== "none") {
+				expect(layout.total).toBeLessThanOrEqual(width);
+			}
+		}
+	});
+
+	test("degrades in one fixed order and never skips a rung", () => {
+		const seen: string[] = [];
+		for (let width = 200; width >= 10; width--) {
+			const detail = fitPresetRows(rows, width).detail;
+			if (seen.at(-1) !== detail) seen.push(detail);
+		}
+		expect(seen).toEqual(["labelled", "smart", "compact", "main", "none"]);
+	});
+
+	test("`smart`'s label outlives `main`'s, and its value outlives nothing else", () => {
+		// `smart` is the grade this screen is about, so its label is the last
+		// one drawn; but at the narrowest rung the single model kept is `main` —
+		// a bare second model with no label beside it says nothing usable.
+		for (let width = 10; width <= 200; width++) {
+			const layout = fitPresetRows(rows, width);
+			if (layout.detail === "smart" || layout.detail === "compact") {
+				expect(layout.smart).toBeGreaterThan(0);
+			}
+			if (layout.detail === "main") {
+				expect(layout.main).toBeGreaterThan(0);
+				expect(layout.smart).toBe(0);
+			}
+			if (layout.detail === "none") expect(layout.main).toBe(0);
+		}
+	});
+
+	test("a long name truncates into the column rather than widening it", () => {
+		const long: PresetRowInput[] = [
+			{
+				label: "a-very-long-preset-name-indeed",
+				main: "opus",
+				smart: "fable",
+				markers: 0,
+			},
+		];
+		const layout = fitPresetRows(long, 200);
+		expect(layout.name).toBe(PRESET_NAME_MAX);
+		expect(padCell(long[0]?.label ?? "", layout.name)).toHaveLength(
+			PRESET_NAME_MAX,
+		);
+	});
+
+	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,
+		);
+	});
+});