@nanocollective/roster 0.1.0-alpha.27 → 0.1.0-alpha.29

package/dist/cli.js

@@ -6608,15 +6608,19 @@ async function portalCommand(argv) {
         return;
       }
       const agentId = String(org.agent?.id ?? org.agent ?? "claude-code-action");
-      const [plan2, orgSecret] = await Promise.all([
+      const [plan2, orgSecret, onRepos] = await Promise.all([
         planCredential(org.org, name, brains),
-        readOrgSecret(org.org, name)
+        readOrgSecret(org.org, name),
+        Promise.all(brains.map((b) => api(`repos/${b}/actions/secrets/${name}`).then((r) => r.ok)))
       ]);
+      const repoSecrets = brains.filter((_, i) => onRepos[i]);
       json(res, {
         name,
         brains,
         plan: plan2,
         orgSecret,
+        repoSecrets,
+        stored: Boolean(orgSecret) || brains.length > 0 && repoSecrets.length === brains.length,
         howTo: AGENTS.find((a) => a.id === agentId)?.howTo
       });
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanocollective/roster",
-  "version": "0.1.0-alpha.27",
+  "version": "0.1.0-alpha.29",
   "description": "An agent-run org, powered by GitHub. Scaffold AI staff members whose brain is a repo.",
   "type": "module",
   "bin": {

package/templates/portal/css/base.css

@@ -285,3 +285,7 @@ dialog.sheet[open]{animation:dlgin .18s var(--ease)}
 dialog.sheet::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
 .sheetbody{padding:22px 24px 26px;overflow:auto;max-height:calc(100vh - 50px)}
 .sheettitle{margin:0 0 14px;font:600 18px var(--sans);letter-spacing:-.02em}
+.sheetloading{display:grid;place-items:center;min-height:260px}
+.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
+      animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}

package/templates/portal/css/setup.css

@@ -183,3 +183,11 @@
 .pastenotes .md{border-left:3px solid var(--line);padding-left:12px}
 .pastefile .diff{white-space:pre-wrap;overflow-wrap:anywhere}
 .warnline{margin:10px 0 0;padding:8px 11px;border-radius:var(--r);background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--ink);font-size:13px}
+
+/* A single-line text box, matching the question fields. */
+.textfield{width:100%;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 10px;font:13px var(--sans);outline:none}
+.textfield:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+.credform{display:grid;gap:10px}
+.credform .row{margin:0}
+.okline{margin:0 0 8px;color:var(--accent);font:600 13px var(--sans)}

package/templates/portal/index.html

@@ -35,6 +35,7 @@
       <span class="ic" data-icon="inbox"></span> Inbox
       <span class="n" id="inboxcount"></span>
     </button>
+    <div class="staffviews" id="inboxsub" hidden></div>
     <!-- "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">

package/templates/portal/js/app.js

@@ -14,7 +14,7 @@ import {
   syncNotice,
 } from "./refresh.js";
 import { onRender } from "./router.js";
-import { ORG_WIDE, S, VIEWS, applyHash, readHash, 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";
@@ -254,6 +254,7 @@ function initStaffFold() {
 }
 
 function paintSidebar() {
+  paintInboxLinks();
   const host = $("#stafflist");
   host.replaceChildren();
   paintedRoster = S.data.staff.map((s) => s.handle).join(" ");
@@ -315,7 +316,43 @@ function paintSidebar() {
 }
 
 /** 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();
+  const links = [
+    ["", "", "All"],
+    ["mine", "", "On " + humanLabel()],
+    ["decision", "", "Decisions"],
+    ...S.data.staff.map((s) => ["", s.handle, s.name]),
+  ];
+  for (const [filter, who, label] of links) {
+    const b = el("button", { className: "nav subnav inboxlink", textContent: label });
+    b.dataset.filter = filter;
+    b.dataset.who = who;
+    b.onclick = () => {
+      S.view = "inbox";
+      S.inboxFilter = filter;
+      S.inboxStaff = who;
+      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.filter === (S.inboxFilter || "") &&
+      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;

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;

package/templates/portal/js/views/credential.js

@@ -12,11 +12,11 @@ export function credentialPanel(opts = {}) {
   if (!opts.bare) box.append(el("b", { textContent: "Agent credential" }));
   const body = el("div");
   box.append(body);
-  body.append(el("p", { className: "sub", textContent: "Looking at where it would go…" }));
+  body.append(el("p", { className: "sub", textContent: "Checking…" }));
 
   getCredential()
     .then((c) => {
-      opts.onStatus?.(Boolean(c.orgSecret));
+      opts.onStatus?.(Boolean(c.stored ?? c.orgSecret));
       draw(body, c, opts);
     })
     .catch((err) => body.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) })));
@@ -25,74 +25,60 @@ export function credentialPanel(opts = {}) {
 
 function draw(body, c, opts = {}) {
   body.replaceChildren();
-  if (c.howTo) body.append(el("p", { textContent: "Where to get one: " + c.howTo }));
 
   if (!(c.brains ?? []).length) {
     // Inside a step, the step's own hint already says when this opens.
-    if (opts.bare) return;
-    body.append(
-      el("p", {
-        className: "sub",
-        textContent:
-          "Available after your first hire. You only add it once.",
-      }),
-    );
+    if (!opts.bare) body.append(el("p", { className: "sub", textContent: "Available after your first hire. You only add it once." }));
     return;
   }
 
-  if (c.orgSecret) {
-    body.append(
-      el("p", {
-        className: "sub",
-        textContent:
-          c.name + " is already set. Paste a new one only to replace it.",
-      }),
-    );
-  }
-
-  body.append(
-    el("p", {
-      className: "sub",
-      textContent:
-        (c.plan.mode === "org"
-          ? "Stored as one org secret, " + c.name + ", shared with " + c.brains.join(", ") + ". "
-          : "Stored as " + c.name + " on each of " + c.brains.join(", ") + ", because " + c.plan.reason + ". ") +
-        "It's never written to disk.",
-    }),
+  const form = el("div", { className: "credform" });
+  const input = el("input", { type: "password", placeholder: "Paste it here", autocomplete: "off", className: "textfield" });
+  const go = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  form.append(
+    ...(c.howTo ? [el("p", { className: "sub", textContent: "To get one, " + c.howTo })] : []),
+    input,
+    el("div", { className: "row" }, [go]),
+    out,
   );
 
-  const input = el("input", { type: "password", placeholder: c.name, autocomplete: "off" });
-  input.style.width = "100%";
-  const go = el("button", { className: "btn primary", textContent: "Store it" });
-  const out = el("div", { style: "margin-top:9px" });
-  body.append(input, el("div", { className: "row", style: "margin-top:9px" }, [go]), out);
+  // Stored already, on the org or on every brain repo: say so, and keep replacing it one click away.
+  if (c.stored ?? c.orgSecret) {
+    const replace = el("button", { className: "ghbtn", textContent: "Replace it" });
+    replace.onclick = () => {
+      replace.remove();
+      form.hidden = false;
+      input.focus?.();
+    };
+    form.hidden = true;
+    body.append(el("p", { className: "okline", textContent: "✓ Stored as " + c.name + "." }), replace, form);
+  } else {
+    body.append(form);
+  }
 
   go.onclick = async () => {
-    const value = input.value.trim();
+    const value = String(input.value ?? "").trim();
     if (!value) {
-      input.focus();
+      input.focus?.();
       return;
     }
     go.disabled = true;
-    out.replaceChildren(el("p", { className: "sub", textContent: "Storing…" }));
+    go.textContent = "Saving…";
     try {
       const r = await storeCredential(value, false);
       input.value = "";
       if (!r.ok) throw new Error(r.error);
       opts.onStatus?.(true);
       out.replaceChildren(
-        ...(r.fellBack ? [el("p", { className: "err", textContent: "The org secret was refused: " + r.fellBack })] : []),
-        el("p", {
-          textContent:
-            r.mode === "org"
-              ? "Saved."
-              : "Saved on " + r.repos.join(", ") + ".",
-        }),
+        ...(r.fellBack ? [el("p", { className: "sub", textContent: "Saved on each repo instead: " + r.fellBack })] : []),
+        el("p", { className: "okline", textContent: "✓ Saved." }),
       );
     } catch (err) {
       out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
     } finally {
       go.disabled = false;
+      go.textContent = "Save";
     }
   };
 }

package/templates/portal/js/views/hire.js

@@ -203,7 +203,7 @@ export function hireFlow(o) {
     hireStep(hire.body, role, o.onHired);
     for (const t of [app, charter, cred, run]) t.setLocked("Hire first");
     getCredential()
-      .then((c) => credStatus(Boolean(c.orgSecret)))
+      .then((c) => credStatus(Boolean(c.stored ?? c.orgSecret)))
       .catch(() => {});
     return box;
   }

package/templates/portal/js/views/inbox.js

@@ -122,37 +122,25 @@ function inboxScreen(m, opts) {
     placeholder: "Filter by title, label, repo…",
     value: S.query,
   });
-  const scope = el("select");
-  scope.append(
-    el("option", { value: "", textContent: "Everything" }),
-    el("option", { value: "mine", textContent: "On " + humanLabel() }),
-    // A decision is not a PR, so this one is only ever worth offering on the inbox.
-    ...(opts.prs ? [] : [el("option", { value: "decision", textContent: "Decisions" })]),
-  );
-  scope.value = opts.prs && S.inboxFilter !== "mine" ? "" : S.inboxFilter;
-
-  /* Open only by default. An inbox is what is waiting on somebody, and burying that under
-     five months of finished work would be answering a different question. */
-  const state = el("select", { title: "Which items to list" });
-  state.append(
-    el("option", { value: "", textContent: "Open" }),
-    el("option", { value: "closed", textContent: "Recently closed" }),
-    el("option", { value: "all", textContent: "Open and closed" }),
-  );
-  state.value = S.inboxState;
-
-  const whose = el("select", {
-    title: "Whose work: their brain repo, anything their bot wrote, and anything addressed to them",
-  });
-  whose.append(
-    el("option", { value: "", textContent: "Everyone" }),
-    ...S.data.staff.map((s) => el("option", { value: s.handle, textContent: s.name })),
-  );
-  whose.value = S.inboxStaff;
+  /* Open or closed, as a toggle. Who and what (a staff member, what is on you, decisions)
+     moved to the sidebar under Inbox, where a row of dropdowns used to be. */
+  if (S.inboxState === "all") S.inboxState = "";
+  const toggle = el("div", { className: "modes inboxstate" });
+  for (const [value, label] of [["", "Open"], ["closed", "Closed"]]) {
+    const b = el("button", { className: "mode", textContent: label });
+    b.classList.toggle("on", (S.inboxState || "") === value);
+    b.onclick = () => {
+      S.inboxState = value;
+      for (const x of toggle.children) x.classList.toggle("on", x === b);
+      writeHash(false);
+      paint();
+    };
+    toggle.append(b);
+  }
 
   const refresh = el("button", { className: "iconbtn", title: "Refresh from GitHub" });
   refresh.innerHTML = '<span class="sync">' + iconHTML("refresh") + "</span>";
-  const controls = [search, whose, state, scope, refresh];
+  const controls = [search, toggle, refresh];
   // A pull request comes from a branch, so there is nothing here that could open one.
   if (!opts.prs) {
     const newBtn = el("button", { className: "ghbtn", textContent: "New issue" });
@@ -171,9 +159,6 @@ function inboxScreen(m, opts) {
   m.append(split);
 
   search.oninput = () => { S.query = search.value; writeHash(false); paint(); };
-  scope.onchange = () => { S.inboxFilter = scope.value; writeHash(false); paint(); };
-  whose.onchange = () => { S.inboxStaff = whose.value; writeHash(false); paint(); };
-  state.onchange = () => { S.inboxState = state.value; writeHash(false); paint(); };
   refresh.onclick = () => { refresh.classList.add("spin"); load(true); };
 
   if (S.inbox) { stampCounts(); paint(); restore(); } else load(false);
@@ -245,7 +230,9 @@ function inboxScreen(m, opts) {
     // "On you" is on any of the humans this org answers to, not only the first one.
     const onAHuman = (i) => (i.assignees ?? []).some(isHuman);
 
-    const whoseStaff = S.inboxStaff ? S.data.staff.find((s) => s.handle === S.inboxStaff) : null;
+    // The sidebar's filters are the inbox's. Pending work has no control for them, so it ignores them.
+    const staffPick = opts.prs ? "" : S.inboxStaff;
+    const whoseStaff = staffPick ? S.data.staff.find((s) => s.handle === staffPick) : null;
     /* The two screens partition the org rather than overlap on it. Pending work is every pull
        request; the inbox is everything else. An inbox that also listed the PRs said the same
        thing twice and made the badge beside it a number you could not act on. */
@@ -261,8 +248,9 @@ function inboxScreen(m, opts) {
       (i) => !q || (i.title + " " + i.repo + " " + i.labels.join(" ") + " #" + i.number)
         .toLowerCase().includes(q),
     );
-    if (S.inboxFilter === "mine") items = items.filter(onAHuman);
-    else if (S.inboxFilter === "decision") items = items.filter((i) => i.labels.includes("decision"));
+    const filter = opts.prs ? "" : S.inboxFilter;
+    if (filter === "mine") items = items.filter(onAHuman);
+    else if (filter === "decision") items = items.filter((i) => i.labels.includes("decision"));
     /* `s=pr` was the inbox's "Open work (PRs)" scope, and Pending work is now that screen. An
        old bookmark carrying it is ignored rather than honoured into an empty list. */
 

package/templates/portal/js/views/staff.js

@@ -7,12 +7,38 @@
 
 import { post } from "../api.js";
 import { askYes, sheet } from "../dialog.js";
+import { pending } from "../inflight.js";
 import { ago, el, esc } from "../dom.js";
 import { whatsLeft, sentence } from "../readiness.js";
 import { refreshAll } from "../refresh.js";
 import { S } from "../state.js";
 import { hireFlow, line, rolePicker } from "./hire.js";
 
+/**
+ * Resolves once nothing is loading and `node` has stopped changing for a moment, or after a few
+ * seconds regardless. Quiet alone was not enough: while GitHub was still answering, nothing
+ * changed, and the half-built list was shown.
+ */
+function settled(node, quiet = 250, most = 6000) {
+  return new Promise((resolve) => {
+    if (typeof MutationObserver !== "function") return resolve();
+    let lastChange = Date.now();
+    const obs = new MutationObserver(() => {
+      lastChange = Date.now();
+    });
+    obs.observe(node, { childList: true, subtree: true, attributes: true, characterData: true });
+    const started = Date.now();
+    const tick = setInterval(() => {
+      const now = Date.now();
+      if ((pending() === 0 && now - lastChange >= quiet) || now - started >= most) {
+        clearInterval(tick);
+        obs.disconnect();
+        resolve();
+      }
+    }, 50);
+  });
+}
+
 /* The open dialog, if any. It lives on <body>, so it outlives a repaint of this screen, and a
    background refresh leaves whatever was typed into it alone. */
 let current = null;
@@ -31,18 +57,27 @@ export function viewStaff(m, o = {}) {
   /* Tasks open in a dialog. Where there is no dialog element (the test shim) they draw into
      the pane instead, which is how this screen always drew them. */
   function present(node) {
-    if (current?.isOpen()) {
-      current.set(node);
-      return;
+    const spin = el("div", { className: "sheetloading" }, [el("span", { className: "spinner" })]);
+    if (current?.isOpen()) current.set(spin);
+    else {
+      current = sheet({
+        node: spin,
+        onClose: () => {
+          current = null;
+          S.staffOpen = null;
+        },
+      });
+      if (!current) {
+        pane.replaceChildren(node);
+        return;
+      }
     }
-    current = sheet({
-      node,
-      onClose: () => {
-        current = null;
-        S.staffOpen = null;
-      },
+    /* The list is built from half a dozen answers arriving one by one, and showing each as it
+       landed meant the dialog reflowed four times. It is shown once it has stopped changing. */
+    const mine = current;
+    settled(node).then(() => {
+      if (mine.isOpen() && current === mine) mine.set(node);
     });
-    if (!current) pane.replaceChildren(node);
   }
   function dismiss() {
     if (current) current.close();