@nanocollective/roster 0.1.0-alpha.6 → 0.1.0-alpha.8

package/templates/portal/js/views/runonce.js

@@ -0,0 +1,94 @@
+/* One daily run, now, followed to the end.
+ *
+ * The last step of setting anybody up. Doctor calls a workflow that has never run unproven,
+ * because nothing short of a finished run shows the App, its grant, the secrets and the
+ * callers all work together. This starts one, and says how it ended. */
+
+import { runStatus, startRun } from "../api.js";
+import { askYes } from "../dialog.js";
+import { el } from "../dom.js";
+
+/**
+ * @param {{staff: string, name: string, onDone?: (ok: boolean) => void}} opts
+ */
+export function runOnce(opts) {
+  const box = el("div", { className: "manual" });
+  box.append(
+    el("b", { textContent: "Run " + opts.name + " once, now" }),
+    el("p", {
+      className: "sub",
+      textContent:
+        "A real daily run: it does a day's work and spends what a scheduled one would. " +
+        "When it finishes you get the outcome and the log.",
+    }),
+  );
+  const go = el("button", { className: "btn primary", textContent: "Run once now" });
+  const out = el("div", { style: "margin-top:9px" });
+  box.append(el("div", { className: "row" }, [go]), out);
+
+  go.onclick = async () => {
+    const yes = await askYes({
+      title: "Start a daily run for " + opts.name + " now?",
+      hint: "It is a real run, and it costs what one does.",
+      confirm: "Start the run",
+    });
+    if (!yes) return;
+    go.disabled = true;
+    const say = (text, cls) => out.replaceChildren(el("p", { className: cls ?? "sub", textContent: text }));
+    say("Starting…");
+    let run;
+    try {
+      run = await startRun(opts.staff);
+    } catch (err) {
+      say(String(err.message || err), "err");
+      go.disabled = false;
+      return;
+    }
+    const link = el("a", { href: run.url, target: "_blank", rel: "noopener", textContent: "the log" });
+    if (!run.id) {
+      out.replaceChildren(el("p", { className: "sub" }, ["Started. It has not shown up yet; follow it at ", link, "."]));
+      go.disabled = false;
+      return;
+    }
+
+    /* Polled rather than streamed: a run takes minutes, the status changes a handful of times,
+       and a clock beside it is what shows the page has not hung. */
+    const began = Date.now();
+    const tick = async () => {
+      let now;
+      try {
+        now = await runStatus(opts.staff, run.id);
+        if (now.error) throw new Error(now.error);
+      } catch (err) {
+        say(String(err.message || err), "err");
+        go.disabled = false;
+        return;
+      }
+      const mins = Math.floor((Date.now() - began) / 60000);
+      if (now.status !== "completed") {
+        out.replaceChildren(
+          el("p", { className: "sub" }, [now.status.replace("_", " ") + ", " + mins + " min so far. ", link]),
+        );
+        setTimeout(tick, 15000);
+        return;
+      }
+      go.disabled = false;
+      const ok = now.conclusion === "success";
+      const done = el("div");
+      done.append(
+        el("p", { className: ok ? "" : "err" }, [
+          ok
+            ? "It worked. The App, its grant, the secrets and the callers are proven, and Health now says so. "
+            : "It ended " + (now.conclusion || "without a conclusion") + ". ",
+          el("a", { href: now.url, target: "_blank", rel: "noopener", textContent: "The log" }),
+        ]),
+      );
+      for (const f of now.failedAt ?? []) done.append(el("p", { className: "sub", textContent: "Failed at " + f }));
+      if (!ok) done.append(el("p", { className: "sub", textContent: "Troubleshooting, in the docs, has what each failure usually means." }));
+      out.replaceChildren(done);
+      opts.onDone?.(ok);
+    };
+    tick();
+  };
+  return box;
+}

package/templates/portal/js/views/runs.js

