@nanocollective/roster 0.1.0-alpha.2 → 0.1.0-alpha.21

package/templates/portal/css/setup.css

@@ -1,53 +1,63 @@
 /* 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)}
+.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
+      padding:20px 22px 22px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
+.step.done{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
 .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);
+.stephead h2{margin:0;font:600 16px var(--sans);letter-spacing:-.018em}
+.stepn{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
+      background:var(--surface-2);border:1px solid transparent;color:var(--ink-dim);
       font:600 11px var(--mono)}
-.step.done .stepn{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--bg)}
+.step.done .stepn{background:var(--accent-fill);border-color:transparent;color:var(--accent-ink)}
 
 /* ---------- 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 input,.field select{background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 11px;font:13px var(--sans);outline:none;width:100%;
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
+.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 .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)}
+      background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
+      padding:12px 14px;cursor:pointer;
+      transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}
+.choice:hover{border-color:var(--border-strong)}
+.choice:has(input:checked){border-color:var(--accent-dim);background:var(--accent-soft)}
 .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;
+.btn{background:var(--surface-2);border:1px solid transparent;color:var(--ink);border-radius:8px;
+      padding:7px 14px;font:500 13px var(--sans);cursor:pointer;text-decoration:none;display:inline-block;
+      transition:background .15s var(--ease),opacity .15s var(--ease)}
+.btn:hover{background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
+.btn:active{opacity:.8}
+/* The full accent, not the dim one. Dim on the page background is pale-green-on-white with
+   near-white text: the button that does the main thing on the screen read as disabled. */
+.btn.primary{background:var(--accent-fill);border-color:transparent;color:var(--accent-ink);font-weight:600}
+.btn.primary:hover{background:var(--accent-fill);opacity:.88}
+.btn[disabled]{opacity:.45;cursor:default}
+
+.cmd{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);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{display:grid;gap:2px;margin:9px 0;
+      background:var(--bg);border:1px solid var(--line);border-radius:var(--r);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;
+.manual{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
       padding:13px 15px;margin:11px 0}
+/* A file step that is written says so in the border too, the way a finished step does. */
+.manual.done{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
 .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}
@@ -56,32 +66,33 @@
 
 .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;
+.briefpreview{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
       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;
+.pastebox{width:100%;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:10px 12px;font:12px/1.6 var(--mono);outline:none;resize:vertical;
       margin:4px 0}
-.pastebox:focus{border-color:var(--accent-dim)}
+.pastebox:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 
 .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;
+.problem{background:color-mix(in srgb,var(--warn) 9%,transparent);
+      border:1px solid transparent;border-radius:var(--r);
       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;
+.pastefile{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
       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}
+.pastefile .diff{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{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;
+      padding:12px 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)}
@@ -92,15 +103,48 @@
 /* ---------- 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;
+      border:1px solid var(--line);border-radius:var(--r);background:var(--line)}
+/* Scoped to the picker. Bare `.repo` also matched the project label on every inbox row,
+   which is where the white box and the stray padding behind MARKETING came from. */
+.repolist .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}
+.repolist .repo.added{background:var(--panel-2)}
+.repolist .repo b{font:600 12.5px var(--mono)}
+.repolist .repo .meta{margin-left:8px}
+.repolist .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;
+.verdict{background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r);
       padding:9px 12px;font-size:12.5px}
 .verdict p{margin:0}
+
+.plansteps{margin:6px 0 12px;padding-left:20px;font-size:13.5px;line-height:1.7}
+.planfiles{margin:0 0 12px}
+.planfiles summary{cursor:pointer;color:var(--ink-dim);font-size:12.5px}
+
+/* ---------- the numbered to-do list ---------- */
+
+.todos{display:grid;gap:10px;margin-bottom:14px}
+.todo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
+.todo.done{padding:11px 18px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
+.todohead{display:flex;align-items:center;gap:11px}
+.todohead h3{margin:0;font:600 14.5px var(--sans);flex:1}
+.todon{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
+      background:var(--surface-2);color:var(--ink-dim);font:600 11px var(--mono)}
+.todo.done .todon{background:var(--accent-fill);color:var(--accent-ink)}
+.todopill{font:600 11px var(--sans);padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-dim)}
+.todo.done .todopill{background:var(--accent-soft);color:var(--accent)}
+.todohint{margin:8px 0 0 35px}
+.todobody{margin:12px 0 0 35px}
+.todobody .row{margin-top:10px}
+.qfield{display:grid;gap:5px;margin:0 0 12px}
+.qfield span{font:600 12.5px var(--sans)}
+.qfield input{background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 10px;font:13px var(--sans)}
+.modes{display:inline-flex;gap:2px;padding:3px;margin:0 0 14px;background:var(--surface-2);
+      border-radius:var(--r);flex-wrap:wrap}
+.mode{border:0;background:none;color:var(--ink-dim);font:600 12.5px var(--sans);padding:6px 12px;
+      border-radius:calc(var(--r) - 2px);cursor:pointer}
+.mode:hover{color:var(--ink)}
+.mode.on{background:var(--bg-elev);color:var(--ink);box-shadow:var(--shadow-sm)}
+.modes + div > .paste{border-top:0;margin-top:0;padding-top:0}

package/templates/portal/index.html

@@ -5,7 +5,7 @@
 <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">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%2334c759'/%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">
@@ -16,20 +16,34 @@
 <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/runs.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>
+    <div class="brand"><span class="mark"></span>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>
 
+    <!-- Only while something is left to set up; app.js decides. -->
+    <button class="nav top" id="setupnav" data-view="setup" hidden>
+      <span class="ic" data-icon="task-done"></span> Getting started
+    </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>
+    <!-- "Pending work", not "Pull requests": what is behind it is finished work waiting on you,
+         and the word for how it is delivered is not the word for what it is. -->
+    <button class="nav" id="prsnav" data-view="prs" title="Finished work waiting on you to merge">
+      <span class="ic" data-icon="merged"></span> Pending work
+      <span class="n" id="prcount"></span>
+    </button>
+    <button class="nav" id="runsnav" data-view="runs" title="What ran, how it ended, and what it cost">
+      <span class="ic" data-icon="play"></span> Runs
+    </button>
     <button class="nav" id="orgnav" data-view="org">
       <span class="ic" data-icon="file"></span> Org
     </button>
@@ -40,7 +54,14 @@
       <span class="ic" data-icon="docs"></span> Docs
     </button>
 
-    <div class="sect">Staff</div>
+    <!-- The heading is the fold. Collapsed, it carries the count, because a hidden list still
+         has to say how much it is hiding. -->
+    <!-- Named apart from the Staff screen above it: two controls both called "Staff" is how a
+         click meant for the screen landed on the fold, for people and for automation alike. -->
+    <button class="sect sectfold" id="stafffold" aria-expanded="false" aria-controls="stafflist"
+            aria-label="Staff list" title="Show or hide each staff member's own screens">
+      <span class="caret" data-icon="chevron"></span>Staff<span class="n" id="staffcount" hidden></span>
+    </button>
     <div id="stafflist"></div>
 
     <div class="sidefoot">

package/templates/portal/js/api.js

@@ -7,6 +7,21 @@ export const getDocs = () => json("/api/docs");
 export const getInbox = (force) => json("/api/inbox" + (force ? "?refresh=1" : ""));
 export const getSync = () => json("/api/sync").catch(() => null);
 
+/** Every staff member's recent runs and 30-day spend. Online only; offline it says so. */
+export const getRuns = (force) => json("/api/runs" + (force ? "?refresh=1" : ""));
+
+/** The repos org.yaml lists. Off disk, so the new-issue form does not wait on the inbox. */
+export const getRepos = () => json("/api/repos");
+
+/** What one repo's labels actually are, so they can be offered rather than typed. */
+export const getLabels = (repo) => json("/api/labels?repo=" + encodeURIComponent(repo));
+
+/** Full-text across the docs. Titles are not enough: what you want is usually a paragraph. */
+export const searchDocs = (q) => json("/api/docsearch?q=" + encodeURIComponent(q));
+
+/** Every file in the org layer that the portal may write, off disk rather than hardcoded. */
+export const getOrgLayer = () => json("/api/orglayer");
+
 export const getDoc = (page) =>
   fetch("/api/doc?page=" + encodeURIComponent(page), { cache: "no-store" }).then((r) => r.text());
 
@@ -18,6 +33,10 @@ export const getThread = (repo, number, kind) =>
     "/api/thread?repo=" + encodeURIComponent(repo) + "&number=" + number + "&kind=" + kind,
   );
 
