clauderipple 0.8.9 → 0.9.0

package/dist/ui/app.js

@@ -155,6 +155,42 @@ let chatgptLoginMessage = "";
 function selectOption(value, text) { return el("option", { value }, [text]); }
 function badge(kind, text) { return el("span", { class: `badge ${kind} dot`, text }, []); }
 function hint(text) { return el("p", { class: "hint", text }, []); }
+/** One row of an inset group: a label (and quieter lines under it) on the left, a value or control on the right. */
+function cell(label, value, sub, extraClass) {
+  const lines = (Array.isArray(sub) ? sub : [sub]).filter(Boolean).map((line) => typeof line === "string" ? el("span", { class: "cell-sub", text: line }) : line);
+  return el("div", { class: `cell${extraClass ? ` ${extraClass}` : ""}` }, [
+    el("div", { class: "cell-text" }, [typeof label === "string" ? el("span", { class: "cell-label", text: label }) : label, ...lines]),
+    value ? el("div", { class: "cell-value" }, Array.isArray(value) ? value : [value]) : null,
+  ]);
+}
+/** A titled group of rows with an optional note under it — the System Settings section shape. */
+function section(title, rows, footer, action) {
+  return el("section", { class: "section" }, [
+    title || action ? el("div", { class: "section-head" }, [title ? el("h3", { class: "section-title", text: title }) : el("span"), action || null]) : null,
+    el("div", { class: "group" }, rows.filter(Boolean)),
+    ...(Array.isArray(footer) ? footer : [footer]).filter(Boolean).map((text) => el("p", { class: "group-footer", text })),
+  ]);
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+/** A small line icon; the paths are drawn in currentColor so the icon follows the text around it. */
+function svgIcon(viewBox, paths, cls) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", viewBox);
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.7");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  if (cls) svg.setAttribute("class", cls);
+  for (const d of paths) {
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+function chevronIcon() { return svgIcon("0 0 8 13", ["M1.5 1.5l5 5-5 5"], "chevron"); }
 
 function showView(name) {
   for (const button of $all(".nav-btn")) button.classList.toggle("active", button.dataset.view === name);
@@ -164,25 +200,29 @@ function showView(name) {
   if (name === "providers" && !providersLoaded) void loadProviders();
   if (name === "clients" && !clientsLoaded) void loadClients();
   if (name === "logs") queueMicrotask(() => void refreshRequests());
+  // Read again on every visit: the bar's ⚙ panel saves the same settings.
+  if (name === "mod") queueMicrotask(() => void loadMod());
 }
 for (const button of $all(".nav-btn")) button.addEventListener("click", () => showView(button.dataset.view));
 window.addEventListener("hashchange", () => showView((location.hash || "#health").slice(1)));
 showView((location.hash || "#health").slice(1) || "health");
 
+// The sidebar carries one language menu and About another (the sidebar is a tab bar on a phone).
 (function setupLanguage() {
-  const select = $("#lang-toggle");
   const lang = (typeof CURRENT_LANG !== "undefined" && CURRENT_LANG) || "en";
-  for (const [code, name] of LANGUAGES) {
-    const option = document.createElement("option");
-    option.value = code;
-    option.textContent = name;
-    option.selected = code === lang;
-    select.append(option);
+  for (const select of $all(".lang-select")) {
+    for (const [code, name] of LANGUAGES) {
+      const option = document.createElement("option");
+      option.value = code;
+      option.textContent = name;
+      option.selected = code === lang;
+      select.append(option);
+    }
+    select.addEventListener("change", () => {
+      try { localStorage.setItem("clauderipple_lang", select.value); } catch { /* unavailable */ }
+      location.reload();
+    });
   }
-  select.addEventListener("change", () => {
-    try { localStorage.setItem("clauderipple_lang", select.value); } catch { /* unavailable */ }
-    location.reload();
-  });
 })();
 
 async function loadCatalogs() {
@@ -198,7 +238,7 @@ async function refreshHealth() {
   try {
     status = await api("/api/status");
   } catch (error) {
-    $("#health-desktop").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("health.desktop") }), badge("bad", t("health.disconnected"))]));
+    $("#health-desktop").replaceChildren(cell(t("health.connection"), badge("bad", t("health.disconnected"))));
     return;
   }
   // Served files changed underneath an open window (e.g. after an update): reload, unless a form is open.
@@ -207,18 +247,20 @@ async function refreshHealth() {
     else if (loadedUiRevision !== status.uiRevision && $("#modal-backdrop").hidden) location.reload();
   }
   const desktop = $("#health-desktop");
-  desktop.replaceChildren(
-    el("div", { class: "row" }, [el("span", { class: "k", text: t("health.connection") }), status.settings.pointsAtRouter ? badge("ok", t("health.connected")) : badge("bad", t("health.notConnected"))]),
-    hint(status.settings.pointsAtRouter ? t("health.connectedHelp") : t("health.notConnectedHelp")),
-  );
-  $("#health-requests").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("health.requests") }), el("span", { class: "v", text: t("health.requestsFmt", status.stats) })]));
+  desktop.replaceChildren(cell(
+    t("health.connection"),
+    status.settings.pointsAtRouter ? badge("ok", t("health.connected")) : badge("bad", t("health.notConnected")),
+    status.settings.pointsAtRouter ? t("health.connectedHelp") : t("health.notConnectedHelp"),
+  ));
+  $("#health-requests").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("health.requests") }), el("span", { class: "v", text: t("health.requestsFmt", Object.fromEntries(Object.entries(status.stats || {}).map(([key, value]) => [key, typeof value === "number" ? value.toLocaleString() : value]))) })]));
   renderHealthProviders();
   if (clientsLoaded) renderClients();
+  if (modState.settings) renderModNotice();
   const details = $("#health-details");
   details.replaceChildren(
     versionRow(),
     // Which files answer, and since when: the only way to see that an update actually replaced the router.
-    ...(status.runtime ? [el("div", { class: "row" }, [el("span", { class: "k", text: t("health.runtime") }), el("span", { class: "v", text: `${status.runtime.router || "?"} · ${new Date(status.runtime.startedAt).toLocaleString()}` })])] : []),
+    ...(status.runtime ? [cell(t("health.runtime"), null, [el("span", { class: "cell-sub mono", text: status.runtime.router || "?" }), new Date(status.runtime.startedAt).toLocaleString()])] : []),
     el("div", { class: "row" }, [el("span", { class: "k", text: t("health.routes") }), el("span", { class: "v", text: String(status.routes) })]),
     el("div", { class: "row" }, [el("span", { class: "k", text: t("health.cli") }), el("span", { class: "v", text: status.cliVersion })]),
   );
@@ -230,22 +272,25 @@ async function refreshHealth() {
 let updateState = { busy: false, check: null };
 function versionRow() {
   const check = updateState.check;
-  const children = [el("span", { class: "k", text: t("health.version") }), el("span", { class: "v", text: status.version })];
+  // The version reads as the row's label; what the update check found sits under it, the action on the right.
+  let note = null;
+  let button = null;
   if (check && check.newer && check.kind === "checkout") {
-    children.push(el("span", { class: "small", text: t("update.checkout", { latest: check.latest }) }));
+    note = t("update.checkout", { latest: check.latest });
   } else {
     const action = check && check.newer;
     const label = updateState.busy ? t("update.checking")
       : check && check.running ? t("update.running")
       : action ? (check.kind === "packaged" ? t("update.download", { latest: check.latest }) : t("update.install", { latest: check.latest }))
       : t("update.check");
-    const button = el("button", { class: "btn secondary compact", type: "button", text: label });
+    button = el("button", { class: action ? "btn" : "btn secondary", type: "button", text: label });
     button.disabled = updateState.busy || Boolean(check && check.running);
     button.addEventListener("click", () => void (action ? startUpdate() : checkForUpdate()));
-    children.push(button);
-    if (check && !check.newer && !updateState.busy) children.push(el("span", { class: "small", text: t("update.latest") }));
+    if (check && !check.newer && !updateState.busy) note = t("update.latest");
   }
-  return el("div", { class: "row", id: "health-version-row" }, children);
+  const row = cell(el("span", { class: "cell-label", text: `${t("health.version")} ${status.version}` }), button, note);
+  row.id = "health-version-row";
+  return row;
 }
 function renderVersionRow() {
   const row = $("#health-version-row");
@@ -372,6 +417,8 @@ function credentialLine(name) {
  */
 function providerConnection(name) {
   const live = status && status.providers && status.providers[name];
+  // A successful TCP probe (or an older model probe) cannot undo a real billing refusal.
+  if (live && live.exhaustion) return { level: "warn", text: `${live.exhaustion.reason.replace(/_/g, " ")} · ${new Date(live.exhaustion.until).toLocaleTimeString()}` };
   // 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 { level: "warn", text: t("providerStatus.loginNeeded") };
@@ -407,14 +454,9 @@ function renderHealthProviders() {
   }
   box.replaceChildren(...providers.map(([name, provider]) => {
     const live = status && status.providers && status.providers[name];
-    const line = el("div", { class: "provider-status" }, [
-      el("strong", { text: name }),
-      providerState(name, provider),
-      live && live.needsLogin && provider.type === "chatgpt" ? chatgptLoginButton(() => renderHealthProviders()) : null,
-      live && live.needsLogin && provider.type === "chatgpt" && chatgptLoginMessage ? el("span", { class: "small", text: chatgptLoginMessage }) : null,
-    ].filter(Boolean));
+    const lines = [];
     const quota = quotaLine(name);
-    if (quota) line.appendChild(el("div", { class: "small", text: quota }));
+    if (quota) lines.push(el("span", { class: "cell-sub", text: quota }));
     // Claude subscription accounts, one line each: the current login and every account added here.
     // Before the config has loaded the rows come from the status, which names the sign-in source
     // rather than the auth mode.
@@ -423,15 +465,26 @@ function renderHealthProviders() {
         .map((account) => ({ account, text: chatgptQuotaText(account.quota) }))
         .filter(({ text }) => text)
         .map(({ account, text }) => el("div", { text: `${claudeAccountLabel(account)} · ${text}` }));
-      if (usage.length) line.appendChild(el("div", { class: "small account-usage" }, usage));
+      if (usage.length) lines.push(el("div", { class: "cell-sub account-usage" }, usage));
     }
     const pool = credentialLine(name);
-    if (pool) line.appendChild(pool);
-    return line;
+    if (pool) lines.push(pool);
+    if (live && live.needsLogin && provider.type === "chatgpt") {
+      lines.push(el("div", { class: "cell-actions" }, [
+        chatgptLoginButton(() => renderHealthProviders()),
+        chatgptLoginMessage ? el("span", { class: "small", text: chatgptLoginMessage }) : null,
+      ]));
+    }
+    // The row opens the provider's own page; a button inside it keeps its own click.
+    const row = cell(el("span", { class: "cell-label", text: name }), [providerState(name, provider), chevronIcon()], lines, "provider-status link");
+    row.tabIndex = 0;
+    const open = (event) => { if (!event.target.closest("button, a")) openProvider(name, provider); };
+    row.addEventListener("click", open);
+    row.addEventListener("keydown", (event) => { if (event.key === "Enter" && event.target === row) open(event); });
+    return row;
   }));
 }
 
-let agentTitleBusy = false;
 let statusModBusy = false;
 let codexBusy = false;
 function renderClients() {
@@ -439,41 +492,43 @@ function renderClients() {
   const picker = status.picker || { enabled: false, last: null };
   const last = picker.last || null;
   const names = status.pickerModels || [];
-  $("#client-picker-rows").replaceChildren(...[
-    el("div", { class: "row" }, [el("span", { class: "k", text: t("picker.state") }), picker.enabled ? badge("ok", t("picker.on")) : el("span", { class: "small", text: t("picker.off") })]),
-    picker.enabled ? el("div", { class: "small", text: t("picker.models", { count: names.length, names: names.join(", ") || "—" }) }) : null,
-    picker.enabled ? (last && last.at ? el("div", { class: "small", text: t("picker.lastAt", { at: new Date(last.at).toLocaleString() }) }) : hint(t("picker.never"))) : null,
-  ].filter(Boolean));
-  const pickerButton = $("#client-picker-toggle");
-  pickerButton.textContent = picker.enabled ? t("picker.turnOff") : t("picker.turnOn");
-  pickerButton.className = picker.enabled ? "btn secondary" : "btn";
-  pickerButton.disabled = pickerBusy;
-  pickerButton.onclick = () => togglePicker(!picker.enabled);
+  // The switch rows are static markup, so a five-second refresh never takes keyboard focus off one;
+  // only the rows after the switch are rebuilt.
+  const pickerGroup = $("#client-picker-rows");
+  while (pickerGroup.children.length > 1) pickerGroup.lastElementChild.remove();
+  if (picker.enabled) {
+    pickerGroup.append(
+      el("div", { class: "cell-note", text: t("picker.models", { count: names.length, names: names.join(", ") || "—" }) }),
+      el("div", { class: "cell-note", text: last && last.at ? t("picker.lastAt", { at: new Date(last.at).toLocaleString() }) : t("picker.never") }),
+    );
+  }
+  const pickerSwitch = $("#client-picker-toggle");
+  pickerSwitch.checked = Boolean(picker.enabled);
+  pickerSwitch.disabled = pickerBusy;
+  // Turning it on asks first (the OS trust prompt follows); a "no" puts the switch back.
+  pickerSwitch.onchange = () => {
+    if (!picker.enabled && !confirm(t("picker.confirmOn"))) { pickerSwitch.checked = false; return; }
+    pickerSwitch.disabled = true;
+    void togglePicker(!picker.enabled, true);
+  };
   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");
-  agentButton.textContent = agentEnabled ? t("agentTitle.turnOff") : t("agentTitle.turnOn");
-  agentButton.className = agentEnabled ? "btn secondary" : "btn";
-  agentButton.disabled = agentTitleBusy;
-  agentButton.onclick = () => toggleAgentTitle(!agentEnabled);
   const modEnabled = Boolean(status.statusMod);
-  $("#client-status-mod-rows").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("picker.state") }), modEnabled ? badge("ok", t("agentTitle.on")) : el("span", { class: "small", text: t("agentTitle.off") })]));
-  const modButton = $("#client-status-mod-toggle");
-  modButton.textContent = modEnabled ? t("statusMod.turnOff") : t("statusMod.turnOn");
-  modButton.className = modEnabled ? "btn secondary" : "btn";
-  modButton.disabled = statusModBusy;
-  modButton.onclick = () => toggleStatusMod(!modEnabled);
+  const modSwitch = $("#client-status-mod-toggle");
+  modSwitch.checked = modEnabled;
+  modSwitch.disabled = statusModBusy;
+  modSwitch.onchange = () => { modSwitch.disabled = true; void toggleStatusMod(!modEnabled); };
   const toolsLimited = Boolean(currentConfig.cli && currentConfig.cli.limitWorkerTools);
