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

package/templates/portal/js/mention.js

@@ -0,0 +1,264 @@
+/* Typing `@` should offer the org.
+ *
+ * A mention is not decoration here: a staff member's workflow gates on their `@handle`, so a
+ * reply that misspells it is a reply nobody is woken by, and a reply that spells a bot's login
+ * where a handle belongs looks right and does nothing. Both failures are silent, which is the
+ * kind this portal exists to stop. The roster is small and it is already on the page, so it is
+ * offered rather than remembered.
+ *
+ * Everyone is here, and each row says what mentioning it actually does: a staff handle wakes
+ * them, a human gets a notification, an App gets neither and is listed so you can recognise the
+ * name rather than address it.
+ */
+
+import { el, esc } from "./dom.js";
+import { humansOf, S } from "./state.js";
+
+/**
+ * Everyone a mention actually reaches, in the order they are worth offering.
+ *
+ * Staff first: waking one is the reason to type `@` in this app at all. Then the humans, who
+ * get a notification.
+ *
+ * **The Apps are deliberately not here.** `@some-org-cto` is a login, not an inbox: GitHub
+ * delivers nothing for mentioning a GitHub App, and an agent wakes on its own handle and not
+ * on the name of the identity it posts as. A list you pick from should contain only things
+ * that do something; an entry that says "notifies nobody" is a trap with a label on it, and it
+ * pushed the entries that work off the bottom of the box.
+ *
+ * Nothing here knows what any of these people are called. Every row comes off `org.yaml` and
+ * the manifests, so an org with a head of ops and a designer gets a head of ops and a designer.
+ */
+export function mentionable() {
+  const out = [];
+
+  for (const s of S.data?.staff ?? []) {
+    const at = String(s.mention ?? "@" + s.handle);
+    out.push({
+      text: at,
+      label: s.name ?? s.handle,
+      note: "wakes them, usually within a minute",
+      kind: "staff",
+      terms: [at.replace(/^@/, ""), s.handle, s.name ?? ""],
+    });
+  }
+
+  for (const h of humansOf()) {
+    if (!h.github) continue;
+    out.push({
+      text: "@" + h.github,
+      label: h.name ?? h.github,
+      note: h.role ? h.role + " · notifies them" : "notifies them",
+      kind: "human",
+      terms: [h.github, h.name ?? ""],
+    });
+  }
+
+  return out;
+}
+
+/** What is being typed after an `@`, or null. Only at a word boundary: an email is not a mention. */
+export function queryAt(text, caret) {
+  const before = String(text ?? "").slice(0, caret);
+  const m = /(?:^|[\s(<[{>,;:"'`])@([A-Za-z0-9][\w.-]*)?$/.exec(before);
+  if (!m) return null;
+  const query = m[1] ?? "";
+  return { query, start: caret - query.length - 1 };
+}
+
+/** The matches for a query, best first. Prefix beats substring; order beats neither. */
+export function matches(query, all = mentionable()) {
+  const q = query.toLowerCase();
+  if (!q) return all;
+  const rank = (c) => {
+    const terms = c.terms.map((t) => String(t).toLowerCase()).filter(Boolean);
+    if (terms.some((t) => t.startsWith(q))) return 0;
+    if (terms.some((t) => t.includes(q))) return 1;
+    return 2;
+  };
+  return all
+    .map((c, i) => ({ c, i, r: rank(c) }))
+    .filter((x) => x.r < 2)
+    .sort((a, b) => a.r - b.r || a.i - b.i)
+    .map((x) => x.c);
+}
+
+/**
+ * Wire a textarea up to the list.
+ *
+ * Attaching adds listeners and nothing else: the popup is built the first time somebody types
+ * an `@`, so a screen that renders fifty boxes pays for none of them, and a DOM without
+ * `getComputedStyle` (the test shim) never reaches the part that needs one.
+ */
+export function attachMentions(ta) {
+  if (!ta?.addEventListener) return;
+
+  let pop = null;
+  let items = [];
+  let at = 0;
+  let anchor = null;
+
+  const close = () => {
+    if (pop) pop.hidden = true;
+    anchor = null;
+  };
+
+  const open = (found, q) => {
+    items = found;
+    at = 0;
+    anchor = q;
+    if (!pop) {
+      pop = el("div", { className: "mentions" });
+      pop.setAttribute("role", "listbox");
+      // mousedown, not click: the textarea must not lose the caret before the pick lands.
+      pop.addEventListener("mousedown", (e) => {
+        const row = e.target.closest?.("[data-at]");
+        if (!row) return;
+        e.preventDefault();
+        pick(items[Number(row.dataset.at)]);
+      });
+      host(ta).append(pop);
+    }
+    pop.hidden = false;
+    paint();
+    place();
+  };
+
+  const paint = () => {
+    pop.replaceChildren(
+      ...items.map((c, i) => {
+        const row = el("button", { className: "mrow " + c.kind, type: "button" });
+        row.dataset.at = String(i);
+        row.setAttribute("aria-selected", String(i === at));
+        row.innerHTML =
+          '<span class="mat">' + esc(c.text) + "</span>" +
+          '<span class="mname">' + esc(c.label) + "</span>" +
+          '<span class="mnote">' + esc(c.note) + "</span>";
+        return row;
+      }),
+    );
+  };
+
+  const move = (by) => {
+    at = (at + by + items.length) % items.length;
+    paint();
+    pop.children[at]?.scrollIntoView?.({ block: "nearest" });
+  };
+
+  const pick = (choice) => {
+    if (!choice || !anchor) return;
+    const caret = ta.selectionStart ?? ta.value.length;
+    const after = ta.value.slice(caret);
+    // A space, unless there already is one: nobody wants to type it and nobody wants two.
+    const tail = /^\s/.test(after) ? "" : " ";
+    ta.value = ta.value.slice(0, anchor.start) + choice.text + tail + after;
+    const to = anchor.start + choice.text.length + tail.length;
+    ta.setSelectionRange?.(to, to);
+    close();
+    ta.focus?.();
+    // So the box's own listeners — the draft, the grow, the "this is what wakes them" line —
+    // see the text that is now in it.
+    if (typeof Event === "function") ta.dispatchEvent(new Event("input", { bubbles: true }));
+  };
+
+  const look = () => {
+    const caret = ta.selectionStart ?? 0;
+    const q = queryAt(ta.value, caret);
+    if (!q) return close();
+    const found = matches(q.query);
+    if (!found.length) return close();
+    open(found, q);
+  };
+
+  ta.addEventListener("input", look);
+  ta.addEventListener("click", close);
+  ta.addEventListener("blur", close);
+  ta.addEventListener("keydown", (e) => {
+    if (!anchor || !pop || pop.hidden) return;
+    if (e.key === "ArrowDown") { e.preventDefault(); move(1); return; }
+    if (e.key === "ArrowUp") { e.preventDefault(); move(-1); return; }
+    if (e.key === "Enter" || e.key === "Tab") {
+      // ⌘⏎ is "send", and it means that whether or not this list is open.
+      if (e.metaKey || e.ctrlKey) return;
+      e.preventDefault();
+      // Nothing else on the page may see it: in a dialog, a stray Enter submits.
+      e.stopPropagation();
+      pick(items[at]);
+      return;
+    }
+    if (e.key === "Escape") {
+      // Dismiss the list, not the dialog around it.
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+    }
+  });
+
+  /** Where the popup lives: the first positioned ancestor, so a modal keeps it on top. */
+  function host(node) {
+    const parent = node.parentElement ?? node.parentNode;
+    if (!parent) return node;
+    if (typeof getComputedStyle === "function" && getComputedStyle(parent).position === "static") {
+      parent.style.position = "relative";
+    }
+    return parent;
+  }
+
+  /**
+   * Under the caret, not under the box.
+   *
+   * Measured with a mirror: a div with the textarea's own metrics, holding the text up to the
+   * caret and a marker after it. There is no other way to ask a textarea where its caret is.
+   * If any of that is unavailable, it falls back to the bottom of the box, which is worse but
+   * never wrong.
+   */
+  function place() {
+    const under = ta.offsetTop + ta.offsetHeight;
+    let top = under;
+    let left = ta.offsetLeft;
+    let line = 18;
+    if (typeof getComputedStyle === "function" && ta.parentElement) {
+      const style = getComputedStyle(ta);
+      const mirror = el("div", { className: "mmirror" });
+      for (const prop of [
+        "fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing", "textTransform",
+        "lineHeight", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+        "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
+      ]) {
+        mirror.style[prop] = style[prop];
+      }
+      mirror.style.width = ta.offsetWidth + "px";
+      mirror.style.left = ta.offsetLeft + "px";
+      mirror.style.top = ta.offsetTop + "px";
+      mirror.textContent = ta.value.slice(0, ta.selectionStart ?? 0);
+      const mark = el("span", { textContent: "​" });
+      mirror.append(mark);
+      ta.parentElement.append(mirror);
+      line = Number.parseFloat(style.lineHeight) || 18;
+      top = ta.offsetTop + mark.offsetTop - (ta.scrollTop ?? 0) + line;
+      left = ta.offsetLeft + mark.offsetLeft;
+      mirror.remove();
+      // A caret near the bottom of a long box would put the list off the card.
+      if (top > under) top = under;
+    }
+    pop.style.top = Math.round(top) + "px";
+    pop.style.left = Math.round(left) + "px";
+
+    /* Both edges, measured after placing, because until it is placed it has no size.
+       A `<dialog>` scrolls its own box, so anything hanging outside it is not merely ugly:
+       it is clipped, and the entries you were about to pick are the ones that go missing. */
+    const host = pop.offsetParent ?? pop.parentElement;
+    const wide = host?.clientWidth ?? 0;
+    if (wide && left + pop.offsetWidth > wide - 8) {
+      pop.style.left = Math.max(0, Math.round(wide - pop.offsetWidth - 8)) + "px";
+    }
+    const tall = host?.clientHeight ?? 0;
+    if (tall && top + pop.offsetHeight > tall - 8) {
+      // Above the line being typed if it fits there, which is where an editor would put it.
+      // Otherwise as low as it can sit and still be whole.
+      const above = top - line - pop.offsetHeight;
+      pop.style.top =
+        Math.round(above >= 0 ? above : Math.max(0, tall - pop.offsetHeight - 8)) + "px";
+    }
+  }
+}

package/templates/portal/js/refresh.js

@@ -7,10 +7,75 @@
  * Its own module because both the shell and the inbox need it, and importing the shell from
  * a view would make the module graph a ring. */
 
-import { getOrg, getSync } from "./api.js";
+import { getInbox, getOrg, getSync } from "./api.js";
 import { $, ago, el, esc } from "./dom.js";
 import { render } from "./router.js";
-import { S } from "./state.js";
+import { openCount, openPrCount, S } from "./state.js";
+
+/**
+ * The inbox, fetched at most once at a time.
+ *
+ * Two things want it the moment the page opens: the sidebar, which counts what is waiting on
+ * you, and the Inbox screen, if that is where the URL landed. Both used to ask separately, and
+ * the second one paid a second round trip through every repo on GitHub to learn what the first
+ * was already finding out.
+ *
+ * So the request is shared. `force` always goes to GitHub — it is the refresh button — and
+ * everything else takes whatever is in flight or already loaded.
+ */
+let inflight = null;
+
+export function ensureInbox(force) {
+  if (!force && S.inbox) return Promise.resolve(S.inbox);
+  if (!force && inflight) return inflight;
+  const asked = getInbox(force)
+    .then((data) => {
+      S.inbox = data;
+      if (inflight === asked) inflight = null;
+      return data;
+    })
+    .catch((err) => {
+      if (inflight === asked) inflight = null;
+      throw err;
+    });
+  inflight = asked;
+  return asked;
+}
+
+/**
+ * The two sidebar counts, wherever they are asked for.
+ *
+ * They live here rather than on the Inbox screen because they are the shell's, and because the
+ * whole point of this pass is that they are right before anybody has opened that screen. While
+ * the first fetch is out they show a placeholder rather than nothing: an empty badge reads as
+ * "zero", and zero is a different claim from "still counting".
+ */
+export function stampCounts() {
+  const waiting = !S.inbox;
+  for (const [sel, n] of [
+    ["#inboxcount", openCount],
+    ["#prcount", openPrCount],
+  ]) {
+    const slot = document.querySelector(sel);
+    if (!slot) continue;
+    slot.textContent = waiting ? "" : String(n());
+    slot.classList.toggle("wait", waiting);
+  }
+}
+
+/**
+ * Count what is waiting on you without opening the screen that lists it.
+ *
+ * The badges used to fill in only once something else caused a render with an inbox loaded,
+ * which in practice meant "after you visit the Inbox". A sidebar that says nothing until you
+ * look at it is not a sidebar.
+ */
+export function countInBackground() {
+  stampCounts();
+  return ensureInbox(false)
+    .then(stampCounts)
+    .catch(() => stampCounts());
+}
 
 export async function refreshAll(soft) {
   const bar = $("#refreshall");
@@ -21,14 +86,54 @@ export async function refreshAll(soft) {
     S.sync = await getSync();
     S.data = await getOrg();
     S.inbox = null; // the inbox re-fetches itself on next paint
+    inflight = null;
     S.loadedAt = new Date();
     if (!soft) render();
     stampLoaded();
+    // The badges are now claiming a count from before the sync. Re-ask, and say so meanwhile.
+    countInBackground();
+  } finally {
+    bar?.classList.remove("spin");
+  }
+}
+
+/**
+ * The same thing, for coming back to the tab.
+ *
+ * Asked for by a focus event rather than by a person, so it has to earn every visible effect.
+ * A full refresh drops the inbox, which sends the next paint to GitHub for four seconds and
+ * throws away whatever was on screen — including a half-written issue. Almost every focus
+ * finds nothing new, so this one syncs, looks, and only then does any of that.
+ */
+export async function refreshQuietly() {
+  const bar = $("#refreshall");
+  bar?.classList.add("spin");
+  try {
+    S.sync = await getSync();
+    const data = await getOrg();
+    const changed = shape(data) !== shape(S.data);
+    S.data = data;
+    S.loadedAt = new Date();
+    stampLoaded();
+    // Something landed in a checkout: the inbox is stale too, and the screen should say so.
+    if (changed || (S.sync?.results ?? []).some((r) => r.pulled)) {
+      S.inbox = null;
+      inflight = null;
+      render();
+      countInBackground();
+    }
   } finally {
     bar?.classList.remove("spin");
   }
 }
 
+/** The export minus its timestamp, which is stamped per request and always differs. */
+function shape(data) {
+  if (!data) return "";
+  const { generatedAt, ...rest } = data;
+  return JSON.stringify(rest);
+}
+
 export function stampLoaded() {
   const s = $("#loaded");
   if (s && S.loadedAt) s.textContent = "data " + ago(S.loadedAt.toISOString());
@@ -40,20 +145,45 @@ export function syncNotice() {
   const stuck = (S.sync?.results ?? []).filter((r) => r.skipped || r.error || r.behind > 0);
   if (!stuck.length) return null;
   const d = el("div", { className: "notice" });
-  d.innerHTML = stuck
+  const lines = el("div");
+  lines.innerHTML = stuck
     .map(
       (r) =>
         "<b>" + esc(r.dir) + "</b> " +
         (r.error
           ? "could not sync: " + esc(r.error)
           : r.skipped === "dirty"
-            ? "is " + r.behind + " behind and has uncommitted changes, so it was not pulled"
+            ? "is " + r.behind + " behind and has uncommitted changes, so it was not pulled. " +
+              "Commit or stash them, then pull."
             : r.skipped === "diverged"
-              ? "has diverged (" + r.ahead + " ahead, " + r.behind + " behind)"
+              ? "has diverged (" + r.ahead + " ahead, " + r.behind + " behind). " +
+                "Push or rebase it by hand: a merge is not this button's to make."
               : r.skipped === "no-remote"
                 ? "has no remote"
-                : "is still " + r.behind + " behind"),
+                : "is " + r.behind + " behind"),
     )
     .join("<br>");
+  d.append(lines);
+
+  /* The same conservative pull `roster portal` runs on a refresh, on demand: fetch, and pull
+     only what is clean and fast-forward. It is here because the answer to "commit those and
+     pull" should not be to reload the page and hope. */
+  const status = el("span", { className: "meta" });
+  const pull = el("button", { className: "ghbtn", textContent: "Pull now" });
+  pull.onclick = async () => {
+    pull.disabled = true;
+    status.textContent = "pulling…";
+    status.className = "meta";
+    S.sync = await getSync();
+    const pulled = (S.sync?.results ?? []).filter((r) => r.pulled);
+    // Anything that landed is on disk now, so the export and the inbox are both behind it.
+    if (pulled.length) await refreshAll(false);
+    else {
+      pull.disabled = false;
+      status.textContent = "nothing could be pulled";
+      render();
+    }
+  };
+  d.append(el("div", { className: "row", style: "margin-top:10px" }, [pull, status]));
   return d;
 }

package/templates/portal/js/state.js

@@ -22,7 +22,10 @@ export const VIEWS = [
 export const VIEW_ALIAS = { memory: "brain" };
 
 /** Screens that belong to the org rather than to one staff member. */
-export const ORG_WIDE = new Set(["inbox", "org", "staff", "docs"]);
+export const ORG_WIDE = new Set(["inbox", "prs", "org", "staff", "docs"]);
+
+/** The two screens that read the inbox, and so share its filters and its `?t=` thread. */
+const INBOXY = new Set(["inbox", "prs"]);
 
 export const S = {
   /** The org export from /api/org. Everything the brain screens read comes off this. */
@@ -48,13 +51,16 @@ export const S = {
   changedFilter: "",
 
   openDoc: null,
+  /** The docs search box. Its own field: the Docs screen keeps it while you read a page. */
+  docQuery: "",
 
   /** Which kind of run the Prompt screen is showing, and which layer of it is open. */
   promptKind: "daily",
   promptOpen: null,
 
-  /** Which org-layer file the Org screen is showing. */
+  /** Which org-layer file the Org screen is showing, and what it found on disk. */
   orgOpen: null,
+  orgFiles: [],
 
   inboxFilter: "",
   inboxStaff: "",
@@ -71,8 +77,35 @@ export const S = {
 export const openCount = () =>
   (S.inbox?.items ?? []).filter((i) => i.state === "OPEN").length;
 
+/** The same, for the screen that is only pull requests. */
+export const openPrCount = () =>
+  (S.inbox?.items ?? []).filter((i) => i.state === "OPEN" && i.kind === "pr").length;
+
 export const staff = () => S.data.staff.find((s) => s.handle === S.staffHandle) ?? S.data.staff[0];
 
+/**
+ * Everyone the staff answer to.
+ *
+ * An org can have more than one. `humans` is the list the export sends now; `human` is what a
+ * portal whose server predates the list sends, and falling back to it is what keeps the page
+ * working across the upgrade rather than showing an org with nobody in it.
+ */
+export const humansOf = () =>
+  S.data?.humans?.length ? S.data.humans : S.data?.human?.github ? [S.data.human] : [];
+
+/** Whether a login is one of them. Assignment to any of them is assignment to "us". */
+export const isHuman = (login) =>
+  !!login &&
+  humansOf().some((h) => String(h.github ?? "").toLowerCase() === String(login).toLowerCase());
+
+/** What to call them collectively, for a filter label or a count. */
+export const humanLabel = () => {
+  const humans = humansOf();
+  if (!humans.length) return "you";
+  if (humans.length === 1) return humans[0].name ?? humans[0].github ?? "you";
+  return humans.map((h) => h.name ?? h.github).join(" or ");
+};
+
 export function readHash() {
   const raw = (location.hash || "").replace(/^#\/?/, "");
   if (!raw) return null;
@@ -97,7 +130,14 @@ export function writeHash(push) {
   if (S.applyingHash) return;
   if (!S.staffHandle && !ORG_WIDE.has(S.view)) return;
   const params = new URLSearchParams();
-  const q = S.view === "brain" ? S.fileQuery : S.view === "changed" ? S.changedQuery : S.query;
+  const q =
+    S.view === "brain"
+      ? S.fileQuery
+      : S.view === "changed"
+        ? S.changedQuery
+        : S.view === "docs"
+          ? S.docQuery
+          : S.query;
   if (q) params.set("q", q);
   if (S.view === "brain" && S.openFile) params.set("f", S.openFile);
   if (S.view === "docs" && S.openDoc) params.set("p", S.openDoc);
@@ -106,7 +146,7 @@ export function writeHash(push) {
     if (S.promptKind !== "daily") params.set("k", S.promptKind);
     if (S.promptOpen) params.set("f", S.promptOpen);
   }
-  if (S.view === "inbox") {
+  if (INBOXY.has(S.view)) {
     if (S.inboxFilter) params.set("s", S.inboxFilter);
     if (S.inboxStaff) params.set("w", S.inboxStaff);
     if (S.inboxState) params.set("x", S.inboxState);
@@ -134,6 +174,8 @@ export function applyHash() {
     S.openFile = h.f;
   } else if (S.view === "changed") {
     S.changedQuery = h.q;
+  } else if (S.view === "docs") {
+    S.docQuery = h.q;
   } else {
     S.query = h.q;
   }
@@ -146,7 +188,7 @@ export function applyHash() {
     S.promptOpen = h.f;
   }
 
-  if (S.view === "inbox") {
+  if (INBOXY.has(S.view)) {
     S.inboxFilter = h.s;
     S.inboxStaff = h.w;
     S.inboxState = h.x;

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

@@ -9,8 +9,17 @@ import { el, toClipboard } from "../dom.js";
 
 const LEVEL_ORDER = { fail: 0, warn: 1, ok: 2 };
 
+/**
+ * @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 {
@@ -26,9 +35,10 @@ export async function checklist(host, opts = {}) {
   const bad = findings.filter((f) => f.level !== "ok");
 
   host.replaceChildren();
+  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 +61,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,14 +80,17 @@ 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;
+  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.",