@nanocollective/roster 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/cli.js

@@ -1319,6 +1319,7 @@ async function setupStatus(startedIn) {
       opsDir: found.opsDir,
       org: readOrgName(found.opsDir),
       repos: readBlockNames(found.opsDir, "repos", "name"),
+      products: readProducts(found.opsDir),
       left: unfinished(found.opsDir, readBlockNames(found.opsDir, "staff", "handle").length)
     } : { found: false },
     gh: ready.ok ? { ok: true, login: ready.data?.login } : { ok: false, error: ready.error ?? "gh is not ready" },
@@ -1333,6 +1334,23 @@ function readOrgName(opsDir) {
   const m = /^org:\s*(\S+)\s*$/m.exec(readFileSync10(path, "utf8"));
   return m?.[1];
 }
+function readProducts(opsDir) {
+  const path = join11(opsDir, "org.yaml");
+  if (!existsSync11(path)) return [];
+  const out = [];
+  let inside = false;
+  for (const line of readFileSync10(path, "utf8").split("\n")) {
+    if (/^repos:\s*$/.test(line)) {
+      inside = true;
+      continue;
+    }
+    if (inside && /^\S/.test(line)) break;
+    if (!inside || !/\brole:\s*product\b/.test(line)) continue;
+    const m = /\bname:\s*([\w.-]+)/.exec(line);
+    if (m) out.push(m[1]);
+  }
+  return out;
+}
 function readBlockNames(opsDir, block, key) {
   const path = join11(opsDir, "org.yaml");
   if (!existsSync11(path)) return [];

package/package.json

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

package/templates/portal/css/setup.css

@@ -121,3 +121,25 @@
 .plansteps{margin:6px 0 12px;padding-left:20px;font-size:13.5px;line-height:1.7}
 .planfiles{margin:0 0 12px}
 .planfiles summary{cursor:pointer;color:var(--ink-dim);font-size:12.5px}
+
+/* ---------- the numbered to-do list ---------- */
+
+.todos{display:grid;gap:10px}
+.todo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
+.todo.done{padding:11px 18px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
+.todohead{display:flex;align-items:center;gap:11px}
+.todohead h3{margin:0;font:600 14.5px var(--sans);flex:1}
+.todon{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
+      background:var(--surface-2);color:var(--ink-dim);font:600 11px var(--mono)}
+.todo.done .todon{background:var(--accent-fill);color:var(--accent-ink)}
+.todopill{font:600 11px var(--sans);padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-dim)}
+.todo.done .todopill{background:var(--accent-soft);color:var(--accent)}
+.todohint{margin:8px 0 0 35px}
+.todobody{margin:12px 0 0 35px}
+.todobody .row{margin-top:10px}
+.qfield{display:grid;gap:5px;margin:0 0 12px}
+.qfield span{font:600 12.5px var(--sans)}
+.qfield input{background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 10px;font:13px var(--sans)}
+.altway{margin-top:14px}
+.altway summary{cursor:pointer;color:var(--ink-dim);font-size:12.5px}

package/templates/portal/js/views/checklist.js

@@ -10,6 +10,8 @@ import { el, toClipboard } from "../dom.js";
 const LEVEL_ORDER = { fail: 0, warn: 1, ok: 2 };
 
 /**
+ * @param opts.skip  finding ids the caller already shows as a step of its own, so they are not
+ *   reported twice. With `opts.hideWhenClean`, a list left empty draws nothing at all.
  * @param opts.shell  when Health draws this, the section it lives in: `{actions, say}`. The
  *   setup screen passes nothing and gets the layout it has always had. Its own screen is a
  *   wizard, where a chunky button and a paragraph under it are right; on Health it is one
@@ -32,9 +34,14 @@ export async function checklist(host, opts = {}) {
   const findings = (report.findings ?? []).slice().sort(
     (a, b) => (LEVEL_ORDER[a.level] ?? 3) - (LEVEL_ORDER[b.level] ?? 3),
   );
-  const bad = findings.filter((f) => f.level !== "ok");
+  const skip = new Set(opts.skip ?? []);
+  const bad = findings.filter((f) => f.level !== "ok" && !skip.has(f.id));
 
   host.replaceChildren();
+  if (!bad.length && opts.hideWhenClean) {
+    opts.onEmpty?.();
+    return;
+  }
   opts.shell?.say(bad.length ? String(bad.length) : "clean");
   host.append(
     el("p", {
@@ -83,7 +90,7 @@ export async function checklist(host, opts = {}) {
   const again = el("button", { className: btnClass, textContent: "Check again" });
   again.onclick = () => checklist(host, opts);
 
-  const feet = opts.shell?.actions ?? host;
+  const feet = opts.shell?.actions ?? host.appendChild(el("div", { className: "row" }));
   if (opts.shell) feet.replaceChildren();
   feet.append(copy, again, note);
   if (bad.length) {
@@ -92,8 +99,7 @@ export async function checklist(host, opts = {}) {
         className: noteClass,
         style: "flex-basis:100%",
         textContent:
-          "Paste it into Cursor, Claude Code or anything else that can edit files here, then " +
-          "check again. The ids above should be gone.",
+          "Paste them into your coding agent, then check again.",
       }),
     );
   }

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

@@ -6,24 +6,30 @@
 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: "Agent credential" }));
+/** @param opts.bare  drawn inside a step that already has a title. `onStatus(done)` hears whether one is stored. */
+export function credentialPanel(opts = {}) {
+  const box = el("div", { className: opts.bare ? "" : "manual" });
+  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…" }));
 
   getCredential()
-    .then((c) => draw(body, c))
+    .then((c) => {
+      opts.onStatus?.(Boolean(c.orgSecret));
+      draw(body, c, opts);
+    })
     .catch((err) => body.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) })));
   return box;
 }
 
