@nanocollective/roster 0.1.0-alpha.6 → 0.1.0-alpha.8

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, 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";
@@ -23,12 +23,15 @@ import { viewHealth } from "./views/health.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,
@@ -50,8 +53,38 @@ 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();
@@ -66,7 +99,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, #prsnav, #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]")) {
@@ -88,15 +121,15 @@ 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(); };
-  $("#prsnav").onclick = () => { S.view = "prs"; 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 — and coming back to it thirty
@@ -296,6 +329,7 @@ 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();
   stampCounts();
   writeHash(true);

package/templates/portal/js/dialog.js

@@ -111,3 +111,50 @@ export function askText({
     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/state.js

@@ -22,7 +22,7 @@ export const VIEWS = [
 export const VIEW_ALIAS = { memory: "brain" };
 
 /** Screens that belong to the org rather than to one staff member. */
-export const ORG_WIDE = new Set(["inbox", "prs", "org", "staff", "docs"]);
+export const ORG_WIDE = new Set(["setup", "inbox", "prs", "runs", "org", "staff", "docs"]);
 
 /** The two screens that read the inbox, and so share its filters and its `?t=` thread. */
 const INBOXY = new Set(["inbox", "prs"]);
@@ -32,6 +32,8 @@ export const S = {
   data: null,
   docs: null,
   inbox: null,
+  /** /api/runs. Kept once read: it is minutes of downloads on a cold cache. */
+  runs: null,
   sync: null,
   loadedAt: null,
 

package/templates/portal/js/views/app.js

@@ -6,8 +6,8 @@
  * it is one browser, one origin, and nothing extra to explain.
  *
  * What it still cannot do is install the App. Installing is a grant of access to specific
- * repositories and GitHub asks a human to choose them, which is correct behaviour and should not
- * be worked around. */
+ * repositories and GitHub asks a human to confirm them, which is correct behaviour and should not
+ * be worked around. The link it hands back has the right repos already selected. */
 
 import { appResult, startApp } from "../api.js";
 import { el } from "../dom.js";
@@ -48,6 +48,11 @@ export function appPanel(opts) {
          it: an App that exists is not a problem, it is a step you have already done. */
       const note = el("div");
       note.append(el("p", { className: "err", textContent: String(err.message || err) }));
+      if (err.data?.install) {
+        note.append(
+          el("a", { className: "btn", href: err.data.install, target: "_blank", textContent: "Install it" }),
+        );
+      }
       out.replaceChildren(note);
       return;
     }
@@ -102,9 +107,21 @@ export function appPanel(opts) {
         el("p", {
           className: "sub",
           textContent:
-            "Grant it every tracker this staff member writes to, not just their own: the token " +
-            "is minted organisation-wide and a peer's board is where a brief lands.",
+            "The link opens GitHub's install page with the org and the repos already selected: " +
+            "this staff member's brain, every peer tracker it writes to, and the product repos. " +
+            "Check the list and confirm.",
         }),
+        ...((result.preselected ?? []).length
+          ? [el("p", { className: "sub", textContent: "Selected: " + result.preselected.join(", ") })]
+          : []),
+        ...((result.missing ?? []).length
+          ? [
+              el("p", {
+                className: "err",
+                textContent: "Tick these yourself, their ids could not be read: " + result.missing.join(", "),
+              }),
+            ]
+          : []),
         el("a", {
           className: "btn primary",
           href: result.install,
@@ -115,7 +132,8 @@ export function appPanel(opts) {
           className: "sub",
           textContent:
             "Do not verify this by reading the API. It reports what an App declares separately " +
-            "from what an installation was granted. Only a run that finished proves the chain.",
+            "from what an installation was granted. Only a run that finished proves the chain, " +
+            "which is what Run once now on the staff card is for.",
         }),
       );
       out.replaceChildren(done);

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

@@ -0,0 +1,93 @@
+/* The agent's credential, stored once for the org.
+ *
+ * The value goes from this box to the local server in a POST, and from there to gh on its
+ * standard input. It is not kept in the page after it is sent, and nothing echoes it back. */
+
+import { getCredential, storeCredential } from "../api.js";
+import { el } from "../dom.js";
+
+export function credentialPanel() {
+  const box = el("div", { className: "manual" });
+  box.append(el("b", { textContent: "Your agent's credential, once" }));
+  const body = el("div");
+  box.append(body);
+  body.append(el("p", { className: "sub", textContent: "Looking at where it would go…" }));
+
+  getCredential()
+    .then((c) => draw(body, c))
+    .catch((err) => body.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) })));
+  return box;
+}
+
+function draw(body, c) {
+  body.replaceChildren();
+  if (c.howTo) body.append(el("p", { textContent: "Where to get one: " + c.howTo }));
+
+  if (!c.brains.length) {
+    body.append(
+      el("p", {
+        className: "sub",
+        textContent:
+          "Nothing reads it until somebody is hired, so this box opens once there is a staff " +
+          "member. It is asked for once, not once per hire.",
+      }),
+    );
+    return;
+  }
+
+  if (c.orgSecret) {
+    body.append(
+      el("p", {
+        className: "sub",
+        textContent:
+          c.name + " is already an org secret, shared with " + c.orgSecret.visibility + " repos. " +
+          "Each hire adds its brain to it. 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 goes to gh on standard input and is never written to disk.",
+    }),
+  );
+
+  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);
+
+  go.onclick = async () => {
+    const value = input.value.trim();
+    if (!value) {
+      input.focus();
+      return;
+    }
+    go.disabled = true;
+    out.replaceChildren(el("p", { className: "sub", textContent: "Storing…" }));
+    try {
+      const r = await storeCredential(value, false);
+      input.value = "";
+      if (!r.ok) throw new Error(r.error);
+      out.replaceChildren(
+        ...(r.fellBack ? [el("p", { className: "err", textContent: "The org secret was refused: " + r.fellBack })] : []),
+        el("p", {
+          textContent:
+            r.mode === "org"
+              ? "Stored once for the org, shared with " + r.repos.length + " brains."
+              : "Stored on " + r.repos.join(", ") + ".",
+        }),
+      );
+    } catch (err) {
+      out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+    } finally {
+      go.disabled = false;
+    }
+  };
+}

package/templates/portal/js/views/health.js

@@ -1,12 +1,14 @@
 /* Is the scaffolding still there, has the agent been running, and what does lint say. */
 
 import { post } from "../api.js";
+import { askYes } from "../dialog.js";
 import { ago, el, esc, kb } from "../dom.js";
 import { inline } from "../md.js";
 import { render } from "../router.js";
 import { S, staff } from "../state.js";
 import { checklist } from "./checklist.js";
 import { copyAmendBrief } from "./prompt.js";
+import { runOnce } from "./runonce.js";
 
 const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
@@ -81,7 +83,18 @@ export function viewHealth(m) {
      doctor, bordered boxes for the prompt audit, cards with two buttons each for lint. Same
      question in all three, so one shape: a heading that carries its own count, a line saying
      what the section is, the findings as rows, and the section's actions at the end. */
-  const doctor = section(m, "The org, from roster doctor", "doctor");
+  /* A workflow that has never run is unproven, and the way to prove it is to run it. Here
+     because Health is where "unproven" is read; a success re-runs the checks below. */
+  let doctor = null;
+  m.append(
+    runOnce({
+      staff: s.handle,
+      name: s.name,
+      onDone: (ok) => ok && doctor && checklist(doctor.body, { shell: doctor }),
+    }),
+  );
+
+  doctor = section(m, "The org, from roster doctor", "doctor");
   checklist(doctor.body, { shell: doctor });
 
   /* What is wrong with what this agent is sent. It used to sit in the tree on the Prompt
@@ -132,7 +145,7 @@ function memoryProblems({ body, actions, say }, s) {
     const { row, body: text } = finding(
       p.level === "error" ? "error" : "warning",
       { html: inline(p.message) },
-      [p.rule, p.line ? "INDEX.md:" + p.line : ""],
+      [p.rule, p.line ? "INDEX.md:" + p.line : (p.file ?? "")],
     );
     const status = el("span", { className: "meta" });
     const btn = el("button", { className: "ghbtn", textContent: "Ask " + s.handle.toUpperCase() + " to fix" });
@@ -263,13 +276,13 @@ export async function askToFix(s, problems, btn, status) {
     "",
     "| rule | where | what |",
     "|---|---|---|",
-    ...problems.map((p) => "| `" + p.rule + "` | " + (p.line ? "INDEX.md:" + p.line : "—") + " | " +
+    ...problems.map((p) => "| `" + p.rule + "` | " + (p.line ? "INDEX.md:" + p.line : (p.file ?? "—")) + " | " +
       String(p.message).replace(/\|/g, "\\|") + " |"),
     "",
     "Fix in your next session and close this.",
   ].join("\n");
 
-  if (!confirm("Open an issue in " + s.brain + "?")) return;
+  if (!(await askYes({ title: "Open an issue in " + s.brain + "?", confirm: "Open it" }))) return;
   btn.disabled = true;
   status.textContent = "opening…";
   status.className = "meta";

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

@@ -1,7 +1,7 @@
 /* The inbox: everything open across the org, and the thread beside it. */
 
 import { getLabels, getPr, getThread, post, upload } from "../api.js";
-import { askText } from "../dialog.js";
+import { askText, askYes } from "../dialog.js";
 import { ago, el, esc, markCurrent, skeleton } from "../dom.js";
 import { icon, iconHTML } from "../icons.js";
 import { mdlite } from "../md.js";
@@ -693,7 +693,11 @@ function inboxScreen(m, opts) {
         merge.title = "This branch conflicts with its base";
       }
       merge.onclick = async () => {
-        if (!confirm("Merge " + item.repo + " #" + item.number + " into its base branch?")) return;
+        const yes = await askYes({
+          title: "Merge " + item.repo + " #" + item.number + " into its base branch?",
+          confirm: "Merge",
+        });
+        if (!yes) return;
         busy(true, "merging…");
         try {
           await post({ action: "merge", repo: item.repo, number: item.number });

package/templates/portal/js/views/org.js

@@ -15,11 +15,13 @@
  */
 
 import { getFile, getOrgLayer, post } from "../api.js";
+import { askYes } from "../dialog.js";
 import { el, esc, grow, kb, skeleton } from "../dom.js";
 import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
 import { humansOf, S, writeHash } from "../state.js";
 import { yamlPre } from "../yaml.js";
+import { repoPicker } from "./repos.js";
 
 /* What the files roster itself ships are for, in one line each. A filename says nothing about
    which one to open; anything a tenant has added of its own falls back to its first heading. */
@@ -27,6 +29,8 @@ const KNOWN = {
   "org.yaml": "Who and what: the humans, the repos, the defaults, which agent runs them.",
   "org/business.md":
     "What the business actually is. Every prompt is composed on top of it, and it is the file that stops the agents writing generic slop.",
+  "org/priorities.md":
+    "What matters this month, ranked, and what is out of scope. Every daily run reads it, and every PR says which priority it serves.",
   "org/operating.md":
     "The autonomy contract: what they do without asking, what they escalate, how a run starts and ends.",
   "org/guardrails.md":
@@ -75,6 +79,20 @@ export function viewOrg(m) {
   );
   m.append(facts);
 
+  /* Marking a product repo after setup. The picker only lived on the setup screen, so a repo
+     created later meant typing `role: product` into org.yaml by hand. Folded, because it asks
+     GitHub for every repo in the org and most visits here are to read a file. */
+  const repoPane = el("div");
+  const repos = el("button", { className: "ghbtn", textContent: "Add a product repo" });
+  repos.onclick = () => {
+    if (repoPane.children.length) {
+      repoPane.replaceChildren();
+      return;
+    }
+    repoPane.replaceChildren(repoPicker({ org: org.org, onAdded: () => open("org.yaml") }));
+  };
+  m.append(el("div", { className: "row", style: "margin-bottom:14px" }, [repos]), repoPane);
+
   const split = el("div", { className: "split" });
   const tree = el("div", { className: "tree" });
   const viewer = el("div", { className: "viewer" });
@@ -220,9 +238,11 @@ export function viewOrg(m) {
          through the question, which is worse than not asking. */
       if (
         isYaml &&
-        !confirm(
-          "Commit " + full(path) + " and push?\n\nEvery staff member picks this up on their next run.",
-        )
+        !(await askYes({
+          title: "Commit " + full(path) + " and push?",
+          hint: "Every staff member picks this up on their next run.",
+          confirm: "Commit and push",
+        }))
       ) {
         return;
       }

package/templates/portal/js/views/paste.js

@@ -20,6 +20,12 @@ export function paste(opts) {
   const status = el("p", { className: "sub", textContent: "Building the prompt…" });
   box.append(status);
 
+  /* A charter brief carries a worked example to model the shape on, matched to the role. The
+     choice is on the page because the match is a guess, and "none" is a fair answer. */
+  const model = el("select", { hidden: true });
+  const modelRow = el("label", { className: "sub", hidden: true }, ["Model it on: ", model]);
+  box.append(modelRow);
+
   const actions = el("div", { className: "row" });
   const copy = el("button", { className: "btn primary", textContent: "Copy the prompt" });
   const show = el("button", { className: "btn", textContent: "Show it" });
@@ -42,10 +48,33 @@ export function paste(opts) {
 
   let brief = null;
 
+  const NAMES = { cto: "the CTO example", cmo: "the CMO example", support: "the support example", none: "no example" };
+  model.onchange = () => {
+    copy.disabled = true;
+    getBrief(opts.kind, opts.staff, model.value)
+      .then((data) => {
+        if (data.error) throw new Error(data.error);
+        brief = data;
+        if (!preview.hidden) preview.textContent = brief.text;
+      })
+      .catch((err) => {
+        status.className = "err";
+        status.textContent = String(err.message || err);
+      })
+      .finally(() => {
+        copy.disabled = false;
+      });
+  };
+
   getBrief(opts.kind, opts.staff)
     .then((data) => {
       if (data.error) throw new Error(data.error);
       brief = data;
+      if (data.examples) {
+        model.replaceChildren(...data.examples.map((e) => el("option", { value: e, textContent: NAMES[e] ?? e })));
+        model.value = data.example ?? "none";
+        model.hidden = modelRow.hidden = false;
+      }
       status.textContent =
         "Paste this into Claude, ChatGPT or anything else. It carries every file it refers to, " +
         "so there is nothing to attach and nothing for it to ask you for. It will interview you " +

package/templates/portal/js/views/prompt.js

@@ -10,7 +10,7 @@
  */
 
 import { getFile, post } from "../api.js";
-import { askText } from "../dialog.js";
+import { askText, askYes } from "../dialog.js";
 import { el, esc, grow, kb, toClipboard } from "../dom.js";
 import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
@@ -375,8 +375,12 @@ export function viewPrompt(m) {
         status.textContent = "nothing changed";
         return;
       }
-      if (!confirm("Commit " + layer.path + " to " + layer.repo + " and push?\n\n" +
-                   "Picked up by " + reach + ".")) return;
+      const yes = await askYes({
+        title: "Commit " + layer.path + " to " + layer.repo + " and push?",
+        hint: "Picked up by " + reach + ".",
+        confirm: "Commit and push",
+      });
+      if (!yes) return;
       save.disabled = cancel.disabled = true;
       status.textContent = "committing…";
       status.className = "meta";

package/templates/portal/js/views/repos.js

@@ -5,11 +5,12 @@
  * spelling a repo name exactly right in a YAML file, which is the kind of thing that fails
  * quietly and reads as the tool being broken. */
 
-import { addRepo, listRepos } from "../api.js";
+import { addRepo, getRepos, listRepos } from "../api.js";
 import { el } from "../dom.js";
 
 /**
- * @param {{org: string, known: string[], onAdded?: () => void}} opts
+ * @param {{org: string, known?: string[], onAdded?: () => void}} opts  without `known`, what
+ *   org.yaml already lists is read off disk, which is how the Org screen uses it long after setup.
  */
 export function repoPicker(opts) {
   const box = el("div", { className: "manual" });
@@ -18,7 +19,8 @@ export function repoPicker(opts) {
     el("p", {
       textContent:
         "Repos marked as products are the ones staff contribute to without owning. A new hire " +
-        "picks them up automatically.",
+        "picks them up automatically; somebody already hired keeps the works_in list in their " +
+        "own staff.yaml.",
     }),
   );
 
@@ -26,10 +28,13 @@ export function repoPicker(opts) {
   box.append(out);
   out.replaceChildren(el("p", { className: "sub", textContent: "Reading your repos…" }));
 
-  listRepos(opts.org)
-    .then((data) => {
+  const known = opts.known
+    ? Promise.resolve(opts.known)
+    : getRepos().then((d) => (d.repos ?? []).map((r) => r.name));
+  Promise.all([listRepos(opts.org), known])
+    .then(([data, listed]) => {
       if (data.error) throw new Error(data.error);
-      const already = new Set(opts.known ?? []);
+      const already = new Set(listed);
       const candidates = (data.repos ?? []).filter((r) => !already.has(r.name));
 
       if (!candidates.length) {
@@ -52,7 +57,7 @@ export function repoPicker(opts) {
           add.disabled = true;
           add.textContent = "Adding…";
           try {
-            await addRepo(repo.name, "product");
+            await addRepo(repo.name, "product", repo.visibility);
             add.textContent = "Added";
             row.classList.add("added");
             opts.onAdded?.();