@rizal72/oc-models-pro 0.1.3 → 0.1.5

package/tui.js

@@ -0,0 +1,1024 @@
+import { effect as _$effect } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+// oc-models-pro — the model list with prices, ported from Pi's `pi-model-pro`.
+//
+// We render it ourselves, in a `session.panel`: the native dialog caps an option line at 60 columns,
+// measured, which cannot hold prices, context, intelligence and the Go credit side by side. The host
+// owns the panel's placement and focus; the list owns its columns.
+//
+// Prices are native, never adjusted: the multiplier gets its own column and the effective price only
+// decides the order, so a promoted model sorts first while the figures stay honest. The model in use
+// is the first row whatever it costs: the free/paying split never buries it.
+import { Plugin } from "@opencode/plugin/tui";
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { appendFileSync, readFileSync, renameSync, watch, writeFileSync } from "node:fs";
+import { homedir, tmpdir } from "node:os";
+import { join } from "node:path";
+import { benchFor, benchIndex } from "./bench.ts";
+import { credits, goPlan, key } from "./multipliers.ts";
+import { LEGEND_MIN, fit, hintLines, rowWidth } from "./fit.ts";
+import { tagsFor } from "./tags.ts";
+const SCOPES = ["all", "favorites", "paying"];
+const prefKey = (providerID, modelID) => providerID + "/" + modelID;
+
+/** The picker's own state file: `favorite[]` and `recent[]` are `{ providerID, modelID }`. */
+
+const PREFS_FILE = join(homedir(), ".local/state/opencode/model.json");
+/** Same directory, a leading dot: the host watches `model.json.*`, not this. */
+const TEMP_FILE = join(homedir(), ".local/state/opencode", ".model.json.tmp");
+let prefs = {
+  favorite: new Set(),
+  recent: new Map(),
+  variants: new Map()
+};
+
+/** The host's `favorite[]` as it is in the file: a key cannot be split back — a model id may hold a slash. */
+function readFavourites() {
+  try {
+    const data = JSON.parse(readFileSync(PREFS_FILE, "utf8"));
+    if (!Array.isArray(data.favorite)) return [];
+    return data.favorite.filter(entry => typeof entry?.providerID === "string" && typeof entry?.modelID === "string");
+  } catch (error) {
+    // A missing file is not an error: starting empty creates it on the write. Anything else is.
+    if (error?.code === "ENOENT") return [];
+    trace("favourites: " + (error instanceof Error ? error.message : String(error)));
+    return undefined;
+  }
+}
+
+/** Rewrites `favorite[]` with the rest of the file untouched. The host watches this path and
+ *  `model.json.*`, so the atomic rename is seen and the native picker, `model.cycle_favorite` and this
+ *  list stay in step; a dot in front keeps the temp name outside that glob. */
+function writeFavourites(list) {
+  try {
+    let raw;
+    try {
+      raw = JSON.parse(readFileSync(PREFS_FILE, "utf8"));
+    } catch (error) {
+      if (error?.code !== "ENOENT") throw error;
+      raw = {};
+    }
+    raw.favorite = list;
+    writeFileSync(TEMP_FILE, JSON.stringify(raw));
+    renameSync(TEMP_FILE, PREFS_FILE);
+    return true;
+  } catch (error) {
+    trace("favourites: " + (error instanceof Error ? error.message : String(error)));
+    return false;
+  }
+}
+function toggleFavorite(providerID, modelID) {
+  const key = prefKey(providerID, modelID);
+  const list = readFavourites();
+  if (!list) return undefined;
+  const kept = list.filter(entry => prefKey(entry.providerID, entry.modelID) !== key);
+  const on = kept.length === list.length;
+  return writeFavourites(on ? [...kept, {
+    providerID,
+    modelID
+  }] : kept) ? on : undefined;
+}
+function readPrefs() {
+  const parsed = {
+    favorite: new Set(),
+    recent: new Map(),
+    variants: new Map()
+  };
+  try {
+    const data = JSON.parse(readFileSync(PREFS_FILE, "utf8"));
+    for (const entry of data.favorite ?? []) parsed.favorite.add(prefKey(entry.providerID, entry.modelID));
+    for (const [index, entry] of (data.recent ?? []).entries()) parsed.recent.set(prefKey(entry.providerID, entry.modelID), index);
+    for (const [model, variant] of Object.entries(data.variant ?? {})) if (typeof variant === "string") parsed.variants.set(model, variant);
+  } catch (error) {
+    // A corrupt state file empties the favourites and the recent list: say so instead of pretending.
+    trace("prefs unreadable: " + (error instanceof Error ? error.message : String(error)));
+  }
+  return parsed;
+}
+
+/** What the Go plan makes a model cost: the figure the effective order sorts by. An unknown price is
+ *  not zero — it sorts last, or it would sit at the top of the cheapest list forever. */
+function effective(row) {
+  if (row.input === undefined) return Number.POSITIVE_INFINITY;
+  return row.input / (row.credit || 1);
+}
+const SORTS = [{
+  label: "effective price",
+  short: "effective↑",
+  value: effective
+}, {
+  label: "input price",
+  short: "in↑",
+  value: row => row.input ?? Number.POSITIVE_INFINITY
+}, {
+  label: "output price",
+  short: "out↑",
+  value: row => row.output ?? Number.POSITIVE_INFINITY
+}, {
+  label: "input + output",
+  short: "in+out↑",
+  value: row => row.input === undefined || row.output === undefined ? Number.POSITIVE_INFINITY : (row.input + row.output) / (row.credit || 1)
+}, {
+  label: "context window",
+  short: "ctx↓",
+  value: row => row.context === undefined ? Number.POSITIVE_INFINITY : -row.context
+},
+// A missing score sorts last, never first: Pi's rule, and the honest one.
+{
+  label: "intelligence",
+  short: "int↓",
+  value: row => -(row.int ?? -1)
+}, {
+  label: "speed",
+  short: "speed↓",
+  value: row => -(row.tps ?? -1)
+}, {
+  label: "recently used",
+  short: "recent",
+  value: row => prefs.recent.get(prefKey(row.providerID, row.modelID)) ?? 1e9
+}, {
+  label: "name",
+  short: "name",
+  value: row => 0
+}];
+
+/** Fallbacks, used only when the theme defines none of the candidates. */
+const FALLBACK_DIM = "#8a8a8a";
+const FALLBACK_ACCENT = "#5a9fd4";
+function tokens(value) {
+  if (value === undefined) return "";
+  if (value >= 1_000_000) return Math.round(value / 1_000_000) + "M";
+  if (value >= 1000) return Math.round(value / 1000) + "k";
+  return String(value);
+}
+
+/**
+ * Every cell is exactly `width` characters: text that does not fit is cut, never shifted right. The
+ * columns are hand-padded monospace, so one `padStart` short of its width slides the whole row.
+ */
+function cell(text, width, align = "end") {
+  const cut = text.length > width ? text.slice(0, width) : text;
+  return align === "end" ? cut.padStart(width) : cut.padEnd(width);
+}
+
+/** Two letters and the gap after them: always four characters, or the name column shifts left. */
+function padTag(letters) {
+  return (letters.padEnd(2) + "  ").slice(0, 4);
+}
+
+/**
+ * Column widths live in `fit.ts`: they are no longer fixed. The table is 85 characters at its widest
+ * and the name gives way first (down to 24), then whole columns go. `panel.width` reads as pixels
+ * on the first render, so `fit` clamps anything implausible back to the wide layout.
+ */
+function label(name, width) {
+  return name.length > width ? name.slice(0, width - 1) + "…" : name.padEnd(width);
+}
+
+/** A price cell; blank when the catalogue has no figure, "free" when the figure is zero. */
+function price(value, width) {
+  if (value === undefined) return cell("", width);
+  const shown = value === 0 ? "free" : String(Math.round(value * 1000) / 1000);
+  return cell(shown, width);
+}
+function isGo(providerID) {
+  return providerID === "opencode-go";
+}
+function free(row) {
+  return row.input === 0 && row.output === 0;
+}
+function headerRow(f) {
+  return ["  ", "    ", "model".padEnd(f.name), cell("in", 6), cell("out", 6), ...(f.ctx ? [cell("ctx", 5)] : []), ...(f.int ? [cell("int", 5)] : []), ...(f.tkps ? [cell("tok/s", 6)] : []), cell("cred", 4), ...(f.note ? [cell("note", 6)] : [])].join(" ");
+}
+function modelRow(row, mine, favourite, f) {
+  const notes = [row.peak ? "peak*" + row.peak : "", row.promo ? "+" + row.promo + "x" : ""].filter(Boolean);
+  return [(mine ? "●" : " ") + (favourite ? "*" : " "), padTag(row.tag), label(row.name, f.name), price(row.input, 6), price(row.output, 6), ...(f.ctx ? [cell(tokens(row.context), 5)] : []), ...(f.int ? [cell(row.int !== undefined ? row.int.toFixed(1) : "", 5)] : []), ...(f.tkps ? [cell(row.tps !== undefined ? "~" + Math.round(row.tps) : "", 6)] : []),
+  // Any credit other than 1 changes the effective price, so any of them is shown.
+  cell(row.credit !== 1 ? "×" + row.credit : "", 4), ...(f.note ? [cell(notes.join(" "), 6)] : [])].join(" ");
+}
+const TRACE = join(tmpdir(), "oc-models-pro.log");
+
+/** The tail is the part worth reading; the file is trimmed at startup, never during a session. */
+const TRACE_LINES = 1000;
+function trace(message) {
+  try {
+    appendFileSync(TRACE, new Date().toISOString() + " " + message + "\n");
+  } catch {}
+}
+
+/** Keeps the log to its last `TRACE_LINES` lines, so it neither grows without bound nor loses the recent past. */
+function trimTrace() {
+  try {
+    const lines = readFileSync(TRACE, "utf8").split("\n");
+    if (lines.length > TRACE_LINES) writeFileSync(TRACE, lines.slice(-TRACE_LINES).join("\n"));
+  } catch {}
+}
+export default Plugin.define({
+  id: "oc-models-pro",
+  setup(context) {
+    trimTrace();
+    const ui = context.ui;
+    const themeColour = (...paths) => {
+      for (const path of paths) {
+        let node = context.theme;
+        for (const key of path) node = node?.[key];
+        if (node !== undefined && node !== null) return node;
+      }
+      return undefined;
+    };
+    const BASE = themeColour(["text", "base"]);
+    const DIM = themeColour(["text", "muted"], ["text", "faint"]) ?? FALLBACK_DIM;
+    const ACCENT = themeColour(["syntax", "function"], ["syntax", "variable"]) ?? FALLBACK_ACCENT;
+    // Theme colours reach us as RGBA objects; `fg` takes them, a box background does not — it wants
+    // a string, so the two surfaces are converted to hex.
+    const hex = node => {
+      if (typeof node === "string") return node;
+      const buffer = node?.buffer;
+      if (!buffer) return undefined;
+      const channels = [0, 1, 2].map(index => Math.max(0, Math.min(255, Number(buffer[index]) || 0)).toString(16).padStart(2, "0"));
+      return "#" + channels.join("");
+    };
+    const SURFACE = hex(themeColour(["surface", "base"], ["background", "raised", "base"]));
+    // The cyan the native controls use when focused; the row text flips to the page colour on top.
+    const SELECTED = hex(themeColour(["background", "action", "primary", "focused"], ["surface", "high"]));
+    const ON_SELECTED = hex(themeColour(["background", "base"], ["text", "base"]));
+    const BORDER = hex(themeColour(["border", "base"], ["text", "faint"]));
+    trace("setup: context=" + Object.keys(context).join(","));
+    prefs = readPrefs();
+    let creditIndex = new Map();
+    let bench = new Map();
+    /** False when the Go page could not be read and no cache was there: the credits are all 1. */
+    let creditsKnown = false;
+    // Signals, not plain variables: the header shows them, and a plain variable left the title
+    // saying "effective price" whatever the list was actually sorted by.
+    const [sort, setSort] = createSignal(0);
+    const [grouped, setGrouped] = createSignal(true);
+    const [scope, setScope] = createSignal("all");
+    function fail(label, error) {
+      trace(label + ": " + (error instanceof Error ? error.message + " @ " + (error.stack ?? "").split("\n")[1] : String(error)));
+    }
+    function locationRef() {
+      return context.location ?? context.data.location.default();
+    }
+
+    /** The collections live under `data.location`; per location, and empty until synced once. */
+    function listModels() {
+      try {
+        return context.data.location.model.list(locationRef()) ?? [];
+      } catch (error) {
+        fail("models", error);
+        return [];
+      }
+    }
+    function listProviders() {
+      try {
+        return context.data.location.provider.list(locationRef()) ?? [];
+      } catch (error) {
+        fail("providers", error);
+        return [];
+      }
+    }
+    function rows() {
+      const providers = new Map(listProviders().map(provider => [provider.id, provider.name]));
+      const tags = tagsFor([...providers].map(([id, name]) => ({
+        id,
+        name
+      })));
+      const result = [];
+      for (const model of listModels()) {
+        const cost = (model.cost ?? []).find(entry => !entry.tier) ?? model.cost?.[0];
+        const limit = model.limit ?? {};
+        const score = benchFor(bench, model.name, model.modelID);
+        result.push({
+          name: model.name,
+          providerID: model.providerID,
+          modelID: model.modelID,
+          // The host names an account-bound provider `<account> / <Provider>`, which in a group
+          // header reads as if the account were the thing: provider first, account in brackets.
+          provider: (providers.get(model.providerID) ?? model.providerID).replace(/^(.+?) \/ (.+)$/, "$2 ($1)"),
+          tag: tags.get(model.providerID) ?? model.providerID.slice(0, 2).toUpperCase(),
+          // A missing figure stays missing: a 0 here would put an unknown model at the top of the
+          // cheapest list and claim a context window it never declared.
+          input: typeof cost?.input === "number" ? cost.input : undefined,
+          output: typeof cost?.output === "number" ? cost.output : undefined,
+          context: typeof limit.context === "number" ? limit.context : undefined,
+          // The page describes the Go plan only, and its names are not the catalogue's: match the
+          // model id, and only on the provider the plan applies to. By name alone, OpenRouter's
+          // "DeepSeek V4.1 Flash" inherited the Go credit.
+          credit: isGo(model.providerID) ? creditIndex.get(key(model.modelID))?.credit ?? 1 : 1,
+          promo: isGo(model.providerID) ? creditIndex.get(key(model.modelID))?.promo : undefined,
+          peak: isGo(model.providerID) ? creditIndex.get(key(model.modelID))?.peak : undefined,
+          int: score?.int,
+          tps: score?.tps,
+          enabled: model.enabled !== false
+        });
+      }
+      // Every provider keeps its row: the same model on `deepseek` and on `opencode-go` is two
+      // different offers, and hiding one hid `deepseek-v4-pro` from the provider that hosts it.
+      return result;
+    }
+    async function warm() {
+      const ref = locationRef();
+      try {
+        if (listModels().length === 0) await context.data.location.model.sync(ref);
+        if (listProviders().length === 0) await context.data.location.provider.sync(ref);
+        trace("warm: models=" + listModels().length + " providers=" + listProviders().length);
+      } catch (error) {
+        fail("warm", error);
+      }
+    }
+    async function open() {
+      prefs = readPrefs();
+      await warm();
+      // One fetch a day at most; a failure only costs the credit column and the effective ordering.
+      const plan = await goPlan();
+      creditIndex = plan ? credits(plan) : new Map();
+      bench = await benchIndex();
+      creditsKnown = creditIndex.size > 0;
+      trace("open: models=" + listModels().length + " bench=" + bench.size + " plan=" + (plan ? "$" + plan.price + " " + plan.limits.length + " rows" : "none") + " credits=" + creditIndex.size + " prefs=" + prefs.favorite.size + "/" + prefs.recent.size);
+      if (!ui.panel.open("oc-models-pro")) {
+        ui.toast.show({
+          message: "open a session first",
+          variant: "warning"
+        });
+        return;
+      }
+      trace("open: panel requested");
+    }
+    const Panel = props => {
+      // Who had the focus before the panel took it: the prompt itself. The renderer can hand it back,
+      // and nothing else in the API can — no host command focuses the prompt from a plugin.
+      const previousFocus = context.renderer?.currentFocusedRenderable;
+      trace("panel: previous focus=" + (previousFocus ? previousFocus.constructor?.name ?? "?" : "none"));
+      const [selected, setSelected] = createSignal(undefined);
+      /** The panel's width, in columns, and the layout it buys — reactive: the host resizes it. */
+      const width = createMemo(() => Math.floor(Number(props.panel.width) || 0), undefined, {
+        equals: Object.is
+      });
+      // The scrollbox draws its scrollbar in the last column, so the table gets one less.
+      // Both layouts carry an equality check: the width settles from pixels to columns on open,
+      // and a memo that fires on that tick re-renders the panel for no visual change — which is
+      // what took the focus off the search field.
+      const fitted = createMemo(() => fit(width() - 1), undefined, {
+        equals: (a, b) => a.name === b.name && a.tkps === b.tkps && a.note === b.note && a.ctx === b.ctx && a.int === b.int
+      });
+      const hints = createMemo(() => hintLines(width()), undefined, {
+        equals: (a, b) => a.join("\n") === b.join("\n")
+      });
+      /** The legend shortens when the panel cannot hold the long one. */
+      const compactLegend = createMemo(() => width() < LEGEND_MIN, undefined, {
+        equals: Object.is
+      });
+      // Hover moves the selection, like the native lists; during a wheel scroll the host fires
+      // over-events on whatever row lands under the pointer, so they are ignored until it stops.
+      let lastScroll = 0;
+      const hover = key => {
+        if (Date.now() - lastScroll < 150) return;
+        if (selectedKey() !== key) setSelected(key);
+      };
+      const [query, setQuery] = createSignal("");
+      // The app's state file can change under us (a toggle here, a model switched by the host);
+      // bumping this is what re-reads it and re-renders the rows.
+      const [revision, setRevision] = createSignal(0);
+      // The input keeps its own text and cursor; clearing means clearing it too.
+      let field;
+      /** Diagnostic: more than one mount per open means the panel is being rebuilt under us. */
+      let inputMounts = 0;
+      /**
+       * Who the host's renderer has focus on: the truth the blur/refocus guessing could only infer.
+       * Clicking a row or the field moves it without necessarily firing a blur on the input.
+       */
+      const holdsField = () => Boolean(field) && context.renderer?.currentFocusedRenderable === field;
+      /**
+       * Hands the focus back to whoever held it before the panel opened — the prompt. The host does not
+       * do it for a panel closed by a click, and there is no command that focuses the prompt: this is
+       * the renderer's own method, and it is what makes a click on a row behave like `esc`.
+       */
+      const focusPrompt = () => {
+        try {
+          if (!previousFocus || previousFocus.isDestroyed || !context.renderer?.focusRenderable) {
+            trace("focus: no target");
+            return;
+          }
+          context.renderer.focusRenderable(previousFocus);
+          trace("focus: restored, current=" + (context.renderer.currentFocusedRenderable === previousFocus ? "yes" : "no"));
+        } catch (error) {
+          fail("focus", error);
+        }
+      };
+      const clear = () => {
+        setQuery("");
+        if (field && !field.isDestroyed) field.value = "";
+      };
+
+      // The host activates a panel's keyboard layers only while it owns input, and it disposes them
+      // when the panel unmounts: measured three openings in a row, every one reading 10 reachable
+      // `models-pro.*` commands and never 20 — a leaked layer would show up here first.
+      try {
+        trace("panel: " + context.keymap.commands().filter(entry => String(entry.id ?? "").startsWith("models-pro.")).length + " models-pro commands reachable");
+      } catch (error) {
+        fail("panel commands", error);
+      }
+
+      // The state file is shared: the native picker and `model.cycle_favorite` write it while this
+      // panel is open. Watching the directory (not the file) survives the rename, and every event
+      // re-reads the file so the star and the `favorites` scope stay true.
+      try {
+        const watcher = watch(join(homedir(), ".local/state/opencode"), (_event, name) => {
+          if (String(name) !== "model.json") return;
+          prefs = readPrefs();
+          setRevision(revision() + 1);
+        });
+        onCleanup(() => watcher.close());
+      } catch (error) {
+        fail("watch prefs", error);
+      }
+      const mineKey = createMemo(() => {
+        const mine = ui.model.current();
+        return mine ? prefKey(mine.providerID, mine.modelID) : undefined;
+      });
+
+      /** Built only when the filter, the scope or a toggle changes — never on a selection move. */
+      const itemList = createMemo(() => {
+        revision();
+        const mine = mineKey();
+        const needle = query().trim().toLowerCase();
+        let list = rows().filter(row => row.enabled);
+        if (scope() === "favorites") list = list.filter(row => prefs.favorite.has(prefKey(row.providerID, row.modelID)) || prefKey(row.providerID, row.modelID) === mine);
+        if (scope() === "paying") list = list.filter(row => !free(row) || prefKey(row.providerID, row.modelID) === mine);
+        if (needle) list = list.filter(row => (row.name + " " + row.provider + " " + row.providerID).toLowerCase().includes(needle));
+        list = [...list].sort((a, b) => {
+          const mineA = prefKey(a.providerID, a.modelID) === mine;
+          const mineB = prefKey(b.providerID, b.modelID) === mine;
+          if (mineA !== mineB) return mineA ? -1 : 1;
+          if (SORTS[sort()].label !== "name") {
+            const delta = SORTS[sort()].value(a) - SORTS[sort()].value(b);
+            if (delta) return delta;
+          }
+          return a.name.localeCompare(b.name);
+        });
+
+        // Free models never enter the price order: they are not cheap, they are unmetered, and at
+        // the top they hide everything that costs something. Grouped, each one still sits under
+        // its own provider, after that provider's paying rows — the group answers "who serves
+        // this", and a global "Free" bucket would answer it wrong. Flat, they keep one bucket.
+        const items = [];
+        if (grouped()) {
+          const groups = new Map();
+          for (const row of list) {
+            const bucket = groups.get(row.provider) ?? [];
+            bucket.push(row);
+            groups.set(row.provider, bucket);
+          }
+          // Two bits: the model in use first, then the active order inside each of the two classes.
+          // It leads its group even when it is free — it is the state of the session, not a price.
+          for (const bucket of groups.values()) bucket.sort((a, b) => {
+            const mineA = prefKey(a.providerID, a.modelID) === mine;
+            const mineB = prefKey(b.providerID, b.modelID) === mine;
+            if (mineA !== mineB) return mineA ? -1 : 1;
+            return Number(free(a)) - Number(free(b));
+          });
+          const names = [...groups.keys()].sort((a, b) => a.localeCompare(b));
+          // The provider of the model in use comes first, like the native picker.
+          const mineProvider = list.find(row => prefKey(row.providerID, row.modelID) === mine)?.provider;
+          if (mineProvider) names.sort((a, b) => a === mineProvider ? -1 : b === mineProvider ? 1 : 0);
+          for (const name of names) {
+            items.push({
+              header: name
+            });
+            for (const row of groups.get(name)) items.push({
+              row
+            });
+          }
+        } else {
+          // The model in use leads the list, free or not: it is the state of the session, not a
+          // price to compare. The other free models keep the bucket at the end.
+          for (const row of list) if (!free(row) || prefKey(row.providerID, row.modelID) === mine) items.push({
+            row
+          });
+          const freeRows = list.filter(row => free(row) && prefKey(row.providerID, row.modelID) !== mine);
+          if (freeRows.length) {
+            items.push({
+              header: "Free"
+            });
+            for (const row of freeRows) items.push({
+              row
+            });
+          }
+        }
+        return items;
+      });
+      const selectable = createMemo(() => itemList().flatMap(item => item.row ? [item.row] : []));
+
+      /** Derived: the stored key if it still exists, else the model in use, else the first row. */
+      const selectedKey = createMemo(() => {
+        const list = selectable();
+        const stored = selected();
+        if (stored && list.some(row => prefKey(row.providerID, row.modelID) === stored)) return stored;
+        const mine = mineKey();
+        if (mine && list.some(row => prefKey(row.providerID, row.modelID) === mine)) return mine;
+        const first = list[0];
+        return first ? prefKey(first.providerID, first.modelID) : undefined;
+      });
+      function move(delta) {
+        const list = selectable();
+        if (list.length === 0) return;
+        const at = list.findIndex(row => prefKey(row.providerID, row.modelID) === selectedKey());
+        const next = Math.min(list.length - 1, Math.max(0, (at === -1 ? 0 : at) + delta));
+        const key = prefKey(list[next].providerID, list[next].modelID);
+        setSelected(key);
+        reveal(key);
+      }
+
+      /** The list is taller than the panel: the selection has to drag the viewport with it. */
+      let scroller;
+      function reveal(key) {
+        const box = scroller;
+        if (!box || box.isDestroyed) return;
+        try {
+          box.scrollChildIntoView("mp-" + key);
+        } catch (error) {
+          fail("scroll", error);
+        }
+      }
+      function choose(target) {
+        const wanted = selectedKey();
+        const row = target ?? selectable().find(entry => prefKey(entry.providerID, entry.modelID) === wanted);
+        if (!row) return;
+        trace("choose: " + prefKey(row.providerID, row.modelID));
+        // Esc closes with the search field focused and the host hands the prompt its focus back; a
+        // click leaves it on the row, so the field takes it again before the panel goes away.
+        if (field && !field.isDestroyed) field.focus?.();
+        props.panel.close();
+        // The host returns the prompt's focus on its own only most of the time, and never while its
+        // unmount is still running: the saved renderable takes it back once the panel is gone.
+        if (props.panel.presentation === "panel") setTimeout(focusPrompt, 40);
+        void (async () => {
+          if (!(await selectModel(row))) {
+            // The native never fails here — it writes the selection itself — so this is the one
+            // thing it has no equivalent for. A failure nobody announced is worse.
+            const now = ui.model.current();
+            ui.toast.show({
+              message: row.name + " was not applied — the session kept " + (now ? now.providerID + "/" + now.modelID : "the previous model"),
+              variant: "error"
+            });
+            return;
+          }
+          await settleVariant(row);
+        })();
+      }
+
+      /**
+       * The host owns the model selection: the native picker writes it with the host's own
+       * `model.set`, per session and agent, and the prompt sends it to the server. The plugin API
+       * has no setter for it — `ui.model` reads it and changes its variant, nothing more — so the
+       * host makes the change: `model.cycle_favorite` ends on the first favourite, the same
+       * internal call the picker makes. The list is prepared for that call and put back right
+       * after. One entry is what makes the call safe to repeat: whatever is selected, it lands on
+       * that entry.
+       */
+      async function selectModel(row) {
+        // The upstream fix, when it lands: the host's setter, and no list at all.
+        const native = ui.model.set;
+        if (typeof native === "function") {
+          native.call(ui.model, {
+            providerID: row.providerID,
+            modelID: row.modelID
+          });
+          const now = ui.model.current();
+          return now?.providerID === row.providerID && now?.modelID === row.modelID;
+        }
+        const list = readFavourites();
+        if (!list) return false;
+        if (!writeFavourites([{
+          providerID: row.providerID,
+          modelID: row.modelID
+        }])) return false;
+        // The host watches the file: it needs a moment before the command reads the list.
+        await new Promise(resolve => setTimeout(resolve, 100));
+        let landed = false;
+        for (let attempt = 0; attempt < 20 && !landed; attempt++) {
+          // A second call covers the moment the host had not read the file yet.
+          if (attempt % 4 === 0) {
+            try {
+              context.keymap.dispatch("model.cycle_favorite");
+            } catch (error) {
+              fail("dispatch", error);
+              break;
+            }
+          }
+          const now = ui.model.current();
+          landed = now?.providerID === row.providerID && now?.modelID === row.modelID;
+          if (!landed) await new Promise(resolve => setTimeout(resolve, 50));
+        }
+        writeFavourites(list);
+        trace("select: " + row.name + (landed ? " landed" : " did not land"));
+        return landed;
+      }
+
+      /**
+       * A model whose variant was never chosen has none applied, and the native picker asks once for
+       * it. Same rule here: a saved entry — `default` included — means silence; no entry opens the
+       * question, and the host's own `variant.set` is what persists the answer.
+       */
+      async function settleVariant(row) {
+        // The file is the source, not the copy read at open: a variant saved meanwhile (native
+        // picker, prompt) has to count as an answer.
+        prefs = readPrefs();
+        if (prefs.variants.has(prefKey(row.providerID, row.modelID))) return;
+        // `list()` and `set()` act on the selected model, which is now the new one: the question
+        // is asked before anything could move it again.
+        let variants = [];
+        try {
+          variants = [...ui.model.variant.list()];
+        } catch (error) {
+          fail("variants", error);
+          return;
+        }
+        if (variants.length === 0) return;
+        trace("variants: " + variants.join(",") + " for " + row.name);
+        const picks = ["default", ...variants];
+        const chosen = await ui.dialog.select({
+          title: "Variant — " + row.name,
+          placeholder: "filter variants",
+          options: picks.map(id => ({
+            title: id === "default" ? "Default (no variant)" : id,
+            value: id,
+            description: ""
+          }))
+        });
+        // A dialog takes the focus and does not hand it back either: the same command, once it closed.
+        setTimeout(focusPrompt, 40);
+        // Cancelling leaves the model without a variant, and the question will come back, as in
+        // the native picker.
+        if (chosen === undefined) return;
+        const applied = ui.model.variant.set(chosen === "default" ? undefined : chosen);
+        trace("variant set: " + chosen + " -> " + applied);
+      }
+      function cycleSort() {
+        setSort((sort() + 1) % SORTS.length);
+      }
+      function recentSort() {
+        setSort(SORTS.findIndex(entry => entry.label === "recently used"));
+      }
+      function toggleGroups() {
+        setGrouped(!grouped());
+      }
+      function cycleScope() {
+        setScope(SCOPES[(SCOPES.indexOf(scope()) + 1) % SCOPES.length]);
+      }
+
+      /** Writes the app's state file, then re-reads it: the row and the native picker agree. */
+      function favourite() {
+        const wanted = selectedKey();
+        const row = selectable().find(entry => prefKey(entry.providerID, entry.modelID) === wanted);
+        if (!row) return;
+        const on = toggleFavorite(row.providerID, row.modelID);
+        if (on === undefined) {
+          ui.toast.show({
+            message: "could not write " + PREFS_FILE,
+            variant: "error"
+          });
+          return;
+        }
+        prefs = readPrefs();
+        setRevision(revision() + 1);
+        ui.toast.show({
+          message: row.name + (on ? " added to" : " removed from") + " favourites",
+          variant: on ? "success" : "info"
+        });
+      }
+      context.keymap.layer(() => ({
+        mode: "global",
+        enabled: () => props.panel.focused,
+        commands: [{
+          id: "models-pro.clear",
+          title: "Clear the search",
+          bind: "ctrl+u",
+          run: () => clear()
+        }, {
+          id: "models-pro.up",
+          title: "Previous model",
+          bind: "up",
+          run: () => move(-1)
+        }, {
+          id: "models-pro.down",
+          title: "Next model",
+          bind: "down",
+          run: () => move(1)
+        }, {
+          id: "models-pro.choose",
+          title: "Use the model",
+          bind: "enter",
+          run: () => choose()
+        }, {
+          id: "models-pro.sort",
+          title: "Sort",
+          bind: "ctrl+o",
+          run: () => cycleSort()
+        }, {
+          id: "models-pro.groups",
+          title: "Group by provider",
+          bind: "ctrl+g",
+          run: () => toggleGroups()
+        }, {
+          id: "models-pro.scope",
+          title: "Scope",
+          bind: "ctrl+s",
+          run: () => cycleScope()
+        }, {
+          id: "models-pro.recent",
+          title: "Recently used",
+          bind: "ctrl+r",
+          run: () => recentSort()
+        }, {
+          id: "models-pro.favorite",
+          title: "Toggle favourite",
+          bind: "ctrl+f",
+          run: () => favourite()
+        }, {
+          id: "models-pro.close",
+          title: "Clear the search, or close the list",
+          bind: "esc",
+          run: () => query() ? clear() : props.panel.close()
+        },
+        // `ctrl+y`: `f11` never reached the panel in the terminal. `ctrl+f` marks a favourite,
+        // as in the native dialog. `f` alone stays unusable: it would be typed into the search.
+        {
+          id: "models-pro.fullscreen",
+          title: "Full screen",
+          bind: "ctrl+y",
+          run: () => props.panel.toggleFullscreen()
+        }]
+      }));
+      trace("panel: mounted");
+
+      // A reflow — the width settling from pixels, the footer taking a second line — can take the
+      // focus off the search field. The panel still has it, so the field takes it back. This does
+      // not depend on the memo equality guards being honoured by the host's renderer.
+      createEffect(() => {
+        fitted();
+        hints();
+        const element = field;
+        if (!element || element.isDestroyed || !props.panel.focused || holdsField()) return;
+        trace("reflow: field takes the focus back");
+        element.focus();
+      });
+
+      // The table is hand-padded, so its width is measured on the real rows instead of trusted:
+      // a mismatch against what the panel can hold shows up in the trace next to every open.
+      try {
+        const sample = selectable()[0];
+        const f = fitted();
+        trace("panel widths: panel=" + width() + " header=" + headerRow(f).length + " row=" + (sample ? modelRow(sample, false, false, f).length : 0) + " fits=" + rowWidth(f) + " name=" + f.name + " cols=" + [f.tkps && "tok/s", f.note && "note", f.ctx && "ctx", f.int && "int"].filter(Boolean).join(",") + " rows=" + selectable().length);
+      } catch (error) {
+        fail("panel widths", error);
+      }
+      return (() => {
+        var _el$ = _$createElement("box"),
+          _el$2 = _$createElement("box"),
+          _el$3 = _$createElement("text"),
+          _el$4 = _$createElement("b"),
+          _el$6 = _$createElement("text"),
+          _el$7 = _$createTextNode(`  `),
+          _el$8 = _$createTextNode(` ·`),
+          _el$9 = _$createElement("text"),
+          _el$0 = _$createElement("b"),
+          _el$1 = _$createElement("text"),
+          _el$10 = _$createElement("box"),
+          _el$11 = _$createElement("text"),
+          _el$12 = _$createElement("box"),
+          _el$13 = _$createElement("input"),
+          _el$14 = _$createElement("box"),
+          _el$15 = _$createElement("text"),
+          _el$16 = _$createElement("scrollbox"),
+          _el$17 = _$createElement("box");
+        _$insertNode(_el$, _el$2);
+        _$insertNode(_el$, _el$10);
+        _$insertNode(_el$, _el$12);
+        _$insertNode(_el$, _el$14);
+        _$insertNode(_el$, _el$16);
+        _$insertNode(_el$, _el$17);
+        _$setProp(_el$, "flexDirection", "column");
+        _$setProp(_el$, "flexGrow", 1);
+        _$insertNode(_el$2, _el$3);
+        _$insertNode(_el$2, _el$6);
+        _$insertNode(_el$2, _el$9);
+        _$insertNode(_el$2, _el$1);
+        _$setProp(_el$2, "flexDirection", "row");
+        _$setProp(_el$2, "height", 1);
+        _$setProp(_el$2, "flexShrink", 0);
+        _$insertNode(_el$3, _el$4);
+        _$setProp(_el$3, "fg", BASE);
+        _$setProp(_el$3, "wrapMode", "none");
+        _$insertNode(_el$4, _$createTextNode(`Models`));
+        _$insertNode(_el$6, _el$7);
+        _$insertNode(_el$6, _el$8);
+        _$setProp(_el$6, "fg", DIM);
+        _$setProp(_el$6, "wrapMode", "none");
+        _$insert(_el$6, () => "sort: " + SORTS[sort()].short, _el$8);
+        _$insertNode(_el$9, _el$0);
+        _$setProp(_el$9, "fg", BASE);
+        _$setProp(_el$9, "wrapMode", "none");
+        _$insert(_el$0, scope);
+        _$setProp(_el$1, "fg", DIM);
+        _$setProp(_el$1, "wrapMode", "none");
+        _$insert(_el$1, () => " · " + (grouped() ? "grouped" : "flat") + (creditsKnown ? "" : " · credits n/a"));
+        _$insertNode(_el$10, _el$11);
+        _$setProp(_el$10, "height", 1);
+        _$setProp(_el$10, "flexShrink", 0);
+        _$setProp(_el$11, "fg", DIM);
+        _$setProp(_el$11, "wrapMode", "none");
+        _$insert(_el$11, () => compactLegend() ? "×N credit · peak*2 · +4x promo" : "(×N = Go credit · peak*2 = the tariff doubles at peak · +Nx = promotion)");
+        _$insertNode(_el$12, _el$13);
+        _$setProp(_el$12, "height", 3);
+        _$setProp(_el$12, "flexShrink", 0);
+        _$setProp(_el$12, "border", ["top", "bottom", "left", "right"]);
+        _$setProp(_el$12, "borderColor", BORDER);
+        _$setProp(_el$12, "paddingLeft", 1);
+        _$setProp(_el$12, "paddingRight", 1);
+        _$setProp(_el$12, "onMouseDown", () => {
+          // A click inside the field moves the host's focus elsewhere; take it back a tick later.
+          setTimeout(() => {
+            if (field && !field.isDestroyed) field.focus();
+          }, 1);
+        });
+        _$use(element => {
+          field = element;
+          if (!element) return;
+          const mount = ++inputMounts;
+          trace("panel: input mounted #" + mount);
+          // The native dialog's own recipe: tag it as the filter, then focus it a tick later.
+          element.traits = {
+            status: "FILTER"
+          };
+          setTimeout(() => {
+            trace("panel: input focus #" + mount + " destroyed=" + element.isDestroyed);
+            if (!element.isDestroyed) element.focus();
+          }, 1);
+        }, _el$13);
+        _$setProp(_el$13, "placeholder", "Search (ctrl+u clear)");
+        _$setProp(_el$13, "flexGrow", 1);
+        _$setProp(_el$13, "onInput", value => setQuery(typeof value === "string" ? value : ""));
+        _$insertNode(_el$14, _el$15);
+        _$setProp(_el$14, "height", 1);
+        _$setProp(_el$14, "flexShrink", 0);
+        _$setProp(_el$15, "fg", DIM);
+        _$setProp(_el$15, "wrapMode", "none");
+        _$insert(_el$15, () => headerRow(fitted()));
+        _$use(element => scroller = element, _el$16);
+        _$setProp(_el$16, "flexGrow", 1);
+        _$setProp(_el$16, "flexShrink", 1);
+        _$setProp(_el$16, "onMouseScroll", () => lastScroll = Date.now());
+        _$insert(_el$16, _$createComponent(For, {
+          get each() {
+            return itemList();
+          },
+          children: item => {
+            if (item.header) return (() => {
+              var _el$18 = _$createElement("text");
+              _$setProp(_el$18, "fg", DIM);
+              _$setProp(_el$18, "wrapMode", "none");
+              _$insert(_el$18, () => "── " + item.header + " " + "─".repeat(Math.max(0, 56 - item.header.length)));
+              return _el$18;
+            })();
+            const row = item.row;
+            const key = prefKey(row.providerID, row.modelID);
+            const mine = () => key === mineKey();
+            const active = () => key === selectedKey();
+            // A favourite is marked everywhere but in the favourites scope, where every row is one.
+            const favourite = () => {
+              revision();
+              return scope() !== "favorites" && prefs.favorite.has(key);
+            };
+            return (() => {
+              var _el$19 = _$createElement("box"),
+                _el$20 = _$createElement("text");
+              _$insertNode(_el$19, _el$20);
+              _$setProp(_el$19, "id", "mp-" + key);
+              _$setProp(_el$19, "height", 1);
+              _$setProp(_el$19, "onMouseOver", () => hover(key));
+              _$setProp(_el$19, "onMouseMove", () => hover(key));
+              _$setProp(_el$19, "onMouseDown", () => {
+                setSelected(key);
+                choose(row);
+              });
+              _$setProp(_el$20, "wrapMode", "none");
+              _$insert(_el$20, () => modelRow(row, mine(), favourite(), fitted()));
+              _$effect(_p$ => {
+                var _v$6 = active() ? SELECTED : undefined,
+                  _v$7 = active() ? ON_SELECTED : mine() ? ACCENT : BASE;
+                _v$6 !== _p$.e && (_p$.e = _$setProp(_el$19, "backgroundColor", _v$6, _p$.e));
+                _v$7 !== _p$.t && (_p$.t = _$setProp(_el$20, "fg", _v$7, _p$.t));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$19;
+            })();
+          }
+        }));
+        _$setProp(_el$17, "flexDirection", "column");
+        _$setProp(_el$17, "flexShrink", 0);
+        _$setProp(_el$17, "backgroundColor", SURFACE);
+        _$insert(_el$17, _$createComponent(For, {
+          get each() {
+            return hints();
+          },
+          children: line => (() => {
+            var _el$21 = _$createElement("box"),
+              _el$22 = _$createElement("text");
+            _$insertNode(_el$21, _el$22);
+            _$setProp(_el$21, "height", 1);
+            _$setProp(_el$22, "fg", DIM);
+            _$setProp(_el$22, "wrapMode", "none");
+            _$insert(_el$22, line);
+            return _el$21;
+          })()
+        }));
+        _$effect(_p$ => {
+          var _v$ = themeColour(["text", "faint"]),
+            _v$2 = themeColour(["text", "base"]),
+            _v$3 = themeColour(["background", "formfield", "focused"]),
+            _v$4 = themeColour(["text", "formfield", "focused"]),
+            _v$5 = hints().length;
+          _v$ !== _p$.e && (_p$.e = _$setProp(_el$13, "placeholderColor", _v$, _p$.e));
+          _v$2 !== _p$.t && (_p$.t = _$setProp(_el$13, "focusedTextColor", _v$2, _p$.t));
+          _v$3 !== _p$.a && (_p$.a = _$setProp(_el$13, "focusedBackgroundColor", _v$3, _p$.a));
+          _v$4 !== _p$.o && (_p$.o = _$setProp(_el$13, "cursorColor", _v$4, _p$.o));
+          _v$5 !== _p$.i && (_p$.i = _$setProp(_el$17, "height", _v$5, _p$.i));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        return _el$;
+      })();
+    };
+    context.ui.slot({
+      append: "session.panel",
+      render: panel => _$createComponent(Show, {
+        get when() {
+          return panel.name === "oc-models-pro";
+        },
+        get children() {
+          return _$createComponent(Panel, {
+            panel: panel
+          });
+        }
+      })
+    });
+    const command = {
+      id: "models-pro",
+      title: "Models with prices (pro)",
+      description: "Pick a model by price, context or credit multiplier",
+      slash: {
+        name: "models-pro"
+      },
+      palette: true,
+      bind: "<leader>p",
+      run: () => {
+        // The synchronous part of open() runs during the call, so it needs a plain try:
+        // a rejected promise would never see it.
+        try {
+          void open().catch(error => fail("open async", error));
+        } catch (error) {
+          fail("open sync", error);
+        }
+      }
+    };
+    // The types publish the keymap twice — `context.keymap` and `ui.keymap` — and this build answers
+    // for one of them only. Try both, record which one took it, never fail silently.
+    const keymaps = [["context.keymap", context.keymap], ["ui.keymap", context.ui?.keymap]];
+    let registered = false;
+    for (const [label, keymap] of keymaps) {
+      if (!keymap || typeof keymap.layer !== "function") {
+        trace(label + ": not a keymap (" + typeof keymap + ")");
+        continue;
+      }
+      try {
+        keymap.layer(() => ({
+          mode: "global",
+          commands: [command]
+        }));
+        trace("registered through " + label + "; bind=" + keymap.shortcuts("models-pro").join(","));
+        registered = true;
+        break;
+      } catch (error) {
+        trace(label + " failed: " + (error instanceof Error ? error.message : String(error)));
+      }
+    }
+    if (!registered) trace("no keymap accepted the command; ui=" + (context.ui ? Object.keys(context.ui).join(",") : "none"));
+  }
+});