@nanocollective/roster 0.1.0-alpha.1

package/templates/portal/css/markdown.css

@@ -0,0 +1,54 @@
+/* One renderer, two sizes: .cbody is a comment in a thread, .doc is a file being read.
+   Everything shared lives on .md so a fix reaches both. */
+
+.md{line-height:1.65}
+.md>:first-child{margin-top:0}
+.md p{margin:0 0 10px}
+.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{color:var(--ink);font-weight:600;line-height:1.3;
+      margin:22px 0 8px;letter-spacing:-.012em}
+.md h1{font-size:20px} .md h2{font-size:17px} .md h3{font-size:15px}
+.md h4,.md h5,.md h6{font-size:13.5px;color:var(--ink-dim)}
+.md h1,.md h2{padding-bottom:6px;border-bottom:1px solid var(--line)}
+.md ul,.md ol{margin:0 0 10px;padding-left:20px}
+.md li{margin:3px 0}
+.md li>ul,.md li>ol{margin:4px 0 0}
+.md ul.tasks{list-style:none;padding-left:1px}
+.md .box{color:var(--ink-faint);margin-right:6px;display:inline-flex;--ic:14px;
+      vertical-align:-3px}
+.md code{font:12px var(--mono);color:var(--accent);background:var(--panel-2);
+      padding:1px 4px;border-radius:4px;word-break:break-word}
+.md pre{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
+      padding:11px 13px;font:12px/1.62 var(--mono);margin:10px 0;color:var(--ink-dim);
+      overflow-x:auto;white-space:pre}
+.md pre code{background:none;padding:0;color:inherit;font-size:inherit}
+.md a{color:var(--will)}
+.md blockquote{margin:10px 0;padding:2px 0 2px 12px;border-left:2px solid var(--line);color:var(--ink-dim)}
+.md hr{border:0;border-top:1px solid var(--line);margin:16px 0}
+.md img{max-width:100%;border-radius:6px;background:var(--panel-2)}
+.md .ctable{overflow-x:auto;margin:10px 0;max-width:100%}
+.md table{border-collapse:collapse;font-size:12.5px;width:100%}
+.md th,.md td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
+.md th{background:var(--panel-2);color:var(--ink);font-weight:600;white-space:nowrap}
+.md td{color:var(--ink-dim)}
+.md td b,.md td strong{color:var(--ink)}
+.cbody{margin-top:8px;font-size:13.5px;max-width:74ch}
+.cbody h1{font-size:17px} .cbody h2{font-size:15.5px} .cbody h3{font-size:14px}
+.doc{font-size:14px;max-width:80ch}
+
+/* A reference to another issue or PR, as a chip rather than a raw link: half of a status
+   issue is #113, and a wall of blue URLs is the thing that makes them unreadable. */
+.ref{display:inline-block;font:11.5px var(--mono);color:var(--will);background:var(--panel-2);
+     border:1px solid var(--line);border-radius:20px;padding:0 7px;text-decoration:none;
+     white-space:nowrap;line-height:1.65}
+.ref:hover{border-color:var(--will);background:color-mix(in srgb,var(--will) 14%,transparent)}
+.ref.pr{color:var(--measured)}
+.ref.pr:hover{border-color:var(--measured);background:color-mix(in srgb,var(--measured) 14%,transparent)}
+
+/* @cto and @you are how work is handed between people here, so they are marked
+   rather than left as prose. `.you` is anyone on this org's roster; a stranger stays plain. */
+.at{display:inline-block;font:11.5px var(--mono);color:var(--ink-dim);background:var(--panel-2);
+    border:1px solid var(--line);border-radius:20px;padding:0 7px;text-decoration:none;
+    white-space:nowrap;line-height:1.65}
+.at:hover{color:var(--ink);border-color:var(--ink-faint)}
+.at.you{color:var(--derived);border-color:color-mix(in srgb,var(--derived) 40%,transparent)}
+.at.you:hover{background:color-mix(in srgb,var(--derived) 14%,transparent);border-color:var(--derived)}

package/templates/portal/css/setup.css

