@nanocollective/roster 0.1.0-alpha.3 → 0.1.0-alpha.31

package/templates/portal/js/views/memory.js

@@ -13,6 +13,19 @@ import { inline } from "../md.js";
 import { S } from "../state.js";
 import { matchesFact } from "./brain.js";
 
+/**
+ * Which of the three kinds of provenance a tag is, as a class the stylesheet knows.
+ *
+ * A fact is measured, derived, or ruled on by a human — and the third one is written with that
+ * human's own marker, `[will]` or `[sam]` or whatever the org chose. The class used to be the
+ * marker itself against a stylesheet that knew one word, so every org but the one this was
+ * written in lost the "a person decided this" colour, which is the one that matters most.
+ */
+export function provenanceKind(provenance) {
+  const word = String(provenance).toLowerCase();
+  return word === "measured" || word === "derived" ? word : "ruled";
+}
+
 export function showMemory(viewer, s, key, pick) {
   const section = key.startsWith("mem:") ? key.slice(4) : null;
   const slug = key.startsWith("fact:") ? key.slice(5) : null;
@@ -61,7 +74,9 @@ export function showMemory(viewer, s, key, pick) {
     d.innerHTML =
       '<span class="slug" data-goto="' + esc(f.slug) + '" title="Show just this fact">' +
         esc(f.slug) + "</span>" +
-      (f.provenance ? '<span class="tag ' + esc(f.provenance) + '">' + esc(f.provenance) + "</span>" : "") +
+      (f.provenance
+        ? '<span class="tag ' + provenanceKind(f.provenance) + '">' + esc(f.provenance) + "</span>"
+        : "") +
       (f.note ? '<span class="notelink" data-note="' + esc(f.note) + '">' + esc(f.note) + "</span>" : "") +
       '<p class="stmt">' + inline(f.statement) + "</p>" +
       (f.consequence

package/templates/portal/js/views/org.js

@@ -1,27 +1,46 @@
 /* The org layer, in one place.
  *
- * These five files are what every staff member inherits. Editing `org/voice.md` once is the
- * whole extensibility story — the thing this arrangement exists to make possible — and until
- * now you reached them through a staff member's Prompt screen, which is a strange route to a
- * file that belongs to nobody in particular.
+ * These files are what every staff member inherits. Editing `org/voice.md` once is the whole
+ * extensibility story — the thing this arrangement exists to make possible — and until recently
+ * you reached them through a staff member's Prompt screen, which is a strange route to a file
+ * that belongs to nobody in particular.
+ *
+ * The list comes off disk rather than out of this file. It used to be five paths written here,
+ * which meant a tenant that added `org/pricing.md` could not open it at all, and one that had
+ * not written `org/business.md` yet got "not found" with nothing to do about it. Both are the
+ * same mistake: a list of what a tenant *should* have, standing in for what it has.
  *
  * `org.yaml` is here too, and is the one file that stops every prompt composing when it is
  * wrong. The server validates it before writing.
  */
 
-import { getFile, post } from "../api.js";
-import { el, esc, grow, kb } from "../dom.js";
+import { getFile, getOrgLayer } from "../api.js";
+import { el, esc, kb, skeleton } from "../dom.js";
 import { mdlite } from "../md.js";
-import { S, writeHash } from "../state.js";
-
-/* What each file is for, in one line, because a list of five filenames tells you nothing
-   about which one to open. */
-const DOCS = [
-  ["org.yaml", "Who and what: the humans, the repos, the defaults, which agent runs them.", "yaml"],
-  ["org/business.md", "What the business actually is. Every prompt is composed on top of it, and it is the file that stops the agents writing generic slop.", "md"],
-  ["org/operating.md", "The autonomy contract: what they do without asking, what they escalate, how a run starts and ends.", "md"],
-  ["org/guardrails.md", "The non-negotiables. Every staff member is bound by these and cannot argue with them.", "md"],
-  ["org/voice.md", "How everything they write reads. Change it once, and every surface changes on the next run.", "md"],
+import { humansOf, S, writeHash } from "../state.js";
+import { yamlPre } from "../yaml.js";
+import { businessForm, fileModes, prioritiesForm } from "./orgedit.js";
+import { repoPicker } from "./repos.js";
+
+/* What the files roster itself ships are for, in one line each. A filename says nothing about
+   which one to open; anything a tenant has added of its own falls back to its first heading. */
+const KNOWN = {
+  "org.yaml": "The people, repos, defaults and coding agent.",
+  "org/business.md": "What the business is. Every staff member reads it.",
+  "org/priorities.md": "This month's priorities, in order, and what's out of scope.",
+  "org/operating.md": "What staff do on their own, what they ask about, and how a run starts and ends.",
+  "org/guardrails.md": "Rules every staff member must follow.",
+  "org/voice.md": "How staff write.",
+  "prompts/daily.md": "The instructions for a scheduled run.",
+  "prompts/mention.md": "The instructions when you @-mention someone.",
+  "prompts/_identity.md": "Who staff post as.",
+  "prompts/_paths.md": "Where files are during a run.",
+  "prompts/_inflight.md": "Pull requests people have open, so staff don't work on the same files.",
+};
+
+const GROUPS = [
+  ["org", "Org files", "Every staff member reads these."],
+  ["prompts", "Prompts", "Roster's run instructions. Upgrades may change them."],
 ];
 
 export function viewOrg(m) {
@@ -31,50 +50,96 @@ export function viewOrg(m) {
     el("p", {
       className: "sub",
       textContent:
-        "The layer every staff member inherits. Editing one of these reaches all " +
-        org.staff.length + " of them on their next run.",
+        "Files every staff member reads. Changes apply from their next run.",
     }),
   );
 
   const facts = el("div", { className: "grid", style: "margin-bottom:18px" });
-  const human = org.human ?? {};
+  const humans = humansOf();
   facts.append(
     kv("Organisation", esc(org.org), org.name),
-    kv("They answer to", esc(human.name ?? human.github ?? "nobody"), human.github ? "@" + human.github : "no github handle in org.yaml"),
+    /* Plural on purpose. An org can answer to more than one person, and a card that names one
+       of two is worse than one that names neither: it reads as the only one who counts. */
+    kv(
+      "They answer to",
+      humans.length
+        ? humans.map((h) => esc(h.name ?? h.github)).join(", ")
+        : "nobody",
+      humans.length
+        ? humans.map((h) => (h.github ? "@" + h.github : "no github handle")).join(" · ")
+        : "org.yaml names no human, so nothing can wake an agent",
+    ),
     kv("Staff", String(org.staff.length), org.staff.map((s) => s.handle).join(", ")),
   );
   m.append(facts);
 
+  /* Marking a product repo after setup. The picker only lived on the setup screen, so a repo
+     created later meant typing `role: product` into org.yaml by hand. Folded, because it asks
+     GitHub for every repo in the org and most visits here are to read a file. */
+  const repoPane = el("div");
+  const repos = el("button", { className: "ghbtn", textContent: "Add a product repo" });
+  repos.onclick = () => {
+    if (repoPane.children.length) {
+      repoPane.replaceChildren();
+      return;
+    }
+    repoPane.replaceChildren(repoPicker({ org: org.org, onAdded: () => open("org.yaml") }));
+  };
+  m.append(el("div", { className: "row", style: "margin-bottom:14px" }, [repos]), repoPane);
+
   const split = el("div", { className: "split" });
   const tree = el("div", { className: "tree" });
   const viewer = el("div", { className: "viewer" });
   split.append(tree, viewer);
   m.append(split);
 
-  const group = el("div", { className: "navgroup" });
-  group.append(el("div", { className: "ghead", textContent: "The org layer" }));
-  for (const [path, why] of DOCS) {
-    const b = el("button", { className: "tfile tlayer", title: why });
-    b.dataset.key = path;
-    const t = el("span", { className: "t" });
-    t.append(
-      el("span", { className: "lname", textContent: path.replace(/^org\//, "") }),
-      el("span", { className: "lrepo", textContent: why }),
-    );
-    b.append(t);
-    b.onclick = () => open(path);
-    group.append(b);
-  }
-  tree.append(group);
-
-  /* Declared before the first `open()`, not after: `const` is not hoisted, and putting it
-     below the call made the first paint fail with "cannot access 'full' before
-     initialization" rather than rendering anything. */
   const full = (path) => S.data.opsName + "/" + path;
 
-  open(S.orgOpen ?? DOCS[0][0]);
+  tree.replaceChildren(...skeleton("row", 6));
+  getOrgLayer()
+    .then(({ files }) => {
+      S.orgFiles = files ?? [];
+      paintTree();
+      const first = S.orgFiles[0]?.path;
+      open(S.orgFiles.some((f) => f.path === S.orgOpen) ? S.orgOpen : first);
+    })
+    .catch((e) => {
+      tree.replaceChildren(el("p", { className: "empty err", textContent: e.message }));
+    });
+
+  function why(file) {
+    return KNOWN[file.path] ?? file.title ?? "";
+  }
+
+  function paintTree() {
+    tree.replaceChildren();
+    if (!S.orgFiles.length) {
+      tree.append(el("p", { className: "empty", textContent: "No org files here." }));
+      return;
+    }
+    for (const [id, heading, note] of GROUPS) {
+      const mine = S.orgFiles.filter((f) => (f.group ?? "org") === id);
+      if (!mine.length) continue;
+      const group = el("div", { className: "navgroup" });
+      group.append(el("div", { className: "ghead", textContent: heading, title: note }));
+      for (const f of mine) {
+        const b = el("button", { className: "tfile tlayer", title: why(f) });
+        b.dataset.key = f.path;
+        const t = el("span", { className: "t" });
+        t.append(
+          el("span", { className: "lname", textContent: f.path.replace(/^(org|prompts)\//, "") }),
+          el("span", { className: "lrepo", textContent: why(f) }),
+        );
+        b.append(t);
+        b.onclick = () => open(f.path);
+        group.append(b);
+      }
+      tree.append(group);
+    }
+  }
 
   function open(path) {
+    if (!path) return;
     S.orgOpen = path;
     writeHash(false);
     for (const o of tree.querySelectorAll(".tfile")) {
@@ -84,7 +149,7 @@ export function viewOrg(m) {
   }
 
   async function show(path) {
-    viewer.replaceChildren(el("p", { className: "empty", textContent: "Loading…" }));
+    viewer.replaceChildren(...skeleton("head", 1), ...skeleton("line", 7));
     let text;
     try {
       text = await getFile(full(path));
@@ -97,72 +162,27 @@ export function viewOrg(m) {
 
   function render(path, text) {
     viewer.replaceChildren();
-    const why = DOCS.find(([p]) => p === path)?.[1] ?? "";
-    const head = el("div", { className: "row", style: "margin-bottom:4px" });
+    const head = el("div", { className: "row filehead" });
     head.append(el("span", { className: "meta", textContent: full(path) + " · " + kb(text.length) }));
-    head.append(el("button", { className: "ghbtn", textContent: "Edit", onclick: () => edit(path, text) }));
-    viewer.append(head, el("p", { className: "factsub", textContent: why }));
-
-    if (path.endsWith(".yaml")) {
-      viewer.append(el("pre", { className: "code", textContent: text }));
-      return;
-    }
-    viewer.append(el("div", { className: "md doc", innerHTML: mdlite(text) }));
-  }
-
-  function edit(path, text) {
-    viewer.replaceChildren();
-    viewer.append(
-      el("div", { className: "row", style: "margin-bottom:10px" }, [
-        el("span", { className: "meta", textContent: full(path) }),
-      ]),
-    );
-
-    const ta = el("textarea", { value: text, className: "editor" });
-    viewer.append(ta);
-    grow(ta);
-    ta.addEventListener("input", () => grow(ta));
-
-    const status = el("span", { className: "meta" });
-    const save = el("button", { className: "ghbtn primary", textContent: "Save and commit" });
-    const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
-    cancel.onclick = () => render(path, text);
-    viewer.append(el("div", { className: "row", style: "margin-top:10px" }, [save, cancel, status]));
+    const file = S.orgFiles.find((f) => f.path === path) ?? { path };
+
+    const isYaml = /\.ya?ml$/.test(path);
+    /* Every file opens on Read, with the ways to change it as tabs beside it: the same ones
+       Getting started offers, because a file is no easier to write after setup than during it.
+       org.yaml is checked by the server before it is written, so a bad one is refused. */
+    viewer.append(head, el("p", { className: "factsub", textContent: why(file) }));
+    const read = {
+      label: "Read",
+      node: isYaml ? yamlPre(text) : el("div", { className: "md doc", innerHTML: mdlite(text) }),
+    };
+    const o = { path: full(path), name: S.data.name, text, before: [read], onSaved: () => show(path) };
     viewer.append(
-      el("p", {
-        className: "editnote",
-        textContent:
-          "Commits to " + S.data.opsName + " and pushes. Picked up by every staff member on their " +
-          "next run." +
-          (path.endsWith(".yaml")
-            ? " org.yaml is checked before it is written: bad YAML, or a missing org or name, is refused rather than committed."
-            : ""),
-      }),
+      path === "org/business.md"
+        ? businessForm(o)
+        : path === "org/priorities.md"
+          ? prioritiesForm(o)
+          : fileModes({ ...o, lang: isYaml ? "yaml" : "md" }),
     );
-
-    save.onclick = async () => {
-      if (ta.value === text) {
-        status.textContent = "nothing changed";
-        return;
-      }
-      if (!confirm("Commit " + full(path) + " and push?\n\nEvery staff member picks this up on their next run.")) return;
-      save.disabled = cancel.disabled = true;
-      status.textContent = "committing…";
-      status.className = "meta";
-      try {
-        const r = await post({ path: full(path), text: ta.value }, "/api/save");
-        status.textContent = r.pushed
-          ? "committed and pushed · " + r.sha
-          : "committed " + r.sha + ", but the push failed: " + (r.note ?? "");
-        status.className = r.pushed ? "meta ok" : "meta warn";
-        render(path, ta.value);
-      } catch (e) {
-        // A refused org.yaml is the interesting case: the reason is the whole message.
-        status.textContent = e.message;
-        status.className = "meta err";
-        save.disabled = cancel.disabled = false;
-      }
-    };
   }
 }
 

package/templates/portal/js/views/orgedit.js

@@ -0,0 +1,234 @@
+/* Ways to write the two org files a person has to write, shared by Getting started and the Org
+ * screen: plain questions, an AI interview, or the file itself. Each is one tab of a switcher,
+ * so the choice is visible rather than folded under a Save button. */
+
+import { fileUrl, saveFile } from "../api.js";
+import { el, grow } from "../dom.js";
+import { highlighted } from "../mdedit.js";
+import { paste } from "./paste.js";
+
+const BUSINESS_QUESTIONS = [
+  ["line", "What does it do, in one line?", "What this business does, in one line", true],
+  ["who", "Who is it for?", "Who the customers are, specifically", true],
+  ["key", "What does everything depend on?", "The one fact everything else follows from", false],
+  ["true", "What's already true? What's built, measured or tried?", "What is already true", false],
+  ["not", "What should staff never decide on their own?", "What is not ours to decide", false],
+];
+
+const val = (input) => String(input.value ?? "").trim();
+
+/* A file still in the shape it shipped in holds the questions, not answers, and pre-filling the
+   fields with "Not a segment. The person…" reads as if somebody had already answered them. */
+const isStub = (text) => /This file is a stub|Or answer these by hand/.test(text);
+
+/**
+ * org/business.md as five questions. With `text`, the answers already in the file fill the
+ * fields, so changing one answer does not mean retyping the other four.
+ * @param {{path: string, name: string, text?: string, onSaved: () => void, before?: object[]}} o
+ *   `before` puts extra tabs ahead of the three, which is how the Org screen adds Read.
+ */
+export function businessForm(o) {
+  const form = el("div");
+  const known = isStub(o.text ?? "") ? new Map() : sections(o.text ?? "");
+  const fields = BUSINESS_QUESTIONS.map(([id, label, heading, required]) => {
+    const input = id === "line" ? el("input", { type: "text" }) : el("textarea", { className: "pastebox", rows: 3 });
+    const had = known.get(heading.toLowerCase());
+    if (had) input.value = had.replace(/^>\s?/gm, "");
+    return { id, input, wrap: el("label", { className: "qfield" }, [el("span", { textContent: label + (required ? "" : " (optional)") }), input]) };
+  });
+  const save = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  form.append(...fields.map((f) => f.wrap), el("div", { className: "row" }, [save]), out);
+
+  save.onclick = async () => {
+    const missing = fields.find((f, i) => BUSINESS_QUESTIONS[i][3] && !val(f.input));
+    if (missing) {
+      missing.input.focus?.();
+      out.replaceChildren(el("p", { className: "err", textContent: "Answer the first two at least." }));
+      return;
+    }
+    const text =
+      `# What ${o.name} is\n\n` +
+      fields
+        .map((f, i) => [BUSINESS_QUESTIONS[i][2], val(f.input)])
+        .filter(([, v]) => v)
+        .map(([h, v]) => `## ${h}\n\n${v}\n`)
+        .join("\n");
+    await saveAndSay(save, out, o.path, text, "portal: write org/business.md", o.onSaved);
+  };
+
+  return modes([
+    ...(o.before ?? []),
+    { label: "Answer questions", node: form },
+    { label: "Let an AI interview you", node: paste({ kind: "discover", title: "", onSaved: o.onSaved }) },
+    rawMode(o.path, o.onSaved),
+  ]);
+}
+
+/** org/priorities.md as three lines and an out-of-scope list, filled from the file if it has them. */
+export function prioritiesForm(o) {
+  const form = el("div");
+  const { items, outs } = isStub(o.text ?? "") ? { items: [], outs: [] } : parsePriorities(o.text ?? "");
+  const ranks = [1, 2, 3].map((i) => {
+    const input = el("input", { type: "text", placeholder: i === 1 ? "e.g. Tasks can be ticked off and removed" : "" });
+    if (items[i - 1]) input.value = items[i - 1];
+    return { input, wrap: el("label", { className: "qfield" }, [el("span", { textContent: "Priority " + i + (i > 1 ? " (optional)" : "") }), input]) };
+  });
+  const scope = el("textarea", { className: "pastebox", rows: 3, placeholder: "One per line" });
+  if (outs.length) scope.value = outs.join("\n");
+  const save = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  form.append(
+    ...ranks.map((r) => r.wrap),
+    el("label", { className: "qfield" }, [el("span", { textContent: "Out of scope this month (optional)" }), scope]),
+    el("div", { className: "row" }, [save]),
+    out,
+  );
+  save.onclick = async () => {
+    const list = ranks.map((r) => val(r.input)).filter(Boolean);
+    if (!list.length) {
+      ranks[0].input.focus?.();
+      out.replaceChildren(el("p", { className: "err", textContent: "Add at least one priority." }));
+      return;
+    }
+    const scoped = val(scope).split("\n").map((l) => l.replace(/^[-*]\s*/, "").trim()).filter(Boolean);
+    const text =
+      "## What matters this month\n\n### Priorities, in order\n\n" +
+      list.map((t, i) => `${i + 1}. ${t}`).join("\n") +
+      "\n" +
+      (scoped.length ? "\n### Out of scope this month\n\n" + scoped.map((t) => `- ${t}`).join("\n") + "\n" : "");
+    await saveAndSay(save, out, o.path, text, "portal: write org/priorities.md", o.onSaved);
+  };
+  return modes([
+    ...(o.before ?? []),
+    { label: "Fill in", node: form },
+    { label: "Let an AI interview you", node: paste({ kind: "priorities", title: "", onSaved: o.onSaved }) },
+    rawMode(o.path, o.onSaved),
+  ]);
+}
+
+/** Any org file as highlighted text, with Read ahead of it on the Org screen. */
+export function fileModes(o) {
+  return modes([...(o.before ?? []), rawMode(o.path, o.onSaved, o.lang)]);
+}
+
+/**
+ * The file itself, for editing what is already there rather than starting again.
+ * @param {{label?: string, note?: string, read?: () => Promise<string>}} o
+ *   `read` starts the editor from other text than the file, once, so switching tabs does not
+ *   throw away what was typed. `note` is a line above the editor.
+ */
+export function rawMode(path, onSaved, lang = "md", o = {}) {
+  const node = el("div");
+  if (o.note) node.append(el("p", { className: "sub", textContent: o.note }));
+  const ta = el("textarea", { className: "pastebox" });
+  ta.rows = 12;
+  const save = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  const hl = highlighted(ta, lang);
+  node.append(hl, el("div", { className: "row" }, [save]), out);
+  ta.addEventListener("input", () => grow(ta));
+  const commit = () =>
+    saveAndSay(save, out, path, ta.value, "portal: edit " + path.split("/").slice(1).join("/"), onSaved);
+  save.onclick = commit;
+  // ⌘S is what a person's hands do in a text box.
+  ta.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+      e.preventDefault();
+      commit();
+    }
+  });
+  // Read when first shown, so it shows the file as it is then, not as it was at page load.
+  let read = false;
+  const load = () => {
+    if (o.read && read) return;
+    read = true;
+    return (
+      o.read
+        ? o.read()
+        : // 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) => {
+      ta.value = text;
+      grow(ta);
+      hl.repaint();
+    });
+  };
+  return { label: o.label ?? "Edit the file", node, onShow: load };
+}
+
+/** Ways to do one thing, as a switcher across the top: one shown at a time. */
+export function modes(list) {
+  const box = el("div");
+  const bar = el("div", { className: "modes" });
+  const panes = el("div");
+  const buttons = list.map((m, i) => {
+    const b = el("button", { className: "mode", textContent: m.label });
+    b.onclick = () => show(i);
+    return b;
+  });
+  bar.append(...buttons);
+  box.append(bar, panes);
+  function show(i) {
+    buttons.forEach((b, j) => b.classList.toggle("on", i === j));
+    panes.replaceChildren(list[i].node);
+    list[i].onShow?.();
+  }
+  show(0);
+  return box;
+}
+
+async function saveAndSay(btn, out, path, text, message, onSaved) {
+  btn.disabled = true;
+  const label = btn.textContent;
+  btn.textContent = "Saving…";
+  try {
+    const r = await saveFile(path, text, message);
+    out.replaceChildren(
+      el("p", {
+        className: r.pushed ? "sub" : "err",
+        textContent: r.pushed ? "Saved." : "Saved locally, but the push failed: " + (r.note ?? ""),
+      }),
+    );
+    onSaved?.();
+  } catch (err) {
+    out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+  } finally {
+    btn.disabled = false;
+    btn.textContent = label;
+  }
+}
+
+/** `## Heading` → the text under it, by lower-cased heading. */
+function sections(text) {
+  const out = new Map();
+  let key = null;
+  let buf = [];
+  const flush = () => key && out.set(key, buf.join("\n").trim());
+  for (const line of text.split("\n")) {
+    const m = /^##\s+(.*)$/.exec(line);
+    if (m) {
+      flush();
+      key = m[1].trim().toLowerCase();
+      buf = [];
+    } else if (key) buf.push(line);
+  }
+  flush();
+  return out;
+}
+
+function parsePriorities(text) {
+  const items = [];
+  const outs = [];
+  let where = "";
+  for (const line of text.split("\n")) {
+    if (/^#+\s.*priorit/i.test(line)) where = "p";
+    else if (/^#+\s.*out of scope/i.test(line)) where = "o";
+    else if (/^#/.test(line)) where = "";
+    const n = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+    const b = /^\s*[-*]\s+(.*)$/.exec(line);
+    if (where === "p" && n) items.push(n[1].trim());
+    if (where === "o" && b) outs.push(b[1].trim());
+  }
+  return { items, outs };
+}