@north-light/crouter 0.3.172 → 0.3.174

package/dist/commands/sys/panels/models-panel.js

@@ -0,0 +1,647 @@
+import { ModelSelectorComponent, SettingsManager, ThinkingSelectorComponent, } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { basename, dirname, join } from "node:path";
+import { ANTHROPIC_PROVIDER_ID, OPENAI_CODEX_PROVIDER_ID, isManagedProvider, readSubscriptionPool, } from "../../../core/subscription-state.js";
+import { readRawConfigAtRoot, persistDefaultKindModel, persistModelLadders, readMergedLaunchConfig, } from "../../../core/config.js";
+import { findProjectScopeRoots, userScopeRoot } from "../../../core/scope.js";
+import { loadProfileManifest, profileRoot, } from "../../../core/profiles/manifest.js";
+import { configuredLadderProviders, inferPortableModelSelection, MODEL_PROVIDER_KEYS, MODEL_STRENGTHS, THINKING_SUFFIXES, } from "../../../core/runtime/model-selection.js";
+import { fitTail, padAnsi, renderRows, theme, } from "./panel.js";
+const MODELS_CHROME_LINES = 3;
+const RUNTIME_PROVIDER_ID = {
+    anthropic: ANTHROPIC_PROVIDER_ID,
+    openai: OPENAI_CODEX_PROVIDER_ID,
+};
+const PROVIDER_LABEL = {
+    anthropic: "Anthropic",
+    openai: "OpenAI",
+};
+const KIND_COLUMNS = [
+    { mode: "base", dimension: "provider" },
+    { mode: "base", dimension: "strength" },
+    { mode: "orchestrator", dimension: "provider" },
+    { mode: "orchestrator", dimension: "strength" },
+];
+function modelConfigTargets() {
+    const userRoot = userScopeRoot();
+    const profileId = process.env["CRTR_PROFILE_ID"] || null;
+    let profileTarget;
+    if (profileId !== null) {
+        try {
+            const entry = loadProfileManifest(profileId);
+            profileTarget = {
+                label: `Profile: ${entry.manifest.name}`,
+                root: profileRoot(entry.profileId),
+            };
+        }
+        catch {
+            // A stale profile env should not make setup unusable; user/project
+            // targets remain valid and launch resolution already ignores it.
+        }
+    }
+    const projectRoots = findProjectScopeRoots(process.cwd(), profileId);
+    const projectTargets = projectRoots.map((root) => ({
+        label: `Project: ${basename(dirname(root))}`,
+        root,
+    }));
+    return {
+        targets: [
+            { label: "User", root: userRoot },
+            ...(profileTarget ? [profileTarget] : []),
+            ...projectTargets,
+        ],
+        precedenceRoots: [
+            ...projectRoots,
+            ...(profileTarget ? [profileTarget.root] : []),
+            userRoot,
+        ],
+    };
+}
+/** Parse a model ref `<provider>/<modelId>:<level>` into parts. */
+function parseModelRef(ref) {
+    if (!ref)
+        return {};
+    const trimmed = ref.trim();
+    const slash = trimmed.indexOf("/");
+    const provider = slash === -1 ? undefined : trimmed.slice(0, slash);
+    const rest = slash === -1 ? trimmed : trimmed.slice(slash + 1);
+    const m = rest.match(/^(.*?):(off|minimal|low|medium|high|xhigh|max)$/i);
+    return {
+        provider,
+        id: m ? m[1] : rest,
+        level: m ? m[2].toLowerCase() : undefined,
+    };
+}
+/** Short display for a ladder cell value — strip the `<provider>/` prefix. */
+function shortRef(ref) {
+    if (!ref)
+        return "\u2014";
+    const slash = ref.indexOf("/");
+    return slash === -1 ? ref : ref.slice(slash + 1);
+}
+export class ModelsPanel {
+    tui;
+    runtime;
+    registry;
+    matches;
+    label;
+    mode = "list";
+    ladders;
+    kinds;
+    /** The ladder providers this panel offers — only columns whose runtime
+     *  provider is signed in (all of them when nobody is, so config stays
+     *  reachable pre-login). Recomputed with every reload/refresh so a login
+     *  made on the Providers tab shows up when this tab is next entered. */
+    providerKeys = MODEL_PROVIDER_KEYS;
+    targets;
+    precedenceRoots;
+    targetIndex = 0;
+    rawTarget;
+    rows = [];
+    selected = 0;
+    column = 0;
+    notice = "";
+    modelSelector;
+    thinkingSelector;
+    pending;
+    // The kind cell being edited: which mode/dimension, the options to choose
+    // from, and the current mode selection so the untouched dimension survives.
+    pendingDim;
+    dimPickIndex = 0;
+    onChange;
+    constructor(tui, runtime, registry, matches, label) {
+        this.tui = tui;
+        this.runtime = runtime;
+        this.registry = registry;
+        this.matches = matches;
+        this.label = label;
+        const scopes = modelConfigTargets();
+        this.targets = scopes.targets;
+        this.precedenceRoots = scopes.precedenceRoots;
+        this.rawTarget = readRawConfigAtRoot(this.currentTarget().root);
+        const merged = readMergedLaunchConfig();
+        this.ladders = merged.modelLadders;
+        this.kinds = merged.kinds;
+        this.providerKeys = this.offeredProviders();
+        this.rows = this.buildRows();
+    }
+    /** Same signed-in rule as the broker's Alt+M cycle: pool occupancy for a
+     *  managed provider (read live), else the registry's auth status. */
+    offeredProviders() {
+        try {
+            return configuredLadderProviders((providerId) => (isManagedProvider(providerId) &&
+                readSubscriptionPool(providerId).length > 0) ||
+                this.registry.getProviderAuthStatus(providerId).configured, this.ladders);
+        }
+        catch {
+            return MODEL_PROVIDER_KEYS; // auth state unreadable — offer the full grid
+        }
+    }
+    currentTarget() {
+        return this.targets[this.targetIndex];
+    }
+    cycleTarget() {
+        this.targetIndex = (this.targetIndex + 1) % this.targets.length;
+        this.rawTarget = readRawConfigAtRoot(this.currentTarget().root);
+        this.notice = "";
+        this.notify();
+    }
+    shadowingPath(hasOverride) {
+        for (const root of this.precedenceRoots) {
+            if (root === this.currentTarget().root)
+                break;
+            const raw = readRawConfigAtRoot(root);
+            if (raw && hasOverride(raw))
+                return join(root, "config.json");
+        }
+        return undefined;
+    }
+    savedButShadowed(path) {
+        return `Saved to ${this.currentTarget().label}; overridden by ${path ?? "a more specific config"}`;
+    }
+    buildRows() {
+        const rows = [{ section: "ladder", kind: "defaultProvider" }];
+        for (const strength of MODEL_STRENGTHS)
+            rows.push({ section: "ladder", kind: "strength", strength });
+        for (const name of Object.keys(this.kinds)) {
+            if (name.includes("/"))
+                continue;
+            rows.push({ section: "kind", name });
+        }
+        return rows;
+    }
+    reload() {
+        const merged = readMergedLaunchConfig();
+        this.ladders = merged.modelLadders;
+        this.kinds = merged.kinds;
+        this.rawTarget = readRawConfigAtRoot(this.currentTarget().root);
+        this.providerKeys = this.offeredProviders();
+        this.rows = this.buildRows();
+        this.selected = Math.min(this.selected, this.rows.length - 1);
+        this.clampColumn();
+    }
+    /** Re-read config and auth state — called when the Models tab is entered so
+     *  a provider signed in (or out) on the Providers tab is reflected here. */
+    refresh() {
+        this.reload();
+        this.notify();
+    }
+    notify() {
+        this.onChange?.();
+        this.tui.requestRender();
+    }
+    isPickerOpen() {
+        return this.mode !== "list";
+    }
+    currentRow() {
+        return this.rows[Math.min(this.selected, this.rows.length - 1)];
+    }
+    columnsFor(row) {
+        if (row.section === "ladder")
+            return row.kind === "strength" ? this.providerKeys.length : 1;
+        return KIND_COLUMNS.length;
+    }
+    clampColumn() {
+        this.column = Math.min(this.column, this.columnsFor(this.currentRow()) - 1);
+    }
+    handleInput(data) {
+        if (this.mode === "dimension-picker") {
+            if (this.matches("crtr.setup.models.commit", data)) {
+                this.commitDimensionPick();
+                return true;
+            }
+            if (this.matches("crtr.setup.models.cancel", data)) {
+                this.closePicker();
+                return true;
+            }
+            if (this.matches("crtr.setup.list-down", data)) {
+                this.dimPickIndex = Math.min((this.pendingDim?.options.length ?? 1) - 1, this.dimPickIndex + 1);
+                return true;
+            }
+            if (this.matches("crtr.setup.list-up", data)) {
+                this.dimPickIndex = Math.max(0, this.dimPickIndex - 1);
+                return true;
+            }
+            return true;
+        }
+        if (this.mode === "model-picker") {
+            const input = this.matches("crtr.setup.models.commit", data)
+                ? "\r"
+                : this.matches("crtr.setup.models.cancel", data)
+                    ? "\u001b"
+                    : data;
+            this.modelSelector?.handleInput(input);
+            return true;
+        }
+        if (this.mode === "thinking-picker") {
+            const input = this.matches("crtr.setup.models.commit", data)
+                ? "\r"
+                : this.matches("crtr.setup.models.cancel", data)
+                    ? "\u001b"
+                    : data;
+            this.thinkingSelector?.getSelectList().handleInput(input);
+            return true;
+        }
+        if (this.matches("crtr.setup.list-down", data)) {
+            this.selected = Math.min(this.rows.length - 1, this.selected + 1);
+            this.clampColumn();
+            this.notice = "";
+            return true;
+        }
+        if (this.matches("crtr.setup.list-up", data)) {
+            this.selected = Math.max(0, this.selected - 1);
+            this.clampColumn();
+            this.notice = "";
+            return true;
+        }
+        if (this.matches("crtr.setup.cell-previous", data)) {
+            this.column = Math.max(0, this.column - 1);
+            return true;
+        }
+        if (this.matches("crtr.setup.cell-next", data)) {
+            this.column = Math.min(this.columnsFor(this.currentRow()) - 1, this.column + 1);
+            return true;
+        }
+        if (this.matches("crtr.setup.models.scope-next", data)) {
+            this.cycleTarget();
+            return true;
+        }
+        if (this.matches("crtr.setup.models.open", data)) {
+            this.activateCell();
+            return true;
+        }
+        return false;
+    }
+    activateCell() {
+        const row = this.currentRow();
+        this.notice = "";
+        if (row.section === "ladder" && row.kind === "defaultProvider") {
+            const currentProvider = inferPortableModelSelection(undefined, this.ladders).provider;
+            // Cycle within the offered providers only; with a single signed-in
+            // provider the default has nowhere else to go.
+            const offered = this.providerKeys;
+            const next = offered[(Math.max(0, offered.indexOf(currentProvider)) + 1) % offered.length];
+            if (next === currentProvider)
+                return;
+            try {
+                persistModelLadders(this.currentTarget().root, {
+                    defaultProvider: next,
+                });
+            }
+            catch (error) {
+                this.notice = `Could not save: ${error instanceof Error ? error.message : String(error)}`;
+                this.notify();
+                return;
+            }
+            this.reload();
+            if ((this.ladders.defaultProvider ?? "anthropic") !== next) {
+                const path = this.shadowingPath((raw) => raw.modelLadders?.defaultProvider !== undefined);
+                this.notice = this.savedButShadowed(path);
+            }
+            this.notify();
+            return;
+        }
+        if (row.section === "ladder" && row.kind === "strength") {
+            this.openModelPicker(this.providerKeys[this.column], row.strength);
+            return;
+        }
+        if (row.section === "kind") {
+            const col = KIND_COLUMNS[this.column];
+            if (!col)
+                return;
+            this.openDimensionPicker(row.name, col.mode, col.dimension);
+        }
+    }
+    /** Snapshot of the mode's current provider+strength. For orchestrator this
+     *  falls back to the base `model` when no explicit override exists, so the
+     *  inherited pair is what an edit preserves. */
+    kindSelection(name, mode) {
+        const cfg = this.kinds[name];
+        const value = mode === "orchestrator"
+            ? (cfg?.orchestratorModel ?? cfg?.model)
+            : cfg?.model;
+        return inferPortableModelSelection(value, this.ladders);
+    }
+    openDimensionPicker(name, mode, dimension) {
+        const current = this.kindSelection(name, mode);
+        const options = dimension === "provider" ? this.providerKeys : MODEL_STRENGTHS;
+        const currentToken = dimension === "provider" ? current.provider : current.strength;
+        this.pendingDim = { name, mode, dimension, options, current };
+        this.dimPickIndex = Math.max(0, options.indexOf(currentToken));
+        this.mode = "dimension-picker";
+        this.notify();
+    }
+    commitDimensionPick() {
+        const pending = this.pendingDim;
+        const chosen = pending?.options[this.dimPickIndex];
+        if (!pending || chosen === undefined) {
+            this.closePicker();
+            return;
+        }
+        const provider = pending.dimension === "provider"
+            ? chosen
+            : pending.current.provider;
+        const strength = pending.dimension === "strength"
+            ? chosen
+            : pending.current.strength;
+        const token = `${provider}/${strength}`;
+        try {
+            persistDefaultKindModel({
+                root: this.currentTarget().root,
+                kind: pending.name,
+                model: token,
+                orchestrator: pending.mode === "orchestrator",
+            });
+        }
+        catch (error) {
+            this.notice = `Could not save: ${error instanceof Error ? error.message : String(error)}`;
+            this.mode = "list";
+            this.pendingDim = undefined;
+            this.notify();
+            return;
+        }
+        this.mode = "list";
+        this.pendingDim = undefined;
+        this.reload();
+        const after = this.kinds[pending.name];
+        const effective = pending.mode === "orchestrator" ? after?.orchestratorModel : after?.model;
+        if (effective !== token) {
+            const field = pending.mode === "orchestrator" ? "orchestratorModel" : "model";
+            const path = this.shadowingPath((raw) => {
+                const entry = raw.kinds?.[pending.name];
+                return entry?.[field] !== undefined;
+            });
+            this.notice = this.savedButShadowed(path);
+        }
+        this.notify();
+    }
+    openModelPicker(providerKey, strength) {
+        const expectedRuntime = RUNTIME_PROVIDER_ID[providerKey];
+        const registry = this.registry;
+        const parsed = parseModelRef(this.ladders[providerKey][strength]);
+        const currentModel = parsed.provider && parsed.id
+            ? registry.find(parsed.provider, parsed.id)
+            : undefined;
+        const scoped = registry
+            .getAvailable()
+            .filter((m) => m.provider === expectedRuntime)
+            .map((m) => ({ model: m }));
+        if (scoped.length === 0) {
+            this.notice = `No ${providerKey} models available \u2014 sign in first.`;
+            this.notify();
+            return;
+        }
+        this.pending = { providerKey, strength, expectedRuntime };
+        this.modelSelector = new ModelSelectorComponent(this.tui, currentModel, SettingsManager.inMemory(), this.runtime, scoped, (model) => this.onModelPicked(model), () => this.closePicker());
+        this.modelSelector.focused = true;
+        this.mode = "model-picker";
+        this.notify();
+    }
+    onModelPicked(model) {
+        if (!this.pending) {
+            this.closePicker();
+            return;
+        }
+        if (model.provider !== this.pending.expectedRuntime) {
+            this.notice = `That is a ${model.provider} model \u2014 pick an ${this.pending.providerKey} model for this column.`;
+            this.closePicker();
+            return;
+        }
+        this.pending.model = model;
+        if (model.reasoning) {
+            const currentLevel = parseModelRef(this.ladders[this.pending.providerKey][this.pending.strength]).level ?? "medium";
+            this.thinkingSelector = new ThinkingSelectorComponent(currentLevel, [...THINKING_SUFFIXES], (level) => this.onThinkingPicked(level), () => this.closePicker());
+            this.modelSelector = undefined;
+            this.mode = "thinking-picker";
+            this.notify();
+            return;
+        }
+        this.writeLadder(model, undefined);
+        this.closePicker();
+    }
+    onThinkingPicked(level) {
+        if (this.pending?.model)
+            this.writeLadder(this.pending.model, level);
+        this.closePicker();
+    }
+    writeLadder(model, level) {
+        if (!this.pending)
+            return;
+        const ref = `${model.provider}/${model.id}${level && level !== "off" ? `:${level}` : ""}`;
+        const { providerKey, strength } = this.pending;
+        try {
+            persistModelLadders(this.currentTarget().root, {
+                [providerKey]: { [strength]: ref },
+            });
+        }
+        catch (error) {
+            this.notice = `Could not save: ${error instanceof Error ? error.message : String(error)}`;
+            return;
+        }
+        this.reload();
+        if (this.ladders[providerKey][strength] !== ref) {
+            const path = this.shadowingPath((raw) => raw.modelLadders?.[providerKey]?.[strength] !== undefined);
+            this.notice = this.savedButShadowed(path);
+        }
+    }
+    closePicker() {
+        this.mode = "list";
+        this.modelSelector = undefined;
+        this.thinkingSelector = undefined;
+        this.pending = undefined;
+        this.pendingDim = undefined;
+        this.notify();
+    }
+    dispose() {
+        this.closePicker();
+    }
+    targetLadderOverride(providerKey, strength) {
+        const raw = this.rawTarget?.modelLadders;
+        return raw?.[providerKey]?.[strength] !== undefined;
+    }
+    targetKindOverride(name, orchestrator) {
+        const kinds = this.rawTarget?.kinds;
+        const field = orchestrator ? "orchestratorModel" : "model";
+        return kinds?.[name]?.[field] !== undefined;
+    }
+    footerHint() {
+        if (this.mode === "dimension-picker") {
+            return `${this.label("crtr.setup.list-down")}/${this.label("crtr.setup.list-up")} choice \u00b7 ${this.label("crtr.setup.models.commit")} save \u00b7 ${this.label("crtr.setup.models.cancel")} cancel`;
+        }
+        if (this.mode === "model-picker")
+            return `type to search \u00b7 ${this.label("crtr.setup.models.commit")} select \u00b7 tab all/scoped \u00b7 ${this.label("crtr.setup.models.cancel")} cancel`;
+        if (this.mode === "thinking-picker")
+            return `\u2191/\u2193 level \u00b7 ${this.label("crtr.setup.models.commit")} set \u00b7 ${this.label("crtr.setup.models.cancel")} cancel`;
+        return "";
+    }
+    /** Body lines only — the caller frames and windows them. */
+    renderDimensionPicker(width) {
+        const pending = this.pendingDim;
+        if (!pending)
+            return [theme.fg("warning", "No setting selected.")];
+        const modeLabel = pending.mode === "orchestrator" ? "orchestrator" : "base";
+        const dimLabel = pending.dimension;
+        const paired = pending.dimension === "provider"
+            ? `strength ${pending.current.strength}`
+            : `provider ${PROVIDER_LABEL[pending.current.provider]}`;
+        const body = [
+            theme.fg("accent", theme.bold(`Choose ${modeLabel} ${dimLabel}`)),
+            theme.fg("dim", `${pending.name} \u00b7 keeps ${modeLabel} ${paired}`),
+            "",
+        ];
+        for (const [index, option] of pending.options.entries()) {
+            const active = index === this.dimPickIndex;
+            const marker = active ? theme.fg("accent", "\u25b6") : " ";
+            const label = pending.dimension === "provider"
+                ? PROVIDER_LABEL[option]
+                : option;
+            body.push(`${marker} ${active ? theme.fg("accent", `[${label}]`) : theme.fg("dim", ` ${label} `)}`);
+        }
+        return body;
+    }
+    /** Fits the panel body into `budget` rows. The wizard draws header/tabs above
+     *  and a footer below, so a body taller than its budget pushes the tab strip
+     *  off the top of the terminal — the panel must window itself instead. Chrome
+     *  (title/subtitle/blank) sheds first, then the remaining lines scroll just
+     *  far enough to keep the selected row on screen. */
+    fitBody(lines, selected, budget) {
+        if (lines.length <= budget)
+            return lines;
+        const chrome = Math.min(MODELS_CHROME_LINES, lines.length - budget);
+        const rest = lines.slice(chrome);
+        if (rest.length <= budget)
+            return rest;
+        const anchor = Math.max(0, selected - chrome);
+        const start = Math.max(0, Math.min(anchor - budget + 2, rest.length - budget));
+        return rest.slice(start, start + budget);
+    }
+    render(width, height) {
+        const contentBudget = Math.max(1, height);
+        const frame = (lines) => renderRows(lines, width);
+        if (this.mode === "dimension-picker")
+            return frame(fitTail(this.renderDimensionPicker(width), contentBudget));
+        if (this.mode === "model-picker")
+            return frame(fitTail(this.modelSelector?.render(width) ?? [], contentBudget));
+        if (this.mode === "thinking-picker")
+            return frame(fitTail(this.thinkingSelector?.render(width) ?? [], contentBudget));
+        let selectedLine = 0;
+        const body = [
+            theme.fg("accent", theme.bold("Models")),
+            theme.fg("dim", "global user defaults \u00b7 project/profile scopes can shadow these"),
+            "",
+        ];
+        const selectedRow = this.currentRow();
+        const strengthSelected = selectedRow.section === "ladder" && selectedRow.kind === "strength";
+        // Ladder grid layout. The provider columns share the width left after the
+        // 2-space marker gutter and the strength label, divided across as many
+        // columns as fit at a minimum cell width; any that don't fit scroll into a
+        // horizontal viewport that follows the selected column, so the grid scales
+        // to N providers instead of truncating the last column off-screen.
+        const innerWidth = Math.max(1, width);
+        const ladderLabelWidth = Math.max(12, Math.min(20, Math.floor(innerWidth * 0.24)));
+        const providerCount = this.providerKeys.length;
+        const gridWidth = Math.max(1, innerWidth - 2 - ladderLabelWidth);
+        const minCellWidth = 12;
+        const maxVisible = Math.max(1, Math.floor((gridWidth + 1) / (minCellWidth + 1)));
+        const visibleCount = Math.min(providerCount, maxVisible);
+        const ladderCellWidth = Math.max(minCellWidth, Math.floor((gridWidth - (visibleCount - 1)) / visibleCount));
+        const activeColumn = strengthSelected
+            ? Math.min(this.column, providerCount - 1)
+            : 0;
+        const viewStart = Math.max(0, Math.min(activeColumn >= visibleCount ? activeColumn - visibleCount + 1 : 0, providerCount - visibleCount));
+        const viewEnd = viewStart + visibleCount;
+        const visibleCols = this.providerKeys
+            .map((provider, column) => ({ provider, column }))
+            .slice(viewStart, viewEnd);
+        const moreLeft = viewStart > 0;
+        const moreRight = viewEnd < providerCount;
+        const scrollHint = moreLeft || moreRight
+            ? `  ${theme.fg("dim", `${moreLeft ? "\u2039 " : ""}${viewStart + 1}\u2013${viewEnd} of ${providerCount}${moreRight ? " \u203a" : ""}`)}`
+            : "";
+        const target = this.currentTarget();
+        body.push(`${theme.fg("accent", "Editing config")}  ${theme.fg("accent", `[${target.label}]`)}${theme.fg("dim", `  ${this.targetIndex + 1}/${this.targets.length}`)}`);
+        body.push(theme.fg("muted", join(target.root, "config.json")), "");
+        body.push(theme.fg("accent", "Strength ladders") + scrollHint);
+        const effectiveDefaultProvider = inferPortableModelSelection(undefined, this.ladders).provider;
+        const defaultRow = this.rows.find((row) => row.section === "ladder" && row.kind === "defaultProvider");
+        const defaultSelected = defaultRow === selectedRow;
+        if (defaultSelected)
+            selectedLine = body.length;
+        body.push(`${defaultSelected ? theme.fg("accent", "\u25b6") : " "} ${padAnsi(defaultSelected ? theme.fg("accent", "Default provider") : "Default provider", 20)} ${theme.fg("success", effectiveDefaultProvider)}`);
+        const providerHeading = (provider, column) => {
+            const heading = padAnsi(theme.bold(PROVIDER_LABEL[provider]), ladderCellWidth);
+            return strengthSelected && this.column === column
+                ? theme.fg("accent", heading)
+                : theme.fg("dim", heading);
+        };
+        const ladderCell = (text, active) => {
+            const content = padAnsi(truncateToWidth(text, Math.max(1, ladderCellWidth - 2)), Math.max(1, ladderCellWidth - 2));
+            return active
+                ? theme.fg("accent", `[${content}]`)
+                : theme.fg("dim", ` ${content} `);
+        };
+        body.push(`${" ".repeat(2)}${padAnsi(theme.fg("dim", "Strength"), ladderLabelWidth)}${visibleCols.map(({ provider, column }) => providerHeading(provider, column)).join(" ")}`);
+        for (const row of this.rows) {
+            if (row.section !== "ladder" || row.kind !== "strength")
+                continue;
+            const isSel = row === selectedRow;
+            const marker = isSel ? theme.fg("accent", "\u25b6") : " ";
+            if (isSel)
+                selectedLine = body.length;
+            const cells = visibleCols.map(({ provider, column }) => {
+                const over = this.targetLadderOverride(provider, row.strength)
+                    ? theme.fg("warning", "\u2022")
+                    : " ";
+                return ladderCell(`${over}${shortRef(this.ladders[provider][row.strength])}`, isSel && column === this.column);
+            });
+            body.push(`${marker} ${padAnsi(row.strength, ladderLabelWidth)}${cells.join(" ")}`);
+        }
+        body.push("", theme.fg("accent", "Kind defaults"));
+        body.push(theme.fg("dim", `${theme.fg("warning", "\u2022")} override in ${target.label} \u00b7 orchestrator inherits base until you set it`));
+        const nameW = 16;
+        const provCellW = 12;
+        const strCellW = 9;
+        const groupW = provCellW + 1 + strCellW;
+        // Fixed-width cell: `[value]` when the column is selected, faint (muted) for
+        // an inherited orchestrator value, plain dim otherwise. The 2 brackets/spaces
+        // keep every cell exactly `w` wide so the column headers line up.
+        const cell = (raw, w, active, faint) => {
+            const inner = padAnsi(truncateToWidth(raw, Math.max(1, w - 2)), Math.max(1, w - 2));
+            return active
+                ? theme.fg("accent", `[${inner}]`)
+                : faint
+                    ? theme.fg("muted", ` ${inner} `)
+                    : theme.fg("dim", ` ${inner} `);
+        };
+        body.push(`${" ".repeat(2 + nameW)}${padAnsi(theme.bold(theme.fg("dim", "Base")), groupW)} ${padAnsi(theme.bold(theme.fg("dim", "Orchestrator")), groupW)}`);
+        body.push(`${" ".repeat(2)}${padAnsi(theme.fg("dim", "Kind"), nameW)}${padAnsi(theme.fg("dim", "Provider"), provCellW)} ${padAnsi(theme.fg("dim", "Strength"), strCellW)} ${padAnsi(theme.fg("dim", "Provider"), provCellW)} ${padAnsi(theme.fg("dim", "Strength"), strCellW)}`);
+        for (const row of this.rows) {
+            if (row.section !== "kind")
+                continue;
+            const isSel = row === selectedRow;
+            const marker = isSel ? theme.fg("accent", "\u25b6") : " ";
+            if (isSel)
+                selectedLine = body.length;
+            const cfg = this.kinds[row.name];
+            const baseSel = inferPortableModelSelection(cfg?.model, this.ladders);
+            const orchInherited = cfg?.orchestratorModel === undefined;
+            const orchSel = inferPortableModelSelection(cfg?.orchestratorModel ?? cfg?.model, this.ladders);
+            const baseOver = this.targetKindOverride(row.name, false)
+                ? theme.fg("warning", "\u2022")
+                : " ";
+            const orchOver = this.targetKindOverride(row.name, true)
+                ? theme.fg("warning", "\u2022")
+                : " ";
+            const cells = [
+                cell(`${baseOver}${PROVIDER_LABEL[baseSel.provider]}`, provCellW, isSel && this.column === 0, false),
+                cell(`${baseOver}${baseSel.strength}`, strCellW, isSel && this.column === 1, false),
+                cell(`${orchOver}${PROVIDER_LABEL[orchSel.provider]}`, provCellW, isSel && this.column === 2, orchInherited),
+                cell(`${orchOver}${orchSel.strength}`, strCellW, isSel && this.column === 3, orchInherited),
+            ];
+            body.push(`${marker} ${padAnsi(row.name, nameW)}${cells[0]} ${cells[1]} ${cells[2]} ${cells[3]}`);
+        }
+        if (this.notice)
+            body.push("", theme.fg("warning", this.notice));
+        return frame(this.fitBody(body, selectedLine, contentBudget));
+    }
+}