@@ -0,0 +1,106 @@
+/* The setup screen, and the copy-a-prompt panel it shares with the authoring screens. */
+
+.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;
+      padding:18px 20px 20px;margin-bottom:14px}
+.step.done{border-color:var(--accent-dim)}
+.stephead{display:flex;align-items:center;gap:11px;margin-bottom:10px}
+.stephead h2{margin:0;font:600 16px var(--sans);letter-spacing:-.01em}
+.stepn{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
+      background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
+      font:600 11px var(--mono)}
+.step.done .stepn{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--bg)}
+
+/* ---------- the form ---------- */
+
+.setupform{display:grid;gap:13px;margin:14px 0 18px;max-width:520px}
+.field{display:grid;gap:4px}
+.field>span{font:600 12px var(--sans);color:var(--ink-dim)}
+.field input,.field select{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
+      border-radius:7px;padding:8px 11px;font:13px var(--sans);outline:none;width:100%}
+.field input:focus,.field select:focus{border-color:var(--accent-dim)}
+.field small{color:var(--ink-faint);font-size:11.5px;line-height:1.45}
+
+.choices{display:grid;gap:8px;margin:10px 0 4px;max-width:640px}
+.choice{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:start;
+      background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
+      padding:11px 13px;cursor:pointer}
+.choice:has(input:checked){border-color:var(--accent-dim)}
+.choice input{grid-row:1/3;margin-top:3px;accent-color:var(--accent)}
+.choice b{font:600 13px var(--sans)}
+.choice small{color:var(--ink-dim);font-size:12px;line-height:1.45}
+.choice code{grid-column:2;font:10.5px var(--mono);color:var(--ink-faint)}
+
+.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:6px}
+.btn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:7px;
+      padding:8px 13px;font:13px var(--sans);cursor:pointer;text-decoration:none;display:inline-block}
+.btn:hover{border-color:var(--accent-dim)}
+.btn.primary{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--bg);font-weight:600}
+.btn[disabled]{opacity:.5;cursor:default}
+
+.cmd{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;
+      font:12px/1.6 var(--mono);color:var(--ink);overflow-x:auto;white-space:pre-wrap;
+      word-break:break-word;margin:9px 0}
+
+.planout{margin-top:12px}
+.filelist{display:grid;gap:2px;margin:9px 0;max-height:240px;overflow-y:auto;
+      background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:10px 12px}
+.filelist code{font:11px var(--mono);color:var(--ink-dim)}
+
+.manual{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
+      padding:13px 15px;margin:11px 0}
+.manual b{display:block;font:600 13px var(--sans);margin-bottom:4px}
+.manual p{margin:0 0 6px;font-size:13px}
+.manual small{display:block;color:var(--ink-faint);font-size:11.5px;line-height:1.5;margin-bottom:9px}
+
+/* ---------- copy a prompt, paste the answer back ---------- */
+
+.paste{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}
+.paste h3{margin:0 0 5px;font:600 14px var(--sans)}
+.briefpreview{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
+      padding:12px 14px;font:11.5px/1.6 var(--mono);max-height:340px;overflow:auto;
+      white-space:pre-wrap;word-break:break-word;margin:10px 0}
+.pastebox{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
+      border-radius:7px;padding:10px 12px;font:12px/1.6 var(--mono);outline:none;resize:vertical;
+      margin:4px 0}
+.pastebox:focus{border-color:var(--accent-dim)}
+
+.pasteresult{margin-top:12px}
+/* A model that replied in prose is the common case and not the person's mistake, so this reads
+   as a next step rather than as a failure. */
+.problem{background:var(--panel-2);border:1px solid var(--warn);border-radius:8px;
+      padding:12px 14px;margin-bottom:10px}
+.problem b{display:block;font:600 13px var(--sans);margin-bottom:7px}
+
+.pastefile{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
+      padding:12px 14px;margin-bottom:10px}
+.pastefile.saved{border-color:var(--accent-dim)}
+.pastefile b{font:600 13px var(--mono)}
+.pastefile .meta{margin-left:9px}
+.pastefile .diff{max-height:300px;overflow:auto;margin:9px 0}
+
+/* ---------- the doctor checklist ---------- */
+
+.check{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start;
+      padding:10px 0;border-top:1px solid var(--line)}
+.check:first-child{border-top:none}
+.checkmark{font:600 13px var(--mono);line-height:1.5}
+.check.fail .checkmark{color:var(--err)}
+.check.warn .checkmark{color:var(--warn)}
+.check b{font:600 13px var(--sans);margin-right:8px}
+.check p{margin:3px 0 0;font-size:12.5px;color:var(--ink-dim);line-height:1.5}
+
+/* ---------- the repo picker ---------- */
+
+.repolist{display:grid;gap:1px;max-height:280px;overflow-y:auto;
+      border:1px solid var(--line);border-radius:7px;background:var(--line)}
+.repo{display:flex;align-items:center;justify-content:space-between;gap:12px;
+      background:var(--panel);padding:9px 12px}
+.repo.added{background:var(--panel-2)}
+.repo b{font:600 12.5px var(--mono)}
+.repo .meta{margin-left:8px}
+.repo .sub{margin:2px 0 0;font-size:11.5px}
+
+/* Which of the two things this is: a new org, or one that already runs roster. */
+.verdict{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
+      padding:9px 12px;font-size:12.5px}
+.verdict p{margin:0}

