clauderipple 0.9.5 → 0.11.0

package/dist/ui/app.js

@@ -21,6 +21,20 @@ function el(tag, attrs, children) {
   return node;
 }
 
+// Inside the ClaudeRipple app the page is the app's own copy, so it is here even with the router
+// down; window.rippleApp is how it asks the app for what only the app can do (repair, the direct
+// switch). In a browser the object is absent and none of the app-only parts are drawn.
+const APP = window.rippleApp || null;
+if (APP) {
+  document.documentElement.classList.add("in-app", `platform-${APP.platform}`);
+  // Korean wraps between words in the app's own sentences (style.css :lang(ko)).
+  document.documentElement.lang = CURRENT_LANG;
+}
+/** The router's admin API answered 503 "routerDown" (the app's way of saying it is not running). */
+let routerDown = false;
+/** What the app last said about the connection (doctor, a running repair, …); see renderConnection. */
+let shellState = null;
+
 let toastTimer = null;
 function toast(message, isError, raw) {
   const box = $("#toast");
@@ -71,9 +85,13 @@ function modelsOf(provider) {
 }
 function labelOf(model) { return model.name || model.id; }
 function clone(value) { return JSON.parse(JSON.stringify(value)); }
-function safeName(value) { return value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "provider"; }
-function uniqueName(name, providers) {
-  const base = safeName(name);
+function safeName(value) { return value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, ""); }
+// A name with no Latin letters ("하이브") slugs to nothing: fall back to the URL's domain ("thehive").
+function domainWord(url) {
+  try { const parts = new URL(url).hostname.split("."); return safeName(parts.length > 1 ? parts[parts.length - 2] : parts[0]); } catch { return ""; }
+}
+function uniqueName(name, providers, url) {
+  const base = safeName(name) || (url ? domainWord(url) : "") || "provider";
   let value = base;
   let number = 2;
   while (providers[value]) value = `${base}-${number++}`;
@@ -153,6 +171,10 @@ let pickerBusy = false;
 let probeStates = new Map();
 let chatgptLoginBusy = false;
 let chatgptLoginMessage = "";
+let phoneGeneration = 0;
+let phoneSnapshot = null;
+let phoneQrGeneration = 0;
+let phoneBusy = false;
 
 function selectOption(value, text) { return el("option", { value }, [text]); }
 function badge(kind, text) { return el("span", { class: `badge ${kind} dot`, text }, []); }
@@ -195,9 +217,16 @@ function svgIcon(viewBox, paths, cls) {
 function chevronIcon() { return svgIcon("0 0 8 13", ["M1.5 1.5l5 5-5 5"], "chevron"); }
 
 function showView(name) {
+  if (name !== "phone") { phoneGeneration++; hidePhoneQr(); }
   for (const button of $all(".nav-btn")) button.classList.toggle("active", button.dataset.view === name);
   for (const view of $all(".view")) view.classList.toggle("active", view.id === `view-${name}`);
   if (location.hash !== `#${name}`) history.replaceState(null, "", `#${name}`);
+  applyOffline();
+  // With the router down (inside the app) a page has nothing to load; it says so instead of
+  // failing, and loads when the router is back (setRouterDown).
+  if (offline()) return;
+  if (name === "phone") queueMicrotask(() => void loadPhone());
+  if (name === "mac") queueMicrotask(() => void loadMac());
   if (name === "slots" && !slotsLoaded) void loadSlots();
   if (name === "providers" && !providersLoaded) void loadProviders();
   if (name === "clients" && !clientsLoaded) void loadClients();
@@ -241,8 +270,11 @@ async function refreshHealth() {
     status = await api("/api/status");
   } catch (error) {
     $("#health-desktop").replaceChildren(cell(t("health.connection"), badge("bad", t("health.disconnected"))));
+    // Inside the app a router that does not answer is a state with a way out, not an error.
+    if (APP && error.body && error.body.routerDown) setRouterDown(true);
     return;
   }
+  if (APP) setRouterDown(false);
   // Served files changed underneath an open window (e.g. after an update): reload, unless a form is open.
   if (status.uiRevision) {
     if (loadedUiRevision === null) loadedUiRevision = status.uiRevision;
@@ -322,6 +354,257 @@ async function startUpdate() {
   renderVersionRow();
 }
 
+// ---- Inside the app: the connection card, and pages while the router is down -------------
+// The app can do what this page cannot once the router is down: ask the CLI what is wrong
+// (doctor), repair it, switch Claude to its default connection and back, reopen Claude. The card at
+// the top of Status draws that, calm while all is well and plain about what to press when not. The
+// other pages say where to go instead of failing. None of it exists in a browser.
+
+function offline() { return Boolean(APP) && routerDown; }
+function inDirectMode() { return Boolean(shellState && shellState.doctor && shellState.doctor.mode === "direct"); }
+
+function setRouterDown(down) {
+  if (routerDown === down) return;
+  routerDown = down;
+  if (!down) {
+    // Back: what failed or was skipped while it was down loads now.
+    slotsLoaded = false;
+    providersLoaded = false;
+    clientsLoaded = false;
+    showView((location.hash || "#health").slice(1) || "health");
+  } else applyOffline();
+  renderConnection();
+}
+
+/** Every page but Status shows a short note (and the way to Status) instead of its contents. */
+function applyOffline() {
+  const off = offline();
+  const direct = inDirectMode();
+  for (const view of $all(".view")) {
+    if (view.id === "view-health") {
+      view.classList.toggle("router-off", off);
+      continue;
+    }
+    view.classList.toggle("offline", off);
+    let box = $(".offline-state", view);
+    if (!off) {
+      if (box) box.remove();
+      continue;
+    }
+    if (!box) {
+      box = el("div", { class: "offline-state", role: "status" });
+      const header = $(".page-header", view);
+      view.insertBefore(box, header ? header.nextSibling : view.firstChild);
+    }
+    box.replaceChildren(
+      el("div", { class: `offline-icon${direct ? " direct" : ""}` }, [svgIcon("0 0 20 20", direct ? CONN_ICONS.direct : ["M3 3l14 14", "M6.2 15.5h8.1c.4 0 .8-.1 1.2-.2", "M17.4 12.6a3.3 3.3 0 0 0-2.7-3.7 4.8 4.8 0 0 0-6.8-3.5", "M5.6 8.3a3.7 3.7 0 0 0 .6 7.2"])]),
+      el("h2", { text: t(direct ? "conn.offlineDirectTitle" : "conn.offlineTitle") }),
+      el("p", { text: t(direct ? "conn.offlineDirectBody" : "conn.offlineBody") }),
+      el("button", { class: "btn", type: "button", text: t("conn.goStatus"), onclick: () => showView("health") }),
+    );
+  }
+}
+
+const CONN_ICONS = {
+  ok: ["M5.5 10.4l3 3 6-6.6"],
+  bad: ["M10 5.6v5.2", "M10 14.3v.1"],
+  warn: ["M10 5.6v5.2", "M10 14.3v.1"],
+  direct: ["M3.8 10h12", "M12.2 6.2L16 10l-3.8 3.8"],
+  checking: ["M10 3.8a6.2 6.2 0 1 1-6.2 6.2"],
+};
+// What doctor's codes mean to someone who only wants Claude to answer. The cause comes before the
+// symptom: a startup entry gone missing is why the router is down.
+const CONN_REASONS = [
+  ["not-installed", "conn.why.notInstalled"],
+  ["supervisor-missing", "conn.why.supervisorMissing"],
+  ["supervisor-program-missing", "conn.why.programMissing"],
+  ["supervisor-other-install", "conn.why.otherInstall"],
+  ["supervisor-not-running", "conn.why.stopped"],
+  ["router-down", "conn.why.stopped"],
+  ["router-version-mismatch", "conn.why.version"],
+  ["cli-port-mismatch", "conn.why.oldSetting"],
+  ["desktop-port-mismatch", "conn.why.oldSetting"],
+  ["cli-foreign-proxy", "conn.why.cliOther"],
+  ["desktop-foreign-proxy", "conn.why.desktopOther"],
+];
+function connReason(doctor) {
+  const problems = (doctor && doctor.problems) || [];
+  for (const [code, key] of CONN_REASONS) if (problems.some((problem) => problem.code === code)) return t(key);
+  const other = problems.find((problem) => problem.code !== "mixed-mode" && problem.message);
+  return other ? other.message : null;
+}
+function connRoute(proxy) { return t(proxy === "ripple" ? "conn.routeRipple" : proxy === "none" ? "conn.routeDirect" : "conn.routeOther"); }
+
+/** Whether the router answers, by this page's own 5-second check first, then the app's. */
+function connAnswering(s) {
+  if (routerDown) return false;
+  if (status) return true;
+  if (s && typeof s.routerAnswering === "boolean") return s.routerAnswering;
+  return null;
+}
+
+/** Which state the card is in, what it says, and which button is the obvious one. */
+function connectionModel(s) {
+  const d = s && s.doctor;
+  const answering = connAnswering(s);
+  const lastResult = s && s.result;
+  if (d && d.mode === "direct") return { kind: "direct", title: t("conn.directTitle"), lead: t("conn.directBody"), primary: "direct-off", secondary: null };
+  if (answering === false) {
+    // A repair that did not work leaves the switch as the way to a working Claude now.
+    const repairFailed = Boolean(lastResult && lastResult.action === "repair" && !lastResult.ok);
+    const reason = d ? connReason(d) || t("conn.why.stopped") : s && s.doctorFailed ? t("conn.why.checkFailed") : null;
+    return { kind: "bad", title: t("conn.downTitle"), lead: t("conn.downLead"), reason, primary: repairFailed ? "direct-on" : "repair", secondary: repairFailed ? "repair" : "direct-on" };
+  }
+  if (!d && !(s && s.doctorFailed) && answering === null) return { kind: "checking", title: t("conn.checking"), lead: "", primary: null, secondary: null };
+  if (d && d.mode === "mixed") return { kind: "warn", title: t("conn.mixedTitle"), lead: t("conn.mixedBody", { desktop: connRoute(d.desktop && d.desktop.proxy), cli: connRoute(d.cli && d.cli.proxy) }), primary: "direct-off", secondary: "direct-on" };
+  const reason = d && connReason(d);
+  if (reason) return { kind: "warn", title: t("conn.warnTitle"), lead: reason, primary: "repair", secondary: "direct-on" };
+  return { kind: "ok", title: t("conn.okTitle"), lead: s && s.doctorFailed ? t("conn.why.checkFailed") : t("conn.okBody"), primary: null, secondary: "direct-on" };
+}
+
+const CONN_ACTIONS = {
+  "repair": { label: "conn.repair", hint: "conn.repairHint", run: () => APP.repair() },
+  "direct-on": { label: "conn.directOn", hint: "conn.directOnHint", run: () => APP.directOn() },
+  "direct-off": { label: "conn.directOff", hint: "conn.directOffHint", run: () => APP.directOff() },
+  "restart-claude": { label: "conn.restart", hint: null, run: () => APP.restartClaude() },
+};
+const CONN_BUSY = { "repair": "conn.busy.repair", "direct-on": "conn.busy.directOn", "direct-off": "conn.busy.directOff", "restart-claude": "conn.busy.restart", "checking": "conn.busy.checking" };
+/** A result older than this is history, not news. */
+const CONN_RESULT_MS = 10 * 60 * 1000;
+
+async function connRun(run) {
+  try {
+    const next = await run();
+    if (next) shellState = next;
+  } catch (error) { toast(t("common.actionFailed"), true, error.message); }
+  renderConnection();
+  void refreshHealth();
+}
+function connButton(id, cls) {
+  const action = CONN_ACTIONS[id];
+  const button = el("button", { class: cls, type: "button", text: t(action.label), onclick: () => void connRun(action.run) });
+  button.disabled = Boolean(shellState && shellState.busy);
+  return button;
+}
+function connResultText(r) {
+  if (r.timedOut) return t("conn.res.timeout");
+  const keys = {
+    "repair": r.ok ? "conn.res.repairOk" : "conn.res.repairFail",
+    "direct-on": r.ok ? "conn.res.directOnOk" : "conn.res.fail",
+    "direct-off": r.ok ? "conn.res.directOffOk" : "conn.res.fail",
+    "restart-claude": r.ok ? "conn.res.restartOk" : "conn.res.restartFail",
+  };
+  return t(keys[r.action] || "conn.res.fail");
+}
+
+/** The running action, the last result and the "reopen Claude" step: the same in both card sizes. */
+function connNotes(s) {
+  const notes = [];
+  if (s && s.busy) notes.push(el("div", { class: "conn-note busy", role: "status" }, [el("span", { class: "spinner", "aria-hidden": "true" }), el("span", { text: t(CONN_BUSY[s.busy] || "conn.busy.checking") })]));
+  const r = s && s.result;
+  if (r && !s.busy && (!r.at || Date.now() - r.at < CONN_RESULT_MS)) {
+    const ok = r.ok && !r.timedOut;
+    notes.push(el("div", { class: `conn-note ${ok ? "good" : "bad"}`, role: "status" }, [
+      el("div", { class: "conn-note-line" }, [svgIcon("0 0 20 20", ok ? CONN_ICONS.ok : CONN_ICONS.bad, "conn-note-icon"), el("span", { text: connResultText(r) })]),
+      r.details && r.details.length ? el("details", { class: "conn-fold" }, [el("summary", { text: t("conn.details") }), el("pre", { text: r.details.join("\n") })]) : null,
+    ]));
+  }
+  if (s && s.restartClaude) {
+    notes.push(el("div", { class: "conn-note restart" }, [
+      el("div", { class: "conn-note-text" }, [el("strong", { text: t("conn.restartTitle") }), el("span", { text: t("conn.restartBody") })]),
+      connButton("restart-claude", "btn"),
+    ]));
+  }
+  return notes;
+}
+
+let connDetailsOpen = false;
+let connLogLines = null;
+function connDetails(s) {
+  const d = (s && s.doctor) || {};
+  const router = d.router || {};
+  const supervisor = d.supervisor || {};
+  const row = (k, v) => el("div", { class: "row" }, [el("span", { class: "k", text: k }), el("span", { class: "v mono", text: v })]);
+  const rows = [
+    row(t("conn.d.router"), `${router.responding ? "responding" : "not responding"}${router.version ? ` · ${router.version}` : ""}${router.url ? ` · ${router.url}` : ""}`),
+    row(t("conn.d.supervisor"), `${supervisor.registered ? "registered" : "not registered"}${supervisor.state ? ` · ${supervisor.state}` : ""}${supervisor.program ? ` · ${supervisor.program}` : ""}`),
+    row(t("conn.d.desktop"), `${(d.desktop && d.desktop.proxy) || "?"}${d.desktop && d.desktop.url ? ` · ${d.desktop.url}` : ""}`),
+    row(t("conn.d.cli"), `${(d.cli && d.cli.proxy) || "?"}${d.cli && d.cli.url ? ` · ${d.cli.url}` : ""}`),
+    ...((d.problems || []).map((problem) => row(problem.code || "?", problem.message || ""))),
+  ];
+  const log = el("pre", { class: "conn-log", text: connLogLines === null ? "…" : connLogLines.length ? connLogLines.join("\n") : t("conn.noLog") });
+  const fold = el("details", { class: "conn-details" }, [
+    el("summary", { text: t("conn.details") }),
+    el("div", { class: "group conn-detail-rows" }, rows),
+    el("div", { class: "conn-log-head" }, [el("span", { class: "section-title", text: t("conn.recentLog") }), el("button", { class: "btn secondary compact", type: "button", text: t("conn.openLogs"), onclick: () => void APP.openLogs() })]),
+    log,
+  ]);
+  fold.open = connDetailsOpen;
+  fold.addEventListener("toggle", () => {
+    connDetailsOpen = fold.open;
+    if (fold.open) void APP.recentLog().then((lines) => { connLogLines = lines || []; log.textContent = connLogLines.length ? connLogLines.join("\n") : t("conn.noLog"); log.scrollTop = log.scrollHeight; });
+  });
+  return fold;
+}
+
+function connLoginOffer(s) {
+  if (!s || s.loginItem !== false) return null;
+  return el("div", { class: "conn-login" }, [
+    el("span", { text: t("conn.loginOffer") }),
+    el("button", { class: "btn secondary compact", type: "button", text: t("conn.loginOn"), onclick: () => void connRun(() => APP.enableLoginItem()) }),
+  ]);
+}
+
+function renderConnection() {
+  const host = $("#health-connection");
+  if (!APP || !host) return;
+  host.hidden = false;
+  $("#health-desktop-section").hidden = true;
+  const s = shellState;
+  const m = connectionModel(s);
+  const calm = m.kind === "ok" || m.kind === "checking";
+  // After a switch, reopening Claude is the one thing left to do; the rest steps back.
+  const demote = Boolean(s && s.restartClaude);
+  host.className = `conn conn-${m.kind}${calm ? " calm" : " loud"}`;
+  const refresh = el("button", { class: "link-btn", type: "button", text: t("conn.refresh"), onclick: () => void connRun(() => APP.refresh()) });
+  refresh.disabled = Boolean(s && s.busy);
+  if (calm) {
+    host.replaceChildren(el("div", { class: "group" }, [
+      el("div", { class: "cell conn-calm-row" }, [
+        el("span", { class: "conn-dot", "aria-hidden": "true" }),
+        el("div", { class: "cell-text" }, [el("span", { class: "cell-label strong", text: m.title }), m.lead ? el("span", { class: "cell-sub", text: m.lead }) : null]),
+        m.secondary ? el("div", { class: "cell-value" }, [connButton(m.secondary, "btn secondary compact")]) : null,
+      ]),
+      ...connNotes(s).map((note) => el("div", { class: "cell-note conn-calm-note" }, [note])),
+      connLoginOffer(s) ? el("div", { class: "cell-note conn-calm-note" }, [connLoginOffer(s)]) : null,
+    ]));
+    return;
+  }
+  const actions = [m.primary, m.secondary].filter(Boolean).map((id, index) => el("div", { class: "conn-action" }, [
+    connButton(id, `btn large${index === 0 && !demote ? "" : " secondary"}`),
+    CONN_ACTIONS[id].hint ? el("p", { class: "hint", text: t(CONN_ACTIONS[id].hint) }) : null,
+  ]));
+  host.replaceChildren(el("div", { class: "conn-card" }, [
+    el("div", { class: "conn-hero" }, [
+      el("div", { class: "conn-icon" }, [svgIcon("0 0 20 20", CONN_ICONS[m.kind] || CONN_ICONS.bad)]),
+      el("div", { class: "conn-hero-text" }, [
+        el("h2", { class: "conn-title", text: m.title }),
+        m.lead ? el("p", { class: "conn-lead", text: m.lead }) : null,
+        m.reason ? el("p", { class: "conn-reason", text: m.reason }) : null,
+      ]),
+    ]),
+    ...connNotes(s),
+    actions.length ? el("div", { class: "conn-actions" }, actions) : null,
+    connLoginOffer(s),
+    el("div", { class: "conn-foot" }, [connDetails(s), refresh]),
+  ]));
+}
+
+if (APP) {
+  APP.onState((next) => { shellState = next; renderConnection(); applyOffline(); });
+  void APP.state().then((next) => { shellState = next; renderConnection(); applyOffline(); });
+}
+
 function quotaLine(name) {
   const quota = status && status.chatgpt && status.chatgpt.quota && status.chatgpt.quota[name];
   const primary = quota && quota.rate_limits && quota.rate_limits.primary;
@@ -727,6 +1010,499 @@ async function toggleCodex(enabled) {
 void Promise.all([loadCatalogs(), refreshHealth()]);
 setInterval(refreshHealth, 5000);
 
+// ---- Phone --------------------------------------------------------------------------
+
+function hidePhoneQr() {
+  phoneQrGeneration++;
+  const box = $("#phone-qr");
+  if (box) box.replaceChildren();
+}
+function phoneActive() { return $("#view-phone").classList.contains("active"); }
+function phonePost(route, body) {
+  return api(`/api/phone/${route}`, { method: "POST", headers: { "content-type": "application/json" }, ...(body ? { body: JSON.stringify(body) } : {}) });
+}
+async function showPhoneQr(button) {
+  if (phoneBusy) return;
+  const generation = ++phoneQrGeneration;
+  button.disabled = true;
+  try {
+    const pairing = await api("/api/phone/pairing");
+    if (generation !== phoneQrGeneration || !phoneActive()) return;
+    const copy = el("button", { class: "btn secondary", type: "button", text: t("phone.copyLink") });
+    copy.addEventListener("click", async () => {
+      try { await navigator.clipboard.writeText(pairing.url); toast(t("phone.copied")); }
+      catch { toast(t("phone.copyFailed"), true); }
+    });
+    // An image, never trusted SVG markup in the dashboard's DOM.
+    $("#phone-qr").replaceChildren(el("img", { class: "phone-qr-image", alt: t("phone.qrAlt"), src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(pairing.svg)}`, width: "240", height: "240" }), copy,
+      el("button", { class: "btn secondary", type: "button", text: t("common.hide"), onclick: hidePhoneQr }));
+  } catch { if (generation === phoneQrGeneration) toast(t("common.loadFailed"), true); }
+  finally { button.disabled = false; }
+}
+function renderPhoneStatus(data) {
+  const rows = [cell(t("phone.host"), badge(data.hostRunning ? "ok" : "warn", t(data.hostRunning ? "phone.running" : "phone.stopped")))];
+  if (data.hostRunning) rows.push(cell(t("phone.mode"), el("span", { text: t(data.mode === "relay" ? "phone.relayStatus" : data.mode === "direct" ? "phone.directStatus" : "phone.localStatus") }), `${data.bind}:${data.port} · ${data.version}`),
+    cell(t("phone.notifications"), badge(data.pushReady ? "ok" : "warn", t(data.pushReady ? "phone.ready" : "phone.needsRelay"))));
+  else rows.push(el("div", { class: "cell-note" }, [hint(t("phone.install")), el("code", { text: data.hint })]));
+  $("#phone-status").replaceChildren(...rows);
+  if (!data.hostRunning) return;
+  $("#phone-phones").replaceChildren(...(data.phones.length ? data.phones.map(phone => cell(
+    el("span", { class: "cell-label mono", text: phone.clientId.length > 12 ? `${phone.clientId.slice(0, 12)}…` : phone.clientId, title: phone.clientId }),
+    badge(phone.connected ? "ok" : "", t(phone.connected ? "phone.connected" : "phone.offline")),
+    [phone.lastSeen ? t("phone.lastSeen", { time: new Date(phone.lastSeen).toLocaleString(CURRENT_LANG) }) : t("phone.unknownSeen"), t(phone.push ? "phone.pushOn" : "phone.pushOff")],
+  )) : [el("div", { class: "cell-note", text: t("phone.empty") })]));
+  $("#phone-restart").hidden = !data.restartRequired;
+}
+function phoneSettings(data) {
+  // The phone app pairs through the Relay only, so phone access is on (Relay) or off. A custom
+  // relay address stays in the host's config file; the dashboard keeps whichever one is saved.
+  const saved = data.settings;
+  const selected = saved.relay ? "relay" : "local";
+  const choices = ["relay", "local"].map(value => {
+    const radio = el("input", { type: "radio", name: "phone-mode", value, checked: value === selected });
+    return el("label", { class: "cell phone-choice" }, [radio, el("span", { class: "cell-text" }, [el("span", { class: "cell-label", text: t(`phone.choice.${value}`) }), el("span", { class: "cell-sub", text: t(`phone.help.${value}`) })])]);
+  });
+  const save = el("button", { class: "btn", type: "button", text: t("common.save") });
+  save.addEventListener("click", async () => {
+    if (phoneBusy) return;
+    const mode = $('#phone-content input[name="phone-mode"]:checked').value;
+    phoneBusy = true; save.disabled = true;
+    hidePhoneQr();
+    try {
+      const result = await phonePost("settings", mode === "relay" ? { relay: saved.relay || data.defaultRelay, bind: "local" } : { relay: "off", bind: "local" });
+      toast(t(result.restartRequired ? "phone.restartRequired" : "common.saved"));
+      await refreshPhone();
+    } catch (error) { toast(t("common.saveFailed"), true, error.message); }
+    finally { phoneBusy = false; save.disabled = false; }
+  });
+  return section(t("phone.settings"), [...choices, cell(t("phone.apply"), save)]);
+}
+function phoneRestart() {
+  const button = el("button", { class: "btn secondary", type: "button", text: t("phone.restart") });
+  const message = hint("");
+  button.addEventListener("click", async () => {
+    if (!confirm(t("phone.restartConfirm"))) return;
+    button.disabled = true;
+    hidePhoneQr();
+    try {
+      const result = await phonePost("restart");
+      if (result.manual) message.textContent = t("phone.manualRestart", { command: result.command });
+      else { toast(t("phone.restarting")); setTimeout(() => void loadPhone(), 2000); }
+    } catch (error) { toast(t("common.actionFailed"), true, error.message); }
+    finally { button.disabled = false; }
+  });
+  return el("div", { id: "phone-restart", class: "group stacked-group", hidden: "" }, [cell(t("phone.restartRequired"), button, message, "wide")]);
+}
+function phoneControls(data) {
+  const qr = el("button", { class: "btn secondary", type: "button", text: t("phone.showQr") });
+  qr.addEventListener("click", () => void showPhoneQr(qr));
+  const rotate = el("button", { class: "cell-button destructive", type: "button", text: t("phone.rotate") });
+  rotate.addEventListener("click", async () => {
+    if (phoneBusy || !confirm(t("phone.rotateConfirm"))) return;
+    phoneBusy = true; rotate.disabled = true; hidePhoneQr();
+    try { await phonePost("rotate"); toast(t("phone.rotated")); await refreshPhone(); }
+    catch (error) { toast(t("common.actionFailed"), true, error.message); }
+    finally { phoneBusy = false; rotate.disabled = false; }
+  });
+  const phones = section(t("phone.phones"), []);
+  $(".group", phones).id = "phone-phones";
+  return [section(t("phone.pairing"), [cell(t("phone.scan"), qr), el("div", { id: "phone-qr", class: "phone-qr" })], [t("phone.qrWarning"), !data.reachableFromPhone ? t("phone.unreachable") : null]),
+    phoneSettings(data), phoneRestart(), phones, section(null, [rotate], t("phone.sharedKey"))];
+}
+async function refreshPhone(rebuild = false) {
+  if (!phoneActive() || offline()) return;
+  const generation = phoneGeneration;
+  try {
+    const data = await api("/api/phone/status");
+    if (generation !== phoneGeneration || !phoneActive()) return;
+    if (rebuild || !phoneSnapshot || phoneSnapshot.hostRunning !== data.hostRunning) {
+      hidePhoneQr();
+      const state = section(t("phone.status"), []);
+      $(".group", state).id = "phone-status";
+      $("#phone-content").replaceChildren(state, ...(data.hostRunning ? phoneControls(data) : []));
+    }
+    phoneSnapshot = data;
+    renderPhoneStatus(data);
+  } catch (error) { toast(t("common.loadFailed"), true, error.message); }
+}
+async function loadPhone() { phoneGeneration++; hidePhoneQr(); await refreshPhone(true); }
+$("#phone-refresh").addEventListener("click", () => void loadPhone());
+setInterval(() => { if (!phoneBusy) void refreshPhone(); }, 5000);
+
+// ---- Laptop: awake with the lid closed, and the phone hotspot when Wi-Fi fails -------------
+// GET|PUT /api/power (router power.ts) and POST|GET /api/power/setup, which runs the CLI's
+// `awake setup` — macOS shows its own password dialog, Windows needs none. Written for someone who
+// has never heard of pmset: the router's reasons and states are English codes, so each is turned
+// into a sentence here. The power status names its platform, so wording and setup follow it rather
+// than assuming a Mac and an iPhone (Windows: awake-win.ts, tether-win.ts).
+
+let macPower = null;
+/** null, "unavailable" (a router without the feature) or a load error. */
+let macError = null;
+let macSetup = { running: false };
+/** A setup run this page started or saw running: its progress and result are shown. */
+let macSetupWatched = false;
+let macSetupPoll = null;
+let macBusy = false;
+let macGeneration = 0;
+let macSsidDraft = null;
+const macOpen = { awake: false, tether: false, setup: false };
+
+/** The OS the router reports. A router too old to name it had macOS-only power features. */
+function macPlatform() { return (macPower && macPower.platform) || "darwin"; }
+function macIsMac() { return macPlatform() === "darwin"; }
+function macActive() { return $("#view-mac").classList.contains("active"); }
+async function loadMac() { macGeneration++; macDrawn = ""; await refreshMac(true); }
+async function refreshMac(force) {
+  if (!macActive() || offline()) return;
+  const generation = macGeneration;
+  const [power, setup] = await Promise.allSettled([api("/api/power"), api("/api/power/setup")]);
+  if (generation !== macGeneration || !macActive()) return;
+  if (power.status === "fulfilled") { macPower = power.value; macError = null; }
+  else macError = power.reason && power.reason.status === 501 ? "unavailable" : (power.reason && power.reason.message) || "error";
+  if (setup.status === "fulfilled") macAdoptSetup(setup.value);
+  // A field being typed in is not redrawn under the cursor; the next refresh catches up.
+  const focused = document.activeElement;
+  if (!force && focused && $("#mac-content").contains(focused) && focused.matches("input:not([type=checkbox])")) return;
+  renderMac();
+}
+function macAdoptSetup(next) {
+  const was = macSetup;
+  macSetup = next || { running: false };
+  if (macSetup.running) {
+    macSetupWatched = true;
+    if (!macSetupPoll) macSetupPoll = setInterval(() => void macPollSetup(), 1500);
+  } else if (macSetupPoll) {
+    clearInterval(macSetupPoll);
+    macSetupPoll = null;
+  }
+  if (was.running && !macSetup.running && macSetupWatched) {
+    toast(t(macSetup.ok ? "mac.setup.done" : /cancel/i.test(macSetup.output || "") ? "mac.setup.cancelled" : "mac.setup.failed"), !macSetup.ok);
+    // Success shows as the controls coming alive; only a failure stays on screen to be read.
+    if (macSetup.ok) macSetupWatched = false;
+  }
+}
+async function macPollSetup() {
+  try { macAdoptSetup(await api("/api/power/setup")); } catch { return; }
+  if (!macSetup.running) {
+    // The router looks for the rule again when the run ends; read what it found.
+    try { macPower = await api("/api/power"); } catch { /* the 5s refresh retries */ }
+  }
+  if (macActive()) renderMac();
+}
+async function startMacSetup(ssid) {
+  if (macSetup.running) return;
+  try {
+    await api("/api/power/setup", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(ssid ? { ssid } : {}) });
+    macSetupWatched = true;
+    macOpen.setup = false;
+    macAdoptSetup({ running: true, startedAt: new Date().toISOString() });
+  } catch (error) {
+    if (error.status === 409) { macSetupWatched = true; macAdoptSetup({ running: true }); }
+    else toast(t("mac.setup.failed"), true, error.message);
+  }
+  renderMac();
+}
+async function macPut(change) {
+  if (macBusy) return;
+  macBusy = true;
+  try {
+    macPower = await api("/api/power", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify(change) });
+  } catch (error) {
+    toast(t("common.saveFailed"), true, error.message);
+    // Nothing changed, but the switch or field that was touched shows the change: draw it back.
+    macDrawn = "";
+  }
+  finally { macBusy = false; }
+  renderMac();
+}
+
+/** The same rule the router holds a hotspot name to (config.ts ssidProblem), said in words. */
+function macSsidProblem(name) {
+  if (!name) return null;
+  const bytes = new TextEncoder().encode(name).length;
+  if (bytes > 32 || !/^[A-Za-z0-9 ._'’-]+$/u.test(name) || /^ | $| {2}/.test(name) || name.startsWith("-")) return t("mac.ssid.invalid");
+  return null;
+}
+function macTime(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const time = d.toLocaleTimeString(CURRENT_LANG, { hour: "numeric", minute: "2-digit" });
+  const today = new Date();
+  if (d.toDateString() === today.toDateString()) return time;
+  const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+  if (d.toDateString() === tomorrow.toDateString()) return t("mac.tomorrowAt", { time });
+  return `${d.toLocaleDateString(CURRENT_LANG, { month: "short", day: "numeric" })} ${time}`;
+}
+/** "HH:MM" → the next time the clock shows it, as an ISO instant. */
+function macNextAt(hhmm) {
+  const [h, m] = hhmm.split(":").map(Number);
+  if (!Number.isFinite(h) || !Number.isFinite(m)) return null;
+  const now = new Date();
+  const at = new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m, 0, 0);
+  if (at.getTime() <= now.getTime()) at.setDate(at.getDate() + 1);
+  return at.toISOString();
+}
+function macHHMM(iso) {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? "" : `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+/** The router's one-line reason (awake.ts decideAwake) as a sentence, with whether it is a warning. */
+function macAwakeWhy(a) {
+  const r = String(a.reason || "");
+  let m;
+  if (r === "off") return { text: t("mac.why.off") };
+  if (r === "on") return { text: a.until ? t("mac.why.onUntil", { time: macTime(a.until) }) : t("mac.why.on") };
+  if (/^working: \d+ model call/.test(r)) return { text: t("mac.why.working") };
+  if ((m = /^working: last model call (\d+)s ago/.exec(r))) return { text: t("mac.why.recent", { min: Math.max(1, Math.round(Number(m[1]) / 60)) }) };
+  if (r.startsWith("idle")) return { text: t("mac.why.idle") };
+  if (/^until .* has passed$/.test(r)) return { text: t("mac.why.until") };
+  if ((m = /^battery (\d+)% is below (\d+)%/.exec(r))) return { text: t("mac.why.battery", { floor: m[2], percent: m[1] }), warn: true };
+  if (r === "thermal warning") return { text: t("mac.why.thermal"), warn: true };
+  if (r.startsWith("error:")) return { text: t("mac.why.error"), warn: true };
+  if (r.startsWith("needs setup")) return { text: t("mac.why.setup"), warn: true };
+  if (r.startsWith("pmset failed")) return { text: t("mac.why.failed"), warn: true };
+  // Windows (awake-win.ts): the helper's own failures and a refused power-plan write.
+  if (/^(SetThreadExecutionState failed|Windows refused|could not restore the lid-close action)/.test(r)) return { text: t("mac.why.failed"), warn: true };
+  if (r === "not started") return { text: t("mac.why.starting") };
+  return { text: r };
+}
+function macFacts(a) {
+  const facts = [];
+  if (a.battery && typeof a.battery.percent === "number") facts.push(t(a.battery.onBattery ? "mac.fact.battery" : "mac.fact.charging", { percent: a.battery.percent }));
+  if (a.lidClosed === true) facts.push(t("mac.fact.lidClosed"));
+  else if (a.lidClosed === false) facts.push(t("mac.fact.lidOpen"));
+  if (a.thermal === "warning") facts.push(t("mac.fact.hot"));
+  return facts.join(" · ");
+}
+/** A status line: a coloured dot, what is true now in a word or two, and why underneath. */
+function macStateRow(tone, title, sub, side) {
+  return el("div", { class: "cell mac-state" }, [
+    el("span", { class: `mac-dot ${tone}`, "aria-hidden": "true" }),
+    el("div", { class: "cell-text" }, [el("span", { class: "cell-label strong", text: title }), sub ? el("span", { class: "cell-sub", text: sub }) : null]),
+    side ? el("span", { class: "mac-side", text: side }) : null,
+  ]);
+}
+function macDetails(key, rows) {
+  const box = el("details", { class: "details mac-details" }, [
+    el("summary", { text: t("mac.details") }),
+    el("div", { class: "group conn-detail-rows" }, rows.filter(Boolean).map(([k, v]) => el("div", { class: "row" }, [el("span", { class: "k", text: k }), el("span", { class: "v mono", text: v })]))),
+  ]);
+  box.open = macOpen[key];
+  box.addEventListener("toggle", () => { macOpen[key] = box.open; });
+  return box;
+}
+
+function macSetupNote() {
+  if (macSetup.running) {
+    // macOS opens its own password window; Windows only checks (no password, no elevation).
+    const title = t(macIsMac() ? "mac.setup.waiting" : "mac.setup.waitingWin");
+    const sub = t(macIsMac() ? "mac.setup.waitingSub" : "mac.setup.waitingSubWin");
+    return el("div", { class: "conn-note busy", role: "status" }, [el("span", { class: "spinner", "aria-hidden": "true" }),
+      el("div", { class: "conn-note-text" }, [el("strong", { text: title }), el("span", { text: sub })])]);
+  }
+  if (!macSetupWatched || macSetup.ok === undefined) return null;
+  const cancelled = /cancel/i.test(macSetup.output || "");
+  const good = macSetup.ok === true;
+  const output = el("details", { class: "conn-fold" }, [el("summary", { text: t("mac.details") }), el("pre", { text: macSetup.output || "" })]);
+  output.open = macOpen.setup;
+  output.addEventListener("toggle", () => { macOpen.setup = output.open; });
+  return el("div", { class: `conn-note ${good ? "good" : "bad"}`, role: "status" }, [
+    el("div", { class: "conn-note-line" }, [
+      svgIcon("0 0 20 20", good ? ["M4.5 10.5l3.5 3.5 7.5-8"] : ["M5.5 5.5l9 9M14.5 5.5l-9 9"], "conn-note-icon"),
+      el("span", { text: t(good ? "mac.setup.done" : cancelled ? "mac.setup.cancelled" : "mac.setup.failed") }),
+    ]),
+    macSetup.output ? output : null,
+  ]);
+}
+function macSetupCard(p) {
+  const saved = (p.tether && p.tether.hotspotSsid) || "";
+  if (macSsidDraft === null) macSsidDraft = saved;
+  const input = el("input", { type: "text", id: "mac-ssid", value: macSsidDraft, placeholder: t("mac.ssid.placeholder"), autocomplete: "off", spellcheck: "false", maxlength: "32" });
+  const problem = el("small", { class: "bad-text", role: "alert" });
+  const button = el("button", { class: "btn large", type: "button", "data-key": "mac-setup", text: t(macSetup.running ? "mac.setup.running" : "mac.setup.button") });
+  const check = () => {
+    const issue = macSsidProblem(input.value.trim());
+    problem.textContent = issue || "";
+    problem.hidden = !issue;
+    button.disabled = Boolean(issue) || macSetup.running;
+  };
+  input.addEventListener("input", () => { macSsidDraft = input.value; check(); });
+  button.addEventListener("click", () => void startMacSetup(input.value.trim()));
+  check();
+  input.disabled = macSetup.running;
+  const allow = ["mac.setup.allowSleep", "mac.setup.allowLid", "mac.setup.allowHotspot"];
+  return el("section", { class: "conn-card mac-setup", "aria-labelledby": "mac-setup-title" }, [
+    el("div", { class: "conn-hero" }, [
+      el("div", { class: "conn-icon" }, [svgIcon("0 0 20 20", ["M6 9V6.5a4 4 0 0 1 8 0V9", "M5 9h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1z"])]),
+      el("div", { class: "conn-hero-text" }, [
+        el("h2", { class: "conn-title", id: "mac-setup-title", text: t("mac.setup.title") }),
+        el("p", { class: "conn-lead", text: t("mac.setup.lead") }),
+      ]),
+    ]),
+    el("ul", { class: "mac-allow" }, allow.map((key) => el("li", { text: t(key) }))),
+    el("p", { class: "hint mac-setup-note", text: t("mac.setup.private") }),
+    el("p", { class: "hint mac-setup-note", text: t("mac.setup.insomnia") }),
+    el("label", { class: "form-field" }, [el("span", { text: t("mac.ssid.label") }), input, problem, el("small", { text: t("mac.ssid.help") })]),
+    el("div", { class: "mac-setup-actions" }, [button]),
+    macSetupNote(),
+  ]);
+}
+function openMacRename(current) {
+  const input = el("input", { type: "text", value: current, placeholder: t("mac.ssid.placeholder"), autocomplete: "off", spellcheck: "false", maxlength: "32" });
+  const problem = el("small", { class: "bad-text", role: "alert", hidden: "" });
+  const save = el("button", { class: "btn", type: "button", "data-default-action": "", text: t("mac.rename.save") });
+  const check = () => {
+    const name = input.value.trim();
+    const issue = macSsidProblem(name);
+    problem.textContent = issue || "";
+    problem.hidden = !issue;
+    save.disabled = !name || Boolean(issue) || name === current;
+  };
+  input.addEventListener("input", check);
+  save.addEventListener("click", () => { const name = input.value.trim(); closeModal(); void startMacSetup(name); });
+  check();
+  showModal(el("div", {}, [
+    el("h1", { text: t(current ? "mac.rename.title" : "mac.rename.titleNew") }),
+    hint(t("mac.rename.help")),
+    el("label", { class: "form-field" }, [el("span", { text: t("mac.ssid.label") }), input, problem, el("small", { text: t("mac.ssid.help") })]),
+    el("div", { class: "actions end" }, [el("button", { class: "btn secondary", type: "button", text: t("common.cancel"), onclick: closeModal }), save]),
+  ]));
+}
+
+function macAwakeCard(a) {
+  const why = macAwakeWhy(a);
+  const state = a.applied
+    ? macStateRow("on", t("mac.awake.on"), why.text, macFacts(a))
+    : macStateRow(why.warn ? "warn" : "off", t("mac.awake.off"), why.text, macFacts(a));
+  const modes = [{ value: "off", label: t("mac.mode.off") }, { value: "working", label: t("mac.mode.working") }, { value: "on", label: t("mac.mode.on") }];
+  const rows = [
+    state,
+    cell(el("span", { class: "cell-label", text: t("mac.mode.label") }),
+      modSegmented("mac-mode", modes, a.mode, t("mac.mode.label"), (mode) => void macPut({ awake: { mode, until: null } })),
+      t(`mac.mode.${a.mode}Help`), "wide"),
+  ];
+  if (a.mode === "on") {
+    const time = el("input", { type: "time", class: "mac-time", "data-key": "mac-until", value: a.until ? macHHMM(a.until) : "", "aria-label": t("mac.until.label") });
+    // Saved when the field is left, not on each keystroke: a redraw mid-typing would eat the minutes.
+    const commit = () => {
+      const until = time.value ? macNextAt(time.value) : null;
+      if (time.value && !until) return;
+      if ((until ? macHHMM(until) : "") === (a.until ? macHHMM(a.until) : "")) return;
+      void macPut({ awake: { until } });
+    };
+    time.addEventListener("blur", commit);
+    time.addEventListener("keydown", (event) => { if (event.key === "Enter") time.blur(); });
+    const clear = a.until ? el("button", { class: "link-btn", type: "button", "data-key": "mac-until-clear", text: t("mac.until.clear"), onclick: () => void macPut({ awake: { until: null } }) }) : null;
+    rows.push(cell(t("mac.until.label"), [time, clear], a.until ? t("mac.until.set", { time: macTime(a.until) }) : t("mac.until.none")));
+  }
+  return el("section", { class: "mod-card mac-card", "aria-labelledby": "mac-awake-title" }, [
+    el("div", { class: "mod-card-head" }, [el("h2", { id: "mac-awake-title", text: t("mac.awake.title") }), hint(t("mac.awake.blurb"))]),
+    el("div", { class: "group" }, rows),
+    el("p", { class: "group-footer", text: t("mac.awake.safety", { floor: macBatteryFloor(a) }) }),
+    macDetails("awake", [
+      [t("mac.d.reason"), a.reason || "—"],
+      [t("mac.d.applied"), a.applied ? (macIsMac() ? "disablesleep 1" : "ES_SYSTEM_REQUIRED") : macIsMac() ? "disablesleep 0" : "—"],
+      [t("mac.d.battery"), a.battery ? `${a.battery.percent ?? "?"}% · ${a.battery.onBattery ? "battery" : "AC"}` : "—"],
+      [t("mac.d.thermal"), a.thermal || "—"],
+      [t("mac.d.lid"), a.lidClosed === null || a.lidClosed === undefined ? "—" : a.lidClosed ? "closed" : "open"],
+      [t("mac.d.until"), a.until || "—"],
+    ]),
+  ]);
+}
+/** The battery floor is in config, not in the status; the reason names it when it bites. */
+function macBatteryFloor(a) {
+  const m = /below (\d+)%/.exec(String(a.reason || ""));
+  return m ? m[1] : "20";
+}
+
+const MAC_HINT_STATES = new Set(["hotspot-not-visible", "join-failed", "no-wifi", "no-hotspot-ssid", "needs-setup", "no-hotspot-profile", "needs-location"]);
+function macTetherCard(tt, setupOk) {
+  const network = tt.network === "hotspot" ? "hotspot" : tt.network === "wifi" ? "wifi" : "none";
+  const tone = network === "wifi" ? "ok" : network === "hotspot" ? "on" : "bad";
+  let side = "";
+  if (tt.lastSwitch) {
+    const time = macTime(tt.lastSwitch.at);
+    side = !tt.lastSwitch.ok ? t("mac.switch.failed", { time }) : t(tt.lastSwitch.to === "hotspot" ? "mac.switch.toHotspot" : "mac.switch.toWifi", { time });
+  }
+  const enabled = modSwitch("mac-tether", tt.enabled, t("mac.tether.switch"), (on) => void macPut({ tether: { enabled: on } }));
+  const name = tt.hotspotSsid || "";
+  const rename = el("button", { class: "btn secondary compact", type: "button", "data-key": "mac-rename", text: t(name ? "mac.ssid.change" : "mac.ssid.set") });
+  rename.disabled = macSetup.running || !setupOk;
+  rename.addEventListener("click", () => openMacRename(name));
+  const rows = [
+    cell(el("label", { class: "cell-label", text: t("mac.tether.switch") }), enabled, t("mac.tether.switchHelp")),
+    macStateRow(tone, t(`mac.net.${network}`), I18N.en[`mac.tstate.${tt.state}`] ? t(`mac.tstate.${tt.state}`) : tt.state, side),
+    // No "keep this network" pin here: beside the switch above it read as the same thing twice
+    // (2026-10-20). The API keeps `pin` for the CLI.
+    cell(t("mac.ssid.label"), [el("span", { class: name ? "mac-ssid" : "mac-ssid empty", text: name || t("mac.ssid.none") }), rename]),
+  ];
+  let notice = null;
+  // Before setup the card above says what to do; the router's own setup hint would only repeat it.
+  if (tt.hint && tt.state !== "pinned" && setupOk) {
+    const known = MAC_HINT_STATES.has(tt.state);
+    notice = el("div", { class: "notice warn mac-hint", role: "status" }, [
+      el("strong", { text: t(known ? `mac.tstate.${tt.state}` : "mac.hint.title") }),
+      el("span", { text: known ? t(`mac.hint.${tt.state}`) : tt.hint }),
+    ]);
+  }
+  return el("section", { class: "mod-card mac-card", "aria-labelledby": "mac-tether-title" }, [
+    el("div", { class: "mod-card-head" }, [el("h2", { id: "mac-tether-title", text: t("mac.tether.title") }), hint(t("mac.tether.blurb"))]),
+    notice,
+    el("div", { class: "group" }, rows),
+    el("p", { class: "group-footer", text: t(macIsMac() ? "mac.tether.help" : "mac.tether.helpWin") }),
+    macDetails("tether", [
+      [t("mac.d.state"), tt.state],
+      [t("mac.d.network"), tt.network],
+      [t("mac.d.probe"), tt.lastProbe ? `${tt.lastProbe.ok ? "ok" : "failed"} · ${tt.lastProbe.network} · ${macTime(tt.lastProbe.at)}` : "—"],
+      [t("mac.d.switch"), tt.lastSwitch ? `${tt.lastSwitch.to} · ${tt.lastSwitch.ok ? "ok" : "failed"} · ${tt.lastSwitch.reason}` : "—"],
+      tt.hint ? [t("mac.d.hint"), tt.hint] : null,
+    ]),
+  ]);
+}
+function macEmpty(title, body) {
+  return el("div", { class: "offline-state", role: "status" }, [
+    el("div", { class: "offline-icon direct" }, [svgIcon("0 0 20 20", ["M3.5 13V5.6c0-.9.7-1.6 1.6-1.6h9.8c.9 0 1.6.7 1.6 1.6V13", "M1.8 15.8h16.4"])]),
+    el("h2", { text: title }),
+    el("p", { text: body }),
+  ]);
+}
+/** What the page was last drawn from: an unchanged refresh leaves the controls alone, so a click
+ *  that lands while it arrives is not lost to a button replaced under the pointer. */
+let macDrawn = "";
+function renderMac() {
+  const root = $("#mac-content");
+  const drawn = JSON.stringify([macPower, macError, macSetup, macSetupWatched, CURRENT_LANG]);
+  if (drawn === macDrawn && root.childElementCount) return;
+  macDrawn = drawn;
+  if (!macPower) {
+    if (macError === "unavailable") root.replaceChildren(macEmpty(t("mac.unavailable.title"), t("mac.unavailable.body")));
+    else if (macError) root.replaceChildren(section(null, [el("div", { class: "cell-note bad-text", text: `${t("common.loadFailed")} ${macError}` })]));
+    return;
+  }
+  const a = macPower.awake;
+  if (a.setup === "unsupported") {
+    root.replaceChildren(macEmpty(t("mac.unsupported.title"), t("mac.unsupported.body")));
+    return;
+  }
+  const setupOk = a.setup === "ok";
+  // The password/setup card is macOS's alone: Windows holds sleep and edits the power plan as the
+  // signed-in user, so its setup() always answers "ok" and this card never appears there (a Linux
+  // power status has no backend at all and shows the unsupported state above).
+  const needsSetup = !setupOk && macIsMac();
+  const cards = el("div", { class: `mac-cards${needsSetup ? " mac-locked" : ""}` }, [macAwakeCard(a), macTetherCard(macPower.tether, setupOk)]);
+  if (needsSetup) cards.setAttribute("inert", "");
+  // Once set up, a later run (a new hotspot name) reports here, above the cards.
+  const note = setupOk && macSetupWatched ? macSetupNote() : null;
+  modRedraw(root, [
+    needsSetup ? macSetupCard(macPower) : null,
+    note ? el("div", { class: "mac-run" }, [note]) : null,
+    cards,
+  ]);
+}
+setInterval(() => { if (!macBusy && !macSetup.running) void refreshMac(); }, 5000);
+
 // ---- Model links --------------------------------------------------------------------
 
 function claudeSelect(selected) {
@@ -1928,10 +2704,12 @@ function openAnthropicProviderForm(options) {
   function syncModeHint() { modeHint.textContent = auth.value === "claude-code" && accountPool ? t("providers.anthropicPoolRouting") : t("providers.anthropicIngressOnly"); }
   auth.addEventListener("change", syncModeHint);
   syncModeHint();
+  const limitsInput = el("input", { type: "checkbox", checked: !(existing && existing.limits === false) });
+  const limitsField = el("div", { class: "form-field" }, [el("label", { class: "check" }, [limitsInput, el("span", { text: t("providers.limits") })]), el("small", { text: t("providers.limitsHelp") })]);
   const form = el("div", { class: "provider-form" }, [
     el("h1", { id: "modal-title", text: existing ? t("providers.edit") : t("providers.addTitle") }),
     inputRow(t("providers.name"), nameInput, t("providers.nameHelp")), authField, keyField, probeButton, sourceLine, result, modelArea,
-    modeHint,
+    modeHint, limitsField,
   ]);
   const saveButton = el("button", { class: "btn", type: "button", "data-default-action": "", text: existing ? t("common.save") : t("providers.add") });
   saveButton.addEventListener("click", async () => {
@@ -1940,7 +2718,7 @@ function openAnthropicProviderForm(options) {
     const next = clone(await latestConfig());
     const providerName = existing ? options.name : uniqueName(typedName, next.providers);
     const checkedModels = withSavedModelFields(form.querySelector(".model-picker").selected(), existing && next.providers[options.name]);
-    const provider = { type: "anthropic", auth: auth.value, ...(auth.value === "claude-code" && accountPool ? { accountPool: true } : {}), ...(auth.value === "api-key" && (keyInput.value || (existing && existing.apiKey)) ? { apiKey: keyInput.value || existing.apiKey } : {}), models: checkedModels };
+    const provider = { type: "anthropic", auth: auth.value, ...(auth.value === "claude-code" && accountPool ? { accountPool: true } : {}), ...(auth.value === "api-key" && (keyInput.value || (existing && existing.apiKey)) ? { apiKey: keyInput.value || existing.apiKey } : {}), limits: limitsInput.checked, models: checkedModels };
     next.providers[providerName] = provider;
     // accountPool makes these models native Claude routing targets. Without it this remains the
     // historical OpenAI ingress provider, and routing deliberately ignores it.
@@ -2007,9 +2785,11 @@ function openGrokProviderForm(options) {
   probeButton.addEventListener("click", () => void runProbe());
   const advanced = el("details", { class: "details" }, [el("summary", { text: t("common.advanced") })]);
   const identity = el("input", { type: "checkbox", checked: !(existing && existing.identity === false) });
+  const limitsInput = el("input", { type: "checkbox", checked: !(existing && existing.limits === false) });
   const append = el("textarea", { rows: "2", value: (existing && existing.instructionsAppend) || "" });
   advanced.appendChild(el("div", { class: "advanced-content" }, [
     el("div", { class: "form-field" }, [el("label", { class: "check" }, [identity, el("span", { text: t("providers.identity") })]), el("small", { text: t("providers.identityHelp") })]),
+    el("div", { class: "form-field" }, [el("label", { class: "check" }, [limitsInput, el("span", { text: t("providers.limits") })]), el("small", { text: t("providers.limitsHelp") })]),
     inputRow(t("providers.append"), append, t("providers.appendHelp")),
   ]));
   const pickerInput = el("input", { type: "checkbox", checked: existing ? modelsOf(existing).some((model) => ((currentConfig.cli && currentConfig.cli.extraModels) || []).some((extra) => extra.model === model.id)) : true });
@@ -2030,12 +2810,13 @@ function openGrokProviderForm(options) {
     const providerName = existing ? options.name : uniqueName(typedName, next.providers);
     const saved = existing && (next.providers[options.name] || existing);
     const checkedModels = withSavedModelFields(form.querySelector(".model-picker").selected(), saved);
-    const formKeys = new Set(["type", "identity", "instructionsAppend", "models"]);
+    const formKeys = new Set(["type", "identity", "limits", "instructionsAppend", "models"]);
     const kept = saved ? Object.fromEntries(Object.entries(saved).filter(([key]) => !formKeys.has(key))) : {};
     next.providers[providerName] = {
       ...kept,
       type: "grok",
       identity: identity.checked,
+      limits: limitsInput.checked,
       ...(append.value.trim() ? { instructionsAppend: append.value.trim() } : {}),
       models: checkedModels,
     };
@@ -2110,9 +2891,11 @@ function openGoogleProviderForm(options) {
   probeButton.addEventListener("click", () => void runProbe());
   const advanced = el("details", { class: "details" }, [el("summary", { text: t("common.advanced") })]);
   const identity = el("input", { type: "checkbox", checked: !(existing && existing.identity === false) });
+  const limitsInput = el("input", { type: "checkbox", checked: !(existing && existing.limits === false) });
   const append = el("textarea", { rows: "2", value: (existing && existing.instructionsAppend) || "" });
   advanced.appendChild(el("div", { class: "advanced-content" }, [
     el("div", { class: "form-field" }, [el("label", { class: "check" }, [identity, el("span", { text: t("providers.identity") })]), el("small", { text: t("providers.identityHelp") })]),
+    el("div", { class: "form-field" }, [el("label", { class: "check" }, [limitsInput, el("span", { text: t("providers.limits") })]), el("small", { text: t("providers.limitsHelp") })]),
     inputRow(t("providers.append"), append, t("providers.appendHelp")),
   ]));
   const pickerInput = el("input", { type: "checkbox", checked: Boolean(existing && modelsOf(existing).some((model) => ((currentConfig.cli && currentConfig.cli.extraModels) || []).some((extra) => extra.model === model.id))) });
@@ -2133,7 +2916,7 @@ function openGoogleProviderForm(options) {
     const saved = existing && (next.providers[options.name] || existing);
     const checkedModels = withSavedModelFields(form.querySelector(".model-picker").selected(), saved);
     // Fields this form has no control for (defaultEffort, a hand-written setting) survive the save.
-    const formKeys = new Set(["type", "auth", "apiKey", "identity", "instructionsAppend", "models"]);
+    const formKeys = new Set(["type", "auth", "apiKey", "identity", "limits", "instructionsAppend", "models"]);
     const kept = saved ? Object.fromEntries(Object.entries(saved).filter(([key]) => !formKeys.has(key))) : {};
     next.providers[providerName] = {
       ...kept,
@@ -2142,6 +2925,7 @@ function openGoogleProviderForm(options) {
       ...(apiKey ? { apiKey } : {}),
       ...(existing && existing.url ? { url: existing.url } : {}),
       identity: identity.checked,
+      limits: limitsInput.checked,
       ...(append.value.trim() ? { instructionsAppend: append.value.trim() } : {}),
       models: checkedModels,
     };
@@ -2242,12 +3026,14 @@ function openProviderForm(options) {
     // Without a line of its own the model reads Claude Code's system prompt and answers that it is
     // Claude, which is what DeepSeek did before this was offered here too.
     const identity = el("input", { type: "checkbox", checked: !(existing && existing.identity === false) });
+    const limitsInput = el("input", { type: "checkbox", checked: !(existing && existing.limits === false) });
     const append = el("textarea", { rows: "2", value: (existing && existing.instructionsAppend) || "" });
     advancedContent.append(
       el("div", { class: "form-field" }, [el("label", { class: "check" }, [identity, el("span", { text: t("providers.identity") })]), el("small", { text: t("providers.identityHelp") })]),
+      el("div", { class: "form-field" }, [el("label", { class: "check" }, [limitsInput, el("span", { text: t("providers.limits") })]), el("small", { text: t("providers.limitsHelp") })]),
       inputRow(t("providers.append"), append, t("providers.appendHelp")),
     );
-    advancedContent._prompt = { identity, append };
+    advancedContent._prompt = { identity, limits: limitsInput, append };
   } else {
     const auth = el("select", {}, [selectOption("auto", t("providers.authAuto")), selectOption("own", t("providers.authOwn")), selectOption("borrow-codex", t("providers.authBorrow"))]);
     auth.value = (existing && existing.auth) || "auto";
@@ -2259,6 +3045,7 @@ function openProviderForm(options) {
     const loginHelp = el("small", { text: t("providers.loginHelp") });
     const effort = effortSelect((existing && existing.defaultEffort) || "high", ["low", "medium", "high", "xhigh", "max"]);
     const identity = el("input", { type: "checkbox", checked: !(existing && existing.identity === false) });
+    const limitsInput = el("input", { type: "checkbox", checked: !(existing && existing.limits === false) });
     const append = el("textarea", { rows: "2", value: (existing && existing.instructionsAppend) || "" });
     chatgptFields = [
       inputRow(t("providers.credentials"), auth, t("providers.credentialsHelp")),
@@ -2267,9 +3054,10 @@ function openProviderForm(options) {
     ];
     advancedContent.append(
       el("div", { class: "form-field" }, [el("label", { class: "check" }, [identity, el("span", { text: t("providers.identity") })]), el("small", { text: t("providers.identityHelp") })]),
+      el("div", { class: "form-field" }, [el("label", { class: "check" }, [limitsInput, el("span", { text: t("providers.limits") })]), el("small", { text: t("providers.limitsHelp") })]),
       inputRow(t("providers.append"), append, t("providers.appendHelp")),
     );
-    advancedContent._chatgpt = { auth, effort, identity, append };
+    advancedContent._chatgpt = { auth, effort, identity, limits: limitsInput, append };
   }
   advanced.appendChild(advancedContent);
   const customUrlRow = isCustom ? inputRow(t("providers.url"), urlInput, t("providers.urlHelp")) : null;
@@ -2311,13 +3099,13 @@ function openProviderForm(options) {
   function draftProvider() {
     if (isChatgpt) {
       const chat = advancedContent._chatgpt;
-      return { type: "chatgpt", auth: chat.auth.value, defaultEffort: chat.effort.value, identity: chat.identity.checked, ...(chat.append.value.trim() ? { instructionsAppend: chat.append.value.trim() } : {}) };
+      return { type: "chatgpt", auth: chat.auth.value, defaultEffort: chat.effort.value, identity: chat.identity.checked, limits: chat.limits.checked, ...(chat.append.value.trim() ? { instructionsAppend: chat.append.value.trim() } : {}) };
     }
     const prompt = advancedContent._prompt;
     return {
       type: openAiNow() ? "openai-compatible" : "anthropic-compatible",
       url: urlInput.value.trim(),
-      ...(prompt ? { identity: prompt.identity.checked } : {}),
+      ...(prompt ? { identity: prompt.identity.checked, limits: prompt.limits.checked } : {}),
       ...(prompt && prompt.append.value.trim() ? { instructionsAppend: prompt.append.value.trim() } : {}),
       ...(preset ? { preset: preset.id } : {}),
       // A vendor that asks for a session header keys its prompt cache on it, so carry it from the
@@ -2410,7 +3198,7 @@ function openProviderForm(options) {
     const provider = draftProvider();
     if (!isChatgpt && (!provider.url || !/^https?:\/\//.test(provider.url))) { toast(t("providers.urlRequired"), true); return; }
     const next = clone(await latestConfig());
-    const providerName = existing ? options.name : uniqueName(typedName, next.providers);
+    const providerName = existing ? options.name : uniqueName(typedName, next.providers, provider.url);
     const saved = existing && (next.providers[options.name] || existing);
     if (existing && providerName !== options.name) delete next.providers[options.name];
     const checkedModels = withSavedModelFields(form.querySelector(".model-picker").selected(), saved);
@@ -2419,8 +3207,8 @@ function openProviderForm(options) {
     // (debugDump, a hand-written setting) is carried over from the saved one rather than dropped.
     // A field the form owns is left to the draft, so clearing it in the form still clears it.
     const formKeys = new Set(isChatgpt
-      ? ["type", "auth", "defaultEffort", "identity", "instructionsAppend", "models"]
-      : ["type", "url", "identity", "instructionsAppend", "preset", "sessionHeader", "wire", "caps", "headers", "models"]);
+      ? ["type", "auth", "defaultEffort", "identity", "limits", "instructionsAppend", "models"]
+      : ["type", "url", "identity", "limits", "instructionsAppend", "preset", "sessionHeader", "wire", "caps", "headers", "models"]);
     const kept = saved ? Object.fromEntries(Object.entries(saved).filter(([key]) => !formKeys.has(key))) : {};
     next.providers[providerName] = { ...kept, ...provider };
     // Read after `next.providers` has been updated, so an unticked model is already undeclared here
@@ -2459,8 +3247,8 @@ function openProviderForm(options) {
 //
 // 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.
+// with the revision it was made on. A 409 means another surface saved first: the fields changed
+// here are laid over its settings and sent again, so neither side's change is lost.
 
 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
@@ -2490,13 +3278,16 @@ const MOD_DEFAULTS = {
   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,
+  swampAt: 50, layout: "dashboard", appearance: "auto", skin: "deep", language: "auto", hide: ["reason"], extras: [], setupDone: false,
 };
 
-let modState = { settings: null, revision: 0, options: null, retiredNote: false };
+// `base` is the router's copy `settings` was edited from: what differs between them is this page's own change.
+let modState = { settings: null, base: null, revision: 0, options: null, retiredNote: false };
 let modSaveTimer = null;
 let modSaving = false;
 let modSaveAgain = false;
+// Counts the router's answers to saves, so a read that went out before one does not undo it.
+let modWrites = 0;
 
 /**
  * The router hands back the mod's full normalized settings; this only fills what an older router
@@ -2517,6 +3308,42 @@ function modNormalize(raw) {
   };
 }
 
+/**
+ * The fields changed from `before` to `after`, found as the mod's settingsChanges finds them: values
+ * and arrays whole, objects field by field, and a rule whose mode changed replaced whole.
+ */
+function modChanges(before, after, path = []) {
+  if (JSON.stringify(before) === JSON.stringify(after)) return [];
+  if (after === undefined) return [{ path, remove: true }];
+  const isObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+  if (isObject(before) && isObject(after) && before.mode === after.mode) {
+    return [...new Set([...Object.keys(before), ...Object.keys(after)])].flatMap((key) => modChanges(before[key], after[key], [...path, key]));
+  }
+  return [{ path, value: after }];
+}
+function modApply(base, changes) {
+  const result = clone(base);
+  for (const change of changes) {
+    const key = change.path.at(-1);
+    if (key === undefined) continue;
+    let parent = result;
+    for (const step of change.path.slice(0, -1)) {
+      if (!parent[step] || typeof parent[step] !== "object" || Array.isArray(parent[step])) parent[step] = {};
+      parent = parent[step];
+    }
+    if (change.remove) delete parent[key];
+    else parent[key] = clone(change.value);
+  }
+  return result;
+}
+/** Take the router's copy, keeping on it what was changed here and is not saved yet (unless `drop`). */
+function modAdopt(snapshot, drop) {
+  const changes = !drop && modState.base && modState.settings ? modChanges(modState.base, modState.settings) : [];
+  modState.base = modNormalize(snapshot.settings);
+  modState.settings = modApply(modState.base, changes);
+  modState.revision = Number(snapshot.revision) || 0;
+}
+
 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"; }
@@ -2604,42 +3431,57 @@ 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);
+    // Another surface saving first (the bar's ⚙ panel, another tab of this page) costs this change
+    // nothing: it is laid over their settings and sent again. Only a router that keeps moving under
+    // it, three times running, gets the change dropped.
+    for (let attempt = 1; ; attempt++) {
+      const sent = clone(modState.settings);
+      let out;
+      try {
+        out = await api("/api/mod-settings", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ schemaVersion: 1, settings: sent, revision: modState.revision }) });
+      } catch (error) {
+        if (error.status !== 409 || !error.body || !("settings" in error.body)) throw error;
+        modWrites++;
+        if (attempt < 3) { modAdopt(error.body); modRefresh(); continue; }
+        clearTimeout(modSaveTimer);
+        modSaveTimer = null;
+        modSaveAgain = false;
+        modAdopt(error.body, true);
+        modRefresh();
+        modStatus(t("mod.conflict"), true);
+        toast(t("mod.conflict"), true);
+        return;
+      }
+      modWrites++;
+      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) { modAdopt(out, true); modRefresh(); }
+      else modState.base = sent;
+      modStatus(t("mod.saved"));
+      return;
     }
+  } catch (error) {
+    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.
+  // A save on its way brings back the router's copy itself.
   if (modSaveTimer || modSaving) return;
   let retired = false;
+  const writes = modWrites;
   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;
+  } else if (!modSaving && modWrites === writes) {
+    // A change made while this read was out stays on top of what it brought. One already saved, or
+    // being saved, has the router's newer answer from that save instead.
+    modAdopt(settingsResult.value);
     retired = settingsResult.value.legacy === true;
   }
   modState.options = optionsResult.status === "fulfilled" ? optionsResult.value : null;
@@ -2649,6 +3491,10 @@ async function loadMod() {
   // The settings came back without Auto and the field rules; saving them as they are keeps the note to this once.
   if (retired) modPatch({});
 }
+// Back on this page after a while: the bar's ⚙ panel or another tab may have saved meanwhile.
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible" && $("#view-mod").classList.contains("active")) void loadMod();
+});
 function modRefresh() {
   if (!modState.settings) return;
   renderModNotice();
@@ -3056,6 +3902,7 @@ function modLookCard() {
     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.skin"), modSegmented("skin", [{ value: "deep", label: t("mod.skinDeep") }, { value: "flat", label: t("mod.skinFlat") }], s.skin || "deep", t("mod.skin"), (skin) => modPatch({ skin })), null, "wide"),
       cell(t("mod.language"), modSelect("language", languages, s.language, t("mod.language"), (language) => modPatch({ language }), "narrow")),
     ]),
     modSection(t("mod.show"), [
@@ -3080,6 +3927,29 @@ let knownRequestProviders = new Set();
 let requestProvider = "";
 let showCountTokens = false;
 let expandedRequestId = null;
+// The usage period. "hour" is the exact rolling hour; every other period reads the hourly history.
+const USAGE_PERIODS = ["hour", "today", "7d", "30d", "month", "all", "custom"];
+const USAGE_STORE = "clauderipple_logs_usage";
+let usagePeriod = "hour";
+let usageFrom = ""; // custom start, a local "YYYY-MM-DD"
+let usageTo = ""; // custom end (inclusive), a local "YYYY-MM-DD"
+let lastSummary = null;
+let configuredProviders = null; // provider names from /api/config, fetched once for this view
+let renderedProviderNames = "";
+let requestsGeneration = 0;
+(function restoreUsage() {
+  try {
+    const saved = JSON.parse(localStorage.getItem(USAGE_STORE) || "null");
+    if (!saved || typeof saved !== "object") return;
+    if (USAGE_PERIODS.includes(saved.period)) usagePeriod = saved.period;
+    if (isDay(saved.from)) usageFrom = saved.from;
+    if (isDay(saved.to)) usageTo = saved.to;
+    if (typeof saved.provider === "string") requestProvider = saved.provider;
+  } catch { /* storage unavailable or unreadable: start from the defaults */ }
+})();
+function saveUsage() {
+  try { localStorage.setItem(USAGE_STORE, JSON.stringify({ period: usagePeriod, from: usageFrom, to: usageTo, provider: requestProvider })); } catch { /* unavailable */ }
+}
 
 function colorizeLogLine(line) {
   const cls = /\bERROR\b|\berror\b/.test(line) ? "tag-ERR" : /\bWARN\b/.test(line) ? "tag-WARN" : "tag-PASS";
@@ -3110,10 +3980,97 @@ function showLogsPanel(name) {
 }
 $("#logs-requests-tab").addEventListener("click", () => showLogsPanel("requests"));
 $("#logs-raw-tab").addEventListener("click", () => showLogsPanel("raw"));
-$("#logs-provider").addEventListener("change", (event) => { requestProvider = event.target.value; void refreshRequests(); });
+$("#logs-provider").addEventListener("change", (event) => { requestProvider = event.target.value; saveUsage(); void refreshRequests(); });
 
+// ---- Usage period: local calendar days, so "today" starts at this machine's midnight.
+function isDay(value) { return typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value) && !Number.isNaN(dayStart(value).valueOf()); }
+function dayStart(value) { const [y, m, d] = value.split("-").map(Number); return new Date(y, m - 1, d); }
+function dayKey(date) { const two = (n) => String(n).padStart(2, "0"); return `${date.getFullYear()}-${two(date.getMonth() + 1)}-${two(date.getDate())}`; }
+function daysAgo(n) { const now = new Date(); return new Date(now.getFullYear(), now.getMonth(), now.getDate() - n); }
+/** The period as `{from, to}` in epoch ms (`to` exclusive), or null for the rolling hour. */
+function usageRange() {
+  const now = Date.now();
+  if (usagePeriod === "today") return { from: daysAgo(0).valueOf(), to: now };
+  if (usagePeriod === "7d") return { from: daysAgo(6).valueOf(), to: now };
+  if (usagePeriod === "30d") return { from: daysAgo(29).valueOf(), to: now };
+  if (usagePeriod === "month") { const today = new Date(); return { from: new Date(today.getFullYear(), today.getMonth(), 1).valueOf(), to: now }; }
+  if (usagePeriod === "all") return { from: 0, to: now };
+  if (usagePeriod === "custom") {
+    if (!isDay(usageFrom) || !isDay(usageTo)) return null;
+    const [first, last] = usageFrom <= usageTo ? [usageFrom, usageTo] : [usageTo, usageFrom];
+    const end = dayStart(last);
+    return { from: dayStart(first).valueOf(), to: new Date(end.getFullYear(), end.getMonth(), end.getDate() + 1).valueOf() };
+  }
+  return null;
+}
+function formatDay(ms, withYear) {
+  const options = withYear ? { year: "numeric", month: "short", day: "numeric" } : { month: "short", day: "numeric" };
+  try { return new Intl.DateTimeFormat(CURRENT_LANG, options).format(new Date(ms)); } catch { return dayKey(new Date(ms)); }
+}
+/** What the usage numbers cover, in words: "Last hour · …" or "Oct 14 – Oct 20 · Records start Oct 12". */
+function usageCaption(range, earliest) {
+  if (!range) return `${t("logs.lastHour")} · ${t("logs.polling")}`;
+  const firstRecord = earliest ? new Date(earliest).valueOf() : NaN;
+  // "All" starts where the records do; any other period that starts before them says so.
+  const start = usagePeriod === "all" && Number.isFinite(firstRecord) ? firstRecord : range.from;
+  const end = Math.max(start, Math.min(range.to, Date.now()) - 1);
+  const year = new Date().getFullYear();
+  const withYear = new Date(start).getFullYear() !== year || new Date(end).getFullYear() !== year;
+  const first = formatDay(start, withYear);
+  const last = formatDay(end, withYear);
+  const parts = [first === last ? first : `${first} – ${last}`];
+  if (usagePeriod !== "all" && Number.isFinite(firstRecord) && firstRecord > range.from) parts.push(t("logs.since", { date: formatDay(firstRecord, withYear) }));
+  return parts.join(" · ");
+}
+function renderPeriodControl() {
+  const control = $("#logs-period");
+  control.replaceChildren(...USAGE_PERIODS.map((period) => {
+    const on = period === usagePeriod;
+    return el("button", { type: "button", class: on ? "active" : "", role: "radio", "aria-checked": String(on), text: t(`logs.period.${period}`), onclick: () => pickPeriod(period) });
+  }));
+  $("#logs-custom").hidden = usagePeriod !== "custom";
+}
+function pickPeriod(period) {
+  if (period === usagePeriod) return;
+  usagePeriod = period;
+  if (period === "custom") {
+    // A first custom range starts as the last seven days, so both fields hold something to adjust.
+    if (!isDay(usageFrom)) usageFrom = dayKey(daysAgo(6));
+    if (!isDay(usageTo)) usageTo = dayKey(daysAgo(0));
+    fillCustomDates();
+  }
+  saveUsage();
+  renderPeriodControl();
+  void refreshRequests();
+}
+// Written only on load and when the period becomes custom: the 3-second refresh never touches these
+// fields, so a date being typed is not reset under the cursor.
+function fillCustomDates() {
+  const today = dayKey(daysAgo(0));
+  for (const [selector, value] of [["#logs-from", usageFrom], ["#logs-to", usageTo]]) {
+    const input = $(selector);
+    input.value = value;
+    input.max = today;
+  }
+}
+for (const selector of ["#logs-from", "#logs-to"]) {
+  $(selector).addEventListener("change", () => {
+    const from = $("#logs-from").value;
+    const to = $("#logs-to").value;
+    if (!isDay(from) || !isDay(to)) return;
+    usageFrom = from;
+    usageTo = to;
+    saveUsage();
+    void refreshRequests();
+  });
+}
+renderPeriodControl();
+fillCustomDates();
+
+const EMPTY_BUCKET = { count: 0, ok: 0, failed: 0, input: 0, cached: 0, cacheWrite: 0, output: 0, avgMs: 0, cacheHitPercent: 0 };
 function renderSummary(summary) {
-  const total = summary && summary.total || { count: 0, ok: 0, failed: 0, input: 0, cached: 0, output: 0, avgMs: 0, cacheHitPercent: 0 };
+  const providers = (summary && summary.providers) || {};
+  const total = (requestProvider ? providers[requestProvider] : summary && summary.total) || EMPTY_BUCKET;
   $("#logs-summary").replaceChildren(
     summaryChip(t("logs.summary.requests"), formatNumber(total.count)),
     summaryChip(t("logs.summary.success"), `${formatNumber(total.ok)} / ${formatNumber(total.failed)}`),
@@ -3123,17 +4080,70 @@ function renderSummary(summary) {
     summaryChip(t("logs.summary.output"), formatNumber(total.output)),
     summaryChip(t("logs.summary.duration"), formatSeconds(total.avgMs)),
   );
+  fitSummaryValues();
+}
+// A long period runs the input to ten digits and the requests to "52,939 / 310", wider than a chip
+// in a 1,024px window (2026-10-20): a value that overflows steps its type down before it ellipsizes.
+function fitSummaryValues() {
+  for (const value of document.querySelectorAll("#logs-summary .logs-chip .value")) {
+    value.style.fontSize = "";
+    for (let size = parseFloat(getComputedStyle(value).fontSize); value.scrollWidth > value.clientWidth && size > 14; size--) value.style.fontSize = `${size - 1}px`;
+    // A pane about 300px wide fits no ten digits even then: a plain number goes compact ("78.9억"),
+    // the whole of it on hover. The next refresh draws it whole again.
+    const whole = value.dataset.whole || value.textContent;
+    const number = Number(whole.replace(/,/g, ""));
+    if (value.scrollWidth > value.clientWidth && whole.includes(",") && Number.isFinite(number)) {
+      value.dataset.whole = whole;
+      value.title = whole;
+      value.textContent = new Intl.NumberFormat(CURRENT_LANG, { notation: "compact", maximumFractionDigits: 1 }).format(number);
+    }
+  }
 }
-function renderProviderFilter(records) {
-  const select = $("#logs-provider");
+window.addEventListener("resize", fitSummaryValues);
+// Every provider that is configured or shows up in the usage or the requests, not only the ones in
+// the last 200 requests: those were all one provider for a heavy user, so the menu offered nothing
+// else (2026-10-20). The chosen provider stays listed even before anything names it.
+function renderProviderFilter(summary, records) {
+  const configured = (currentConfig && currentConfig.providers) || configuredProviders || (status && status.providers) || {};
+  for (const name of Object.keys(configured)) knownRequestProviders.add(name);
+  for (const name of Object.keys((summary && summary.providers) || {})) knownRequestProviders.add(name);
+  for (const model of (summary && Array.isArray(summary.models) ? summary.models : [])) if (model.provider) knownRequestProviders.add(model.provider);
   for (const record of records) if (record.provider) knownRequestProviders.add(record.provider);
+  if (requestProvider) knownRequestProviders.add(requestProvider);
   const names = [...knownRequestProviders].sort();
-  const before = select.value;
-  select.replaceChildren(el("option", { value: "", text: t("logs.all") }));
-  for (const name of names) select.appendChild(el("option", { value: name, text: name }));
-  select.value = names.includes(requestProvider) ? requestProvider : "";
-  if (!names.includes(requestProvider)) requestProvider = "";
-  if (before && before !== select.value) select.value = requestProvider;
+  // Rebuilt only when the list changes, so the 3-second refresh does not close an open menu.
+  const key = names.join("\n");
+  const select = $("#logs-provider");
+  if (key !== renderedProviderNames) {
+    renderedProviderNames = key;
+    select.replaceChildren(el("option", { value: "", text: t("logs.all") }), ...names.map((name) => el("option", { value: name, text: name })));
+  }
+  if (select.value !== requestProvider) select.value = requestProvider;
+}
+async function loadConfiguredProviders() {
+  if (configuredProviders || currentConfig) return;
+  try { configuredProviders = (await api("/api/config")).providers || {}; } catch { /* the usage and requests still name their providers */ }
+}
+function modelUsageRow(entry) {
+  const total = totalInputOf(entry);
+  const model = el("div", { class: "request-models" }, [
+    el("span", { class: "model", text: entry.model, title: entry.model }),
+    el("span", { class: `provider-badge ${providerClass(entry.provider)}`, text: entry.provider }),
+  ]);
+  // The labels show only where a narrow window drops the header row.
+  return el("tr", {}, [
+    el("td", { class: "c-model" }, [model]),
+    el("td", { class: "c-count", "data-label": t("logs.th.count") }, [formatNumber(entry.count)]),
+    el("td", { class: "c-in", "data-label": t("logs.th.input") }, [el("span", { class: "token-cell", text: formatNumber(total) }, [el("span", { class: "cache-pill", text: t("logs.cacheHit", { percent: entry.cacheHitPercent || 0 }) })])]),
+    el("td", { class: "c-out", "data-label": t("logs.th.output") }, [formatNumber(entry.output)]),
+    el("td", { class: "c-dur", "data-label": t("logs.th.avg") }, [formatSeconds(entry.avgMs)]),
+  ]);
+}
+function renderModelUsage(summary) {
+  const models = (summary && Array.isArray(summary.models) ? summary.models : []).filter((entry) => !requestProvider || entry.provider === requestProvider);
+  $("#models-table tbody").replaceChildren(...models.map(modelUsageRow));
+  $("#models-table").closest(".logs-table-card").hidden = models.length === 0;
+  $("#models-empty").hidden = models.length !== 0;
 }
 /** Everything the model read: uncached, read from the cache, and written to it. */
 function totalInputOf(usage) {
@@ -3184,25 +4194,39 @@ function requestRow(record) {
   return row;
 }
 function renderRequests(records) {
-  const scroll = $(".logs-table-card");
+  const scroll = $("#requests-table").closest(".logs-table-card");
   const left = scroll.scrollLeft;
   const tbody = $("#requests-table tbody");
   tbody.replaceChildren(...records.flatMap((record) => expandedRequestId === record.id ? [requestRow(record), requestDetail(record)] : [requestRow(record)]));
-  $("#requests-table").closest(".logs-table-card").hidden = records.length === 0;
+  scroll.hidden = records.length === 0;
   $("#requests-empty").hidden = records.length !== 0;
   scroll.scrollLeft = left;
 }
 async function refreshRequests() {
   if (logsPanel !== "requests") return;
-  try {
-    const suffix = requestProvider ? `&provider=${encodeURIComponent(requestProvider)}` : "";
-    const kind = "&kind=messages";
-    const [records, summary, allRecords] = await Promise.all([api(`/api/requests?n=200${suffix}${kind}`), api("/api/requests/summary?since=3600"), api("/api/requests?n=200")]);
-    requestRows = Array.isArray(records.requests) ? records.requests : [];
-    renderProviderFilter(Array.isArray(allRecords.requests) ? allRecords.requests : requestRows);
-    renderSummary(summary);
+  // A period or provider picked while an older refresh is in flight must not be painted over by it.
+  const generation = ++requestsGeneration;
+  const provider = requestProvider;
+  const range = usageRange();
+  // A custom range with an unusable date waits for the fields instead of falling back to the hour.
+  if (usagePeriod === "custom" && !range) return;
+  $("#logs-range-caption").textContent = usageCaption(range, lastSummary && lastSummary.earliest);
+  const summaryPath = range ? `/api/requests/summary?from=${range.from}&to=${range.to}` : "/api/requests/summary?since=3600";
+  const suffix = provider ? `&provider=${encodeURIComponent(provider)}` : "";
+  const [records, summary] = await Promise.allSettled([api(`/api/requests?n=200${suffix}&kind=messages`), api(summaryPath), loadConfiguredProviders()]);
+  if (generation !== requestsGeneration) return;
+  // Each half keeps its last good contents when its own call fails.
+  if (summary.status === "fulfilled") {
+    lastSummary = summary.value;
+    $("#logs-range-caption").textContent = usageCaption(range, lastSummary.earliest);
+    renderSummary(lastSummary);
+    renderModelUsage(lastSummary);
+  }
+  if (records.status === "fulfilled") {
+    requestRows = Array.isArray(records.value.requests) ? records.value.requests : [];
     renderRequests(requestRows);
-  } catch { /* preserve the last successful request table */ }
+  }
+  renderProviderFilter(lastSummary, requestRows);
 }
 async function refreshLogs() {
   if (logsPanel !== "raw") return;