@nanocollective/roster 0.1.0-alpha.1

package/templates/portal/js/views/changed.js

@@ -0,0 +1,157 @@
+/* What this agent learned and forgot, and the diff that did it. */
+
+import { diffUrl } from "../api.js";
+import { el, esc, markCurrent } from "../dom.js";
+import { iconHTML } from "../icons.js";
+import { S, staff, writeHash } from "../state.js";
+
+export function viewChanged(m) {
+  const s = staff();
+  m.append(el("h1", { textContent: s.handle.toUpperCase() + " · what changed" }));
+  m.append(el("p", { className: "sub", textContent:
+    "What this agent learned and forgot. Click any row to see the diff that did it." }));
+
+  const filter = el("input", { type: "search", placeholder: "Filter by slug or commit…", value: S.changedQuery });
+  const only = el("select");
+  only.append(el("option", { value: "", textContent: "Everything" }),
+              el("option", { value: "added", textContent: "Learned" }),
+              el("option", { value: "removed", textContent: "Forgotten" }));
+  only.value = S.changedFilter;
+  m.append(el("div", { className: "row", style: "margin-bottom:16px" }, [filter, only]));
+
+  const split = el("div", { className: "split" });
+  const list = el("div", { className: "tree" });
+  const viewer = el("div", { className: "viewer" });
+  split.append(list, viewer);
+  m.append(split);
+  viewer.append(el("p", { className: "empty", textContent: "Pick a change." }));
+
+  filter.oninput = () => { S.changedQuery = filter.value; writeHash(false); paint(); };
+  only.onchange = () => { S.changedFilter = only.value; paint(); };
+  paint();
+
+  function paint() {
+    const q = S.changedQuery.trim().toLowerCase();
+    list.replaceChildren();
+
+    const facts = s.factsChanged.filter((c) =>
+      (!S.changedFilter || c.change === S.changedFilter) &&
+      (!q || (c.slug + " " + c.sha).toLowerCase().includes(q)));
+
+    if (facts.length) {
+      const byDay = new Map();
+      for (const c of facts) {
+        const d = c.date.slice(0, 10);
+        if (!byDay.has(d)) byDay.set(d, []);
+        byDay.get(d).push(c);
+      }
+      for (const [day, items] of byDay) {
+        list.append(el("div", { className: "tdir", textContent: day }));
+        for (const c of items) {
+          const b = el("button", { className: "tfile" });
+          b.innerHTML = '<span class="chg ' + (c.change === "added" ? "ok" : "err") + '">' +
+            iconHTML(c.change === "added" ? "check" : "dash") + '</span><span class="t">' +
+            esc(c.slug) + "</span><i>" + esc(c.sha.slice(0, 7)) + "</i>";
+          b.onclick = () => { markCurrent(list, b); showDiff(viewer, s, c.sha, "memory/INDEX.md", c.slug); };
+          list.append(b);
+        }
+      }
+    }
+
+    const commits = s.recentCommits.filter((c) => !q || (c.subject + " " + c.sha).toLowerCase().includes(q));
+    if (commits.length && !S.changedFilter) {
+      list.append(el("div", { className: "tdir", textContent: "commits" }));
+      for (const c of commits.slice(0, 25)) {
+        const b = el("button", { className: "tfile", title: c.subject });
+        b.append(el("span", { className: "t", textContent: c.subject }));
+        b.append(el("i", { textContent: c.sha.slice(0, 7) }));
+        b.onclick = () => { markCurrent(list, b); showDiff(viewer, s, c.sha, "", null); };
+        list.append(b);
+      }
+    }
+
+    if (!list.children.length) list.append(el("p", { className: "empty", textContent: "Nothing matches." }));
+  }
+}
+
+async function showDiff(viewer, s, sha, path, highlight) {
+  viewer.replaceChildren(el("p", { className: "empty", textContent: "Loading diff…" }));
+  const res = await fetch(diffUrl(s.dir, sha, path));
+  if (!res.ok) { viewer.replaceChildren(el("p", { className: "empty err", textContent: "Could not load that diff." })); return; }
+  const text = await res.text();
+
+  // The first line is author\x1fdate\x1fsubject, prepended by the endpoint.
+  const nl = text.indexOf("\n");
+  const [author, date, subject] = text.slice(0, nl).split("\x1f");
+  const body = text.slice(nl + 1);
+
+  const head = el("div", { style: "margin-bottom:12px" }, [
+    el("div", { style: "font-weight:600", textContent: subject ?? sha }),
+    el("div", { className: "meta", textContent: sha + " · " + new Date(date).toLocaleString() + " · " + author }),
+  ]);
+
+  viewer.replaceChildren(head, ...renderDiff(body, highlight));
+  const focus = viewer.querySelector(".dfocus");
+  if (focus && focus.scrollIntoView) focus.scrollIntoView({ block: "center" });
+}
+
+/**
+ * A unified diff as something you can read: one block per file, coloured rows, and the two
+ * line-number gutters git leaves out. The noise git puts between files — index lines, mode
+ * changes, the +++/--- pair — is dropped, because the filename is already the heading.
+ */
+export function renderDiff(body, highlight) {
+  const blocks = [];
+  let block = null, oldNo = 0, newNo = 0;
+
+  const start = (name) => {
+    block = { name, added: 0, removed: 0, rows: el("div", { className: "diff" }) };
+    blocks.push(block);
+  };
+  const push = (cls, a, b, text) => {
+    if (!block) start("");
+    const r = el("div", { className: "dline" + (cls ? " " + cls : "") });
+    r.append(el("span", { className: "ln", textContent: a }),
+             el("span", { className: "ln", textContent: b }),
+             el("span", { className: "tx", textContent: text }));
+    // The fact whose change you clicked, marked so the scroll lands on it.
+    if (highlight && text.includes("`" + highlight + "`")) r.classList.add("dfocus");
+    block.rows.append(r);
+  };
+
+  for (const line of body.split("\n")) {
+    if (line.startsWith("diff --git")) {
+      const m = /\sb\/(.+)$/.exec(line);
+      start(m ? m[1] : line.replace(/^diff --git\s*/, ""));
+      continue;
+    }
+    if (/^(index |--- |\+\+\+ |new file|deleted file|similarity |rename |old mode|new mode|Binary )/.test(line)) continue;
+
+    const hunk = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@(.*)$/.exec(line);
+    if (hunk) {
+      oldNo = Number(hunk[1]);
+      newNo = Number(hunk[2]);
+      push("dhunk", "", "", (hunk[3] || "").trim() || "@@");
+      continue;
+    }
+    if (!line) continue;                       // a blank context line is " ", not ""
+    if (line.startsWith("+")) { push("dadd", "", String(newNo++), line.slice(1)); block.added++; continue; }
+    if (line.startsWith("-")) { push("ddel", String(oldNo++), "", line.slice(1)); block.removed++; continue; }
+    if (line.startsWith("\\")) { push("dmeta", "", "", line); continue; }
+    push("", String(oldNo++), String(newNo++), line.slice(1));
+  }
+
+  if (!blocks.length) {
+    return [el("p", { className: "dempty", textContent: "This commit changed nothing in that file." })];
+  }
+
+  return blocks.map((b) => {
+    const wrap = el("div", { className: "dblock" });
+    const h = el("div", { className: "dfile" });
+    h.innerHTML = "<b>" + esc(b.name || "changes") + "</b>" +
+      '<span class="p">+' + b.added + "</span>" +
+      '<span class="m">−' + b.removed + "</span>";
+    wrap.append(h, b.rows);
+    return wrap;
+  });
+}