package/templates/portal/index.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>roster</title>
+<!-- Inline, so a local page with no network still has a tab icon and the console stays clean. -->
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%237cc7a4'/%3E%3C/svg%3E">
+<!-- Stylesheets and modules are served from /assets by `roster portal`. No build step:
+     editing one of these files and reloading is the whole edit loop. -->
+<link rel="stylesheet" href="/assets/css/base.css">
+<link rel="stylesheet" href="/assets/css/layout.css">
+<link rel="stylesheet" href="/assets/css/markdown.css">
+<link rel="stylesheet" href="/assets/css/brain.css">
+<link rel="stylesheet" href="/assets/css/inbox.css">
+<link rel="stylesheet" href="/assets/css/graph.css">
+<link rel="stylesheet" href="/assets/css/diff.css">
+<link rel="stylesheet" href="/assets/css/health.css">
+<link rel="stylesheet" href="/assets/css/setup.css">
+</head>
+<body>
+<div class="app">
+  <aside class="side">
+    <div class="brand">roster<small id="orgname">loading…</small></div>
+    <button class="refreshall" id="refreshall" title="Reload everything from disk (r)">
+      <span class="sync" data-icon="refresh"></span><span id="loaded">data now</span>
+    </button>
+
+    <button class="nav top" id="inboxnav" data-view="inbox">
+      <span class="ic" data-icon="inbox"></span> Inbox
+      <span class="n" id="inboxcount"></span>
+    </button>
+    <button class="nav" id="orgnav" data-view="org">
+      <span class="ic" data-icon="file"></span> Org
+    </button>
+    <button class="nav" id="staffnav" data-view="staff">
+      <span class="ic" data-icon="person"></span> Staff
+    </button>
+    <button class="nav" id="docsnav" data-view="docs">
+      <span class="ic" data-icon="docs"></span> Docs
+    </button>
+
+    <div class="sect">Staff</div>
+    <div id="stafflist"></div>
+
+    <div class="sidefoot">
+      <button class="nav" id="theme">Theme</button>
+    </div>
+  </aside>
+  <main id="main"><p class="sub">Loading…</p></main>
+</div>
+
+<script type="module" src="/assets/js/app.js"></script>
+</body>
+</html>

package/templates/portal/js/api.js

