clauderipple 0.2.0 → 0.3.0

package/dist/ui/app.js

@@ -9,6 +9,9 @@ function el(tag, attrs, children) {
     if (key === "class") node.className = value;
     else if (key === "text") node.textContent = value;
     else if (key === "checked") node.checked = Boolean(value);
+    // A textarea ignores the `value` attribute, so a form reopened on a saved provider showed an
+    // empty box and its save wiped what was there (instructionsAppend, 2026-09-23).
+    else if (key === "value" && tag === "textarea") node.value = value;
     else if (key.startsWith("on") && typeof value === "function") node.addEventListener(key.slice(2), value);
     else if (value !== undefined && value !== null) node.setAttribute(key, value);
   }
@@ -44,8 +47,13 @@ async function api(path, opts) {
   return body;
 }
 
-function configRequest(next) {
-  return api("/api/config", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify(next) });
+// The router writes `cli.models` to settings.json on this save (they only take effect there). If
+// that write could not happen it says so here — a slot that silently does nothing is the bug this
+// call used to be, so a failure must reach the screen rather than the router log.
+async function configRequest(next) {
+  const out = await api("/api/config", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify(next) });
+  if (out && out.warning) toast(out.warning, true);
+  return out;
 }
 
 function modelsOf(provider) {
@@ -65,9 +73,9 @@ function uniqueName(name, providers) {
 function groupedModels(config) {
   const groups = [];
   for (const [name, provider] of Object.entries(config.providers || {})) {
-    // A native Claude provider serves the OpenAI ingress (Codex) only, so it is not a mapping
-    // target: the router ignores a slot pointed at it and passes the request through instead.
-    if (provider.type === "anthropic") continue;
+    // A native Claude provider becomes a mapping target only after the explicit account-pool opt-in.
+    // API-key and legacy login providers remain OpenAI-ingress-only.
+    if (provider.type === "anthropic" && !provider.accountPool) continue;
     let models = modelsOf(provider);
     if (!models.length && provider.type === "chatgpt") models = CHATGPT_MODELS;
     if (models.length) groups.push({ name, provider, models });
@@ -79,11 +87,15 @@ function modelEffortLevels(provider, model) {
   const entry = modelsOf(provider).find((item) => item.id === model);
   return entry && Array.isArray(entry.effortLevels) ? entry.effortLevels : undefined;
 }
+// The ChatGPT ladders the Codex catalogue reports (measured 2026-09-23): every model takes
+// low..max, and only these add ultra. The live probe replaces this table when it can be reached.
+const CHATGPT_EFFORT_LEVELS = ["low", "medium", "high", "xhigh", "max"];
+const CHATGPT_ULTRA_MODELS = new Set(["gpt-5.6-terra", "gpt-5.6-sol", "gpt-6-astra", "gpt-6-sol"]);
 function fallbackEffortLevels(provider, model) {
   if (!provider) return [];
   const explicit = modelEffortLevels(provider, model);
   if (explicit !== undefined) return explicit;
-  if (provider.type === "chatgpt") return model === "gpt-5.6-luna" ? ["low", "medium", "high", "xhigh", "max", "ultra"] : ["low", "medium", "high", "xhigh", "max"];
+  if (provider.type === "chatgpt") return CHATGPT_ULTRA_MODELS.has(model) ? [...CHATGPT_EFFORT_LEVELS, "ultra"] : [...CHATGPT_EFFORT_LEVELS];
   const preset = provider.preset && presetById(provider.preset);
   if (provider.type === "openai-compatible") return provider.caps && provider.caps.reasoning === "effort" && Array.isArray(provider.caps.effortLevels) ? provider.caps.effortLevels : [];
   return provider.caps && Array.isArray(provider.caps.effortLevels) ? provider.caps.effortLevels : (preset && preset.effortLevels) || [];
@@ -104,6 +116,18 @@ function modelEffortTag(model) {
   if (!Array.isArray(model.effortLevels)) return null;
   return model.effortLevels.length ? t("providers.modelEffort") : t("providers.modelNoEffort");
 }
+// Routed models do not share a context window, so each picker entry carries its own. What the user
+// typed wins; otherwise whatever the vendor's /models reported (`context_length`); otherwise the
+// global cli.autoCompactWindow fallback. This is the model's real window, not a compaction point.
+function discoveredContextWindow(providerName, modelId) {
+  const provider = currentConfig && currentConfig.providers && currentConfig.providers[providerName];
+  const entry = provider && modelsOf(provider).find((item) => item.id === modelId);
+  return entry && Number.isFinite(entry.contextWindow) ? entry.contextWindow : undefined;
+}
+function savedContextWindow(modelId) {
+  const entry = ((currentConfig && currentConfig.cli && currentConfig.cli.extraModels) || []).find((item) => item.model === modelId);
+  return entry && Number.isFinite(entry.contextWindow) ? entry.contextWindow : undefined;
+}
 
 let currentConfig = null;
 let status = null;
@@ -189,9 +213,35 @@ function quotaLine(name) {
   const quota = status && status.chatgpt && status.chatgpt.quota && status.chatgpt.quota[name];
   const primary = quota && quota.rate_limits && quota.rate_limits.primary;
   if (!primary) return null;
-  const reset = primary.reset_after_seconds ? t("health.resetsIn", { hours: Math.max(1, Math.round(primary.reset_after_seconds / 3600)) }) : "";
-  return t("health.quota", { percent: primary.used_percent, reset });
+  // The usage figure is what anyone acts on. The reset countdown was a second number beside it
+  // that nobody does anything with, so it is left out.
+  return t("health.quota", { percent: primary.used_percent, reset: "" });
+}
+/**
+ * One line a person can read. Vendors answer with a JSON body and sometimes an escaped one inside
+ * it; the useful part is the status and the vendor's own message, not the envelope around them.
+ * The full text stays on the element's title.
+ */
+function shortError(text) {
+  const raw = String(text || "").trim();
+  if (!raw) return "";
+  const status = raw.match(/\b(\d{3})\b/);
+  let message = "";
+  try {
+    const json = raw.slice(raw.indexOf("{"));
+    const parsed = JSON.parse(json);
+    const err = parsed.error || parsed;
+    message = String(err.message || err.error || "").trim();
+  } catch { /* not JSON, or truncated: fall back to the raw head */ }
+  if (!message) message = raw.replace(/\s+/g, " ").slice(0, 120);
+  const head = status ? `HTTP ${status[1]}` : "";
+  const line = [head, message].filter(Boolean).join(" · ");
+  return line.length > 140 ? `${line.slice(0, 139)}…` : line;
 }
+
+/** How long a probe result speaks for the provider before the live reading takes over. */
+const PROBE_TTL_MS = 90_000;
+function probeIsStale(state) { return !state.pending && typeof state.at === "number" && Date.now() - state.at > PROBE_TTL_MS; }
 function stateFor(name) { return probeStates.get(name); }
 function chatgptLoginButton(onChange) {
   const button = el("button", { class: "btn secondary", type: "button", text: t("providers.chatgptLogin") });
@@ -228,14 +278,40 @@ async function startChatgptLogin(onChange) {
     onChange && onChange();
   }
 }
+/**
+ * Which of a provider's credentials are resting, and until when. Absent for a provider with one
+ * credential: a row that can only ever say "ready" is noise. Ids and labels only — never a key.
+ */
+function credentialLine(name) {
+  const pool = (status && status.credentials && status.credentials[name]) || [];
+  if (!pool.length) return null;
+  const parts = pool.map((c) => {
+    const who = c.label || c.id;
+    if (c.state === "quarantined") return `${who}: ${t("pool.quarantined")}`;
+    if (c.state === "cooling") return `${who}: ${t("pool.cooling", { seconds: c.cooldownSeconds ?? 0 })}`;
+    return `${who}: ${t("pool.ready")}`;
+  });
+  const resting = pool.filter((c) => c.state !== "ready").length;
+  return el("div", { class: `small ${resting ? "bad-text" : ""}`.trim(), text: parts.join(" · ") });
+}
+
 function providerState(name, provider) {
   const live = status && status.providers && status.providers[name];
   // Reaching the host is not the same as being able to use it. A ChatGPT provider with no
   // credentials would otherwise read "Connected" and send the user off believing it works.
   if (live && live.needsLogin) return badge("warn", t("providerStatus.loginNeeded"));
   const state = stateFor(name);
-  if (state) return state.ok ? badge("ok", t("providerStatus.connected")) : state.auth === "bad-key" ? badge("bad", t("providerStatus.keyNeeded")) : badge("bad", t("providerStatus.disconnected"));
+  // A probe is the better evidence — it actually called the provider — but only while it is fresh.
+  // One caught mid-restart used to sit there in red for the rest of the session, while the poll
+  // every five seconds said the provider was fine and a fresh probe agreed. After PROBE_TTL_MS the
+  // live reading takes over, so a stale failure heals itself instead of needing a manual re-check.
+  if (state && !probeIsStale(state)) {
+    return state.ok ? badge("ok", t("providerStatus.connected"))
+      : state.auth === "bad-key" ? badge("bad", t("providerStatus.keyNeeded"))
+      : badge("bad", t("providerStatus.disconnected"));
+  }
   if (live) return live.reachable ? badge("ok", t("providerStatus.connected")) : badge("bad", t("providerStatus.disconnected"));
+  if (state) return badge("bad", t("providerStatus.disconnected"));
   return badge("warn", t("providerStatus.checking"));
 }
 function renderHealthProviders() {
@@ -255,6 +331,8 @@ function renderHealthProviders() {
     ].filter(Boolean));
     const quota = quotaLine(name);
     if (quota) line.appendChild(el("div", { class: "small", text: quota }));
+    const pool = credentialLine(name);
+    if (pool) line.appendChild(pool);
     return line;
   }));
 }
@@ -277,6 +355,7 @@ function renderClients() {
   pickerButton.disabled = pickerBusy;
   pickerButton.onclick = () => togglePicker(!picker.enabled);
   renderClientPickerModels(picker.enabled);
+  renderModelSlots();
   const agentEnabled = Boolean(status.agentTitle);
   $("#client-agent-title-rows").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("picker.state") }), agentEnabled ? badge("ok", t("agentTitle.on")) : el("span", { class: "small", text: t("agentTitle.off") })]));
   const agentButton = $("#client-agent-title-toggle");
