claudeup 6.7.1 → 6.8.1

package/src/ui/renderers/modelRenderers.tsx

@@ -1,11 +1,21 @@
 import type React from "react";
 import { WORKFLOWS } from "../../data/models-presets.js";
+import {
+	type CatalogModel,
+	stalenessNote,
+	unknownBindings,
+} from "../../services/mate-catalog.js";
 import {
 	type Effort,
 	GRADES,
+	MATES,
 	type ModelsConfig,
 	type ModelsState,
 	type ModelsStatus,
+	boundModel,
+	mateEffort,
+	matesInUse,
+	modelLabel,
 } from "../../services/models-core.js";
 import type {
 	ModelsBrowserItem,
@@ -24,6 +34,7 @@ import { type UiColor, theme } from "../theme.js";
 import {
 	type AgentRow,
 	type AgentTableLayout,
+	BarRow,
 	EffortGlyph,
 	ModelBadge,
 	ModelText,
@@ -34,18 +45,17 @@ import {
 	agentDistribution,
 	agentRows,
 	agentTableHeaders,
+	barSegments,
+	clipCell,
 	effortLabel,
 	effortWord,
 	fitAgentTable,
+	fitModelKey,
 	fitPresetRows,
-	modelBadgeWidth,
-	modelBarFill,
 	modelPad,
 	modelWidth,
-	modelsInUse,
 	padCell,
 	presetMarkerWidth,
-	spendRuns,
 	workflowDistribution,
 } from "./modelVisuals.js";
 import { wrapText } from "./styleRenderers.js";
@@ -64,7 +74,6 @@ import { wrapText } from "./styleRenderers.js";
 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",
 };
@@ -72,7 +81,6 @@ const STATE_HEADLINE: Record<ModelsState, string> = {
 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,
 };
@@ -82,7 +90,6 @@ const STATE_CATEGORY: Record<ModelsState, "gray" | "green" | "yellow" | "red"> =
 	{
 		off: "gray",
 		on: "green",
-		stale: "yellow",
 		invalid: "red",
 		unhooked: "red",
 	};
@@ -101,7 +108,6 @@ const MAX_DRIFT_LINES = 6;
 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.",
@@ -254,11 +260,29 @@ 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.
+ *
+ * `withMates` is not a detail: measuring without the mate rows while DRAWING them leaves
+ * `modelPad` returning an empty string for those rows and the whole effort column jumps left
+ * on them. The flag is the same boolean that decides whether the rows are drawn at all,
+ * passed in rather than re-derived, because the two answers have to be the same answer.
+ *
+ * Measured from what each row WRITES, via `modelLabel`. It used to measure `MATES` themselves
+ * on the reasoning that `kangaroo` (8) was the widest thing the column could hold. A bound
+ * slot writes its catalogue id instead — up to 21 cells — so measuring the slot names now
+ * under-counts by more than the column is wide. An unbound slot writes `unset` (5).
  */
-function specModelColumn(config: ModelsConfig): number {
+export function specModelColumn(
+	config: ModelsConfig,
+	withMates: boolean,
+): number {
 	return Math.max(
 		modelWidth(config.main.model),
-		...GRADES.map((grade) => modelWidth(config.grades[grade].model)),
+		...GRADES.map((grade) =>
+			modelWidth(modelLabel(config, config.grades[grade].model)),
+		),
+		...(withMates
+			? MATES.map((mate) => modelWidth(modelLabel(config, mate)))
+			: []),
 	);
 }
 
@@ -273,32 +297,47 @@ function specModelColumn(config: ModelsConfig): number {
 function SpecRow({
 	label,
 	model,
+	modelText,
 	effort,
 	modelColumn,
 	highlight,
 }: {
 	label: string;
+	/** The routing value — decides the chip's INK. For a mate this is the slot. */
 	model: string;
+	/** What the chip WRITES. Defaults to `model`; a bound mate passes its catalogue id. */
+	modelText?: string;
 	effort: Effort | undefined;
 	modelColumn: number;
 	/** The grade an unassigned agent falls to — worth reading first. */
 	highlight?: boolean;
 }): React.ReactNode {
+	const text = modelText ?? model;
+	// The word takes the effort ramp whenever there is a level to name, a mate's included:
+	// claudish applies an external model's effort per run, so it is as live as a Claude
+	// subagent's. Only the absent case is muted, and it names a fallback rather than a level.
+	const live = effort !== undefined;
 	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} />
+			    seventeen read as a solid column, which is what this screen was reported for.
+			    The chip's ink is the SLOT's and its text is the bound model: the slot is the
+			    stable identity, the binding is what changes. */}
+			<ModelBadge model={model} label={text} />
+			<span fg={theme.colors.border}>{`${modelPad(text, modelColumn)}  `}</span>
+			<EffortGlyph effort={effort} />
+			{/* `model` reaches `effortWord` so a mate row says `via claudish` (unbound effort)
+			    or `high (declared)` where a Claude model would say `inherits session`. Nothing
+			    of the session reaches an external model, so the second sentence would simply
+			    be untrue on those rows. */}
 			<span
-				fg={effort ? (effortInk(effort) as UiColor) : theme.colors.muted}
-			>{` ${effortWord(effort)}`}</span>
+				fg={
+					live ? (effortInk(effort as string) as UiColor) : theme.colors.muted
+				}
+			>{` ${effortWord(effort, model)}`}</span>
 		</text>
 	);
 }
