@nanocollective/roster 0.1.0-alpha.1

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

@@ -0,0 +1,344 @@
+/* Standing an org up, in the browser, before there is anything on disk to browse.
+ *
+ * The rule this screen follows: never claim a step is done because you clicked it. Everything
+ * here is re-derived from /api/setup/status, so a page reloaded tomorrow shows the world as it
+ * 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 { checklist } from "./checklist.js";
+import { repoPicker } from "./repos.js";
+import { paste } from "./paste.js";
+
+let S = null; // /api/setup/status, refreshed after anything that changes the world
+
+export async function viewSetup(main) {
+  S = await getSetup();
+  render(main);
+}
+
+function render(main) {
+  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.",
+    }),
+  );
+
+  main.append(stepGh());
+  if (!S.gh.ok) return; // everything downstream needs gh, and saying so once is enough
+  main.append(stepOrg(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());
+}
+
+/* ---------------------------------- 1 · gh ---------------------------------- */
+
+function stepGh() {
+  const card = step(1, "GitHub CLI", S.gh.ok);
+  if (S.gh.ok) {
+    card.append(el("p", { className: "sub", textContent: "Signed in as " + S.gh.login + "." }));
+    return card;
+  }
+  card.append(
+    el("p", { textContent: S.gh.error }),
+    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:",
+    }),
+    el("pre", { className: "cmd", textContent: "gh auth login" }),
+  );
+  return card;
+}
+
+/* ------------------------- 2, 3, 4 · org, agent, create ------------------------- */
+
+function stepOrg(main) {
+  const done = S.tenant.found;
+  const card = step(2, "The organisation, and who runs it", done);
+
+  if (done) {
+    card.append(
+      el("p", {
+        textContent: S.tenant.org + " is set up. Its ops repo is at " + S.tenant.opsDir + ".",
+      }),
+      el("p", {
+        className: "sub",
+        textContent: "Reload the page to leave setup and use the portal.",
+      }),
+    );
+    const rows = el("div", { style: "margin-top:12px" });
+    card.append(rows);
+    checklist(rows, {});
+    return card;
+  }
+
+  const form = el("div", { className: "setupform" });
+  const field = (id, label, value, hint) => {
+    const wrap = el("label", { className: "field" });
+    wrap.append(el("span", { textContent: label }));
+    const input = el("input", { id: "f-" + id, value: value ?? "" });
+    input.setAttribute("type", "text");
+    wrap.append(input);
+    if (hint) wrap.append(el("small", { textContent: hint }));
+    form.append(wrap);
+    // The wrapper, not just the input: reaching back through parentElement to hide a row is
+    // the kind of indirection that works until the markup moves one level.
+    return { wrap, input };
+  };
+
+  /* A picker over the orgs gh can already see, because typing a name you have to get exactly
+     right is the kind of thing that fails at step two and reads as the tool being broken. */
+  const orgWrap = el("label", { className: "field" });
+  orgWrap.append(el("span", { textContent: "GitHub organisation" }));
+  const org = el("select", { id: "f-org" });
+  org.append(el("option", { value: "", textContent: S.orgs.length ? "choose one…" : "type below" }));
+  for (const o of S.orgs) org.append(el("option", { value: o, textContent: o }));
+  org.append(el("option", { value: "__other", textContent: "another one…" }));
+  orgWrap.append(org);
+  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.",
+    }),
+  );
+  form.append(orgWrap);
+
+  const other = field("orgother", "Organisation name", "", "");
+  other.wrap.hidden = S.orgs.length > 0;
+
+  /* Which of the two things this is. An org that already has a roster-ops wants joining, not
+     a second one, and that is the question a second person on a team is really asking. */
+  const verdict = el("div", { className: "verdict", hidden: true });
+  form.append(verdict);
+  let existing = null;
+
+  const look = async () => {
+    const name = org.value === "__other" ? other.input.value.trim() : org.value;
+    existing = null;
+    verdict.hidden = true;
+    if (!name) return;
+    verdict.hidden = false;
+    verdict.replaceChildren(el("p", { className: "sub", textContent: "Looking at " + name + "…" }));
+    try {
+      const found = await checkOrg(name);
+      existing = found.exists ? name : null;
+      verdict.replaceChildren(
+        el("p", {
+          textContent: found.exists
+            ? name + " already runs roster. Nothing here needs creating; it needs checking out."
+            : "Nothing in " + name + " yet. This will create " + name + "/roster-ops.",
+        }),
+      );
+      paint();
+    } catch {
+      verdict.hidden = true;
+    }
+  };
+
+  org.addEventListener("change", () => {
+    other.wrap.hidden = org.value !== "__other";
+    look();
+  });
+  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.");
+
+  card.append(form);
+
+  /* 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" }));
+  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(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 params = () => ({
+    org: org.value === "__other" ? other.input.value.trim() : org.value,
+    name: name.input.value.trim(),
+    human: human.input.value.trim(),
+    marker: (human.input.value.trim().split("-")[0] || "human").toLowerCase(),
+    agent: agents.querySelector("input:checked")?.value ?? "claude-code-action",
+  });
+
+  const out = el("div", { className: "planout" });
+  const plan = el("button", { className: "btn", textContent: "Show me the plan" });
+  const go = el("button", { className: "btn primary", textContent: "Create it", hidden: true });
+  const join = el("button", { className: "btn primary", textContent: "Check it out here", hidden: true });
+  card.append(el("div", { className: "row" }, [plan, go, join]), out);
+
+  /* Creating and joining are mutually exclusive, and showing both is how somebody creates a
+     second ops repo in an org that already had one. */
+  function paint() {
+    const joining = existing !== null;
+    join.hidden = !joining;
+    plan.hidden = joining;
+    if (joining) go.hidden = true;
+  }
+
+  join.onclick = async () => {
+    join.disabled = true;
+    out.replaceChildren(el("p", { className: "sub", textContent: "Cloning…" }));
+    try {
+      const result = await joinOrg(existing);
+      if (!result.ok) throw new Error(result.error);
+      out.replaceChildren(
+        el("p", {
+          textContent:
+            "Checked out " + (result.cloned ?? []).join(", ") + " into " + (S.startedIn ?? "here") + ".",
+        }),
+      );
+      S = await getSetup();
+      render(main);
+    } catch (err) {
+      out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+    } finally {
+      join.disabled = false;
+    }
+  };
+
+  plan.onclick = async () => {
+    const p = params();
+    if (!p.org) {
+      out.replaceChildren(el("p", { className: "err", textContent: "Pick an organisation first." }));
+      return;
+    }
+    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.",
+        }),
+      );
+      go.hidden = false;
+    } catch (err) {
+      out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+    }
+  };
+
+  go.onclick = async () => {
+    go.disabled = plan.disabled = true;
+    out.replaceChildren(el("p", { className: "sub", textContent: "Creating…" }));
+    try {
+      const result = await createTenant(params());
+      out.replaceChildren(el("pre", { className: "cmd", textContent: result.output.trim() }));
+      if (result.ok) {
+        // render() draws the rest itself now that a tenant is on disk.
+        S = await getSetup();
+        render(main);
+      }
+    } catch (err) {
+      out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+    } finally {
+      go.disabled = plan.disabled = false;
+    }
+  };
+
+  return card;
+}
+
+/* ------------------------- 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);
+
+  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.",
+    }),
+  );
+  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" }));
+  return card;
+}
+
+/* ---------------------------------- furniture ---------------------------------- */
+
+function step(n, title, done) {
+  const card = el("section", { className: "step" + (done ? " done" : "") });
+  const head = el("div", { className: "stephead" });
+  head.append(
+    el("span", { className: "stepn", textContent: done ? "✓" : String(n) }),
+    el("h2", { textContent: title }),
+  );
+  card.append(head);
+  return card;
+}
+
+export { esc, toClipboard, $ };

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