+/** A pull request's commits and its diff. Asked for on the Files or Commits tab, not before. */
+export const getPr = (repo, number) =>
+  json("/api/pr?repo=" + encodeURIComponent(repo) + "&number=" + number);
+
 export const diffUrl = (dir, sha, path) =>
   "/api/diff?dir=" + encodeURIComponent(dir) + "&sha=" + encodeURIComponent(sha) +
   (path ? "&path=" + encodeURIComponent(path) : "");
@@ -31,10 +50,32 @@ export async function post(payload, url = "/api/act") {
     body: JSON.stringify(payload),
   });
   const data = await res.json().catch(() => ({}));
-  if (!res.ok || data.error) throw new Error(data.error || "failed with " + res.status);
+  if (!res.ok || data.error) {
+    // The body travels with the error: a refusal often carries the next step, like a link.
+    const err = new Error(data.error || "failed with " + res.status);
+    err.data = data;
+    throw err;
+  }
   return data;
 }
 
+/**
+ * Put a file in the repo an issue lives in, and get back the path and the link.
+ *
+ * Read here rather than posted as a form because everything else on this server speaks JSON,
+ * and a file small enough to belong in a repo is small enough to base64.
+ */
+export async function upload(repo, file) {
+  const data = await new Promise((ok, no) => {
+    const r = new FileReader();
+    r.onerror = () => no(new Error("could not read " + file.name));
+    // A data URL is "data:<type>;base64,<payload>"; only the payload travels.
+    r.onload = () => ok(String(r.result).split(",")[1] ?? "");
+    r.readAsDataURL(file);
+  });
+  return post({ repo, name: file.name, data }, "/api/upload");
+}
+
 /* ------------------------------- setup and authoring ------------------------------- */
 
 export const getSetup = () => json("/api/setup/status");
