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

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.28",
   "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/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/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();