@@ -0,0 +1,165 @@
+/* Every staff member's recent runs, and what the last 30 days cost.
+ *
+ * The one screen that is only ever on GitHub: runs are not in any repo, so offline it says so
+ * rather than drawing an empty table that reads as "nothing ran". */
+
+import { getRuns } from "../api.js";
+import { ago, el, esc, skeleton } from "../dom.js";
+import { render } from "../router.js";
+import { S } from "../state.js";
+
+/** How many runs a staff member's table shows. The spend covers all of the last 30 days. */
+const SHOWN = 15;
+
+export function viewRuns(m) {
+  m.append(el("h1", { textContent: "Runs" }));
+  m.append(
+    el("p", {
+      className: "sub",
+      textContent:
+        "What each staff member ran in the last 30 days, how it ended, and what it cost where " +
+        "the agent said. Read from GitHub through your own gh.",
+    }),
+  );
+
+  if (!S.runs) {
+    const wait = el("div", { className: "runs" }, skeleton("row", 4));
+    m.append(wait);
+    load(false);
+    return;
+  }
+  paint(m, S.runs);
+}
+
+let asking = false;
+
+async function load(force) {
+  if (asking) return;
+  asking = true;
+  try {
+    S.runs = await getRuns(force);
+  } catch (e) {
+    S.runs = { online: false, error: e.message, staff: [] };
+  } finally {
+    asking = false;
+  }
+  if (S.view === "runs") render();
+}
+
+function paint(m, data) {
+  const again = el("button", { className: "ghbtn", textContent: "Ask GitHub again" });
+  again.onclick = () => {
+    S.runs = null;
+    load(true);
+    render();
+  };
+
+  if (!data.online) {
+    const box = el("div", { className: "notice" });
+    box.innerHTML =
+      "<b>Runs live on GitHub, and it could not be reached.</b><br>" +
+      esc(data.error ?? "gh is unavailable") +
+      "<br>Everything else in the portal reads from disk and still works.";
+    m.append(box, el("div", { className: "row hacts" }, [again]));
+    return;
+  }
+
+  const g = el("div", { className: "grid runsum" });
+  g.append(tile("Last 30 days", money(data.spend), priced(data.spend), over(data.spend, data.budget)));
+  if (data.budget) {
+    g.append(tile("Budget", "$" + data.budget, "org.yaml · 30 days, all staff", over(data.spend, data.budget)));
+  }
+  g.append(tile("Runs", String(data.spend?.runs ?? 0), "skipped mentions are not counted"));
+  m.append(g);
+
+  for (const s of data.staff ?? []) m.append(...staffSection(s));
+
+  m.append(
+    el("div", { className: "row hacts" }, [
+      again,
+      el("span", { className: "meta", textContent: data.fetchedAt ? "read " + ago(data.fetchedAt) : "" }),
+    ]),
+  );
+}
+
+function staffSection(s) {
+  const head = el("div", { className: "hsect" });
+  head.append(el("span", { textContent: s.name }));
+  const total = el("i", {
+    textContent: money(s.spend) + (s.budget ? " of $" + s.budget : "") + " · 30 days",
+  });
+  if (over(s.spend, s.budget)) total.className = "warn";
+  head.append(total);
+
+  const body = el("div", { className: "hbody runs" });
+  for (const e of s.errors ?? []) body.append(el("p", { className: "hnote err", textContent: e }));
+  if (!(s.runs ?? []).length) {
+    body.append(el("p", { className: "hnote", textContent: "No runs in the last 30 days." }));
+    return [head, body];
+  }
+
+  const table = el("table", { className: "runtable" });
+  table.innerHTML =
+    "<thead><tr><th>When</th><th>Kind</th><th>Outcome</th><th>Took</th><th>Turns</th>" +
+    "<th>Cost</th><th></th></tr></thead>";
+  const rows = el("tbody");
+  for (const r of s.runs.slice(0, SHOWN)) rows.append(row(r));
+  table.append(rows);
+  body.append(table);
+  if (s.runs.length > SHOWN) {
+    body.append(
+      el("p", {
+        className: "hnote",
+        textContent: s.runs.length - SHOWN + " older runs count towards the total and are not listed.",
+      }),
+    );
+  }
+  return [head, body];
+}
+
+function row(r) {
+  const tr = el("tr");
+  const out = outcome(r);
+  const rec = r.record ?? {};
+  const mins = rec.duration_s != null ? rec.duration_s / 60 : r.minutes;
+  tr.innerHTML =
+    '<td title="' + esc(r.createdAt) + '">' + esc(ago(r.createdAt)) + "</td>" +
+    "<td>" + esc(r.kind) + "</td>" +
+    '<td><span class="chip ' + out.tone + '">' + esc(out.word) + "</span></td>" +
+    "<td>" + (mins != null ? Math.round(mins) + "m" : "–") + "</td>" +
+    "<td>" + (rec.turns ?? "–") + "</td>" +
+    "<td>" + (typeof rec.cost_usd === "number" ? "$" + rec.cost_usd.toFixed(2) : "–") + "</td>" +
+    '<td><a class="ref" href="' + esc(r.url) + '" target="_blank" rel="noopener">log</a></td>';
+  return tr;
+}
+
+/** The record's word when there is one, which knows a setup failure from an agent failure. */
+function outcome(r) {
+  if (r.status !== "completed") return { word: r.status.replace("_", " "), tone: "" };
+  const word = r.record?.outcome ?? r.conclusion ?? "unknown";
+  const tone = word === "success" ? "ok" : word === "cancelled" ? "warm" : "hot";
+  return { word, tone };
+}
+
+function money(spend) {
+  return "$" + (spend?.usd ?? 0).toFixed(2);
+}
+
+/** A total is only as good as the runs it could price, so it says how many that was. */
+function priced(spend) {
+  if (!spend?.runs) return "no runs";
+  if (spend.known === spend.runs) return "every run priced";
+  return "cost known for " + spend.known + " of " + spend.runs + " runs";
+}
+
+function over(spend, budget) {
+  return !!budget && (spend?.usd ?? 0) > budget;
+}
+
+function tile(k, v, sub, bad) {
+  const d = el("div", { className: "kv" + (bad ? " bad" : "") });
+  d.innerHTML =
+    '<div class="k">' + esc(k) + '</div><div class="v">' + esc(v) +
+    (sub ? "<small>" + esc(sub) + "</small>" : "") + "</div>";
+  return d;
+}

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

