@nanocollective/roster 0.1.0-alpha.2 → 0.1.0-alpha.20

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

@@ -9,8 +9,19 @@ import { el, toClipboard } from "../dom.js";
 
 const LEVEL_ORDER = { fail: 0, warn: 1, ok: 2 };
 
+/**
+ * @param opts.skip  finding ids the caller already shows as a step of its own, so they are not
+ *   reported twice. With `opts.hideWhenClean`, a list left empty draws nothing at all.
+ * @param opts.shell  when Health draws this, the section it lives in: `{actions, say}`. The
+ *   setup screen passes nothing and gets the layout it has always had. Its own screen is a
+ *   wizard, where a chunky button and a paragraph under it are right; on Health it is one
+ *   section of four, and has to look like the other three.
+ */
 export async function checklist(host, opts = {}) {
-  host.replaceChildren(el("p", { className: "sub", textContent: "Checking…" }));
+  const inSection = Boolean(opts.shell);
+  const btnClass = inSection ? "ghbtn" : "btn";
+  const noteClass = inSection ? "hnote" : "sub";
+  host.replaceChildren(el("p", { className: noteClass, textContent: "Checking…" }));
 
   let report;
   try {
@@ -23,12 +34,18 @@ export async function checklist(host, opts = {}) {
   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");
+  const skip = new Set(opts.skip ?? []);
+  const bad = findings.filter((f) => f.level !== "ok" && !skip.has(f.id));
 
   host.replaceChildren();
+  if (!bad.length && opts.hideWhenClean) {
+    opts.onEmpty?.();
+    return;
+  }
+  opts.shell?.say(bad.length ? String(bad.length) : "clean");
   host.append(
     el("p", {
-      className: "sub",
+      className: noteClass,
       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.")
@@ -51,7 +68,7 @@ export async function checklist(host, opts = {}) {
 
   /* 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 copy = el("button", { className: btnClass + " primary", textContent: "Copy all instructions" });
   const note = el("span", { className: "meta" });
   copy.onclick = async () => {
     copy.disabled = true;
@@ -70,17 +87,19 @@ export async function checklist(host, opts = {}) {
     }
   };
 
-  const again = el("button", { className: "btn", textContent: "Check again" });
+  const again = el("button", { className: btnClass, textContent: "Check again" });
   again.onclick = () => checklist(host, opts);
 
-  host.append(el("div", { className: "row" }, [copy, again, note]));
+  const feet = opts.shell?.actions ?? host.appendChild(el("div", { className: "row" }));
+  if (opts.shell) feet.replaceChildren();
+  feet.append(copy, again, note);
   if (bad.length) {
-    host.append(
+    feet.append(
       el("p", {
-        className: "sub",
+        className: noteClass,
+        style: "flex-basis:100%",
         textContent:
-          "Paste it into Cursor, Claude Code or anything else that can edit files here, then " +
-          "check again. The ids above should be gone.",
+          "Paste them into your coding agent, then check again.",
       }),
     );
   }

package/templates/portal/js/views/credential.js

@@ -0,0 +1,98 @@
+/* The agent's credential, stored once for the org.
+ *
+ * The value goes from this box to the local server in a POST, and from there to gh on its
+ * standard input. It is not kept in the page after it is sent, and nothing echoes it back. */
+
+import { getCredential, storeCredential } from "../api.js";
+import { el } from "../dom.js";
+
+/** @param opts.bare  drawn inside a step that already has a title. `onStatus(done)` hears whether one is stored. */
+export function credentialPanel(opts = {}) {
+  const box = el("div", { className: opts.bare ? "" : "manual" });
+  if (!opts.bare) box.append(el("b", { textContent: "Agent credential" }));
+  const body = el("div");
+  box.append(body);
+  body.append(el("p", { className: "sub", textContent: "Looking at where it would go…" }));
+
+  getCredential()
+    .then((c) => {
+      opts.onStatus?.(Boolean(c.orgSecret));
+      draw(body, c, opts);
+    })
+    .catch((err) => body.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) })));
+  return box;
+}
+
+function draw(body, c, opts = {}) {
+  body.replaceChildren();
+  if (c.howTo) body.append(el("p", { textContent: "Where to get one: " + c.howTo }));
+
+  if (!(c.brains ?? []).length) {
+    // Inside a step, the step's own hint already says when this opens.
+    if (opts.bare) return;
+    body.append(
+      el("p", {
+        className: "sub",
+        textContent:
+          "Available after your first hire. You only add it once.",
+      }),
+    );
+    return;
+  }
+
+  if (c.orgSecret) {
+    body.append(
+      el("p", {
+        className: "sub",
+        textContent:
+          c.name + " is already set. Paste a new one only to replace it.",
+      }),
+    );
+  }
+
+  body.append(
+    el("p", {
+      className: "sub",
+      textContent:
+        (c.plan.mode === "org"
+          ? "Stored as one org secret, " + c.name + ", shared with " + c.brains.join(", ") + ". "
+          : "Stored as " + c.name + " on each of " + c.brains.join(", ") + ", because " + c.plan.reason + ". ") +
+        "It's never written to disk.",
+    }),
+  );
+
+  const input = el("input", { type: "password", placeholder: c.name, autocomplete: "off" });
+  input.style.width = "100%";
+  const go = el("button", { className: "btn primary", textContent: "Store it" });
+  const out = el("div", { style: "margin-top:9px" });
+  body.append(input, el("div", { className: "row", style: "margin-top:9px" }, [go]), out);
+
+  go.onclick = async () => {
+    const value = input.value.trim();
+    if (!value) {
+      input.focus();
+      return;
+    }
+    go.disabled = true;
+    out.replaceChildren(el("p", { className: "sub", textContent: "Storing…" }));
+    try {
+      const r = await storeCredential(value, false);
+      input.value = "";
+      if (!r.ok) throw new Error(r.error);
+      opts.onStatus?.(true);
+      out.replaceChildren(
+        ...(r.fellBack ? [el("p", { className: "err", textContent: "The org secret was refused: " + r.fellBack })] : []),
+        el("p", {
+          textContent:
+            r.mode === "org"
+              ? "Saved."
+              : "Saved on " + r.repos.join(", ") + ".",
+        }),
+      );
+    } catch (err) {
+      out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+    } finally {
+      go.disabled = false;
+    }
+  };
+}

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

@@ -1,8 +1,8 @@
 /* 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 { getDoc, getDocs, searchDocs } from "../api.js";
+import { el, esc, skeleton, slug } from "../dom.js";
 import { mdlite } from "../md.js";
 import { S, writeHash } from "../state.js";
 
@@ -16,6 +16,18 @@ export function viewDocs(m) {
     }),
   );
 
+  /* Titles are not enough. Twenty-odd pages is too many to scan and few enough for the server
+     to read in full on every keystroke, and what you are looking for — "which page explains the
+     mention gate" — is a sentence in a paragraph rather than a word in a heading. So the box
+     searches the text, and the list becomes the results while there is a query in it. */
+  const find = el("input", {
+    type: "search",
+    placeholder: "Search the docs…",
+    value: S.docQuery ?? "",
+    style: "width:100%;margin-bottom:12px",
+  });
+  m.append(find);
+
   const split = el("div", { className: "split" });
   const list = el("div", { className: "tree" });
   const viewer = el("div", { className: "viewer" });
@@ -24,14 +36,44 @@ export function viewDocs(m) {
 
   if (S.docs) paint();
   else {
-    list.append(el("p", { className: "empty", textContent: "Loading…" }));
+    list.replaceChildren(...skeleton("row", 8));
     getDocs()
       .then((d) => { S.docs = d; paint(); })
       .catch((e) => list.replaceChildren(el("p", { className: "empty err", textContent: e.message })));
   }
 
+  /* Debounced, because every keystroke is a read of every page. 140ms is below the point
+     where the list feels like it is lagging behind the typing. */
+  let timer = null;
+  find.oninput = () => {
+    S.docQuery = find.value;
+    writeHash(false);
+    clearTimeout(timer);
+    timer = setTimeout(run, 140);
+  };
+  if (S.docQuery) run();
+
+  async function run() {
+    const q = (S.docQuery ?? "").trim();
+    if (!q) { paint(); return; }
+    let hits;
+    try {
+      hits = (await searchDocs(q)).hits ?? [];
+    } catch (e) {
+      list.replaceChildren(el("p", { className: "empty err", textContent: e.message }));
+      return;
+    }
+    // A slow answer to a query you have already moved on from must not land.
+    if ((S.docQuery ?? "").trim() !== q) return;
+    paintHits(hits, q);
+  }
+
   function paint() {
     list.replaceChildren();
+    if (!S.docs?.length) {
+      list.append(el("p", { className: "empty", textContent: "No docs here." }));
+      return;
+    }
     for (const d of S.docs) {
       const b = el("button", { className: "tfile tmem", title: d.file });
       b.dataset.key = d.file;
@@ -43,6 +85,54 @@ export function viewDocs(m) {
     show(S.openDoc ?? S.docs[0].file);
   }
 
+  /** The same list, narrowed, with the lines that matched under each row. */
+  function paintHits(hits, q) {
+    list.replaceChildren();
+    list.append(
+      el("div", {
+        className: "tdir first",
+        textContent: hits.length
+          ? hits.length + (hits.length === 1 ? " page" : " pages") + " mention that"
+          : "nothing mentions that",
+      }),
+    );
+    if (!hits.length) {
+      list.append(
+        el("p", {
+          className: "empty",
+          textContent: "Every word has to appear somewhere on the page. Try fewer.",
+        }),
+      );
+      return;
+    }
+    for (const h of hits) {
+      const b = el("button", { className: "tfile thit", title: h.file });
+      b.dataset.key = h.file;
+      const t = el("span", { className: "t" });
+      t.append(el("span", { className: "hitname", textContent: h.title }));
+      for (const line of h.matches ?? []) {
+        t.append(el("span", { className: "hitline", innerHTML: mark(line.text, q) }));
+      }
+      b.append(t);
+      b.setAttribute("aria-current", String(S.openDoc === h.file));
+      b.onclick = () => open(h.file);
+      list.append(b);
+    }
+    // Opening the first result is what makes typing feel like searching rather than filtering.
+    if (!hits.some((h) => h.file === S.openDoc)) open(hits[0].file);
+  }
+
+  /** The words that were asked for, shown in the line they were found in. */
+  function mark(text, q) {
+    const terms = q.toLowerCase().split(/\s+/).filter(Boolean)
+      .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+    let html = esc(text);
+    if (terms.length) {
+      html = html.replace(new RegExp("(" + terms.join("|") + ")", "gi"), "<em>$1</em>");
+    }
+    return html;
+  }
+
   function open(file) {
     S.openDoc = file;
     writeHash(false);
@@ -53,7 +143,7 @@ export function viewDocs(m) {
   }
 
   async function show(file) {
-    viewer.replaceChildren(el("p", { className: "empty", textContent: "Loading…" }));
+    viewer.replaceChildren(...skeleton("head", 1), ...skeleton("line", 8));
     let text;
     try {
       text = await getDoc(file);

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

@@ -1,11 +1,18 @@
-/* Rendering one file out of a brain: markdown, image, CSV, JSON, or source. */
+/* Rendering one file out of a brain: markdown, image, video, CSV, JSON, or source. */
 
 import { el, kb } from "../dom.js";
 import { fileUrl, getFile } from "../api.js";
+import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
+import { yamlPre } from "../yaml.js";
 
 const IMG = ["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"];
 
+/* A brain records as often as it screenshots, and a recording read as source is a screenful
+   of binary. It plays here for the same reason an image displays here: it is the file. */
+const VIDEO = ["mp4", "m4v", "webm", "mov", "ogv"];
+const AUDIO = ["mp3", "m4a", "wav", "oga"];
+
 export async function showFile(viewer, s, f, pick) {
   viewer.replaceChildren(el("p", { className: "empty", textContent: "Loading…" }));
   const path = s.dir + "/" + f.path;
@@ -18,7 +25,33 @@ export async function showFile(viewer, s, f, pick) {
   head.textContent = stamp(f.bytes);
 
   if (IMG.includes(f.ext)) {
-    viewer.replaceChildren(head, el("img", { src: fileUrl(path), alt: f.path }));
+    /* `zoomable` is the opt-in the lightbox looks for. The gallery tiles above are not
+       marked, because their click already means "open this file", and this is where it lands. */
+    viewer.replaceChildren(
+      head,
+      el("img", { className: "zoomable", src: fileUrl(path), alt: f.path }),
+    );
+    return;
+  }
+
+  if (VIDEO.includes(f.ext) || AUDIO.includes(f.ext)) {
+    const player = el(VIDEO.includes(f.ext) ? "video" : "audio", {
+      src: fileUrl(path),
+      controls: true,
+      preload: "metadata",
+      className: "player",
+    });
+    // Nothing else here streams, so say what to do when a codec the browser cannot decode
+    // turns up — a .mov is often h.265, and a silent black rectangle explains nothing.
+    const fallback = el("p", { className: "meta", hidden: true });
+    player.onerror = () => {
+      fallback.hidden = false;
+      fallback.textContent = "This browser cannot play " + f.ext + ". The file itself is fine — ";
+      fallback.append(
+        el("a", { href: fileUrl(path), download: f.path.split("/").pop(), textContent: "download it" }),
+      );
+    };
+    viewer.replaceChildren(head, player, fallback);
     return;
   }
 
@@ -56,6 +89,12 @@ export async function showFile(viewer, s, f, pick) {
     return;
   }
 
+  // A manifest is the one kind of source in a brain that is read closely rather than skimmed.
+  if (f.ext === "yaml" || f.ext === "yml") {
+    viewer.replaceChildren(head, yamlPre(text));
+    return;
+  }
+
   viewer.replaceChildren(head, el("pre", { className: "code", textContent: text }));
 }
 
@@ -69,26 +108,31 @@ function csvTable(text) {
 }
 
 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." }));
+  const shots = surface.files.filter((f) => IMG.includes(f.ext) || VIDEO.includes(f.ext));
+  if (!shots.length) {
+    viewer.replaceChildren(el("p", { className: "empty", textContent: "Nothing to show here." }));
     return;
   }
   const g = el("div", { className: "gallery" });
-  for (const f of imgs.slice(0, 200)) {
+  for (const f of shots.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() }));
+    const src = fileUrl(s.dir + "/" + f.path);
+    /* A video tile is its own first frame rather than a placeholder, which is what makes a
+       wall of recordings tell you anything. `preload="metadata"` is enough for that and does
+       not pull the whole file for every tile on the page. */
+    const tile = IMG.includes(f.ext)
+      ? el("img", { src, loading: "lazy", alt: f.path })
+      : el("video", { src, preload: "metadata", muted: true, playsInline: true });
+    tile.onclick = () => showFile(viewer, s, f);
+    fig.append(tile);
+    if (!IMG.includes(f.ext)) fig.append(el("span", { className: "playmark" }, [icon("play", "ic")]));
+    fig.append(el("figcaption", { textContent: f.path.split("/").pop() }));
     g.append(fig);
   }
+  const vids = shots.filter((f) => VIDEO.includes(f.ext)).length;
   viewer.replaceChildren(
     el("div", { className: "meta", style: "margin-bottom:12px" }, [
-      imgs.length + " images in " + surface.path,
+      shots.length - vids + " images" + (vids ? " and " + vids + " videos" : "") + " in " + surface.path,
     ]),
     g,
   );

package/templates/portal/js/views/graph.js

@@ -53,7 +53,7 @@ function drawGraph(canvas, wrap, s) {
   }
   const groups = [...members.keys()].sort((a, b) => members.get(b).length - members.get(a).length);
 
-  const PALETTE = ["#7cc7a4","#7aa2f7","#c99bd6","#d8a657","#6fc3c9","#e07b7b","#b3c46b","#e0a1c0","#9d9ff5","#8fb0d9"];
+  const PALETTE = ["#30d158","#0a84ff","#bf5af2","#ff9f0a","#64d2ff","#ff453a","#ffcc00","#ff375f","#5e5ce6","#ac8e68"];
   const colour = new Map(groups.map((g, i) => [g, PALETTE[i % PALETTE.length]]));
 
   // The ring grows with the number of groups so they never crowd, and each group keeps its