clauderipple 0.9.4 → 0.10.0

package/dist/ui/app.js

@@ -71,9 +71,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 +157,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,6 +203,8 @@ 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(); }
+  if (name === "phone") queueMicrotask(() => void loadPhone());
   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}`);
@@ -727,6 +737,125 @@ 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()) 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);
+
 // ---- Model links --------------------------------------------------------------------
 
 function claudeSelect(selected) {
@@ -1928,10 +2057,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 +2071,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 +2138,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 +2163,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 +2244,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 +2269,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 +2278,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 +2379,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 +2398,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 +2407,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 +2452,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 +2551,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 +2560,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 +2600,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 +2631,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 +2661,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 +2784,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 +2844,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 +3255,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 +3280,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 +3333,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 +3433,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 +3547,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;