npm - @nanocollective/roster - Versions diffs - 0.1.0-alpha.1 → 0.1.0-alpha.11 - Mend

@nanocollective/roster 0.1.0-alpha.1 → 0.1.0-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/README.md +65 -84
package/dist/cli.js +4687 -2495
package/docs/README.md +19 -11
package/docs/agents.md +328 -13
package/docs/architecture.md +13 -5
package/docs/charters/cmo.md +69 -0
package/docs/charters/cto.md +71 -0
package/docs/charters/support.md +60 -0
package/docs/commands.md +90 -11
package/docs/concepts.md +64 -12
package/docs/cost.md +39 -3
package/docs/developing.md +16 -21
package/docs/doctor-codes.md +21 -6
package/docs/export.md +2 -1
package/docs/extending.md +13 -4
package/docs/getting-started.md +118 -80
package/docs/images/brain.jpg +0 -0
package/docs/images/org.jpg +0 -0
package/docs/images/prompt.jpg +0 -0
package/docs/images/setup-org.jpg +0 -0
package/docs/images/setup-plan.jpg +0 -0
package/docs/images/staff.jpg +0 -0
package/docs/manual-steps.md +94 -101
package/docs/memory.md +29 -8
package/docs/org-yaml.md +74 -11
package/docs/portal.md +261 -47
package/docs/prompts.md +71 -11
package/docs/security.md +43 -7
package/docs/session-workflow.md +51 -21
package/docs/staff-yaml.md +16 -7
package/docs/troubleshooting.md +23 -20
package/docs/upgrading.md +6 -0
package/docs/writing-a-charter.md +33 -17
package/package.json +1 -1
package/templates/brain/.github/workflows/%%STAFF%%-daily.yaml +7 -0
package/templates/brain/.github/workflows/%%STAFF%%-mention.yaml +16 -4
package/templates/brain/CHARTER.md +3 -3
package/templates/brain/README.md +1 -0
package/templates/brain/log/decisions.md +3 -0
package/templates/brain/staff.yaml +0 -1
package/templates/brain/strategy/ideas.md +7 -0
package/templates/ops/.github/workflows/session.yaml +117 -40
package/templates/ops/agents.mjs +127 -8
package/templates/ops/compose.mjs +77 -7
package/templates/ops/inflight.mjs +157 -0
package/templates/ops/org/operating.md +21 -7
package/templates/ops/org/voice.md +9 -0
package/templates/ops/prompts/_identity.md +8 -1
package/templates/ops/prompts/_inflight.md +14 -0
package/templates/ops/prompts/_paths.md +2 -1
package/templates/ops/prompts/daily.md +16 -7
package/templates/ops/prompts/mention.md +18 -2
package/templates/ops/run-record.mjs +144 -0
package/templates/portal/css/base.css +238 -64
package/templates/portal/css/brain.css +30 -20
package/templates/portal/css/diff.css +15 -10
package/templates/portal/css/graph.css +12 -7
package/templates/portal/css/health.css +32 -11
package/templates/portal/css/inbox.css +117 -14
package/templates/portal/css/layout.css +92 -41
package/templates/portal/css/markdown.css +38 -15
package/templates/portal/css/runs.css +13 -0
package/templates/portal/css/setup.css +52 -39
package/templates/portal/index.html +24 -3
package/templates/portal/js/api.js +65 -4
package/templates/portal/js/app.js +112 -12
package/templates/portal/js/dialog.js +94 -4
package/templates/portal/js/dom.js +25 -0
package/templates/portal/js/icons.js +8 -1
package/templates/portal/js/lightbox.js +273 -0
package/templates/portal/js/md.js +23 -6
package/templates/portal/js/mention.js +264 -0
package/templates/portal/js/refresh.js +136 -6
package/templates/portal/js/state.js +55 -8
package/templates/portal/js/views/app.js +23 -5
package/templates/portal/js/views/checklist.js +20 -7
package/templates/portal/js/views/credential.js +93 -0
package/templates/portal/js/views/docs.js +94 -4
package/templates/portal/js/views/files.js +58 -14
package/templates/portal/js/views/graph.js +1 -1
package/templates/portal/js/views/health.js +178 -37
package/templates/portal/js/views/inbox.js +938 -98
package/templates/portal/js/views/memory.js +16 -1
package/templates/portal/js/views/org.js +161 -61
package/templates/portal/js/views/paste.js +29 -0
package/templates/portal/js/views/prompt.js +57 -66
package/templates/portal/js/views/repos.js +12 -7
package/templates/portal/js/views/runonce.js +94 -0
package/templates/portal/js/views/runs.js +165 -0
package/templates/portal/js/views/setup.js +302 -56
package/templates/portal/js/views/staff.js +143 -22
package/templates/portal/js/yaml.js +134 -0
package/templates/brain/.github/workflows/%%STAFF%%-pr-mention.yaml +0 -50
package/templates/ops/prompts/pr-mention.md +0 -57

package/templates/portal/index.html CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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();

package/templates/portal/js/dialog.js CHANGED Viewed

@@ -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,50 @@ 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();
+  });
+}

package/templates/portal/js/dom.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.
  *
@@ -53,8 +53,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":