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

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/health.js

@@ -6,6 +6,7 @@ import { inline } from "../md.js";
 import { render } from "../router.js";
 import { S, staff } from "../state.js";
 import { checklist } from "./checklist.js";
+import { copyAmendBrief } from "./prompt.js";
 
 const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
@@ -27,20 +28,14 @@ export function viewHealth(m) {
   const rig = s.rig ?? {};
   m.append(el("h1", { textContent: s.name + " · health" }));
 
-  /* `roster doctor` runs over the whole org, so it is drawn once at the top rather than
-     pretended to be per-staff. The comment this replaced said doctor "does not exist yet". */
-  const org = el("div", { className: "card", style: "margin-bottom:16px" });
-  org.append(el("h3", { textContent: "The org, from roster doctor" }));
-  const rows = el("div");
-  org.append(rows);
-  m.append(org);
-  checklist(rows, {});
-  const errs = s.problems.filter((p) => p.level === "error");
-  const warns = s.problems.filter((p) => p.level === "warning");
-  m.append(el("p", { className: "sub", innerHTML:
-    "<span class='" + (errs.length ? "err" : "ok") + "'>" + errs.length + " errors</span> · " +
-    "<span class='warn'>" + warns.length + " warnings</span> · memory checks are the same ones " +
-    "<code>roster lint</code> runs; the rest is read off the checkout." }));
+  m.append(
+    el("p", {
+      className: "sub",
+      textContent:
+        "The rig, then three sets of checks: the org, the prompts they are sent, and what " +
+        "they have written down.",
+    }),
+  );
 
   /* The rig: is the scaffolding still there, and has the agent actually been running. This
      is everything answerable without the GitHub API — installation grants, secrets and
@@ -82,11 +77,75 @@ export function viewHealth(m) {
   }
   m.append(g);
 
-  m.append(el("div", { className: "hsect", textContent: "Memory problems" }));
+  /* Three sets of checks, and they were three different-looking things: hairline rows for
+     doctor, bordered boxes for the prompt audit, cards with two buttons each for lint. Same
+     question in all three, so one shape: a heading that carries its own count, a line saying
+     what the section is, the findings as rows, and the section's actions at the end. */
+  const doctor = section(m, "The org, from roster doctor", "doctor");
+  checklist(doctor.body, { shell: doctor });
 
-  if (!s.problems.length) {
-    m.append(el("p", { className: "empty", textContent: "Nothing to fix." }));
-    return;
+  /* What is wrong with what this agent is sent. It used to sit in the tree on the Prompt
+     screen, beside the prompt itself — which answers "what is sent", not "is it any good".
+     Both questions are health questions, so both are here. */
+  const prompt = section(m, "Prompt problems", "prompts");
+  promptProblems(prompt, s);
+
+  memoryProblems(section(m, "Memory problems", "memory"), s);
+}
+
+/**
+ * One section: a heading with a count, a body, and a row for whatever acts on all of it.
+ *
+ * Returned rather than built in one go because two of the three fill themselves in later, and
+ * a heading that appears with its count already right is worth the small indirection.
+ */
+function section(m, title, key) {
+  const head = el("div", { className: "hsect" });
+  head.append(el("span", { textContent: title }));
+  const count = el("i");
+  head.append(count);
+  const body = el("div", { className: "hbody " + key });
+  const actions = el("div", { className: "row hacts" });
+  m.append(head, body, actions);
+  return {
+    body,
+    actions,
+    /** `n` findings, or a word when a count is the wrong shape of answer. */
+    say: (text) => { count.textContent = text; },
+  };
+}
+
+/** The same checks `roster lint` runs, over what this staff member has written down. */
+function memoryProblems({ body, actions, say }, s) {
+  say(s.problems.length ? String(s.problems.length) : "clean");
+  body.append(
+    el("p", {
+      className: "hnote",
+      textContent: s.problems.length
+        ? "The same checks roster lint runs, over memory/INDEX.md."
+        : "Nothing roster lint can fault in memory/INDEX.md.",
+    }),
+  );
+  if (!s.problems.length) return;
+
+  for (const p of s.problems) {
+    const { row, body: text } = finding(
+      p.level === "error" ? "error" : "warning",
+      { html: inline(p.message) },
+      [p.rule, p.line ? "INDEX.md:" + p.line : ""],
+    );
+    const status = el("span", { className: "meta" });
+    const btn = el("button", { className: "ghbtn", textContent: "Ask " + s.handle.toUpperCase() + " to fix" });
+    btn.onclick = () => askToFix(s, [p], btn, status);
+    const acts = el("div", { className: "row facts" }, [btn]);
+    if (p.slug) {
+      const go = el("button", { className: "ghbtn", textContent: "Show the fact" });
+      go.onclick = () => { S.openFile = "fact:" + p.slug; S.fileQuery = ""; S.view = "brain"; render(); };
+      acts.append(go);
+    }
+    acts.append(status);
+    text.append(acts);
+    body.append(row);
   }
 
   /* The portal's one power over an agent is that it acts as the human, so "fix this" is an
@@ -95,27 +154,96 @@ export function viewHealth(m) {
   const all = el("button", { className: "ghbtn primary",
     textContent: "Ask " + s.handle.toUpperCase() + " to fix all " + s.problems.length });
   all.onclick = () => askToFix(s, s.problems, all, allStatus);
-  m.append(el("div", { className: "row", style: "margin-bottom:12px" }, [all, allStatus]));
+  actions.append(all, allStatus);
+}
 
-  for (const p of s.problems) {
-    const d = el("div", { className: "card" });
-    d.innerHTML = '<div class="row"><span class="' + (p.level === "error" ? "err" : "warn") +
-      '" style="font:11px var(--mono)">' + p.level + "</span>" +
-      '<span class="pill">' + esc(p.rule) + "</span>" +
-      (p.line ? '<span class="meta">INDEX.md:' + p.line + "</span>" : "") + "</div>" +
-      '<p style="margin:8px 0 0">' + inline(p.message) + "</p>";
+/**
+ * One finding, in the shape every section uses: a level marker, what is wrong, and where.
+ *
+ * The marker carries the severity so the words do not have to. A row that opens with the word
+ * "warning" spends its first line saying something a glyph already said.
+ */
+function finding(level, title, tags) {
+  const row = el("div", { className: "check " + (level === "error" ? "fail" : "warn") });
+  row.append(el("span", { className: "checkmark", textContent: level === "error" ? "✗" : "!" }));
+  const body = el("div");
+  // Plain text where there is any, markup only where a message carries its own.
+  const head = el("b");
+  if (title.html) head.innerHTML = title.html;
+  else head.textContent = title.text;
+  body.append(head);
+  for (const t of tags.filter(Boolean)) {
+    body.append(el("span", { className: "meta", textContent: t }));
+  }
+  row.append(body);
+  // Everything else goes in the second column, under the text rather than under the marker.
+  return { row, body };
+}
 
-    const status = el("span", { className: "meta" });
-    const btn = el("button", { className: "ghbtn", textContent: "Ask " + s.handle.toUpperCase() + " to fix" });
-    btn.onclick = () => askToFix(s, [p], btn, status);
-    const actions = el("div", { className: "row fix" }, [btn, status]);
-    if (p.slug) {
-      const go = el("button", { className: "ghbtn", textContent: "Show the fact" });
-      go.onclick = () => { S.openFile = "fact:" + p.slug; S.fileQuery = ""; S.view = "brain"; render(); };
+/**
+ * Everything the audit says about this staff member's prompts, over every kind of run.
+ *
+ * Fetched rather than read off the export: composing three prompts and diffing their layers is
+ * not something to do on every page paint of every screen, and this is the only one that asks.
+ */
+async function promptProblems({ body, say }, s) {
+  say("…");
+  body.append(el("p", { className: "hnote", textContent: "Composing the prompts…" }));
+  let data;
+  try {
+    data = await (
+      await fetch("/api/promptaudit?staff=" + encodeURIComponent(s.handle), { cache: "no-store" })
+    ).json();
+  } catch (e) {
+    say("?");
+    body.replaceChildren(el("p", { className: "hnote err", textContent: e.message }));
+    return;
+  }
+
+  const problems = data.problems ?? [];
+  const errors = data.errors ?? [];
+  say(problems.length ? String(problems.length) : errors.length ? "?" : "clean");
+  body.replaceChildren(
+    el("p", {
+      className: "hnote",
+      textContent: problems.length
+        ? "What the audit can be sure about, over every kind of run this staff member has."
+        : "Nothing the audit can fault in what this staff member is sent.",
+    }),
+  );
+  for (const bad of errors) {
+    body.append(
+      el("div", { className: "notice", textContent:
+        "The " + bad.kind + " prompt does not compose: " + bad.error }),
+    );
+  }
+  if (!problems.length) return;
+
+  /* Worst first, and each one carrying the sentence that fixes it. Knowing there is a problem
+     is the hard part; writing the paragraph that asks for the change is not. */
+  const rank = { error: 0, warning: 1, note: 2 };
+  for (const p of [...problems].sort((a, b) => (rank[a.level] ?? 3) - (rank[b.level] ?? 3))) {
+    const { row, body: text } = finding(p.level, { text: p.title }, [(p.kinds ?? []).join(", ")]);
+    text.append(el("p", { textContent: p.detail }));
+
+    const note = el("span", { className: "meta" });
+    const fix = el("button", { className: "ghbtn", textContent: "Copy a prompt to fix this" });
+    fix.onclick = () => copyAmendBrief(s.handle, p.kind, p.want, fix, note);
+    const actions = el("div", { className: "row facts" }, [fix]);
+    if (p.path) {
+      const go = el("button", { className: "ghbtn", textContent: "Open the file" });
+      // The file is a layer of a prompt, so it opens where prompts are read.
+      go.onclick = () => {
+        S.promptKind = p.kind;
+        S.promptOpen = p.path;
+        S.view = "prompt";
+        render();
+      };
       actions.append(go);
     }
-    d.append(actions);
-    m.append(d);
+    actions.append(note);
+    text.append(actions);
+    body.append(row);
   }
 }