package/templates/portal/js/views/checklist.js

@@ -0,0 +1,87 @@
+/* What is still wrong, and one button that hands it all to a coding agent.
+ *
+ * Derived from `roster doctor` every time it is drawn. Nothing here remembers that you clicked
+ * something: setup takes days, not minutes, and a stored step counter would disagree with the
+ * world about five minutes after it was written. */
+
+import { getDoctor, getFix } from "../api.js";
+import { el, toClipboard } from "../dom.js";
+
+const LEVEL_ORDER = { fail: 0, warn: 1, ok: 2 };
+
+export async function checklist(host, opts = {}) {
+  host.replaceChildren(el("p", { className: "sub", textContent: "Checking…" }));
+
+  let report;
+  try {
+    report = await getDoctor(opts.offline);
+  } catch (err) {
+    host.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+    return;
+  }
+
+  const findings = (report.findings ?? []).slice().sort(
+    (a, b) => (LEVEL_ORDER[a.level] ?? 3) - (LEVEL_ORDER[b.level] ?? 3),
+  );
+  const bad = findings.filter((f) => f.level !== "ok");
+
+  host.replaceChildren();
+  host.append(
+    el("p", {
+      className: "sub",
+      textContent: bad.length
+        ? `${bad.filter((f) => f.level === "fail").length} failing, ${bad.filter((f) => f.level === "warn").length} to look at.` +
+          (report.online ? "" : " Local checks only.")
+        : "Everything doctor checks is clean." + (report.online ? "" : " Local checks only."),
+    }),
+  );
+
+  for (const f of bad) {
+    const row = el("div", { className: "check " + f.level });
+    row.append(
+      el("span", { className: "checkmark", textContent: f.level === "fail" ? "✗" : "!" }),
+      el("div", {}, [
+        el("b", { textContent: f.title }),
+        el("span", { className: "meta", textContent: f.scope + " · " + f.id }),
+        ...(f.fix ? [el("p", { textContent: f.fix })] : []),
+      ]),
+    );
+    host.append(row);
+  }
+
+  /* The isitagentready move: the findings as instructions, for the agent you already have
+     pointed at this workspace. What only a person can do is deliberately not in that text. */
+  const copy = el("button", { className: "btn primary", textContent: "Copy all instructions" });
+  const note = el("span", { className: "meta" });
+  copy.onclick = async () => {
+    copy.disabled = true;
+    copy.textContent = "Collecting…";
+    try {
+      const data = await getFix(opts.offline);
+      const mine = (data.items ?? []).filter((i) => i.who === "agent").length;
+      const yours = (data.items ?? []).filter((i) => i.who === "human").length;
+      await toClipboard(data.text, copy, "Copied");
+      note.textContent =
+        `${mine} for your agent` + (yours ? `, ${yours} only you can do (listed, not asked for)` : "");
+    } catch (err) {
+      note.textContent = String(err.message || err);
+    } finally {
+      copy.disabled = false;
+    }
+  };
+
+  const again = el("button", { className: "btn", textContent: "Check again" });
+  again.onclick = () => checklist(host, opts);
+
+  host.append(el("div", { className: "row" }, [copy, again, note]));
+  if (bad.length) {
+    host.append(
+      el("p", {
+        className: "sub",
+        textContent:
+          "Paste it into Cursor, Claude Code or anything else that can edit files here, then " +
+          "check again. The ids above should be gone.",
+      }),
+    );
+  }
+}

