@nanocollective/roster 0.1.0-alpha.5 → 0.1.0-alpha.50

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

@@ -1,47 +1,155 @@
-/* Hiring and retiring, from the portal.
+/* The Staff screen: a card per staff member, retiring, and the way in to hiring.
  *
- * Both run the CLI's own `buildPlan` and `applyPlan` on the server rather than describing
- * either again here. Two descriptions of how to create a repo is one too many, and the one in
- * the browser would be the one nobody updated.
- *
- * Plan then apply, the same as every roster command that changes something: you see every
- * file, every label and every existing staff member it would edit, and nothing happens until
- * you say so.
+ * Hiring itself is in hire.js. Retiring runs the CLI's own `buildRetirePlan` and
+ * `applyRetirePlan` on the server, plan then apply: you see what it stops and what it keeps,
+ * and nothing happens until you say so.
  */
 
 import { post } from "../api.js";
+import { askYes, sheet } from "../dialog.js";
+import { pending } from "../inflight.js";
 import { ago, el, esc } from "../dom.js";
-import { icon } from "../icons.js";
+import { sentence, staffProgress, whatsLeft } from "../readiness.js";
 import { refreshAll } from "../refresh.js";
 import { S } from "../state.js";
-import { appPanel } from "./app.js";
-import { cronText } from "./health.js";
-import { paste } from "./paste.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);
+  });
+}
 
