@north-light/api 0.3.579 → 0.3.587

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

@@ -0,0 +1,1160 @@
+import { envProfileId } from '../../../shared/env.js';
+import { ModelSelectorComponent, ThinkingSelectorComponent, } from '@earendil-works/pi-coding-agent';
+import { Input, truncateToWidth } from '@earendil-works/pi-tui';
+import { basename, dirname, join } from 'node:path';
+import { ANTHROPIC_PROVIDER_ID, OPENAI_CODEX_PROVIDER_ID, isManagedProvider, } from '../../../core/managed-providers.js';
+import { cliClient } from '../../api-client.js';
+import { readRawConfigAtRoot, persistDefaultKindModel, persistModelLadders, persistModelRoute, readMergedLaunchConfig, } from '../../../core/config.js';
+import { findProjectScopeRoots, userScopeRoot } from '../../../core/scope.js';
+import { loadProfileManifest, profileDir, } 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, wrapText, } from '../../../core/tui/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: "family" },
+    { mode: "base", dimension: "strength" },
+    { mode: "orchestrator", dimension: "family" },
+    { mode: "orchestrator", dimension: "strength" },
+];
+function modelConfigTargets() {
+    const userRoot = userScopeRoot();
+    const profileId = envProfileId() || null;
+    let profileTarget;
+    if (profileId !== null) {
+        try {
+            const entry = loadProfileManifest(profileId);
+            profileTarget = {
+                label: `Profile: ${entry.manifest.name}`,
+                root: profileDir(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;
+    modelRoutes;
+    legacyModelRoutes;
+    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;
+    /** Managed providers that hold at least one account row, as last read. */
+    managedWithAccounts = new Set();
+    targets;
+    precedenceRoots;
+    targetIndex = 0;
+    rawTarget;
+    rows = [];
+    selected = 0;
+    column = 0;
+    notice = "";
+    modelSelector;
+    thinkingSelector;
+    pending;
+    choice;
+    choiceIndex = 0;
+    routeForm;
+    routeInput = new Input();
+    pendingRouteCell;
+    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.modelRoutes = merged.modelRoutes ?? {};
+        this.legacyModelRoutes = merged.legacyModelRoutes ?? {};
+        this.kinds = merged.kinds;
+        this.providerKeys = this.offeredProviders();
+        this.rows = this.buildRows();
+        void this.loadAccountOccupancy();
+        this.routeInput.onSubmit = (value) => {
+            const form = this.routeForm;
+            if (!form || form.editing === null)
+                return;
+            form.text[form.editing] = value.trim();
+            form.editing = null;
+            this.routeInput.focused = false;
+            this.notify();
+        };
+        this.routeInput.onEscape = () => {
+            if (!this.routeForm)
+                return;
+            this.routeForm.editing = null;
+            this.routeInput.focused = false;
+            this.notify();
+        };
+    }
+    /** Reads which managed providers hold account rows, then re-offers providers. */
+    async loadAccountOccupancy() {
+        const held = new Set();
+        try {
+            for (const status of (await cliClient().listModelAuth()).providers) {
+                if (status.managed && status.accounts.length > 0)
+                    held.add(status.provider);
+            }
+        }
+        catch {
+            return; // account rows unreadable — keep the last offered set
+        }
+        this.managedWithAccounts = held;
+        this.providerKeys = this.offeredProviders();
+        this.rows = this.buildRows();
+        this.clampColumn();
+        this.notify();
+    }
+    /** Same signed-in rule as the broker's Alt+M cycle: account rows for a
+     *  managed provider (as last read), else the registry's auth status. */
+    offeredProviders() {
+        try {
+            return configuredLadderProviders((providerId) => (isManagedProvider(providerId) &&
+                this.managedWithAccounts.has(providerId)) ||
+                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"}`;
+    }
+    routeIds() {
+        return [
+            ...new Set([
+                ...Object.keys(this.modelRoutes),
+                ...Object.keys(this.legacyModelRoutes),
+            ]),
+        ];
+    }
+    routeFamilies() {
+        return [
+            ...new Set(this.routeIds().map((routeId) => (this.modelRoutes[routeId] ?? this.legacyModelRoutes[routeId])
+                .family)),
+        ];
+    }
+    buildRows() {
+        const rows = [{ section: "ladder", kind: "defaultProvider" }];
+        for (const strength of MODEL_STRENGTHS)
+            rows.push({ section: "ladder", kind: "strength", strength });
+        for (const routeId of this.routeIds())
+            rows.push({ section: "route", routeId });
+        rows.push({ section: "route", routeId: null });
+        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.modelRoutes = merged.modelRoutes ?? {};
+        this.legacyModelRoutes = merged.legacyModelRoutes ?? {};
+        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();
+        void this.loadAccountOccupancy();
+    }
+    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;
+        if (row.section === "route")
+            return 1;
+        return KIND_COLUMNS.length;
+    }
+    /** A settings write is asynchronous (rows, then the cache); the panel stays responsive and shows a failure as its notice. */
+    settle(write) {
+        void write.catch((error) => { this.notice = `Could not save: ${error instanceof Error ? error.message : String(error)}`; }).finally(() => this.notify());
+    }
+    clampColumn() {
+        this.column = Math.min(this.column, this.columnsFor(this.currentRow()) - 1);
+    }
+    handleInput(data) {
+        if (this.mode === "route-form") {
+            const form = this.routeForm;
+            if (!form) {
+                this.mode = "list";
+                return true;
+            }
+            if (form.editing !== null) {
+                this.routeInput.handleInput(data);
+                return true;
+            }
+            if (this.matches("crtr.setup.models.cancel", data)) {
+                this.closeRouteForm();
+                return true;
+            }
+            if (this.matches("crtr.setup.list-down", data)) {
+                form.index = Math.min(form.fields.length - 1, form.index + 1);
+                this.notice = "";
+                return true;
+            }
+            if (this.matches("crtr.setup.list-up", data)) {
+                form.index = Math.max(0, form.index - 1);
+                this.notice = "";
+                return true;
+            }
+            if (this.matches("crtr.setup.models.open", data) ||
+                this.matches("crtr.setup.models.commit", data)) {
+                this.settle(this.activateRouteField());
+                return true;
+            }
+            return true;
+        }
+        if (this.mode === "route-delete") {
+            if (this.matches("crtr.setup.confirm.accept", data)) {
+                this.settle(this.deleteRoute());
+                return true;
+            }
+            if (this.matches("crtr.setup.confirm.back", data)) {
+                this.mode = "route-form";
+                this.notify();
+                return true;
+            }
+            return true;
+        }
+        if (this.mode === "dimension-picker") {
+            if (this.matches("crtr.setup.models.commit", data)) {
+                this.commitChoice();
+                return true;
+            }
+            if (this.matches("crtr.setup.models.cancel", data)) {
+                this.closePicker();
+                return true;
+            }
+            if (this.matches("crtr.setup.list-down", data)) {
+                this.choiceIndex = Math.min((this.choice?.options.length ?? 1) - 1, this.choiceIndex + 1);
+                return true;
+            }
+            if (this.matches("crtr.setup.list-up", data)) {
+                this.choiceIndex = Math.max(0, this.choiceIndex - 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.settle(this.activateCell());
+            return true;
+        }
+        return false;
+    }
+    async 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 {
+                await 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 === "route") {
+            this.openRouteForm(row.routeId);
+            return;
+        }
+        if (row.section === "kind") {
+            const col = KIND_COLUMNS[this.column];
+            if (!col)
+                return;
+            this.openDimensionPicker(row.name, col.mode, col.dimension);
+        }
+    }
+    portableSelection(value) {
+        if (value !== undefined) {
+            const slash = value.lastIndexOf("/");
+            const family = slash === -1 ? "" : value.slice(0, slash);
+            const strength = slash === -1 ? "" : value.slice(slash + 1);
+            if (this.routeFamilies().includes(family) &&
+                MODEL_STRENGTHS.includes(strength)) {
+                return { family, strength: strength };
+            }
+        }
+        const inferred = inferPortableModelSelection(value, this.ladders);
+        return { family: inferred.provider, strength: inferred.strength };
+    }
+    familyLabel(family) {
+        return family === "anthropic" || family === "openai"
+            ? PROVIDER_LABEL[family]
+            : family;
+    }
+    familyOptions() {
+        return [...new Set([...this.providerKeys, ...this.routeFamilies()])];
+    }
+    /** Snapshot of the mode's current family+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 this.portableSelection(value);
+    }
+    openDimensionPicker(name, mode, dimension) {
+        const current = this.kindSelection(name, mode);
+        const options = dimension === "family" ? this.familyOptions() : MODEL_STRENGTHS;
+        const currentToken = dimension === "family" ? current.family : current.strength;
+        const modeLabel = mode === "orchestrator" ? "orchestrator" : "base";
+        const paired = dimension === "family"
+            ? `strength ${current.strength}`
+            : `family ${this.familyLabel(current.family)}`;
+        this.choice = {
+            title: `Choose ${modeLabel} ${dimension}`,
+            subtitle: `${name} · keeps ${modeLabel} ${paired}`,
+            options,
+            label: (option) => dimension === "family" ? this.familyLabel(option) : option,
+            commit: async (chosen) => {
+                const family = dimension === "family" ? chosen : current.family;
+                const strength = dimension === "strength"
+                    ? chosen
+                    : current.strength;
+                await this.writeKindSelection(name, mode, family, strength);
+            },
+        };
+        this.choiceIndex = Math.max(0, options.indexOf(currentToken));
+        this.mode = "dimension-picker";
+        this.notify();
+    }
+    async writeKindSelection(name, mode, family, strength) {
+        const token = `${family}/${strength}`;
+        try {
+            await persistDefaultKindModel({
+                root: this.currentTarget().root,
+                kind: name,
+                model: token,
+                orchestrator: mode === "orchestrator",
+            });
+        }
+        catch (error) {
+            this.notice = `Could not save: ${error instanceof Error ? error.message : String(error)}`;
+            return;
+        }
+        this.reload();
+        const after = this.kinds[name];
+        const effective = mode === "orchestrator" ? after?.orchestratorModel : after?.model;
+        if (effective !== token) {
+            const field = mode === "orchestrator" ? "orchestratorModel" : "model";
+            const path = this.shadowingPath((raw) => {
+                const entry = raw.kinds?.[name];
+                return entry?.[field] !== undefined;
+            });
+            this.notice = this.savedButShadowed(path);
+        }
+    }
+    commitChoice() {
+        const choice = this.choice;
+        const chosen = choice?.options[this.choiceIndex];
+        if (choice && chosen !== undefined)
+            choice.commit(chosen);
+        this.closePicker();
+    }
+    openRouteForm(routeId) {
+        const route = routeId === null
+            ? undefined
+            : (this.modelRoutes[routeId] ?? this.legacyModelRoutes[routeId]);
+        const fields = [
+            ...(routeId === null
+                ? [{ kind: "text", key: "routeId", label: "Route id" }]
+                : []),
+            { kind: "text", key: "family", label: "Family" },
+            {
+                kind: "text",
+                key: "credentialSource",
+                label: "Credential source",
+            },
+            { kind: "provider", label: "Provider id" },
+            ...MODEL_STRENGTHS.map((strength) => ({ kind: "cell", strength })),
+            { kind: "save" },
+            ...(routeId === null ? [] : [{ kind: "delete" }]),
+        ];
+        this.routeForm = {
+            existing: routeId,
+            text: {
+                routeId: routeId ?? "",
+                family: route?.family ?? "",
+                credentialSource: route?.credentialSource ?? "",
+            },
+            providerId: route?.providerId ?? "",
+            models: { ...route?.models },
+            fields,
+            index: 0,
+            editing: null,
+        };
+        this.mode = "route-form";
+        this.notice = "";
+        this.notify();
+    }
+    closeRouteForm() {
+        this.routeInput.focused = false;
+        this.routeForm = undefined;
+        this.mode = "list";
+        this.notice = "";
+        this.notify();
+    }
+    async activateRouteField() {
+        const form = this.routeForm;
+        const field = form?.fields[form.index];
+        if (!form || !field)
+            return;
+        if (field.kind === "text") {
+            form.editing = field.key;
+            this.routeInput.setValue(form.text[field.key]);
+            this.routeInput.handleInput("\x05");
+            this.routeInput.focused = true;
+            this.notify();
+            return;
+        }
+        if (field.kind === "provider") {
+            const options = [
+                ...new Set([
+                    ...this.registry.getAll().map((model) => model.provider),
+                    ...(form.providerId ? [form.providerId] : []),
+                ]),
+            ].sort();
+            this.choice = {
+                title: "Choose provider id",
+                subtitle: "Route cells must all belong to this registry provider",
+                options,
+                label: (option) => option,
+                commit: (chosen) => this.setRouteProvider(chosen),
+            };
+            this.choiceIndex = Math.max(0, options.indexOf(form.providerId));
+            this.mode = "dimension-picker";
+            this.notify();
+            return;
+        }
+        if (field.kind === "cell") {
+            this.openRouteCell(field.strength);
+            return;
+        }
+        if (field.kind === "save") {
+            await this.saveRoute();
+            return;
+        }
+        this.mode = "route-delete";
+        this.notify();
+    }
+    setRouteProvider(providerId) {
+        const form = this.routeForm;
+        if (!form)
+            return;
+        form.providerId = providerId;
+        const cleared = [];
+        for (const strength of MODEL_STRENGTHS) {
+            const ref = form.models[strength];
+            if (ref !== undefined && !ref.startsWith(`${providerId}/`)) {
+                delete form.models[strength];
+                cleared.push(strength);
+            }
+        }
+        this.notice =
+            cleared.length === 0
+                ? ""
+                : `Cleared ${cleared.join(", ")} because those models belong to another provider.`;
+    }
+    openRouteCell(strength) {
+        const form = this.routeForm;
+        if (!form)
+            return;
+        if (!form.providerId) {
+            this.notice = "Choose the provider id first";
+            this.notify();
+            return;
+        }
+        const scoped = this.registry
+            .getAll()
+            .filter((model) => model.provider === form.providerId);
+        if (scoped.length === 0) {
+            this.notice = `No models registered for provider "${form.providerId}" — this route cannot be edited here.`;
+            this.notify();
+            return;
+        }
+        const parsed = parseModelRef(form.models[strength]);
+        const current = parsed.provider && parsed.id
+            ? this.registry.find(parsed.provider, parsed.id)
+            : undefined;
+        this.pendingRouteCell = { strength };
+        this.showModelSelector(scoped, current, (model) => this.onRouteModelPicked(model));
+    }
+    onRouteModelPicked(model) {
+        const pending = this.pendingRouteCell;
+        const form = this.routeForm;
+        if (!pending || !form) {
+            this.closePicker();
+            return;
+        }
+        if (model.provider !== form.providerId) {
+            this.notice = `That is a ${model.provider} model — pick a ${form.providerId} model for this route.`;
+            this.closePicker();
+            return;
+        }
+        pending.model = model;
+        if (model.reasoning) {
+            const currentLevel = parseModelRef(form.models[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;
+        }
+        form.models[pending.strength] = `${model.provider}/${model.id}`;
+        this.closePicker();
+    }
+    async saveRoute() {
+        const form = this.routeForm;
+        if (!form)
+            return;
+        const routeId = form.text.routeId.trim();
+        if (!routeId) {
+            this.notice = "Route id is required.";
+            this.notify();
+            return;
+        }
+        if (!form.text.family.trim()) {
+            this.notice = "Family is required.";
+            this.notify();
+            return;
+        }
+        if (!form.text.credentialSource.trim()) {
+            this.notice = "Credential source is required.";
+            this.notify();
+            return;
+        }
+        if (!form.providerId.trim()) {
+            this.notice = "Provider id is required.";
+            this.notify();
+            return;
+        }
+        const missing = MODEL_STRENGTHS.filter((strength) => form.models[strength] === undefined);
+        if (missing.length > 0) {
+            this.notice = `Choose models for ${missing.join(", ")} before saving.`;
+            this.notify();
+            return;
+        }
+        const route = {
+            family: form.text.family.trim(),
+            credentialSource: form.text.credentialSource.trim(),
+            providerId: form.providerId.trim(),
+            models: {
+                ultra: form.models.ultra,
+                strong: form.models.strong,
+                medium: form.models.medium,
+                light: form.models.light,
+            },
+        };
+        try {
+            await persistModelRoute(this.currentTarget().root, routeId, route);
+        }
+        catch (error) {
+            this.notice = `Could not save: ${error instanceof Error ? error.message : String(error)}`;
+            this.notify();
+            return;
+        }
+        this.routeForm = undefined;
+        this.mode = "list";
+        this.reload();
+        const routeRow = this.rows.findIndex((row) => row.section === "route" && row.routeId === routeId);
+        if (routeRow >= 0)
+            this.selected = routeRow;
+        if (JSON.stringify(this.modelRoutes[routeId]) !== JSON.stringify(route)) {
+            const path = this.shadowingPath((raw) => raw.modelRoutes?.[routeId] !== undefined);
+            this.notice = this.savedButShadowed(path);
+        }
+        else {
+            this.notice = `Saved route "${routeId}" to ${this.currentTarget().label}.`;
+        }
+        this.notify();
+    }
+    declaringPath(routeId) {
+        for (const root of this.precedenceRoots) {
+            if (root === this.currentTarget().root)
+                continue;
+            const raw = readRawConfigAtRoot(root);
+            if (raw?.modelRoutes?.[routeId] !== undefined)
+                return join(root, "config.json");
+        }
+        return undefined;
+    }
+    async deleteRoute() {
+        const routeId = this.routeForm?.existing;
+        if (!routeId) {
+            this.mode = "route-form";
+            this.notify();
+            return;
+        }
+        try {
+            await persistModelRoute(this.currentTarget().root, routeId, undefined);
+        }
+        catch (error) {
+            this.mode = "route-form";
+            this.notice = `Could not delete: ${error instanceof Error ? error.message : String(error)}`;
+            this.notify();
+            return;
+        }
+        const inherited = this.declaringPath(routeId);
+        this.routeForm = undefined;
+        this.mode = "list";
+        this.reload();
+        this.notice = inherited
+            ? `Removed route "${routeId}" from ${this.currentTarget().label}; it is still declared by ${inherited}.`
+            : `Removed route "${routeId}" from ${this.currentTarget().label}.`;
+        this.notify();
+    }
+    showModelSelector(scoped, current, onPick) {
+        this.modelSelector = new ModelSelectorComponent(this.tui, current, this.runtime, scoped.map((model) => ({ model })), onPick, () => this.closePicker());
+        this.modelSelector.focused = true;
+        this.mode = "model-picker";
+        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((model) => model.provider === expectedRuntime);
+        if (scoped.length === 0) {
+            this.notice = `No ${providerKey} models available \u2014 sign in first.`;
+            this.notify();
+            return;
+        }
+        this.pending = { providerKey, strength, expectedRuntime };
+        this.showModelSelector(scoped, currentModel, (model) => this.onModelPicked(model));
+    }
+    async 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;
+        }
+        await this.writeLadder(model, undefined);
+        this.closePicker();
+    }
+    async onThinkingPicked(level) {
+        if (this.pendingRouteCell?.model && this.routeForm) {
+            const { model, strength } = this.pendingRouteCell;
+            this.routeForm.models[strength] = `${model.provider}/${model.id}${level !== "off" ? `:${level}` : ""}`;
+        }
+        else if (this.pending?.model) {
+            await this.writeLadder(this.pending.model, level);
+        }
+        this.closePicker();
+    }
+    async writeLadder(model, level) {
+        if (!this.pending)
+            return;
+        const ref = `${model.provider}/${model.id}${level && level !== "off" ? `:${level}` : ""}`;
+        const { providerKey, strength } = this.pending;
+        try {
+            await 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 = this.routeForm !== undefined ? "route-form" : "list";
+        this.modelSelector = undefined;
+        this.thinkingSelector = undefined;
+        this.pending = undefined;
+        this.pendingRouteCell = undefined;
+        this.choice = undefined;
+        this.notify();
+    }
+    dispose() {
+        this.routeForm = undefined;
+        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`;
+        if (this.mode === "route-delete")
+            return `${this.label("crtr.setup.confirm.accept")} delete \u00b7 ${this.label("crtr.setup.confirm.back")} cancel`;
+        if (this.mode === "route-form") {
+            return typeof this.routeForm?.editing === "string"
+                ? "type a value · enter save · esc cancel"
+                : `${this.label("crtr.setup.list-down")}/${this.label("crtr.setup.list-up")} field · ${this.label("crtr.setup.models.open")} edit · ${this.label("crtr.setup.models.cancel")} back`;
+        }
+        return "";
+    }
+    /** Body lines only — the caller frames and windows them. */
+    renderChoicePicker() {
+        const choice = this.choice;
+        if (!choice)
+            return [theme.fg("warning", "No setting selected.")];
+        const body = [
+            theme.fg("accent", theme.bold(choice.title)),
+            theme.fg("dim", choice.subtitle),
+            "",
+        ];
+        for (const [index, option] of choice.options.entries()) {
+            const active = index === this.choiceIndex;
+            const marker = active ? theme.fg("accent", "\u25b6") : " ";
+            const label = choice.label(option);
+            body.push(`${marker} ${active ? theme.fg("accent", `[${label}]`) : theme.fg("dim", ` ${label} `)}`);
+        }
+        return body;
+    }
+    renderRouteForm(width) {
+        const form = this.routeForm;
+        if (!form)
+            return [theme.fg("warning", "No route selected.")];
+        const target = this.currentTarget();
+        const body = [
+            theme.fg("accent", theme.bold(form.existing === null
+                ? "New provider route"
+                : `Provider route: ${form.existing}`)),
+            theme.fg("dim", `${target.label} · ${join(target.root, "config.json")}`),
+            "",
+        ];
+        const labelWidth = 20;
+        for (const [index, field] of form.fields.entries()) {
+            const active = index === form.index;
+            const marker = active ? theme.fg("accent", "▶") : " ";
+            let label;
+            let value;
+            if (field.kind === "text") {
+                label = field.label;
+                value = form.text[field.key] || "—";
+                if (active && form.editing === field.key) {
+                    const inputWidth = Math.max(8, width - labelWidth - 4);
+                    value = this.routeInput.render(inputWidth)[0] ?? "";
+                }
+            }
+            else if (field.kind === "provider") {
+                label = field.label;
+                value = form.providerId || "—";
+            }
+            else if (field.kind === "cell") {
+                label = field.strength;
+                value = shortRef(form.models[field.strength]);
+            }
+            else if (field.kind === "save") {
+                label = "";
+                value = "Save route";
+            }
+            else {
+                label = "";
+                value = "Delete route";
+            }
+            const missing = value === "—";
+            const rendered = active
+                ? theme.fg("accent", `[${value}]`)
+                : theme.fg(missing ? "warning" : "dim", ` ${value} `);
+            body.push(`${marker} ${padAnsi(label, labelWidth)}${rendered}`);
+        }
+        if (this.notice)
+            body.push("", theme.fg("warning", this.notice));
+        return body;
+    }
+    renderRouteDelete(width) {
+        const routeId = this.routeForm?.existing ?? "this route";
+        const target = this.currentTarget();
+        const warning = wrapText(`This removes the entry from ${target.label}. Any "${routeId}" declared by a lower-precedence config becomes effective again; this does not guarantee the route is gone.`, width).map((line) => theme.fg("warning", line));
+        return [
+            theme.fg("accent", theme.bold(`Delete provider route: ${routeId}`)),
+            theme.fg("dim", join(target.root, "config.json")),
+            "",
+            ...warning,
+            "",
+            theme.fg("dim", `${this.label("crtr.setup.confirm.accept")} delete   ${this.label("crtr.setup.confirm.back")} cancel`),
+        ];
+    }
+    /** 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")
+            // Provider ids run to dozens of options, so the picker windows on its
+            // selection like the list does — a tail cut would scroll the cursor off.
+            return frame(this.fitBody(this.renderChoicePicker(), MODELS_CHROME_LINES + this.choiceIndex, 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));
+        if (this.mode === "route-form") {
+            const selectedLine = 3 + (this.routeForm?.index ?? 0);
+            return frame(this.fitBody(this.renderRouteForm(width), selectedLine, contentBudget));
+        }
+        if (this.mode === "route-delete")
+            return frame(fitTail(this.renderRouteDelete(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", "Provider routes"));
+        body.push(theme.fg("dim", `${theme.fg("warning", "•")} override in ${target.label} · a declared route replaces the ladders above at launch · id, then family · source · provider`));
+        const routeCellWidth = Math.max(10, Math.floor((innerWidth - 8) / 4));
+        body.push(`${" ".repeat(4)}${MODEL_STRENGTHS.map((strength) => padAnsi(theme.fg("dim", strength), routeCellWidth)).join(" ")}`);
+        const routeIds = this.routeIds();
+        if (routeIds.length === 0) {
+            body.push(theme.fg("dim", "  No routes declared — the ladders above are used."));
+        }
+        for (const row of this.rows) {
+            if (row.section !== "route" || row.routeId === null)
+                continue;
+            const routeId = row.routeId;
+            const complete = this.modelRoutes[routeId];
+            const route = complete ?? this.legacyModelRoutes[routeId];
+            const isSel = row === selectedRow;
+            if (isSel)
+                selectedLine = body.length;
+            const marker = isSel ? theme.fg("accent", "▶") : " ";
+            const over = this.rawTarget?.modelRoutes?.[routeId] !== undefined
+                ? theme.fg("warning", "•")
+                : " ";
+            const incomplete = complete ? "" : theme.fg("warning", " · incomplete");
+            const metadata = theme.fg("dim", `${route.family} · ${route.credentialSource} · ${route.providerId}`);
+            body.push(`${marker} ${over}${theme.fg(isSel ? "accent" : "dim", routeId)}  ${metadata}${incomplete}`);
+            const cells = MODEL_STRENGTHS.map((strength) => {
+                const value = route.models[strength];
+                const rendered = padAnsi(truncateToWidth(shortRef(value), routeCellWidth), routeCellWidth);
+                return theme.fg(value === undefined ? "warning" : "dim", rendered);
+            });
+            body.push(`${" ".repeat(4)}${cells.join(" ")}`);
+        }
+        const newRouteRow = this.rows.find((row) => row.section === "route" && row.routeId === null);
+        const newRouteSelected = newRouteRow === selectedRow;
+        if (newRouteSelected)
+            selectedLine = body.length;
+        body.push(`${newRouteSelected ? theme.fg("accent", "▶") : " "} ${theme.fg(newRouteSelected ? "accent" : "dim", "+ New route")}`);
+        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 familyCellW = 12;
+        const strCellW = 9;
+        const groupW = familyCellW + 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", "Family"), familyCellW)} ${padAnsi(theme.fg("dim", "Strength"), strCellW)} ${padAnsi(theme.fg("dim", "Family"), familyCellW)} ${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 = this.portableSelection(cfg?.model);
+            const orchInherited = cfg?.orchestratorModel === undefined;
+            const orchSel = this.portableSelection(cfg?.orchestratorModel ?? cfg?.model);
+            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}${this.familyLabel(baseSel.family)}`, familyCellW, isSel && this.column === 0, false),
+                cell(`${baseOver}${baseSel.strength}`, strCellW, isSel && this.column === 1, false),
+                cell(`${orchOver}${this.familyLabel(orchSel.family)}`, familyCellW, 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));
+    }
+}