package/templates/portal/js/views/docs.js

@@ -0,0 +1,84 @@
+/* The framework's own documentation, read where you already are. Same renderer as a brain
+   file, so a link between pages behaves like a link between files rather than a dead end. */
+
+import { getDoc, getDocs } from "../api.js";
+import { el, slug } from "../dom.js";
+import { mdlite } from "../md.js";
+import { S, writeHash } from "../state.js";
+
+export function viewDocs(m) {
+  m.append(el("h1", { textContent: "Docs" }));
+  m.append(
+    el("p", {
+      className: "sub",
+      textContent:
+        "How roster works, what it will not do for you, and every trap worth knowing about.",
+    }),
+  );
+
+  const split = el("div", { className: "split" });
+  const list = el("div", { className: "tree" });
+  const viewer = el("div", { className: "viewer" });
+  split.append(list, viewer);
+  m.append(split);
+
+  if (S.docs) paint();
+  else {
+    list.append(el("p", { className: "empty", textContent: "Loading…" }));
+    getDocs()
+      .then((d) => { S.docs = d; paint(); })
+      .catch((e) => list.replaceChildren(el("p", { className: "empty err", textContent: e.message })));
+  }
+
+  function paint() {
+    list.replaceChildren();
+    for (const d of S.docs) {
+      const b = el("button", { className: "tfile tmem", title: d.file });
+      b.dataset.key = d.file;
+      b.append(el("span", { className: "t", textContent: d.title }));
+      b.setAttribute("aria-current", String((S.openDoc ?? S.docs[0].file) === d.file));
+      b.onclick = () => open(d.file);
+      list.append(b);
+    }
+    show(S.openDoc ?? S.docs[0].file);
+  }
+
+  function open(file) {
+    S.openDoc = file;
+    writeHash(false);
+    for (const o of list.querySelectorAll(".tfile")) {
+      o.setAttribute("aria-current", String(o.dataset.key === file));
+    }
+    show(file);
+  }
+
+  async function show(file) {
+    viewer.replaceChildren(el("p", { className: "empty", textContent: "Loading…" }));
+    let text;
+    try {
+      text = await getDoc(file);
+    } catch (e) {
+      viewer.replaceChildren(el("p", { className: "empty err", textContent: e.message }));
+      return;
+    }
+    const doc = el("div", { className: "md doc" });
+    // The pages carry YAML frontmatter for the collective's docs site. It is metadata, not
+    // content, so it is dropped rather than rendered as a rule and a stray paragraph.
+    doc.innerHTML = mdlite(text.replace(/^---\n[\s\S]*?\n---\n/, ""), { docs: true });
+    doc.addEventListener("click", (e) => {
+      const link = e.target.closest?.("[data-doc]");
+      if (!link) return;
+      e.preventDefault();
+      const [page, anchor] = link.dataset.doc.split("#");
+      if (page && S.docs.some((d) => d.file === page)) open(page);
+      if (anchor) {
+        const to = [...viewer.querySelectorAll("h1,h2,h3,h4")].find(
+          (h) => slug(h.textContent) === anchor,
+        );
+        if (to?.scrollIntoView) to.scrollIntoView({ block: "start" });
+      }
+    });
+    viewer.replaceChildren(doc);
+    viewer.scrollTop = 0;
+  }
+}

