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

package/docs/writing-a-charter.md

@@ -28,10 +28,10 @@ layer. That is the part that matters most, because without them the model writes
 of whoever it was shown. The brief then interviews you, drafts from your answers, and tells you
 what it cut and why.
 
-**So is a worked example, when one fits.** A staff member whose handle or role reads as a CTO, a
-CMO or support gets the matching [example](#worked-examples) inside the brief, labelled as a
+**So is a worked example, when one fits.** A staff member whose handle or role reads as one of
+the ten roles below gets the matching [example](#worked-examples) inside the brief, labelled as a
 model for the shape and not content to copy. The copy-a-prompt panel has a picker to choose
-another or none; in a terminal it is `--example cto|cmo|support|none`. It is still a brief you
+another or none; in a terminal it is `--example <handle>` or `--example none`. It is still a brief you
 answer: the interview comes first, and nothing in the charter should come from the example
 rather than from you.
 
@@ -72,9 +72,22 @@ status issue, and the surfaces the manifest declares.
 
 ## Worked examples
 
-Three, for an invented company called Acme: a [CTO](charters/cto.md), a [CMO](charters/cmo.md)
-and a [Head of Support](charters/support.md). They are examples to adapt, not templates to fill
-in. Read them for what a finished charter covers and how specific it gets, then write your own
+Ten, for an invented company called Acme. The handle in brackets is the one `--example` takes.
+
+| Example | What they do |
+|---|---|
+| [CTO](charters/cto.md) (`cto`) | Builds the product: fixes, features and tests, as pull requests. |
+| [CMO](charters/cmo.md) (`cmo`) | Posts, SEO, copy and launch plans, as drafts to approve. |
+| [Head of Support](charters/support.md) (`support`) | Answers issues, writes help docs, and turns user reports into bugs. |
+| [Product Manager](charters/pm.md) (`pm`) | Turns ideas and user feedback into clear specs and a ranked backlog. |
+| [Designer](charters/designer.md) (`designer`) | Improves the product's look and usability, with accessibility fixes, as pull requests. |
+| [QA Engineer](charters/qa.md) (`qa`) | Tests the product, finds bugs, and writes clear reproductions and tests. |
+| [DevOps Engineer](charters/devops.md) (`devops`) | Keeps CI, deploys and dependencies healthy, and patches security updates. |
+| [Technical Writer](charters/writer.md) (`writer`) | Writes and keeps up the docs, guides and changelog. |
+| [Data Analyst](charters/analyst.md) (`analyst`) | Reads the numbers and writes a short weekly report on what changed. |
+| [Community Manager](charters/community.md) (`community`) | Answers discussions, welcomes contributors, and drafts release announcements. |
+
+They are examples to adapt, not templates to fill in. Read them for what a finished charter covers and how specific it gets, then write your own
 about your business. A charter copied from one of these describes Acme. The brief carries the matching one for
 you; these links are for reading them first.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanocollective/roster",
-  "version": "0.1.0-alpha.25",
+  "version": "0.1.0-alpha.27",
   "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

@@ -276,3 +276,12 @@ body[data-lightbox] {overflow:hidden}
 
 /* And the affordance on the document side: an image you can open should say so. */
 .md img,img.zoomable{cursor:zoom-in}
+
+/* ---------- a dialog for a whole task (sheet() in dialog.js) ---------- */
+dialog.sheet{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg);
+      color:var(--ink);padding:0;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);
+      box-shadow:var(--shadow-lg)}
+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}

package/templates/portal/css/layout.css

@@ -148,3 +148,12 @@ main{padding:36px 44px 96px;max-width:1220px;overflow-x:hidden}
   .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
   .sidefoot{margin-top:0}
 }
+
+/* A staff member who cannot run yet (readiness.js). */
+.readydot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none;margin-left:4px}
+.staffcard.notready{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
+.hirecard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;
+      border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:none;color:var(--ink-dim);
+      font:600 14px var(--sans);cursor:pointer}
+.hirecard:hover{color:var(--ink);border-color:var(--accent)}
+.hirecard::before{content:"+";font-size:22px;line-height:1}

package/templates/portal/css/setup.css

@@ -182,3 +182,4 @@
 .pastenotes summary{cursor:pointer;font:600 12.5px var(--sans);color:var(--ink-dim);margin-bottom:6px}
 .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}

