claudeup 6.3.2 → 6.5.0

package/src/ui/renderers/modelRenderers.tsx

@@ -0,0 +1,1004 @@
+import type React from "react";
+import { WORKFLOWS } from "../../data/models-presets.js";
+import {
+	type Effort,
+	GRADES,
+	type ModelsConfig,
+	type ModelsState,
+	type ModelsStatus,
+} from "../../services/models-core.js";
+import type {
+	ModelsBrowserItem,
+	ModelsPresetItem,
+	ModelsStatusItem,
+} from "../adapters/modelsAdapter.js";
+import {
+	DetailSection,
+	KeyValueLine,
+	ListCategoryRow,
+	MetaText,
+	SelectableRow,
+} from "../components/primitives/index.js";
+import { effortInk, trackFill } from "../theme-mode.js";
+import { type UiColor, theme } from "../theme.js";
+import {
+	type AgentRow,
+	type AgentTableLayout,
+	EffortGlyph,
+	ModelBadge,
+	ModelText,
+	NONE_CELL,
+	PRESET_MARKERS,
+	type PresetRowInput,
+	type PresetRowLayout,
+	agentDistribution,
+	agentRows,
+	agentTableHeaders,
+	effortLabel,
+	effortWord,
+	fitAgentTable,
+	fitPresetRows,
+	modelBadgeWidth,
+	modelBarFill,
+	modelPad,
+	modelWidth,
+	modelsInUse,
+	padCell,
+	presetMarkerWidth,
+	spendRuns,
+	workflowDistribution,
+} from "./modelVisuals.js";
+import { wrapText } from "./styleRenderers.js";
+
+// ─── State vocabulary ─────────────────────────────────────────────────────────
+
+/**
+ * One sentence per state, and each says what is HAPPENING, not what the field
+ * is called. "unhooked" on its own is a word nobody can act on; "the config is
+ * here, but no hook runs it" names the missing piece.
+ *
+ * The state WORD is not repeated here — it is drawn as a badge beside the
+ * sentence, which is the shape a discrete status wants and which also keeps an
+ * ambiguous-width glyph out of a line whose width has to be exact.
+ */
+const STATE_HEADLINE: Record<ModelsState, string> = {
+	off: "no .claude/models.json, so every subagent inherits the session model",
+	on: "every Agent call is routed through this config",
+	stale: "settings no longer match the config, so part of it is not in force",
+	invalid: "the config does not validate, and nothing is routed",
+	unhooked: "the config is here, but no hook runs it, so nothing is routed",
+};
+
+const STATE_TONE: Record<ModelsState, UiColor> = {
+	off: theme.colors.muted,
+	on: theme.colors.success,
+	stale: theme.colors.warning,
+	invalid: theme.colors.danger,
+	unhooked: theme.colors.danger,
+};
+
+/** Badge tone for the header row. `unhooked` is red with `invalid`: both route nothing. */
+const STATE_CATEGORY: Record<ModelsState, "gray" | "green" | "yellow" | "red"> =
+	{
+		off: "gray",
+		on: "green",
+		stale: "yellow",
+		invalid: "red",
+		unhooked: "red",
+	};
+
+/**
+ * How many validation errors to draw before summarising the rest.
+ *
+ * MEASURED on a real config written before the tier rename: 23 errors, each wrapping to two
+ * lines, which filled the whole detail panel and pushed the one useful line — what to press
+ * — off the bottom of the screen. Every error after the first few says the same thing about
+ * a different key, so the list stops being information and becomes a wall.
+ */
+const MAX_DRIFT_LINES = 6;
+
+/** What the user should press next, per state. Empty when there is nothing to fix. */
+const STATE_FIX: Record<ModelsState, string> = {
+	off: "Pick a preset below and press a to start routing.",
+	on: "",
+	stale: "Press a on the active preset to write the settings again.",
+	invalid:
+		"Fix .claude/models.json by hand, or press a on a preset to overwrite it.",
+	unhooked: "Press a on a preset — applying one registers the hook.",
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * A badge as a `<span>`, for a row that also carries text.
+ *
+ * The ONLY filled block this screen still paints outside the selection and the
+ * distribution bar — a discrete status is exactly what a fill is for, and there
+ * is one of them on screen rather than seventeen.
+ *
+ * Only ever called from inside a `<text>`. A `<span>` with no `<text>` parent
+ * swaps the entire UI for an error page and still exits 0, so this is a rule
+ * the type system cannot enforce and a test cannot see.
+ */
+function Chip({
+	label,
+	tone,
+}: {
+	label: string;
+	tone: keyof typeof theme.category;
+}): React.ReactNode {
+	const colors = theme.category[tone];
+	return (
+		<span bg={colors.bg} fg={colors.fg}>
+			<strong>{` ${label} `}</strong>
+		</span>
+	);
+}
+
+/**
+ * A paragraph, pre-wrapped to the panel.
+ *
+ * OpenTUI folds a long line rather than dropping it, but it folds at the box's
+ * width with no regard for words — so pre-wrapping is what keeps a sentence
+ * breaking between words instead of mid-token.
+ */
+function Wrapped({
+	text,
+	width,
+	tone,
+}: {
+	text: string;
+	width?: number;
+	/** `UiColor`, not `string`: the terminal's own foreground is an RGBA. */
+	tone?: UiColor;
+}): React.ReactNode {
+	return (
+		<box flexDirection="column">
+			{wrapText(text, width ?? 48).map((line, index) => (
+				<text
+					key={`${index}:${line.slice(0, 12)}`}
+					fg={tone ?? theme.colors.muted}
+				>
+					{line || " "}
+				</text>
+			))}
+		</box>
+	);
+}
+
+/**
+ * The state block: what is routed, what drifted, and what to press.
+ *
+ * Rendered above the preset on EVERY row, not only on the header. The question
+ * a reader has while looking at a preset is "is this the one that is running",
+ * and answering it one row away means switching rows to find out.
+ */
+function StateBlock({
+	status,
+	width,
+}: {
+	status: ModelsStatus | null;
+	width?: number;
+}): React.ReactNode {
+	if (!status) {
+		return <text fg={theme.colors.muted}>Reading the routing…</text>;
+	}
+	const fix = STATE_FIX[status.state];
+	const isInvalid = status.state === "invalid";
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.text}>
+				<Chip label={status.state} tone={STATE_CATEGORY[status.state]} />
+			</text>
+			<Wrapped
+				text={STATE_HEADLINE[status.state]}
+				width={width}
+				tone={STATE_TONE[status.state]}
+			/>
+			{status.drift.length > 0 ? (
+				<box flexDirection="column" marginTop={1}>
+					<text fg={theme.colors.text}>
+						<Chip
+							label={`${isInvalid ? "errors" : "drift"} ${status.drift.length}`}
+							tone={isInvalid ? "red" : "yellow"}
+						/>
+					</text>
+					{status.drift.slice(0, MAX_DRIFT_LINES).map((line) => (
+						<Wrapped
+							key={line}
+							text={line}
+							width={width}
+							tone={isInvalid ? theme.colors.danger : theme.colors.warning}
+						/>
+					))}
+					{status.drift.length > MAX_DRIFT_LINES ? (
+						// `Wrapped`, not `MetaText`: MetaText returns a bare <span>, and a <span>
+						// with no <text> parent swaps the whole UI for an error page while still
+						// exiting 0. Typecheck and every unit test pass; only running it shows it.
+						<Wrapped
+							text={`…and ${status.drift.length - MAX_DRIFT_LINES} more — run claudeup models status`}
+							width={width}
+						/>
+					) : null}
+				</box>
+			) : null}
+			{status.warnings.length > 0 ? (
+				<box flexDirection="column" marginTop={1}>
+					<text fg={theme.colors.text}>
+						<Chip label={`warnings ${status.warnings.length}`} tone="yellow" />
+					</text>
+					{status.warnings.map((line) => (
+						<Wrapped
+							key={line}
+							text={line}
+							width={width}
+							tone={theme.colors.warning}
+						/>
+					))}
+				</box>
+			) : null}
+			{fix ? (
+				<box marginTop={1}>
+					<Wrapped text={fix} width={width} />
+				</box>
+			) : null}
+		</box>
+	);
+}
+
+// ─── The grade table ──────────────────────────────────────────────────────────
+
+/** Gutter for the row label, matching `KeyValueLine` so the columns line up. */
+const SPEC_LABEL_WIDTH = 10;
+
+/**
+ * The widest model column in a config, so every name in the table ends at the
+ * same column and the effort glyphs beside them form a straight edge.
+ */
+function specModelColumn(config: ModelsConfig): number {
+	return Math.max(
+		modelWidth(config.main.model),
+		...GRADES.map((grade) => modelWidth(config.grades[grade].model)),
+	);
+}
+
+/**
+ * One line of the grade table: `critical  fable   ▇ xhigh`.
+ *
+ * Effort is a bounded ordinal — four named levels, ordered — so it gets a ramp
+ * glyph and the word, rather than being parenthesised after the model name
+ * where its ordering is invisible. The glyph takes the MODEL's hue, so shape
+ * carries the level and colour still carries only one thing.
+ */
+function SpecRow({
+	label,
+	model,
+	effort,
+	modelColumn,
+	highlight,
+}: {
+	label: string;
+	model: string;
+	effort: Effort | undefined;
+	modelColumn: number;
+	/** The grade an unassigned agent falls to — worth reading first. */
+	highlight?: boolean;
+}): React.ReactNode {
+	return (
+		<text fg={theme.colors.text}>
+			<span fg={highlight ? theme.colors.text : theme.colors.muted}>
+				{`${label} `.padEnd(SPEC_LABEL_WIDTH)}
+			</span>
+			{/* A CHIP here, text in the agent table below. Four of them read as a key;
+			    seventeen read as a solid column, which is what this screen was reported for. */}
+			<ModelBadge model={model} />
+			<span
+				fg={theme.colors.border}
+			>{`${modelPad(model, modelColumn)}  `}</span>
+			<EffortGlyph effort={effort} model={model} />
+			<span
+				fg={effort ? (effortInk(effort) as UiColor) : theme.colors.muted}
+			>{` ${effortWord(effort)}`}</span>
+		</text>
+	);
+}
+
+// ─── Agent table ──────────────────────────────────────────────────────────────
+
+/**
+ * Every agent, one row, four aligned columns — and NOT ONE FILLED BLOCK.
+ *
+ * This replaced a paragraph of grouped names with a "+4 more" on the end. The
+ * question a reader brings is "what does MY agent get", and a sampled list
+ * cannot answer it; the detail pane scrolls (`^U/^D`, `PgUp/PgDn`), so the only
+ * real constraint is width, and `fitAgentTable` spends that in a fixed order
+ * rather than wrapping a cell.
+ *
+ * The model was a filled chip and the effort a filled four-cell meter. MEASURED
+ * on both a light and a dark terminal, seventeen such rows stacked into two
+ * solid vertical colour columns — two painted bars the height of the table,
+ * which read as slabs rather than as data. Coloured TEXT plus one ramp glyph
+ * says the same thing and leaves a table you can scan a column of.
+ *
+ * Colour stays on the model: the name and the glyph carry it, the agent name
+ * does not. A name is an identifier — colouring it made six agent names six
+ * different hues, with red (which means danger everywhere else here) landing on
+ * `dev:debugger` for no reason at all.
+ */
+function AgentTable({
+	config,
+	width,
+}: {
+	config: ModelsConfig;
+	width: number;
+}): React.ReactNode {
+	const rows = agentRows(config);
+	if (rows.length === 0) return null;
+	const layout = fitAgentTable(rows, width);
+	const headers = agentTableHeaders(layout);
+
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.muted}>
+				{headers.map((cell, index) => (
+					<span key={cell.key} fg={theme.colors.muted}>
+						{index > 0 ? ` ${cell.text}` : cell.text}
+					</span>
+				))}
+			</text>
+			{rows.map((row) => (
+				<AgentTableRow key={row.name} row={row} layout={layout} />
+			))}
+		</box>
+	);
+}
+
+function AgentTableRow({
+	row,
+	layout,
+}: {
+	row: AgentRow;
+	layout: AgentTableLayout;
+}): React.ReactNode {
+	const label = effortLabel(row.effort, layout.effort);
+	return (
+		<text fg={theme.colors.text}>
+			<span fg={row.inherit ? theme.colors.dim : theme.colors.text}>
+				{padCell(row.name, layout.name)}
+			</span>
+			<span fg={theme.colors.border}> </span>
+			{layout.grade > 0 ? (
+				<span fg={theme.colors.muted}>{padCell(row.key, layout.grade)}</span>
+			) : null}
+			{layout.grade > 0 ? <span fg={theme.colors.border}> </span> : null}
+			{row.inherit ? (
+				<span fg={theme.colors.dim}>{padCell(NONE_CELL, layout.model)}</span>
+			) : (
+				<ModelText model={row.model} />
+			)}
+			{row.inherit ? null : (
+				<span fg={theme.colors.border}>
+					{modelPad(row.model, layout.model)}
+				</span>
+			)}
+			<span fg={theme.colors.border}> </span>
+			{row.inherit ? (
+				<span fg={theme.colors.dim}>{NONE_CELL}</span>
+			) : (
+				<EffortGlyph effort={row.effort} model={row.model} />
+			)}
+			{/* The word takes the SAME ink as the dots beside it. Dim grey made the pair read
+			    as two things — a coloured meter and an unrelated caption — when it is one
+			    reading with its value spelt out. */}
+			{!row.inherit && label ? (
+				<span
+					fg={effortInk(row.effort ?? "low") as UiColor}
+				>{` ${label}`}</span>
+			) : null}
+		</text>
+	);
+}
+
+/**
+ * How the routed agents are spread, as one bar and a legend.
+ *
+ * A category distribution, so a stacked bar rather than the list of counts it
+ * would otherwise be — and now the ONLY graphic on the screen, which is what
+ * lets it be saturated without competing with anything. It lives UNDER THE
+ * PRESET LIST, not in the detail pane, because a distribution is most useful
+ * exactly where you are choosing between presets. It follows the cursor, so
+ * moving between presets redraws it.
+ */
+export function AgentSpread({
+	config,
+	width,
+}: {
+	config: ModelsConfig;
+	width: number;
+}): React.ReactNode {
+	// One bar per WORKFLOW, not one bar for every agent that exists.
+	//
+	// Nobody runs all seventeen agents; they run `/dev:dev`, `/dev:debug` or
+	// `/dev:investigate`, and each reaches for a different handful. A single lump-sum bar
+	// answered a question nobody asks and hid the one they do: what does THIS command cost
+	// under THIS preset.
+	const label = Math.max(...WORKFLOWS.map((w) => w.name.length)) + 1;
+	const cells = Math.max(8, width - label);
+	// Where the right half starts, so the two words sit under the halves they name. Mirrors
+	// the split in `spendRuns`, which would drift if either recomputed it differently.
+	const leftCells = Math.floor((cells - 1) / 2);
+
+	return (
+		<box flexDirection="column" marginTop={1}>
+			<text fg={theme.colors.muted}>workflow</text>
+			{WORKFLOWS.map((workflow) => {
+				const segments = workflowDistribution(config, workflow.agents);
+				const runs = spendRuns(config, segments, cells);
+				return (
+					<text key={workflow.name} fg={theme.colors.text}>
+						<span fg={theme.colors.muted}>{padCell(workflow.name, label)}</span>
+						{runs.map((run) =>
+							run.kind === "track" ? (
+								<span key={run.id} fg={trackFill()}>
+									{"░".repeat(run.cells)}
+								</span>
+							) : (
+								<span key={run.id} fg={run.colour}>
+									{"█".repeat(run.cells)}
+								</span>
+							),
+						)}
+					</text>
+				);
+			})}
+			{/*
+			 * TWO WORDS, one per half — not a key.
+			 *
+			 * This line used to read `main opus · smart fable 5 · default sonnet 2 · cheap
+			 * fable 8`, which restated the tier table sitting three columns to the right,
+			 * wrapped to two lines at a normal pane width, and buried the one thing the bar
+			 * is for: this half is the thread, that half is everything it dispatches. The
+			 * colours already say which model a run is; the table says which model a tier is.
+			 */}
+			<text fg={theme.colors.muted}>
+				<span>{" ".repeat(label)}</span>
+				<span fg={modelBarFill(config.main.model)}>
+					{padCell("main", leftCells + 1)}
+				</span>
+				<span>subagents</span>
+			</text>
+		</box>
+	);
+}
+
+// ─── Status renderer ──────────────────────────────────────────────────────────
+
+/**
+ * Deliberately NOT an `ItemRenderer`.
+ *
+ * Its detail needs the drift lines and warnings, which the item does not carry —
+ * they belong to the project rather than to a row, and copying them onto the
+ * item is how the two would end up disagreeing. So the row reads the item and
+ * the detail reads the status, and neither pretends to be the other.
+ */
+function renderStatusRow(
+	item: ModelsStatusItem,
+	isSelected: boolean,
+): React.ReactNode {
+	const parts = [
+		item.preset,
+		item.driftCount > 0 ? `${item.driftCount} drift` : null,
+		item.warningCount > 0
+			? `${item.warningCount} warning${item.warningCount === 1 ? "" : "s"}`
+			: null,
+	].filter((part): part is string => part !== null);
+
+	return (
+		<ListCategoryRow
+			selected={isSelected}
+			title={`Model tiers: ${item.state}`}
+			badge={parts.length > 0 ? parts.join(" · ") : undefined}
+			tone={STATE_CATEGORY[item.state]}
+			// A section label, not a collapsible group — the cursor skips it, so a
+			// ▶ would advertise an interaction that is not there.
+			expandable={false}
+		/>
+	);
+}
+
+function renderStatusDetail(
+	status: ModelsStatus | null,
+	width?: number,
+): React.ReactNode {
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.accent}>
+				<strong>Model tiers</strong>
+			</text>
+			<box marginTop={1}>
+				<StateBlock status={status} width={width} />
+			</box>
+			<box marginTop={1}>
+				<Wrapped
+					width={width}
+					text="Tiers say how much model you are spending: smart is the strongest, and deliberately not the orchestrator's. Move down to a preset to see what runs where."
+				/>
+			</box>
+		</box>
+	);
+}
+
+// ─── Preset rows: ONE layout for the whole list ───────────────────────────────
+
+/** A preset row reduced to what the column maths needs. */
+function presetRowInput(item: ModelsPresetItem): PresetRowInput {
+	return {
+		label: item.label,
+		main: item.config.main.model,
+		smart: item.config.grades.smart.model,
+		markers: presetMarkerWidth(item.isDefault, item.custom),
+	};
+}
+
+/**
+ * The list's shared column layout, measured ONCE from every row.
+ *
+ * The screen computes this and hands the same object to every row. Rows used to
+ * fit themselves individually, and on a 120×30 terminal that meant the selected
+ * row dropped its `main` / `critical` labels while its three neighbours kept
+ * theirs — the same field labelled on some rows and not others, with nothing
+ * lining up down the column.
+ */
+export function fitPresetList(
+	items: ModelsBrowserItem[],
+	width: number,
+): PresetRowLayout {
+	const rows = items
+		.filter((item): item is ModelsPresetItem => item.kind === "preset")
+		.map(presetRowInput);
+	return fitPresetRows(rows, width);
+}
+
+/**
+ * The two models a row summarises, as spans for ONE `<text>`.
+ *
+ * Coloured text rather than two filled chips: a chip is a painted block, and
+ * two per row down a four-row list is two painted columns. The word already
+ * names the model; the hue only has to tie it to the bar below.
+ */
+function summarySpans(
+	config: ModelsConfig,
+	layout: PresetRowLayout,
+	selected: boolean,
+): React.ReactNode[] {
+	if (layout.detail === "none") return [];
+	const label = selected ? theme.selection.dim : theme.colors.muted;
+	const rule = selected ? theme.selection.dim : theme.colors.border;
+	const main = config.main.model;
+	const smart = config.grades.smart.model;
+
+	const parts: React.ReactNode[] = [
+		<span key="gap" fg={rule}>
+			{"  "}
+		</span>,
+	];
+	if (layout.detail === "labelled") {
+		parts.push(
+			<span key="main-label" fg={label}>
+				{"main "}
+			</span>,
+		);
+	}
+	parts.push(<ModelText key="main" model={main} selected={selected} />);
+	parts.push(
+		<span key="main-pad" fg={rule}>
+			{modelPad(main, layout.main)}
+		</span>,
+	);
+	// The narrowest rung that still says anything: one model, no separator to
+	// dangle after it.
+	if (layout.detail === "main") return parts;
+	parts.push(
+		<span key="sep" fg={rule}>
+			{" · "}
+		</span>,
+	);
+	if (layout.detail === "labelled" || layout.detail === "smart") {
+		parts.push(
+			<span key="critical-label" fg={label}>
+				{"smart "}
+			</span>,
+		);
+	}
+	parts.push(<ModelText key="smart" model={smart} selected={selected} />);
+	parts.push(
+		<span key="smart-pad" fg={rule}>
+			{modelPad(smart, layout.smart)}
+		</span>,
+	);
+	return parts;
+}
+
+// ─── Preset renderer ──────────────────────────────────────────────────────────
+
+/**
+ * One preset row, drawn against the layout the whole list shares.
+ *
+ * Deliberately NOT an `ItemRenderer.renderRow`: that signature takes a width
+ * and nothing else, so a renderer wearing it can only fit itself — which is
+ * precisely the defect this row was reported for. The layout is an argument.
+ */
+function renderPresetRow(
+	item: ModelsPresetItem,
+	isSelected: boolean,
+	layout: PresetRowLayout,
+): React.ReactNode {
+	// A NAME and its markers, nothing else.
+	//
+	// The row used to carry `[●]` plus `opus · smart fable` — a checkbox and a two-model
+	// summary of what the detail pane is already showing in full, three lines to the right.
+	// Repeating it made the list the same width as the detail and twice as busy, and the
+	// checkbox competed with the cursor for "which one is this". The cursor marks where you
+	// are; `●` marks what is running; the detail says what it does.
+	return (
+		<SelectableRow selected={isSelected} indent={1}>
+			<span
+				fg={isSelected ? theme.selection.fg : theme.colors.success}
+			>{`${item.active ? "●" : " "} `}</span>
+			<span fg={isSelected ? theme.selection.fg : theme.colors.text}>
+				{padCell(item.label, layout.name)}
+			</span>
+			{item.isDefault ? (
+				<MetaText text={PRESET_MARKERS.default} selected={isSelected} />
+			) : null}
+			{item.custom ? (
+				<MetaText
+					text={PRESET_MARKERS.custom}
+					tone="warning"
+					selected={isSelected}
+				/>
+			) : null}
+		</SelectableRow>
+	);
+}
+
+function renderPresetDetail(
+	item: ModelsPresetItem,
+	width?: number,
+): React.ReactNode {
+	const { config } = item;
+	const modelColumn = specModelColumn(config);
+	const barWidth = Math.max(8, width ?? 48);
+
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.accent}>
+				<strong>{item.label}</strong>
+			</text>
+
+			{/*
+			 * `Active` / `Default` / `Source` used to be three key-value lines here, and they
+			 * are gone. Every one of them is already answered a few characters to the left:
+			 * the active preset carries `●` in the list, the default carries `(default)`, and
+			 * a hand-edited config carries its own marker. Restating them as sentences pushed
+			 * the tier table — the thing you opened this pane to read — below the fold.
+			 *
+			 * `item.custom` keeps its warning, because THAT one is not on the row: it changes
+			 * what applying does.
+			 */}
+			{item.custom ? (
+				<box marginTop={1}>
+					<Wrapped
+						width={width}
+						tone={theme.colors.warning}
+						text="This project's own config, not a built-in — applying re-writes the settings it implies."
+					/>
+				</box>
+			) : null}
+
+			<DetailSection title="Models">
+				<box flexDirection="column">
+					<text fg={theme.colors.muted}>
+						{`${padCell("tier", SPEC_LABEL_WIDTH)}${padCell("model", modelColumn + 4)}effort`}
+					</text>
+					<SpecRow
+						label="main"
+						model={config.main.model}
+						effort={config.main.effort}
+						modelColumn={modelColumn}
+						highlight
+					/>
+					{GRADES.map((grade) => (
+						<SpecRow
+							key={grade}
+							label={grade}
+							model={config.grades[grade].model}
+							effort={config.grades[grade].effort}
+							modelColumn={modelColumn}
+							highlight={grade === config.fallback}
+						/>
+					))}
+				</box>
+			</DetailSection>
+
+			<DetailSection title="Agents">
+				<box flexDirection="column">
+					<AgentTable config={config} width={barWidth} />
+					<box marginTop={1}>
+						<Wrapped
+							width={width}
+							text={`Anything unlisted runs at ${config.fallback}, including agents claudeup has never seen.`}
+						/>
+					</box>
+				</box>
+			</DetailSection>
+		</box>
+	);
+}
+
+// ─── The list panel's own footer ──────────────────────────────────────────────
+
+/**
+ * A path shortened from the LEFT, keeping the tail.
+ *
+ * `.claude/models.json` is the part that identifies the file; the machine's home
+ * directory in front of it is the part nobody reads. Truncating from the right
+ * would keep exactly the wrong half.
+ */
+export function shortConfigPath(
+	configPath: string,
+	projectPath: string,
+	max: number,
+): string {
+	const base = projectPath.endsWith("/") ? projectPath : `${projectPath}/`;
+	const relative = configPath.startsWith(base)
+		? configPath.slice(base.length)
+		: configPath;
+	if (relative.length <= max) return relative;
+	return `…${relative.slice(relative.length - Math.max(1, max - 1))}`;
+}
+
+/**
+ * The key to every colour on this screen: one model name, in its own hue.
+ *
+ * The bar is coloured by MODEL and labelled by GRADE, so without this row the
+ * hues have no key — a reader can see that two runs differ and not what they
+ * differ into. Names are dropped from the right when the panel is too narrow,
+ * because a key that overflows its panel is worse than a shorter key.
+ *
+ * These were filled chips. A chip here would be the only chip left on the
+ * screen and would teach a vocabulary nothing else uses — every model
+ * everywhere else is now its name in its colour, so the key is too.
+ */
+function ModelKey({
+	presets,
+	width,
+}: {
+	presets: ModelsPresetItem[];
+	width: number;
+}): React.ReactNode {
+	const label = "models  ";
+	const models = modelsInUse(presets.map((preset) => preset.config));
+	const shown: string[] = [];
+	let used = label.length;
+	for (const model of models) {
+		// A badge costs its name plus its own two padding cells, plus one separating
+		// space. Measured with `modelBadgeWidth` rather than `modelWidth` so the row
+		// cannot overflow by exactly the padding the chips draw.
+		const cost = modelBadgeWidth(model) + (shown.length > 0 ? 1 : 0);
+		if (used + cost > width) break;
+		shown.push(model);
+		used += cost;
+	}
+	if (shown.length === 0) return null;
+
+	const parts: React.ReactNode[] = [
+		<span key="label" fg={theme.colors.muted}>
+			{label}
+		</span>,
+	];
+	shown.forEach((model, index) => {
+		// No `·` between chips: a fill already separates them, and a separator
+		// between two blocks reads as a third thing.
+		if (index > 0) parts.push(<span key={`gap:${model}`}> </span>);
+		parts.push(<ModelBadge key={model} model={model} />);
+	});
+	return <text fg={theme.colors.text}>{parts}</text>;
+}
+
+/** Which blocks of the list-panel summary fit, and how many rows they cost. */
+export interface SummaryPlan {
+	spread: boolean;
+	key: boolean;
+	facts: boolean;
+	rows: number;
+}
+
+/** Rows each block costs, its own leading blank line included. */
+const SUMMARY_COST = { rule: 1, spread: 4, key: 2, facts: 3 } as const;
+
+/**
+ * Decide what the panel has room for, most valuable first.
+ *
+ * NOT cosmetic trimming. MEASURED at 80×24 before this existed: the blocks
+ * asked for about 17 rows in the 12 the list had left, and Yoga answered by
+ * SHRINKING them — two preset names composited into one, `off` printed on top
+ * of `—`, and two blocks vanished. An over-tall panel does not scroll and does
+ * not clip, it overprints.
+ *
+ * Drop order is by value: the distribution and the project's own facts are what
+ * a short terminal keeps, the colour key is what a tall one adds.
+ *
+ * There used to be a fourth block here — one bar per preset, stacked, so the
+ * presets could be compared. MEASURED on a dark 120×30 terminal it rendered as
+ * a purple bar, then ONE teal rectangle spanning the two presets that share a
+ * colour, then grey: three blocks where four comparisons were meant, because
+ * adjacent same-coloured bars had nothing between them. It was noise, and the
+ * rows it cost are rows the list now keeps.
+ */
+export function planModelsSummary(
+	available: number,
+	hasConfigPath: boolean,
+): SummaryPlan {
+	const plan: SummaryPlan = {
+		spread: false,
+		key: false,
+		facts: false,
+		rows: 0,
+	};
+	// The leading blank line plus the rule: the block cannot exist for less.
+	const base = 1 + SUMMARY_COST.rule;
+	if (available < base) return plan;
+	plan.rows = base;
+
+	const factsCost = SUMMARY_COST.facts + (hasConfigPath ? 1 : 0);
+
+	// A strict cascade, not a greedy fill: once something does not fit, nothing
+	// below it is considered either. Otherwise a cheap block slips in past an
+	// expensive one and the panel shows the colour key for a bar it did not draw.
+	let stopped = false;
+	const take = (cost: number, enabled: boolean) => {
+		if (stopped) return false;
+		if (!enabled || cost === 0) return false;
+		if (plan.rows + cost > available) {
+			stopped = true;
+			return false;
+		}
+		plan.rows += cost;
+		return true;
+	};
+
+	plan.spread = take(SUMMARY_COST.spread, true);
+	plan.facts = take(factsCost, true);
+	plan.key = take(SUMMARY_COST.key, true);
+	return plan;
+}
+
+/**
+ * What sits under the preset list: the selected preset's spread, the colour key,
+ * then the project's routing facts.
+ *
+ * The panel held four rows of text and roughly thirty-five unpainted ones at
+ * 145×45, and the screen's one graphic was buried at the bottom of a detail
+ * pane nobody had scrolled to. This is that widget, moved to where the choice is
+ * being made.
+ *
+ * `available` is rows, and it is not advisory — see `planModelsSummary`.
+ */
+export function renderModelsSummary({
+	items,
+	selected,
+	status,
+	configPath,
+	width,
+	available,
+}: {
+	items: ModelsBrowserItem[];
+	selected: ModelsBrowserItem | undefined;
+	status: ModelsStatus | null;
+	configPath: string | null;
+	width: number;
+	/** Rows left under the list. Blocks are dropped until the block fits. */
+	available: number;
+}): React.ReactNode {
+	if (!status) return null;
+	const preset = selected?.kind === "preset" ? selected : undefined;
+	const presets = items.filter(
+		(item): item is ModelsPresetItem => item.kind === "preset",
+	);
+	const plan = planModelsSummary(available, Boolean(configPath));
+	if (plan.rows === 0) return null;
+
+	// One column of indent, so this block's left edge lines up with the rows
+	// above it — every list row carries `indent={1}`.
+	const inner = Math.max(8, width - 1);
+
+	return (
+		<box flexDirection="column" marginTop={1} paddingLeft={1} flexShrink={0}>
+			<text fg={theme.colors.border}>{"─".repeat(inner)}</text>
+			{plan.spread && preset ? (
+				<AgentSpread config={preset.config} width={inner} />
+			) : null}
+			{plan.key ? (
+				<box marginTop={1}>
+					<ModelKey presets={presets} width={inner} />
+				</box>
+			) : null}
+			{/*
+			 * The `state / preset / config` block that used to sit here is GONE.
+			 *
+			 * All three were already on screen: the state is a chip in the panel header AND in
+			 * the title bar, the preset is the row the cursor is on, and the path is a detail
+			 * nobody acts on from a list. Restating them under the chart made the column read
+			 * as a form to fill in rather than a summary of what is running.
+			 *
+			 * `plan.facts` still exists in the layout plan: it is the rung that decides whether
+			 * the chart and the key fit at all, and deleting it would change the fitting maths
+			 * rather than only what is drawn.
+			 */}
+		</box>
+	);
+}
+
+// ─── Dispatch ─────────────────────────────────────────────────────────────────
+
+/**
+ * A row, drawn against the layout the WHOLE list shares.
+ *
+ * `layout` is not optional and is not derived here on purpose: deriving it
+ * per-row is exactly how four presets ended up in two different formats.
+ */
+export function renderModelRow(
+	item: ModelsBrowserItem,
+	_index: number,
+	isSelected: boolean,
+	layout: PresetRowLayout,
+): React.ReactNode {
+	if (item.kind === "status") {
+		return renderStatusRow(item, isSelected);
+	}
+	return renderPresetRow(item, isSelected, layout);
+}
+
+/**
+ * The detail pane.
+ *
+ * `status` is passed alongside the item rather than copied onto it: the drift
+ * lines belong to the project, not to whichever preset the cursor is on, and
+ * duplicating them per row is how the two would end up disagreeing.
+ */
+export function renderModelDetail(
+	item: ModelsBrowserItem | undefined,
+	status: ModelsStatus | null,
+	width?: number,
+): React.ReactNode {
+	if (!item) {
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.muted}>No preset selected.</text>
+			</box>
+		);
+	}
+	if (item.kind === "status") {
+		return renderStatusDetail(status, width);
+	}
+	// The state block only when there is something to DO about it.
+	//
+	// `on` and `off` are already stated twice — in the title bar and on the list's own
+	// header row — so repeating "on / every Agent call is routed through this config"
+	// above every preset spent four rows restating the obvious and pushed the tier table
+	// down. `stale`, `invalid` and `unhooked` stay, because each one carries lines the
+	// reader has seen nowhere else and a fix to press.
+	const needsAttention =
+		status !== null && status.state !== "on" && status.state !== "off";
+	return (
+		<box flexDirection="column">
+			{needsAttention ? (
+				<box marginBottom={1}>
+					<StateBlock status={status} width={width} />
+				</box>
+			) : null}
+			{renderPresetDetail(item, width)}
+		</box>
+	);
+}