@@ -5,19 +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 { $, el, esc, toClipboard } from "../dom.js";
+import {
+  checkOrg,
+  createTenant,
+  fileUrl,
+  getAccess,
+  getOrg,
+  getSetup,
+  joinOrg,
+  planTenant,
+  saveFile,
+  setAccess,
+} from "../api.js";
+import { $, el, esc, grow, toClipboard } from "../dom.js";
+import { go } from "../router.js";
+import { S as App } from "../state.js";
 import { checklist } from "./checklist.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;
+
+/* 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 =
+    "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 somebody is hired. Hiring creates their repo, their workflows and " +
+          "their pinned issue; the GitHub App and the charter follow on their card.",
+      }),
+      el("div", { className: "row" }, [hire]),
+    );
+    main.append(next);
+  }
+
+  main.append(afterCreate(App.data?.staff?.length ? 1 : 2));
+
+  const health = step(App.data?.staff?.length ? 2 : 3, "What doctor still says", false);
+  healthHost = el("div", { style: "margin-top:12px" });
+  health.append(healthHost);
+  main.append(health);
+  checklist(healthHost, {});
+}
+
+/** 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, {});
+  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 +120,9 @@ 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.",
+        "Sign in with gh, choose the organisation and the agent, then what is left: a setting " +
+        "roster tries for you, the agent's credential, the repos your staff work in, and the two " +
+        "files only you can write. Nothing is created until you have read the plan.",
     }),
   );
 
@@ -41,7 +132,7 @@ 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) main.append(afterCreate(3));
 }
 
 /* ---------------------------------- 1 · gh ---------------------------------- */
