@nanocollective/roster 0.1.0-alpha.3 → 0.1.0-alpha.30

package/templates/portal/js/app.js

@@ -2,24 +2,37 @@
 
 import { getOrg } from "./api.js";
 import { $, el, store } from "./dom.js";
-import { icon, iconHTML } from "./icons.js";
+import { icon, iconHTML, staffIcon } 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, humanLabel, 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 { sentence, whatsLeft } from "./readiness.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 +54,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. */
@@ -54,7 +100,7 @@ export async function boot() {
     /* 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, #orgnav, #staffnav, #docsnav, #refreshall, .sect, #stafflist")) {
+    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]")) {
@@ -66,6 +112,8 @@ export async function boot() {
 
   S.data = first;
   S.loadedAt = new Date();
+  S.staffOpen = null; // an open hire list survives a refresh, not a page load
+  S.readiness = null;
   S.staffHandle = S.data.staff[0]?.handle ?? null;
   $("#orgname").textContent = S.data.name + " · " + S.data.staff.length + " staff";
 
@@ -76,18 +124,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 &&
@@ -98,6 +151,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", () => {
@@ -159,7 +217,44 @@ 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() {
+  paintInboxLinks();
   const host = $("#stafflist");
   host.replaceChildren();
   paintedRoster = S.data.staff.map((s) => s.handle).join(" ");
@@ -170,11 +265,20 @@ function paintSidebar() {
     const head = el("button", { className: "nav staffrow" });
     head.dataset.staff = s.handle;
     head.setAttribute("aria-expanded", String(open));
+    const dot = el("span", { className: "readydot", hidden: true });
     head.append(
       icon("chevron", "caret"),
+      icon(staffIcon(s), "ic"),
       el("span", { className: "t", textContent: s.name }),
+      dot,
       el("span", { className: "hh", textContent: s.handle }),
     );
+    whatsLeft(s).then((left) => {
+      if (!left.length) return;
+      dot.hidden = false;
+      head.title = "Not ready to run: " + sentence(left);
+      paintSetupNav();
+    });
 
     const views = el("div", { className: "staffviews" });
     views.hidden = !open;
@@ -207,10 +311,48 @@ 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. */
+/* The inbox's filters, as links under Inbox: everything, what is on you, decisions, then one
+   per staff member. They replaced two dropdowns on the Inbox screen itself. */
+function paintInboxLinks() {
+  const sub = $("#inboxsub");
+  if (!sub) return;
+  sub.replaceChildren();
+  // Inbox itself is everything. Under it: each staff member, then the product repos' issues.
+  const links = [
+    ...S.data.staff.map((s) => [s.handle, s.name, staffIcon(s)]),
+    ["@issues", "Issues", "issue-open"],
+  ];
+  for (const [who, label, glyph] of links) {
+    const b = el("button", { className: "nav subnav inboxlink" }, [
+      icon(glyph, "ic"),
+      el("span", { className: "t", textContent: label }),
+    ]);
+    b.dataset.who = who;
+    b.onclick = () => {
+      S.view = "inbox";
+      // A second click on the one you are on goes back to everything.
+      S.inboxStaff = S.inboxStaff === who ? "" : who;
+      S.inboxFilter = "";
+      S.inboxOpen = null;
+      render();
+    };
+    sub.append(b);
+  }
+}
+
 function markSidebar() {
+  const sub = $("#inboxsub");
+  if (sub) sub.hidden = S.view !== "inbox";
+  for (const b of document.querySelectorAll(".inboxlink")) {
+    const on = S.view === "inbox" && b.dataset.who === (S.inboxStaff || "");
+    b.setAttribute("aria-current", String(on));
+  }
   for (const b of document.querySelectorAll(".nav")) {
     if (!b.dataset.view) continue;
     const mine = !b.dataset.staff || b.dataset.staff === S.staffHandle;
@@ -235,9 +377,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();
 

package/templates/portal/js/dialog.js

@@ -7,11 +7,47 @@
  */
 
 import { el, grow } from "./dom.js";
+import { attachMentions } from "./mention.js";
 
 /**
+ * Whether a click was on the backdrop, which is not the same question as "is the target the
+ * dialog".
+ *
+ * Picking a name from the `@` list used to close the whole dialog and throw away what you had
+ * typed. The list hides itself on mousedown so the caret survives the pick, so by the time the
+ * `click` lands the row is gone and the event retargets to the nearest thing still under the
+ * pointer, which is the dialog. A target test alone reads that as a backdrop click.
+ *
+ * So the pointer has to actually be outside the dialog's own box. `detail` of 0 is a click
+ * synthesised by the keyboard, which reports 0,0 and would otherwise look like the top corner
+ * of the page.
+ */
+export function onBackdrop(e, rect) {
+  if (!rect || e.currentTarget !== e.target || !e.detail) return false;
+  return (
+    e.clientX < rect.left ||
+    e.clientX > rect.right ||
+    e.clientY < rect.top ||
+    e.clientY > rect.bottom
+  );
+}
+
+/**
+ * @param decorate  given the textarea, returns a node to sit under it. This is how the reply
+ *   box carries its attachments: the control has to write into the box it is beside.
+ * @param allowEmpty  saying nothing is an answer for some of these. Closing an issue without
+ *   a parting comment is the normal case, not a cancelled dialog.
  * @returns the text, or null if they cancelled.
  */
-export function askText({ title, hint, value = "", placeholder = "", confirm = "Continue" }) {
+export function askText({
+  title,
+  hint,
+  value = "",
+  placeholder = "",
+  confirm = "Continue",
+  decorate,
+  allowEmpty = false,
+}) {
   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.
@@ -25,6 +61,12 @@ export function askText({ title, hint, value = "", placeholder = "", confirm = "
 
   const ta = el("textarea", { value, placeholder, rows: 5 });
   box.append(ta);
+  /* Before the ⌘⏎ handler below, so that when the `@` list is open its own Enter wins. Every
+     dialog this function opens is prose that may need to reach somebody, and a mention is how
+     it reaches them. */
+  attachMentions(ta);
+  const under = decorate?.(ta);
+  if (under) box.append(under);
 
   const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
   const go = el("button", { className: "ghbtn primary", textContent: confirm });
@@ -42,12 +84,13 @@ export function askText({ title, hint, value = "", placeholder = "", confirm = "
       answer = text;
       box.close();
     };
+    const said = () => ta.value.trim() || (allowEmpty ? "" : null);
     cancel.onclick = () => done(null);
-    go.onclick = () => done(ta.value.trim() || null);
+    go.onclick = () => done(said());
     ta.addEventListener("keydown", (e) => {
       if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
-        done(ta.value.trim() || null);
+        done(said());
       }
     });
     // Escape and the backdrop both close it, and both mean no.
@@ -56,7 +99,7 @@ export function askText({ title, hint, value = "", placeholder = "", confirm = "
       resolve(answer);
     });
     box.addEventListener("click", (e) => {
-      if (e.target === box) done(null);
+      if (onBackdrop(e, box.getBoundingClientRect?.())) done(null);
     });
 
     document.body.append(box);
@@ -68,3 +111,85 @@ export function askText({ title, hint, value = "", placeholder = "", confirm = "
     ta.setSelectionRange?.(ta.value.length, ta.value.length);
   });
 }
+
+/**
+ * Asking before something that cannot be taken back: a merge, a push, a new repo, a paid run.
+ *
+ * Native `confirm()` looked like the browser rather than this page, and it blocks the whole
+ * tab, which froze browser automation mid-run. This is the same `<dialog>` as askText, so the
+ * backdrop, Escape and the focus trap come free. The wording is the caller's: `title` is the
+ * question, `hint` says what will happen.
+ *
+ * @returns true only for the confirm button. Escape, Cancel and the backdrop are all no.
+ */
+export function askYes({ title, hint, confirm = "Continue" }) {
+  const box = document.createElement("dialog");
+  // The test shim has no dialog element; see askText.
+  if (typeof box.showModal !== "function") {
+    return Promise.resolve(Boolean(globalThis.confirm?.(hint ? title + "\n\n" + hint : title)));
+  }
+
+  box.className = "ask";
+  box.append(el("h3", { textContent: title }));
+  if (hint) box.append(el("p", { className: "askhint", textContent: hint }));
+
+  const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
+  const go = el("button", { className: "ghbtn primary", textContent: confirm });
+  box.append(el("div", { className: "row askrow" }, [cancel, go]));
+
+  return new Promise((resolve) => {
+    let answer = false;
+    const done = (yes) => {
+      answer = yes;
+      box.close();
+    };
+    cancel.onclick = () => done(false);
+    go.onclick = () => done(true);
+    box.addEventListener("close", () => {
+      box.remove();
+      resolve(answer);
+    });
+    box.addEventListener("click", (e) => {
+      if (onBackdrop(e, box.getBoundingClientRect?.())) done(false);
+    });
+    document.body.append(box);
+    box.showModal();
+    // Cancel has the focus, so an Enter pressed out of habit does not merge anything.
+    cancel.focus();
+  });
+}
+
+/**
+ * A larger dialog for a whole task: hiring someone, or finishing their setup. Native <dialog>
+ * again, appended to <body> rather than to the screen, so a background refresh repainting the
+ * screen leaves it open with whatever was typed into it.
+ *
+ * @returns {{set: (node: Node) => void, close: () => void, isOpen: () => boolean} | null}
+ *   null where there is no dialog element (the test shim), and the caller draws inline instead.
+ */
+export function sheet({ node, onClose }) {
+  const box = document.createElement("dialog");
+  if (typeof box.showModal !== "function") return null;
+  box.className = "sheet";
+  const body = el("div", { className: "sheetbody" });
+  body.append(node);
+  box.append(body);
+  let open = true;
+  const close = () => {
+    if (!open) return;
+    open = false;
+    box.close();
+    box.remove();
+    onClose?.();
+  };
+  box.addEventListener("cancel", (e) => {
+    e.preventDefault();
+    close();
+  });
+  box.addEventListener("click", (e) => {
+    if (onBackdrop(e, box.getBoundingClientRect())) close();
+  });
+  document.body.append(box);
+  box.showModal();
+  return { set: (n) => body.replaceChildren(n), close, isOpen: () => open };
+}

package/templates/portal/js/dom.js

@@ -35,6 +35,31 @@ export function markCurrent(list, btn) {
   btn.setAttribute("aria-current", "true");
 }
 
+/**
+ * Placeholder shapes, for the seconds a screen spends asking GitHub.
+ *
+ * The inbox reads every repo in the org, which is several seconds on a cold cache, and what
+ * stood there meanwhile was the word "Asking GitHub…" in an otherwise empty box beside an
+ * empty box. Nothing about that says the shape of what is coming, so the page looked broken
+ * rather than busy.
+ *
+ * `kind` names the shape: "row" for a list item, "line" for a paragraph, "head" for a title.
+ * They are decorative, so they are hidden from assistive technology and the live region
+ * elsewhere on the screen does the announcing.
+ */
+export function skeleton(kind, n = 1) {
+  const out = [];
+  for (let i = 0; i < n; i++) {
+    const box = el("div", { className: "sk sk-" + kind });
+    box.setAttribute("aria-hidden", "true");
+    if (kind === "row") {
+      box.append(el("div", { className: "skbar t" }), el("div", { className: "skbar m" }));
+    }
+    out.push(box);
+  }
+  return out;
+}
+
 export function store(k, v) {
   try {
     return v === undefined ? localStorage.getItem(k) : localStorage.setItem(k, v);

package/templates/portal/js/icons.js

@@ -1,6 +1,6 @@
 /* Icons.
  *
- * Twenty-four Lucide glyphs (lucide.dev, ISC), vendored as path data rather than pulled from
+ * Lucide glyphs (lucide.dev, ISC), vendored as path data rather than pulled from
  * a CDN or a font. The portal is local-first and offline, so an icon that needs the network
  * is an icon that is sometimes a blank square.
  *
@@ -13,6 +13,26 @@
  */
 
 const PATHS = {
+  "code":
+    "<polyline points=\"16 18 22 12 16 6\" /> <polyline points=\"8 6 2 12 8 18\" />",
+  "megaphone":
+    "<path d=\"m3 11 18-5v12L3 14v-3z\" /> <path d=\"M11.6 16.8a3 3 0 1 1-5.8-1.6\" />",
+  "life-buoy":
+    "<circle cx=\"12\" cy=\"12\" r=\"10\" /> <path d=\"m4.93 4.93 4.24 4.24\" /> <path d=\"m14.83 9.17 4.24-4.24\" /> <path d=\"m14.83 14.83 4.24 4.24\" /> <path d=\"m9.17 14.83-4.24 4.24\" /> <circle cx=\"12\" cy=\"12\" r=\"4\" />",
+  "compass":
+    "<circle cx=\"12\" cy=\"12\" r=\"10\" /> <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\" />",
+  "brush":
+    "<path d=\"m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08\" /> <path d=\"M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z\" />",
+  "bug":
+    "<path d=\"m8 2 1.88 1.88\" /> <path d=\"M14.12 3.88 16 2\" /> <path d=\"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1\" /> <path d=\"M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6\" /> <path d=\"M12 20v-9\" /> <path d=\"M6.53 9C4.6 8.8 3 7.1 3 5\" /> <path d=\"M6 13H2\" /> <path d=\"M3 21c0-2.1 1.7-3.9 3.8-4\" /> <path d=\"M20.97 5c0 2.1-1.6 3.8-3.5 4\" /> <path d=\"M22 13h-4\" /> <path d=\"M17.2 17c2.1.1 3.8 1.9 3.8 4\" />",
+  "server":
+    "<rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\" ry=\"2\" /> <rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\" ry=\"2\" /> <line x1=\"6\" x2=\"6.01\" y1=\"6\" y2=\"6\" /> <line x1=\"6\" x2=\"6.01\" y1=\"18\" y2=\"18\" />",
+  "book-open":
+    "<path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" /> <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />",
+  "bar-chart":
+    "<line x1=\"12\" x2=\"12\" y1=\"20\" y2=\"10\" /> <line x1=\"18\" x2=\"18\" y1=\"20\" y2=\"4\" /> <line x1=\"6\" x2=\"6\" y1=\"20\" y2=\"16\" />",
+  "users":
+    "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" /> <circle cx=\"9\" cy=\"7\" r=\"4\" /> <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" /> <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />",
   "check":
     "<path d=\"M20 6 9 17l-5-5\" />",
   "chevron":
@@ -53,8 +73,15 @@ const PATHS = {
     "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\" /> <line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\" /> <line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\" />",
   "moon":
     "<path d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\" />",
+  "paperclip":
+    "<path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\" />",
   "person":
     "<circle cx=\"12\" cy=\"8\" r=\"5\" /> <path d=\"M20 21a8 8 0 0 0-16 0\" />",
+  "play":
+    "<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\" />",
+  // The pair for the lightbox's zoom controls. `dash` above is the other half.
+  "plus":
+    "<path d=\"M5 12h14\" /> <path d=\"M12 5v14\" />",
   "refresh":
     "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /> <path d=\"M21 3v5h-5\" /> <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /> <path d=\"M8 16H3v5\" />",
   "rename":
@@ -89,6 +116,23 @@ export function icon(name, cls = "") {
   return span.firstChild ?? span;
 }
 
+/* A staff member's icon: `icon:` in their staff.yaml, or one picked from their role. */
+const ROLE_ICONS = {
+  cto: "code",
+  cmo: "megaphone",
+  support: "life-buoy",
+  pm: "compass",
+  designer: "brush",
+  qa: "bug",
+  devops: "server",
+  writer: "book-open",
+  analyst: "bar-chart",
+  community: "users",
+};
+export function staffIcon(s) {
+  return s?.icon && hasIcon(s.icon) ? s.icon : (ROLE_ICONS[s?.handle] ?? "person");
+}
+
 export function hasIcon(name) {
   return Object.hasOwn(PATHS, name);
 }

package/templates/portal/js/inflight.js

@@ -0,0 +1,18 @@
+/* How many requests the page has open. The setup dialog waits for this to reach zero before it
+ * shows itself, because the list it draws is only final once every answer is back. */
+
+let open = 0;
+
+if (typeof globalThis.fetch === "function" && !globalThis.fetch.counted) {
+  const real = globalThis.fetch.bind(globalThis);
+  const counted = (...args) => {
+    open++;
+    return real(...args).finally(() => {
+      open--;
+    });
+  };
+  counted.counted = true;
+  globalThis.fetch = counted;
+}
+
+export const pending = () => open;