-  $("#client-worker-tools-rows").replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("picker.state") }), toolsLimited ? badge("ok", t("workerTools.on")) : el("span", { class: "small", text: t("workerTools.off") })]));
-  const toolsButton = $("#client-worker-tools-toggle");
-  toolsButton.textContent = toolsLimited ? t("workerTools.turnOff") : t("workerTools.turnOn");
-  toolsButton.className = toolsLimited ? "btn secondary" : "btn";
-  toolsButton.onclick = () => toggleWorkerTools(!toolsLimited);
+  const toolsSwitch = $("#client-worker-tools-toggle");
+  toolsSwitch.checked = toolsLimited;
+  toolsSwitch.onchange = () => { toolsSwitch.disabled = true; void toggleWorkerTools(!toolsLimited).finally(() => { toolsSwitch.disabled = false; }); };
   void renderCodexClient();
-  const mapped = Object.entries(currentConfig.routes || {}).map(([source, route]) => `${labelOf(claudeModels.find((model) => model.id === source) || { id: source })} → ${labelOf((groupedModels(currentConfig).find((group) => group.name === route.provider) || { models: [] }).models.find((model) => model.id === route.model) || { id: route.model })}`);
-  $("#client-claude-code-rows").replaceChildren(el("div", { class: "small", text: mapped.join(" · ") || t("slots.noChanges") }));
+  const groups = groupedModels(currentConfig);
+  const mapped = Object.entries(currentConfig.routes || {}).map(([source, route]) => cell(
+    labelOf(claudeModels.find((model) => model.id === source) || { id: source }),
+    el("span", { text: labelOf((groups.find((group) => group.name === route.provider) || { models: [] }).models.find((model) => model.id === route.model) || { id: route.model }) }),
+  ));
+  $("#client-claude-code-rows").replaceChildren(...(mapped.length ? mapped : [el("div", { class: "cell-note", text: t("slots.noChanges") })]));
 }
 function renderClientPickerModels(enabled) {
   const card = $("#client-picker-models-card");
@@ -552,11 +607,8 @@ function renderModelSlots() {
     }
     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}`) }),
-    ]);
+    select.setAttribute("aria-label", t(`slots.slot.${slot}`));
+    return cell(t(`slots.slot.${slot}`), select, t(`slots.slotHelp.${slot}`), "slot-row");
   }));
 }
 
@@ -622,19 +674,6 @@ async function togglePicker(enabled, confirmed = false) {
     void refreshHealth();
   }
 }
-async function toggleAgentTitle(enabled) {
-  if (agentTitleBusy) return;
-  agentTitleBusy = true;
-  try {
-    await api("/api/agent-title", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ enabled }) });
-    toast(t("common.saved"));
-  } catch (error) {
-    toast(t("common.actionFailed"), true, error.message);
-  } finally {
-    agentTitleBusy = false;
-    void refreshHealth();
-  }
-}
 async function toggleStatusMod(enabled) {
   if (statusModBusy) return;
   statusModBusy = true;
@@ -660,17 +699,19 @@ async function toggleWorkerTools(enabled) {
   renderClients();
 }
 async function renderCodexClient() {
-  const rows = $("#client-codex-rows");
-  const button = $("#client-codex-toggle");
+  const path = $("#client-codex-rows");
+  const toggle = $("#client-codex-toggle");
   try {
     const codex = await api("/api/codex");
-    rows.replaceChildren(el("div", { class: "row" }, [el("span", { class: "k", text: t("picker.state") }), codex.enabled ? badge("ok", t("picker.on")) : el("span", { class: "small", text: t("picker.off") })]), el("div", { class: "small", text: codex.configPath }));
-    button.textContent = codex.enabled ? t("clients.codex.turnOff") : t("clients.codex.turnOn");
-    button.className = codex.enabled ? "btn secondary" : "btn";
-    button.disabled = codexBusy;
-    button.onclick = () => toggleCodex(!codex.enabled);
+    path.textContent = codex.configPath || "";
+    path.classList.remove("bad-text");
+    toggle.checked = Boolean(codex.enabled);
+    toggle.disabled = codexBusy;
+    toggle.onchange = () => { toggle.disabled = true; void toggleCodex(!codex.enabled); };
   } catch (error) {
-    rows.replaceChildren(el("div", { class: "small bad-text", text: error.message }));
+    path.textContent = error.message;
+    path.classList.add("bad-text");
+    toggle.disabled = true;
   }
 }
 async function toggleCodex(enabled) {
@@ -716,14 +757,19 @@ function routeFromTarget(value) {
     return provider && model ? { provider, model } : null;
   } catch { return null; }
 }
+// One mapping per row: the Claude model, what answers it, and its effort. On a narrow window the
+// three stack, so each carries its own small label (hidden where the column heads show).
 function slotRow(id, route) {
-  const row = el("tr", {});
+  const row = el("div", { class: "map-row" });
   const source = claudeSelect(id);
   const target = targetSelect(route);
+  source.setAttribute("aria-label", t("slots.th.claude"));
+  target.setAttribute("aria-label", t("slots.th.target"));
   const initialTarget = routeFromTarget(target.value);
   const effort = effortSelect(route && route.effort, initialTarget ? effortLevelsFor(initialTarget.provider, initialTarget.model) : ["high"]);
-  const effortCell = el("td", {}, [effort]);
-  const remove = el("button", { class: "icon-btn", type: "button", title: t("common.remove"), text: "×", onclick: () => { row.remove(); updateSlotSummary(); scheduleSlotsSave(); } });
+  effort.setAttribute("aria-label", t("slots.th.effort"));
+  const effortCell = el("div", { class: "map-col map-effort" }, [el("span", { class: "map-label", text: t("slots.th.effort") }), effort]);
+  const remove = el("button", { class: "icon-btn remove", type: "button", title: t("common.remove"), "aria-label": t("common.remove"), onclick: () => { row.remove(); updateSlotSummary(); scheduleSlotsSave(); } }, [svgIcon("0 0 20 20", ["M10 2.8a7.2 7.2 0 1 0 0 14.4 7.2 7.2 0 0 0 0-14.4z", "M6.6 10h6.8"])]);
   function sync() {
     const selected = routeFromTarget(target.value);
     const levels = selected ? effortLevelsFor(selected.provider, selected.model) : [];
@@ -745,7 +791,13 @@ function slotRow(id, route) {
   target.addEventListener("change", () => { sync(); scheduleSlotsSave(); });
   source.addEventListener("change", () => { updateSlotSummary(); scheduleSlotsSave(); });
   effort.addEventListener("change", scheduleSlotsSave);
-  row.append(el("td", {}, [source]), el("td", {}, [target]), effortCell, el("td", { class: "icon-cell" }, [remove]));
+  row.append(
+    el("div", { class: "map-col map-source" }, [el("span", { class: "map-label", text: t("slots.th.claude") }), source]),
+    el("span", { class: "map-arrow", "aria-hidden": "true", text: "→" }),
+    el("div", { class: "map-col map-target" }, [el("span", { class: "map-label", text: t("slots.th.target") }), target]),
+    effortCell,
+    el("div", { class: "map-remove" }, [remove]),
+  );
   row._get = () => ({ id: source.value, route: routeFromTarget(target.value), effort: effort.value });
   sync();
   return row;
@@ -755,7 +807,7 @@ async function loadSlots() {
   try {
     await loadCatalogs();
     currentConfig = await api("/api/config");
-    const rows = $("#slots-table tbody");
+    const rows = $("#slots-list");
     rows.replaceChildren();
     const routes = currentConfig.routes || {};
     const ids = [...claudeModels.map((model) => model.id), ...Object.keys(routes).filter((id) => !claudeModels.some((model) => model.id === id))];
@@ -767,7 +819,7 @@ async function loadSlots() {
 }
 $("#slots-add").addEventListener("click", () => {
   if (!currentConfig) return;
-  $("#slots-table tbody").appendChild(slotRow(claudeModels[0].id, null));
+  $("#slots-list").appendChild(slotRow(claudeModels[0].id, null));
   updateSlotSummary();
 });
 function allKnownModelIds(config) { return new Set(groupedModels(config).flatMap((group) => group.models.map((model) => model.id))); }
@@ -836,7 +888,7 @@ function applyPickerSelections(next, selections) {
   return next;
 }
 function updateSlotSummary() {
-  const summaries = $all("#slots-table tbody tr").map((row) => row._get()).filter((item) => item.route).slice(0, 3).map((item) => {
+  const summaries = $all("#slots-list .map-row").map((row) => row._get()).filter((item) => item.route).slice(0, 3).map((item) => {
     const source = claudeModels.find((model) => model.id === item.id);
     const group = groupedModels(currentConfig).find((itemGroup) => itemGroup.name === item.route.provider);
     const target = group && group.models.find((model) => model.id === item.route.model);
@@ -864,7 +916,7 @@ async function saveSlots() {
   const next = clone(await latestConfig());
   const routes = {};
   const seen = new Set();
-  for (const row of $all("#slots-table tbody tr")) {
+  for (const row of $all("#slots-list .map-row")) {
     const item = row._get();
     if (seen.has(item.id)) { slotsStatus(t("slots.duplicate"), true); slotsSaving = false; return; }
     seen.add(item.id);
@@ -1026,14 +1078,27 @@ function providerRailItem(name, provider) {
     ]),
     providerState(name, provider),
   ]);
-  button.addEventListener("click", () => {
-    selectedProviderName = name;
-    providerDetailTab = provider.type === "anthropic" && provider.auth === "claude-code" ? "accounts" : "overview";
-    renderProviderWorkspace();
-  });
+  button.addEventListener("click", () => openProvider(name, provider));
   return button;
 }
 
+/**
+ * Show one provider's page, from its list or from the Status screen. A narrow window shows the list
+ * and the page one at a time (`show-detail`), so this is also the "push" to the page.
+ */
+function openProvider(name, provider) {
+  selectedProviderName = name;
+  providerDetailTab = provider.type === "anthropic" && provider.auth === "claude-code" ? "accounts" : "overview";
+  $("#view-providers").classList.add("show-detail");
+  if (!$("#view-providers").classList.contains("active")) showView("providers");
+  if (currentConfig && currentConfig.providers && currentConfig.providers[name]) renderProviderWorkspace();
+  window.scrollTo(0, 0);
+}
+function closeProviderDetail() {
+  $("#view-providers").classList.remove("show-detail");
+  window.scrollTo(0, 0);
+}
+
 function renderProviderRail() {
   const list = $("#providers-list");
   const entries = Object.entries((currentConfig && currentConfig.providers) || {});
@@ -1058,6 +1123,7 @@ async function removeProvider(name, provider) {
     providerDetailTab = "overview";
     slotsLoaded = false;
     clientsLoaded = false;
+    closeProviderDetail();
     renderProviderWorkspace();
     toast(t("common.saved"));
   } catch (error) { toast(t("common.saveFailed"), true, error.message); }
@@ -1077,36 +1143,36 @@ function providerTabs(name, provider) {
 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: providerConnection(name).text }), el("span", { text: providerKind(name, provider) })]),
-      providerState(name, provider),
+  const connection = section(t("providers.connection"), [
+    // The kind is already under the page title; this row is only the verdict and what to do about it.
+    cell(t("health.connection"), providerState(name, provider), [
+      state && !state.ok && state.error ? el("span", { class: "cell-sub bad-text", text: shortError(state.error), title: state.error }) : null,
+      live && live.needsLogin && provider.type === "chatgpt" ? el("div", { class: "cell-actions" }, [chatgptLoginButton(renderProviderDetail)]) : null,
     ]),
-    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 && provider.type === "chatgpt" ? 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 models = modelsOf(provider);
   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 running = measuring && measuring.state === "running";
+  // Names only, as one quiet line: the Models tab is where each one is listed and edited.
+  const modelSummary = section(t("providers.selectedModels"), [
+    models.length ? el("div", { class: "cell-note" }, [el("span", { class: "cell-label", text: models.map(labelOf).join(", ") })]) : el("div", { class: "cell-note", text: t("providers.noModels") }),
+    running ? el("div", { class: "cell-note", text: t("measure.running", { done: measuring.done, total: measuring.total }) }) : null,
+  ], running ? t("measure.help") : null);
   const quota = quotaLine(name);
-  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));
+  return el("div", { class: "provider-panel" }, [
+    connection,
+    quota ? section(null, [cell(t("providers.usage"), el("span", { text: quota }))]) : null,
+    modelSummary,
+  ]);
 }
 
 function providerModelsPanel(name, provider) {
   const models = modelsOf(provider);
+  const edit = el("button", { class: "btn secondary compact", type: "button", text: t("common.edit"), onclick: () => openProviderForm({ name, 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")),
-    ]),
+    section(t("providers.selectedModels"), models.length
+      ? models.map((model) => cell(labelOf(model), modelEffortTag(model) ? el("span", { class: `model-effort-tag ${model.effortLevels.length ? "has-effort" : "no-effort"}`, text: modelEffortTag(model) }) : null, el("span", { class: "cell-sub mono", text: model.id }), "provider-model-row"))
+      : [el("div", { class: "cell-note", text: t("providers.noModels") })], t("providers.modelsHelp"), edit),
   ]);
 }
 
@@ -1141,14 +1207,37 @@ function claudeQuotaNode(account) {
   return text ? el("p", { class: "small account-quota", text }) : null;
 }
 
+/** "Use first" for an account the pool does not lead with; `null` hands first place back to the current login. */
+function claudePreferButton(name, id, disabled) {
+  const button = el("button", { class: "btn secondary compact", type: "button", text: t("providers.preferAction") });
+  button.disabled = disabled;
+  button.addEventListener("click", async () => {
+    button.disabled = true;
+    try { await api("/api/claude-accounts", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ preferred: id }) }); await refreshClaudeAccountPanel(name); }
+    catch (error) { button.disabled = false; toast(t("common.actionFailed"), true, error.message); }
+  });
+  return button;
+}
+
 function renderClaudeAccountRows(target, data, name, generation) {
   if (generation !== providerDetailGeneration) return;
+  // Rows follow the order the router tries them in: the preferred account, else the current login, first.
+  const stored = Array.isArray(data.accounts) ? [...data.accounts] : [];
+  const preferredIndex = stored.findIndex((account) => account.preferred);
+  if (preferredIndex > 0) stored.unshift(...stored.splice(preferredIndex, 1));
+  const leader = preferredIndex >= 0 ? stored[0].id : data.current ? "current" : stored[0] && stored[0].id;
+  const choosable = (data.current ? 1 : 0) + stored.length > 1;
+  const firstBadge = (id) => (choosable && id === leader ? el("span", { class: "badge first", text: t("providers.preferBadge") }) : null);
   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) }), claudeQuotaNode(data.current), hint(t("providers.currentAccountHelp"))].filter(Boolean)),
-    el("span", { class: "badge ok", text: t("providers.anthropicCurrent") }),
-  ]));
-  for (const account of Array.isArray(data.accounts) ? data.accounts : []) {
+  const currentRow = data.current ? el("article", { class: "cell account-card current" }, [
+    el("div", { class: "cell-text account-card-copy" }, [
+      el("strong", { text: data.current.label }), el("span", { class: "small", text: anthropicSourceText(data.current.source) }), claudeQuotaNode(data.current), hint(t("providers.currentAccountHelp")),
+      choosable && leader !== "current" ? el("div", { class: "account-card-actions" }, [claudePreferButton(name, null, false)]) : null,
+    ]),
+    el("div", { class: "account-card-badges" }, [firstBadge("current"), el("span", { class: "badge ok", text: t("providers.anthropicCurrent") })]),
+  ]) : null;
+  if (currentRow && preferredIndex < 0) rows.push(currentRow);
+  for (const account of stored) {
     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 () => {
@@ -1164,19 +1253,25 @@ function renderClaudeAccountRows(target, data, name, generation) {
       catch (error) { toast(t("common.actionFailed"), true, error.message); }
     });
     const actions = [rename, remove];
+    if (choosable && account.id !== leader) actions.unshift(claudePreferButton(name, account.id, unavailable));
     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, claudeQuotaNode(account), hint(t("providers.addedAccountHelp"))].filter(Boolean)),
-      el("span", { class: `badge ${unavailable ? "bad" : "ok"}`, text: unavailable ? t("providers.anthropicReauth") : t("pool.ready") }),
-      el("div", { class: "account-card-actions" }, actions),
+    rows.push(el("article", { class: "cell account-card" }, [
+      el("div", { class: "cell-text account-card-copy" }, [
+        el("strong", { text: account.label }), account.email && account.email !== account.label ? el("span", { class: "small", text: account.email }) : null, claudeQuotaNode(account), hint(t("providers.addedAccountHelp")),
+        el("div", { class: "account-card-actions" }, actions),
+      ]),
+      el("div", { class: "account-card-badges" }, [firstBadge(account.id), el("span", { class: `badge ${unavailable ? "bad" : "ok"}`, text: unavailable ? t("providers.anthropicReauth") : t("pool.ready") })]),
     ]));
+    if (currentRow && rows.length === 1 && preferredIndex >= 0) rows.push(currentRow);
   }
-  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);
+  target.replaceChildren(...(rows.length ? rows : [el("div", { class: "account-empty", text: t("providers.anthropicNoAccounts") })]));
+  const preferNote = $("#claude-account-prefer");
+  if (preferNote) preferNote.hidden = !choosable;
+  const count = (data.current ? 1 : 0) + stored.length;
   const countNode = $("#claude-account-count");
   if (countNode) countNode.textContent = t("providers.accountCount", { count });
 }
@@ -1193,24 +1288,32 @@ 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") });
+  const add = el("button", { class: "cell-button", type: "button", text: t("providers.addClaudeAccount") });
   add.addEventListener("click", () => openClaudeAccountConsent(name));
-  const removeAll = el("button", { class: "btn danger", type: "button", text: t("providers.anthropicLogoutAll") });
+  const removeAll = el("button", { class: "cell-button destructive", 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") })]);
+  rotation.setAttribute("role", "switch");
+  rotation.setAttribute("aria-label", t("providers.anthropicPool"));
+  const rows = el("div", { id: "claude-account-rows", class: "group account-card-list" }, [el("div", { class: "small", text: t("providers.checking") })]);
+  // The rotation switch first (it decides whether added accounts are used at all), then the
+  // accounts with "Add" at the end of their list, then the one destructive act on its own.
   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: "section" }, [
+      el("div", { class: "group" }, [cell(t("providers.anthropicPool"), el("label", { class: "switch" }, [rotation, el("span")]), [t("providers.accountPoolSubtitle"), rotationMessage])]),
+      !provider.accountPool ? el("div", { class: "group-footer notice" }, [el("strong", { text: t("providers.rotationOff") }), el("span", { text: t("providers.rotationRequired") })]) : null,
+    ]),
+    el("section", { class: "section" }, [
+      el("div", { class: "section-head" }, [el("h3", { class: "section-title", text: t("providers.accountPoolTitle") }), el("span", { id: "claude-account-count", class: "small", text: t("providers.accountCount", { count: 0 }) })]),
+      rows,
+      el("div", { class: "group stacked-add" }, [add]),
+      el("p", { class: "group-footer", text: t("providers.accountCountHelp") }),
+      el("p", { id: "claude-account-prefer", class: "group-footer", text: t("providers.preferHelp"), hidden: "" }),
     ]),
-    el("section", { class: "detail-section" }, [rows]),
-    el("section", { class: "detail-section danger-section" }, [el("h3", { text: t("providers.dangerZone") }), hint(t("providers.anthropicLogoutAllConfirm")), removeAll]),
+    section(t("providers.dangerZone"), [removeAll], t("providers.anthropicLogoutAllConfirm")),
   ]);
   queueMicrotask(() => void refreshClaudeAccountPanel(name));
   return panel;
@@ -1294,18 +1397,18 @@ function renderChatgptAccountRows(target, data, name, generation) {
     const quota = chatgptQuotaText(account.quota);
     const detail = [account.email && account.email !== account.label ? account.email : null, account.planType || null].filter(Boolean).join(" · ");
     const help = account.state === "needs-login" || account.state === "quarantined" ? t("providers.chatgptReauthHelp") : own ? t("providers.chatgptOwnHelp") : t("providers.chatgptCodexHelp");
-    return el("article", { class: `account-card stacked${account.active ? " current" : ""}` }, [
-      el("div", { class: "account-card-copy" }, [
+    return el("article", { class: `cell account-card${account.active ? " current" : ""}` }, [
+      el("div", { class: "cell-text account-card-copy" }, [
         el("strong", { text: account.label }),
         detail ? el("span", { class: "small", text: detail }) : null,
         quota ? el("p", { class: "small account-quota", text: quota }) : null,
         hint(help),
-      ].filter(Boolean)),
-      chatgptStateBadge(account),
-      actions.length ? el("div", { class: "account-card-actions" }, actions) : null,
-    ].filter(Boolean));
+        actions.length ? el("div", { class: "account-card-actions" }, actions) : null,
+      ]),
+      el("div", { class: "account-card-badges" }, [chatgptStateBadge(account)]),
+    ]);
   });
-  target.replaceChildren(...(rows.length ? rows : [el("div", { class: "empty-card", text: t("providers.chatgptNoAccounts") })]));
+  target.replaceChildren(...(rows.length ? rows : [el("div", { class: "account-empty", text: t("providers.chatgptNoAccounts") })]));
   const countNode = $("#chatgpt-account-count");
   if (countNode) countNode.textContent = t("providers.chatgptAccountCount", { count: accounts.length });
 }
@@ -1397,17 +1500,17 @@ function renderGoogleAccountRows(target, data, name, generation) {
     });
     actions.push(pause, rename, remove);
     const detail = [account.email && account.email !== account.label ? account.email : null, account.projectId ? t("providers.googleProject", { id: account.projectId }) : null].filter(Boolean).join(" · ");
-    return el("article", { class: `account-card stacked${account.active ? " current" : ""}` }, [
-      el("div", { class: "account-card-copy" }, [
+    return el("article", { class: `cell account-card${account.active ? " current" : ""}` }, [
+      el("div", { class: "cell-text account-card-copy" }, [
         el("strong", { text: account.label }),
         detail ? el("span", { class: "small", text: detail }) : null,
         hint(account.state === "needs-login" || account.state === "quarantined" ? t("providers.chatgptReauthHelp") : account.state === "needs-verification" ? t("providers.googleVerifyHelp") : t("providers.googleOwnHelp")),
-      ].filter(Boolean)),
-      chatgptStateBadge(account),
-      el("div", { class: "account-card-actions" }, actions),
-    ].filter(Boolean));
+        el("div", { class: "account-card-actions" }, actions),
+      ]),
+      el("div", { class: "account-card-badges" }, [chatgptStateBadge(account)]),
+    ]);
   });
-  target.replaceChildren(...(rows.length ? rows : [el("div", { class: "empty-card", text: t("providers.googleNoAccounts") })]));
+  target.replaceChildren(...(rows.length ? rows : [el("div", { class: "account-empty", text: t("providers.googleNoAccounts") })]));
   const countNode = $("#google-account-count");
   if (countNode) countNode.textContent = t("providers.chatgptAccountCount", { count: accounts.length });
 }
@@ -1421,17 +1524,19 @@ async function refreshGoogleAccountPanel(name) {
 }
 
 function googleAccountsPanel(name) {
-  const add = el("button", { class: "btn", type: "button", text: t("providers.addGoogleAccount") });
+  const add = el("button", { class: "cell-button", type: "button", text: t("providers.addGoogleAccount") });
   add.disabled = googleLoginBusy;
   add.addEventListener("click", () => void startGoogleLogin(() => { renderProviderDetail(); void refreshGoogleAccountPanel(name); }));
-  const rows = el("div", { id: "google-account-rows", class: "account-card-list" }, [el("div", { class: "small", text: t("providers.checking") })]);
+  const rows = el("div", { id: "google-account-rows", class: "group 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.googleAccountsTitle") }), el("p", { id: "google-account-count", class: "account-count", text: t("providers.chatgptAccountCount", { count: 0 }) }), hint(t("providers.googleAccountsSubtitle"))]), add]),
-      googleLoginBusy ? el("p", { class: "small", text: t("providers.googleLoginWaiting") }) : null,
-      el("p", { class: "small warn-text", text: t("providers.googleWarningShort") }),
-    ].filter(Boolean)),
-    el("section", { class: "detail-section" }, [rows]),
+    el("section", { class: "section" }, [
+      el("div", { class: "section-head" }, [el("h3", { class: "section-title", text: t("providers.googleAccountsTitle") }), el("span", { id: "google-account-count", class: "small", text: t("providers.chatgptAccountCount", { count: 0 }) })]),
+      rows,
+      el("div", { class: "group stacked-add" }, [add]),
+      googleLoginBusy ? el("p", { class: "group-footer", text: t("providers.googleLoginWaiting") }) : null,
+      el("p", { class: "group-footer", text: t("providers.googleAccountsSubtitle") }),
+      el("div", { class: "group-footer notice" }, [el("strong", { text: t("providers.googleWarningShort") })]),
+    ]),
   ]);
   queueMicrotask(() => void refreshGoogleAccountPanel(name));
   return panel;
@@ -1446,17 +1551,20 @@ async function refreshChatgptAccountPanel(name) {
 }
 
 function chatgptAccountsPanel(name) {
-  const add = el("button", { class: "btn", type: "button", text: t("providers.addChatgptAccount") });
+  const add = el("button", { class: "cell-button", type: "button", text: t("providers.addChatgptAccount") });
   add.disabled = chatgptLoginBusy;
-  const waiting = el("p", { class: "small", text: chatgptLoginBusy ? t("providers.chatgptAddWaiting") : "" });
+  const waiting = el("p", { class: "group-footer", text: chatgptLoginBusy ? t("providers.chatgptAddWaiting") : "" });
+  waiting.hidden = !chatgptLoginBusy;
   add.addEventListener("click", () => void startChatgptLogin(() => { renderProviderDetail(); void refreshChatgptAccountPanel(name); }, true));
-  const rows = el("div", { id: "chatgpt-account-rows", class: "account-card-list" }, [el("div", { class: "small", text: t("providers.checking") })]);
+  const rows = el("div", { id: "chatgpt-account-rows", class: "group 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.chatgptAccountsTitle") }), el("p", { id: "chatgpt-account-count", class: "account-count", text: t("providers.chatgptAccountCount", { count: 0 }) }), hint(t("providers.chatgptAccountsSubtitle"))]), add]),
+    el("section", { class: "section" }, [
+      el("div", { class: "section-head" }, [el("h3", { class: "section-title", text: t("providers.chatgptAccountsTitle") }), el("span", { id: "chatgpt-account-count", class: "small", text: t("providers.chatgptAccountCount", { count: 0 }) })]),
+      rows,
+      el("div", { class: "group stacked-add" }, [add]),
       waiting,
+      el("p", { class: "group-footer", text: t("providers.chatgptAccountsSubtitle") }),
     ]),
-    el("section", { class: "detail-section" }, [rows]),
   ]);
   queueMicrotask(() => void refreshChatgptAccountPanel(name));
   return panel;
@@ -1474,10 +1582,12 @@ function renderProviderDetail() {
   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) });
+  // Removing is the one destructive act on this page, so it sits apart at the bottom, not beside Edit.
+  const remove = el("button", { class: "cell-button destructive", type: "button", text: t("providers.remove"), onclick: () => void removeProvider(name, provider) });
+  const back = el("button", { class: "provider-back", type: "button", onclick: closeProviderDetail }, [svgIcon("0 0 9 15", ["M7.5 1.5l-6 6 6 6"]), el("span", { text: t("nav.providers") })]);
   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]),
+    el("div", { class: "provider-detail-actions" }, [check, edit]),
   ]);
   let content;
   if (providerDetailTab === "accounts" && provider.type === "anthropic" && provider.auth === "claude-code") content = anthropicAccountsPanel(name, provider);
@@ -1485,7 +1595,7 @@ function renderProviderDetail() {
   else if (providerDetailTab === "accounts" && provider.type === "google" && provider.auth === "antigravity") content = googleAccountsPanel(name);
   else if (providerDetailTab === "models") content = providerModelsPanel(name, provider);
   else { providerDetailTab = "overview"; content = providerOverview(name, provider); }
-  detail.replaceChildren(header, providerTabs(name, provider), content);
+  detail.replaceChildren(back, header, providerTabs(name, provider), content, el("div", { class: "group provider-remove" }, [remove]));
 }
 
 function renderProviderWorkspace() {
@@ -1631,35 +1741,34 @@ async function openClaudeAccountSignIn(providerName, manual) {
   } catch (error) { showError({ ok: false, error: error.message }); }
 }
 
+// The services one can connect, as grouped lists: sign-in subscriptions first, then the API-key
+// presets by the format they speak (the "paste a key" note is said once per group, not per row),
+// then the manual entry on its own.
 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") })]);
-  anthropic.addEventListener("click", () => openProviderForm({ kind: "anthropic" }));
-  grid.appendChild(anthropic);
-  const chatgpt = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: t("providers.chatgpt") }), el("span", { text: t("providers.chatgptHelp") })]);
-  chatgpt.addEventListener("click", () => openProviderForm({ kind: "chatgpt" }));
-  grid.appendChild(chatgpt);
-  const google = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: t("providers.google") }), el("span", { text: t("providers.googleHelp") })]);
-  google.addEventListener("click", () => openProviderForm({ kind: "google" }));
-  grid.appendChild(google);
-  const native = presets.filter((preset) => (preset.kind || "anthropic-compatible") === "anthropic-compatible");
-  for (const preset of native) {
-    const tile = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: preset.name }), el("span", { text: t("providers.presetHelp") })]);
-    tile.addEventListener("click", () => openProviderForm({ preset }));
-    grid.appendChild(tile);
+  function tile(title, help, options) {
+    const button = el("button", { class: "chooser-tile", type: "button" }, [el("span", { class: "cell-text" }, [el("strong", { text: title }), help ? el("span", { text: help }) : null]), chevronIcon()]);
+    button.addEventListener("click", () => openProviderForm(options));
+    return button;
   }
-  const openai = presets.filter((preset) => preset.kind === "openai-compatible");
-  if (openai.length) {
-    grid.appendChild(el("div", { class: "chooser-group" }, [el("strong", { text: t("providers.openaiGroup") }), el("span", { text: t("providers.openaiGroupHelp") })]));
-    for (const preset of openai) {
-      const tile = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: preset.name }), el("span", { text: t("providers.presetHelp") })]);
-      tile.addEventListener("click", () => openProviderForm({ preset }));
-      grid.appendChild(tile);
-    }
+  function group(title, tiles, footer, single) {
+    if (!tiles.length) return;
+    grid.appendChild(el("section", { class: "chooser-section" }, [
+      title ? el("div", { class: "section-head" }, [el("h3", { class: "section-title", text: title })]) : null,
+      el("div", { class: `group chooser-group chooser-tiles${single ? " single" : ""}` }, tiles),
+      footer ? el("p", { class: "group-footer", text: footer }) : null,
+    ]));
   }
-  const custom = el("button", { class: "chooser-tile", type: "button" }, [el("strong", { text: t("providers.custom") }), el("span", { text: t("providers.customHelp") })]);
-  custom.addEventListener("click", () => openProviderForm({ kind: "custom" }));
-  grid.appendChild(custom);
+  group(t("providers.subscriptionGroup"), [
+    tile(t("providers.anthropic"), t("providers.anthropicHelp"), { kind: "anthropic" }),
+    tile(t("providers.chatgpt"), t("providers.chatgptHelp"), { kind: "chatgpt" }),
+    tile(t("providers.google"), t("providers.googleHelp"), { kind: "google" }),
+  ], null, true);
+  const native = presets.filter((preset) => (preset.kind || "anthropic-compatible") === "anthropic-compatible");
+  group(t("providers.anthropicGroup"), native.map((preset) => tile(preset.name, null, { preset })), t("providers.presetHelp"));
+  const openai = presets.filter((preset) => preset.kind === "openai-compatible");
+  group(t("providers.openaiGroup"), openai.map((preset) => tile(preset.name, null, { preset })), `${t("providers.presetHelp")} ${t("providers.openaiGroupHelp")}`);
+  group(null, [tile(t("providers.custom"), t("providers.customHelp"), { kind: "custom" })], null, true);
   showModal(el("div", {}, [el("h1", { id: "modal-title", text: t("providers.choose") }), hint(t("providers.chooseHelp")), grid]));
 }
 function inputRow(label, control, helpText) {
@@ -2241,6 +2350,619 @@ function openProviderForm(options) {
   showModal(form, () => { if (isChatgpt) formActive = false; });
 }
 
+// ---- ClaudeRipple mod ---------------------------------------------------------------
+//
+// The mod's settings live in the router (GET/PUT /api/mod-settings); the ⚙ panel in the bar edits
+// the same object. As in System Settings a change applies itself: it is saved after a short pause
+// with the revision it was made on. A 409 means another surface saved first — its settings are
+// shown and the change made here is dropped, rather than quietly overwriting theirs.
+
+const MOD_EFFORTS = ["low", "medium", "high", "xhigh", "max"];
+// The band's parts the person can turn off (`hide`), then the ones it shows only when turned on
+// (`extras`, as the mod's settings.ts EXTRAS): the judge's reason is in the effort's tip alone.
+const MOD_PARTS = ["timer", "route"];
+const MOD_EXTRAS = ["context", "limits"];
+// Named in themselves, as the mod's own Look card lists them.
+const MOD_LANGUAGES = [["ko", "한국어"], ["en", "English"], ["zh", "简体中文"], ["ja", "日本語"], ["es", "Español"], ["pt", "Português"]];
+// Claude Code's own agent with a model: what the mod offers besides the generated workers, smallest
+// first, and their current model ids (packages/mod/hooks/settings.ts CLAUDE_WORKERS).
+const MOD_CLAUDE_MODELS = ["haiku", "sonnet", "opus", "fable"];
+const MOD_CLAUDE_IDS = { haiku: "claude-haiku-5-5", sonnet: "claude-sonnet-5-5", opus: "claude-opus-5-5", fable: "claude-fable-5-1" };
+// The four workers, low to max (the mod's rung ids: light, standard, hard, plan).
+const MOD_RUNGS = ["light", "standard", "hard", "plan"];
+const modClaude = (model, effort) => ({ target: { agent: "general-purpose", model }, effort });
+/** The mod's defaults (packages/mod/hooks/settings.ts), for a router that has stored nothing yet. */
+const MOD_DEFAULTS = {
+  effortAuto: true, judge: "haiku", judgeModel: "deepseek-v4.1-flash", jevSource: "typesafe",
+  bias: 0, floor: "low", ceiling: "max", agentAuto: "auto",
+  rules: {
+    general: { mode: "ladder", rungs: {
+      light: [{ target: { agent: "deepseek-v4-1-flash" }, effort: "max" }], standard: [{ target: { agent: "gpt-6-1-sol" }, effort: "medium" }],
+      hard: [{ target: { agent: "gpt-6-astra" }, effort: "high" }], plan: [modClaude("opus", "high")],
+    } },
+  },
+  allow: [], modes: [], providers: {},
+  fallback: { agent: "general-purpose", model: "sonnet" },
+  keepWarm: false, keepWarmHours: 2, keepWarmMinTokens: 30000,
+  compactWith: "haiku", handoffSkill: "", handoffAfter: "continue", handoffButton: "advised",
+  swampAt: 50, layout: "dashboard", appearance: "auto", language: "auto", hide: ["reason"], extras: [], setupDone: false,
+};
+
+let modState = { settings: null, revision: 0, options: null, retiredNote: false };
+let modSaveTimer = null;
+let modSaving = false;
+let modSaveAgain = false;
+
+/**
+ * The router hands back the mod's full normalized settings; this only fills what an older router
+ * (or an empty store) leaves out, so the page never draws a control over `undefined`. Fields this
+ * page does not know are kept and sent back as they came.
+ */
+function modNormalize(raw) {
+  const value = raw && typeof raw === "object" && !Array.isArray(raw) ? clone(raw) : {};
+  return {
+    ...clone(MOD_DEFAULTS),
+    ...value,
+    rules: { ...clone(MOD_DEFAULTS.rules), ...(value.rules || {}) },
+    allow: Array.isArray(value.allow) ? value.allow : [],
+    modes: Array.isArray(value.modes) ? value.modes : [],
+    providers: { ...(value.providers || {}) },
+    hide: Array.isArray(value.hide) ? value.hide : clone(MOD_DEFAULTS.hide),
+  };
+}
+
+function modCap(text) { return text ? text.charAt(0).toLocaleUpperCase() + text.slice(1) : text; }
+function modEffortName(effort) { return t(`mod.effort.${effort}`); }
+function modSigned(n) { return n > 0 ? `+${n}` : n < 0 ? `−${-n}` : "0"; }
+function modTargetValue(target) { return target && target.agent ? (target.model ? `${target.agent}+${target.model}` : target.agent) : ""; }
+function modTargetOf(value) {
+  const plus = value.indexOf("+");
+  return plus < 0 ? { agent: value } : { agent: value.slice(0, plus), model: value.slice(plus + 1) };
+}
+function modAgents() { return (modState.options && modState.options.agents) || []; }
+function modProviderInfo(name) { return ((modState.options && modState.options.providers) || []).find((provider) => provider.name === name); }
+function modModels() {
+  const seen = new Set();
+  return ((modState.options && modState.options.models) || []).filter((model) => !model.judgeOnly && !seen.has(model.model) && seen.add(model.model));
+}
+
+/** Rebuild a region in place, keeping keyboard focus on the control that had it. */
+function modRedraw(root, nodes) {
+  const active = document.activeElement;
+  const key = active && root.contains(active) ? active.dataset.key : null;
+  root.replaceChildren(...nodes.filter(Boolean));
+  if (key) {
+    const again = root.querySelector(`[data-key="${CSS.escape(key)}"]`);
+    if (again) again.focus();
+  }
+}
+function modSwitch(key, checked, label, onChange) {
+  const input = el("input", { type: "checkbox", role: "switch", "data-key": key, "aria-label": label, checked });
+  input.addEventListener("change", () => onChange(input.checked));
+  return el("span", { class: "switch" }, [input, el("span")]);
+}
+function modSegmented(key, choices, value, label, onPick) {
+  return el("div", { class: "segmented", role: "radiogroup", "aria-label": label }, choices.map((choice) => {
+    const on = String(choice.value) === String(value);
+    const button = el("button", { type: "button", class: on ? "active" : "", role: "radio", "aria-checked": String(on), "data-key": `${key}:${choice.value}`, text: choice.label, ...(choice.disabled ? { disabled: "" } : {}) });
+    button.addEventListener("click", () => { if (!on) onPick(choice.value); });
+    return button;
+  }));
+}
+/** A pop-up menu. Items are `{value, label}` or `{group, items}`; a saved value no longer offered stays visible. */
+function modSelect(key, items, value, label, onChange, cls) {
+  const select = el("select", { "data-key": key, "aria-label": label, class: cls });
+  const known = new Set();
+  const add = (parent, item) => { known.add(String(item.value)); parent.appendChild(el("option", { value: item.value, text: item.label })); };
+  for (const item of items) {
+    if (!item.group) { add(select, item); continue; }
+    if (!item.items.length) continue;
+    const group = el("optgroup", { label: item.group });
+    for (const entry of item.items) add(group, entry);
+    select.appendChild(group);
+  }
+  if (!known.has(String(value))) select.appendChild(el("option", { value, text: `${value}${t("mod.unavailable")}` }));
+  select.value = String(value);
+  select.addEventListener("change", () => onChange(select.value));
+  return select;
+}
+function modSection(title, rows, footers, action) {
+  return el("section", { class: "section" }, [
+    title || action ? el("div", { class: "section-head" }, [title ? el("h3", { class: "section-title", text: title }) : el("span"), action || null]) : null,
+    el("div", { class: "group" }, rows.filter(Boolean)),
+    ...(footers || []).filter(Boolean).map((footer) => typeof footer === "string" ? el("p", { class: "group-footer", text: footer }) : footer),
+  ]);
+}
+function modCard(id, title, blurb, sections) {
+  return el("section", { class: "mod-card", "aria-labelledby": `mod-card-${id}` }, [
+    el("div", { class: "mod-card-head" }, [el("h2", { id: `mod-card-${id}`, text: title }), blurb ? el("p", { class: "hint", text: blurb }) : null]),
+    ...sections.filter(Boolean),
+  ]);
+}
+// ---- Saving
+
+function modStatus(text, isError) {
+  const box = $("#mod-status");
+  box.textContent = text;
+  box.classList.toggle("bad-text", Boolean(isError));
+}
+function modPatch(change) {
+  modState.settings = { ...modState.settings, ...change };
+  modRefresh();
+  clearTimeout(modSaveTimer);
+  modStatus(t("slots.saving"));
+  modSaveTimer = setTimeout(() => { modSaveTimer = null; void saveMod(); }, 450);
+}
+function modSetRule(domain, rule) { modPatch({ rules: { ...modState.settings.rules, [domain]: rule } }); }
+async function saveMod() {
+  if (modSaving) { modSaveAgain = true; return; }
+  modSaving = true;
+  try {
+    const out = await api("/api/mod-settings", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ schemaVersion: 1, settings: modState.settings, revision: modState.revision }) });
+    modState.revision = Number(out.revision) || modState.revision + 1;
+    // The router's copy is the normalized one; take it unless a newer change is already waiting.
+    if (out.settings && !modSaveTimer && !modSaveAgain) { modState.settings = modNormalize(out.settings); modRefresh(); }
+    modStatus(t("mod.saved"));
+  } catch (error) {
+    if (error.status === 409 && error.body && "settings" in error.body) {
+      clearTimeout(modSaveTimer);
+      modSaveTimer = null;
+      modSaveAgain = false;
+      modState.settings = modNormalize(error.body.settings);
+      modState.revision = Number(error.body.revision) || 0;
+      modRefresh();
+      modStatus(t("mod.conflict"), true);
+      toast(t("mod.conflict"), true);
+    } else {
+      modStatus(`${t("common.saveFailed")} ${error.message}`, true);
+    }
+  } finally {
+    modSaving = false;
+    if (modSaveAgain) { modSaveAgain = false; void saveMod(); }
+  }
+}
+async function loadMod() {
+  // A change still on its way would be overwritten by what the router holds now.
+  if (modSaveTimer || modSaving) return;
+  let retired = false;
+  const [settingsResult, optionsResult] = await Promise.allSettled([api("/api/mod-settings"), api("/api/mod-options")]);
+  if (settingsResult.status === "rejected") {
+    if (!modState.settings) {
+      $("#mod-content").replaceChildren(modSection(null, [el("div", { class: "cell-note bad-text", text: `${t("common.loadFailed")} ${settingsResult.reason.message}` })]));
+      return;
+    }
+  } else {
+    modState.settings = modNormalize(settingsResult.value.settings);
+    modState.revision = Number(settingsResult.value.revision) || 0;
+    retired = settingsResult.value.legacy === true;
+  }
+  modState.options = optionsResult.status === "fulfilled" ? optionsResult.value : null;
+  await modLoadResets();
+  if (retired) modState.retiredNote = true;
+  modRefresh();
+  // The settings came back without Auto and the field rules; saving them as they are keeps the note to this once.
+  if (retired) modPatch({});
+}
+function modRefresh() {
+  if (!modState.settings) return;
+  renderModNotice();
+  modRedraw($("#mod-content"), [modEffortCard(), modWorkersCard(), modJudgeCard(), modCacheCard(), modHandoffCard(), modLookCard()]);
+}
+/** Settings for a mod that is switched off do nothing until it is on; the switch lives in Clients. */
+function renderModNotice() {
+  const box = $("#mod-notice");
+  const off = Boolean(status) && !status.statusMod;
+  if (box.dataset.state === String(off)) return;
+  box.dataset.state = String(off);
+  box.hidden = !off;
+  box.replaceChildren(...(off ? [el("div", { class: "group" }, [cell(
+    el("span", { class: "cell-label", text: t("mod.offNotice", { clients: t("nav.clients") }) }),
+    el("button", { class: "btn secondary compact", type: "button", text: t("nav.clients"), onclick: () => showView("clients") }),
+  )])] : []));
+}
+
+// ---- Cards
+
+function modEffortCard() {
+  const s = modState.settings;
+  const efforts = MOD_EFFORTS.map((effort) => ({ value: effort, label: modEffortName(effort) }));
+  const range = el("input", { type: "range", class: "lean-range", min: "-2", max: "2", step: "1", value: String(s.bias), "data-key": "bias", "aria-label": t("mod.lean"), "aria-valuetext": modSigned(s.bias) });
+  range.addEventListener("change", () => modPatch({ bias: Number(range.value) }));
+  const lean = el("div", { class: "lean" }, [
+    el("span", { class: "lean-end", text: t("mod.cheaper") }),
+    el("div", { class: "lean-track" }, [range, el("div", { class: "lean-ticks", "aria-hidden": "true" }, [-2, -1, 0, 1, 2].map(() => el("span")))]),
+    el("span", { class: "lean-end", text: t("mod.smarter") }),
+  ]);
+  const inverted = MOD_EFFORTS.indexOf(s.ceiling) < MOD_EFFORTS.indexOf(s.floor);
+  return modCard("effort", t("mod.effort"), t("mod.effortBlurb"), [modSection(null, [
+    cell(t("mod.auto"), modSwitch("effort-auto", s.effortAuto, t("mod.auto"), (on) => modPatch({ effortAuto: on })), modCap(t("mod.autoHint"))),
+    cell(t("mod.lean"), lean, modCap(t("mod.leanHint")), "wide"),
+    cell(t("mod.floor"), modSelect("floor", efforts, s.floor, t("mod.floor"), (floor) => modPatch({ floor }), "narrow")),
+    cell(t("mod.ceiling"), modSelect("ceiling", efforts, s.ceiling, t("mod.ceiling"), (ceiling) => modPatch({ ceiling }), "narrow"), inverted ? el("span", { class: "cell-sub warn-text", text: modCap(t("mod.floorWins")) }) : null),
+  ])]);
+}
+
+// ---- The four workers (docs/specs/2026-10-12-worker-tiers.md)
+
+/**
+ * Everything a worker can run: the router's workers (each with its model's effort ladder and how it
+ * is paid for), Claude Code's own agent on each Claude model, and the session's own model.
+ */
+function modChoices() {
+  const options = modState.options || {};
+  const claudeEfforts = Array.isArray(options.claudeEfforts) && options.claudeEfforts.length ? options.claudeEfforts : ["low", "medium", "high", "max"];
+  const workers = modAgents().map((agent) => {
+    const info = modProviderInfo(agent.provider);
+    return {
+      value: agent.name, label: agent.model, model: agent.model, provider: agent.provider,
+      billing: /(?::|-)free$/i.test(agent.model) ? "free" : agent.billing || (info && info.billing) || null,
+      usable: !info || info.usable !== false,
+      efforts: Array.isArray(agent.efforts) ? agent.efforts : effortLevelsFor(agent.provider, agent.model),
+    };
+  });
+  const claude = MOD_CLAUDE_MODELS.map((alias) => ({
+    value: `general-purpose+${alias}`, label: `Claude ${modCap(alias)}`, model: MOD_CLAUDE_IDS[alias], provider: "anthropic",
+    billing: "subscription", usable: true, efforts: claudeEfforts, claude: true,
+  }));
+  const session = { value: "general-purpose", label: t("mod.sessionModel"), model: null, provider: null, billing: null, usable: true, efforts: claudeEfforts, claude: true };
+  return [...workers, ...claude, session];
+}
+function modChoiceOf(target) { const value = modTargetValue(target); return modChoices().find((choice) => choice.value === value); }
+/** The efforts a model takes, in the mod's terms; an unknown ladder offers them all. */
+function modLadderOf(choice) {
+  const levels = choice && Array.isArray(choice.efforts) ? choice.efforts.filter((effort) => MOD_EFFORTS.includes(effort)) : [];
+  return levels.length ? levels : [...MOD_EFFORTS];
+}
+/** The nearest effort a model takes, ties going up: how the router clamps one (compat.ts). */
+function modNearest(effort, ladder) {
+  if (ladder.includes(effort)) return effort;
+  const at = MOD_EFFORTS.indexOf(effort);
+  return ladder.reduce((best, next) => {
+    const d = Math.abs(MOD_EFFORTS.indexOf(next) - at);
+    const bd = Math.abs(MOD_EFFORTS.indexOf(best) - at);
+    return d < bd || (d === bd && MOD_EFFORTS.indexOf(next) > MOD_EFFORTS.indexOf(best)) ? next : best;
+  });
+}
+/** The group a model sits in: its provider, Claude's own together. */
+function modGroupName(choice) { return choice.claude ? "Claude" : choice.provider; }
+/** Choices in provider groups, each group tagged free / pay-per-token / subscription. */
+function modGroups(choices) {
+  const groups = [];
+  for (const choice of choices) {
+    const name = modGroupName(choice);
+    let group = groups.find((entry) => entry.name === name);
+    if (!group) { group = { name, billing: choice.billing, items: [] }; groups.push(group); }
+    group.items.push(choice);
+  }
+  return groups;
+}
+function modGroupLabel(group) { return group.billing ? `${group.name} · ${t(`mod.billing.${group.billing}`)}` : group.name; }
+
+// ---- The models to use: what the four workers are filled from and may run on
+
+/** An allow-list key: a worker's agent name, or `general-purpose:<model>` for Claude's own. */
+function modTickKey(choice) { return choice.claude ? choice.value.replace("+", ":") : choice.value; }
+/** The models that can be ticked: every worker and Claude's own; the session's model is always there. */
+function modTickable() { return modChoices().filter((choice) => choice.value !== "general-purpose"); }
+/** Whether a model is ticked: an empty list means every model, and an old provider name ticks that provider's. */
+function modTicked(choice) {
+  const allow = modState.settings.allow || [];
+  return !allow.length || allow.includes(modTickKey(choice)) || allow.includes(choice.provider);
+}
+/** Ticks one model; every model on again is stored as [], and the last one on cannot go off. */
+function modTick(choice, on) {
+  const all = modTickable();
+  const kept = new Set(all.filter(modTicked).map(modTickKey));
+  if (on) kept.add(modTickKey(choice)); else kept.delete(modTickKey(choice));
+  modPatch({ allow: kept.size === all.length ? [] : all.map(modTickKey).filter((key) => kept.has(key)) });
+}
+function modTickRows() {
+  const choices = modTickable();
+  if (!choices.length) return [el("div", { class: "cell-note", text: t("mod.noModels") })];
+  const onCount = choices.filter(modTicked).length;
+  return modGroups(choices).map((group) => {
+    const boxes = group.items.map((choice) => {
+      const on = modTicked(choice);
+      const input = el("input", { type: "checkbox", "data-key": `tick:${modTickKey(choice)}`, "aria-label": `${choice.label} · ${group.name}`, checked: on });
+      if (on && onCount === 1) input.disabled = true;
+      input.addEventListener("change", () => modTick(choice, input.checked));
+      // A model paid differently from its group (a :free model on a paid provider) says so beside its name.
+      const other = choice.billing && choice.billing !== group.billing ? el("span", { class: "model-effort-tag", text: t(`mod.billing.${choice.billing}`) }) : null;
+      const off = choice.usable ? null : el("span", { class: "model-effort-tag warn-text", text: t("mod.notUsable") });
+      return el("label", { class: "model-check", title: choice.model || choice.label }, [input, el("span", { text: choice.label }), other, off]);
+    });
+    return el("div", { class: "tick-group" }, [el("div", { class: "tick-head", text: modGroupLabel(group) }), el("div", { class: "model-checklist" }, boxes)]);
+  });
+}
+
+// ---- The four workers: a meaning, the pick, and one menu to change it
+
+/** The general ladder's rungs; the router fills any that are empty, so a missing one is only a failed load. */
+function modRungs() {
+  const general = modState.settings.rules.general;
+  return general && general.mode === "ladder" && general.rungs ? general.rungs : {};
+}
+/** One menu of `model · effort` for the ticked models, effort limited to what each model takes; the session's model too. */
+function modPickSelect(key, step, shown, label, onPick) {
+  const choices = modChoices().filter((choice) => choice.value === "general-purpose" || modTicked(choice));
+  const groups = modGroups(choices).map((group) => ({
+    group: modGroupLabel(group),
+    items: group.items.flatMap((choice) => modLadderOf(choice).map((effort) => ({ value: `${choice.value}|${effort}`, label: `${choice.label} · ${modEffortName(effort)}${choice.usable ? "" : t("mod.unavailableNow")}` }))),
+  }));
+  const current = step ? `${modTargetValue(step.target)}|${shown}` : "";
+  const items = [...(step ? [] : [{ value: "", label: "—" }]), ...groups];
+  // A pick that is not on offer now (its model unticked, or gone) keeps showing rather than a wrong neighbour.
+  if (step && !groups.some((group) => group.items.some((item) => item.value === current))) {
+    const choice = modChoiceOf(step.target);
+    items.unshift({ value: current, label: `${choice ? choice.label : modTargetValue(step.target)} · ${modEffortName(shown)}${t("mod.unavailable")}` });
+  }
+  return modSelect(key, items, current, label, (value) => {
+    if (!value) return;
+    const bar = value.lastIndexOf("|");
+    onPick(modTargetOf(value.slice(0, bar)), value.slice(bar + 1));
+  }, "rung-model");
+}
+function modRungRows(mode) {
+  const rungs = mode ? mode.rungs : modRungs();
+  return MOD_RUNGS.map((rung) => {
+    const steps = rungs[rung] || [];
+    const name = t(`mod.rung.${rung}`);
+    const save = (next) => {
+      const updated = { ...rungs, [rung]: next };
+      if (mode) modUpdateMode(mode.id, { rungs: updated });
+      else modSetRule("general", { mode: "ladder", rungs: updated });
+    };
+    const rows = steps.map((step, index) => {
+      const choice = modChoiceOf(step.target);
+      const shown = modNearest(step.effort, modLadderOf(choice));
+      const key = `worker:${mode ? mode.id : "base"}:${rung}:${index}`;
+      const select = modPickSelect(key, step, shown, `${name} ${index + 1}`, (target, effort) => save(steps.map((item, at) => at === index ? { target, effort } : item)));
+      const move = (delta) => { const next = [...steps]; [next[index], next[index + delta]] = [next[index + delta], next[index]]; save(next); };
+      const button = (suffix, text, label, disabled, onclick) => el("button", { type: "button", class: "btn secondary compact", "data-key": `${key}:${suffix}`, text, "aria-label": label, ...(disabled ? { disabled: "" } : {}), onclick });
+      return el("li", { class: "rung-item" }, [
+        select,
+        el("div", { class: "rung-actions" }, [
+          button("up", "↑", t("mod.modeMoveUp"), index === 0, () => move(-1)),
+          button("down", "↓", t("mod.modeMoveDown"), index === steps.length - 1, () => move(1)),
+          button("remove", "✕", t("common.remove"), steps.length <= 1, () => save(steps.filter((_, at) => at !== index))),
+        ]),
+        choice && !choice.usable ? el("small", { class: "warn-text", text: t("mod.rungUnusable") }) : null,
+      ]);
+    });
+    const add = el("button", { type: "button", class: "btn secondary compact", "data-key": `worker-add:${mode ? mode.id : "base"}:${rung}`, text: t("mod.modeAddModel"), onclick: () => {
+      const choice = modChoices().find((item) => item.value !== "general-purpose" && modTicked(item)) || modChoices().at(-1);
+      save([...steps, { target: modTargetOf(choice.value), effort: modNearest("medium", modLadderOf(choice)) }]);
+    } });
+    return cell(el("span", { class: "cell-label strong", text: name }), el("div", { class: "rung-list" }, [el("ol", {}, rows), add]), modCap(t(`mod.rungHint.${rung}`)), "wide rung-row");
+  });
+}
+/** Said once after settings that still held Auto or field rules are read: they became the four workers. */
+function modRetiredNote() {
+  const close = el("button", { class: "btn secondary compact", type: "button", "data-key": "retired-ok", text: t("common.close"), onclick: () => { modState.retiredNote = false; modRefresh(); } });
+  return modSection(null, [cell(el("span", { class: "cell-label", text: t("mod.retired") }), close, null, "offer-row")]);
+}
+// ---- Operating modes (docs/specs/2026-10-12-worker-tiers.md "Operating modes")
+//
+// A tab edits a saved worker set; activation is always an explicit, separate action.
+let modModeTab = "";
+/** Providers a mode can end at the reset of, known now: ChatGPT ones, then Claude ('anthropic'). */
+let modResetProviders = [];
+
+/** Only actual future reset timestamps enable the option, never a provider type alone. */
+function modQuotaKnown(accounts, binding = false) {
+  return (accounts || []).some((account) => {
+    if (account.state === "paused" || account.state === "needs-login") return false;
+    const quota = account.quota || {};
+    const windows = Object.values(quota.rate_limits || {}).filter(Boolean);
+    const selected = binding ? windows.sort((a, b) => (b.used_percent || 0) - (a.used_percent || 0)).slice(0, 1) : windows;
+    return selected.some((window) => {
+      if (!window) return false;
+      const at = typeof window.reset_at === "number" ? window.reset_at * (window.reset_at > 1e12 ? 1 : 1000)
+        : typeof window.reset_after_seconds === "number" && typeof quota.at === "number" ? quota.at + window.reset_after_seconds * 1000 : NaN;
+      return Number.isFinite(at) && at > Date.now();
+    });
+  });
+}
+async function modLoadResets() {
+  const providers = (modState.options && modState.options.providers) || [];
+  const chatgpt = await Promise.all(providers.filter((provider) => provider.type === "chatgpt").map(async (provider) => {
+    try {
+      const body = await api(`/api/chatgpt-accounts?provider=${encodeURIComponent(provider.name)}`);
+      return body.provider === provider.name && modQuotaKnown(body.accounts) ? [provider.name] : [];
+    } catch (error) { console.warn("Mode quota unavailable", provider.name, error.message); return []; }
+  }));
+  // The mod reads Claude's reset from the band's binding limit, under the name 'anthropic'.
+  const claude = providers.some((provider) => provider.type === "anthropic") && modQuotaKnown(status && status.claude && status.claude.accounts, true);
+  modResetProviders = [...chatgpt.flat(), ...(claude ? ["anthropic"] : [])];
+}
+/** The name a reset provider goes by: Claude, ChatGPT, or another ChatGPT provider's own name. */
+function modResetLabel(provider) {
+  return provider === "anthropic" ? "Claude" : provider === "chatgpt" ? "ChatGPT" : provider;
+}
+/** Choosing reset starts on a known provider the mode's workers use, else the first known one. */
+function modResetDefault(rungs) {
+  const used = new Set(Object.values(rungs).flatMap((steps) => steps.map((step) => { const choice = modChoiceOf(step.target); return choice && choice.provider; })));
+  return modResetProviders.find((provider) => used.has(provider)) || modResetProviders[0];
+}
+function modUpdateMode(id, change) {
+  modPatch({ modes: modState.settings.modes.map((mode) => mode.id === id ? { ...mode, ...change } : mode) });
+}
+function modSetActive(id) {
+  // The start time is when a mode that runs until the quota resets counts its reset from.
+  modPatch(id ? { activeMode: id, activeSince: Date.now() } : { activeMode: undefined, activeSince: undefined });
+}
+function modRemoveMode(mode) {
+  if (!confirm(t("mod.modeRemoveConfirm", { name: mode.name }))) return;
+  const s = modState.settings;
+  modPatch({ modes: s.modes.filter((entry) => entry.id !== mode.id), ...(s.activeMode === mode.id ? { activeMode: undefined, activeSince: undefined } : {}) });
+}
+function modModeTabs() {
+  const s = modState.settings;
+  const tabs = [{ id: "", name: t("mod.modeNone") }, ...s.modes];
+  if (!tabs.some((tab) => tab.id === modModeTab) && modModeTab !== "+") modModeTab = "";
+  const buttons = tabs.map((tab) => {
+    const on = (s.activeMode || "") === tab.id;
+    return el("button", { type: "button", role: "tab", class: modModeTab === tab.id ? "active" : "", "aria-selected": String(modModeTab === tab.id), "aria-controls": "worker-tab-panel", "data-key": `mode-tab:${tab.id || "base"}`, onclick: () => { modModeTab = tab.id; modRefresh(); } }, [
+      el("span", { text: tab.name }), on ? el("span", { class: "mode-on", text: t("mod.modeOn") }) : null,
+    ]);
+  });
+  buttons.push(el("button", { type: "button", role: "tab", "aria-selected": String(modModeTab === "+"), "data-key": "mode-add", text: t("mod.modeAdd"), ...(s.modes.length >= 20 ? { disabled: "" } : {}), onclick: () => { modModeTab = "+"; modRefresh(); } }));
+  return el("div", { class: "mode-tabs", role: "tablist", "aria-label": t("mod.modes") }, buttons);
+}
+function modNewMode() {
+  const input = el("input", { type: "text", class: "text-field", maxlength: "40", "data-key": "mode-new-name", "aria-label": t("mod.modeName"), placeholder: t("mod.modeName") });
+  const add = () => {
+    const name = input.value.trim();
+    if (!name) { toast(t("mod.modeNameRequired"), true); input.focus(); return; }
+    const mode = { id: `mode-${crypto.randomUUID()}`, name, rungs: clone(modRungs()), delegation: "normal", until: "none" };
+    modModeTab = mode.id;
+    modPatch({ modes: [...modState.settings.modes, mode] });
+  };
+  input.addEventListener("keydown", (event) => { if (event.key === "Enter") add(); });
+  return modSection(t("mod.modeAddTitle"), [cell(t("mod.modeName"), [input, el("button", { type: "button", class: "btn compact", text: t("common.save"), "data-key": "mode-create", onclick: add })], t("mod.modeNameHelp"), "wide")]);
+}
+/** A datetime-local value for an epoch-ms time, in this browser's zone. */
+function modLocalTime(ms) {
+  const at = new Date(ms);
+  const two = (n) => String(n).padStart(2, "0");
+  return `${at.getFullYear()}-${two(at.getMonth() + 1)}-${two(at.getDate())}T${two(at.getHours())}:${two(at.getMinutes())}`;
+}
+function modModeSection(mode) {
+  const on = modState.settings.activeMode === mode.id;
+  const name = el("input", { type: "text", class: "text-field", value: mode.name, maxlength: "40", "data-key": `mode-name:${mode.id}`, "aria-label": t("mod.modeName") });
+  name.addEventListener("change", () => {
+    if (!name.value.trim()) { name.value = mode.name; toast(t("mod.modeNameRequired"), true); return; }
+    modUpdateMode(mode.id, { name: name.value.trim() });
+  });
+  const known = modResetProviders.length > 0;
+  const kind = typeof mode.until === "number" ? "time" : mode.until && typeof mode.until === "object" ? "reset" : "none";
+  const untilOf = (value) => value === "time" ? Date.now() + 3 * 3_600_000 : value === "reset" ? { reset: modResetDefault(mode.rungs) } : value;
+  const until = modSegmented("mode-until", [
+    { value: "none", label: t("mod.modeUntilNone") }, { value: "time", label: t("mod.modeUntilTime") },
+    { value: "reset", label: t("mod.modeUntilResetChoice"), disabled: !known },
+  ], kind, t("mod.modeUntil"), (value) => modUpdateMode(mode.id, { until: untilOf(value) }));
+  const reset = until.querySelector('[data-key="mode-until:reset"]');
+  if (!known) {
+    reset.setAttribute("aria-describedby", "mode-reset-reason");
+    until.appendChild(el("span", { id: "mode-reset-reason", class: "mode-reset-reason", text: t("mod.modeResetUnknown") }));
+  }
+  const endControls = [until];
+  if (kind === "time") {
+    const at = el("input", { type: "datetime-local", class: "text-field", "data-key": "mode-until-time", value: modLocalTime(mode.until), "aria-label": t("mod.modeUntilTime") });
+    at.addEventListener("change", () => {
+      const ms = new Date(at.value).getTime();
+      if (!Number.isFinite(ms) || ms <= Date.now()) { at.value = modLocalTime(mode.until); toast(t("mod.modeTimePast"), true); return; }
+      modUpdateMode(mode.id, { until: ms });
+    });
+    endControls.push(at);
+  }
+  if (kind === "reset") {
+    // Only providers whose reset is known now; a saved one that is not stays shown as unavailable.
+    const label = (provider) => t("mod.modeUntilResetOf", { provider: modResetLabel(provider) });
+    const items = modResetProviders.map((provider) => ({ value: provider, label: label(provider) }));
+    if (!modResetProviders.includes(mode.until.reset)) items.unshift({ value: mode.until.reset, label: `${label(mode.until.reset)}${t("mod.unavailable")}` });
+    endControls.push(modSelect("mode-until-reset", items, mode.until.reset, t("mod.modeResetProvider"), (reset) => modUpdateMode(mode.id, { until: { reset } })));
+  }
+  const endHelp = kind === "reset" ? t("mod.modeResetHelp", { provider: modResetLabel(mode.until.reset) }) : null;
+  return modSection(null, [
+    cell(t("mod.modeName"), name),
+    ...modRungRows(mode),
+    cell(t("mod.modeDelegation"), modSegmented("mode-delegation", [{ value: "normal", label: t("mod.modeNormal") }, { value: "eager", label: t("mod.modeEager") }], mode.delegation, t("mod.modeDelegation"), (delegation) => modUpdateMode(mode.id, { delegation })), null, "wide"),
+    cell(t("mod.modeUntil"), el("div", { class: "mode-until" }, endControls), endHelp, "wide"),
+    cell(t("mod.modeActive"), [
+      el("button", { type: "button", class: "btn compact", "data-key": "mode-toggle", text: t(on ? "mod.modeTurnOff" : "mod.modeTurnOn"), onclick: () => modSetActive(on ? "" : mode.id) }),
+      el("button", { type: "button", class: "btn secondary compact", "data-key": `mode-remove:${mode.id}`, text: t("common.remove"), onclick: () => modRemoveMode(mode) }),
+    ], on ? t("mod.modeOn") : null, "wide"),
+  ]);
+}
+
+function modWorkersCard() {
+  const s = modState.settings;
+  return modCard("workers", t("mod.workers"), t("mod.workersBlurb"), [
+    modState.options ? null : modSection(null, [el("div", { class: "cell-note warn-text", text: t("mod.optionsFailed") })]),
+    modState.retiredNote ? modRetiredNote() : null,
+    modSection(null, [
+      cell(t("mod.takesOver"), modSegmented("agent-auto", [{ value: "off", label: t("mod.off") }, { value: "auto", label: "ripple:auto" }, { value: "all", label: t("mod.allSpawns") }], s.agentAuto, t("mod.takesOver"), (agentAuto) => modPatch({ agentAuto })), null, "wide"),
+    ], [t("mod.takesOverHelp"), t("mod.takesOverHelp2")]),
+    modModeTabs(),
+    el("div", { id: "worker-tab-panel", role: "tabpanel" }, modModeTab === "+" ? [modNewMode()] : modModeTab ? [modModeSection(s.modes.find((mode) => mode.id === modModeTab))] : [
+      modSection(t("mod.models"), modTickRows(), [t("mod.modelsHelp")]),
+      modSection(t("mod.fourWorkers"), modRungRows(), [t("mod.modeOrderHelp")]),
+      s.activeMode ? modSection(null, [cell(t("mod.modeActive"), el("button", { type: "button", class: "btn secondary compact", "data-key": "mode-base-on", text: t("mod.modeUseBase"), onclick: () => modSetActive("") }))]) : null,
+    ].filter(Boolean)),
+  ]);
+}
+
+function modJudgeCard() {
+  const s = modState.settings;
+  const zen = modState.options && modState.options.zen;
+  const rows = [cell(t("mod.judge"), modSegmented("judge", [{ value: "haiku", label: t("mod.haiku") }, { value: "jev", label: t("mod.jev") }, { value: "model", label: t("mod.routerModel") }], s.judge, t("mod.judge"), (judge) => modPatch({ judge })), null, "wide")];
+  const footers = [];
+  if (s.judge === "haiku") rows.push(el("div", { class: "cell-note", text: t("mod.haikuHint") }));
+  if (s.judge === "jev") {
+    rows.push(cell(t("mod.jevSource"), modSegmented("jev-source", [{ value: "typesafe", label: t("mod.typesafe") }, { value: "zen", label: t("mod.zen") }], s.jevSource, t("mod.jevSource"), (jevSource) => modPatch({ jevSource })), null, "wide"));
+    if (s.jevSource === "zen") {
+      rows.push(zen && zen.configured
+        ? cell(t("mod.model"), el("span", { class: "mono", text: zen.model }), modCap(t("mod.zenKey")))
+        : cell(el("span", { class: "cell-label", text: modCap(t("mod.zenMissing")) }), el("button", { class: "btn secondary compact", type: "button", text: t("nav.providers"), onclick: () => showView("providers") }), t("mod.zenAdd")));
+    } else {
+      rows.push(el("div", { class: "cell-note", text: t("mod.jevKeyNote") }));
+    }
+  }
+  if (s.judge === "model") {
+    const models = modModels().map((model) => ({ value: model.model, label: `${model.name || model.model} · ${model.provider}` }));
+    rows.push(cell(t("mod.model"), models.length || s.judgeModel
+      ? modSelect("judge-model", models, s.judgeModel, t("mod.model"), (judgeModel) => modPatch({ judgeModel }))
+      : el("span", { text: modCap(t("mod.noModels")) }), modCap(t("mod.haikuFallback"))));
+  }
+  return modCard("judge", t("mod.judge"), t("mod.judgeBlurb"), [modSection(null, rows, footers)]);
+}
+
+function modCacheCard() {
+  const s = modState.settings;
+  return modCard("cache", t("mod.cache"), t("mod.cacheBlurb"), [modSection(null, [
+    cell(t("mod.keepWarm"), modSwitch("keep-warm", s.keepWarm, t("mod.keepWarm"), (keepWarm) => modPatch({ keepWarm })), modCap(t("mod.keepWarmHint"))),
+    cell(t("mod.for"), modSegmented("warm-hours", [1, 2, 4, 8].map((n) => ({ value: n, label: t("mod.hours", { n }) })), s.keepWarmHours, t("mod.for"), (n) => modPatch({ keepWarmHours: Number(n) })), modCap(t("mod.afterReply")), "wide"),
+    cell(t("mod.chatsFrom"), modSegmented("warm-min", [10000, 30000, 60000, 100000].map((n) => ({ value: n, label: `${n / 1000}k` })), s.keepWarmMinTokens, t("mod.chatsFrom"), (n) => modPatch({ keepWarmMinTokens: Number(n) })), modCap(t("mod.tokens")), "wide"),
+  ], [t("mod.warmCost")])]);
+}
+
+function modHandoffCard() {
+  const s = modState.settings;
+  const skill = el("input", { type: "text", class: "text-field", value: s.handoffSkill, placeholder: t("mod.noSkill"), spellcheck: "false", autocomplete: "off", "data-key": "handoff-skill", "aria-label": t("mod.fullHandoff") });
+  skill.addEventListener("change", () => modPatch({ handoffSkill: skill.value.trim() }));
+  return modCard("handoff", t("mod.handoff"), t("mod.handoffBlurb"), [modSection(null, [
+    cell(t("mod.compactWith"), modSegmented("compact-with", [{ value: "haiku", label: t("mod.haiku") }, { value: "session", label: t("mod.sessionCompactor") }], s.compactWith, t("mod.compactWith"), (compactWith) => modPatch({ compactWith })), null, "wide"),
+    cell(t("mod.afterHandoff"), modSegmented("handoff-after", [{ value: "continue", label: t("mod.continue") }, { value: "confirm", label: t("mod.confirm") }, { value: "copy", label: t("mod.copy") }], s.handoffAfter, t("mod.afterHandoff"), (handoffAfter) => modPatch({ handoffAfter })), null, "wide"),
+    cell(t("mod.handoffButton"), modSegmented("handoff-button", [{ value: "advised", label: t("mod.whenAdvised") }, { value: "always", label: t("mod.always") }], s.handoffButton, t("mod.handoffButton"), (handoffButton) => modPatch({ handoffButton })), null, "wide"),
+    cell(t("mod.fullHandoff"), skill, null, "wide"),
+    cell(t("mod.heavyAt"), modSegmented("swamp-at", [40, 50, 60, 70].map((n) => ({ value: n, label: `${n}%` })), s.swampAt, t("mod.heavyAt"), (n) => modPatch({ swampAt: Number(n) })), modCap(t("mod.context")), "wide"),
+  ])]);
+}
+
+function modLookCard() {
+  const s = modState.settings;
+  const languages = [{ value: "auto", label: t("mod.auto") }, ...MOD_LANGUAGES.map(([value, label]) => ({ value, label }))];
+  return modCard("look", t("mod.look"), t("mod.lookBlurb"), [
+    modSection(null, [
+      cell(t("mod.layout"), modSegmented("layout", [{ value: "dashboard", label: t("mod.dashboard") }, { value: "minimal", label: t("mod.minimal") }], s.layout, t("mod.layout"), (layout) => modPatch({ layout })), s.layout === "minimal" ? modCap(t("mod.footerHint")) : null, "wide"),
+      cell(t("mod.appearance"), modSegmented("appearance", [{ value: "auto", label: t("mod.auto") }, { value: "dark", label: t("mod.dark") }, { value: "light", label: t("mod.lightAppearance") }], s.appearance, t("mod.appearance"), (appearance) => modPatch({ appearance })), null, "wide"),
+      cell(t("mod.language"), modSelect("language", languages, s.language, t("mod.language"), (language) => modPatch({ language }), "narrow")),
+    ]),
+    modSection(t("mod.show"), [
+      ...MOD_PARTS.map((part) => {
+        const shown = !s.hide.includes(part);
+        return cell(t(`mod.part.${part}`), modSwitch(`part:${part}`, shown, t(`mod.part.${part}`), (on) => modPatch({ hide: on ? s.hide.filter((entry) => entry !== part) : [...s.hide, part] })));
+      }),
+      ...MOD_EXTRAS.map((part) => {
+        const extras = s.extras || [];
+        const shown = extras.includes(part);
+        return cell(t(`mod.part.${part}`), modSwitch(`part:${part}`, shown, t(`mod.part.${part}`), (on) => modPatch({ extras: on ? [...extras, part] : extras.filter((entry) => entry !== part) })));
+      }),
+    ]),
+  ]);
+}
+
 // ---- Logs ---------------------------------------------------------------------------
 
 let logsPanel = "requests";
@@ -2340,14 +3062,15 @@ function requestRow(record) {
   const status = record.resent
     ? el("span", { class: "status-text resent", text: `${t("logs.status.resent")} ${record.status}`, title: t("logs.status.resentHelp") })
     : el("span", { class: `status-text ${record.ok ? "ok" : "bad"}`, text: `${record.ok ? t("logs.status.ok") : t("logs.status.error")} ${record.status}` });
+  // Column classes let a narrow window lay the same row out as a two-line list item.
   row.append(
-    el("td", { text: timeOf(record.at) }),
-    el("td", {}, [model]),
-    el("td", { text: record.effort || t("common.notAvailable") }),
-    el("td", {}, [input]),
-    el("td", { class: record.usage ? "" : "no-usage", text: record.usage ? formatNumber(record.usage.output) : t("common.notAvailable") }),
-    el("td", { text: formatSeconds(record.ms) }),
-    el("td", {}, [status]),
+    el("td", { class: "c-time", text: timeOf(record.at) }),
+    el("td", { class: "c-model" }, [model]),
+    el("td", { class: "c-effort", text: record.effort || t("common.notAvailable") }),
+    el("td", { class: "c-in" }, [input]),
+    el("td", { class: record.usage ? "c-out" : "c-out no-usage", text: record.usage ? formatNumber(record.usage.output) : t("common.notAvailable") }),
+    el("td", { class: "c-dur", text: formatSeconds(record.ms) }),
+    el("td", { class: "c-status" }, [status]),
   );
   return row;
 }