-function draw(body, c) {
+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) {
+  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",
@@ -73,6 +79,7 @@ function draw(body, c) {
       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", {

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

@@ -15,7 +15,7 @@ import { unifiedDiff, diffStat } from "../textdiff.js";
  */
 export function paste(opts) {
   const box = el("div", { className: "paste" });
-  box.append(el("h3", { textContent: opts.title ?? "Write it with your own AI" }));
+  if (opts.title !== "") box.append(el("h3", { textContent: opts.title ?? "Write it with your own AI" }));
 
   const status = el("p", { className: "sub", textContent: "Building the prompt…" });
   box.append(status);
@@ -23,7 +23,7 @@ export function paste(opts) {
   /* 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]);
+  const modelRow = el("label", { className: "sub", hidden: true }, ["Example to follow: ", model]);
   box.append(modelRow);
 
   const actions = el("div", { className: "row" });
@@ -38,8 +38,7 @@ export function paste(opts) {
   const answer = el("textarea", {
     className: "pastebox",
     placeholder:
-      "Paste the whole reply here, including anything your AI said around the file. " +
-      "Only the part between the sentinels is used.",
+      "Paste its whole reply here.",
   });
   answer.rows = 8;
 
@@ -76,11 +75,9 @@ export function paste(opts) {
         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 " +
-        "first, then hand back the finished file.";
+        "Copy the prompt into Claude or ChatGPT and answer its questions.";
       box.append(
-        el("p", { className: "sub", textContent: "Then paste its whole reply back here:" }),
+        el("p", { className: "sub", textContent: "Then paste its reply here:" }),
         answer,
         el("div", { className: "row" }, [check]),
         result,

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

@@ -13,14 +13,16 @@ import { el } from "../dom.js";
  *   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" });
-  box.append(
-    el("b", { textContent: "Which repos the staff work in" }),
-    el("p", {
-      textContent:
-        "Add the repos your staff should work on. New hires get access to them automatically.",
-    }),
-  );
+  const box = el("div", { className: opts.bare ? "" : "manual" });
+  if (!opts.bare) {
+    box.append(
+      el("b", { textContent: "Which repos the staff work in" }),
+      el("p", {
+        textContent:
+          "Add the repos your staff should work on. New hires get access to them automatically.",
+      }),
+    );
+  }
 
   const out = el("div", { style: "margin-top:9px" });
   box.append(out);

package/templates/portal/js/views/setup.js

@@ -30,6 +30,12 @@ let S = null; // /api/setup/status, refreshed after anything that changes the wo
 /* Where the doctor checklist is drawn on this screen, so a save can re-run it. Left stale, it
    went on saying business.stub after business.md had been saved, until "Check again". */
 let healthHost = null;
+let healthStep = null;
+
+/* What the "What is left" cards already ask for. Doctor reporting them as well, right after a
+   successful create, read as the create having failed. */
+const COVERED = ["business", "business.stub", "priorities", "priorities.stub", "actions-access", "secrets", "agent"];
+const HEALTH = { skip: COVERED, hideWhenClean: true };
 
 /* Each "what is left" step that is a file, by id, so a save can mark it done in place rather
    than repainting the page and throwing away the diff somebody is still reading. */
@@ -55,31 +61,15 @@ export async function viewGettingStarted(main) {
   S = await getSetup();
   // Somebody may have clicked elsewhere while GitHub was answering.
   if (App.view !== "setup") return;
-  sub.textContent =
-    "What is still to do before " + (App.data?.name ?? "this org") + " runs well. Each step " +
-    "reads the world rather than remembering a click, so it is safe to leave and come back.";
-
-  if (!App.data?.staff?.length) {
-    const next = step(1, "Hire your first staff member", false);
-    const hire = el("button", { className: "btn primary", textContent: "Hire someone" });
-    hire.onclick = () => go({ view: "staff" });
-    next.append(
-      el("p", {
-        textContent:
-          "Nothing runs until you hire someone. You'll set up their GitHub App and charter from their card.",
-      }),
-      el("div", { className: "row" }, [hire]),
-    );
-    main.append(next);
-  }
+  sub.textContent = "Work through these in order.";
+  main.append(afterCreate());
 
-  main.append(afterCreate(App.data?.staff?.length ? 1 : 2));
-
-  const health = step(App.data?.staff?.length ? 2 : 3, "What doctor still says", false);
+  const health = step("!", "Other problems", false);
   healthHost = el("div", { style: "margin-top:12px" });
   health.append(healthHost);
   main.append(health);
-  checklist(healthHost, {});
+  healthStep = health;
+  checklist(healthHost, { ...HEALTH, onEmpty: () => health.remove() });
 }
 
 /** Whether the sidebar offers Getting started: while anything is left, or while it is open. */
@@ -93,7 +83,7 @@ export function paintSetupNav() {
    again rather than updated by hand. The sidebar's list comes from /api/org, which is the one
    the portal already reads. */
 async function recheck() {
-  if (healthHost) checklist(healthHost, {});
+  if (healthHost) checklist(healthHost, { ...HEALTH, onEmpty: () => healthStep?.remove() });
   try {
     S = await getSetup();
     for (const [id, mark] of fileSteps) mark(!(S.tenant.left ?? []).includes(id));
@@ -129,7 +119,11 @@ function render(main) {
 
   /* Drawn whenever a tenant exists, not only in the seconds after creating one. Setup takes
      days: the repo picker and the two manual steps have to still be here tomorrow. */
-  if (S.tenant.found) main.append(afterCreate(3));
+  if (S.tenant.found) {
+    const rest = step(3, "Finish setting up", false);
+    rest.append(afterCreate());
+    main.append(rest);
+  }
 }
 
 /* ---------------------------------- 1 · gh ---------------------------------- */
@@ -166,13 +160,9 @@ function stepOrg(main) {
       el("p", {
         className: "sub",
         textContent:
-          "Reload the page to open the portal. Anything below that is still undone stays under " +
-          "Getting started in the sidebar until it is.",
+          "Finish the steps below. They stay under Getting started in the sidebar until they're done.",
       }),
     );
-    healthHost = el("div", { style: "margin-top:12px" });
-    card.append(healthHost);
-    checklist(healthHost, {});
     return card;
   }
 
@@ -386,33 +376,95 @@ function stepOrg(main) {
 
 /* ------------------------- 5 · the two GitHub insists on ------------------------- */
 
-function afterCreate(n) {
+function afterCreate() {
   fileSteps.clear();
-  const card = step(n, "What is left", false);
-  card.append(accessStep());
-  card.append(credentialPanel());
+  const list = el("div", { className: "todos" });
+  const left = S.tenant.left ?? [];
+  const staffCount = App.data?.staff?.length ?? 0;
+  let n = 0;
 
   if (S.tenant.org) {
-    card.append(repoPicker({ org: S.tenant.org, known: S.tenant.repos ?? [] }));
+    const repos = todo(++n, "Choose the repos your staff work on", (S.tenant.products ?? []).length > 0);
+    repos.hint("Pick at least one. Staff open pull requests there, and you review them.");
+    repos.body.append(
+      repoPicker({ org: S.tenant.org, known: S.tenant.repos ?? [], bare: true, onAdded: () => repos.setDone(true) }),
+    );
+    list.append(repos.card);
   }
 
-  const business = fileStep(
-    "business",
-    "Describe the business",
-    "Answer the questions in org/business.md. Every staff member reads it before they start work.",
-  );
-  // The copy-a-prompt loop, which is the whole answer to "how do I write this file".
-  business.append(paste({ kind: "discover", title: "Write it with your own AI", onSaved: recheck }));
-  card.append(business);
-
-  const priorities = fileStep(
-    "priorities",
-    "Set this month's priorities",
-    "Up to three things, in order, plus what's out of scope. Saved as org/priorities.md.",
-  );
-  priorities.append(prioritiesEditor());
-  card.append(priorities);
-  return card;
+  const business = todo(++n, "Describe the business", !left.includes("business"));
+  business.hint("A few short answers. Every staff member reads them before they start work.");
+  business.body.append(businessForm(() => business.setDone(true)));
+  fileSteps.set("business", business.setDone);
+  list.append(business.card);
+
+  const priorities = todo(++n, "Set this month's priorities", !left.includes("priorities"));
+  priorities.hint("Up to three, in order. Staff pick work that serves them.");
+  priorities.body.append(prioritiesForm(() => priorities.setDone(true)));
+  fileSteps.set("priorities", priorities.setDone);
+  list.append(priorities.card);
+
+  const hire = todo(++n, "Hire your first staff member", staffCount > 0);
+  hire.hint("Give them a role, like cto. You'll create their GitHub App and write their charter from their card.");
+  const hireBtn = el("button", { className: "btn primary", textContent: "Hire someone" });
+  hireBtn.onclick = () => {
+    // Before the org has loaded, this screen is the whole app, so the Staff screen needs a reload.
+    if (App.data) go({ view: "staff" });
+    else location.assign("/#/-/staff") || location.reload();
+  };
+  hire.body.append(el("div", { className: "row" }, [hireBtn]));
+  list.append(hire.card);
+
+  const cred = todo(++n, "Add your agent credential", false);
+  cred.hint(staffCount ? "Staff use it to run. You only add it once." : "Do this after your first hire.");
+  cred.body.append(credentialPanel({ bare: true, onStatus: (ok) => cred.setDone(ok) }));
+  list.append(cred.card);
+
+  const access = todo(++n, "Let staff repos use the shared workflow", false);
+  access.body.append(accessStep({ onStatus: (ok) => access.setDone(ok) }));
+  list.append(access.card);
+
+  return list;
+}
+
+/**
+ * One numbered thing to do. Done ones fold to a single ticked line, and Change opens them again,
+ * so the list shows what is left without hiding what was done.
+ */
+function todo(n, title, done) {
+  const card = el("section", { className: "todo" });
+  const num = el("span", { className: "todon" });
+  const pill = el("span", { className: "todopill" });
+  const change = el("button", { className: "ghbtn todochange", textContent: "Change" });
+  const head = el("div", { className: "todohead" }, [num, el("h3", { textContent: title }), pill, change]);
+  const hintEl = el("p", { className: "sub todohint" });
+  const body = el("div", { className: "todobody" });
+  card.append(head, hintEl, body);
+  let open = false;
+  const setDone = (d) => {
+    card.classList.toggle("done", d);
+    num.textContent = d ? "✓" : String(n);
+    pill.textContent = d ? "Done" : "To do";
+    change.hidden = !d;
+    const shown = !d || open;
+    body.hidden = !shown;
+    hintEl.hidden = !shown || !hintEl.textContent;
+  };
+  change.onclick = () => {
+    open = !open;
+    change.textContent = open ? "Close" : "Change";
+    setDone(card.classList.contains("done"));
+  };
+  setDone(done);
+  return {
+    card,
+    body,
+    setDone,
+    hint: (text) => {
+      hintEl.textContent = text;
+      setDone(card.classList.contains("done"));
+    },
+  };
 }
 
 /**
@@ -421,18 +473,6 @@ function afterCreate(n) {
  * Read from the status rather than from the click that saved it, so a file written in an
  * editor, or by a coding agent, shows as done here too.
  */
-function fileStep(id, title, why) {
-  const box = el("div", { className: "manual" });
-  const tag = el("span", { className: "meta" });
-  const mark = (done) => {
-    tag.textContent = done ? "Written." : "Still the stub it shipped as.";
-    box.classList[done ? "add" : "remove"]("done");
-  };
-  mark(!(S.tenant.left ?? []).includes(id));
-  fileSteps.set(id, mark);
-  box.append(el("div", {}, [el("b", { textContent: title }), tag]), el("p", { textContent: why }));
-  return box;
-}
 
 /**
  * org/priorities.md, edited in place.
@@ -442,58 +482,143 @@ function fileStep(id, title, why) {
  * quicker to type than to explain to a model. So the file opens as it is on disk, stub and
  * all, and saving it is the same commit-and-push as every other editor here.
  */
-function prioritiesEditor() {
-  const box = el("div", { style: "margin-top:9px" });
-  const path = opsName() + "/org/priorities.md";
-  const ta = el("textarea", { className: "pastebox" });
-  ta.rows = 12;
-  const save = el("button", { className: "btn primary", textContent: "Save and commit" });
+const BUSINESS_QUESTIONS = [
+  ["line", "What does it do, in one line?", "What this business does, in one line", true],
+  ["who", "Who is it for?", "Who the customers are, specifically", true],
+  ["key", "What does everything depend on?", "The one fact everything else follows from", false],
+  ["true", "What's already true? What's built, measured or tried?", "What is already true", false],
+  ["not", "What should staff never decide on their own?", "What is not ours to decide", false],
+];
+
+/** The business, as five questions in plain fields, written out as org/business.md. */
+function businessForm(onSaved) {
+  const box = el("div");
+  const path = opsName() + "/org/business.md";
+  const fields = BUSINESS_QUESTIONS.map(([id, label, , required]) => {
+    const input = id === "line" ? el("input", { type: "text" }) : el("textarea", { className: "pastebox", rows: 3 });
+    const wrap = el("label", { className: "qfield" }, [
+      el("span", { textContent: label + (required ? "" : " (optional)") }),
+      input,
+    ]);
+    return { id, input, wrap };
+  });
+  const save = el("button", { className: "btn primary", textContent: "Save" });
   const out = el("div");
-  box.append(ta, el("div", { className: "row", style: "margin-top:9px" }, [save]), out);
-
-  let before = "";
-  save.disabled = true;
-  // Not getFile: an absent file answers 404 with a message, and that is not what to edit.
-  fetch(fileUrl(path), { cache: "no-store" })
-    .then((r) => (r.ok ? r.text() : ""))
-    .then((text) => {
-      before = text;
-      ta.value = text;
-      grow(ta);
-      save.disabled = false;
-    })
-    .catch((err) => out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) })));
-  ta.addEventListener("input", () => grow(ta));
+  box.append(...fields.map((f) => f.wrap), el("div", { className: "row" }, [save]), out);
 
   save.onclick = async () => {
-    if (ta.value.trim() === before.trim()) {
-      out.replaceChildren(el("p", { className: "sub", textContent: "Nothing changed yet." }));
+    const missing = fields.find((f, i) => BUSINESS_QUESTIONS[i][3] && !String(f.input.value ?? "").trim());
+    if (missing) {
+      missing.input.focus();
+      out.replaceChildren(el("p", { className: "err", textContent: "Answer the first two at least." }));
       return;
     }
-    save.disabled = true;
-    save.textContent = "Saving…";
-    try {
-      const r = await saveFile(path, ta.value, "portal: write org/priorities.md");
-      before = ta.value;
-      out.replaceChildren(
-        el("p", {
-          className: r.pushed ? "sub" : "err",
-          textContent: r.pushed
-            ? "Saved and pushed."
-            : "Committed, but the push failed: " + (r.note ?? ""),
-        }),
-      );
-      recheck();
-    } catch (err) {
-      out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
-    } finally {
-      save.disabled = false;
-      save.textContent = "Save and commit";
+    const name = App.data?.name ?? S.tenant.name ?? S.tenant.org;
+    const text =
+      `# What ${name} is\n\n` +
+      fields
+        .map((f, i) => [BUSINESS_QUESTIONS[i][2], String(f.input.value ?? "").trim()])
+        .filter(([, v]) => v)
+        .map(([h, v]) => `## ${h}\n\n${v}\n`)
+        .join("\n");
+    await saveAndSay(save, out, path, text, "portal: write org/business.md", onSaved);
+  };
+
+  // For somebody who would rather be interviewed than fill in a form.
+  box.append(
+    el("details", { className: "altway" }, [
+      el("summary", { textContent: "Or let an AI interview you instead" }),
+      paste({ kind: "discover", title: "", onSaved: () => (onSaved(), recheck()) }),
+    ]),
+  );
+  box.append(changeRaw(path, onSaved));
+  return box;
+}
+
+/** This month's priorities, as three lines and an out-of-scope list. */
+function prioritiesForm(onSaved) {
+  const box = el("div");
+  const path = opsName() + "/org/priorities.md";
+  const ranks = [1, 2, 3].map((i) => {
+    const input = el("input", { type: "text", placeholder: i === 1 ? "e.g. Tasks can be ticked off and removed" : "" });
+    return { input, wrap: el("label", { className: "qfield" }, [el("span", { textContent: "Priority " + i + (i > 1 ? " (optional)" : "") }), input]) };
+  });
+  const scope = el("textarea", { className: "pastebox", rows: 3, placeholder: "One per line" });
+  const save = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  box.append(
+    ...ranks.map((r) => r.wrap),
+    el("label", { className: "qfield" }, [el("span", { textContent: "Out of scope this month (optional)" }), scope]),
+    el("div", { className: "row" }, [save]),
+    out,
+  );
+  save.onclick = async () => {
+    const items = ranks.map((r) => String(r.input.value ?? "").trim()).filter(Boolean);
+    if (!items.length) {
+      ranks[0].input.focus();
+      out.replaceChildren(el("p", { className: "err", textContent: "Add at least one priority." }));
+      return;
     }
+    const outs = String(scope.value ?? "").split("\n").map((l) => l.replace(/^[-*]\s*/, "").trim()).filter(Boolean);
+    const text =
+      "## What matters this month\n\n### Priorities, in order\n\n" +
+      items.map((t, i) => `${i + 1}. ${t}`).join("\n") +
+      "\n" +
+      (outs.length ? "\n### Out of scope this month\n\n" + outs.map((t) => `- ${t}`).join("\n") + "\n" : "");
+    await saveAndSay(save, out, path, text, "portal: write org/priorities.md", onSaved);
   };
+  box.append(changeRaw(path, onSaved));
   return box;
 }
 
+async function saveAndSay(btn, out, path, text, message, onSaved) {
+  btn.disabled = true;
+  const label = btn.textContent;
+  btn.textContent = "Saving…";
+  try {
+    const r = await saveFile(path, text, message);
+    out.replaceChildren(
+      el("p", {
+        className: r.pushed ? "sub" : "err",
+        textContent: r.pushed ? "Saved." : "Saved locally, but the push failed: " + (r.note ?? ""),
+      }),
+    );
+    onSaved();
+    recheck();
+  } catch (err) {
+    out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+  } finally {
+    btn.disabled = false;
+    btn.textContent = label;
+  }
+}
+
+/** The file itself, for editing what is already there rather than starting again. */
+function changeRaw(path, onSaved) {
+  const details = el("details", { className: "altway" });
+  details.append(el("summary", { textContent: "Or edit the file directly" }));
+  let loaded = false;
+  details.addEventListener("toggle", () => {
+    if (!details.open || loaded) return;
+    loaded = true;
+    const ta = el("textarea", { className: "pastebox" });
+    ta.rows = 12;
+    const save = el("button", { className: "btn", textContent: "Save" });
+    const out = el("div");
+    details.append(ta, el("div", { className: "row" }, [save]), out);
+    // Not getFile: an absent file answers 404 with a message, and that is not what to edit.
+    fetch(fileUrl(path), { cache: "no-store" })
+      .then((r) => (r.ok ? r.text() : ""))
+      .then((text) => {
+        ta.value = text;
+        grow(ta);
+      });
+    ta.addEventListener("input", () => grow(ta));
+    save.onclick = () => saveAndSay(save, out, path, ta.value, "portal: edit " + path.split("/").slice(1).join("/"), onSaved);
+  });
+  return details;
+}
+
 /** The ops repo's directory name, which is what every workspace-relative path starts with. */
 function opsName() {
   return App.data?.opsName ?? String(S.tenant.opsDir ?? "roster-ops").split("/").pop();
@@ -506,9 +631,8 @@ function opsName() {
  *
  * Skipped, every workflow fails with "workflow not found", which reads like a typo in a path.
  */
-function accessStep() {
-  const box = el("div", { className: "manual" });
-  box.append(el("b", { textContent: "Let staff repos run the shared workflow" }));
+function accessStep(opts = {}) {
+  const box = el("div");
   const out = el("div");
   box.append(out);
   const say = (text, cls) => el("p", { className: cls ?? "sub", textContent: text });
@@ -518,7 +642,7 @@ function accessStep() {
     out.replaceChildren(
       say(
         (why ? why + " " : "") +
-          "Needed so staff repos can run the shared workflow.",
+          "Roster tried to set this when it created the org, and GitHub didn't allow it.",
       ),
       el("div", { className: "row" }, [go]),
     );
@@ -528,6 +652,7 @@ function accessStep() {
         const r = await setAccess();
         if (r.ok) {
           out.replaceChildren(say("Done."));
+          opts.onStatus?.(true);
           return;
         }
         out.replaceChildren(
@@ -545,6 +670,7 @@ function accessStep() {
   out.replaceChildren(say("Checking…"));
   getAccess()
     .then((r) => {
+      opts.onStatus?.(Boolean(r.ok));
       if (r.ok) out.replaceChildren(say("Done."));
       else offer(r.level ? "It is set to “" + r.level + "”." : "");
     })