@@ -45,8 +86,12 @@ export const planTenant = (params) =>
 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) : ""));
+export const getBrief = (kind, staff, example) =>
+  json(
+    "/api/brief?kind=" + encodeURIComponent(kind) +
+      (staff ? "&staff=" + encodeURIComponent(staff) : "") +
+      (example ? "&example=" + encodeURIComponent(example) : ""),
+  );
 
 /** Parse what came back from the model. Reads only: saving is a second, deliberate step. */
 export const parsePaste = (kind, staff, answer) =>
@@ -65,10 +110,26 @@ export const getDoctor = (offline) => json("/api/doctor" + (offline ? "?offline=
 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");
+/** Commits org.yaml and pushes, as every other write here does. */
+export const addRepo = (name, role, visibility) =>
+  post({ name, role, visibility }, "/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");
+
+/** The ops repo's Actions access: read it, or ask the server to set it. */
+export const getAccess = () => json("/api/setup/access");
+export const setAccess = () => post({}, "/api/setup/access");
+
+/** Where the agent credential goes, and storing it. The value only ever travels in a POST. */
+export const getCredential = () => json("/api/setup/credential");
+export const storeCredential = (value, repoSecrets) =>
+  post({ value, repoSecrets }, "/api/setup/credential");
+
+/** One daily run, now, and where it has got to. */
+export const startRun = (staff) => post({ staff }, "/api/run/start");
+export const runStatus = (staff, id) =>
+  json("/api/run/state?staff=" + encodeURIComponent(staff) + "&id=" + encodeURIComponent(id));

package/templates/portal/js/app.js

@@ -3,23 +3,35 @@
 import { getOrg } from "./api.js";
 import { $, el, store } from "./dom.js";
 import { icon, iconHTML } from "./icons.js";
+import { installLightbox } from "./lightbox.js";
 import { setPeople } from "./md.js";
-import { refreshAll, stampLoaded, syncNotice } from "./refresh.js";
+import {
+  countInBackground,
+  refreshAll,
+  refreshQuietly,
+  stampCounts,
+  stampLoaded,
+  syncNotice,
+} from "./refresh.js";
 import { onRender } from "./router.js";
-import { ORG_WIDE, S, VIEWS, applyHash, openCount, writeHash } from "./state.js";
+import { ORG_WIDE, S, VIEWS, applyHash, readHash, 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 { viewInbox, viewPrs } from "./views/inbox.js";
 import { viewOrg } from "./views/org.js";
 import { viewPrompt } from "./views/prompt.js";
-import { viewSetup } from "./views/setup.js";
+import { viewRuns } from "./views/runs.js";
+import { paintSetupNav, viewGettingStarted, viewSetup } from "./views/setup.js";
 import { viewStaff } from "./views/staff.js";
 
 const SCREEN = {
+  setup: viewGettingStarted,
   inbox: viewInbox,
+  prs: viewPrs,
+  runs: viewRuns,
   org: viewOrg,
   staff: viewStaff,
   docs: viewDocs,
@@ -41,9 +53,42 @@ const SCREEN = {
  */
 const NEEDS = ["org", "name", "opsName", "staff"];
 
+/** The org-wide screens in the sidebar, by button. */
+const NAV = [
+  ["#setupnav", "setup"],
+  ["#inboxnav", "inbox"],
+  ["#prsnav", "prs"],
+  ["#runsnav", "runs"],
+  ["#staffnav", "staff"],
+  ["#orgnav", "org"],
+  ["#docsnav", "docs"],
+];
+
 export async function boot() {
   initTheme();
 
+  /* Bound before the first request rather than after it. The sidebar is markup, so it is on
+     screen and clickable while /api/org is still building the export, and a click in that
+     window used to do nothing at all: the first click on Staff after a load was simply lost.
+     Now it is remembered and honoured once there is something to render. */
+  let early = null;
+  for (const [id, view] of NAV) {
+    const b = $(id);
+    if (!b) continue;
+    b.onclick = () => {
+      if (!S.data) {
+        early = view;
+        return;
+      }
+      S.view = view;
+      render();
+    };
+  }
+
+  /* Before the first render, and once: it is delegated, so it covers every image any screen
+     draws from here on, including the setup screen. */
+  installLightbox();
+
   /* 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. */
@@ -51,6 +96,12 @@ export async function boot() {
   if (first && first.mode === "setup") {
     document.body.dataset.setup = "1";
     $("#orgname").textContent = "no org yet";
+    /* Every one of these reads a tenant, so during setup they answer 409 and the sidebar is a
+       row of four dead ends beside an empty Staff heading. There is one thing to do on this
+       screen; the navigation comes back with the org. */
+    for (const el of document.querySelectorAll("#inboxnav, #prsnav, #runsnav, #orgnav, #staffnav, #docsnav, #refreshall, .sect, #stafflist")) {
+      el.hidden = true;
+    }
     for (const slot of document.querySelectorAll("[data-icon]")) {
       slot.innerHTML = iconHTML(slot.dataset.icon);
     }
@@ -70,18 +121,23 @@ export async function boot() {
     slot.innerHTML = iconHTML(slot.dataset.icon);
   }
   onRender(render);
+  const linked = readHash() !== null;
   applyHash();
+  /* An org nobody has been hired into has an empty Inbox, which says nothing about what to do
+     next. It opens on what is left instead, unless a link or a click asked for somewhere else. */
+  if (early) S.view = early;
+  else if (!linked && (S.data.unfinished ?? []).includes("hire")) S.view = "setup";
+  initStaffFold();
   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.
+  /* Coming back to the tab after a run should show the run — and coming back to it thirty
+     seconds after leaving it should show nothing at all. Clicking into the window used to
+     re-read every repo on GitHub and repaint the screen under you; now it looks first and
+     only repaints when something actually moved. */
   addEventListener("focus", () => {
-    if (S.loadedAt && Date.now() - S.loadedAt > 30000) refreshAll(false);
+    if (S.loadedAt && Date.now() - S.loadedAt > 60000) refreshQuietly();
   });
   addEventListener("keydown", (e) => {
     if (e.key === "r" && !e.metaKey && !e.ctrlKey &&
@@ -92,6 +148,11 @@ export async function boot() {
   });
   setInterval(stampLoaded, 30000);
 
+  /* What is waiting on you is the first thing this page should be able to tell you, and it used
+     to be the one thing it would not say until you clicked Inbox. One request, shared with
+     whichever screen renders next. */
+  countInBackground();
+
   // 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", () => {
@@ -153,6 +214,42 @@ function learnPeople() {
  */
 let paintedRoster = null;
 
+/**
+ * The Staff heading is a fold, and folded it carries the count.
+ *
+ * It starts folded, so the count is not decoration: a bare "STAFF" heading over nothing is how
+ * a loaded org would look if the export came back empty, and those two states have to be
+ * tellable apart at a glance. The count sits on the heading rather than beside it so there is
+ * one thing to click.
+ */
+let staffOpen = true;
+
+function paintStaffFold() {
+  const b = $("#stafffold");
+  if (b) b.setAttribute("aria-expanded", String(staffOpen));
+  const list = $("#stafflist");
+  if (list) list.hidden = !staffOpen;
+  const n = $("#staffcount");
+  if (n) {
+    n.textContent = "(" + (S.data?.staff?.length ?? 0) + ")";
+    n.hidden = staffOpen;
+  }
+}
+
+function initStaffFold() {
+  // Folded until you say otherwise: the count on the heading is enough to know the roster is
+  // there, and the four org-wide screens above it are where a session starts.
+  staffOpen = store("roster.staffopen") === "1";
+  paintStaffFold();
+  const b = $("#stafffold");
+  if (!b) return;
+  b.onclick = () => {
+    staffOpen = !staffOpen;
+    store("roster.staffopen", staffOpen ? "1" : "0");
+    paintStaffFold();
+  };
+}
+
 function paintSidebar() {
   const host = $("#stafflist");
   host.replaceChildren();
@@ -201,6 +298,9 @@ function paintSidebar() {
 
     host.append(head, views);
   }
+
+  // A refresh can hire or retire someone, and the folded heading is where that number shows.
+  paintStaffFold();
 }
 
 /** Which rows are lit, and which staff member is unfolded. */
@@ -229,9 +329,9 @@ function render() {
   // 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();
+  paintSetupNav();
   markSidebar();
-  const ic = $("#inboxcount");
-  if (ic) ic.textContent = S.inbox ? String(openCount()) : "";
+  stampCounts();
   writeHash(true);
   stampLoaded();