@@ -78,12 +169,14 @@ function stepOrg(main) {
       }),
       el("p", {
         className: "sub",
-        textContent: "Reload the page to leave setup and use the portal.",
+        textContent:
+          "Reload the page to open the portal. Anything below that is still undone stays under " +
+          "Getting started in the sidebar until it is.",
       }),
     );
-    const rows = el("div", { style: "margin-top:12px" });
-    card.append(rows);
-    checklist(rows, {});
+    healthHost = el("div", { style: "margin-top:12px" });
+    card.append(healthHost);
+    checklist(healthHost, {});
     return card;
   }
 
@@ -259,7 +352,10 @@ function stepOrg(main) {
       out.replaceChildren();
       out.append(
         el("p", {
-          textContent: `${result.files.length} files in ${result.dir}, and one private repo, ${p.org}/roster-ops.`,
+          textContent:
+            `${result.files.length} files in ${result.dir}, and one private repo, ${p.org}/roster-ops, ` +
+            "with its Actions access set so every repo in the org can call its workflow. If GitHub " +
+            "refuses that, you get the reason and the page to click.",
         }),
       );
       const list = el("div", { className: "filelist" });
@@ -302,56 +398,182 @@ function stepOrg(main) {
 
 /* ------------------------- 5 · the two GitHub insists on ------------------------- */
 
-function afterCreate() {
-  const card = step(3, "What is left", false);
+function afterCreate(n) {
+  fileSteps.clear();
+  const card = step(n, "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.",
+        "The first is a setting roster tries for you. The last two are the files that decide " +
+        "whether any of this is worth running, and only you can write them.",
     }),
   );
-  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);
+  card.append(accessStep());
+  card.append(credentialPanel());
 
   if (S.tenant.org) {
     card.append(repoPicker({ org: S.tenant.org, known: S.tenant.repos ?? [] }));
   }
 
-  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 = fileStep(
+    "business",
+    "Answer org/business.md",
+    "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.",
   );
-  card.append(two);
-
   // 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" }));
+  business.append(paste({ kind: "discover", title: "Write it with your own AI", onSaved: recheck }));
+  card.append(business);
+
+  const priorities = fileStep(
+    "priorities",
+    "Rank org/priorities.md",
+    "What matters this month, at most three things in order, and what is out of scope. Every " +
+      "daily run reads it; without it each staff member picks its own direction from its charter.",
+  );
+  priorities.append(prioritiesEditor());
+  card.append(priorities);
   return card;
 }
 
+/**
+ * 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.
+ */
+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.
+ *
+ * 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.
+ */
+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 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));
+
+  save.onclick = async () => {
+    if (ta.value.trim() === before.trim()) {
+      out.replaceChildren(el("p", { className: "sub", textContent: "Nothing changed yet." }));
+      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
+            ? "Committed and pushed. Every daily run reads it from the next one."
+            : "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";
+    }
+  };
+  return box;
+}
+
+/** 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() {
+  const box = el("div", { className: "manual" });
+  box.append(el("b", { textContent: "Let every repo in the org call the ops repo's workflow" }));
+  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 + " " : "") +
+          "Settings → Actions → General → Access on roster-ops. Skip it and every workflow fails " +
+          "with “workflow not found”.",
+      ),
+      el("div", { className: "row" }, [go]),
+    );
+    go.onclick = async () => {
+      go.disabled = true;
+      try {
+        const r = await setAccess();
+        if (r.ok) {
+          out.replaceChildren(say("Set. Every repo in the org can call roster-ops."));
+          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) => {
+      if (r.ok) out.replaceChildren(say("Done. Every repo in the org can call roster-ops."));
+      else offer(r.level ? "It is set to “" + r.level + "”." : "");
+    })
+    .catch(() => offer(""));
+  return box;
+}
+
 /* ---------------------------------- furniture ---------------------------------- */
 
 function step(n, title, done) {