@@ -0,0 +1,74 @@
+/* Everything the page asks the local server for, in one place. */
+
+const json = async (url) => (await fetch(url, { cache: "no-store" })).json();
+
+export const getOrg = () => json("/api/org");
+export const getDocs = () => json("/api/docs");
+export const getInbox = (force) => json("/api/inbox" + (force ? "?refresh=1" : ""));
+export const getSync = () => json("/api/sync").catch(() => null);
+
+export const getDoc = (page) =>
+  fetch("/api/doc?page=" + encodeURIComponent(page), { cache: "no-store" }).then((r) => r.text());
+
+export const fileUrl = (path) => "/api/file?path=" + encodeURIComponent(path);
+export const getFile = (path) => fetch(fileUrl(path)).then((r) => r.text());
+
+export const getThread = (repo, number, kind) =>
+  json(
+    "/api/thread?repo=" + encodeURIComponent(repo) + "&number=" + number + "&kind=" + kind,
+  );
+
+export const diffUrl = (dir, sha, path) =>
+  "/api/diff?dir=" + encodeURIComponent(dir) + "&sha=" + encodeURIComponent(sha) +
+  (path ? "&path=" + encodeURIComponent(path) : "");
+
+/* Writes need a POST with a custom header, which is what stops a random page in the
+   browser from reaching this server. */
+export async function post(payload, url = "/api/act") {
+  const res = await fetch(url, {
+    method: "POST",
+    headers: { "content-type": "application/json", "x-roster": "1" },
+    body: JSON.stringify(payload),
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok || data.error) throw new Error(data.error || "failed with " + res.status);
+  return data;
+}
+
+/* ------------------------------- setup and authoring ------------------------------- */
+
+export const getSetup = () => json("/api/setup/status");
+
+export const planTenant = (params) =>
+  json("/api/setup/plan?" + new URLSearchParams(params).toString());
+
+export const createTenant = (params) => post(params, "/api/setup/apply");
+
+/** The copyable prompt, with every file it refers to carried inside it. */
+export const getBrief = (kind, staff) =>
+  json("/api/brief?kind=" + encodeURIComponent(kind) + (staff ? "&staff=" + encodeURIComponent(staff) : ""));
+
+/** Parse what came back from the model. Reads only: saving is a second, deliberate step. */
+export const parsePaste = (kind, staff, answer) =>
+  fetch("/api/paste", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ kind, staff, answer }),
+  }).then((r) => r.json());
+
+export const saveFile = (path, text, message) => post({ path, text, message }, "/api/save");
+
+/** The scan every checklist is derived from. */
+export const getDoctor = (offline) => json("/api/doctor" + (offline ? "?offline=1" : ""));
+
+/** Those findings as one brief for a coding agent, plus the split into who can do what. */
+export const getFix = (offline) => json("/api/fix" + (offline ? "?offline=1" : ""));
+
+export const listRepos = (org) => json("/api/setup/repos?org=" + encodeURIComponent(org));
+export const addRepo = (name, role) => post({ name, role }, "/api/setup/add-repo");
+export const startApp = (staff, scope) => post({ staff, scope }, "/api/setup/app");
+export const appResult = (state) => json("/api/setup/app-result?state=" + encodeURIComponent(state));
+
+/** Does this org already run roster. "Create" and "join" are different answers. */
+export const checkOrg = (org) => json("/api/setup/check-org?org=" + encodeURIComponent(org));
+export const joinOrg = (org) => post({ org }, "/api/setup/join");

package/templates/portal/js/app.js

