@north-light/crouter 0.3.262 → 0.3.269

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

@@ -1,13 +1,13 @@
 import { envProfileId } from '../../../shared/env.js';
 import { ModelSelectorComponent, SettingsManager, ThinkingSelectorComponent, } from '@earendil-works/pi-coding-agent';
-import { truncateToWidth } from '@earendil-works/pi-tui';
+import { Input, 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 { readRawConfigAtRoot, persistDefaultKindModel, persistModelLadders, persistModelRoute, 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 '../../../core/tui/panel.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,
@@ -18,9 +18,9 @@ const PROVIDER_LABEL = {
     openai: "OpenAI",
 };
 const KIND_COLUMNS = [
-    { mode: "base", dimension: "provider" },
+    { mode: "base", dimension: "family" },
     { mode: "base", dimension: "strength" },
-    { mode: "orchestrator", dimension: "provider" },
+    { mode: "orchestrator", dimension: "family" },
     { mode: "orchestrator", dimension: "strength" },
 ];
 function modelConfigTargets() {
@@ -88,6 +88,8 @@ export class ModelsPanel {
     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
@@ -105,10 +107,11 @@ export class ModelsPanel {
     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;
+    choice;
+    choiceIndex = 0;
+    routeForm;
+    routeInput = new Input();
+    pendingRouteCell;
     onChange;
     constructor(tui, runtime, registry, matches, label) {
         this.tui = tui;
@@ -122,9 +125,27 @@ export class ModelsPanel {
         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();
+        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();
+        };
     }
     /** 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. */
@@ -160,10 +181,27 @@ export class ModelsPanel {
     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;
@@ -174,6 +212,8 @@ export class ModelsPanel {
     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();
@@ -200,15 +240,60 @@ export class ModelsPanel {
     columnsFor(row) {
         if (row.section === "ladder")
             return row.kind === "strength" ? this.providerKeys.length : 1;
+        if (row.section === "route")
+            return 1;
         return KIND_COLUMNS.length;
     }
     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.activateRouteField();
+                return true;
+            }
+            return true;
+        }
+        if (this.mode === "route-delete") {
+            if (this.matches("crtr.setup.confirm.accept", data)) {
+                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.commitDimensionPick();
+                this.commitChoice();
                 return true;
             }
             if (this.matches("crtr.setup.models.cancel", data)) {
@@ -216,11 +301,11 @@ export class ModelsPanel {
                 return true;
             }
             if (this.matches("crtr.setup.list-down", data)) {
-                this.dimPickIndex = Math.min((this.pendingDim?.options.length ?? 1) - 1, this.dimPickIndex + 1);
+                this.choiceIndex = Math.min((this.choice?.options.length ?? 1) - 1, this.choiceIndex + 1);
                 return true;
             }
             if (this.matches("crtr.setup.list-up", data)) {
-                this.dimPickIndex = Math.max(0, this.dimPickIndex - 1);
+                this.choiceIndex = Math.max(0, this.choiceIndex - 1);
                 return true;
             }
             return true;
@@ -306,6 +391,10 @@ export class ModelsPanel {
             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)
@@ -313,7 +402,28 @@ export class ModelsPanel {
             this.openDimensionPicker(row.name, col.mode, col.dimension);
         }
     }
-    /** Snapshot of the mode's current provider+strength. For orchestrator this
+    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) {
@@ -321,59 +431,322 @@ export class ModelsPanel {
         const value = mode === "orchestrator"
             ? (cfg?.orchestratorModel ?? cfg?.model)
             : cfg?.model;
-        return inferPortableModelSelection(value, this.ladders);
+        return this.portableSelection(value);
     }
     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));
+        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: (chosen) => {
+                const family = dimension === "family" ? chosen : current.family;
+                const strength = dimension === "strength"
+                    ? chosen
+                    : current.strength;
+                this.writeKindSelection(name, mode, family, strength);
+            },
+        };
+        this.choiceIndex = 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}`;
+    writeKindSelection(name, mode, family, strength) {
+        const token = `${family}/${strength}`;
         try {
             persistDefaultKindModel({
                 root: this.currentTarget().root,
-                kind: pending.name,
+                kind: name,
                 model: token,
-                orchestrator: pending.mode === "orchestrator",
+                orchestrator: 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;
+        const after = this.kinds[name];
+        const effective = mode === "orchestrator" ? after?.orchestratorModel : after?.model;
         if (effective !== token) {
-            const field = pending.mode === "orchestrator" ? "orchestratorModel" : "model";
+            const field = mode === "orchestrator" ? "orchestratorModel" : "model";
             const path = this.shadowingPath((raw) => {
-                const entry = raw.kinds?.[pending.name];
+                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();
+    }
+    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") {
+            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();
+    }
+    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 {
+            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;
+    }
+    deleteRoute() {
+        const routeId = this.routeForm?.existing;
+        if (!routeId) {
+            this.mode = "route-form";
+            this.notify();
+            return;
+        }
+        try {
+            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, SettingsManager.inMemory(), this.runtime, scoped.map((model) => ({ model })), onPick, () => this.closePicker());
+        this.modelSelector.focused = true;
+        this.mode = "model-picker";
         this.notify();
     }
     openModelPicker(providerKey, strength) {
@@ -385,18 +758,14 @@ export class ModelsPanel {
             : undefined;
         const scoped = registry
             .getAvailable()
-            .filter((m) => m.provider === expectedRuntime)
-            .map((m) => ({ model: m }));
+            .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.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();
+        this.showModelSelector(scoped, currentModel, (model) => this.onModelPicked(model));
     }
     onModelPicked(model) {
         if (!this.pending) {
@@ -421,8 +790,13 @@ export class ModelsPanel {
         this.closePicker();
     }
     onThinkingPicked(level) {
-        if (this.pending?.model)
+        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) {
             this.writeLadder(this.pending.model, level);
+        }
         this.closePicker();
     }
     writeLadder(model, level) {
@@ -446,14 +820,16 @@ export class ModelsPanel {
         }
     }
     closePicker() {
-        this.mode = "list";
+        this.mode = this.routeForm !== undefined ? "route-form" : "list";
         this.modelSelector = undefined;
         this.thinkingSelector = undefined;
         this.pending = undefined;
-        this.pendingDim = undefined;
+        this.pendingRouteCell = undefined;
+        this.choice = undefined;
         this.notify();
     }
     dispose() {
+        this.routeForm = undefined;
         this.closePicker();
     }
     targetLadderOverride(providerKey, strength) {
@@ -473,33 +849,98 @@ export class ModelsPanel {
             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. */
-    renderDimensionPicker(width) {
-        const pending = this.pendingDim;
-        if (!pending)
+    renderChoicePicker() {
+        const choice = this.choice;
+        if (!choice)
             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}`),
+            theme.fg("accent", theme.bold(choice.title)),
+            theme.fg("dim", choice.subtitle),
             "",
         ];
-        for (const [index, option] of pending.options.entries()) {
-            const active = index === this.dimPickIndex;
+        for (const [index, option] of choice.options.entries()) {
+            const active = index === this.choiceIndex;
             const marker = active ? theme.fg("accent", "\u25b6") : " ";
-            const label = pending.dimension === "provider"
-                ? PROVIDER_LABEL[option]
-                : option;
+            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
@@ -520,11 +961,19 @@ export class ModelsPanel {
         const contentBudget = Math.max(1, height);
         const frame = (lines) => renderRows(lines, width);
         if (this.mode === "dimension-picker")
-            return frame(fitTail(this.renderDimensionPicker(width), contentBudget));
+            // 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")),
@@ -597,12 +1046,48 @@ export class ModelsPanel {
             });
             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 provCellW = 12;
+        const familyCellW = 12;
         const strCellW = 9;
-        const groupW = provCellW + 1 + strCellW;
+        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.
@@ -615,7 +1100,7 @@ export class ModelsPanel {
                     : 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)}`);
+        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;
@@ -624,9 +1109,9 @@ export class ModelsPanel {
             if (isSel)
                 selectedLine = body.length;
             const cfg = this.kinds[row.name];
-            const baseSel = inferPortableModelSelection(cfg?.model, this.ladders);
+            const baseSel = this.portableSelection(cfg?.model);
             const orchInherited = cfg?.orchestratorModel === undefined;
-            const orchSel = inferPortableModelSelection(cfg?.orchestratorModel ?? cfg?.model, this.ladders);
+            const orchSel = this.portableSelection(cfg?.orchestratorModel ?? cfg?.model);
             const baseOver = this.targetKindOverride(row.name, false)
                 ? theme.fg("warning", "\u2022")
                 : " ";
@@ -634,9 +1119,9 @@ export class ModelsPanel {
                 ? theme.fg("warning", "\u2022")
                 : " ";
             const cells = [
-                cell(`${baseOver}${PROVIDER_LABEL[baseSel.provider]}`, provCellW, isSel && this.column === 0, false),
+                cell(`${baseOver}${this.familyLabel(baseSel.family)}`, familyCellW, 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}${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]}`);