@nanocollective/roster 0.1.0-alpha.2 → 0.1.0-alpha.20

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

@@ -5,28 +5,109 @@
  * is rather than as it was left. Setup cannot be finished in one sitting, so it must survive
  * being abandoned halfway. */
 
-import { checkOrg, createTenant, getSetup, joinOrg, planTenant } from "../api.js";
+import {
+  checkOrg,
+  createTenant,
+  getAccess,
+  getOrg,
+  getSetup,
+  joinOrg,
+  planTenant,
+  setAccess,
+} from "../api.js";
 import { $, el, esc, toClipboard } from "../dom.js";
+import { go } from "../router.js";
+import { S as App } from "../state.js";
 import { checklist } from "./checklist.js";
+import { businessForm, prioritiesForm } from "./orgedit.js";
+import { credentialPanel } from "./credential.js";
 import { repoPicker } from "./repos.js";
-import { paste } from "./paste.js";
 
 let S = null; // /api/setup/status, refreshed after anything that changes the world
 
+/* 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. */
+const fileSteps = new Map();
+
 export async function viewSetup(main) {
   S = await getSetup();
   render(main);
 }
 
+/**
+ * The same steps once a tenant exists, as their own screen in the portal.
+ *
+ * Setup used to be reachable only before there was a tenant, so the reload that followed
+ * creating one landed on an empty Inbox with the repo picker, the credential and both files
+ * gone. The sidebar offers this while anything is unfinished, and an org nobody has been hired
+ * into opens on it.
+ */
+export async function viewGettingStarted(main) {
+  main.append(el("h1", { textContent: "Getting started" }));
+  const sub = el("p", { className: "sub", textContent: "Reading what is left…" });
+  main.append(sub);
+  S = await getSetup();
+  // Somebody may have clicked elsewhere while GitHub was answering.
+  if (App.view !== "setup") return;
+  sub.textContent = "Work through these in order.";
+  main.append(afterCreate());
+
+  const health = step("!", "Other problems", false);
+  healthHost = el("div", { style: "margin-top:12px" });
+  health.append(healthHost);
+  main.append(health);
+  healthStep = health;
+  checklist(healthHost, { ...HEALTH, onEmpty: () => health.remove() });
+}
+
+/** Whether the sidebar offers Getting started: while anything is left, or while it is open. */
+export function paintSetupNav() {
+  const nav = $("#setupnav");
+  if (!nav) return;
+  nav.hidden = !App.data?.unfinished?.length && App.view !== "setup";
+}
+
+/* After a save: the checklist and the step list are both derived from disk, so both are asked
+   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, { ...HEALTH, onEmpty: () => healthStep?.remove() });
+  try {
+    S = await getSetup();
+    for (const [id, mark] of fileSteps) mark(!(S.tenant.left ?? []).includes(id));
+  } catch {
+    // The saved file is saved either way; a stale tick is not worth an error on top of it.
+  }
+  if (App.data) {
+    const fresh = await getOrg().catch(() => null);
+    if (fresh?.unfinished) App.data.unfinished = fresh.unfinished;
+    paintSetupNav();
+  }
+}
+
 function render(main) {
+  /* The sidebar is written by boot() before any of this is known. Once a tenant has been
+     adopted, leaving it on "no org yet" contradicts the card directly below it. */
+  const brand = $("#orgname");
+  if (brand) brand.textContent = S.tenant.found ? (S.tenant.org ?? "set up") : "no org yet";
+
   main.replaceChildren();
   main.append(el("h1", { textContent: "Set up your org" }));
   main.append(
     el("p", {
       className: "sub",
       textContent:
-        "Four things here, then two that GitHub insists a human does. Nothing is created until " +
-        "you have read the plan.",
+        "Choose an organisation and a coding agent. Nothing is created until you press Create it.",
     }),
   );
 
@@ -36,7 +117,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());
+  if (S.tenant.found) {
+    const rest = step(3, "Finish setting up", false);
+    rest.append(afterCreate());
+    main.append(rest);
+  }
 }
 
 /* ---------------------------------- 1 · gh ---------------------------------- */
@@ -52,8 +137,7 @@ function stepGh() {
     el("p", {
       className: "sub",
       textContent:
-        "roster does everything through your own gh, so it holds no token of its own. Run this " +
-        "in a terminal, then reload:",
+        "Run this in a terminal, then reload:",
     }),
     el("pre", { className: "cmd", textContent: "gh auth login" }),
   );
@@ -73,12 +157,10 @@ function stepOrg(main) {
       }),
       el("p", {
         className: "sub",
-        textContent: "Reload the page to leave setup and use the portal.",
+        textContent:
+          "Finish the steps below. They stay under Getting started in the sidebar until they're done.",
       }),
     );
-    const rows = el("div", { style: "margin-top:12px" });
-    card.append(rows);
-    checklist(rows, {});
     return card;
   }
 
