@oharness/server 0.9.3 → 0.11.0

package/dist/page/client/routines.js

@@ -22,55 +22,180 @@ async function newRoutine() {
   input.setSelectionRange(input.value.length, input.value.length);
 }
 
-/** One run as a line: when, how it went, and what it cost. */
-function runSummary(run) {
-  const when = new Date(run.startedAt).toLocaleString();
-  if (run.skipped) return t("routines.skipped", { when });
-  const parts = [t(run.ok ? "routines.lastOk" : "routines.lastFailed", { when })];
-  if (run.catchUp) parts.push(t("routines.catchUp"));
-  parts.push(t("routines.turns", { n: run.turns }));
-  if (run.costUsd) parts.push("$" + run.costUsd.toFixed(4));
-  return parts.join(" · ");
+/** A span of time as someone reads it: 42s, 3m 05s, 1h 12m. */
+function runDuration(ms) {
+  const sec = Math.max(0, Math.round(ms / 1000));
+  if (sec < 60) return sec + "s";
+  const min = Math.floor(sec / 60);
+  if (min < 60) return min + "m " + String(sec % 60).padStart(2, "0") + "s";
+  return Math.floor(min / 60) + "h " + (min % 60) + "m";
+}
+
+/** The first line worth reading out of what a run said, or why it stopped. */
+function runExcerpt(run) {
+  const text = run.error || run.output || "";
+  const line = text.split("\n").map((one) => one.replace(/^[#>*\-\s]+/, "").trim()).find(Boolean) || "";
+  return line.length > 160 ? line.slice(0, 159) + "…" : line;
 }
 
 /**
- * A routine's past runs, fetched when opened.
+ * What the page remembers across repaints: which histories are folded away
+ * and which runs are open. The panel is rebuilt whenever a run starts or
+ * ends, and losing what someone had opened each time would make it unusable
+ * while a routine is going.
+ */
+const foldedHistories = new Set();
+const openRuns = new Set();
+const runKey = (routine, run) => routine.name + "\0" + run.startedAt;
+
+/**
+ * One run in the history: a status, when, how long, what it cost, and one
+ * line under it — what it is doing, while it runs; the start of its answer or
+ * its error, after. Clicking opens it in place to the whole of that text,
+ * with a way into its conversation.
+ */
+function routineRunRow(run, routine) {
+  const state = run.running ? "running" : run.skipped ? "skipped" : run.ok ? "ok" : "failed";
+  const key = runKey(routine, run);
+  const row = el("div", "routine-run " + state);
+  row.dataset.routine = routine.name;
+  const top = el("div", "routine-run-top");
+  top.appendChild(el("span", "run-status " + state, t("routines.status." + state)));
+  top.appendChild(el("span", null, new Date(run.startedAt).toLocaleString()));
+  const facts = el("span", "muted routine-run-facts");
+  if (run.running) {
+    const tick = () => {
+      if (!facts.isConnected && facts.dataset.painted) return clearInterval(timer);
+      facts.dataset.painted = "1";
+      const bits = [t("routines.elapsed", { d: runDuration(Date.now() - run.startedAt) })];
+      const turns = Number(row.dataset.turns || run.turns || 0);
+      if (turns) bits.push(t("routines.turns", { n: turns }));
+      facts.textContent = bits.join(" · ");
+    };
+    const timer = setInterval(tick, 1000);
+    tick();
+  } else if (!run.skipped) {
+    const bits = [runDuration(run.finishedAt - run.startedAt), t("routines.turns", { n: run.turns })];
+    if (run.costUsd) bits.push("$" + run.costUsd.toFixed(4));
+    if (run.catchUp) bits.push(t("routines.catchUp"));
+    facts.textContent = bits.join(" · ");
+  } else if (run.reason === "still-running") {
+    facts.textContent = t("routines.stillRunning");
+  }
+  top.appendChild(facts);
+  row.appendChild(top);
+
+  const full = run.running ? run.activity || "" : run.error || run.output || "";
+  const line = el("div", "routine-run-text" + (run.error ? " err" : " muted"),
+    run.running ? full || t("routines.starting") : runExcerpt(run));
+  row.appendChild(line);
+  if (!line.textContent) line.remove();
+
+  const detail = el("div", "routine-run-detail");
+  if (full && !run.running) {
+    // The answer as the conversation shows it; an error stays plain text.
+    const body = el("div", "routine-run-full" + (run.error ? " err" : " md"));
+    if (run.error) body.textContent = full;
+    else body.appendChild(renderMarkdown(full));
+    detail.appendChild(body);
+  }
+  if (run.sessionId) {
+    const open = el("button", "ghost small", t("routines.openRun"));
+    open.type = "button";
+    open.addEventListener("click", (event) => {
+      event.stopPropagation();
+      void openSession(run.sessionId, routine.cwd);
+    });
+    detail.appendChild(open);
+  }
+  if (!detail.childNodes.length) return row;
+
+  row.appendChild(detail);
+  row.tabIndex = 0;
+  row.setAttribute("role", "button");
+  const setOpen = (on) => {
+    row.classList.toggle("open", on);
+    row.setAttribute("aria-expanded", on ? "true" : "false");
+    if (on) openRuns.add(key); else openRuns.delete(key);
+  };
+  setOpen(openRuns.has(key));
+  row.addEventListener("click", (event) => {
+    // Selecting text in the full answer is reading it, not closing it.
+    if (String(getSelection() || "")) return;
+    if (event.target.closest(".routine-run-full") && row.classList.contains("open")) return;
+    setOpen(!row.classList.contains("open"));
+  });
+  row.addEventListener("keydown", (event) => {
+    if (event.target !== row || (event.key !== "Enter" && event.key !== " ")) return;
+    event.preventDefault();
+    setOpen(!row.classList.contains("open"));
+  });
+  return row;
+}
+
+/** How many runs a card shows before "Show all". */
+const RUNS_SHOWN = 5;
+
+/**
+ * A routine's runs, newest first, the one going now on top.
  *
- * Skipped times are listed with the runs, with why: a routine that "didn't
- * run" is the question this answers, and the answer is usually that the
- * previous run was still going. A run opens its session — the whole of what
- * the agent did, not the last paragraph of it.
+ * Open unless folded: whether it ran, and what came of it, is what anyone
+ * opening this page wants to know. Repainted whenever a run starts or ends,
+ * and patched in place as a running one moves on, so a run started here is
+ * on the page at once and turns into its result when it finishes.
  */
 function routineHistory(routine) {
-  const box = el("details", "routine-history");
-  box.appendChild(el("summary", "muted small", t("routines.history")));
+  const box = el("div", "routine-history");
+  const head = el("button", "routine-history-head muted small");
+  head.type = "button";
+  const label = el("span", null, t("routines.history"));
+  head.append(el("span", "chev", "▾"), label);
+  box.appendChild(head);
   const list = el("div", "routine-runs");
   box.appendChild(list);
-  box.addEventListener("toggle", () => {
-    if (!box.open || list.dataset.loaded) return;
-    list.dataset.loaded = "1";
-    list.appendChild(el("div", "muted small", t("routines.loading")));
-    void getJson("/routine/history?name=" + encodeURIComponent(routine.name)).then((body) => {
+  const fold = (on) => {
+    box.classList.toggle("folded", on);
+    head.setAttribute("aria-expanded", on ? "false" : "true");
+    if (on) foldedHistories.add(routine.name); else foldedHistories.delete(routine.name);
+  };
+  fold(foldedHistories.has(routine.name));
+  head.addEventListener("click", () => fold(!box.classList.contains("folded")));
+
+  list.appendChild(el("div", "muted small", t("routines.loading")));
+  void getJson("/routine/history?name=" + encodeURIComponent(routine.name)).then((body) => {
+    list.replaceChildren();
+    const runs = (body && body.runs) || [];
+    if (runs.length) label.textContent = t("routines.historyCount", { n: runs.filter((run) => !run.running).length });
+    if (!runs.length) return void list.appendChild(el("div", "muted small", t("routines.noRuns")));
+    const paint = (all) => {
       list.replaceChildren();
-      const runs = (body && body.runs) || [];
-      if (!runs.length) return void list.appendChild(el("div", "muted small", t("routines.noRuns")));
-      for (const run of runs) {
-        const line = el(run.sessionId ? "button" : "div", "routine-run small" + (run.ok || run.skipped ? "" : " failed"));
-        line.appendChild(el("span", null, runSummary(run)));
-        if (run.skipped && run.reason === "still-running") {
-          line.appendChild(el("span", "muted", t("routines.stillRunning")));
-        }
-        if (run.sessionId) {
-          line.type = "button";
-          line.addEventListener("click", () => void openSession(run.sessionId, routine.cwd));
-        }
-        list.appendChild(line);
+      for (const run of all ? runs : runs.slice(0, RUNS_SHOWN)) list.appendChild(routineRunRow(run, routine));
+      if (runs.length > RUNS_SHOWN) {
+        const more = el("button", "ghost small routine-more", all ? t("routines.showFewer") : t("routines.showAll", { n: runs.length }));
+        more.type = "button";
+        more.addEventListener("click", () => paint(!all));
+        list.appendChild(more);
       }
-    });
+    };
+    paint(false);
   });
   return box;
 }
 
+/** A running routine moved on: say so in its row, without a repaint. */
+function paintRoutineActivity(event) {
+  for (const row of document.querySelectorAll(".routine-run.running")) {
+    if (row.dataset.routine !== event.name) continue;
+    row.dataset.turns = String(event.turns || 0);
+    let line = row.querySelector(".routine-run-text");
+    if (!line) {
+      line = el("div", "routine-run-text muted");
+      row.querySelector(".routine-run-top").after(line);
+    }
+    if (event.activity) line.textContent = event.activity;
+  }
+}
+
 /**
  * Scheduled runs, read from the scheduler rather than kept here.
  *
@@ -103,6 +228,10 @@ async function showRoutines() {
       const head = el("div", "row-head");
       head.appendChild(el("span", "row-title", routine.name));
       head.appendChild(el("span", "mono row-cron", routine.cron));
+      // What it runs on, and what it needs connected: the two things a run
+      // fails on without anyone there to fix them.
+      if (routine.model) head.appendChild(el("span", "muted small routine-where", routine.model.split("/").pop()));
+      if (routine.apps && routine.apps.length) head.appendChild(el("span", "muted small routine-where", routine.apps.join(", ")));
       if (!routine.enabled) head.appendChild(el("span", "tag", t("routines.paused")));
       // Where it runs. A routine is made in one project and runs there, from
       // whichever project is open when its time comes, so the card says which.
@@ -112,8 +241,9 @@ async function showRoutines() {
         head.appendChild(where);
       }
 
-      const run = el("button", "ghost", t("routines.run"));
+      const run = el("button", "ghost", t(routine.running ? "routines.running" : "routines.run"));
       run.type = "button";
+      run.disabled = Boolean(routine.running);
       run.addEventListener("click", () => {
         run.disabled = true;
         run.textContent = t("routines.running");
@@ -145,8 +275,8 @@ async function showRoutines() {
 
         const remove = el("button", "ghost", t("routines.remove"));
         remove.type = "button";
-        remove.addEventListener("click", () => {
-          if (!confirm(t("routines.removeConfirm", { name: routine.name }))) return;
+        remove.addEventListener("click", async () => {
+          if (!(await askConfirm({ body: t("routines.removeConfirm", { name: routine.name }), ok: t("routines.remove"), danger: true }))) return;
           remove.disabled = true;
           void api("/routine/remove", { name: routine.name }).then((result) => {
             pushNotice(result);
@@ -161,11 +291,9 @@ async function showRoutines() {
       if (routine.enabled && routine.nextRunAt) {
         bits.push(t("routines.next", { when: new Date(routine.nextRunAt).toLocaleString() }));
       }
-      if (routine.lastRun) bits.push(runSummary(routine.lastRun));
+      // The last run is the first line of the history below, so it is not
+      // repeated here.
       if (bits.length) row.appendChild(el("div", "muted small", bits.join("   ·   ")));
-      if (routine.lastRun && routine.lastRun.error) {
-        row.appendChild(el("div", "err small", routine.lastRun.error));
-      }
       row.appendChild(routineHistory(routine));
       panel.appendChild(row);
     }
@@ -187,7 +315,10 @@ async function showRoutines() {
  * because a switch you have to open a row to reach is a switch that has been
  * hidden rather than tidied.
  */
-async function showSettings() {
+async function showSettings(opts) {
+  // A row whose controls live inside it is reopened after a change redraws
+  // the page; called from a click handler, opts is the event, and opens none.
+  const opened = opts && typeof opts.open === "string" ? opts.open : undefined;
   const settings = await getJson("/settings");
   panelBody.replaceChildren();
   if (settings.error) return void panelBody.appendChild(panelError(settings.error));
@@ -197,7 +328,7 @@ async function showSettings() {
 
   // Rows are grouped by what they are about. Each group is filled as the page
   // is built and drawn at the end under its heading, and only when it has rows.
-  const groups = { workspace: el("div"), sync: el("div"), memory: el("div"), activity: el("div"), advanced: el("div"), about: el("div") };
+  const groups = { workspace: el("div"), remote: el("div"), sync: el("div"), memory: el("div"), activity: el("div"), advanced: el("div"), about: el("div") };
   let target = groups.workspace;
 
   // A click on a button inside a summary toggles the disclosure as well as
@@ -311,6 +442,7 @@ async function showSettings() {
   change.addEventListener("click", openProjectPicker);
   field(t("settings.cwd"), settings.cwd || "—", t("settings.cwdHint"), change);
   permissionsField(settings);
+  claudeAgentField(settings.claudeAgent || { on: false, available: false });
 
   // A door, not a report: the numbers live on a page of their own, and the row
   // here carries no total of its own because working one out means walking
@@ -460,6 +592,34 @@ async function showSettings() {
    * and a "Show trail" you had to find after that was one click too many for
    * the only thing anybody opens this row to see.
    */
+  /**
+   * Claude Agent: the user's own Claude Code, on their own Claude account, as
+   * a subagent and as @claude.
+   *
+   * Off until switched on here, because it spends someone's Claude plan and
+   * that is theirs to decide — the hint says so in so many words before the
+   * switch is flipped, not after. With no Claude Code on this machine the
+   * switch is shown but shut, and the row says where to get it.
+   */
+  function claudeAgentField(status) {
+    const value = !status.available
+      ? t("settings.claudeAgentMissingValue")
+      : t(status.on ? "settings.claudeAgentOnValue" : "settings.claudeAgentOffValue");
+    const body = field(
+      t("settings.claudeAgent"),
+      value,
+      t("settings.claudeAgentHint"),
+      toggle(status.on, t("settings.claudeAgent"), (next) => {
+        void api("/settings/claude-agent", { enabled: next }).then((result) => {
+          if (result && result.error) addNotice(result.error, "err");
+          void showSettings();
+        });
+      }, !status.available && !status.on),
+    );
+    if (!status.available) body.appendChild(el("div", "muted small", t("settings.claudeAgentMissing")));
+    else if (status.unavailable) body.appendChild(el("div", "muted small", status.unavailable));
+  }
+
   function auditField(audit) {
     const mine = audit.source !== "project";
 
@@ -664,7 +824,9 @@ async function showSettings() {
   // a switch a browser tab cannot honour would be one that lies.
   const keepAwake = await getJson("/keep-awake");
   if (keepAwake && !keepAwake.error && keepAwake.available) {
-    target = groups.workspace;
+    // Set once, if ever: under Advanced, folded away with the other rows
+    // nobody comes to Settings to change.
+    target = groups.advanced;
     field(
       t("settings.keepAwake"),
       t(keepAwake.enabled ? "settings.keepAwakeOn" : "settings.keepAwakeOff"),
@@ -674,6 +836,97 @@ async function showSettings() {
       }),
     );
   }
+  // Remote control: a phone on this account driving this machine through the
+  // relay. Offered only where the server was given a relay to use, and off
+  // until somebody at the machine turns it on.
+  const remote = await getJson("/remote");
+  if (remote && !remote.error && remote.available) {
+    target = groups.remote;
+    const stateKey = (view) =>
+      view.state === "online" ? "online" : view.state === "connecting" ? "connecting" : view.state === "signed-out" ? "signedOut" : "off";
+    const body = field(
+      t("settings.remote"),
+      t("settings.remote." + stateKey(remote)),
+      t("settings.remoteHint"),
+      toggle(remote.on, t("settings.remote"), (next) => {
+        void api("/remote", { enabled: next }).then((result) => {
+          if (result && result.error) addNotice(result.error, "err");
+          void showSettings();
+        });
+      }),
+    );
+    if (remote.keepsAwake) body.appendChild(el("div", "muted small", t("settings.remoteAwake")));
+
+    // Where it stands, said in a sentence: off, waiting on an account,
+    // reaching for the relay, or there.
+    const status = el("div", "setting-status small");
+    const dot = el("span", "status-dot");
+    const said = el("span");
+    status.append(dot, said);
+    body.appendChild(status);
+    let signIn = null;
+    if (typeof openConnect === "function") {
+      signIn = el("button", "ghost", t("settings.remoteSignIn"));
+      signIn.type = "button";
+      signIn.addEventListener("click", () => openConnect("official"));
+      body.appendChild(signIn);
+    }
+    const row = body.parentNode;
+    const shownValue = row.querySelector(".setting-value");
+    const paint = (view) => {
+      const key = stateKey(view);
+      dot.className = "status-dot" + (key === "online" ? " ok" : "");
+      said.textContent = t("settings.remoteStatus." + key);
+      if (shownValue) shownValue.textContent = t("settings.remote." + key);
+      if (signIn) signIn.hidden = key !== "signedOut";
+    };
+    paint(remote);
+    // Connecting and signing in finish on their own time, so the row looks
+    // again while it is on screen and not yet online.
+    if (remote.on) {
+      const timer = setInterval(() => {
+        if (!document.body.contains(row)) return clearInterval(timer);
+        void getJson("/remote").then((view) => {
+          if (!view || view.error || !document.body.contains(row)) return;
+          paint(view);
+          if (!view.on || view.state === "online") clearInterval(timer);
+        });
+      }, 3000);
+    }
+
+    // The phones allowed in so far. Forgetting one ends its connection now
+    // and sends it back to the Allow card next time.
+    const phones = el("div", "setting-list");
+    phones.appendChild(el("div", "muted small", t("settings.remotePhones")));
+    const devices = remote.devices || [];
+    if (!devices.length) phones.appendChild(el("div", "small", t("settings.remoteNoPhones")));
+    for (const device of devices) {
+      const line = el("div", "remote-phone small");
+      line.appendChild(el("span", "remote-phone-name", device.name || device.id));
+      if (device.pairedAt) {
+        line.appendChild(el("span", "muted", t("settings.remotePairedOn", { date: new Date(device.pairedAt).toLocaleDateString() })));
+      }
+      const forget = el("button", "ghost", t("settings.remoteForget"));
+      forget.type = "button";
+      forget.addEventListener("click", () => {
+        forget.disabled = true;
+        void api("/remote/revoke", { id: device.id }).then((result) => {
+          if (result && result.error) {
+            forget.disabled = false;
+            return void addNotice(result.error, "err");
+          }
+          addNotice(t("settings.remoteForgotten", { name: device.name || device.id }));
+          void showSettings();
+        });
+      });
+      line.appendChild(forget);
+      phones.appendChild(line);
+    }
+    body.appendChild(phones);
+  }
+  // Computer use: only in the desktop app, which ships the helper. Read here,
+  // drawn after the browser row, its neighbour in kind.
+  const computer = await getJson("/computer-use/settings");
   // Which browsers the agent may use. Three choices, so a segmented control
   // rather than a switch; absent when the browser tools are off altogether,
   // since then there is nothing for it to move.
@@ -707,6 +960,105 @@ async function showSettings() {
     body.appendChild(status);
     body.appendChild(extensionHelp(ext));
   }
+  // Computer use, as one row: the row says how it gets switched on, and opens
+  // onto the three things a person owns about it — whether the agent may
+  // switch it on itself, whether it may ever take the real mouse and
+  // keyboard, and their own additions to the apps it refuses.
+  if (computer && !computer.error && computer.available) {
+    target = groups.workspace;
+    const enableModes = ["ask", "auto", "off"];
+    const enable = enableModes.includes(computer.enable) ? computer.enable : "ask";
+    const body = field(t("settings.computer"), t("settings.computerEnable." + enable), "");
+    const sub = (label, control, hint) => {
+      const part = el("div", "setting-part");
+      const line = el("div", "setting-part-line");
+      line.appendChild(el("div", "setting-part-name", label));
+      line.appendChild(control);
+      part.appendChild(line);
+      if (hint) part.appendChild(el("div", "muted small", hint));
+      body.appendChild(part);
+    };
+
+    const enableSeg = el("div", "seg setting-seg");
+    enableSeg.setAttribute("role", "radiogroup");
+    enableSeg.setAttribute("aria-label", t("settings.computerEnable"));
+    for (const mode of enableModes) {
+      const chosen = mode === enable;
+      const button = el("button", "seg-item" + (chosen ? " on" : ""), t("settings.computerEnable." + mode));
+      button.type = "button";
+      button.setAttribute("role", "radio");
+      button.setAttribute("aria-checked", chosen ? "true" : "false");
+      button.addEventListener("click", () => {
+        if (chosen) return;
+        enableSeg.querySelectorAll("button").forEach((b) => (b.disabled = true));
+        void api("/computer-use/settings", { enable: mode }).then(() => showSettings({ open: "computer" }));
+      });
+      enableSeg.appendChild(button);
+    }
+    sub(t("settings.computerEnable"), enableSeg, t("settings.computerEnableHint." + enable));
+
+    const takeover = computer.takeover !== "never";
+    sub(
+      t("settings.computerTakeover"),
+      toggle(takeover, t("settings.computerTakeover"), (next) => {
+        void api("/computer-use/settings", { takeover: next ? "ask" : "never" }).then(() => showSettings({ open: "computer" }));
+      }),
+      t("settings.computerTakeoverHint"),
+    );
+
+    const blocked = el("div", "setting-list setting-part");
+    blocked.appendChild(el("div", "setting-part-name", t("settings.computerBlockedTitle")));
+    blocked.appendChild(el("div", "muted small", t("settings.computerBlocked")));
+    const box = el("textarea", "boxed");
+    box.value = (computer.blockedApps || []).join("\n");
+    box.rows = Math.max(2, (computer.blockedApps || []).length + 1);
+    box.spellcheck = false;
+    box.style.width = "100%";
+    box.placeholder = t("settings.computerBlockedPlaceholder");
+    blocked.appendChild(box);
+    const save = el("button", "ghost", t("perms.save"));
+    save.type = "button";
+    save.addEventListener("click", () => {
+      save.disabled = true;
+      const apps = box.value.split("\n").map((line) => line.trim()).filter(Boolean);
+      void api("/computer-use/settings", { blockedApps: apps }).then((result) => {
+        save.disabled = false;
+        if (result && result.error) return void addNotice(result.error, "err");
+        addNotice(t("perms.saved"));
+      });
+    });
+    blocked.appendChild(save);
+    body.appendChild(blocked);
+    body.parentElement.dataset.row = "computer";
+    if (opened === "computer") body.parentElement.open = true;
+  }
+  // One switch for both: the pictures of what a turn left in the browser and
+  // on the computer, under its reply. Shown wherever either can run.
+  const shots = await getJson("/turn-shots");
+  if (shots && !shots.error && (browserModes.includes(settings.browserMode) || (computer && computer.available))) {
+    target = groups.advanced;
+    field(
+      t("settings.turnShots"),
+      t(shots.enabled ? "settings.keepAwakeOn" : "settings.keepAwakeOff"),
+      t("settings.turnShotsHint"),
+      toggle(shots.enabled, t("settings.turnShots"), (next) => {
+        void api("/turn-shots", { enabled: next }).then(showSettings);
+      }),
+    );
+  }
+  // The grey next message in the empty composer, written after each turn.
+  const suggestions = await getJson("/suggestions");
+  if (suggestions && !suggestions.error) {
+    target = groups.workspace;
+    field(
+      t("settings.suggestions"),
+      t(suggestions.enabled ? "settings.keepAwakeOn" : "settings.keepAwakeOff"),
+      t("settings.suggestionsHint"),
+      toggle(suggestions.enabled, t("settings.suggestions"), (next) => {
+        void api("/suggestions", { enabled: next }).then(showSettings);
+      }),
+    );
+  }
   // The desktop app's version, with its release notes beside it. A row that
   // is always there, because the menu bar is not where people look and the
   // post-update hint is gone after one click.
@@ -726,6 +1078,7 @@ async function showSettings() {
   }
   const sections = [
     ["settings.section.workspace", [groups.workspace]],
+    ["settings.section.remote", [groups.remote]],
     ["settings.section.sync", [groups.sync, groups.memory]],
     ["settings.section.activity", [groups.activity]],
     ["settings.section.advanced", [groups.advanced]],
@@ -733,12 +1086,46 @@ async function showSettings() {
   ];
   for (const [title, parts] of sections) {
     if (!parts.some((part) => part.childNodes.length)) continue;
+    if (title === "settings.section.advanced") {
+      panel.appendChild(advancedSection(parts));
+      continue;
+    }
     panel.appendChild(el("div", "section-title", t(title)));
     for (const part of parts) panel.appendChild(part);
   }
   panelBody.appendChild(panel);
 }
 
+/**
+ * Advanced: the rows nobody opens Settings to change, folded under their
+ * heading so the ones people do are the page. Shut until opened, and then
+ * open on every visit in this browser until shut again — a person who went
+ * looking once is likely to go looking again.
+ */
+const ADVANCED_OPEN_KEY = "oh.settings.advancedOpen";
+
+function advancedSection(parts) {
+  const section = el("details", "settings-advanced");
+  const head = el("summary", "section-title");
+  head.appendChild(el("span", "chev"));
+  head.appendChild(document.createTextNode(t("settings.section.advanced")));
+  section.appendChild(head);
+  for (const part of parts) section.appendChild(part);
+  try {
+    section.open = localStorage.getItem(ADVANCED_OPEN_KEY) === "1";
+  } catch {
+    // Storage refused: shut, as on a first visit.
+  }
+  section.addEventListener("toggle", () => {
+    try {
+      localStorage.setItem(ADVANCED_OPEN_KEY, section.open ? "1" : "0");
+    } catch {
+      // Not remembered, which costs one click next time.
+    }
+  });
+  return section;
+}
+
 /**
  * Where the money went, and on which model.
  *

package/dist/page/client/routines.js.map

@@ -1 +1 @@
-{"version":3,"file":"routines.js","sourceRoot":"","sources":["../../../src/page/client/routines.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAy5BgD,CAAC"}
+{"version":3,"file":"routines.js","sourceRoot":"","sources":["../../../src/page/client/routines.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFA4xCgD,CAAC"}