@@ -0,0 +1,290 @@
+/* Hiring and retiring, from the portal.
+ *
+ * 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.
+ */
+
+import { post } from "../api.js";
+import { ago, el, esc } from "../dom.js";
+import { icon } from "../icons.js";
+import { refreshAll } from "../refresh.js";
+import { S } from "../state.js";
+import { appPanel } from "./app.js";
+import { paste } from "./paste.js";
+
+export function viewStaff(m) {
+  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 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" });
+  const pane = el("div");
+  hire.onclick = () => hireForm(pane);
+  m.append(el("div", { className: "row", style: "margin-bottom:14px" }, [hire]));
+  m.append(pane);
+
+  /* --------------------------- one staff member --------------------------- */
+
+  function card(s) {
+    const d = el("div", { className: "kv staffcard" });
+    const rig = s.rig ?? {};
+    d.innerHTML =
+      '<div class="k">' + esc(s.handle) + "</div>" +
+      '<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") +
+        "</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 = field("schedule", "0 9 * * 1-5", "defaults to a slot clear of everyone else");
+    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]]) {
+        if (f.input.value.trim()) params.set(key, f.input.value.trim());
+      }
+      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";
+      }
+    };
+  }
+
+  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),
+    );
+    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;
+  }
+
+  /* ------------------------------- retiring ------------------------------- */
+
+  async function retireForm(host, s, cardStatus) {
+    cardStatus.textContent = "planning…";
+    cardStatus.className = "meta";
+    let data;
+    try {
+      data = await (
+        await fetch("/api/staff/plan?action=retire&handle=" + encodeURIComponent(s.handle), {
+          cache: "no-store",
+        })
+      ).json();
+      if (data.error) throw new Error(data.error);
+    } catch (e) {
+      cardStatus.textContent = e.message;
+      cardStatus.className = "meta err";
+      return;
+    }
+    cardStatus.textContent = "";
+
+    const plan = data.plan;
+    const box = el("div", { className: "plan" });
+    box.append(el("h3", { textContent: "Retire " + plan.name + "?" }));
+    box.append(el("div", { className: "planhead", textContent: "This would stop" }));
+    for (const w of plan.workflows) box.append(line("stop", plan.dir + "/" + w + " disabled"));
+    box.append(line("stop", "removed from org.yaml"));
+    for (const p of plan.peers) {
+      box.append(
+        line("stop", "removed from " + p.dir + "/staff.yaml"),
+        line("stop", p.label + " deleted from " + (p.brain ?? p.dir)),
+      );
+    }
+
+    /* The point of retiring rather than deleting. Said as loudly as what it stops, because
+       "this is not destructive" is the thing somebody needs to believe before clicking. */
+    box.append(el("div", { className: "planhead keep", textContent: "This would keep" }));
+    for (const k of plan.keeps) box.append(line("keep", k));
+    for (const w of plan.warnings ?? []) box.append(line("warn", w));
+
+    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();
+    go.onclick = () =>
+      apply(
+        { action: "retire", handle: plan.handle },
+        "Retire " + plan.name + "?\n\n" + (plan.brain ?? plan.dir) + " is not touched.",
+        go,
+        status,
+        box,
+      );
+    box.append(el("div", { className: "row", style: "margin-top:14px" }, [go, cancel, status]));
+    host.replaceChildren(box);
+  }
+
+  /* -------------------------------- apply -------------------------------- */
+
+  async function apply(payload, ask, btn, status, box) {
+    if (!confirm(ask)) return;
+    btn.disabled = true;
+    status.textContent = "working…";
+    status.className = "meta";
+    try {
+      const r = await post(payload, "/api/staff/apply");
+      status.textContent = r.ok ? "done" : "finished with problems";
+      status.className = r.ok ? "meta ok" : "meta warn";
+      // What the terminal would have printed, because that is the useful account of it.
+      if (r.output) box.append(el("pre", { className: "code planout", textContent: r.output }));
+      await refreshAll(true);
+    } catch (e) {
+      status.textContent = e.message;
+      status.className = "meta err";
+      btn.disabled = false;
+    }
+  }
+}
+
+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 };
+}
+
+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;
+}