@nanocollective/roster 0.1.0-alpha.4 → 0.1.0-alpha.41

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

@@ -5,19 +5,114 @@
  * 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 { checkAll, notReady, sentence } from "../readiness.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";
+import { todo } from "./todo.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;
+  await checkAll();
+  if (App.view !== "setup") return;
+  sub.textContent = "Work through these in order.";
+  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" });
+  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 && !notReady().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. */
@@ -30,8 +125,7 @@ function render(main) {
     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.",
     }),
   );
 
@@ -41,7 +135,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 ---------------------------------- */
@@ -57,8 +155,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" }),
   );
@@ -78,12 +175,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;
   }
 
@@ -113,8 +208,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);
@@ -157,8 +251,8 @@ 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" });
@@ -171,7 +265,7 @@ function stepOrg(main) {
     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);
   });
@@ -179,8 +273,7 @@ function stepOrg(main) {
   const agentNote = 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.",
+      "Using a different agent? Pick any of these, then set it in org.yaml afterwards.",
   });
   card.append(agentNote);
 
@@ -256,23 +349,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) }));
@@ -303,53 +393,145 @@ function stepOrg(main) {
 /* ------------------------- 5 · the two GitHub insists on ------------------------- */
 
 function afterCreate() {
-  const card = step(3, "What is left", false);
-  card.append(
-    el("p", {
-      textContent:
-        "None of these can be done for you, and the first 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("Pick a role. The Staff screen then lists each step to set them up.");
+  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 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 ---------------------------------- */