@oharness/server 0.7.0 → 0.8.0

package/dist/page/client/routines.js

@@ -0,0 +1,910 @@
+/**
+ * The routines page, the settings page, and the permission rules page.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const ROUTINES = String.raw `
+// --- routines and settings -------------------------------------------------
+
+/**
+ * Start a routine by describing it.
+ *
+ * A fresh session with the sentence begun, rather than a form: "every weekday
+ * morning, summarise yesterday's commits" is how people say it, and the agent
+ * turns that into a cron and a prompt that stands on its own. A form asked for
+ * five cron fields to express the same thing.
+ */
+async function newRoutine() {
+  await switchTo({ action: "new" });
+  input.value = t("routines.starter");
+  paintMirror();
+  input.focus();
+  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 routine's past runs, fetched when opened.
+ *
+ * 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.
+ */
+function routineHistory(routine) {
+  const box = el("details", "routine-history");
+  box.appendChild(el("summary", "muted small", t("routines.history")));
+  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) => {
+      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);
+      }
+    });
+  });
+  return box;
+}
+
+/**
+ * Scheduled runs, read from the scheduler rather than kept here.
+ *
+ * A panel with its own idea of the schedule list drifts from what actually
+ * fires, and the drift is invisible until a routine the user thought was
+ * running turns out never to have existed.
+ */
+async function showRoutines() {
+  const body = await getJson("/routines");
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+  const routines = body.routines;
+
+  const panel = el("div", "panel");
+  const top = el("div", "row-head");
+  top.appendChild(el("h2", null, t("routines.title")));
+  const addButton = el("button", "ghost", t("routines.add"));
+  addButton.type = "button";
+  top.appendChild(addButton);
+  panel.appendChild(top);
+
+  addButton.addEventListener("click", () => void newRoutine());
+
+  if (!routines || !routines.length) {
+    panel.appendChild(el("p", "muted", t("routines.none")));
+    panel.appendChild(el("p", "muted", t("routines.empty")));
+  } else {
+    for (const routine of routines) {
+      const row = el("div", "row-card");
+      const head = el("div", "row-head");
+      head.appendChild(el("span", "row-title", routine.name));
+      head.appendChild(el("span", "mono row-cron", routine.cron));
+      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.
+      if (routine.cwd) {
+        const where = el("span", "muted small routine-where", projectName(routine.cwd));
+        where.title = routine.cwd;
+        head.appendChild(where);
+      }
+
+      const run = el("button", "ghost", t("routines.run"));
+      run.type = "button";
+      run.addEventListener("click", () => {
+        run.disabled = true;
+        run.textContent = t("routines.running");
+        void api("/routine", { name: routine.name }).then((result) => {
+          pushNotice(result);
+          void showRoutines();
+        });
+      });
+      head.appendChild(run);
+      if (routine.removable) {
+        // Paused rather than deleted: the prompt someone got right is kept,
+        // and a routine that should not run this week is one switch away from
+        // running again.
+        const toggle = el("button", "switch");
+        toggle.type = "button";
+        toggle.setAttribute("role", "switch");
+        toggle.setAttribute("aria-checked", routine.enabled ? "true" : "false");
+        const label = routine.enabled ? t("routines.pause") : t("routines.resume");
+        toggle.setAttribute("aria-label", label);
+        toggle.title = label;
+        toggle.addEventListener("click", () => {
+          toggle.disabled = true;
+          void api("/routine/enabled", { name: routine.name, enabled: !routine.enabled }).then((result) => {
+            pushNotice(result);
+            void showRoutines();
+          });
+        });
+        head.appendChild(toggle);
+
+        const remove = el("button", "ghost", t("routines.remove"));
+        remove.type = "button";
+        remove.addEventListener("click", () => {
+          if (!confirm(t("routines.removeConfirm", { name: routine.name }))) return;
+          remove.disabled = true;
+          void api("/routine/remove", { name: routine.name }).then((result) => {
+            pushNotice(result);
+            void showRoutines();
+          });
+        });
+        head.appendChild(remove);
+      }
+      row.appendChild(head);
+
+      const bits = [];
+      if (routine.enabled && routine.nextRunAt) {
+        bits.push(t("routines.next", { when: new Date(routine.nextRunAt).toLocaleString() }));
+      }
+      if (routine.lastRun) bits.push(runSummary(routine.lastRun));
+      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);
+    }
+  }
+  panelBody.appendChild(panel);
+}
+
+/**
+ * Everything the app decided for you, one line each.
+ *
+ * The page used to print every row in full: the value, the paragraph
+ * explaining it, and for the write policy a list of forty cache paths. Read
+ * top to bottom that is a wall of prose in which the three settings anybody
+ * ever changes are indistinguishable from the reference material around them.
+ *
+ * So each row is a disclosure now. The name and the current value stay on the
+ * line — that is what someone came to check — and the reasoning, the long
+ * paths and the lists wait behind a click. The controls stay on the summary,
+ * because a switch you have to open a row to reach is a switch that has been
+ * hidden rather than tidied.
+ */
+async function showSettings() {
+  const settings = await getJson("/settings");
+  panelBody.replaceChildren();
+  if (settings.error) return void panelBody.appendChild(panelError(settings.error));
+
+  const panel = el("div", "panel");
+  panel.appendChild(el("h2", null, t("settings.title")));
+
+  // 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") };
+  let target = groups.workspace;
+
+  // A click on a button inside a summary toggles the disclosure as well as
+  // running the button, so every action on a row gets this. Without it a
+  // switch would flip and open the row underneath it, which reads as the page
+  // doing something you did not ask for.
+  const keepShut = (node) => {
+    node.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    return node;
+  };
+
+  // Variadic since sync brought the first row with two things to do: a switch
+  // and a "do it now". Returns the body so a caller with more to say than a
+  // hint — the roots editor, the audit trail — can put it there.
+  const field = (label, value, hint, ...actions) => {
+    const row = el("details", "setting");
+    const head = el("summary");
+    head.appendChild(el("span", "chev"));
+    head.appendChild(el("div", "setting-name", label));
+    // The line is one line: a value that does not fit is cut with an ellipsis
+    // rather than wrapped, and the whole of it is printed again inside, so
+    // nothing is only available on hover. A value that fits gets no tooltip —
+    // one that repeats the text under the pointer is just something in the way.
+    const long = !!value && (value.indexOf("\n") >= 0 || value.length > 56);
+    const shown = el("div", "setting-value mono", value || "");
+    if (long) shown.title = value;
+    head.appendChild(shown);
+    for (const action of actions) if (action) head.appendChild(keepShut(action));
+    row.appendChild(head);
+
+    const body = el("div", "setting-body");
+    if (long) body.appendChild(el("div", "mono small", value));
+    if (hint) body.appendChild(el("div", "muted small", hint));
+    row.appendChild(body);
+    target.appendChild(row);
+    return body;
+  };
+
+  /**
+   * What a door row shows when it is opened, read the first time it is.
+   *
+   * Every row here that leads to a page is opened by somebody who wants a
+   * look before they decide to go there, and a row whose whole body was a
+   * sentence and a button made them go there to find out whether it was worth
+   * going. So each one carries the shape of its page: the figures, the first
+   * few rules, the last few decisions.
+   *
+   * On first open, not on paint. Two of these walk every session on disk, and
+   * the rows are on screen whether or not anybody cares — which is why the
+   * totals were left off them in the first place.
+   */
+  const preview = (body, load) => {
+    const box = el("div");
+    body.appendChild(box);
+    const row = body.parentNode;
+    let loaded = false;
+    row.addEventListener("toggle", () => {
+      if (!row.open || loaded) return;
+      loaded = true;
+      box.appendChild(el("div", "muted small", t("preview.loading")));
+      void load(box).then(
+        () => {},
+        (err) => { box.replaceChildren(el("div", "muted small", String(err && err.message || err))); },
+      );
+    });
+    return box;
+  };
+
+  // A labelled block inside an opened row: what the label names, printed as
+  // typed. Used for the permission rules and the settings files, both of
+  // which are lists someone reads once and closes again.
+  const listing = (label, text) => {
+    const group = el("div", "setting-list");
+    group.appendChild(el("div", "muted small", label));
+    const list = el("div", "mono small");
+    list.textContent = text;
+    group.appendChild(list);
+    return group;
+  };
+
+  /**
+   * A switch for one boolean the user owns.
+   *
+   * role="switch" with aria-checked rather than a checkbox, because the
+   * element also has to carry a label a screen reader can read and a checkbox
+   * here would need one built around it for no gain.
+   */
+  const toggle = (on, label, onChange, disabled) => {
+    const button = el("button", "switch");
+    button.type = "button";
+    button.setAttribute("role", "switch");
+    button.setAttribute("aria-checked", on ? "true" : "false");
+    button.setAttribute("aria-label", label);
+    button.title = label;
+    if (disabled) button.disabled = true;
+    button.addEventListener("click", () => {
+      button.disabled = true;
+      onChange(!on);
+    });
+    return button;
+  };
+
+  // The working directory is the one setting on this page that is a choice
+  // rather than a report, so it gets the same picker the sidebar uses — the
+  // list of known projects, plus a folder chooser for one that is not on it.
+  const change = el("button", "ghost", t("settings.change"));
+  change.type = "button";
+  change.addEventListener("click", openProjectPicker);
+  field(t("settings.cwd"), settings.cwd || "—", t("settings.cwdHint"), change);
+  permissionsField(settings);
+
+  // 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
+  // every session on disk — a cost this page would then pay on every paint,
+  // for a figure most visits are not here for.
+  target = groups.activity;
+  const openUsage = el("button", "ghost", t("usage.open"));
+  openUsage.type = "button";
+  openUsage.addEventListener("click", () => {
+    setNav("usage");
+    void showUsage();
+  });
+  const usageRow = field(t("usage.title"), t("usage.value"), t("usage.hint"), openUsage);
+  preview(usageRow, async (box) => {
+    const body = await getJson("/usage?range=30d");
+    box.replaceChildren();
+    if (body.error) return void box.appendChild(el("div", "muted small", body.error));
+    const totals = body.totals || {};
+    const sent = (totals.input || 0) + (totals.cacheRead || 0) + (totals.cacheWrite || 0);
+    const moved = sent + (totals.output || 0);
+    const facts = [
+      "$" + (totals.costUsd || 0).toFixed(2),
+      t("usage.tokens", { n: formatTokens(moved) }),
+    ];
+    if (totals.cacheRead) facts.push(t("usage.cached", { pct: Math.round((totals.cacheRead / sent) * 100) }));
+    facts.push(totals.sessions === 1 ? t("usage.overSession") : t("usage.overSessions", { n: totals.sessions || 0 }));
+    // The default window, said out loud: the figures on the page move with
+    // its picker, and a preview that named no window would be read as all time.
+    box.appendChild(el("div", "mono small", facts.join("   ·   ")));
+    box.appendChild(el("div", "muted small", t("usage.range.30d")));
+  });
+
+  /*
+   * Memory sits here rather than in the sidebar, and only when a plugin has
+   * actually registered it: a row for a page that does not exist would be a
+   * dead end, and the memory plugin can be switched off.
+   */
+  target = groups.memory;
+  for (const page of pluginPages.values()) {
+    const open = el("button", "ghost", t("settings.memoryOpen"));
+    open.type = "button";
+    open.addEventListener("click", () => { setNav("nav-plugin-" + page.id); void showMemoryPage(page.id); });
+    const row = field(t("settings.memory"), "", t("settings.memoryHint"), open);
+    const id = page.id;
+    preview(row, async (box) => {
+      const result = await getJson("/plugin-page?id=" + encodeURIComponent(id)
+        + "&session=" + encodeURIComponent(activeId || ""));
+      box.replaceChildren();
+      if (result.error && !result.entries) {
+        return void box.appendChild(el("div", "muted small", result.error));
+      }
+      // The same state the page opens with, worked out the same way — one
+      // sentence rather than the card, because the card is the page.
+      const state = !result.signedIn ? "local"
+        : result.accountChanged ? "account"
+        : !result.enabled ? "off"
+        : result.syncing ? "syncing"
+        : (result.errors && result.errors.length) || result.error ? "error" : "on";
+      box.appendChild(el("div", "small", t("memory.state." + state)));
+      const entries = result.entries || [];
+      const project = entries.filter((entry) => entry.scope !== "user").length;
+      box.appendChild(el("div", "muted small", result.userAvailable
+        ? t("memory.countsScoped", { project, user: entries.length - project })
+        : t("memory.counts", { count: entries.length })));
+    });
+  }
+
+  target = groups.activity;
+  auditField(settings.audit || { on: true, source: "user" });
+  target = groups.advanced;
+  filesField(settings.settingsPaths);
+
+  /**
+   * What runs, what stops to ask, what is refused, and where writes may land
+   * — one row, and a page behind it.
+   *
+   * These were two rows called Rules and Writes, which is two names for one
+   * subject: both are the permission policy, both are read after something
+   * surprising happened, and neither is a thing anybody sets from here. The
+   * row answers "is anything set?" from its closed line; the lists, and the
+   * one editor among them, are on the page.
+   */
+  function permissionsField(settings) {
+    const workspace = settings.workspace || {};
+    const rules = settings.permissions || {};
+    const roots = (workspace.writableRoots || []).length;
+
+    const summary = [workspace.mode || "—"];
+    if (workspace.mode === "workspace-write") summary.push(roots + " roots");
+    for (const kind of ["allow", "ask", "deny"]) {
+      if (rules[kind] && rules[kind].length) summary.push(kind + " " + rules[kind].length);
+    }
+    const session = (rules.sessionAllow || []).length;
+    if (session) summary.push(t("settings.sessionApproved") + " " + session);
+
+    const open = el("button", "ghost", t("perms.open"));
+    open.type = "button";
+    open.addEventListener("click", () => { setNav("permissions"); void showPermissions(); });
+    const body = field(t("perms.title"), summary.join("   ·   "), t("perms.hint"), open);
+
+    /*
+     * No read behind this one: everything here came with the settings the row
+     * was built from, so it is all free and is shown at once.
+     *
+     * The mode and the roots lead, because they are the part that is always
+     * there. A project with no rules of its own is the common case, and this
+     * row answered it with one sentence saying nothing was set — while the
+     * page behind it had a mode and fifty-two directories to show.
+     */
+    const shown = 4;
+    body.appendChild(el("div", "mono small", [
+      workspace.mode || "—",
+      workspace.mode === "workspace-write" ? t("perms.rootsCount", { n: roots }) : "",
+    ].filter(Boolean).join("   ·   ")));
+    const chosen = settings.configuredRoots || [];
+    const rootList = chosen.length ? chosen : (workspace.writableRoots || []);
+    if (workspace.mode === "workspace-write" && rootList.length) {
+      body.appendChild(listing(
+        chosen.length ? t("perms.mine") : t("perms.writes"),
+        rootList.slice(0, shown).join("\n")));
+    }
+
+    let hidden = 0;
+    let ruled = false;
+    for (const kind of ["allow", "ask", "deny"]) {
+      const list = rules[kind] || [];
+      if (!list.length) continue;
+      ruled = true;
+      body.appendChild(listing(kind + "  ·  " + list.length, list.slice(0, shown).join("\n")));
+      hidden += Math.max(0, list.length - shown);
+    }
+    if (!ruled) body.appendChild(el("div", "muted small", t("perms.noRules")));
+    if (hidden) body.appendChild(el("div", "muted small", t("perms.more", { n: hidden })));
+  }
+
+  /**
+   * Whether permission decisions are being written down, and what they say.
+   *
+   * A switch, because it is a state someone owns rather than a report — but
+   * only when they own it. A repository that turned the trail off in its own
+   * config has decided this for everyone working in it, and a control offered
+   * over that would appear to work and revert on the next launch, so it is
+   * shown disabled with the reason underneath instead of hidden.
+   *
+   * The trail comes with the row rather than behind a second button inside
+   * it: opening the row is already the gesture for "tell me more about this",
+   * 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.
+   */
+  function auditField(audit) {
+    const mine = audit.source !== "project";
+
+    /*
+     * A door beside the switch.
+     *
+     * The row answers the question it is passed on the way to something else
+     * — is this on, and what did the session I am in just get allowed to do —
+     * and the page behind it answers the one the trail is actually opened
+     * for: when was this ever allowed, which is a question a single session
+     * rarely holds the answer to. Leaving that to the export meant answering
+     * it by reading JSON lines by hand.
+     */
+    const open = el("button", "ghost", t("settings.auditOpen"));
+    open.type = "button";
+    open.addEventListener("click", () => {
+      auditScope = "session";
+      auditFilter = "all";
+      setNav("audit");
+      void showAudit();
+    });
+
+    const body = field(
+      t("settings.audit"),
+      t(audit.on ? "settings.auditOnValue" : "settings.auditOffValue"),
+      mine ? t(audit.on ? "settings.auditOn" : "settings.auditOff") : t("settings.auditProject"),
+      open,
+      toggle(audit.on, t("settings.audit"), (next) => {
+        void api("/audit", { enabled: next }).then((result) => {
+          if (result && result.error) addNotice(result.error, "err");
+          void showSettings();
+        });
+      }, !mine),
+    );
+
+    // The extra copy, when the config named one. Not a control: nobody typed
+    // that path into this page, and a switch here that deleted it would turn
+    // "stop for now" into "forget where my collector reads from".
+    if (audit.file) {
+      body.appendChild(el("div", "muted small", t("settings.auditFile", { path: audit.file })));
+    }
+
+    preview(body, async (box) => {
+      const result = await getJson("/audit");
+      box.replaceChildren();
+      if (result && result.error) return void box.appendChild(panelError(result.error));
+      const rows = auditRows(result.entries);
+      if (!rows.length) {
+        box.appendChild(el("div", "muted small", t("settings.auditEmpty")));
+        /*
+         * An empty session is not an empty machine, and the row said only the
+         * first of those — which reads as a trail that records nothing.
+         *
+         * The wider read happens only here, in the one case where the cheap
+         * one came back with nothing: it is a file read per session, and
+         * paying it to decorate a row that already had something to show
+         * would be the cost this preview is lazy to avoid.
+         */
+        const everywhere = await getJson("/audit?session=all");
+        if (everywhere.error) return;
+        const all = auditRows(everywhere.entries);
+        if (all.length) {
+          box.appendChild(el("div", "muted small", t("audit.elsewhere", { n: all.length })));
+        }
+        return;
+      }
+      // The most recent handful, and a count of what is behind them. The row
+      // used to print two hundred lines into a box inside a disclosure inside
+      // a scrolling page, and stop dead at the two hundredth with a number
+      // and nowhere to go; the rest of them are what the page is for.
+      box.appendChild(auditList(rows.slice(0, AUDIT_PREVIEW), false));
+      if (rows.length > AUDIT_PREVIEW) {
+        box.appendChild(el("div", "muted small",
+          t("settings.auditMore", { n: rows.length - AUDIT_PREVIEW })));
+      }
+    });
+
+    /*
+     * Taking the record away with you.
+     *
+     * Plain links rather than buttons that fetch and build a blob: the server
+     * already names the file and hands it over, and a download that the page
+     * assembles in memory is one the browser cannot resume, cannot stream, and
+     * shows in no download list.
+     *
+     * Two scopes, because they answer different questions. This session is
+     * what somebody is looking at when they open the row; everything is what
+     * "send me the audit" means, and building it out of one export per session
+     * is not a thing anybody should be asked to do by hand.
+     */
+    body.appendChild(auditExports(activeId));
+  }
+
+  /**
+   * Where these settings were read from — three paths, one row.
+   *
+   * Nothing here is a choice, and the three of them were three cards of grey
+   * absolute path apiece. The closed line says which layers exist, which is
+   * the whole of what most visits need; the paths are for the visit where
+   * something is set and you cannot see where from.
+   */
+  function filesField(paths) {
+    if (!paths) return;
+    const scopes = ["user", "project", "local"].filter((scope) => paths[scope]);
+    if (!scopes.length) return;
+    const body = field(t("settings.files"), scopes.join("   ·   "), t("settings.filesHint"));
+    for (const scope of scopes) body.appendChild(listing(scope, paths[scope]));
+  }
+
+  /**
+   * The write policy, without the wall of text.
+   *
+   * This row used to print every allowed root inline, and on a machine with
+   * plugins installed that is dozens of cache directories — a page of grey
+   * paths that buried every setting under it and answered a question nobody
+   * asked in that much detail.
+   *
+   * Collapsed to the shape of the answer instead: the mode and how many
+   * roots. The list is one click away, and it comes split, because the two
+   * halves are not the same kind of thing. What the config named is a choice
+   * and can be changed here. What the plugins contributed is derived and is
+   * rebuilt at launch, so a control over it would be a control that silently
+   * reverts.
+   */
+  // Sync, above analytics, because it is the one on this page that decides
+  // where the work goes rather than whether a counter is incremented.
+  target = groups.sync;
+  const sync = await getJson("/sync");
+  if (sync && !sync.error) {
+    // Three states, not two. Off and "on but signed out" both send nothing,
+    // and a switch is the fix for only one of them — so the hint says which,
+    // and the button that would do nothing is not offered.
+    const value = sync.on
+      ? "on — mirroring to " + (sync.url || "the sync service")
+      : sync.reason === "no-credential"
+        ? "on, but not signed in — nothing is being sent"
+        : sync.reason === "excluded"
+          ? "off for this project"
+          : "off";
+    const hint = sync.on
+      ? "Transcripts and artifacts, including revisions you make by hand in a canvas, are mirrored to your account."
+      : sync.reason === "no-credential"
+        ? "Sign in to start mirroring. Until then everything stays on this machine."
+        : sync.reason === "excluded"
+          ? "Listed under sync.exclude in the config. Nothing from this project leaves the machine."
+          : "Everything stays on this machine.";
+
+    const actions = [];
+
+    // Shown even when it cannot run, and disabled with the reason above it.
+    // Hiding it was worse: someone looking for "sync now" found nothing and
+    // had no way to tell whether the app has it at all.
+    const now = el("button", "ghost", "Sync now");
+    now.type = "button";
+    now.disabled = !sync.on;
+    now.addEventListener("click", () => {
+      now.disabled = true;
+      now.textContent = "syncing…";
+      void api("/sync/now").then((body) => {
+        now.disabled = false;
+        now.textContent = "Sync now";
+        // Said out loud either way: the whole point of the button is being
+        // told it happened, and a silent success is indistinguishable from a
+        // click that missed.
+        if (body && body.error) addNotice("could not sync: " + body.error, "err");
+        else addNotice("pushed everything waiting");
+      });
+    });
+    actions.push(now);
+
+    // The switch reads the setting, not the outcome: someone who has not
+    // signed in has still left sync on, and flipping it off under them
+    // because it cannot reach anything yet would be answering a question they
+    // did not ask.
+    if (sync.reason !== "excluded") {
+      actions.push(
+        toggle(sync.reason !== "disabled", "Sync to your account", (next) => {
+          void api("/sync", { enabled: next }).then(showSettings);
+        }),
+      );
+    }
+
+    field("Sync", value, hint, ...actions);
+  }
+
+  // Last, and only when this build could actually send something. A switch
+  // that does nothing is worse than no switch: it invites someone to believe
+  // they turned something off that was never on.
+  target = groups.activity;
+  const analytics = await getJson("/analytics");
+  if (analytics && !analytics.error && analytics.available) {
+    field(
+      t("settings.analytics"),
+      t(analytics.enabled ? "settings.analyticsOn" : "settings.analyticsOff"),
+      t("settings.analyticsHint"),
+      toggle(analytics.enabled, t("settings.analytics"), (next) => {
+        void api("/analytics", { enabled: next }).then(showSettings);
+      }),
+    );
+  }
+  // Only in the desktop app: keeping a computer awake is an Electron call, and
+  // 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;
+    field(
+      t("settings.keepAwake"),
+      t(keepAwake.enabled ? "settings.keepAwakeOn" : "settings.keepAwakeOff"),
+      t("settings.keepAwakeHint"),
+      toggle(keepAwake.enabled, t("settings.keepAwake"), (next) => {
+        void api("/keep-awake", { enabled: next }).then(showSettings);
+      }),
+    );
+  }
+  // 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.
+  const browserModes = ["auto", "builtin", "extension"];
+  if (browserModes.includes(settings.browserMode)) {
+    target = groups.workspace;
+    const seg = el("div", "seg setting-seg");
+    seg.setAttribute("role", "radiogroup");
+    seg.setAttribute("aria-label", t("settings.browserMode"));
+    for (const mode of browserModes) {
+      const chosen = mode === settings.browserMode;
+      const button = el("button", "seg-item" + (chosen ? " on" : ""), t("settings.browserMode." + mode));
+      button.type = "button";
+      button.setAttribute("role", "radio");
+      button.setAttribute("aria-checked", chosen ? "true" : "false");
+      button.addEventListener("click", () => {
+        if (chosen) return;
+        seg.querySelectorAll("button").forEach((b) => (b.disabled = true));
+        void api("/settings/browser-mode", { mode }).then(showSettings);
+      });
+      seg.appendChild(button);
+    }
+    const body = field(t("settings.browserMode"), "", t("settings.browserModeHint." + settings.browserMode), seg);
+
+    // Your own browser is reached through the extension, so the row says
+    // whether it is reachable now, and where to get it when it is not.
+    const ext = settings.browserExtension || {};
+    const status = el("div", "setting-status small");
+    status.appendChild(el("span", "status-dot" + (ext.connected ? " ok" : "")));
+    status.appendChild(document.createTextNode(t(ext.connected ? "settings.extensionConnected" : "settings.extensionMissing")));
+    body.appendChild(status);
+    body.appendChild(extensionHelp(ext));
+  }
+  const sections = [
+    ["settings.section.workspace", [groups.workspace]],
+    ["settings.section.sync", [groups.sync, groups.memory]],
+    ["settings.section.activity", [groups.activity]],
+    ["settings.section.advanced", [groups.advanced]],
+  ];
+  for (const [title, parts] of sections) {
+    if (!parts.some((part) => part.childNodes.length)) continue;
+    panel.appendChild(el("div", "section-title", t(title)));
+    for (const part of parts) panel.appendChild(part);
+  }
+  panelBody.appendChild(panel);
+}
+
+/**
+ * Where the money went, and on which model.
+ *
+ * A page rather than a row in Settings, because the question it answers has
+ * more than one shape: what has this cost, what is it costing per model, and
+ * which sessions were the expensive ones. The line under the composer answers
+ * the first for the session in front of you; this answers the rest for the
+ * machine.
+ *
+ * Everything here is read back from the transcripts on disk — nothing is
+ * counted twice, nothing survives a session that was deleted, and a run
+ * started from the terminal is in the totals the same as one started here.
+ */
+/**
+ * The permission policy, on a page.
+ *
+ * Everything the Settings row summarises: the mode, the rules in each of the
+ * three kinds, what was approved for this session only, and the writable
+ * roots — the one editable thing here, which is why the page exists rather
+ * than a taller row. A textarea inside a disclosure inside a scrolling page
+ * was an editor nobody could see the whole of while typing in it.
+ */
+async function showPermissions() {
+  const settings = await getJson("/settings");
+  if (shownPanel !== "permissions") return;
+  panelBody.replaceChildren();
+  if (settings.error) return void panelBody.appendChild(panelError(settings.error));
+
+  const workspace = settings.workspace || {};
+  const rules = settings.permissions || {};
+
+  const panel = el("div", "panel");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("perms.title")));
+  const back = el("button", "ghost", t("usage.back"));
+  back.type = "button";
+  back.addEventListener("click", () => {
+    setNav("nav-settings");
+    void showSettings();
+  });
+  head.appendChild(back);
+  panel.appendChild(head);
+  panelBody.appendChild(panel);
+
+  // A labelled block: what the label names, printed as typed.
+  const listing = (label, text, faint) => {
+    const group = el("div", "setting-list");
+    group.appendChild(el("div", "muted small", label));
+    const list = el("div", "mono small" + (faint ? " scroll-box" : ""));
+    if (faint) list.style.opacity = ".7";
+    list.textContent = text;
+    group.appendChild(list);
+    return group;
+  };
+
+  const card = (title) => {
+    panel.appendChild(el("h3", "section-title", title));
+    const box = el("section", "row-card perms-card");
+    panel.appendChild(box);
+    return box;
+  };
+
+  // The mode first, because it decides what the rules below are exceptions to.
+  // Drawn on the scale it sits on, so "workspace-write" reads as the middle
+  // of three rather than as a word to look up.
+  const modes = ["read-only", "workspace-write", "full-access"];
+  const modeCard = card(t("perms.mode"));
+  const modeRow = el("div", "perm-mode");
+  const current = workspace.mode || "";
+  modeRow.appendChild(el("span", "perm-mode-name " + current, current || "—"));
+  if (modes.indexOf(current) >= 0) {
+    const steps = el("div", "perm-mode-steps");
+    for (const mode of modes) steps.appendChild(el("span", "perm-mode-step" + (mode === current ? " on" : ""), mode));
+    modeRow.appendChild(steps);
+  }
+  modeCard.appendChild(modeRow);
+  if (modes.indexOf(current) >= 0) modeCard.appendChild(el("div", "muted small", t("perms.modeHint." + current)));
+
+  const rulesCard = card(t("settings.rules"));
+  rulesCard.appendChild(el("div", "muted small", t("settings.rulesHint")));
+  const group = (kind, title, items) => {
+    const box = el("div", "perm-group");
+    const head = el("div", "perm-group-head " + kind, title);
+    head.appendChild(el("span", "n", String(items.length)));
+    box.appendChild(head);
+    const chips = el("div", "perm-chips");
+    for (const item of items) {
+      const chip = el("span", "perm-chip " + kind, item);
+      chip.title = item;
+      chips.appendChild(chip);
+    }
+    box.appendChild(chips);
+    rulesCard.appendChild(box);
+  };
+  let any = false;
+  for (const kind of ["allow", "ask", "deny"]) {
+    if (!rules[kind] || !rules[kind].length) continue;
+    any = true;
+    group(kind, t("perms.kind." + kind), rules[kind]);
+  }
+  const session = rules.sessionAllow || [];
+  if (session.length) {
+    any = true;
+    group("session", t("settings.sessionApproved") + " — " + t("settings.notPersisted"), session);
+  }
+  if (!any) rulesCard.appendChild(el("div", "perm-empty", t("perms.noRules")));
+
+  // The roots, and only where they mean anything: in every other mode the
+  // list is not consulted, and an editor for it would be a control that does
+  // nothing until a setting somewhere else changes.
+  if (workspace.mode === "workspace-write") {
+    const all = workspace.writableRoots || [];
+    const chosen = settings.configuredRoots || [];
+    const derived = all.filter((root) => chosen.indexOf(root) < 0);
+
+    const writes = card(t("perms.writes"));
+    writes.previousSibling.appendChild(el("span", "perm-count", String(all.length)));
+    writes.appendChild(el("div", "muted small", t("perms.writesHint", { n: all.length })));
+
+    // Yours, and editable. A textarea rather than a list with buttons because
+    // the thing being edited is a handful of paths, and typing one is what
+    // someone came here to do.
+    const mine = el("div", "setting-list");
+    mine.appendChild(el("div", "muted small", t("perms.mine")));
+    writes.appendChild(mine);
+
+    const box = el("textarea", "boxed");
+    box.value = chosen.join("\n");
+    box.rows = Math.max(3, chosen.length + 1);
+    box.spellcheck = false;
+    box.style.width = "100%";
+    box.placeholder = t("perms.placeholder");
+    mine.appendChild(box);
+
+    const save = el("button", "ghost", t("perms.save"));
+    save.type = "button";
+    save.addEventListener("click", () => {
+      save.disabled = true;
+      const roots = box.value.split("\n").map((line) => line.trim()).filter(Boolean);
+      void api("/settings/writable-roots", { roots }).then((result) => {
+        save.disabled = false;
+        if (result && result.error) return void addNotice(result.error, "err");
+        // Said out loud, because the list above will go on showing the old
+        // one until then and someone would reasonably read that as a failure.
+        addNotice(t("perms.saved"));
+      });
+    });
+    mine.appendChild(save);
+
+    if (derived.length) {
+      // "more" only reads right when there were some above it. With nothing
+      // configured — the common case — every one of them is derived.
+      const group = el("div", "setting-list");
+      group.appendChild(el("div", "muted small", chosen.length
+        ? t("perms.derivedMore", { n: derived.length })
+        : t("perms.derivedAll", { n: derived.length })));
+      // The last segment is what tells fifty plugin paths apart; the long
+      // shared prefix is dimmed and gives way first when the line is short.
+      const list = el("div", "perm-roots");
+      for (const root of derived) {
+        const cut = root.replace(/[\\/]+$/, "").search(/[^\\/]+$/);
+        const line = el("div", "perm-root");
+        line.title = root;
+        const dir = el("span", "dir");
+        dir.appendChild(el("bdi", null, cut > 0 ? root.slice(0, cut) : ""));
+        line.appendChild(dir);
+        line.appendChild(el("span", "base", cut > 0 ? root.slice(cut) : root));
+        list.appendChild(line);
+      }
+      group.appendChild(list);
+      writes.appendChild(group);
+    }
+  }
+}
+
+/*
+ * ---- the permission trail -------------------------------------------------
+ *
+ * Two readers of one record. The Settings row shows the last few decisions of
+ * the session someone is in; the page shows every session on this machine,
+ * filtered by how each decision ended. They share the pairing and the line
+ * below rather than each having a copy — the pairing is the part that was
+ * wrong before it existed, and one of them would have kept being wrong.
+ */
+
+/** How much of the trail the Settings row shows before it points at the page. */`;
+//# sourceMappingURL=routines.js.map