@@ -0,0 +1,282 @@
+/* The shell: boot, the sidebar, and dispatching a view into <main>. */
+
+import { getOrg } from "./api.js";
+import { $, el, store } from "./dom.js";
+import { icon, iconHTML } from "./icons.js";
+import { setPeople } from "./md.js";
+import { refreshAll, stampLoaded, syncNotice } from "./refresh.js";
+import { onRender } from "./router.js";
+import { ORG_WIDE, S, VIEWS, applyHash, openCount, writeHash } from "./state.js";
+import { viewBrain } from "./views/brain.js";
+import { viewChanged } from "./views/changed.js";
+import { viewDocs } from "./views/docs.js";
+import { viewGraph } from "./views/graph.js";
+import { viewHealth } from "./views/health.js";
+import { viewInbox } from "./views/inbox.js";
+import { viewOrg } from "./views/org.js";
+import { viewPrompt } from "./views/prompt.js";
+import { viewSetup } from "./views/setup.js";
+import { viewStaff } from "./views/staff.js";
+
+const SCREEN = {
+  inbox: viewInbox,
+  org: viewOrg,
+  staff: viewStaff,
+  docs: viewDocs,
+  brain: viewBrain,
+  memory: viewBrain,
+  prompt: viewPrompt,
+  graph: viewGraph,
+  changed: viewChanged,
+  health: viewHealth,
+};
+
+/**
+ * Fields of the org export this page cannot render without.
+ *
+ * The portal reads its stylesheets and modules per request, so editing one and reloading
+ * works. Its *server* is loaded once, at start. A portal left running across an upgrade
+ * therefore serves new assets against an old API, and the first sign of it was an Org screen
+ * asking for `undefined/org.yaml`. A missing field is version skew, and skew should say so.
+ */
+const NEEDS = ["org", "name", "opsName", "staff"];
+
+export async function boot() {
+  initTheme();
+
+  /* Before there is a tenant the server answers every data route with `mode: setup`. That is
+     not an error state: it is the first thing a new user ever sees, and the whole page becomes
+     the thing that fixes it. */
+  const first = await getOrg();
+  if (first && first.mode === "setup") {
+    document.body.dataset.setup = "1";
+    $("#orgname").textContent = "no org yet";
+    for (const slot of document.querySelectorAll("[data-icon]")) {
+      slot.innerHTML = iconHTML(slot.dataset.icon);
+    }
+    await viewSetup($("#main"));
+    return;
+  }
+
+  S.data = first;
+  S.loadedAt = new Date();
+  S.staffHandle = S.data.staff[0]?.handle ?? null;
+  $("#orgname").textContent = S.data.name + " · " + S.data.staff.length + " staff";
+
+  learnPeople();
+  // The shell's own icons are markup, so they are filled in once the module is running
+  // rather than pasted into index.html as inline SVG nobody would ever read.
+  for (const slot of document.querySelectorAll("[data-icon]")) {
+    slot.innerHTML = iconHTML(slot.dataset.icon);
+  }
+  onRender(render);
+  applyHash();
+  paintSidebar();
+
+  $("#inboxnav").onclick = () => { S.view = "inbox"; render(); };
+  $("#staffnav").onclick = () => { S.view = "staff"; render(); };
+  $("#orgnav").onclick = () => { S.view = "org"; render(); };
+  $("#docsnav").onclick = () => { S.view = "docs"; render(); };
+  $("#refreshall").onclick = () => refreshAll(false);
+
+  // Coming back to the tab after a run should show the run.
+  addEventListener("focus", () => {
+    if (S.loadedAt && Date.now() - S.loadedAt > 30000) refreshAll(false);
+  });
+  addEventListener("keydown", (e) => {
+    if (e.key === "r" && !e.metaKey && !e.ctrlKey &&
+        !/^(INPUT|TEXTAREA|SELECT)$/.test(e.target?.tagName ?? "")) {
+      e.preventDefault();
+      refreshAll(false);
+    }
+  });
+  setInterval(stampLoaded, 30000);
+
+  // Only the state changes here. This used to re-run half of boot on every navigation,
+  // which stacked up a focus listener, a keydown listener and an interval each time.
+  addEventListener("hashchange", () => {
+    S.applyingHash = true;
+    applyHash();
+    S.applyingHash = false;
+    render();
+  });
+
+  render();
+}
+
+/** Say it plainly, rather than rendering half a page built on values that are not there. */
+function stale(missing) {
+  const m = $("#main");
+  m.replaceChildren();
+  const box = el("div", { className: "notice" });
+  box.innerHTML =
+    "<b>This page is newer than the portal serving it.</b><br>" +
+    "The stylesheets and modules are read per request, but the server is not: it was loaded " +
+    "when <code>roster portal</code> started. Stop it and start it again.<br><br>" +
+    "<span class=\"meta\">/api/org is not sending: " + missing.join(", ") + "</span>";
+  m.append(box);
+  $("#orgname").textContent = "restart needed";
+}
+
+/* Who `@cto` and `@you` are, so a mention in a thread can point somewhere useful
+   instead of at github.com/cto, which is nobody.
+   A staff mention goes to their repo on GitHub. It used to open their Brain screen here, which
+   read as the page hijacking a click: you are in the middle of a thread, and a mention is
+   about the work, not about their memory. */
+function learnPeople() {
+  const people = new Map();
+  for (const s of S.data.staff) {
+    if (!s.brain) continue;
+    const to = { href: "https://github.com/" + s.brain, title: s.name + " · " + s.brain };
+    people.set(String(s.handle).toLowerCase(), to);
+    if (s.mention) people.set(String(s.mention).replace(/^@/, "").toLowerCase(), to);
+    for (const b of s.bots ?? []) people.set(String(b).toLowerCase(), to);
+  }
+  const human = S.data.human ?? {};
+  if (human.github) {
+    people.set(String(human.github).toLowerCase(), {
+      href: "https://github.com/" + human.github,
+      title: human.name ?? human.github,
+    });
+  }
+  setPeople(people);
+}
+
+/* ------------------------------- the sidebar ------------------------------ */
+
+/**
+ * Staff are rows that unfold into their own views.
+ *
+ * This used to be a dropdown, then the chosen name repeated underneath it, then four
+ * unlabelled views — three pieces you had to assemble into "these belong to that person".
+ * Nesting says it instead.
+ */
+let paintedRoster = null;
+
+function paintSidebar() {
+  const host = $("#stafflist");
+  host.replaceChildren();
+  paintedRoster = S.data.staff.map((s) => s.handle).join(" ");
+
+  for (const s of S.data.staff) {
+    const open = s.handle === S.staffHandle;
+
+    const head = el("button", { className: "nav staffrow" });
+    head.dataset.staff = s.handle;
+    head.setAttribute("aria-expanded", String(open));
+    head.append(
+      icon("chevron", "caret"),
+      el("span", { className: "t", textContent: s.name }),
+      el("span", { className: "hh", textContent: s.handle }),
+    );
+
+    const views = el("div", { className: "staffviews" });
+    views.hidden = !open;
+    for (const [id, label] of VIEWS) {
+      const b = el("button", { className: "nav subnav", textContent: label });
+      b.dataset.view = id;
+      b.dataset.staff = s.handle;
+      b.onclick = () => {
+        if (S.staffHandle !== s.handle) S.openFile = null;
+        S.staffHandle = s.handle;
+        S.view = id;
+        render();
+      };
+      views.append(b);
+    }
+
+    head.onclick = () => {
+      // Clicking the staff member you are already on folds them away; clicking another
+      // switches to them and keeps whichever view you were reading.
+      if (S.staffHandle === s.handle && !views.hidden) {
+        views.hidden = true;
+        head.setAttribute("aria-expanded", "false");
+        return;
+      }
+      S.staffHandle = s.handle;
+      S.openFile = null;
+      if (ORG_WIDE.has(S.view)) S.view = "brain";
+      render();
+    };
+
+    host.append(head, views);
+  }
+}
+
+/** Which rows are lit, and which staff member is unfolded. */
+function markSidebar() {
+  for (const b of document.querySelectorAll(".nav")) {
+    if (!b.dataset.view) continue;
+    const mine = !b.dataset.staff || b.dataset.staff === S.staffHandle;
+    b.setAttribute("aria-current", String(mine && b.dataset.view === S.view));
+  }
+  for (const head of document.querySelectorAll(".staffrow")) {
+    const open = head.dataset.staff === S.staffHandle && !ORG_WIDE.has(S.view);
+    head.setAttribute("aria-expanded", String(open));
+    head.setAttribute("aria-selected", String(head.dataset.staff === S.staffHandle));
+    if (head.nextElementSibling) head.nextElementSibling.hidden = !open;
+  }
+}
+
+/* --------------------------------- render --------------------------------- */
+
+function render() {
+  /* Checked on every paint rather than once at boot, because `refreshAll` re-fetches the
+     export and a portal can go stale under a page that is already open. */
+  const missing = NEEDS.filter((k) => S.data?.[k] === undefined);
+  if (missing.length) return stale(missing);
+
+  // A refresh can add or remove a staff member, and the sidebar is built once.
+  const roster = S.data.staff.map((s) => s.handle).join(" ");
+  if (roster !== paintedRoster) paintSidebar();
+  markSidebar();
+  const ic = $("#inboxcount");
+  if (ic) ic.textContent = S.inbox ? String(openCount()) : "";
+  writeHash(true);
+  stampLoaded();
+
+  const m = $("#main");
+  m.replaceChildren();
+  const notice = syncNotice();
+  if (notice) m.append(notice);
+  (SCREEN[S.view] ?? viewBrain)(m);
+}
+
+/* --------------------------------- theme ---------------------------------- */
+
+/* Three states on purpose: "system" is the default and has to be reachable again after
+   someone has tried both others. */
+const THEMES = ["system", "light", "dark"];
+
+function applyTheme(name) {
+  if (name === "system") document.documentElement.removeAttribute("data-theme");
+  else document.documentElement.setAttribute("data-theme", name);
+  const b = $("#theme");
+  if (b) {
+    b.replaceChildren(
+      icon(name === "light" ? "sun" : name === "dark" ? "moon" : "monitor", "ic"),
+      "Theme",
+      el("span", { className: "n", textContent: name }),
+    );
+  }
+}
+
+function initTheme() {
+  let theme = store("roster.theme") ?? "system";
+  if (!THEMES.includes(theme)) theme = "system";
+  applyTheme(theme);
+  const b = $("#theme");
+  if (b) {
+    b.onclick = () => {
+      theme = THEMES[(THEMES.indexOf(theme) + 1) % THEMES.length];
+      store("roster.theme", theme);
+      applyTheme(theme);
+    };
+  }
+}
+
+export { render };
+
+boot().catch((e) => {
+  $("#main").innerHTML = '<p class="empty err">' + String(e?.message ?? e) + "</p>";
+});