@@ -360,7 +399,18 @@ function AgentTableRow({
 	row: AgentRow;
 	layout: AgentTableLayout;
 }): React.ReactNode {
-	const label = effortLabel(row.effort, layout.effort);
+	// `row.model` goes in so a mate row reads `— via claudish` rather than the
+	// `— inherits session` a Claude model with no effort gets. The two say opposite things:
+	// one inherits the session's effort, the other never sees the session at all.
+	const label = effortLabel(row.effort, layout.effort, row.model);
+	// Truncated HERE as well as fitted in `fitAgentTable`, because the two do different jobs:
+	// the fit decides how wide the column is, this decides what fits in it. The model cell is
+	// drawn as coloured text plus a separate pad span, so it cannot use `padCell` — and
+	// without a clip a 21-cell binding would simply overrun the column the fit just sized.
+	const modelText = clipCell(row.label, layout.model);
+	// Muted only when there is no level to name. Same rule as `SpecRow`, so the tier table
+	// and the agent table cannot end up grading the same effort differently.
+	const live = row.effort !== undefined;
 	return (
 		<text fg={theme.colors.text}>
 			<span fg={row.inherit ? theme.colors.dim : theme.colors.text}>
@@ -374,25 +424,35 @@ function AgentTableRow({
 			{row.inherit ? (
 				<span fg={theme.colors.dim}>{padCell(NONE_CELL, layout.model)}</span>
 			) : (
-				<ModelText model={row.model} />
+				<ModelText model={row.model} label={modelText} />
 			)}
 			{row.inherit ? null : (
 				<span fg={theme.colors.border}>
-					{modelPad(row.model, layout.model)}
+					{modelPad(modelText, 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} />
+				<EffortGlyph effort={row.effort} />
 			)}
 			{/* 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. */}
+			    reading with its value spelt out.
+
+			    With NO effort there are no lit dots to match, so the word takes the muted ink
+			    the dash already uses — which is what `SpecRow` does in the tier table above.
+			    It used to fall back to `effortInk("low")`, painting `inherits session` (and
+			    now `via claudish`) in the colour that means the lowest effort level: a value
+			    where an absence belongs. */}
 			{!row.inherit && label ? (
 				<span
-					fg={effortInk(row.effort ?? "low") as UiColor}
+					fg={
+						live
+							? (effortInk(row.effort as string) as UiColor)
+							: theme.colors.muted
+					}
 				>{` ${label}`}</span>
 			) : null}
 		</text>
@@ -400,7 +460,47 @@ function AgentTableRow({
 }
 
 /**
- * How the routed agents are spread, as one bar and a legend.
+ * What labels the second row of a workflow's pair.
+ *
+ * NOT indented. It used to be `"  subagents"`, two cells in from the workflow name above it,
+ * on the reasoning that an indent says "these belong to that". Reported off a real screen:
+ * "on left dev and subagents wrongly aligned" — with six labels stacked down the panel, two
+ * different starting columns read as raggedness long before they read as hierarchy.
+ *
+ * The grouping is now said by the blank line BETWEEN workflows instead, which is a stronger
+ * signal and costs the labels nothing.
+ */
+export const SUBAGENT_ROW_LABEL = "subagents";
+
+/** Rows one workflow costs: its main thread, then everything it dispatches. */
+export const WORKFLOW_ROWS = 2;
+
+/** The blank row before every workflow except the first. See `AgentSpread`. */
+export const WORKFLOW_GAP_ROWS = 1;
+
+/**
+ * The label gutter, shared by both rows of every pair, and LEFT-aligned within it.
+ *
+ * Left rather than right: right-aligning would square the labels up against the bars and
+ * leave the outer edge ragged, and the outer edge is the one the eye runs down when it is
+ * scanning six labels for the workflow it wants. One straight left edge, one straight bar
+ * edge — the ragged part lands in the middle, where nothing is being compared.
+ *
+ * Derived from the longest label actually DRAWN, never a constant: `investigate` (11) is the
+ * longest today and `subagents` (9) is in the running, and a hardcoded 11 would silently
+ * clip the first workflow anyone adds with a longer name. The `+ 1` is the gap before the
+ * bar starts.
+ *
+ * Exported because a test measuring the bar has to start counting at the same column the
+ * renderer stops writing at, and a second copy of this expression is a test that keeps
+ * passing while the picture drifts.
+ */
+export const SPREAD_LABEL_CELLS =
+	Math.max(SUBAGENT_ROW_LABEL.length, ...WORKFLOWS.map((w) => w.name.length)) +
+	1;
+
+/**
+ * How the routed agents are spread, two rows per workflow.
  *
  * 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
@@ -408,6 +508,29 @@ function AgentTableRow({
  * 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.
+ *
+ * ## Why the halves are gone
+ *
+ * One bar per workflow used to be split down the middle: `main` on the left, everything it
+ * dispatches crammed into the right. The shape was honest about the trade — the orchestrator
+ * against the work it hands out — and dishonest about the second half, which had to hold
+ * four or five segments in half a pane. At the widths this panel actually gets, the third
+ * and fourth subagent tiers were a cell or two each and nothing could be labelled.
+ *
+ * So the trade is now a PAIR OF ROWS, each across the full width. The main thread's row is
+ * one segment and reads instantly; the subagent row gets twice the cells it had, which is
+ * what makes an inline label possible at all. The caption that used to name the two halves
+ * is gone with them — `SUBAGENT_ROW_LABEL` says which row is which, on the row itself,
+ * where a caption under a chart never could.
+ *
+ * ## The blank line between workflows is what makes the pairs pairs
+ *
+ * Six adjacent rows is one block of six, not three blocks of two: `dev`'s subagent row and
+ * `debug`'s main row touched, so the pairing had to be worked out from the labels rather
+ * than seen. A blank row goes BETWEEN groups and never inside one — the two rows of a
+ * workflow stay adjacent precisely because their adjacency is the thing that says they
+ * belong together. None after the last group either: a trailing gap is a row spent
+ * separating the chart from nothing.
  */
 export function AgentSpread({
 	config,
@@ -416,57 +539,77 @@ export function AgentSpread({
 	config: ModelsConfig;
 	width: number;
 }): React.ReactNode {
-	// One bar per WORKFLOW, not one bar for every agent that exists.
+	// One pair of bars 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);
+	const label = SPREAD_LABEL_CELLS;
 
 	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>
-				);
-			})}
+		<box flexDirection="column" marginTop={1} width={width}>
 			{/*
-			 * TWO WORDS, one per half — not a key.
+			 * The header is the WORD `workflow` and nothing else.
+			 *
+			 * It used to carry `▓ external model, via claudish` right-aligned beside it, and
+			 * that sentence was on screen three times at once: here, in the detail pane's own
+			 * paragraph about mates, and — in colour — as the key's chips under the chart.
+			 * Reported directly: "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".
 			 *
-			 * 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.
+			 * The weave stays; it is now explained by the `mates` chips in the key below,
+			 * which name the slots AND their bound models rather than restating the category.
+			 *
+			 * It cost no row — the note was right-aligned INSIDE this height-1 header — so
+			 * `SUMMARY_COST.spread` and `planModelsSummary` are untouched by its removal.
 			 */}
-			<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 flexDirection="row" width={width} height={1}>
+				<text fg={theme.colors.muted}>workflow</text>
+			</box>
+			{WORKFLOWS.map((workflow, index) => (
+				<box
+					key={workflow.name}
+					flexDirection="column"
+					width={width}
+					// The separator, and it belongs to the group BELOW it rather than above:
+					// hung off the first group instead, the last one would carry a trailing
+					// blank row that separates the chart from nothing.
+					marginTop={index > 0 ? WORKFLOW_GAP_ROWS : 0}
+				>
+					<box flexDirection="row" width={width} height={1}>
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{padCell(workflow.name, label)}
+						</text>
+						{/* The main thread is one segment across the full width — a share of one,
+						    because a row with a single segment has nothing to be a share OF. */}
+						<BarRow
+							segments={[{ id: "main", model: config.main.model, share: 1 }]}
+						/>
+					</box>
+					<box flexDirection="row" width={width} height={1}>
+						<text fg={theme.colors.muted} flexShrink={0}>
+							{padCell(SUBAGENT_ROW_LABEL, label)}
+						</text>
+						{/* `barSegments` is what folds every mate-routed agent into ONE run —
+						    the bar answers how much of this workflow leaves Claude Code, and
+						    that is one number however many slots it is spread across. The
+						    slots come back, with their bindings, in the key below. */}
+						{/* The external phases come from the WORKFLOW, not the config, so the run
+						    is drawn under every preset — a workflow calls out because its
+						    command says so, not because of the routing applied to it. */}
+						<BarRow
+							segments={barSegments(
+								workflowDistribution(
+									config,
+									workflow.agents,
+									workflow.external.length,
+								),
+							)}
+						/>
+					</box>
+				</box>
+			))}
 		</box>
 	);
 }
@@ -485,9 +628,16 @@ function renderStatusRow(
 	item: ModelsStatusItem,
 	isSelected: boolean,
 ): React.ReactNode {
+	// NEITHER the file's `preset` string NOR a drift count.
+	//
+	// The string records what was last applied, so a config edited afterwards shows a
+	// built-in's name while not being that built-in — which is why the row for a diverged
+	// config is called `Custom` and reads nothing from the file.
+	//
+	// The drift count was a count of MESSAGES, not of differences, and one of those messages
+	// is "settings carry none of the config". `1 drift` therefore read as one small thing
+	// while meaning nothing is in force — a number that misleads is worse than no number.
 	const parts = [
-		item.preset,
-		item.driftCount > 0 ? `${item.driftCount} drift` : null,
 		item.warningCount > 0
 			? `${item.warningCount} warning${item.warningCount === 1 ? "" : "s"}`
 			: null,
@@ -535,8 +685,11 @@ function presetRowInput(item: ModelsPresetItem): PresetRowInput {
 	return {
 		label: item.label,
 		main: item.config.main.model,
+		// Both halves of a mate's identity: the slot colours the text, the bound id IS the
+		// text. Passing only the slot is what printed a role where a model belonged.
 		smart: item.config.grades.smart.model,
-		markers: presetMarkerWidth(item.isDefault, item.custom),
+		smartLabel: modelLabel(item.config, item.config.grades.smart.model),
+		markers: presetMarkerWidth(item.isDefault),
 	};
 }
 
@@ -576,6 +729,10 @@ function summarySpans(
 	const rule = selected ? theme.selection.dim : theme.colors.border;
 	const main = config.main.model;
 	const smart = config.grades.smart.model;
+	// Clipped to the column `fitPresetRows` capped, with the `…` that marks the cut. The cap
+	// is what stops one long binding dragging the whole list down a rung; the clip is what
+	// makes that cap honest rather than an overrun.
+	const smartText = clipCell(modelLabel(config, smart), layout.smart);
 
 	const parts: React.ReactNode[] = [
 		<span key="gap" fg={rule}>
@@ -610,10 +767,17 @@ function summarySpans(
 			</span>,
 		);
 	}
-	parts.push(<ModelText key="smart" model={smart} selected={selected} />);
+	parts.push(
+		<ModelText
+			key="smart"
+			model={smart}
+			label={smartText}
+			selected={selected}
+		/>,
+	);
 	parts.push(
 		<span key="smart-pad" fg={rule}>
-			{modelPad(smart, layout.smart)}
+			{modelPad(smartText, layout.smart)}
 		</span>,
 	);
 	return parts;
@@ -651,25 +815,36 @@ function renderPresetRow(
 			{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,
+	width: number | undefined,
+	/** Is `multimodel@magus` installed — i.e. is there anything to serve a mate? */
+	matesAvailable: boolean,
+	/** The live catalogue, or [] when it could not be read. ADVISORY ONLY. */
+	catalog: CatalogModel[],
 ): React.ReactNode {
 	const { config } = item;
-	const modelColumn = specModelColumn(config);
+	const modelColumn = specModelColumn(config, matesAvailable);
 	const barWidth = Math.max(8, width ?? 48);
 
+	// Slots that carry an effort. Named rather than counted, so the caveat below says WHICH
+	// rows it is about — with three slots on screen, "one of these is not applied" would
+	// leave the reader checking all three.
+	const declaredEfforts = MATES.filter(
+		(mate) => mateEffort(config, mate) !== undefined,
+	);
+	// Only the bindings this config actually ROUTES to. A slot bound in the `mates` block but
+	// assigned to no agent is dead weight, and warning that a model nothing uses may have
+	// been retired is noise about a decision with no consequences.
+	const bound = matesInUse(config)
+		.map((mate) => boundModel(config, mate))
+		.filter((id): id is string => id !== null);
+	const staleNote = stalenessNote(unknownBindings(bound, catalog));
+
 	return (
 		<box flexDirection="column">
 			<text fg={theme.colors.accent}>
@@ -713,12 +888,76 @@ function renderPresetDetail(
 							key={grade}
 							label={grade}
 							model={config.grades[grade].model}
+							// A grade routed to a bound mate writes the model, not the slot.
+							modelText={modelLabel(config, config.grades[grade].model)}
 							effort={config.grades[grade].effort}
 							modelColumn={modelColumn}
 							highlight={grade === config.fallback}
 						/>
 					))}
+					{/*
+					 * The mate slots, drawn only when `multimodel@magus` is installed.
+					 *
+					 * The tier column is the SLOT and the model column is what it is BOUND
+					 * to. Both columns used to carry the same word — the row read
+					 * `mate1  mate1  —` — because a slot was all a config could name. A slot
+					 * is a role; the `mates` block says which model plays it, and that model
+					 * is what belongs under `model`.
+					 *
+					 * An unbound slot writes `unset`, not a blank and not its own name: the
+					 * author decided to route here and has not yet said where, which is a
+					 * different state from the `—` that means nothing was decided at all.
+					 *
+					 * Without the plugin there is nothing to serve these calls, so drawing
+					 * three rows of routing that cannot happen would be an advertisement
+					 * rather than a status.
+					 */}
+					{matesAvailable
+						? MATES.map((mate) => (
+								<SpecRow
+									key={mate}
+									label={mate}
+									model={mate}
+									modelText={modelLabel(config, mate)}
+									effort={mateEffort(config, mate)}
+									modelColumn={modelColumn}
+								/>
+							))
+						: null}
 				</box>
+				{matesAvailable ? (
+					<box flexDirection="column" marginTop={1}>
+						<Wrapped
+							width={width}
+							text="A mate is an external model reached through claudish. Bind one in the `mates` block of .claude/models.json, then assign the slot to an agent — claudeup leaves those calls alone, so claudish decides how they run."
+						/>
+						{/* Where a mate's effort comes from, in the order it is resolved. The
+						    two rules are one sentence because they are one lookup: the slot
+						    answers if it can, the preset answers for the rest. */}
+						<box marginTop={1}>
+							<Wrapped
+								width={width}
+								tone={theme.colors.muted}
+								text="A mate runs at the effort its slot names, or the preset's if it names none. claudish applies it per run, clamped to what the model supports."
+							/>
+						</box>
+						{/*
+						 * The staleness advisory. Absent when the catalogue could not be read
+						 * — `unknownBindings` returns nothing on an empty catalogue, so a
+						 * machine with no claudish sees the pane exactly as before rather
+						 * than every binding flagged as retired.
+						 */}
+						{staleNote ? (
+							<box marginTop={1}>
+								<Wrapped
+									width={width}
+									tone={theme.colors.warning}
+									text={staleNote}
+								/>
+							</box>
+						) : null}
+					</box>
+				) : null}
 			</DetailSection>
 
 			<DetailSection title="Agents">
@@ -769,39 +1008,66 @@ export function shortConfigPath(
  * 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.
+ *
+ * ## It describes the BAR, and only the bar
+ *
+ * This used to be built from `presets.map((preset) => preset.config)` — every selectable row
+ * in the list — while `AgentSpread` above it drew the SELECTED config alone. The two
+ * disagreed exactly when it mattered: a project config binding `dev:qa-engineer` to
+ * `mate1` put `mate1` in the key, the cursor sat on a built-in preset that has no mate, and
+ * the bar could not contain that colour at any width. Reported as "the mate is missing from
+ * the bar", which it was not — the key was naming a colour from a config nobody was looking
+ * at, and sent a reader hunting for a segment that was never going to be there.
+ *
+ * `modelsInUse` still takes an array, because it answers a genuine question about a set of
+ * configs and other callers may want it. `fitModelKey` passes exactly one: the config the
+ * graphic above is drawing.
+ *
+ * ## The mates are named here, and painted in ONE tone
+ *
+ * The bar collapses every mate-routed agent into a single `mates` run, so the slots have to
+ * be recoverable somewhere — and this row is the only part of the screen with room for a
+ * 21-character catalogue id. Each slot in use gets a chip reading `mate1 grok-4.6`.
+ *
+ * All of them wear the FAMILY ink, not their own. The key decodes the chart, the chart has
+ * one mate colour, and a legend showing ochre for `mate1` would name a tone that appears at
+ * no width in the graphic above it — which is this comment's own bug, one level down.
  */
 function ModelKey({
-	presets,
+	config,
 	width,
 }: {
-	presets: ModelsPresetItem[];
+	config: ModelsConfig;
 	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;
+	// A SLOT IS WRITTEN WITH ITS BOUND MODEL here — `mate1 grok-4.6` — and that is the other
+	// half of collapsing the bar's mates into one run. The bar gave up which slot; this is
+	// where it comes back, in the one place on the screen wide enough for a catalogue id.
+	// The fitting, the three rungs and the reason it must not wrap live in `fitModelKey`.
+	// `WORKFLOWS` decides half of it: a preset that binds no slot still draws a mates run for
+	// every workflow with external phases, and a run with no chip under it is a texture the
+	// reader cannot decode.
+	const chips = fitModelKey(
+		config,
+		width,
+		label.length,
+		WORKFLOWS.some((workflow) => workflow.external.length > 0),
+	);
+	if (chips.length === 0) return null;
 
 	const parts: React.ReactNode[] = [
 		<span key="label" fg={theme.colors.muted}>
 			{label}
 		</span>,
 	];
-	shown.forEach((model, index) => {
+	chips.forEach((chip, 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} />);
+		if (index > 0) parts.push(<span key={`gap:${chip.text}`}> </span>);
+		parts.push(
+			<ModelBadge key={chip.text} model={chip.ink} label={chip.text} />,
+		);
 	});
 	return <text fg={theme.colors.text}>{parts}</text>;
 }
@@ -814,8 +1080,31 @@ export interface SummaryPlan {
 	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;
+/**
+ * Rows each block costs, its own leading blank line included.
+ *
+ * The spread's cost is DERIVED, not a number typed here. It was `4` while the block drew a
+ * header, one bar per workflow and a caption — six rows including its margin — so the plan
+ * was already two rows short of what it drew, and every workflow added would have widened
+ * the gap silently. It is now the margin, the header, two rows per workflow, and one blank
+ * row between each pair of workflows — all counted from `WORKFLOWS` so the two cannot drift
+ * apart again.
+ *
+ * The separators make the chart two rows taller, and that is not free: at eleven rows — what
+ * an 80×24 terminal leaves under the list — the chart no longer fits and the panel draws
+ * nothing at all. That is the honest reading of the budget rather than a rounding to be
+ * softened: an over-tall block in a fixed-height box overprints, it does not clip.
+ */
+const SUMMARY_COST = {
+	rule: 1,
+	spread:
+		1 +
+		1 +
+		WORKFLOWS.length * WORKFLOW_ROWS +
+		Math.max(0, WORKFLOWS.length - 1) * WORKFLOW_GAP_ROWS,
+	key: 2,
+	facts: 3,
+} as const;
 
 /**
  * Decide what the panel has room for, most valuable first.
@@ -884,16 +1173,19 @@ export function planModelsSummary(
  * being made.
  *
  * `available` is rows, and it is not advisory — see `planModelsSummary`.
+ *
+ * It no longer takes the item LIST. Everything under the rule now describes one config — the
+ * one the cursor is on and the chart is drawing — and the only thing the full list was used
+ * for was a colour key built from every preset at once, which is the drift `ModelKey`
+ * documents.
  */
 export function renderModelsSummary({
-	items,
 	selected,
 	status,
 	configPath,
 	width,
 	available,
 }: {
-	items: ModelsBrowserItem[];
 	selected: ModelsBrowserItem | undefined;
 	status: ModelsStatus | null;
 	configPath: string | null;
@@ -903,9 +1195,6 @@ export function renderModelsSummary({
 }): 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;
 
@@ -919,9 +1208,11 @@ export function renderModelsSummary({
 			{plan.spread && preset ? (
 				<AgentSpread config={preset.config} width={inner} />
 			) : null}
-			{plan.key ? (
+			{/* Gated on `preset` for the same reason the chart is: the key describes the
+			    graphic above it, and with nothing selected there is no graphic to describe. */}
+			{plan.key && preset ? (
 				<box marginTop={1}>
-					<ModelKey presets={presets} width={inner} />
+					<ModelKey config={preset.config} width={inner} />
 				</box>
 			) : null}
 			{/*
@@ -966,11 +1257,25 @@ export function renderModelRow(
  * `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.
+ *
+ * `matesAvailable` arrives the same way and for the same reason — it is a fact about the
+ * MACHINE (is `multimodel@magus` installed), not about the preset under the cursor. It is
+ * passed in rather than looked up here because this module is a renderer: answering it needs
+ * the filesystem and the network, which is the adapter layer's job. It defaults to false so
+ * a caller that has not asked yet draws the screen as it always was, rather than flickering
+ * three rows in on the first frame.
+ *
+ * `catalog` arrives the same way again, and defaults to EMPTY for a stronger reason than
+ * convenience: empty is what a failed lookup yields, and the advisory built from it returns
+ * nothing on an empty catalogue. So a caller that never asks, a machine with no claudish, and
+ * a claudish that timed out all render identically — the bound ids as written, unannotated.
  */
 export function renderModelDetail(
 	item: ModelsBrowserItem | undefined,
 	status: ModelsStatus | null,
 	width?: number,
+	matesAvailable = false,
+	catalog: CatalogModel[] = [],
 ): React.ReactNode {
 	if (!item) {
 		return (
@@ -998,7 +1303,7 @@ export function renderModelDetail(
 					<StateBlock status={status} width={width} />
 				</box>
 			) : null}
-			{renderPresetDetail(item, width)}
+			{renderPresetDetail(item, width, matesAvailable, catalog)}
 		</box>
 	);
 }