@@ -300,13 +379,103 @@ function renderClientPickerModels(enabled) {
     input.dataset.model = model.id;
     input.dataset.provider = group.name;
     input.dataset.name = labelOf(model);
-    input.addEventListener("change", () => void saveClientPickerModels());
-    box.appendChild(el("label", { class: "model-check" }, [input, el("span", { text: labelOf(model) }), el("small", { text: group.name })]));
+    const discovered = discoveredContextWindow(group.name, model.id);
+    const saved = savedContextWindow(model.id);
+    // Blank means "use the global fallback"; the placeholder says what that would be.
+    const windowField = el("input", {
+      type: "number", class: "model-window", min: "1", step: "1000",
+      value: saved !== undefined ? String(saved) : "",
+      placeholder: discovered !== undefined ? String(discovered) : t("slots.windowGlobal"),
+      title: t("slots.windowHelp"),
+    });
+    windowField.hidden = !input.checked;
+    windowField.dataset.model = model.id;
+    windowField.addEventListener("change", () => void saveClientPickerModels());
+    input.addEventListener("change", () => { windowField.hidden = !input.checked; void saveClientPickerModels(); });
+    // Two lines: the name owns the first — on one line it was the thing that collapsed, down to
+    // "GPT…" — and the provider and the window share the second. The field sits outside the
+    // <label>, because inside it every click toggles the checkbox instead of reaching the field.
+    box.appendChild(el("div", { class: "picker-model", title: model.id }, [
+      el("label", { class: "pm-main" }, [input, el("span", { text: labelOf(model) })]),
+      el("small", { text: group.name }),
+      windowField,
+    ]));
   }
   if (!box.childElementCount) box.appendChild(hint(t("slots.noProviderModels")));
 }