package/templates/portal/js/dialog.js

@@ -0,0 +1,70 @@
+/* Asking for more than a sentence.
+ *
+ * `prompt()` is one line with no wrapping, which is the wrong shape for describing a change to
+ * a prompt: the useful answers are two or three sentences and often a bullet list. Native
+ * `<dialog>` gives the backdrop, the focus trap and Escape without any of it being written
+ * here, which is the whole reason to use it rather than a div.
+ */
+
+import { el, grow } from "./dom.js";
+
+/**
+ * @returns the text, or null if they cancelled.
+ */
+export function askText({ title, hint, value = "", placeholder = "", confirm = "Continue" }) {
+  const box = document.createElement("dialog");
+  // The shim in the tests has no dialog element. Falling back keeps a view renderable there
+  // rather than throwing halfway through a paint.
+  if (typeof box.showModal !== "function") {
+    return Promise.resolve(globalThis.prompt?.(title, value) ?? null);
+  }
+
+  box.className = "ask";
+  box.append(el("h3", { textContent: title }));
+  if (hint) box.append(el("p", { className: "askhint", textContent: hint }));
+
+  const ta = el("textarea", { value, placeholder, rows: 5 });
+  box.append(ta);
+
+  const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
+  const go = el("button", { className: "ghbtn primary", textContent: confirm });
+  box.append(
+    el("div", { className: "row askrow" }, [
+      el("span", { className: "meta", textContent: "⌘⏎ to " + confirm.toLowerCase() }),
+      cancel,
+      go,
+    ]),
+  );
+
+  return new Promise((resolve) => {
+    let answer = null;
+    const done = (text) => {
+      answer = text;
+      box.close();
+    };
+    cancel.onclick = () => done(null);
+    go.onclick = () => done(ta.value.trim() || null);
+    ta.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        done(ta.value.trim() || null);
+      }
+    });
+    // Escape and the backdrop both close it, and both mean no.
+    box.addEventListener("close", () => {
+      box.remove();
+      resolve(answer);
+    });
+    box.addEventListener("click", (e) => {
+      if (e.target === box) done(null);
+    });
+
+    document.body.append(box);
+    box.showModal();
+    grow(ta);
+    ta.focus();
+    // Put the caret at the end of a pre-filled answer rather than selecting it, so typing
+    // adds to what a finding already said instead of replacing it.
+    ta.setSelectionRange?.(ta.value.length, ta.value.length);
+  });
+}