package/templates/portal/js/app.js

@@ -24,6 +24,7 @@ import { viewInbox, viewPrs } from "./views/inbox.js";
 import { viewOrg } from "./views/org.js";
 import { viewPrompt } from "./views/prompt.js";
 import { viewRuns } from "./views/runs.js";
+import { sentence, whatsLeft } from "./readiness.js";
 import { paintSetupNav, viewGettingStarted, viewSetup } from "./views/setup.js";
 import { viewStaff } from "./views/staff.js";
 
@@ -112,6 +113,7 @@ export async function boot() {
   S.data = first;
   S.loadedAt = new Date();
   S.staffOpen = null; // an open hire list survives a refresh, not a page load
+  S.readiness = null;
   S.staffHandle = S.data.staff[0]?.handle ?? null;
   $("#orgname").textContent = S.data.name + " · " + S.data.staff.length + " staff";
 
@@ -262,11 +264,19 @@ function paintSidebar() {
     const head = el("button", { className: "nav staffrow" });
     head.dataset.staff = s.handle;
     head.setAttribute("aria-expanded", String(open));
+    const dot = el("span", { className: "readydot", hidden: true });
     head.append(
       icon("chevron", "caret"),
       el("span", { className: "t", textContent: s.name }),
+      dot,
       el("span", { className: "hh", textContent: s.handle }),
     );
+    whatsLeft(s).then((left) => {
+      if (!left.length) return;
+      dot.hidden = false;
+      head.title = "Not ready to run: " + sentence(left);
+      paintSetupNav();
+    });
 
     const views = el("div", { className: "staffviews" });
     views.hidden = !open;

package/templates/portal/js/dialog.js

@@ -158,3 +158,38 @@ export function askYes({ title, hint, confirm = "Continue" }) {
     cancel.focus();
   });
 }
+
+/**
+ * A larger dialog for a whole task: hiring someone, or finishing their setup. Native <dialog>
+ * again, appended to <body> rather than to the screen, so a background refresh repainting the
+ * screen leaves it open with whatever was typed into it.
+ *
+ * @returns {{set: (node: Node) => void, close: () => void, isOpen: () => boolean} | null}
+ *   null where there is no dialog element (the test shim), and the caller draws inline instead.
+ */
+export function sheet({ node, onClose }) {
+  const box = document.createElement("dialog");
+  if (typeof box.showModal !== "function") return null;
+  box.className = "sheet";
+  const body = el("div", { className: "sheetbody" });
+  body.append(node);
+  box.append(body);
+  let open = true;
+  const close = () => {
+    if (!open) return;
+    open = false;
+    box.close();
+    box.remove();
+    onClose?.();
+  };
+  box.addEventListener("cancel", (e) => {
+    e.preventDefault();
+    close();
+  });
+  box.addEventListener("click", (e) => {
+    if (onBackdrop(e, box.getBoundingClientRect())) close();
+  });
+  document.body.append(box);
+  box.showModal();
+  return { set: (n) => body.replaceChildren(n), close, isOpen: () => open };
+}

package/templates/portal/js/readiness.js

@@ -0,0 +1,35 @@
+/* Whether each staff member can actually run yet.
+ *
+ * A hire that had its App created but not installed, and no credential, looked finished: the
+ * card said so and Getting started went away. This is the one answer every screen asks. */
+
+import { getStaffProgress } from "./api.js";
+import { S } from "./state.js";
+
+/** What is left for one staff member, as short instructions. Empty when they are ready. */
+export async function whatsLeft(s, fresh = false) {
+  const left = [];
+  if (s.rig?.charterStub) left.push("write the charter");
+  const p = await getStaffProgress(s.handle, fresh).catch(() => ({}));
+  if (p.installed === false) left.push(p.app ? "install the GitHub App" : "create the GitHub App");
+  if (p.credential === false) left.push("add the agent credential");
+  if (p.ran === false) left.push("run once");
+  S.readiness = { ...(S.readiness ?? {}), [s.handle]: left };
+  return left;
+}
+
+/** Every staff member's, then `then` once all have answered. */
+export function checkAll(then) {
+  return Promise.all((S.data?.staff ?? []).map((s) => whatsLeft(s))).then(() => then?.());
+}
+
+/** The staff with anything left, from what has been checked so far. */
+export function notReady() {
+  return (S.data?.staff ?? []).filter((s) => (S.readiness?.[s.handle] ?? []).length);
+}
+
+/** "install the GitHub App, add the agent credential and run once" */
+export function sentence(left) {
+  if (left.length < 2) return left.join("");
+  return left.slice(0, -1).join(", ") + " and " + left.at(-1);
+}