+// Claude Code picks these before a request exists, so routing cannot reach them: a search, a title
+// or a subagent goes wherever the CLI already decided. Left empty, Claude answers them — which is
+// why a routed session still searches on Claude quota until `smallFast` is pointed somewhere.
+const MODEL_SLOTS = ["smallFast", "subagent", "main"];
+
+// A provider the router measured as unable to search. Only the router can know this — it comes from
+// the status snapshot, never from the model's name — and the `smallFast` slot is exactly where it
+// matters, because a search sent to such a model comes back as invented prose or a visible failure.
+function providerCannotSearch(name) {
+  return Boolean(status && status.providers && status.providers[name] && status.providers[name].webSearch !== true);
+}
+
+function renderModelSlots() {
+  const rows = $("#client-model-slots");
+  if (!rows) return;
+  const chosen = (currentConfig.cli && currentConfig.cli.models) || {};
+  rows.replaceChildren(...MODEL_SLOTS.map((slot) => {
+    const select = el("select", {});
+    select.appendChild(el("option", { value: "", text: t("slots.slotDefault") }));
+    for (const group of groupedModels(currentConfig)) for (const model of group.models) {
+      const option = el("option", { value: model.id, text: `${labelOf(model)} · ${group.name}` });
+      if (chosen[slot] === model.id) option.selected = true;
+      // `smallFast` is what a WebSearch runs on, so an inability to search is fatal there and
+      // merely worth knowing everywhere else.
+      if (slot === "smallFast" && providerCannotSearch(group.name)) {
+        option.textContent += ` — ${t("slots.noWebSearch")}`;
+      }
+      select.appendChild(option);
+    }
+    // A model the config names but no provider offers any more would otherwise vanish silently.
+    if (chosen[slot] && !allKnownModelIds(currentConfig).has(chosen[slot])) {
+      const orphan = el("option", { value: chosen[slot], text: `${chosen[slot]} (?)` });
+      orphan.selected = true;
+      select.appendChild(orphan);
+    }
+    select.onchange = () => void saveModelSlots();
+    select.dataset.slot = slot;
+    return el("div", { class: "slot-row" }, [
+      el("span", { class: "k", text: t(`slots.slot.${slot}`) }),
+      select,
+      el("span", { class: "hint", text: t(`slots.slotHelp.${slot}`) }),
+    ]);
+  }));
+}
+
+async function saveModelSlots() {
+  if (!currentConfig) return;
+  const next = clone(currentConfig);
+  // Every slot is recorded, empty ones included. A select put back to "default (Claude)" has to
+  // remove the env key, and the router tells "clear this" from "leave this alone" by whether the
+  // slot is present at all — so dropping empty values here would make the choice a silent no-op.
+  const models = {};
+  for (const select of $all("#client-model-slots select")) models[select.dataset.slot] = select.value;
+  next.cli = { ...(next.cli || {}), models };
+  try {
+    await configRequest(next);
+    currentConfig = next;
+    // Saying "saved" over a choice that will make every search fail is the same silent no-op this
+    // screen was already guilty of once. The label on the option warns before the fact; this catches
+    // a session that already had it selected.
+    const owners = models.smallFast ? providersOffering(next, models.smallFast) : [];
+    if (owners.length && providerCannotSearch(owners[0])) toast(t("slots.noWebSearchWarn"), true);
+    else toast(t("slots.slotSaved"));
+  } catch (error) { toast(t("common.saveFailed"), true, error.message); }
+}
+
 function clientPickerSelections() {
-  return $all("#client-picker-models input:checked").map((input) => ({ id: input.dataset.model, name: input.dataset.name, provider: input.dataset.provider }));
+  return $all("#client-picker-models input[type=checkbox]:checked").map((input) => {
+    const field = $(`#client-picker-models input.model-window[data-model="${CSS.escape(input.dataset.model)}"]`);
+    const typed = field && field.value.trim() ? Number(field.value) : NaN;
+    const contextWindow = Number.isFinite(typed) && typed > 0 ? Math.floor(typed) : discoveredContextWindow(input.dataset.provider, input.dataset.model);
+    return { id: input.dataset.model, name: input.dataset.name, provider: input.dataset.provider, contextWindow };
+  });
 }
 async function saveClientPickerModels() {
   if (!currentConfig) return;
@@ -466,6 +635,33 @@ $("#slots-add").addEventListener("click", () => {
   updateSlotSummary();
 });
 function allKnownModelIds(config) { return new Set(groupedModels(config).flatMap((group) => group.models.map((model) => model.id))); }
+// Which providers carry this exact id. One is what lets the router route it with no rule at all;
+// two is the ambiguity it refuses to guess through, and the only case a rule is still needed.
+function providersOffering(config, id) { return groupedModels(config).filter((group) => group.models.some((model) => model.id === id)).map((group) => group.name); }
+// Whose entry this is. A `direct` rule used to answer it, but since 2026-09-19 a model routes by
+// the provider that declares it and most models have no rule at all — so the answer is the
+// providers, with the rule kept only for the ambiguity they cannot settle: two offering one id.
+function pickerOwner(config, id) {
+  const offering = providersOffering(config, id);
+  if (offering.length < 2) return offering[0];
+  const rule = (config.direct || []).filter((entry) => id.startsWith(entry.prefix)).sort((a, b) => b.prefix.length - a.prefix.length)[0];
+  return rule && offering.includes(rule.provider) ? rule.provider : offering[0];
+}
+/**
+ * The picker entries belonging to every provider but the one being saved — the ones no checkbox on
+ * this form can speak for, and which the rebuild must therefore be told to keep.
+ *
+ * Asking `direct` who owned them dropped all of them: the rules stopped being written in 2026-09-19
+ * and only the legacy `gpt-` prefix still matched anything, so one save of any provider emptied the
+ * picker of every non-GPT model (measured 2026-09-22 — deepseek and five more went that way).
+ */
+function pickerSelectionsExcept(config, providerName) {
+  return ((config.cli && config.cli.extraModels) || [])
+    .filter((entry) => entry.model !== null && entry.model !== undefined)
+    // The window is part of the entry; rebuilding without it reset every other provider's.
+    .map((entry) => ({ id: entry.model, name: entry.name, contextWindow: entry.contextWindow, provider: pickerOwner(config, entry.model) }))
+    .filter((entry) => entry.provider && entry.provider !== providerName);
+}
 function applyPickerSelections(next, selections) {
   const known = allKnownModelIds(next);
   // An entry no provider offers any more has no checkbox — the list is built from the providers —
@@ -479,12 +675,27 @@ function applyPickerSelections(next, selections) {
   const extras = new Map();
   const direct = new Map();
   for (const entry of selected) {
-    extras.set(entry.id, { model: entry.id, name: entry.name || entry.id });
-    direct.set(entry.id, { prefix: entry.id, provider: entry.provider });
+    // Without this the rebuild would drop the window on every checkbox click.
+    extras.set(entry.id, { model: entry.id, name: entry.name || entry.id, ...(Number.isFinite(entry.contextWindow) && entry.contextWindow > 0 ? { contextWindow: entry.contextWindow } : {}) });
+    // A rule per ticked model is no longer what makes it route: since 2026-09-19 the router sends a
+    // model to the one provider whose own `models` list carries it (routing.ts, "declared models").
+    // Writing one anyway restated the same fact in a second place and piled up — one config reached
+    // eighteen. It is still written for the case the router deliberately refuses to guess: an id
+    // that MORE THAN ONE provider offers, where only the operator knows which deal is meant. Keep
+    // this condition and the router's in step; the router is the one that decides.
+    if (providersOffering(next, entry.id).length > 1) direct.set(entry.id, { prefix: entry.id, provider: entry.provider });
   }
   next.cli = { ...(next.cli || {}), extraModels: [...extras.values()] };
-  const preservedDirect = (next.direct || []).filter((rule) => !known.has(rule.prefix) && !orphans.has(rule.prefix));
-  next.direct = [...preservedDirect, ...direct.values()];
+  // A rule survives when it is not a model id at all (the legacy `gpt-` prefix), or when it names an
+  // id two providers offer, which the router will not resolve on its own. Dropping that second kind
+  // because the model happens not to be ticked in the picker would stop it routing: the config here
+  // has `deepseek-v4-pro` on a direct mapping and on OpenCode Go, and it is in no picker list.
+  // An orphan goes either way — no provider offers it, and nothing in the interface can uncheck it.
+  const preservedDirect = (next.direct || []).filter((rule) =>
+    !orphans.has(rule.prefix) && (!known.has(rule.prefix) || providersOffering(next, rule.prefix).length > 1));
+  const byPrefix = new Map(preservedDirect.map((rule) => [rule.prefix, rule]));
+  for (const [prefix, rule] of direct) if (!byPrefix.has(prefix)) byPrefix.set(prefix, rule);
+  next.direct = [...byPrefix.values()];
   // A legacy gpt- prefix rule is intentionally retained by the filter above.
   return next;
 }
@@ -541,6 +752,9 @@ async function saveSlots() {
 function statusText(state) {
   if (!state) return t("providerStatus.checking");
   if (state.ok) return t("providerStatus.connected");
+  // The key was accepted and the plan refused: saying "check your key" sends the operator to the
+  // one thing that is not wrong. Measured 2026-09-22 against OpenCode's free-tier 403.
+  if (state.auth === "not-entitled") return t("providerStatus.notEntitled");
   if (state.auth === "bad-key") return t("providerStatus.keyNeeded");
   return t("providerStatus.disconnected");
 }
@@ -557,79 +771,339 @@ async function probeProvider(name, provider, onComplete) {
         headers,
         modelsUrl: provider.modelsUrl || (provider.preset && presetById(provider.preset) && presetById(provider.preset).modelsUrl),
         modelsAuthHeader: provider.modelsAuthHeader || (provider.preset && presetById(provider.preset) && presetById(provider.preset).modelsAuthHeader),
+        // The router reads the preset's fallback list to tag each discovered model with the wire it
+        // speaks, since /models reports ids alone and one plan can serve several wires.
+        preset: provider.preset,
         probeModel: provider.probeModel || (provider.preset && presetById(provider.preset) && (presetById(provider.preset).fallbackModels || [])[0] && presetById(provider.preset).fallbackModels[0].id),
+        // Some vendors refuse a request without it rather than merely losing the cache, so a test
+        // that leaves it out reports a broken provider that works perfectly.
+        sessionHeader: provider.sessionHeader || (provider.preset && presetById(provider.preset) && presetById(provider.preset).sessionHeader),
       };
     const result = await api("/api/providers/probe", {
       method: "POST",
       headers: { "content-type": "application/json" },
       body: JSON.stringify(body),
     });
-    probeStates.set(name, result);
+    probeStates.set(name, { ...result, at: Date.now() });
     onComplete && onComplete(result);
     return result;
   } catch (error) {
     const unavailable = error.status === 404;
     const result = { ok: false, auth: unavailable ? "unknown" : "unreachable", models: [], error: unavailable ? t("providers.apiSoon") : error.message, unavailable };
-    probeStates.set(name, result);
+    probeStates.set(name, { ...result, at: Date.now() });
     onComplete && onComplete(result);
     return result;
   } finally {
     renderHealthProviders();
   }
 }
-function providerCard(name, provider) {
-  const card = el("article", { class: "card provider-card" });
-  const title = el("h2", { text: name });
-  const stateLine = el("div", { class: "provider-state" });
-  const modelText = el("p", { class: "small" });
-  const effortText = el("p", { class: "small" });
-  const check = el("button", { class: "btn secondary", type: "button", text: t("providers.check") });
-  const edit = el("button", { class: "btn secondary", type: "button", text: t("common.edit") });
-  const remove = el("button", { class: "btn danger", type: "button", text: t("common.remove") });
-  const draw = () => {
-    const state = stateFor(name);
-    const preset = provider.preset && presetById(provider.preset);
-    let kind = provider.type === "chatgpt" ? t("providers.chatgpt") : provider.type === "anthropic" ? `${t("providers.anthropic")} · ${provider.auth === "claude-code" ? t("providers.anthropicLoginReuse") : t("providers.apiKey")}` : preset ? preset.name : "";
-    if (provider.type !== "chatgpt" && provider.type !== "anthropic") { try { kind = `${kind ? kind + " · " : ""}${new URL(provider.url).host}`; } catch { /* keep */ } }
-    const live = status && status.providers && status.providers[name];
-    stateLine.replaceChildren(...[
-      providerState(name, provider),
-      live && live.needsLogin ? chatgptLoginButton(draw) : null,
-      live && live.needsLogin && chatgptLoginMessage ? el("span", { class: "small", text: chatgptLoginMessage }) : null,
-      el("span", { class: "small", text: kind }),
-      state && !state.ok && state.error ? el("span", { class: "small bad-text", text: state.error }) : null,
-    ].filter(Boolean));
-    const models = modelsOf(provider);
-    modelText.replaceChildren(...(models.length
-      ? models.flatMap((model, index) => [
-          index ? document.createTextNode(", ") : null,
-          document.createTextNode(labelOf(model)),
-          modelEffortTag(model) ? el("span", { class: `model-effort-tag ${model.effortLevels.length ? "has-effort" : "no-effort"}`, text: modelEffortTag(model) }) : null,
-        ].filter(Boolean))
-      : [document.createTextNode(t("providers.noModels"))]));
-    if (hasModelEffortData(provider)) effortText.hidden = true;
-    else {
-      const levels = effortLevelsFor(name, models[0] && models[0].id);
-      effortText.textContent = t("providers.effortLevels", { levels: levels.length ? levels.join(" · ") : t("providers.effortNone") });
-      effortText.hidden = false;
+// ---- Capability measurement ---------------------------------------------------------
+//
+// A model's wire and its effort ladder are measured by asking it, because a vendor's `/models`
+// reports ids and nothing else. That takes several small requests per model, far too long to hold a
+// save behind, so the save returns at once and this runs after it and settles the config when it
+// finishes. Provider name → { state, done, total }, for the line the detail view shows meanwhile.
+const measureStates = new Map();
+
+/** What the operator wants to know from a finished job: what was settled, and what would not answer. */
+function measureSummary(results) {
+  const measured = results.filter((entry) => entry.wire);
+  if (measured.length === 0) return "";
+  const failed = results.length - measured.length;
+  const parts = measured.map((entry) => `${entry.id} → ${entry.wire}${entry.effortLevels ? ` (${entry.effortLevels.length ? entry.effortLevels.join("/") : t("providers.effortNone")})` : ""}`);
+  return failed > 0 ? `${parts.join(", ")} · +${failed}` : parts.join(", ");
+}
+
+/**
+ * Measure the models of one provider, in the background, and show the config the result settled.
+ *
+ * Only models missing a wire or a ladder are sent: one the operator set is their decision, and the
+ * router will not overwrite it either, so measuring it again would spend requests to change nothing.
+ */
+async function startMeasurement(providerName, provider) {
+  if (!provider || (provider.type !== "openai-compatible" && provider.type !== "anthropic-compatible")) return;
+  const models = modelsOf(provider).filter((model) => !model.wire || !model.effortLevels).map((model) => model.id);
+  if (models.length === 0) return;
+  let jobId;
+  try {
+    const started = await api("/api/providers/measure", {
+      method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ provider: providerName, models }),
+    });
+    jobId = started.jobId;
+    measureStates.set(providerName, { state: "running", done: 0, total: started.total });
+    renderProviderWorkspace();
+  } catch { return; } // The router is older than this screen, or said no: the save itself stands.
+  try {
+    for (;;) {
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+      const job = await api(`/api/providers/measure/${jobId}`);
+      measureStates.set(providerName, { state: job.state, done: job.done, total: job.total });
+      renderProviderWorkspace();
+      if (job.state === "running") continue;
+      measureStates.delete(providerName);
+      if (job.state === "failed") { toast(t("measure.failed"), true, job.error); renderProviderWorkspace(); return; }
+      const results = job.results || [];
+      // A model the plan refuses is not merely unmeasured: no wire will ever answer for it, so
+      // saying so once here is the only chance the operator gets before a session fails on it.
+      // Measured 2026-09-22: OpenCode answers every `-free` model with 403 FreeTierError.
+      const barred = results.filter((entry) => typeof entry.error === "string" && entry.error.startsWith("not-entitled"));
+      if (barred.length > 0) toast(t("measure.notEntitled", { models: barred.map((entry) => entry.id).join(", ") }), true);
+      const summary = measureSummary(results);
+      // An auth failure is reported as itself: it says nothing about any model, and leaving it as
+      // "nothing was measured" would send the operator looking at the wrong thing.
+      const refused = results.some((entry) => entry.error === "auth");
+      // The barred models already had their own line; do not also call the round a failure when
+      // every other model measured fine.
+      if (summary || barred.length === 0) toast(summary ? t("measure.done", { summary }) : refused ? t("measure.authFailed") : t("measure.nothing"), !summary);
+      await loadProviders();
+      return;
     }
-  };
-  check.addEventListener("click", async () => { check.disabled = true; await probeProvider(name, provider); check.disabled = false; draw(); });
-  edit.addEventListener("click", () => openProviderForm({ name, provider }));
-  remove.addEventListener("click", async () => {
-    if (!confirm(t("providers.removeConfirm", { name }))) return;
-    const next = clone(currentConfig);
-    delete next.providers[name];
-    next.routes = Object.fromEntries(Object.entries(next.routes || {}).filter(([, route]) => route.provider !== name));
-    next.direct = (next.direct || []).filter((rule) => rule.provider !== name);
-    next.cli.extraModels = (next.cli.extraModels || []).filter((entry) => !modelsOf(provider).some((model) => model.id === entry.model));
-    try { await configRequest(next); currentConfig = next; providersLoaded = false; slotsLoaded = false; await loadProviders(); toast(t("common.saved")); } catch (error) { toast(t("common.saveFailed"), true, error.message); }
+  } catch (error) {
+    measureStates.delete(providerName);
+    toast(t("measure.failed"), true, error.message);
+    renderProviderWorkspace();
+  }
+}
+
+let selectedProviderName = null;
+let providerDetailTab = "overview";
+let providerSearch = "";
+let providerDetailGeneration = 0;
+
+function providerKind(name, provider) {
+  const preset = provider.preset && presetById(provider.preset);
+  if (provider.type === "chatgpt") return t("providers.chatgpt");
+  if (provider.type === "anthropic") return provider.auth === "claude-code"
+    ? `${t("providers.anthropic")} · ${provider.accountPool ? t("providers.rotationOn") : t("providers.rotationOff")}`
+    : `${t("providers.anthropic")} · ${t("providers.apiKey")}`;
+  if (preset) return preset.name;
+  try { return new URL(provider.url).host; } catch { return provider.type || name; }
+}
+
+function providerRailItem(name, provider) {
+  const selected = name === selectedProviderName;
+  const button = el("button", {
+    class: `provider-rail-item${selected ? " selected" : ""}`,
+    type: "button",
+    role: "option",
+    "aria-selected": String(selected),
+  }, [
+    el("span", { class: "provider-rail-copy" }, [
+      el("strong", { text: name }),
+      el("span", { text: t("providers.modelsCountShort", { count: modelsOf(provider).length }) }),
+    ]),
+    providerState(name, provider),
+  ]);
+  button.addEventListener("click", () => {
+    selectedProviderName = name;
+    providerDetailTab = provider.type === "anthropic" && provider.auth === "claude-code" ? "accounts" : "overview";
+    renderProviderWorkspace();
   });
+  return button;
+}
+
+function renderProviderRail() {
+  const list = $("#providers-list");
+  const entries = Object.entries((currentConfig && currentConfig.providers) || {});
+  const query = providerSearch.trim().toLowerCase();
+  const visible = entries.filter(([name, provider]) => !query || name.toLowerCase().includes(query) || providerKind(name, provider).toLowerCase().includes(query));
+  list.replaceChildren(...visible.map(([name, provider]) => providerRailItem(name, provider)));
+  if (!entries.length) list.appendChild(el("div", { class: "provider-rail-empty", text: t("providers.empty") }));
+  else if (!visible.length) list.appendChild(el("div", { class: "provider-rail-empty", text: t("providers.noSelection") }));
+}
+
+async function removeProvider(name, provider) {
+  if (!confirm(t("providers.removeConfirm", { name }))) return;
+  const next = clone(currentConfig);
+  delete next.providers[name];
+  next.routes = Object.fromEntries(Object.entries(next.routes || {}).filter(([, route]) => route.provider !== name));
+  next.direct = (next.direct || []).filter((rule) => rule.provider !== name);
+  next.cli.extraModels = (next.cli.extraModels || []).filter((entry) => !modelsOf(provider).some((model) => model.id === entry.model));
+  try {
+    await configRequest(next);
+    currentConfig = next;
+    selectedProviderName = Object.keys(next.providers)[0] || null;
+    providerDetailTab = "overview";
+    slotsLoaded = false;
+    clientsLoaded = false;
+    renderProviderWorkspace();
+    toast(t("common.saved"));
+  } catch (error) { toast(t("common.saveFailed"), true, error.message); }
+}
+
+function providerTabs(name, provider) {
+  const tabs = [{ id: "overview", label: t("providers.overview") }];
+  if (provider.type === "anthropic" && provider.auth === "claude-code") tabs.push({ id: "accounts", label: t("providers.accounts") });
+  tabs.push({ id: "models", label: t("providers.modelsTab") });
+  return el("div", { class: "provider-tabs", role: "tablist" }, tabs.map((tab) => {
+    const button = el("button", { class: providerDetailTab === tab.id ? "active" : "", type: "button", role: "tab", "aria-selected": String(providerDetailTab === tab.id), text: tab.label });
+    button.addEventListener("click", () => { providerDetailTab = tab.id; renderProviderDetail(); });
+    return button;
+  }));
+}
+
+function providerOverview(name, provider) {
+  const state = stateFor(name);
+  const live = status && status.providers && status.providers[name];
+  const connection = el("section", { class: "detail-section" }, [
+    el("h3", { text: t("providers.connection") }),
+    el("div", { class: "detail-setting-row" }, [
+      el("div", { class: "setting-copy" }, [el("strong", { text: statusText(state) }), el("span", { text: providerKind(name, provider) })]),
+      providerState(name, provider),
+    ]),
+    state && !state.ok && state.error ? el("p", { class: "bad-text small provider-detail-error", text: shortError(state.error), title: state.error }) : null,
+    live && live.needsLogin ? chatgptLoginButton(renderProviderDetail) : null,
+  ].filter(Boolean));
+  const models = modelsOf(provider);
+  const modelSummary = el("section", { class: "detail-section" }, [
+    el("h3", { text: t("providers.selectedModels") }),
+    models.length ? el("div", { class: "model-chip-list" }, models.map((model) => el("span", { class: "model-chip", text: labelOf(model) }))) : hint(t("providers.noModels")),
+  ]);
+  const measuring = measureStates.get(name);
+  if (measuring && measuring.state === "running") {
+    modelSummary.appendChild(el("p", { class: "small", text: t("measure.running", { done: measuring.done, total: measuring.total }) }));
+    modelSummary.appendChild(hint(t("measure.help")));
+  }
   const quota = quotaLine(name);
-  card.append(el("div", { class: "toolbar" }, [title, el("div", { class: "right" }, [check, edit, remove])]), stateLine, modelText, effortText, quota ? el("div", { class: "small", text: quota }) : document.createTextNode(""));
-  draw();
-  return card;
+  return el("div", { class: "provider-panel" }, [connection, quota ? el("section", { class: "detail-section" }, [el("h3", { text: t("health.quota", { percent: "", reset: "" }).trim() }), el("p", { text: quota })]) : null, modelSummary].filter(Boolean));
+}
+
+function providerModelsPanel(name, provider) {
+  const models = modelsOf(provider);
+  return el("div", { class: "provider-panel" }, [
+    el("section", { class: "detail-section" }, [
+      el("div", { class: "section-heading" }, [el("div", {}, [el("h3", { text: t("providers.selectedModels") }), hint(t("providers.modelsHelp"))]), el("button", { class: "btn secondary", type: "button", text: t("common.edit"), onclick: () => openProviderForm({ name, provider }) })]),
+      models.length ? el("div", { class: "provider-model-list" }, models.map((model) => el("div", { class: "provider-model-row" }, [el("strong", { text: labelOf(model) }), el("span", { class: "small", text: model.id }), modelEffortTag(model) ? el("span", { class: `model-effort-tag ${model.effortLevels.length ? "has-effort" : "no-effort"}`, text: modelEffortTag(model) }) : null].filter(Boolean)))) : hint(t("providers.noModels")),
+    ]),
+  ]);
+}
+
+async function saveAnthropicRotation(name, provider, enabled, control, message) {
+  control.disabled = true;
+  message.textContent = t("providers.rotationSaving");
+  const next = clone(currentConfig);
+  if (enabled) next.providers[name].accountPool = true;
+  else delete next.providers[name].accountPool;
+  try {
+    await configRequest(next);
+    currentConfig = next;
+    slotsLoaded = false;
+    clientsLoaded = false;
+    renderProviderWorkspace();
+    toast(t("providers.rotationSaved"));
+  } catch (error) {
+    control.checked = !enabled;
+    message.textContent = "";
+    toast(t("common.saveFailed"), true, error.message);
+  } finally { control.disabled = false; }
 }
+
+function renderClaudeAccountRows(target, data, name, generation) {
+  if (generation !== providerDetailGeneration) return;
+  const rows = [];
+  if (data.current) rows.push(el("article", { class: "account-card current" }, [
+    el("div", { class: "account-card-copy" }, [el("strong", { text: data.current.label }), el("span", { class: "small", text: anthropicSourceText(data.current.source) }), hint(t("providers.currentAccountHelp"))]),
+    el("span", { class: "badge ok", text: t("providers.anthropicCurrent") }),
+  ]));
+  for (const account of Array.isArray(data.accounts) ? data.accounts : []) {
+    const unavailable = account.needsReauth || account.expiresAt <= Date.now();
+    const rename = el("button", { class: "btn secondary compact", type: "button", text: t("common.edit") });
+    rename.addEventListener("click", async () => {
+      const label = prompt(t("providers.anthropicRenamePrompt"), account.label);
+      if (!label || !label.trim() || label.trim() === account.label) return;
+      try { await api(`/api/claude-accounts/${encodeURIComponent(account.id)}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ label }) }); await refreshClaudeAccountPanel(name); }
+      catch (error) { toast(t("common.actionFailed"), true, error.message); }
+    });
+    const remove = el("button", { class: "btn danger compact", type: "button", text: t("common.remove") });
+    remove.addEventListener("click", async () => {
+      if (!confirm(t("providers.anthropicRemoveConfirm", { name: account.label }))) return;
+      try { await api(`/api/claude-accounts/${encodeURIComponent(account.id)}`, { method: "DELETE" }); await refreshClaudeAccountPanel(name); }
+      catch (error) { toast(t("common.actionFailed"), true, error.message); }
+    });
+    const actions = [rename, remove];
+    if (unavailable) {
+      const reauth = el("button", { class: "btn secondary compact", type: "button", text: t("providers.reauthAction") });
+      reauth.addEventListener("click", () => openClaudeAccountConsent(name));
+      actions.unshift(reauth);
+    }
+    rows.push(el("article", { class: "account-card" }, [
+      el("div", { class: "account-card-copy" }, [el("strong", { text: account.label }), account.email && account.email !== account.label ? el("span", { class: "small", text: account.email }) : null, hint(t("providers.addedAccountHelp"))]),
+      el("span", { class: `badge ${unavailable ? "bad" : "ok"}`, text: unavailable ? t("providers.anthropicReauth") : t("pool.ready") }),
+      el("div", { class: "account-card-actions" }, actions),
+    ]));
+  }
+  target.replaceChildren(...(rows.length ? rows : [el("div", { class: "empty-card", text: t("providers.anthropicNoAccounts") })]));
+  const count = (data.current ? 1 : 0) + (Array.isArray(data.accounts) ? data.accounts.length : 0);
+  const countNode = $("#claude-account-count");
+  if (countNode) countNode.textContent = t("providers.accountCount", { count });
+}
+
+async function refreshClaudeAccountPanel(name) {
+  const target = $("#claude-account-rows");
+  if (!target || selectedProviderName !== name || providerDetailTab !== "accounts") return;
+  const generation = providerDetailGeneration;
+  try { renderClaudeAccountRows(target, await api("/api/claude-accounts"), name, generation); }
+  catch (error) { if (generation === providerDetailGeneration) target.replaceChildren(el("div", { class: "bad-text small", text: error.message })); }
+}
+
+function anthropicAccountsPanel(name, provider) {
+  const rotation = el("input", { type: "checkbox", checked: Boolean(provider.accountPool) });
+  const rotationMessage = el("span", { class: "small" });
+  rotation.addEventListener("change", () => void saveAnthropicRotation(name, provider, rotation.checked, rotation, rotationMessage));
+  const add = el("button", { class: "btn", type: "button", text: t("providers.addClaudeAccount") });
+  add.addEventListener("click", () => openClaudeAccountConsent(name));
+  const removeAll = el("button", { class: "btn danger", type: "button", text: t("providers.anthropicLogoutAll") });
+  removeAll.addEventListener("click", async () => {
+    if (!confirm(t("providers.anthropicLogoutAllConfirm"))) return;
+    try { await api("/api/claude-logout", { method: "POST" }); await refreshClaudeAccountPanel(name); }
+    catch (error) { toast(t("common.actionFailed"), true, error.message); }
+  });
+  const rows = el("div", { id: "claude-account-rows", class: "account-card-list" }, [el("div", { class: "small", text: t("providers.checking") })]);
+  const panel = el("div", { class: "provider-panel" }, [
+    el("section", { class: "detail-section account-summary" }, [
+      el("div", { class: "section-heading" }, [el("div", {}, [el("h3", { text: t("providers.accountPoolTitle") }), el("p", { id: "claude-account-count", class: "account-count", text: t("providers.accountCount", { count: 0 }) }), hint(t("providers.accountCountHelp"))]), add]),
+      el("div", { class: "detail-setting-row rotation-row" }, [el("div", { class: "setting-copy" }, [el("strong", { text: t("providers.anthropicPool") }), el("span", { text: t("providers.accountPoolSubtitle") })]), el("label", { class: "switch" }, [rotation, el("span")])]),
+      !provider.accountPool ? el("div", { class: "notice warn" }, [el("strong", { text: t("providers.rotationOff") }), el("span", { text: t("providers.rotationRequired") })]) : null,
+      rotationMessage,
+    ]),
+    el("section", { class: "detail-section" }, [rows]),
+    el("section", { class: "detail-section danger-section" }, [el("h3", { text: t("providers.dangerZone") }), hint(t("providers.anthropicLogoutAllConfirm")), removeAll]),
+  ]);
+  queueMicrotask(() => void refreshClaudeAccountPanel(name));
+  return panel;
+}
+
+function renderProviderDetail() {
+  const detail = $("#provider-detail");
+  providerDetailGeneration += 1;
+  const provider = currentConfig && currentConfig.providers && currentConfig.providers[selectedProviderName];
+  if (!provider) {
+    detail.replaceChildren(el("div", { class: "provider-detail-empty" }, [el("strong", { text: t("providers.noSelection") })]));
+    return;
+  }
+  const name = selectedProviderName;
+  const check = el("button", { class: "btn secondary", type: "button", text: t("providers.check") });
+  check.addEventListener("click", async () => { check.disabled = true; await probeProvider(name, provider); check.disabled = false; renderProviderWorkspace(); });
+  const edit = el("button", { class: "btn secondary", type: "button", text: t("common.edit"), onclick: () => openProviderForm({ name, provider }) });
+  const remove = el("button", { class: "btn danger", type: "button", text: t("common.remove"), onclick: () => void removeProvider(name, provider) });
+  const header = el("header", { class: "provider-detail-header" }, [
+    el("div", {}, [el("div", { class: "provider-title-line" }, [el("h2", { text: name }), providerState(name, provider)]), el("p", { class: "small", text: providerKind(name, provider) })]),
+    el("div", { class: "provider-detail-actions" }, [check, edit, remove]),
+  ]);
+  let content;
+  if (providerDetailTab === "accounts" && provider.type === "anthropic" && provider.auth === "claude-code") content = anthropicAccountsPanel(name, provider);
+  else if (providerDetailTab === "models") content = providerModelsPanel(name, provider);
+  else { providerDetailTab = "overview"; content = providerOverview(name, provider); }
+  detail.replaceChildren(header, providerTabs(name, provider), content);
+}
+
+function renderProviderWorkspace() {
+  const entries = Object.entries((currentConfig && currentConfig.providers) || {});
+  if (!selectedProviderName || !currentConfig.providers[selectedProviderName]) selectedProviderName = entries[0] ? entries[0][0] : null;
+  renderProviderRail();
+  renderProviderDetail();
+}
+
 async function loadClients() {
   clientsLoaded = true;
   try {
@@ -645,32 +1119,41 @@ async function loadProviders() {
   try {
     await loadCatalogs();
     currentConfig = currentConfig || await api("/api/config");
-    const list = $("#providers-list");
-    list.replaceChildren(...Object.entries(currentConfig.providers || {}).map(([name, provider]) => providerCard(name, provider)));
-    if (!currentConfig.providers || !Object.keys(currentConfig.providers).length) list.appendChild(el("div", { class: "empty-card", text: t("providers.empty") }));
+    renderProviderWorkspace();
     void Promise.all(Object.entries(currentConfig.providers || {}).map(([name, provider]) => probeProvider(name, provider, () => {
-      const existing = $all(".provider-card").find((card) => card.querySelector("h2").textContent === name);
-      if (existing) { existing.remove(); list.appendChild(providerCard(name, provider)); }
+      if ($("#view-providers").classList.contains("active")) renderProviderWorkspace();
     })));
   } catch (error) { toast(t("common.loadFailed"), true, error.message); }
 }
+$("#providers-search").addEventListener("input", (event) => { providerSearch = event.target.value; renderProviderRail(); });
 $("#providers-add").addEventListener("click", openProviderChooser);
 $("#providers-refresh").addEventListener("click", async () => {
   if (!currentConfig) return;
+  const button = $("#providers-refresh");
+  button.disabled = true;
   await Promise.all(Object.entries(currentConfig.providers).map(([name, provider]) => probeProvider(name, provider)));
-  providersLoaded = false;
-  await loadProviders();
+  button.disabled = false;
+  renderProviderWorkspace();
 });
 
 // ---- Provider modal -----------------------------------------------------------------
 
-function showModal(content) {
+let modalCleanup = null;
+function showModal(content, cleanup) {
+  if (modalCleanup) modalCleanup();
+  modalCleanup = cleanup || null;
   $("#modal-content").replaceChildren(content);
   $("#modal-backdrop").hidden = false;
   const first = $("#modal-content input, #modal-content button, #modal-content select");
   if (first) setTimeout(() => first.focus(), 0);
 }
-function closeModal() { $("#modal-backdrop").hidden = true; $("#modal-content").replaceChildren(); }
+function closeModal() {
+  const cleanup = modalCleanup;
+  modalCleanup = null;
+  if (cleanup) cleanup();
+  $("#modal-backdrop").hidden = true;
+  $("#modal-content").replaceChildren();
+}
 $("#modal-close").addEventListener("click", closeModal);
 $("#modal-backdrop").addEventListener("click", (event) => { if (event.target === $("#modal-backdrop")) closeModal(); });
 window.addEventListener("keydown", (event) => {
@@ -680,6 +1163,83 @@ window.addEventListener("keydown", (event) => {
     if (action && !action.disabled) { event.preventDefault(); action.click(); }
   }
 });
+
+function openClaudeAccountConsent(providerName) {
+  const accepted = el("input", { type: "checkbox" });
+  const proceed = el("button", { class: "btn", type: "button", "data-default-action": "", text: t("providers.anthropicOAuthContinue") });
+  proceed.disabled = true;
+  accepted.addEventListener("change", () => { proceed.disabled = !accepted.checked; });
+  proceed.addEventListener("click", () => void openClaudeAccountSignIn(providerName, false));
+  showModal(el("div", { class: "oauth-consent" }, [
+    el("h1", { id: "modal-title", text: t("providers.anthropicOAuthTitle") }),
+    el("div", { class: "notice warn" }, [el("strong", { text: t("providers.anthropicOAuthTitle") }), el("span", { text: t("providers.anthropicOAuthWarning") })]),
+    el("label", { class: "check oauth-accept" }, [accepted, el("span", { text: t("providers.anthropicOAuthAccept") })]),
+    el("div", { class: "actions end" }, [el("button", { class: "btn secondary", type: "button", text: t("common.cancel"), onclick: closeModal }), proceed]),
+  ]));
+}
+
+async function openClaudeAccountSignIn(providerName, manual) {
+  let active = true;
+  let poll = null;
+  const body = el("div", { class: "oauth-progress" });
+  function stopPolling() { if (poll) clearInterval(poll); poll = null; }
+  function showError(state) {
+    stopPolling();
+    if (!active) return;
+    const retry = el("button", { class: "btn secondary", type: "button", text: t("providers.anthropicSignInManual") });
+    retry.addEventListener("click", () => void openClaudeAccountSignIn(providerName, true));
+    body.replaceChildren(el("span", { class: "bad-text", text: t("providers.anthropicSignInFailed") }), state.error ? el("p", { class: "small", text: state.error }) : null, retry);
+  }
+  async function finish(state) {
+    stopPolling();
+    if (!active) return;
+    if (!state.ok) { showError(state); return; }
+    active = false;
+    closeModal();
+    if (selectedProviderName === providerName) {
+      providerDetailTab = "accounts";
+      renderProviderDetail();
+    }
+    toast(t("providers.anthropicLoginDone"));
+  }
+  function renderState(state) {
+    const controls = [
+      el("p", { text: state.manual ? t("providers.anthropicSignInPaste") : t("providers.anthropicSignInBrowser") }),
+      state.url ? el("a", { class: "login-link", href: state.url, target: "_blank", rel: "noreferrer", text: t("providers.anthropicSignInLink") }) : null,
+    ];
+    if (state.manual) {
+      const code = el("input", { type: "text", autocomplete: "off", placeholder: "code#state" });
+      const submit = el("button", { class: "btn", type: "button", text: t("providers.anthropicSignInSubmit") });
+      submit.addEventListener("click", async () => {
+        submit.disabled = true;
+        try { await finish(await api("/api/claude-oauth/code", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ code: code.value }) })); }
+        catch (error) { showError((error.body && { ok: false, error: error.body.error }) || { ok: false, error: error.message }); }
+      });
+      controls.push(el("div", { class: "key-control" }, [code, submit]));
+    } else controls.push(el("p", { class: "small", text: t("providers.anthropicSignInWaiting") }));
+    controls.push(el("button", { class: "btn secondary", type: "button", text: t("common.cancel"), onclick: closeModal }));
+    body.replaceChildren(...controls.filter(Boolean));
+  }
+  showModal(el("div", {}, [el("h1", { id: "modal-title", text: t("providers.anthropicOAuthTitle") }), body]), () => {
+    const wasActive = active;
+    active = false;
+    stopPolling();
+    if (wasActive) void api("/api/claude-oauth/cancel", { method: "POST" }).catch(() => {});
+  });
+  body.replaceChildren(el("p", { class: "small", text: t("providers.checking") }));
+  try {
+    const state = await api("/api/claude-oauth", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ manual: Boolean(manual) }) });
+    if (!active) return;
+    renderState(state);
+    poll = setInterval(async () => {
+      try {
+        const next = await api("/api/claude-oauth");
+        if (!next.running) await finish(next);
+      } catch { /* keep the last useful state while the router is busy */ }
+    }, 2000);
+  } catch (error) { showError({ ok: false, error: error.message }); }
+}
+
 function openProviderChooser() {
   const grid = el("div", { class: "chooser-grid" });
   const anthropic = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: t("providers.anthropic") }), el("span", { text: t("providers.anthropicHelp") })]);
@@ -713,10 +1273,21 @@ function inputRow(label, control, helpText) {
 }
 // Checklist that stays usable with hundreds of models (OpenRouter lists 400+): a search box, checked
 // entries pinned first, at most 36 visible rows, and the selection kept in a Set so filtering never
-// loses ticks. `box.selected()` returns the chosen {id,name} entries.
+// loses ticks. `box.selected()` returns the chosen entries, each carrying whatever per-model override
+// it arrived with (effortLevels, contextWindow, and the wire/url/authHeader a preset gave it) so a
+// save does not strip the endpoint the model speaks.
+function modelOverrideFields(model) {
+  return {
+    ...(Array.isArray(model.effortLevels) ? { effortLevels: [...model.effortLevels] } : {}),
+    ...(typeof model.contextWindow === "number" ? { contextWindow: model.contextWindow } : {}),
+    ...(model.wire ? { wire: model.wire } : {}),
+    ...(model.url ? { url: model.url } : {}),
+    ...(model.authHeader ? { authHeader: model.authHeader } : {}),
+  };
+}
 function modelChecklist(models, checked) {
   const selected = new Map();
-  for (const model of models) if (checked.has(model.id)) selected.set(model.id, { id: model.id, name: labelOf(model), ...(Array.isArray(model.effortLevels) ? { effortLevels: [...model.effortLevels] } : {}) });
+  for (const model of models) if (checked.has(model.id)) selected.set(model.id, { id: model.id, name: labelOf(model), ...modelOverrideFields(model) });
   const wrap = el("div", { class: "model-picker" });
   const grid = el("div", { class: "model-checklist modal-checklist" });
   const note = el("div", { class: "small", text: "" });
@@ -733,7 +1304,7 @@ function modelChecklist(models, checked) {
       input.dataset.model = model.id;
       input.dataset.name = labelOf(model);
       input.addEventListener("change", () => {
-        if (input.checked) selected.set(model.id, { id: model.id, name: labelOf(model), ...(Array.isArray(model.effortLevels) ? { effortLevels: [...model.effortLevels] } : {}) });
+        if (input.checked) selected.set(model.id, { id: model.id, name: labelOf(model), ...modelOverrideFields(model) });
         else selected.delete(model.id);
         note.textContent = summary(matches.length);
       });
@@ -759,6 +1330,7 @@ function anthropicSourceText(source) {
   return t("providers.anthropicSourceMissing");
 }
 function openAnthropicProviderForm(options) {
+  let formActive = true;
   const existing = options.provider;
   const displayName = options.name || t("providers.anthropic");
   const nameInput = el("input", { value: displayName, maxlength: "60" });
@@ -770,16 +1342,6 @@ function openAnthropicProviderForm(options) {
   const result = el("div", { class: "probe-result" });
   const probeButton = el("button", { class: "btn secondary", type: "button", text: t("providers.check") });
   const sourceLine = el("div", { class: "small" });
-  // Our own sign-in is stored even while a Claude Desktop session outranks it. Saying so is the
-  // only way a finished sign-in shows up on a screen whose source line does not change.
-  const signedInLine = el("div", { class: "small" });
-  function showSignedIn(response) {
-    const stored = response && response.signedIn;
-    signedInLine.hidden = !stored;
-    if (!stored) return;
-    signedInLine.textContent =
-      response.source === "token-file" ? t("providers.anthropicSignedInActive") : t("providers.anthropicSignedInStandby");
-  }
   let foundModels = modelsOf(existing).length ? modelsOf(existing) : claudeModels.map((model) => ({ id: model.id, name: labelOf(model) }));
   let selected = new Set(modelsOf(existing).length ? modelsOf(existing).map((model) => model.id) : foundModels.map((model) => model.id));
   const modelArea = el("div", { class: "form-field" });
@@ -790,13 +1352,11 @@ function openAnthropicProviderForm(options) {
   renderModels();
   const authField = inputRow(t("providers.credentials"), auth, t("providers.anthropicCredentialsHelp"));
   const keyField = el("div", { class: "form-field key-field" }, [el("span", { text: t("providers.apiKey") }), el("div", { class: "key-control" }, [keyInput, showKey]), el("small", { text: t("providers.keyHelp") })]);
-  const subscriptionActions = el("div", { class: "actions" }, [el("button", { class: "btn secondary", type: "button", text: t("providers.anthropicLogin") }), el("button", { class: "btn secondary", type: "button", text: t("providers.anthropicLogout") })]);
+  const accountPool = existing ? Boolean(existing.accountPool) : true;
   function syncAuthFields() {
     const reused = auth.value === "claude-code";
     keyField.hidden = reused;
-    subscriptionActions.hidden = !reused;
     sourceLine.hidden = !reused;
-    signedInLine.hidden = !reused || !signedInLine.textContent;
   }
   auth.addEventListener("change", syncAuthFields);
   syncAuthFields();
@@ -806,11 +1366,11 @@ function openAnthropicProviderForm(options) {
     try {
       const body = auth.value === "claude-code" ? { type: "anthropic", auth: "claude-code" } : { type: "anthropic", auth: "api-key", apiKey: keyInput.value || (existing && existing.apiKey) };
       const response = await api("/api/providers/probe", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+      if (!formActive) return;
       sourceLine.textContent = anthropicSourceText(response.source);
-      showSignedIn(response);
       const noCredits = response.ok && /^no-credits:/.test(response.error || "");
       result.replaceChildren(...[
-        el("span", { class: response.ok && !noCredits ? "ok-text" : noCredits ? "warn-text" : "bad-text", text: noCredits ? t("providers.probeNoCredits") : response.ok ? t("providers.probeOk") : response.auth === "bad-key" ? t("providers.probeBadKey") : auth.value === "claude-code" ? anthropicSourceText(response.source) : t("providers.probeFailed") }),
+        el("span", { class: response.ok && !noCredits ? "ok-text" : noCredits ? "warn-text" : "bad-text", text: noCredits ? t("providers.probeNoCredits") : response.ok ? t("providers.probeOk") : response.auth === "not-entitled" ? t("providers.probeNotEntitled") : response.auth === "bad-key" ? t("providers.probeBadKey") : auth.value === "claude-code" ? anthropicSourceText(response.source) : t("providers.probeFailed") }),
         response.error ? el("div", { class: "small", text: response.error.replace(/^no-credits:\s*/, "") }) : null,
       ].filter(Boolean));
       if (Array.isArray(response.models) && response.models.length) {
@@ -818,60 +1378,18 @@ function openAnthropicProviderForm(options) {
         selected = new Set(modelsOf(existing).length ? modelsOf(existing).map((model) => model.id) : foundModels.map((model) => model.id));
         renderModels();
       }
-    } catch (error) { result.replaceChildren(el("span", { class: "bad-text", text: t("providers.probeFailed") }), el("div", { class: "small", text: error.message })); }
-    finally { probeButton.disabled = false; }
+    } catch (error) { if (formActive) result.replaceChildren(el("span", { class: "bad-text", text: t("providers.probeFailed") }), el("div", { class: "small", text: error.message })); }
+    finally { if (formActive) probeButton.disabled = false; }
   }
   probeButton.addEventListener("click", () => void runProbe());
-  // Our own browser sign-in (PKCE): start it, show the link in case no window opened, poll until the
-  // router has the credential. When the loopback port is taken the code is pasted here instead.
-  let signInPoll = null;
-  function renderSignIn(state) {
-    const parts = [el("div", { text: state.manual ? t("providers.anthropicSignInPaste") : t("providers.anthropicSignInBrowser") })];
-    if (state.url) parts.push(el("a", { href: state.url, target: "_blank", rel: "noreferrer", text: t("providers.anthropicSignInLink") }));
-    if (state.manual) {
-      const codeInput = el("input", { type: "text", autocomplete: "off", placeholder: "code#state" });
-      const submit = el("button", { class: "btn secondary", type: "button", text: t("providers.anthropicSignInSubmit") });
-      submit.addEventListener("click", async () => {
-        submit.disabled = true;
-        try { const done = await api("/api/claude-oauth/code", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ code: codeInput.value }) }); finishSignIn(done); }
-        catch (error) { finishSignIn({ ok: false, error: (error.body && error.body.error) || error.message }); }
-      });
-      parts.push(el("div", { class: "key-control" }, [codeInput, submit]));
-    } else parts.push(el("div", { class: "small", text: t("providers.anthropicSignInWaiting") }));
-    const cancel = el("button", { class: "btn secondary", type: "button", text: t("common.cancel") });
-    cancel.addEventListener("click", async () => { clearInterval(signInPoll); await api("/api/claude-oauth/cancel", { method: "POST" }).catch(() => {}); result.replaceChildren(); });
-    parts.push(cancel);
-    result.replaceChildren(el("div", { class: "sign-in" }, parts));
-  }
-  function finishSignIn(state) {
-    clearInterval(signInPoll);
-    // The probe refreshes the source and the stored-sign-in line, then the outcome is put back:
-    // the probe's own wording would otherwise erase the answer to the button that was just pressed.
-    if (state.ok) { void runProbe().then(() => result.replaceChildren(el("span", { class: "ok-text", text: t("providers.anthropicLoginDone") }))); return; }
-    const retry = el("button", { class: "btn secondary", type: "button", text: t("providers.anthropicSignInManual") });
-    retry.addEventListener("click", () => void startSignIn(true));
-    result.replaceChildren(el("span", { class: "bad-text", text: t("providers.anthropicSignInFailed") }), el("div", { class: "small", text: state.error || "" }), retry);
-  }
-  async function startSignIn(manual) {
-    clearInterval(signInPoll);
-    try {
-      const state = await api("/api/claude-oauth", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ manual: Boolean(manual) }) });
-      renderSignIn(state);
-      signInPoll = setInterval(async () => {
-        try { const now = await api("/api/claude-oauth"); if (!now.running) finishSignIn(now); }
-        catch { /* the router may be busy; keep polling */ }
-      }, 2000);
-    } catch (error) { result.replaceChildren(el("span", { class: "bad-text", text: t("common.actionFailed") }), el("div", { class: "small", text: error.message })); }
-  }
-  subscriptionActions.children[0].addEventListener("click", () => void startSignIn(false));
-  subscriptionActions.children[1].addEventListener("click", async () => {
-    try { const response = await api("/api/claude-logout", { method: "POST" }); result.replaceChildren(el("span", { class: "ok-text", text: response.output })); await runProbe(); }
-    catch (error) { toast(t("common.actionFailed"), true, error.message); }
-  });
+  const modeHint = hint("");
+  function syncModeHint() { modeHint.textContent = auth.value === "claude-code" && accountPool ? t("providers.anthropicPoolRouting") : t("providers.anthropicIngressOnly"); }
+  auth.addEventListener("change", syncModeHint);
+  syncModeHint();
   const form = el("div", { class: "provider-form" }, [
     el("h1", { id: "modal-title", text: existing ? t("providers.edit") : t("providers.addTitle") }),
-    inputRow(t("providers.name"), nameInput, t("providers.nameHelp")), authField, keyField, probeButton, sourceLine, signedInLine, result, subscriptionActions, modelArea,
-    hint(t("providers.anthropicIngressOnly")),
+    inputRow(t("providers.name"), nameInput, t("providers.nameHelp")), authField, keyField, probeButton, sourceLine, result, modelArea,
+    modeHint,
   ]);
   const saveButton = el("button", { class: "btn", type: "button", "data-default-action": "", text: existing ? t("common.save") : t("providers.add") });
   saveButton.addEventListener("click", async () => {
@@ -880,17 +1398,17 @@ function openAnthropicProviderForm(options) {
     const next = clone(currentConfig);
     const providerName = existing ? options.name : uniqueName(typedName, next.providers);
     const checkedModels = form.querySelector(".model-picker").selected();
-    const provider = { type: "anthropic", auth: auth.value, ...(auth.value === "api-key" && (keyInput.value || (existing && existing.apiKey)) ? { apiKey: keyInput.value || existing.apiKey } : {}), models: checkedModels };
+    const provider = { type: "anthropic", auth: auth.value, ...(auth.value === "claude-code" && accountPool ? { accountPool: true } : {}), ...(auth.value === "api-key" && (keyInput.value || (existing && existing.apiKey)) ? { apiKey: keyInput.value || existing.apiKey } : {}), models: checkedModels };
     next.providers[providerName] = provider;
-    // No picker/direct entries: these models are served to Codex through the OpenAI ingress, not
-    // routed from the Claude app, so a rule naming this provider would never fire.
+    // accountPool makes these models native Claude routing targets. Without it this remains the
+    // historical OpenAI ingress provider, and routing deliberately ignores it.
     saveButton.disabled = true;
-    try { await configRequest(next); currentConfig = next; slotsLoaded = false; clientsLoaded = false; providersLoaded = false; closeModal(); await loadProviders(); toast(t("common.saved")); }
+    try { await configRequest(next); currentConfig = next; selectedProviderName = providerName; providerDetailTab = auth.value === "claude-code" ? "accounts" : "overview"; slotsLoaded = false; clientsLoaded = false; providersLoaded = false; closeModal(); await loadProviders(); toast(t("common.saved")); }
     catch (error) { toast(t("common.saveFailed"), true, error.message); }
     finally { saveButton.disabled = false; }
   });
   form.appendChild(el("div", { class: "actions end" }, [el("button", { class: "btn secondary", type: "button", text: t("common.cancel"), onclick: closeModal }), saveButton]));
-  showModal(form);
+  showModal(form, () => { formActive = false; });
   if (auth.value === "claude-code") void runProbe();
 }
 function openProviderForm(options) {
@@ -1026,6 +1544,9 @@ function openProviderForm(options) {
       ...(prompt ? { identity: prompt.identity.checked } : {}),
       ...(prompt && prompt.append.value.trim() ? { instructionsAppend: prompt.append.value.trim() } : {}),
       ...(preset ? { preset: preset.id } : {}),
+      // A vendor that asks for a session header keys its prompt cache on it, so carry it from the
+      // preset rather than leaving the user to discover the bill.
+      ...(preset && preset.sessionHeader ? { sessionHeader: preset.sessionHeader } : {}),
       ...(isOpenAi ? { wire: wireSelect.value, caps: { effortLevels: (preset && preset.effortLevels) || [], reasoning: preset && preset.effortLevels && preset.effortLevels.length ? "effort" : "none" } } : {}),
       ...(Object.keys(readHeaders()).length ? { headers: readHeaders() } : {}),
     };
@@ -1044,7 +1565,7 @@ function openProviderForm(options) {
     const response = await probeProvider(temporary, draft);
     probeButton.disabled = false;
     const noCredits = response.ok && /^no-credits:/.test(response.error || "");
-    const headline = noCredits ? t("providers.probeNoCredits") : response.ok ? t("providers.probeOk") : response.auth === "bad-key" ? t("providers.probeBadKey") : response.unavailable ? t("providers.apiSoon") : t("providers.probeFailed");
+    const headline = noCredits ? t("providers.probeNoCredits") : response.ok ? t("providers.probeOk") : response.auth === "not-entitled" ? t("providers.probeNotEntitled") : response.auth === "bad-key" ? t("providers.probeBadKey") : response.unavailable ? t("providers.apiSoon") : t("providers.probeFailed");
     result.replaceChildren(...[
       el("span", { class: response.ok && !noCredits ? "ok-text" : noCredits ? "warn-text" : "bad-text", text: headline }),
       response.error ? el("div", { class: "small", text: response.error.replace(/^no-credits:\s*/, "") }) : null,
@@ -1060,6 +1581,38 @@ function openProviderForm(options) {
   // Editing a provider that can list models: fetch the full list right away so the saved picks are
   // shown among everything available, not as a two-entry list.
   if (existing && !isChatgpt && preset && preset.modelsUrl && existingKey) setTimeout(() => void runProbe(), 0);
+  // ChatGPT has no key field and no probe button, so without this the list stayed the built-in
+  // fallback and a model OpenAI shipped after this release never appeared. Ask the backend for its
+  // catalogue in the background: ticks survive, new models arrive unticked, and a failure just
+  // leaves the fallback list standing.
+  let formActive = true;
+  if (isChatgpt) {
+    const chat = advancedContent._chatgpt;
+    void (async () => {
+      let response;
+      try {
+        response = await api("/api/providers/probe", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ type: "chatgpt", auth: chat.auth.value, name: options.name }),
+        });
+      } catch { return; }
+      if (!formActive || !Array.isArray(response.models) || !response.models.length) return;
+      // Captured while the fetched list is checked, not against the fallback it is about to replace.
+      const keep = new Set([...currentChecked, ...modelArea.querySelector(".model-picker").selected().map((model) => model.id)]);
+      // A model the catalogue no longer lists but the config still names stays visible and ticked,
+      // so a save cannot drop it silently.
+      const named = new Set(response.models.map((model) => model.id));
+      foundModels = [...response.models, ...foundModels.filter((saved) => !named.has(saved.id))];
+      modelArea.querySelector(".model-picker").replaceWith(modelChecklist(foundModels, keep));
+      modelArea.replaceChildren(
+        el("span", { text: t("providers.models") }),
+        hint(t("providers.modelsHelp")),
+        hint(t("providers.modelsFoundLive", { n: response.models.length })),
+        modelArea.querySelector(".model-picker"),
+      );
+    })();
+  }
   const saveButton = el("button", { class: "btn", type: "button", "data-default-action": "", text: existing ? t("common.save") : t("providers.add") });
   saveButton.addEventListener("click", async () => {
     const typedName = nameInput.value.trim();
@@ -1071,11 +1624,17 @@ function openProviderForm(options) {
     if (existing && providerName !== options.name) delete next.providers[options.name];
     const checkedModels = form.querySelector(".model-picker").selected();
     provider.models = checkedModels;
-    next.providers[providerName] = provider;
-    const existingSelections = ((next.cli && next.cli.extraModels) || []).filter((entry) => entry.model !== null && entry.model !== undefined).map((entry) => {
-      const direct = (next.direct || []).filter((rule) => entry.model.startsWith(rule.prefix)).sort((a, b) => b.prefix.length - a.prefix.length)[0];
-      return { id: entry.model, name: entry.name, provider: direct && direct.provider };
-    }).filter((entry) => entry.provider && entry.provider !== options.name);
+    // The form rebuilds the provider from its own fields, so anything it has no field for
+    // (debugDump, a hand-written setting) is carried over from the saved one rather than dropped.
+    // A field the form owns is left to the draft, so clearing it in the form still clears it.
+    const formKeys = new Set(isChatgpt
+      ? ["type", "auth", "defaultEffort", "identity", "instructionsAppend", "models"]
+      : ["type", "url", "identity", "instructionsAppend", "preset", "sessionHeader", "wire", "caps", "headers", "models"]);
+    const kept = existing ? Object.fromEntries(Object.entries(existing).filter(([key]) => !formKeys.has(key))) : {};
+    next.providers[providerName] = { ...kept, ...provider };
+    // Read after `next.providers` has been updated, so an unticked model is already undeclared here
+    // and falls out on its own, and a renamed provider answers to its new name.
+    const existingSelections = pickerSelectionsExcept(next, providerName);
     if (pickerInput.checked) {
       applyPickerSelections(next, [...existingSelections, ...checkedModels.map((model) => ({ ...model, provider: providerName }))]);
     } else {
@@ -1085,18 +1644,24 @@ function openProviderForm(options) {
     try {
       await configRequest(next);
       currentConfig = next;
+      selectedProviderName = providerName;
+      providerDetailTab = "overview";
       slotsLoaded = false;
       providersLoaded = false;
       closeModal();
       await loadProviders();
       toast(t("common.saved"));
       await offerPickerOn(pickerInput.checked && checkedModels.length > 0);
+      // Detached on purpose. Measuring asks every ticked model several questions, which is far
+      // longer than a save should take, and a model whose wire is still unknown works exactly as it
+      // did before — it is only unmeasured. The result lands in the config when it arrives.
+      void startMeasurement(providerName, next.providers[providerName]);
     } catch (error) {
       toast(t("common.saveFailed"), true, error.message);
     } finally { saveButton.disabled = false; }
   });
   form.appendChild(el("div", { class: "actions end" }, [el("button", { class: "btn secondary", type: "button", text: t("common.cancel"), onclick: closeModal }), saveButton]));
-  showModal(form);
+  showModal(form, () => { if (isChatgpt) formActive = false; });
 }
 
 // ---- Logs ---------------------------------------------------------------------------
@@ -1121,7 +1686,7 @@ function timeOf(iso) {
   return `${two(at.getMonth() + 1)}-${two(at.getDate())} ${two(at.getHours())}:${two(at.getMinutes())}:${two(at.getSeconds())}`;
 }
 function providerClass(name) { return name === "anthropic" ? "provider-anthropic" : name === "chatgpt" ? "provider-chatgpt" : "provider-default"; }
-function summaryChip(label, value) { return el("div", { class: "logs-chip" }, [el("span", { class: "label", text: label }), el("span", { class: "value", text: value })]); }
+function summaryChip(label, value, sub) { return el("div", { class: "logs-chip" }, [el("span", { class: "label", text: label }), el("span", { class: "value", text: value }), sub ? el("span", { class: "sub", text: sub }) : null]); }
 
 function showLogsPanel(name) {
   logsPanel = name;
@@ -1144,7 +1709,9 @@ function renderSummary(summary) {
   $("#logs-summary").replaceChildren(
     summaryChip(t("logs.summary.requests"), formatNumber(total.count)),
     summaryChip(t("logs.summary.success"), `${formatNumber(total.ok)} / ${formatNumber(total.failed)}`),
-    summaryChip(t("logs.summary.input"), `${formatNumber(total.input)} · ${t("logs.cacheHit", { percent: total.cacheHitPercent || 0 })}`),
+    // On its own line: with the whole input counted the number runs to eight digits, and the
+    // ellipsis on one line cut the cache rate off entirely.
+    summaryChip(t("logs.summary.input"), formatNumber(totalInputOf(total)), t("logs.cacheHit", { percent: total.cacheHitPercent || 0 })),
     summaryChip(t("logs.summary.output"), formatNumber(total.output)),
     summaryChip(t("logs.summary.duration"), formatSeconds(total.avgMs)),
   );
@@ -1160,11 +1727,17 @@ function renderProviderFilter(records) {
   if (!names.includes(requestProvider)) requestProvider = "";
   if (before && before !== select.value) select.value = requestProvider;
 }
+/** Everything the model read: uncached, read from the cache, and written to it. */
+function totalInputOf(usage) {
+  return (usage.input || 0) + (usage.cached || 0) + (usage.cacheWrite || 0);
+}
 function requestDetail(record) {
   const details = [
     [t("logs.detail.id"), record.id],
     [t("logs.detail.kind"), record.kind],
     [t("logs.detail.stop"), record.stopReason || t("logs.none")],
+    [t("logs.detail.uncached"), record.usage ? formatNumber(record.usage.input) : t("logs.none")],
+    [t("logs.detail.cacheRead"), record.usage && record.usage.cached ? formatNumber(record.usage.cached) : t("logs.none")],
     [t("logs.detail.cacheWrite"), record.usage && record.usage.cacheWrite ? formatNumber(record.usage.cacheWrite) : t("logs.none")],
   ].map(([label, value]) => el("div", {}, [el("span", { class: "detail-label", text: label }), el("span", { class: "detail-value", text: value })]));
   if (record.note) details.push(el("div", { class: "request-note" }, [el("span", { class: "detail-label", text: t("logs.detail.note") }), el("span", { class: "detail-value", text: record.note })]));
@@ -1172,13 +1745,20 @@ function requestDetail(record) {
 }
 function requestRow(record) {
   const row = el("tr", { class: "request-row", title: record.note || "", onclick: () => { expandedRequestId = expandedRequestId === record.id ? null : record.id; renderRequests(requestRows); } });
+  // The requested name's `@effort` is the agent file's default, not what was sent: a marker can
+  // override it, and `gpt-6-sol@medium` beside an effort of high read as a contradiction
+  // (2026-09-23). The effort column is the sent value, so the source is shown without it.
+  const source = record.source ? record.source.replace(/@[^@]*$/, "") : "";
   const model = el("div", { class: "request-models" }, [
     el("span", { class: "model", text: record.target }),
-    record.source && record.source !== record.target ? el("span", { class: "small", text: `(${record.source})` }) : null,
+    source && source !== record.target ? el("span", { class: "small", text: `(${source})` }) : null,
     el("span", { class: `provider-badge ${providerClass(record.provider)}`, text: record.provider }),
   ].filter(Boolean));
+  // The whole input, not the uncached remainder: a fully cached Anthropic turn reports `input: 2`,
+  // which read as a two-token request (2026-09-23). The split is in the detail row.
+  const totalInput = record.usage ? totalInputOf(record.usage) : 0;
   const input = record.usage
-    ? el("span", { class: "token-cell", text: formatNumber(record.usage.input) }, [el("span", { class: "cache-pill", text: t("logs.cacheHit", { percent: Math.round(record.usage.cached / Math.max(1, record.usage.input + record.usage.cached) * 100) }) })])
+    ? el("span", { class: "token-cell", text: formatNumber(totalInput) }, [el("span", { class: "cache-pill", text: t("logs.cacheHit", { percent: Math.round(record.usage.cached / Math.max(1, totalInput) * 100) }) })])
     : el("span", { class: "no-usage", text: t("common.notAvailable") });
   const status = el("span", { class: `status-text ${record.ok ? "ok" : "bad"}`, text: `${record.ok ? t("logs.status.ok") : t("logs.status.error")} ${record.status}` });
   row.append(