clauderipple 0.11.0 → 0.12.0

package/dist/ui/app.js

@@ -291,19 +291,48 @@ async function refreshHealth() {
   if (clientsLoaded) renderClients();
   if (modState.settings) renderModNotice();
   const details = $("#health-details");
-  details.replaceChildren(
+  modRedraw(details, [
     versionRow(),
+    autoUpdateRow(),
     // Which files answer, and since when: the only way to see that an update actually replaced the router.
     ...(status.runtime ? [cell(t("health.runtime"), null, [el("span", { class: "cell-sub mono", text: status.runtime.router || "?" }), new Date(status.runtime.startedAt).toLocaleString()])] : []),
     el("div", { class: "row" }, [el("span", { class: "k", text: t("health.routes") }), el("span", { class: "v", text: String(status.routes) })]),
     el("div", { class: "row" }, [el("span", { class: "k", text: t("health.cli") }), el("span", { class: "v", text: status.cliVersion })]),
-  );
+  ]);
 }
 
 // The update check runs on a click, not with the 5-second refresh: it asks the npm registry. What an
 // update means depends on how this copy was installed, so the router's CLI decides and runs it; the
 // router restarts on the new version and the served-files check above reloads this page.
 let updateState = { busy: false, check: null };
+let autoUpdateSaving = false;
+function autoUpdateRow() {
+  const control = modSwitch("auto-update", status.autoUpdate?.enabled !== false, t("update.auto"), toggleAutoUpdate);
+  control.querySelector("input").disabled = autoUpdateSaving || !status.autoUpdate;
+  return cell(t("update.auto"), control, t("update.autoHelp"));
+}
+async function toggleAutoUpdate(enabled) {
+  if (autoUpdateSaving) return;
+  autoUpdateSaving = true;
+  const input = document.querySelector('[data-key="auto-update"]');
+  if (input) input.disabled = true;
+  try {
+    // Do not use latestConfig's stale fallback for an automatic-install preference.
+    const next = await api("/api/config");
+    next.autoUpdate = enabled;
+    await configRequest(next);
+    currentConfig = next;
+    if (status.autoUpdate) status.autoUpdate.enabled = enabled;
+    toast(t("common.saved"));
+  } catch (error) {
+    toast(t("common.saveFailed"), true, error.message);
+  } finally {
+    autoUpdateSaving = false;
+    await refreshHealth();
+    const current = document.querySelector('[data-key="auto-update"]');
+    if (current) { current.disabled = !status.autoUpdate; current.checked = status.autoUpdate?.enabled !== false; }
+  }
+}
 function versionRow() {
   const check = updateState.check;
   // The version reads as the row's label; what the update check found sits under it, the action on the right.
@@ -867,11 +896,25 @@ function providerCannotSearch(name, model) {
   return !(Array.isArray(entry.webSearchModels) && entry.webSearchModels.includes(id));
 }
 
+// The web search row names a provider as well as a model: one id can be offered by two providers
+// and only one of them may be able to run a search. JSON keeps the two apart whatever they contain.
+function webSearchChoice(provider, model) { return JSON.stringify([provider, model]); }
+function parseWebSearchChoice(value) {
+  if (!value) return null;
+  try {
+    const [provider, model] = JSON.parse(value);
+    return typeof provider === "string" && typeof model === "string" ? { provider, model } : null;
+  } catch { return null; }
+}
+
 function renderModelSlots() {
   const rows = $("#client-model-slots");
   if (!rows) return;
   const chosen = (currentConfig.cli && currentConfig.cli.models) || {};
-  rows.replaceChildren(...MODEL_SLOTS.map((slot) => {
+  // With a web search backend set, the search is intercepted before routing and never reaches
+  // `smallFast`, so the "no web search here" label there would be false.
+  const searchIntercepted = Boolean(currentConfig.webSearch);
+  const nodes = MODEL_SLOTS.map((slot) => {
     const select = el("select", {});
     select.appendChild(el("option", { value: "", text: t("slots.slotDefault") }));
     for (const group of groupedModels(currentConfig)) for (const model of group.models) {
@@ -879,7 +922,7 @@ function renderModelSlots() {
       if (chosen[slot] === model.id) option.selected = true;
       // `smallFast` is what a WebSearch runs on, so an inability to search is fatal there and
       // merely worth knowing everywhere else.
-      if (slot === "smallFast" && providerCannotSearch(group.name, model.id)) {
+      if (slot === "smallFast" && !searchIntercepted && providerCannotSearch(group.name, model.id)) {
         option.textContent += ` — ${t("slots.noWebSearch")}`;
       }
       select.appendChild(option);
@@ -894,7 +937,55 @@ function renderModelSlots() {
     select.dataset.slot = slot;
     select.setAttribute("aria-label", t(`slots.slot.${slot}`));
     return cell(t(`slots.slot.${slot}`), select, t(`slots.slotHelp.${slot}`), "slot-row");
-  }));
+  });
+  nodes.push(renderWebSearchSlot());
+  rows.replaceChildren(...nodes);
+}
+
+// The backend `cfg.webSearch` names answers the search instead of the `smallFast` slot. Only the
+// router knows which models it can actually search with — that comes from `/api/status`, never
+// from a model's name — so an unsearchable model is not offered here at all.
+function renderWebSearchSlot() {
+  const saved = currentConfig.webSearch || null;
+  const select = el("select", {});
+  select.appendChild(el("option", { value: "", text: t("slots.webSearchFollow") }));
+  let found = false;
+  for (const group of groupedModels(currentConfig)) for (const model of group.models) {
+    if (providerCannotSearch(group.name, model.id)) continue;
+    // A Claude account searches on its own when routed to, but `serveWebSearch` has no backend for
+    // that provider kind: named here, the search would quietly fall back to `smallFast`.
+    if (currentConfig.providers[group.name] && currentConfig.providers[group.name].type === "anthropic") continue;
+    const option = el("option", { value: webSearchChoice(group.name, model.id), text: `${labelOf(model)} · ${group.name}` });
+    if (saved && saved.provider === group.name && saved.model === model.id) { option.selected = true; found = true; }
+    select.appendChild(option);
+  }
+  // A backend the config names but no provider can run any more must not read as "follows the
+  // small, fast model" — that would silently change where the search goes.
+  if (saved && !found) {
+    const orphan = el("option", { value: webSearchChoice(saved.provider, saved.model), text: `${saved.provider} / ${saved.model} (?)` });
+    orphan.selected = true;
+    select.appendChild(orphan);
+  }
+  select.onchange = () => void saveWebSearch(select.value);
+  select.dataset.webSearch = "true";
+  select.setAttribute("aria-label", t("slots.webSearch"));
+  return cell(t("slots.webSearch"), select, t("slots.webSearchHelp"), "slot-row");
+}
+
+async function saveWebSearch(value) {
+  if (!currentConfig) return;
+  const next = clone(await latestConfig());
+  const picked = parseWebSearchChoice(value);
+  // `webSearch` is the only setting this row owns; an existing `maxResults` survives the change.
+  const maxResults = (next.webSearch && next.webSearch.maxResults) ?? (currentConfig.webSearch && currentConfig.webSearch.maxResults);
+  if (picked) next.webSearch = { provider: picked.provider, model: picked.model, ...(maxResults !== undefined ? { maxResults } : {}) };
+  else delete next.webSearch;
+  try {
+    await configRequest(next);
+    currentConfig = next;
+    renderModelSlots();
+    toast(t("slots.webSearchSaved"));
+  } catch (error) { toast(t("common.saveFailed"), true, error.message); }
 }
 
 async function saveModelSlots() {
@@ -904,15 +995,17 @@ async function saveModelSlots() {
   // remove the env key, and the router tells "clear this" from "leave this alone" by whether the
   // slot is present at all — so dropping empty values here would make the choice a silent no-op.
   const models = {};
-  for (const select of $all("#client-model-slots select")) models[select.dataset.slot] = select.value;
+  // Only the three slot rows: the web search row below them writes `webSearch`, not a slot.
+  for (const select of $all("#client-model-slots select[data-slot]")) models[select.dataset.slot] = select.value;
   next.cli = { ...(next.cli || {}), models };
   try {
     await configRequest(next);
     currentConfig = next;
     // Saying "saved" over a choice that will make every search fail is the same silent no-op this
     // screen was already guilty of once. The label on the option warns before the fact; this catches
-    // a session that already had it selected.
-    const owners = models.smallFast ? providersOffering(next, models.smallFast) : [];
+    // a session that already had it selected. With a web search backend set the search never
+    // reaches `smallFast`, so there is nothing to warn about.
+    const owners = models.smallFast && !next.webSearch ? providersOffering(next, models.smallFast) : [];
     if (owners.length && providerCannotSearch(owners[0], models.smallFast)) toast(t("slots.noWebSearchWarn"), true);
     else toast(t("slots.slotSaved"));
   } catch (error) { toast(t("common.saveFailed"), true, error.message); }
@@ -1039,6 +1132,36 @@ async function showPhoneQr(button) {
   } catch { if (generation === phoneQrGeneration) toast(t("common.loadFailed"), true); }
   finally { button.disabled = false; }
 }
+// Ripple Remote in the stores. iPhone links to the storefront of the dashboard's language, as the
+// README headers do; Android is a closed test on Google Play, joined through Discord, so no Play link.
+const REMOTE_STOREFRONT = { ko: "kr", en: "us", zh: "us", ja: "jp", es: "es", pt: "br" };
+/** Read when drawn, not at load: this block is also evaluated on its own by the phone tests. */
+function remoteAppStoreUrl() { return `https://apps.apple.com/${REMOTE_STOREFRONT[CURRENT_LANG] || "us"}/app/id6823063731`; }
+const COMMUNITY_URL = "https://discord.gg/R8ZgGSNHjw";
+function externalLink(href, cls, children) { return el("a", { class: cls, href, target: "_blank", rel: "noopener noreferrer" }, children); }
+function phonePaired(data) { return Boolean(data && data.hostRunning && data.phones && data.phones.length); }
+function remoteAndroidNote(cls) { return el("span", { class: `${cls} remote-android` }, [t("phone.promo.android"), " · ", externalLink(COMMUNITY_URL, "login-link", [t("phone.promo.androidLink")])]); }
+/** No phone paired yet: what the app does that nothing else does, the store, and how the QR below fits in. */
+function remotePromo(data) {
+  const points = ["models", "hours", "private"].map(key => el("li", {}, [el("strong", { text: t(`phone.promo.${key}`) }), " ", t(`phone.promo.${key}Body`)]));
+  const phoneGlyph = svgIcon("0 0 20 20", ["M7 2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z", "M8.5 14.8h3"]);
+  const download = svgIcon("0 0 20 20", ["M10 3.5v9", "M6.2 9l3.8 3.8L13.8 9", "M4.5 16.5h11"], "remote-store-icon");
+  // Its own lang, so Korean wraps between words in a browser too (the app sets it on <html>).
+  return el("section", { class: "conn-card remote-promo", lang: CURRENT_LANG }, [
+    el("div", { class: "conn-hero" }, [el("div", { class: "conn-icon" }, [phoneGlyph]), el("div", { class: "conn-hero-text" }, [
+      el("p", { class: "remote-eyebrow", text: t("phone.promo.eyebrow") }),
+      el("h2", { class: "conn-title", text: t("phone.promo.title") }),
+      el("p", { class: "conn-lead", text: t("phone.promo.lead") }),
+    ])]),
+    el("ul", { class: "remote-points" }, points),
+    el("div", { class: "remote-get" }, [externalLink(remoteAppStoreUrl(), "btn large remote-store", [download, t("phone.promo.appStore")]), remoteAndroidNote("hint")]),
+    el("p", { class: "remote-next", text: t(data.hostRunning ? "phone.promo.nextQr" : "phone.promo.nextHost") }),
+  ]);
+}
+/** A phone is paired already: one quiet row for the next phone instead of the pitch. */
+function remoteGetApp() {
+  return section(null, [cell(t("phone.promo.compact"), externalLink(remoteAppStoreUrl(), "btn secondary compact", [t("phone.promo.appStoreShort")]), [remoteAndroidNote("cell-sub")])]);
+}
 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}`),
@@ -1106,8 +1229,8 @@ function phoneControls(data) {
   });
   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"))];
+  return [section(t("phone.pairing"), [cell(t("phone.scan"), qr, t("phone.scanHelp")), el("div", { id: "phone-qr", class: "phone-qr" })], [t("phone.qrWarning"), !data.reachableFromPhone ? t("phone.unreachable") : null]),
+    phoneSettings(data), phoneRestart(), phones, phonePaired(data) ? remoteGetApp() : null, section(null, [rotate], t("phone.sharedKey"))].filter(Boolean);
 }
 async function refreshPhone(rebuild = false) {
   if (!phoneActive() || offline()) return;
@@ -1115,11 +1238,12 @@ async function refreshPhone(rebuild = false) {
   try {
     const data = await api("/api/phone/status");
     if (generation !== phoneGeneration || !phoneActive()) return;
-    if (rebuild || !phoneSnapshot || phoneSnapshot.hostRunning !== data.hostRunning) {
+    // Pairing the first phone (or unpairing the last) swaps the pitch for its one-row form, so it rebuilds too.
+    if (rebuild || !phoneSnapshot || phoneSnapshot.hostRunning !== data.hostRunning || phonePaired(phoneSnapshot) !== phonePaired(data)) {
       hidePhoneQr();
       const state = section(t("phone.status"), []);
       $(".group", state).id = "phone-status";
-      $("#phone-content").replaceChildren(state, ...(data.hostRunning ? phoneControls(data) : []));
+      $("#phone-content").replaceChildren(...(phonePaired(data) ? [] : [remotePromo(data)]), state, ...(data.hostRunning ? phoneControls(data) : []));
     }
     phoneSnapshot = data;
     renderPhoneStatus(data);
@@ -3263,6 +3387,11 @@ const MOD_CLAUDE_MODELS = ["haiku", "sonnet", "opus", "fable"];
 const MOD_CLAUDE_IDS = { haiku: "claude-haiku-5-5", sonnet: "claude-sonnet-5-5", opus: "claude-opus-5-5", fable: "claude-fable-5-1" };
 // The four workers, low to max (the mod's rung ids: light, standard, hard, plan).
 const MOD_RUNGS = ["light", "standard", "hard", "plan"];
+// A domain ladder has two levels: the light pair (light+standard) and the heavy pair (hard+plan).
+const MOD_DOMAIN_LEVELS = [
+  { key: "light", rungs: ["light", "standard"] },
+  { key: "heavy", rungs: ["hard", "plan"] },
+];
 const modClaude = (model, effort) => ({ target: { agent: "general-purpose", model }, effort });
 /** The mod's defaults (packages/mod/hooks/settings.ts), for a router that has stored nothing yet. */
 const MOD_DEFAULTS = {
@@ -3274,7 +3403,7 @@ const MOD_DEFAULTS = {
       hard: [{ target: { agent: "gpt-6-astra" }, effort: "high" }], plan: [modClaude("opus", "high")],
     } },
   },
-  allow: [], allowKnown: [], modes: [], providers: {},
+  allow: [], allowKnown: [], modes: [], delegation: "normal", providers: {},
   fallback: { agent: "general-purpose", model: "sonnet" },
   keepWarm: false, keepWarmHours: 2, keepWarmMinTokens: 30000,
   compactWith: "haiku", handoffSkill: "", handoffAfter: "continue", handoffButton: "advised",
@@ -3637,6 +3766,16 @@ function modRungs() {
   const general = modState.settings.rules.general;
   return general && general.mode === "ladder" && general.rungs ? general.rungs : {};
 }
+/** A domain ladder folded into two levels: light+standard hold one list, hard+plan another.
+ * The upper rung of each pair wins; an empty upper rung falls back to the lower. */
+function modTwoLevelRungs(rungs) {
+  const out = {};
+  const light = rungs.standard && rungs.standard.length ? rungs.standard : rungs.light;
+  const heavy = rungs.plan && rungs.plan.length ? rungs.plan : rungs.hard;
+  if (light && light.length) { out.light = clone(light); out.standard = clone(light); }
+  if (heavy && heavy.length) { out.hard = clone(heavy); out.plan = clone(heavy); }
+  return out;
+}
 /** One menu of `model · effort` for the ticked models, effort limited to what each model takes; the session's model too. */
 function modPickSelect(key, step, shown, label, onPick) {
   const choices = modChoices().filter((choice) => choice.value === "general-purpose" || modTicked(choice));
@@ -3657,38 +3796,101 @@ function modPickSelect(key, step, shown, label, onPick) {
     onPick(modTargetOf(value.slice(0, bar)), value.slice(bar + 1));
   }, "rung-model");
 }
-function modRungRows(mode) {
+/** @typedef {"general" | "ui" | "backend"} WorkerRuleKey */
+/** Domain selection is local UI state, independently retained for each saved worker set.
+ * @type {Map<string, WorkerRuleKey>}
+ */
+const modRuleTabs = new Map();
+/** Save only this set's optional rule; deleting it makes the set follow its own general ladder.
+ * @param {import("../mod/types").Mode | undefined} mode
+ * @param {"ui" | "backend"} key
+ * @param {import("../mod/types").Rule | undefined} rule
+ */
+function modSetDomainRule(mode, key, rule) {
+  const domainRules = { ...(mode || modState.settings).domainRules };
+  if (rule) domainRules[key] = rule;
+  else delete domainRules[key];
+  const change = { domainRules: Object.keys(domainRules).length ? domainRules : undefined };
+  if (mode) modUpdateMode(mode.id, change);
+  else modPatch(change);
+}
+/** @param {import("../mod/types").Mode} [mode] */
+function modWorkerRows(mode) {
+  const id = mode ? mode.id : "base";
+  const key = modRuleTabs.get(id) || "general";
+  const rule = key === "general" ? null : (mode || modState.settings).domainRules?.[key];
+  const rows = [cell(t("mod.workerDomain"), modSegmented(`worker-domain:${id}`, [
+    { value: "general", label: t("mod.domain.general") },
+    { value: "ui", label: t("mod.domain.ui") },
+    { value: "backend", label: t("mod.domain.backend") },
+  ], key, t("mod.workerDomain"), (value) => { modRuleTabs.set(id, value); modRefresh(); }), null, "wide")];
+  if (key !== "general") rows.push(cell(t("mod.domainSeparate"), modSwitch(`worker-separate:${id}:${key}`, !!rule, t("mod.domainSeparate"), (on) => {
+    // Switching on copies the set's general rungs, folded the same way a domain ladder is.
+    modSetDomainRule(mode, key, on ? { mode: "ladder", rungs: modTwoLevelRungs(mode ? mode.rungs : modRungs()) } : undefined);
+  }), rule ? null : t("mod.domainFollowsGeneral"), "wide"));
+  if (key === "general" || rule) rows.push(...modRungRows(mode, key));
+  return rows;
+}
+/** One rung row: the ordered model·effort list of a rung, with reorder, remove and add.
+ * @param {import("../mod/types").Mode | undefined} mode
+ * @param {WorkerRuleKey} ruleKey
+ * @param {string} rowKey the row's own key (its part in the data-keys)
+ * @param {string} name the row's label
+ * @param {string} hintKey the i18n key of the line under it
+ * @param {import("../mod/types").Step[]} steps the list it shows
+ * @param {(next: import("../mod/types").Step[]) => void} save writes the list back
+ */
+function modRungRow(mode, ruleKey, rowKey, name, hintKey, steps, save) {
+  const key = `worker:${mode ? mode.id : "base"}:${ruleKey}:${rowKey}`;
+  const rows = steps.map((step, index) => {
+    const choice = modChoiceOf(step.target);
+    const shown = modNearest(step.effort, modLadderOf(choice));
+    const select = modPickSelect(`${key}:${index}`, step, shown, `${name} ${index + 1}`, (target, effort) => save(steps.map((item, at) => at === index ? { target, effort } : item)));
+    const move = (delta) => { const next = [...steps]; [next[index], next[index + delta]] = [next[index + delta], next[index]]; save(next); };
+    const button = (suffix, text, label, disabled, onclick) => el("button", { type: "button", class: "btn secondary compact", "data-key": `${key}:${suffix}`, text, "aria-label": label, ...(disabled ? { disabled: "" } : {}), onclick });
+    return el("li", { class: "rung-item" }, [
+      select,
+      el("div", { class: "rung-actions" }, [
+        button("up", "↑", t("mod.modeMoveUp"), index === 0, () => move(-1)),
+        button("down", "↓", t("mod.modeMoveDown"), index === steps.length - 1, () => move(1)),
+        button("remove", "✕", t("common.remove"), steps.length <= 1, () => save(steps.filter((_, at) => at !== index))),
+      ]),
+      choice && !choice.usable ? el("small", { class: "warn-text", text: t("mod.rungUnusable") }) : null,
+    ]);
+  });
+  const add = el("button", { type: "button", class: "btn secondary compact", "data-key": `worker-add:${mode ? mode.id : "base"}:${ruleKey}:${rowKey}`, text: t("mod.modeAddModel"), onclick: () => {
+    const choice = modChoices().find((item) => item.value !== "general-purpose" && modTicked(item)) || modChoices().at(-1);
+    save([...steps, { target: modTargetOf(choice.value), effort: modNearest("medium", modLadderOf(choice)) }]);
+  } });
+  return cell(el("span", { class: "cell-label strong", text: name }), el("div", { class: "rung-list" }, [el("ol", {}, rows), add]), modCap(t(hintKey)), "wide rung-row");
+}
+/** The same ordered-rung editor for the selected rule in Base or a saved mode: the general ladder
+ * keeps its four rungs, a domain ladder its two levels.
+ * @param {import("../mod/types").Mode | undefined} mode
+ * @param {WorkerRuleKey} [ruleKey]
+ */
+function modRungRows(mode, ruleKey = "general") {
+  if (ruleKey !== "general") {
+    const rungs = (mode || modState.settings).domainRules[ruleKey].rungs;
+    return MOD_DOMAIN_LEVELS.map((level) => {
+      // The pair's upper rung shows the list; an edit writes it to both rungs of the pair.
+      const upper = level.rungs[1];
+      const steps = rungs[upper] && rungs[upper].length ? rungs[upper] : (rungs[level.rungs[0]] || []);
+      const save = (next) => {
+        const updated = { ...rungs, [level.rungs[0]]: clone(next), [upper]: clone(next) };
+        modSetDomainRule(mode, ruleKey, { mode: "ladder", rungs: updated });
+      };
+      return modRungRow(mode, ruleKey, level.key, t(`mod.domainLevel.${level.key}`), `mod.domainHint.${ruleKey}.${level.key}`, steps, save);
+    });
+  }
   const rungs = mode ? mode.rungs : modRungs();
   return MOD_RUNGS.map((rung) => {
-    const steps = rungs[rung] || [];
-    const name = t(`mod.rung.${rung}`);
     const save = (next) => {
       const updated = { ...rungs, [rung]: next };
       if (mode) modUpdateMode(mode.id, { rungs: updated });
       else modSetRule("general", { mode: "ladder", rungs: updated });
     };
-    const rows = steps.map((step, index) => {
-      const choice = modChoiceOf(step.target);
-      const shown = modNearest(step.effort, modLadderOf(choice));
-      const key = `worker:${mode ? mode.id : "base"}:${rung}:${index}`;
-      const select = modPickSelect(key, step, shown, `${name} ${index + 1}`, (target, effort) => save(steps.map((item, at) => at === index ? { target, effort } : item)));
-      const move = (delta) => { const next = [...steps]; [next[index], next[index + delta]] = [next[index + delta], next[index]]; save(next); };
-      const button = (suffix, text, label, disabled, onclick) => el("button", { type: "button", class: "btn secondary compact", "data-key": `${key}:${suffix}`, text, "aria-label": label, ...(disabled ? { disabled: "" } : {}), onclick });
-      return el("li", { class: "rung-item" }, [
-        select,
-        el("div", { class: "rung-actions" }, [
-          button("up", "↑", t("mod.modeMoveUp"), index === 0, () => move(-1)),
-          button("down", "↓", t("mod.modeMoveDown"), index === steps.length - 1, () => move(1)),
-          button("remove", "✕", t("common.remove"), steps.length <= 1, () => save(steps.filter((_, at) => at !== index))),
-        ]),
-        choice && !choice.usable ? el("small", { class: "warn-text", text: t("mod.rungUnusable") }) : null,
-      ]);
-    });
-    const add = el("button", { type: "button", class: "btn secondary compact", "data-key": `worker-add:${mode ? mode.id : "base"}:${rung}`, text: t("mod.modeAddModel"), onclick: () => {
-      const choice = modChoices().find((item) => item.value !== "general-purpose" && modTicked(item)) || modChoices().at(-1);
-      save([...steps, { target: modTargetOf(choice.value), effort: modNearest("medium", modLadderOf(choice)) }]);
-    } });
-    return cell(el("span", { class: "cell-label strong", text: name }), el("div", { class: "rung-list" }, [el("ol", {}, rows), add]), modCap(t(`mod.rungHint.${rung}`)), "wide rung-row");
+    return modRungRow(mode, ruleKey, rung, t(`mod.rung.${rung}`), `mod.rungHint.${rung}`, rungs[rung] || [], save);
   });
 }
 /** Said once after settings that still held Auto or field rules are read: they became the four workers. */
@@ -3769,7 +3971,7 @@ function modNewMode() {
   const add = () => {
     const name = input.value.trim();
     if (!name) { toast(t("mod.modeNameRequired"), true); input.focus(); return; }
-    const mode = { id: `mode-${crypto.randomUUID()}`, name, rungs: clone(modRungs()), delegation: "normal", until: "none" };
+    const mode = { id: `mode-${crypto.randomUUID()}`, name, rungs: clone(modRungs()), ...(modState.settings.domainRules ? { domainRules: clone(modState.settings.domainRules) } : {}), delegation: "normal", until: "none" };
     modModeTab = mode.id;
     modPatch({ modes: [...modState.settings.modes, mode] });
   };
@@ -3821,7 +4023,7 @@ function modModeSection(mode) {
   const endHelp = kind === "reset" ? t("mod.modeResetHelp", { provider: modResetLabel(mode.until.reset) }) : null;
   return modSection(null, [
     cell(t("mod.modeName"), name),
-    ...modRungRows(mode),
+    ...modWorkerRows(mode),
     cell(t("mod.modeDelegation"), modSegmented("mode-delegation", [{ value: "normal", label: t("mod.modeNormal") }, { value: "eager", label: t("mod.modeEager") }], mode.delegation, t("mod.modeDelegation"), (delegation) => modUpdateMode(mode.id, { delegation })), null, "wide"),
     cell(t("mod.modeUntil"), el("div", { class: "mode-until" }, endControls), endHelp, "wide"),
     cell(t("mod.modeActive"), [
@@ -3842,7 +4044,10 @@ function modWorkersCard() {
     modModeTabs(),
     el("div", { id: "worker-tab-panel", role: "tabpanel" }, modModeTab === "+" ? [modNewMode()] : modModeTab ? [modModeSection(s.modes.find((mode) => mode.id === modModeTab))] : [
       modSection(t("mod.models"), modTickRows(), [t("mod.modelsHelp")]),
-      modSection(t("mod.fourWorkers"), modRungRows(), [t("mod.modeOrderHelp")]),
+      modSection(t("mod.fourWorkers"), modWorkerRows(), [t("mod.modeOrderHelp")]),
+      modSection(null, [
+        cell(t("mod.modeDelegation"), modSegmented("base-delegation", [{ value: "normal", label: t("mod.modeNormal") }, { value: "eager", label: t("mod.modeEager") }], s.delegation || "normal", t("mod.modeDelegation"), (delegation) => modPatch({ delegation })), t("mod.baseDelegationHelp"), "wide"),
+      ]),
       s.activeMode ? modSection(null, [cell(t("mod.modeActive"), el("button", { type: "button", class: "btn secondary compact", "data-key": "mode-base-on", text: t("mod.modeUseBase"), onclick: () => modSetActive("") }))]) : null,
     ].filter(Boolean)),
   ]);
@@ -4213,7 +4418,7 @@ async function refreshRequests() {
   $("#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()]);
+  const [records, summary] = await Promise.allSettled([api(`/api/requests?n=200${suffix}&kind=messages,image`), api(summaryPath), loadConfiguredProviders()]);
   if (generation !== requestsGeneration) return;
   // Each half keeps its last good contents when its own call fails.
   if (summary.status === "fulfilled") {