package/templates/portal/js/views/files.js

@@ -0,0 +1,95 @@
+/* Rendering one file out of a brain: markdown, image, CSV, JSON, or source. */
+
+import { el, kb } from "../dom.js";
+import { fileUrl, getFile } from "../api.js";
+import { mdlite } from "../md.js";
+
+const IMG = ["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"];
+
+export async function showFile(viewer, s, f, pick) {
+  viewer.replaceChildren(el("p", { className: "empty", textContent: "Loading…" }));
+  const path = s.dir + "/" + f.path;
+  const head = el("div", { className: "meta", style: "margin-bottom:12px" });
+  /* A file the export did not walk (the charter, the manifest) has no size on it, so the
+     header says what it knows and fills the rest in once the text arrives. */
+  const stamp = (bytes) =>
+    f.path + (bytes ? " · " + kb(bytes) : "") +
+    (f.bytes ? " · " + new Date(f.modified).toLocaleDateString() : "");
+  head.textContent = stamp(f.bytes);
+
+  if (IMG.includes(f.ext)) {
+    viewer.replaceChildren(head, el("img", { src: fileUrl(path), alt: f.path }));
+    return;
+  }
+
+  const text = await getFile(path);
+  head.textContent = stamp(f.bytes || text.length);
+  if (f.ext === "csv") {
+    viewer.replaceChildren(head, csvTable(text));
+    return;
+  }
+
+  // A brain is mostly markdown, and reading it as source was the thing that made the file
+  // tree feel like a worse GitHub rather than a better one.
+  if (f.ext === "md" || f.ext === "markdown") {
+    const dir = f.path.includes("/") ? f.path.slice(0, f.path.lastIndexOf("/") + 1) : "";
+    const doc = el("div", { className: "md doc" });
+    doc.innerHTML = mdlite(text, { repo: s.brain, file: { dir, staffDir: s.dir } });
+    doc.addEventListener("click", (e) => {
+      const link = e.target.closest?.("[data-file]");
+      if (!link) return;
+      e.preventDefault();
+      pick?.(link.dataset.file);
+    });
+    viewer.replaceChildren(head, doc);
+    return;
+  }
+
+  if (f.ext === "json") {
+    let pretty = text;
+    try {
+      pretty = JSON.stringify(JSON.parse(text), null, 2);
+    } catch {
+      /* malformed: show it as it is */
+    }
+    viewer.replaceChildren(head, el("pre", { className: "code", textContent: pretty }));
+    return;
+  }
+
+  viewer.replaceChildren(head, el("pre", { className: "code", textContent: text }));
+}
+
+function csvTable(text) {
+  const rows = text.trim().split("\n").slice(0, 300).map((r) => r.split(","));
+  const t = el("table");
+  const [head, ...body] = rows;
+  t.append(el("tr", {}, (head ?? []).map((h) => el("th", { textContent: h }))));
+  for (const r of body) t.append(el("tr", {}, r.map((c) => el("td", { textContent: c }))));
+  return t;
+}
+
+export function showGallery(viewer, s, surface) {
+  const imgs = surface.files.filter((f) => IMG.includes(f.ext));
+  if (!imgs.length) {
+    viewer.replaceChildren(el("p", { className: "empty", textContent: "No images here." }));
+    return;
+  }
+  const g = el("div", { className: "gallery" });
+  for (const f of imgs.slice(0, 200)) {
+    const fig = el("figure");
+    const img = el("img", {
+      src: fileUrl(s.dir + "/" + f.path),
+      loading: "lazy",
+      alt: f.path,
+    });
+    img.onclick = () => showFile(viewer, s, f);
+    fig.append(img, el("figcaption", { textContent: f.path.split("/").pop() }));
+    g.append(fig);
+  }
+  viewer.replaceChildren(
+    el("div", { className: "meta", style: "margin-bottom:12px" }, [
+      imgs.length + " images in " + surface.path,
+    ]),
+    g,
+  );
+}