@@ -108,8 +190,7 @@ function stepOrg(main) {
   orgWrap.append(
     el("small", {
       textContent:
-        "Repos are created here. GitHub has no API for creating an organisation, so make one on " +
-        "github.com first if you need to.",
+        "Don't have one? Create it on github.com first.",
     }),
   );
   form.append(orgWrap);
@@ -152,32 +233,31 @@ function stepOrg(main) {
   });
   other.input.addEventListener("change", look);
 
-  const name = field("name", "What the business is called", "", "Shown to the agents. Defaults to the org.");
-  const human = field("human", "Your GitHub login", S.gh.login ?? "", "The person the agents answer to.");
+  const name = field("name", "What the business is called", "", "Defaults to the organisation name.");
+  const human = field("human", "Your GitHub login", S.gh.login ?? "", "The person the staff report to.");
 
   card.append(form);
+  const agentHead = el("h3", { textContent: "Which coding agent runs a session" });
 
   /* The agent. Its id decides the secret name later, so setup can name it exactly rather than
      saying "it depends on the runner". */
-  card.append(el("h3", { textContent: "Which coding agent runs a session" }));
+  card.append(agentHead);
   const agents = el("div", { className: "choices" });
   S.agents.forEach((a, i) => {
     const opt = el("label", { className: "choice" });
     const radio = el("input", { name: "agent", value: a.id, checked: i === 0 });
     radio.setAttribute("type", "radio");
-    opt.append(radio, el("b", { textContent: a.label }), el("small", { textContent: a.note }));
+    opt.append(radio, el("b", { textContent: a.label }));
     opt.append(el("code", { textContent: a.tokenEnv }));
     agents.append(opt);
   });
   card.append(agents);