-export function viewStaff(m) {
+/* 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
+ *   screen across a repaint, which is how a finished hire lands on step 2.
+ */
+export function viewStaff(m, o = {}) {
   m.append(el("h1", { textContent: "Staff" }));
-  m.append(
-    el("p", {
-      className: "sub",
-      textContent:
-        S.data.staff.length +
-        " on the roster. Hiring creates a repo, its workflows, its labels and its pinned issue, " +
-        "and wires it to everyone already here.",
-    }),
-  );
+  const empty = !S.data.staff.length;
+  if (empty) m.append(el("p", { className: "sub", textContent: "No staff yet. Pick a role to hire your first." }));
+
+  const pane = el("div", { className: "hirepane" });
+
+  /* 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) {
+    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;
+      }
+    }
+    /* 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);
+    });
+  }
+  function dismiss() {
+    if (current) current.close();
+    else pane.replaceChildren();
+    S.staffOpen = null;
+    if (empty) pick();
+  }
 
-  const list = el("div", { className: "grid", style: "margin-bottom:18px" });
-  for (const s of S.data.staff) list.append(card(s));
-  m.append(list);
+  // 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]),
+      ]),
+    );
+  }
 
-  const hire = el("button", { className: "ghbtn primary", textContent: "Hire someone" });
-  const pane = el("div");
-  hire.onclick = () => hireForm(pane);
-  m.append(el("div", { className: "row", style: "margin-bottom:14px" }, [hire]));
+  /* 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;
+    present(
+      hireFlow({
+        role,
+        result,
+        onHired: (handle, r) => {
+          m.replaceChildren();
+          viewStaff(m, { open: handle, result: r });
+        },
+        onClose: dismiss,
+      }),
+    );
+  }
+
+  if (!empty) {
+    const list = el("div", { className: "grid", style: "margin-bottom:18px" });
+    for (const s of S.data.staff) list.append(card(s));
+    // 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;
+    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);
+  // 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 --------------------------- */
 
+  /** " · works with Chief Marketing Officer". The labels and wiring behind it are roster's. */
+  function worksWith(s) {
+    const names = (s.peers ?? [])
+      .map((p) => S.data.staff.find((x) => x.handle === p.handle)?.name ?? p.handle)
+      .filter(Boolean);
+    return names.length ? " · works with " + esc(names.join(", ")) : "";
+  }
+
   function card(s) {
     const d = el("div", { className: "kv staffcard" });
     const rig = s.rig ?? {};
@@ -50,148 +158,40 @@ export function viewStaff(m) {
       '<div class="v">' + esc(s.name) +
         "<small>" + esc(s.brain ?? s.dir) + " · " + s.facts.length + " facts · " +
         (rig.lastCommit ? "last commit " + esc(ago(rig.lastCommit.date)) : "no commits") +
+        worksWith(s) +
         "</small></div>";
 
     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" });
-    };
-
-    d.append(el("div", { className: "row", style: "margin-top:10px" }, [write, app, go, status]));
-    return d;
-  }
-
-  /* ------------------------------- hiring -------------------------------- */
-
-  function hireForm(host) {
-    const box = el("div", { className: "card" });
-    box.append(
-      el("h3", { textContent: "Hire someone" }),
-      el("p", {
-        className: "sub",
-        style: "margin-bottom:14px",
-        textContent:
-          "Only the handle is required. Everything else is copied from whoever is already " +
-          "here, because app slugs carry a house naming scheme and the public identity is " +
-          "genuinely shared.",
-      }),
-    );
-
-    const handle = field("handle", "cfo", "lowercase, digits and dashes");
-    const name = field("name", "Chief Financial Officer", "defaults to the handle, uppercased");
-    const dir = field("dir", "finance", "directory and repo name; defaults to the handle");
-    const schedule = scheduleField();
-    for (const f of [handle, name, dir, schedule]) box.append(f.row);
-
-    const status = el("span", { className: "meta" });
-    const plan = el("button", { className: "ghbtn primary", textContent: "Show the plan" });
-    const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
-    cancel.onclick = () => host.replaceChildren();
-    box.append(el("div", { className: "row", style: "margin-top:12px" }, [plan, cancel, status]));
-
-    const out = el("div");
-    box.append(out);
-    host.replaceChildren(box);
-    handle.input.focus();
-
-    plan.onclick = async () => {
-      if (!handle.input.value.trim()) {
-        handle.input.focus();
-        return;
-      }
-      status.textContent = "planning…";
-      status.className = "meta";
-      out.replaceChildren();
-      const params = new URLSearchParams({ handle: handle.input.value.trim() });
-      for (const [key, f] of [["name", name], ["dir", dir], ["schedule", schedule]]) {
-        const value = (f.value ? f.value() : f.input.value).trim();
-        if (value) params.set(key, value);
-      }
-      try {
-        const data = await (await fetch("/api/staff/plan?" + params, { cache: "no-store" })).json();
-        if (data.error) throw new Error(data.error);
-        status.textContent = "";
-        out.replaceChildren(hirePlan(data.plan, params));
-      } catch (e) {
-        status.textContent = e.message;
-        status.className = "meta err";
-      }
+    go.onclick = () => {
+      const host = el("div");
+      present(host);
+      retireForm(host, s, status);
     };
-  }
 
-  function hirePlan(plan, params) {
-    const box = el("div", { className: "plan" });
-    box.append(el("div", { className: "planhead", textContent: "This would create" }));
-
-    const s = plan.staff;
-    box.append(
-      line("ok", s.brain + ", private"),
-      line("ok", plan.files.length + " files, including three caller workflows"),
-      line("ok", plan.labels.length + " labels: " + plan.labels.join(", ")),
-      line("ok", "a pinned status issue"),
-      line("ok", "runs at " + s.schedule + ", on " + s.model),
+    /* 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));
+    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;
+      const p = staffProgress(s.handle);
+      warn.textContent =
+        "Not ready to run. " + (p ? `${p.done} of ${p.total} done. ` : "") +
+        "Still to do: " + sentence(left) + ".";
+    });
+    d.append(warn);
+
+    d.append(
+      el("div", { className: "row", style: "margin-top:10px" }, [finish, go, status]),
     );
-    for (const p of plan.peers) {
-      box.append(line("ok", p.dir + "/staff.yaml gains a peer entry and a " + p.label + " label"));
-    }
-    box.append(line("ok", "org.yaml gains a staff entry and a repo entry"));
-
-    if (plan.secrets?.length) {
-      box.append(el("div", { className: "planhead", textContent: "You will still have to" }));
-      box.append(
-        line("todo", "create the GitHub App: roster app " + s.handle),
-        line("todo", "put " + plan.secrets.join(", ") + " on the new repo"),
-      );
-    }
-    for (const w of plan.warnings ?? []) box.append(line("warn", w));
-
-    const status = el("span", { className: "meta" });
-    const go = el("button", { className: "ghbtn primary", textContent: "Hire " + s.handle });
-    go.onclick = () =>
-      apply(
-        {
-          action: "hire",
-          handle: s.handle,
-          flags: Object.fromEntries(params),
-        },
-        "Create " + s.brain + " and wire it up?\n\nThis creates a repository on GitHub.",
-        go,
-        status,
-        box,
-      );
-    box.append(el("div", { className: "row", style: "margin-top:14px" }, [go, status]));
-    return box;
+    return d;
   }
 
   /* ------------------------------- retiring ------------------------------- */
@@ -236,11 +236,11 @@ export function viewStaff(m) {
     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 },
-        "Retire " + plan.name + "?\n\n" + (plan.brain ?? plan.dir) + " is not touched.",
+        { title: "Retire " + plan.name + "?", hint: (plan.brain ?? plan.dir) + " is not touched.", confirm: "Retire " + plan.handle },
         go,
         status,
         box,
@@ -252,7 +252,7 @@ export function viewStaff(m) {
   /* -------------------------------- apply -------------------------------- */
 
   async function apply(payload, ask, btn, status, box) {
-    if (!confirm(ask)) return;
+    if (!(await askYes(ask))) return;
     btn.disabled = true;
     status.textContent = "working…";
     status.className = "meta";
@@ -271,80 +271,7 @@ export function viewStaff(m) {
   }
 }
 
-function field(label, placeholder, hint) {
-  const input = el("input", { type: "search", placeholder, value: "", style: "width:100%" });
-  input.dataset.field = label;
-  const row = el("div", { className: "ffield" });
-  row.append(
-    el("label", { textContent: label }),
-    input,
-    el("small", { textContent: hint }),
-  );
-  return { row, input };
-}
-
-/**
- * When the daily run happens, as a time and a set of days rather than as cron.
- *
- * The value on the wire is still a cron expression, because that is what goes in the workflow
- * and what `roster hire` takes. But nobody hiring their first staff member knows that
- * `0 9 * * 1-5` is nine in the morning on weekdays, and a field that demands it is a field
- * that gets a wrong answer or an empty one.
- *
- * UTC, said out loud, with the local equivalent beside it: GitHub schedules in UTC, and an
- * agent that starts an hour off twice a year is worse than one you had to think about once.
- */
-function scheduleField() {
-  const time = el("input", { type: "time", value: "", step: "60", style: "width:130px" });
-  const days = el("select");
-  days.append(
-    el("option", { value: "1-5", textContent: "Weekdays" }),
-    el("option", { value: "*", textContent: "Every day" }),
-    el("option", { value: "1", textContent: "Mondays" }),
-    el("option", { value: "1,3,5", textContent: "Mon, Wed, Fri" }),
-  );
-  // Said rather than relying on "the first option is selected", which is true of a rendered
-  // <select> and not of one that has only been built.
-  days.value = "1-5";
-
-  const said = el("small");
-  const value = () => {
-    if (!time.value) return "";
-    const [h, m] = time.value.split(":");
-    return `${Number(m)} ${Number(h)} * * ${days.value}`;
-  };
-  const say = () => {
-    const cron = value();
-    said.textContent = cron
-      ? cronText(cron) + local(time.value)
-      : "Leave it empty for a slot clear of everyone else.";
-  };
-  time.oninput = say;
-  days.onchange = say;
-  say();
-
-  const row = el("div", { className: "ffield" });
-  row.append(
-    el("label", { textContent: "schedule" }),
-    el("div", { className: "row" }, [time, days, el("span", { className: "meta", textContent: "UTC" })]),
-    said,
-  );
-  return { row, input: time, value };
-}
-
-/** What that UTC time is where the person reading it is, when the two differ. */
-function local(hhmm) {
-  if (!hhmm) return "";
-  const [h, m] = hhmm.split(":").map(Number);
-  const at = new Date(Date.UTC(2026, 0, 5, h, m));
-  const here = at.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
-  return here === hhmm ? "" : " · " + here + " where you are";
-}
-
-const MARK = { ok: "check", stop: "closed", keep: "issue-open", todo: "dash", warn: "label" };
-
-function line(kind, text) {
-  const d = el("div", { className: "planline " + kind });
-  d.append(icon(MARK[kind] ?? "dot", "ic"), el("span", { textContent: text }));
-  return d;
+/** The flow's view of somebody already hired. */
+function roleOf(s) {
+  return { handle: s.handle, name: s.name, dir: s.dir };
 }

package/templates/portal/js/views/todo.js

@@ -0,0 +1,62 @@
+/* The numbered step card shared by Getting started and the hiring flow on the Staff screen. */
+
+import { el } from "../dom.js";
+
+/**
+ * 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.
+ *
+ * `setLocked(reason)` greys a step that cannot start yet and says why in the pill; `null`
+ * unlocks it. A locked step shows no body, because a form you cannot use yet is a trap.
+ */
+export 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;
+  let locked = null;
+  let isDone = done;
+  const paint = () => {
+    card.classList.toggle("done", isDone && !locked);
+    card.classList.toggle("locked", Boolean(locked));
+    num.textContent = isDone && !locked ? "✓" : String(n);
+    pill.textContent = locked ?? (isDone ? "Done" : "To do");
+    change.hidden = !isDone || Boolean(locked);
+    const shown = !locked && (!isDone || open);
+    body.hidden = !shown;
+    hintEl.hidden = !shown || !hintEl.textContent;
+  };
+  const setDone = (d) => {
+    isDone = Boolean(d);
+    paint();
+  };
+  change.onclick = () => {
+    open = !open;
+    change.textContent = open ? "Close" : "Change";
+    paint();
+  };
+  paint();
+  return {
+    card,
+    body,
+    setDone,
+    isDone: () => isDone,
+    setLocked: (reason) => {
+      locked = reason || null;
+      paint();
+    },
+    renumber: (m) => {
+      n = m;
+      paint();
+    },
+    hint: (text) => {
+      hintEl.textContent = text;
+      paint();
+    },
+  };
+}