package/templates/portal/js/state.js

@@ -38,6 +38,8 @@ export const S = {
   loadedAt: null,
   /** The role whose hire list is open on the Staff screen, kept across a refresh. */
   staffOpen: null,
+  /** Per staff member, what is left before they can run. See readiness.js. */
+  readiness: null,
 
   staffHandle: null,
   /* What is waiting on you, not whose brain you read last. The org-wide screens are where a

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

@@ -39,10 +39,52 @@ const ROLES = [
     name: "Head of Support",
     about: "Answers issues, writes help docs, and turns user reports into bugs.",
   },
+  {
+    handle: "pm",
+    label: "Product manager",
+    name: "Product Manager",
+    about: "Turns ideas and user feedback into clear specs and a ranked backlog.",
+  },
+  {
+    handle: "designer",
+    label: "Designer",
+    name: "Designer",
+    about: "Improves the product's look and usability, with accessibility fixes, as pull requests.",
+  },
+  {
+    handle: "qa",
+    label: "QA",
+    name: "QA Engineer",
+    about: "Tests the product, finds bugs, and writes clear reproductions and tests.",
+  },
+  {
+    handle: "devops",
+    label: "DevOps",
+    name: "DevOps Engineer",
+    about: "Keeps CI, deploys and dependencies healthy, and patches security updates.",
+  },
+  {
+    handle: "writer",
+    label: "Writer",
+    name: "Technical Writer",
+    about: "Writes and keeps up the docs, guides and changelog.",
+  },
+  {
+    handle: "analyst",
+    label: "Analyst",
+    name: "Data Analyst",
+    about: "Reads the numbers and writes a short weekly report on what changed.",
+  },
+  {
+    handle: "community",
+    label: "Community",
+    name: "Community Manager",
+    about: "Answers discussions, welcomes contributors, and drafts release announcements.",
+  },
 ];
 
 /**
- * The roles as cards. The three with worked examples are offered until they are hired;
+ * The roles as cards. Each has a worked example, and is offered until it is hired;
  * Something else asks for a name and a sentence.
  * @param {{onPick: (role: {handle: string, name: string, dir: string, about?: string}) => void}} o
  */
@@ -141,7 +183,7 @@ export function hireFlow(o) {
   box.append(list);
 
   const hire = todo(1, "Hire", hired);
-  const app = todo(2, "Create their GitHub App", false);
+  const app = todo(2, "Create and install their GitHub App", false);
   const charter = todo(3, "Write their charter", hired && !s.rig?.charterStub);
   const cred = todo(4, "Add your agent credential", false);
   const run = todo(5, "Run once now", false);
@@ -182,14 +224,17 @@ export function hireFlow(o) {
 
   /* 2 · the App. The public identity only matters when a product repo is public, and hire
      treats one with no visibility written as public, so this does too. */
+  /* Done means installed, not created: an App with its keys saved and no install looked
+     finished, and every run would have failed. */
   let needPublic = false;
   const made = { private: false, public: false };
   const appDone = () => app.setDone(made.private && (!needPublic || made.public));
   const panels = el("div");
-  app.body.append(panels);
-  panels.append(
-    appPanel({ staff: s.handle, name: s.name, scope: "private", onDone: () => ((made.private = true), appDone()) }),
-  );
+  const installNote = el("p", { className: "warnline", hidden: true });
+  const recheck = el("button", { className: "ghbtn", textContent: "Check again" });
+  recheck.onclick = () => checkProgress();
+  app.body.append(panels, installNote, el("div", { className: "row" }, [recheck]));
+  panels.append(appPanel({ staff: s.handle, name: s.name, scope: "private", onDone: () => checkProgress() }));
   getRepos()
     .then((r) => {
       needPublic = (r.repos ?? []).some(
@@ -198,7 +243,7 @@ export function hireFlow(o) {
       if (needPublic) {
         app.hint("One of your product repos is public. Public work uses a second App, shared by all staff.");
         panels.append(
-          appPanel({ staff: s.handle, name: s.name, scope: "public", onDone: () => ((made.public = true), appDone()) }),
+          appPanel({ staff: s.handle, name: s.name, scope: "public", onDone: () => checkProgress() }),
         );
       }
       appDone();
@@ -225,15 +270,27 @@ export function hireFlow(o) {
     }),
   );
 
-  /* What only GitHub knows: the App's secrets on the repo, and whether a run has succeeded. */
-  getStaffProgress(s.handle, true)
-    .then((p) => {
-      if (p.app) made.private = true;
-      if (p.publicApp) made.public = true;
-      appDone();
-      if (p.ran) run.setDone(true);
-    })
-    .catch(() => {});
+  /* What only GitHub knows: whether the App is installed, whether the credential is stored,
+     and whether a run has succeeded. Asked again by Check again, after a trip to GitHub. */
+  function checkProgress() {
+    return getStaffProgress(s.handle, true)
+      .then((p) => {
+        made.private = p.installed === true;
+        made.public = p.publicInstalled === true;
+        appDone();
+        installNote.hidden = !(p.app && p.installed === false);
+        installNote.textContent =
+          "Created, but not installed yet. Press Install, and choose All repositories or include roster-ops.";
+        if (p.installed && p.installSelection === "selected") {
+          installNote.hidden = false;
+          installNote.textContent =
+            "Installed on selected repos. Make sure roster-ops is one of them, or runs will fail.";
+        }
+        if (p.ran) run.setDone(true);
+      })
+      .catch(() => {});
+  }
+  checkProgress();
 
   return box;
 }

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

@@ -49,7 +49,19 @@ export function paste(opts) {
 
   let brief = null;
 
-  const NAMES = { cto: "the CTO example", cmo: "the CMO example", support: "the support example", none: "no example" };
+  const NAMES = {
+    cto: "the CTO example",
+    cmo: "the CMO example",
+    support: "the support example",
+    pm: "the product manager example",
+    designer: "the designer example",
+    qa: "the QA example",
+    devops: "the DevOps example",
+    writer: "the writer example",
+    analyst: "the analyst example",
+    community: "the community example",
+    none: "no example",
+  };
   model.onchange = () => {
     copy.disabled = true;
     getBrief(opts.kind, opts.staff, model.value, opts.about)

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

@@ -18,6 +18,7 @@ import {
 import { $, el, esc, toClipboard } from "../dom.js";
 import { go } from "../router.js";
 import { S as App } from "../state.js";
+import { checkAll, notReady, sentence } from "../readiness.js";
 import { checklist } from "./checklist.js";
 import { businessForm, prioritiesForm } from "./orgedit.js";
 import { credentialPanel } from "./credential.js";
@@ -60,8 +61,24 @@ export async function viewGettingStarted(main) {
   S = await getSetup();
   // Somebody may have clicked elsewhere while GitHub was answering.
   if (App.view !== "setup") return;
+  await checkAll();
+  if (App.view !== "setup") return;
   sub.textContent = "Work through these in order.";
-  main.append(afterCreate());
+  const list = afterCreate();
+
+  // Somebody hired but not ready to run is the most important thing left, so it comes first.
+  for (const s of notReady().reverse()) {
+    const t = todo("!", "Finish setting up " + s.name, false);
+    t.hint("Still to do: " + sentence(App.readiness?.[s.handle] ?? []) + ".");
+    const cont = el("button", { className: "btn primary", textContent: "Continue" });
+    cont.onclick = () => {
+      App.staffOpen = { handle: s.handle, name: s.name, dir: s.dir };
+      go({ view: "staff" });
+    };
+    t.body.append(el("div", { className: "row" }, [cont]));
+    list.prepend(t.card);
+  }
+  main.append(list);
 
   const health = step("!", "Other problems", false);
   healthHost = el("div", { style: "margin-top:12px" });
@@ -75,7 +92,7 @@ export async function viewGettingStarted(main) {
 export function paintSetupNav() {
   const nav = $("#setupnav");
   if (!nav) return;
-  nav.hidden = !App.data?.unfinished?.length && App.view !== "setup";
+  nav.hidden = !App.data?.unfinished?.length && !notReady().length && App.view !== "setup";
 }
 
 /* After a save: the checklist and the step list are both derived from disk, so both are asked

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

@@ -5,16 +5,17 @@
  * and nothing happens until you say so.
  */
 
-import { getStaffProgress, post } from "../api.js";
-import { askYes } from "../dialog.js";
+import { post } from "../api.js";
+import { askYes, sheet } from "../dialog.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 { appPanel } from "./app.js";
-import { credentialPanel } from "./credential.js";
 import { hireFlow, line, rolePicker } from "./hire.js";
-import { paste } from "./paste.js";
-import { runOnce } from "./runonce.js";
+
+/* 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;
 
 /**
  * @param {{open?: string, result?: object}} [o]  `open` keeps one staff member's steps on
@@ -27,24 +28,52 @@ export function viewStaff(m, o = {}) {
 
   const pane = el("div", { className: "hirepane" });
 
-  const pick = () => {
-    pane.replaceChildren(
-      ...(empty ? [] : [el("h3", { textContent: "Pick a role" })]),
-      rolePicker({ onPick: (role) => open(role) }),
-    );
-    if (!empty) {
-      const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
-      cancel.onclick = () => pane.replaceChildren();
-      pane.append(el("div", { className: "row" }, [cancel]));
+  /* 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;
     }
-  };
+    current = sheet({
+      node,
+      onClose: () => {
+        current = null;
+        S.staffOpen = null;
+      },
+    });
+    if (!current) pane.replaceChildren(node);
+  }
+  function dismiss() {
+    if (current) current.close();
+    else pane.replaceChildren();
+    S.staffOpen = null;
+    if (empty) pick();
+  }
+
+  // With nobody hired the roles are the page. After that they are a dialog behind Hire someone.
+  function pick() {
+    if (empty) {
+      pane.replaceChildren(rolePicker({ onPick: (role) => open(role) }));
+      return;
+    }
+    const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
+    cancel.onclick = dismiss;
+    present(
+      el("div", {}, [
+        el("h2", { className: "sheettitle", textContent: "Pick a role" }),
+        rolePicker({ onPick: (role) => open(role) }),
+        el("div", { className: "row", style: "margin-top:14px" }, [cancel]),
+      ]),
+    );
+  }
 
   /* One staff member's steps, hired or not yet. A hire repaints the whole screen, so the new
      card is in the list and the steps reopen on the same person. */
   function open(role, result) {
     // Remembered, so a refresh after a trip to GitHub (creating the App) reopens it.
     S.staffOpen = role;
-    pane.replaceChildren(
+    present(
       hireFlow({
         role,
         result,
@@ -52,32 +81,29 @@ export function viewStaff(m, o = {}) {
           m.replaceChildren();
           viewStaff(m, { open: handle, result: r });
         },
-        onClose: () => {
-          S.staffOpen = null;
-          if (empty) pick();
-          else pane.replaceChildren();
-        },
+        onClose: dismiss,
       }),
     );
-    pane.scrollIntoView?.({ behavior: "smooth", block: "start" });
   }
 
   if (!empty) {
     const list = el("div", { className: "grid", style: "margin-bottom:18px" });
     for (const s of S.data.staff) list.append(card(s));
-    m.append(list);
-    const hire = el("button", { className: "ghbtn primary", textContent: "Hire someone" });
+    // In the grid, where the next person would go, rather than a button under it.
+    const hire = el("button", { className: "hirecard", textContent: "Hire someone" });
     hire.onclick = pick;
-    m.append(el("div", { className: "row", style: "margin-bottom:14px" }, [hire]));
+    list.append(hire);
+    m.append(list);
   }
   m.append(pane);
 
   const opened = o.open && S.data.staff.find((s) => s.handle === o.open);
   const kept = !opened && S.staffOpen;
   const keptStaff = kept && S.data.staff.find((s) => s.handle === kept.handle);
+  if (empty) pick();
   if (opened) open(roleOf(opened), o.result);
-  else if (kept) open(keptStaff ? roleOf(keptStaff) : kept);
-  else if (empty) pick();
+  // An open dialog is still open; only the inline fallback has to be drawn again.
+  else if (kept && !current?.isOpen()) open(keptStaff ? roleOf(keptStaff) : kept);
 
   /* --------------------------- one staff member --------------------------- */
 
@@ -93,73 +119,30 @@ export function viewStaff(m, o = {}) {
 
     const status = el("span", { className: "meta" });
     const go = el("button", { className: "ghbtn", textContent: "Retire" });
-    go.onclick = () => retireForm(pane, s, status);
-
-    /* The charter is the one file `hire` deliberately does not write, and until now the only
-       route to it was a CLI command printing a brief. This is the same brief, with every file
-       it refers to already inside it and somewhere to put the answer. */
-    const write = el("button", { className: "ghbtn", textContent: "Write the charter" });
-    write.onclick = () => {
-      pane.replaceChildren(
-        el("div", { className: "card" }, [
-          paste({
-            kind: "charter",
-            staff: s.handle,
-            title: "Write " + s.name + "'s charter with your own AI",
-            onSaved: () => refreshAll(false),
-          }),
-        ]),
-      );
-      pane.scrollIntoView?.({ behavior: "smooth", block: "start" });
-    };
-
-    /* The step `hire` has always had to hand back: there is no API that creates a GitHub App,
-       so it is a browser hand-off either way. It may as well be this browser. */
-    const app = el("button", { className: "ghbtn", textContent: "GitHub App" });
-    app.onclick = () => {
-      pane.replaceChildren(
-        el("div", { className: "card" }, [
-          el("h3", { textContent: s.name + "'s identity" }),
-          appPanel({ staff: s.handle, name: s.name, scope: "private" }),
-          appPanel({ staff: s.handle, name: s.name, scope: "public" }),
-        ]),
-      );
-      pane.scrollIntoView?.({ behavior: "smooth", block: "start" });
-    };
-
-    /* The credential is once for the org, but the moment somebody looks for it is while setting
-       up one staff member, so it is reachable from each card. */
-    const cred = el("button", { className: "ghbtn", textContent: "Agent credential" });
-    cred.onclick = () => {
-      pane.replaceChildren(el("div", { className: "card" }, [credentialPanel()]));
-      pane.scrollIntoView?.({ behavior: "smooth", block: "start" });
-    };
-
-    const run = el("button", { className: "ghbtn", textContent: "Run once now" });
-    run.onclick = () => {
-      pane.replaceChildren(
-        el("div", { className: "card" }, [
-          runOnce({ staff: s.handle, name: s.name, onDone: (ok) => ok && refreshAll(true) }),
-        ]),
-      );
-      pane.scrollIntoView?.({ behavior: "smooth", block: "start" });
+    go.onclick = () => {
+      const host = el("div");
+      present(host);
+      retireForm(host, s, status);
     };
 
-    /* Whether setup is finished, as far as can be told cheaply: the charter from disk at once,
-       and the App's secrets and a first run from GitHub when it answers. */
-    const finish = el("button", { className: "ghbtn primary", textContent: "Finish setting up", hidden: true });
+    /* Every setup step (the App, the charter, the credential, a run) is in the one list, so the
+       card has one way in. It says Finish setting up until setup looks finished: the charter
+       from disk at once, and the App's secrets and a first run from GitHub when it answers. */
+    const finish = el("button", { className: "ghbtn", textContent: "Set up" });
     finish.onclick = () => open(roleOf(s));
-    if (s.rig?.charterStub) finish.hidden = false;
-    else {
-      getStaffProgress(s.handle)
-        .then((p) => {
-          if (p.app === false || p.ran === false) finish.hidden = false;
-        })
-        .catch(() => {});
-    }
+    const warn = el("p", { className: "warnline", hidden: true });
+    whatsLeft(s).then((left) => {
+      if (!left.length) return;
+      finish.textContent = "Finish setting up";
+      finish.className = "ghbtn primary";
+      d.classList.add("notready");
+      warn.hidden = false;
+      warn.textContent = "Not ready to run. Still to do: " + sentence(left) + ".";
+    });
+    d.append(warn);
 
     d.append(
-      el("div", { className: "row", style: "margin-top:10px" }, [finish, write, app, cred, run, go, status]),
+      el("div", { className: "row", style: "margin-top:10px" }, [finish, go, status]),
     );
     return d;
   }
@@ -206,7 +189,7 @@ export function viewStaff(m, o = {}) {
     const status = el("span", { className: "meta" });
     const go = el("button", { className: "ghbtn", textContent: "Retire " + plan.handle });
     const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
-    cancel.onclick = () => host.replaceChildren();
+    cancel.onclick = dismiss;
     go.onclick = () =>
       apply(
         { action: "retire", handle: plan.handle },