-  card.append(
-    el("p", {
-      className: "sub",
-      textContent:
-        "Anything else works too: a runner is an install command, a run command and the name of " +
-        "the secret holding its credential. Write those three into org.yaml afterwards.",
-    }),
-  );
+  const agentNote = el("p", {
+    className: "sub",
+    textContent:
+      "Using a different agent? Pick any of these, then set it in org.yaml afterwards.",
+  });
+  card.append(agentNote);
 
   const params = () => ({
     org: org.value === "__other" ? other.input.value.trim() : org.value,
@@ -200,11 +280,29 @@ function stepOrg(main) {
     join.hidden = !joining;
     plan.hidden = joining;
     if (joining) go.hidden = true;
+
+    /* An org that already runs roster has answered all of these: its own org.yaml names the
+       business, the human and the agent. Leaving them on screen asks for values that will be
+       thrown away, and implies the checkout is going to use them. */
+    for (const bit of [name.wrap, human.wrap, agentHead, agents, agentNote]) bit.hidden = joining;
   }
 
   join.onclick = async () => {
     join.disabled = true;
-    out.replaceChildren(el("p", { className: "sub", textContent: "Cloning…" }));
+    /* Cloning an ops repo and every brain took 38 seconds against a real org, behind a word
+       that never changed. A static "Cloning…" for that long reads as hung, so this says what
+       it is doing and keeps a clock running to show it is alive. */
+    const clock = el("p", { className: "sub" });
+    out.replaceChildren(clock);
+    const started = Date.now();
+    const tick = () => {
+      const s = Math.round((Date.now() - started) / 1000);
+      clock.textContent =
+        `Cloning ${existing}: the ops repo and one for each staff member. ${s}s. ` +
+        "A first checkout usually takes under a minute.";
+    };
+    tick();
+    const ticking = setInterval(tick, 1000);
     try {
       const result = await joinOrg(existing);
       if (!result.ok) throw new Error(result.error);
@@ -219,6 +317,7 @@ function stepOrg(main) {
     } catch (err) {
       out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
     } finally {
+      clearInterval(ticking);
       join.disabled = false;
     }
   };
@@ -232,23 +331,20 @@ function stepOrg(main) {
     out.replaceChildren(el("p", { className: "sub", textContent: "Working…" }));
     try {
       const result = await planTenant(p);
-      out.replaceChildren();
-      out.append(
-        el("p", {
-          textContent: `${result.files.length} files in ${result.dir}, and one private repo, ${p.org}/roster-ops.`,
-        }),
-      );
-      const list = el("div", { className: "filelist" });
-      for (const f of result.files) list.append(el("code", { textContent: "+ " + f }));
-      out.append(list);
-      out.append(
-        el("p", {
-          className: "sub",
-          textContent:
-            "org/business.md arrives as questions, not prose. Answering it is the next step and " +
-            "it is the one that decides whether any of this is worth running.",
-        }),
-      );
+      const steps = el("ol", { className: "plansteps" }, [
+        el("li", { textContent: `Create a private repo, ${p.org}/roster-ops, to hold the org's shared settings.` }),
+        el("li", { textContent: `Put a copy of it in ${result.dir}.` }),
+        el("li", { textContent: `Let the other repos in ${p.org} run its workflow.` }),
+      ]);
+      const files = el("details", { className: "planfiles" }, [
+        el("summary", { textContent: `The ${result.files.length} files it writes` }),
+        el("div", { className: "filelist" }, result.files.map((f) => el("code", { textContent: f }))),
+      ]);
+      const next = el("p", {
+        className: "sub",
+        textContent: "After that: describe the business, set this month's priorities, and hire your first staff member.",
+      });
+      out.replaceChildren(el("p", { textContent: "Create it will:" }), steps, files, next);
       go.hidden = false;
     } catch (err) {
       out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
@@ -279,53 +375,185 @@ function stepOrg(main) {
 /* ------------------------- 5 · the two GitHub insists on ------------------------- */
 
 function afterCreate() {
-  const card = step(3, "Two things only you can do", false);
-  card.append(
-    el("p", {
-      textContent:
-        "Neither can be automated, and the first one fails in a way that wastes an afternoon if " +
-        "you skip it.",
-    }),
-  );
-
-  const one = el("div", { className: "manual" });
-  one.append(
-    el("b", { textContent: "Let the ops repo's workflow be called" }),
-    el("p", {
-      textContent:
-        "Settings → Actions → General → Access → “Accessible from repositories in the " +
-        "organisation”, on roster-ops.",
-    }),
-    el("small", {
-      textContent:
-        "Skip it and every workflow fails with “workflow not found”, which reads like a typo in " +
-        "a path and is not one. It is an org permission on a repo, so it is yours to click.",
-    }),
-  );
-  if (S.tenant.org) {
-    const url = `https://github.com/${S.tenant.org}/roster-ops/settings/actions`;
-    one.append(el("a", { className: "btn", href: url, target: "_blank", textContent: "Open that page" }));
-  }
-  card.append(one);
+  fileSteps.clear();
+  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 two = el("div", { className: "manual" });
-  two.append(
-    el("b", { textContent: "Answer org/business.md" }),
-    el("p", {
-      textContent:
-        "It ships as questions. It is composed into the top of every prompt, every run, and an " +
-        "agent that cannot answer them writes work that is plausible and generic.",
+  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({
+      path: opsName() + "/org/business.md",
+      name: App.data?.name ?? S.tenant.name ?? S.tenant.org,
+      onSaved: () => (business.setDone(true), recheck()),
     }),
   );
-  card.append(two);
+  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({
+      path: opsName() + "/org/priorities.md",
+      onSaved: () => (priorities.setDone(true), recheck()),
+    }),
+  );
+  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);
 
-  // The copy-a-prompt loop, which is the whole answer to "how do I write this file".
-  card.append(paste({ kind: "discover", title: "Write it with your own AI" }));
-  return 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"));
+    },
+  };
+}
+
+/**
+ * One of the files only a person can write, with whether it is written yet.
+ *
+ * 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.
+ */
+
+/**
+ * org/priorities.md, edited in place.
+ *
+ * There is no brief for it, and it does not want one: business.md needs an interview because
+ * nobody can write it off the top of their head, while a ranked list of three things is
+ * 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.
+ */
+
+
+
+
+
+
+/** 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();
+}
+
+/**
+ * The ops repo's Actions access. Read on arrival, so a page reloaded after it was set says it
+ * is done without anybody pressing anything; the button asks the server to set it, and a
+ * refusal comes back with GitHub's reason and the page to click instead.
+ *
+ * Skipped, every workflow fails with "workflow not found", which reads like a typo in a path.
+ */
+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 });
+
+  const offer = (why) => {
+    const go = el("button", { className: "btn primary", textContent: "Set it for me" });
+    out.replaceChildren(
+      say(
+        (why ? why + " " : "") +
+          "Roster tried to set this when it created the org, and GitHub didn't allow it.",
+      ),
+      el("div", { className: "row" }, [go]),
+    );
+    go.onclick = async () => {
+      go.disabled = true;
+      try {
+        const r = await setAccess();
+        if (r.ok) {
+          out.replaceChildren(say("Done."));
+          opts.onStatus?.(true);
+          return;
+        }
+        out.replaceChildren(
+          say("GitHub refused: " + r.error + ".", "err"),
+          el("a", { className: "btn", href: r.link, target: "_blank", textContent: "Set it by hand" }),
+          say("Access → “Accessible from repositories in the organisation”."),
+        );
+      } catch (err) {
+        out.replaceChildren(say(String(err.message || err), "err"));
+        go.disabled = false;
+      }
+    };
+  };
+
+  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 + "”." : "");
+    })
+    .catch(() => offer(""));
+  return box;
 }
 
 /* ---------------------------------- furniture ---------------------------------- */