@nanocollective/roster 0.1.0-alpha.54 → 0.1.0-alpha.55

package/docs/portal.md

@@ -18,6 +18,19 @@ Keep the repos checked out beside each other, in the same shape the runner uses.
 
 ## The sidebar
 
+**Search everything** with ⌘K (Ctrl+K off a Mac), from anywhere, or the Search field at the
+top of the sidebar, which opens the same dialog. It searches as you type, across:
+
+- issues and pull requests, open and recently closed, which open in the side sheet
+- staff, every fact in every memory, and every note and file in every brain
+- the org files, the docs (every page, not only titles), and runs from the last 30 days, which
+  open their log on GitHub
+- the screens themselves, so it doubles as a way to get anywhere
+
+Every word has to match; a title that starts with one ranks first. Arrow keys move, Enter opens,
+Escape closes. Everything except the docs is searched in the page, from what the portal has
+already read.
+
 Anything that asks before it acts (a merge, a push, a hire, a retire, a paid run) asks in the
 page's own dialog, never the browser's `confirm()`, which blocks the whole tab.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanocollective/roster",
-  "version": "0.1.0-alpha.54",
+  "version": "0.1.0-alpha.55",
   "description": "An agent-run org, powered by GitHub. Scaffold AI staff members whose brain is a repo.",
   "type": "module",
   "bin": {

package/templates/portal/css/search.css

@@ -0,0 +1,48 @@
+/* Search everything: the ⌘K dialog and the sidebar field that opens it. */
+
+.sidesearch{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
+      margin:0 0 10px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);
+      background:var(--bg-elev);color:var(--ink-faint);font:13px var(--sans);cursor:pointer;text-align:left}
+.sidesearch:hover{border-color:var(--border-strong);color:var(--ink-dim)}
+.sidesearch:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+.sidesearch .ic{--ic:14px;flex:none}
+.sidesearch .t{flex:1}
+.sidesearch kbd{font:500 10.5px var(--mono);border:1px solid var(--border-strong);border-radius:5px;
+      padding:0 5px;color:var(--ink-faint)}
+
+dialog.palette{position:fixed;margin:12vh auto auto;padding:0;width:min(640px,calc(100vw - 32px));
+      max-height:min(560px,76vh);display:flex;flex-direction:column;overflow:hidden;
+      border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-elev);
+      color:var(--ink);box-shadow:var(--shadow-lg)}
+dialog.palette:not([open]){display:none}
+dialog.palette[open]{animation:dlgin .16s var(--ease)}
+dialog.palette::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
+@media (prefers-reduced-motion:reduce){dialog.palette[open]{animation:none}}
+
+.palhead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
+.palhead .ic{--ic:18px;color:var(--ink-faint);flex:none}
+/* Scoped under the dialog to outrank the portal's own input[type=search] rules, which draw a
+   box and a focus ring that belong in a form, not in a search bar that is the whole header. */
+dialog.palette .palinput,dialog.palette .palinput:hover,dialog.palette .palinput:focus{
+      flex:1;width:auto;border:0;outline:none;box-shadow:none;background:none;padding:0;
+      color:var(--ink);font:16px/1.4 var(--sans)}
+.palinput::-webkit-search-cancel-button{display:none}
+
+.palresults{overflow-y:auto;padding:6px;flex:1}
+.palgroup{font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
+      color:var(--ink-faint);padding:10px 10px 4px}
+.palrow{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;
+      padding:8px 10px;border-radius:8px;cursor:pointer}
+.palrow[aria-selected="true"]{background:var(--sel)}
+.palrow .ic{--ic:15px;color:var(--ink-dim);flex:none}
+.paltext{display:flex;flex-direction:column;min-width:0}
+.paltitle{font:500 13.5px/1.35 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.paltitle mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px}
+.palsub{font:12px/1.4 var(--sans);color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.palempty{color:var(--ink-faint);font-size:13px;padding:22px 12px;margin:0;text-align:center}
+
+.palfoot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--line);
+      font:11.5px var(--sans);color:var(--ink-faint)}
+.palfoot kbd{font:500 10.5px var(--mono);border:1px solid var(--border-strong);border-radius:4px;
+      padding:0 4px;margin-right:3px}
+@media (max-width:640px){.palfoot{display:none}dialog.palette{margin-top:8vh}}

package/templates/portal/index.html

@@ -14,6 +14,7 @@
 <link rel="stylesheet" href="/assets/css/brain.css">
 <link rel="stylesheet" href="/assets/css/inbox.css">
 <link rel="stylesheet" href="/assets/css/home.css">
+<link rel="stylesheet" href="/assets/css/search.css">
 <link rel="stylesheet" href="/assets/css/graph.css">
 <link rel="stylesheet" href="/assets/css/diff.css">
 <link rel="stylesheet" href="/assets/css/health.css">
@@ -28,6 +29,10 @@
       <span class="sync" data-icon="refresh"></span><span id="loaded">data now</span>
     </button>
 
+    <button class="sidesearch" id="sidesearch" title="Search everything (⌘K)">
+      <span class="ic" data-icon="search"></span><span class="t">Search</span><kbd id="searchkey">⌘K</kbd>
+    </button>
+
     <!-- Only while something is left to set up; app.js decides. -->
     <button class="nav top" id="setupnav" data-view="setup" hidden>
       <span class="ic" data-icon="task-done"></span> Getting started

package/templates/portal/js/app.js

@@ -20,6 +20,7 @@ import { viewChanged } from "./views/changed.js";
 import { viewDocs } from "./views/docs.js";
 import { viewGraph } from "./views/graph.js";
 import { viewHealth } from "./views/health.js";
+import { openSearch } from "./search.js";
 import { viewHome } from "./views/home.js";
 import { viewInbox, viewPrs } from "./views/inbox.js";
 import { viewOrg } from "./views/org.js";
@@ -102,7 +103,7 @@ export async function boot() {
     /* Every one of these reads a tenant, so during setup they answer 409 and the sidebar is a
        row of four dead ends beside an empty Staff heading. There is one thing to do on this
        screen; the navigation comes back with the org. */
-    for (const el of document.querySelectorAll("#homenav, #inboxnav, #runsnav, #orgnav, #staffnav, #docsnav, #refreshall, .sect, #stafflist")) {
+    for (const el of document.querySelectorAll("#sidesearch, #homenav, #inboxnav, #runsnav, #orgnav, #staffnav, #docsnav, #refreshall, .sect, #stafflist")) {
       el.hidden = true;
     }
     for (const slot of document.querySelectorAll("[data-icon]")) {
@@ -144,6 +145,19 @@ export async function boot() {
   addEventListener("focus", () => {
     if (S.loadedAt && Date.now() - S.loadedAt > 60000) refreshQuietly();
   });
+  /* ⌘K (Ctrl+K off a Mac) opens search from anywhere, even from inside a text box: it is the
+     one shortcut that should never be swallowed by whatever has focus. The sidebar's field
+     opens the same dialog. */
+  addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "k") {
+      e.preventDefault();
+      openSearch();
+    }
+  });
+  const side = $("#sidesearch");
+  if (side) side.onclick = () => openSearch();
+  const key = $("#searchkey");
+  if (key && !/Mac|iPhone|iPad/.test(navigator.platform ?? "")) key.textContent = "Ctrl K";
   addEventListener("keydown", (e) => {
     if (e.key === "r" && !e.metaKey && !e.ctrlKey &&
         !/^(INPUT|TEXTAREA|SELECT)$/.test(e.target?.tagName ?? "")) {

package/templates/portal/js/icons.js

@@ -13,6 +13,10 @@
  */
 
 const PATHS = {
+  "search":
+    "<circle cx=\"11\" cy=\"11\" r=\"8\" /> <path d=\"m21 21-4.3-4.3\" />",
+  "lightbulb":
+    "<path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\" /> <path d=\"M9 18h6\" /> <path d=\"M10 22h4\" />",
   "code":
     "<polyline points=\"16 18 22 12 16 6\" /> <polyline points=\"8 6 2 12 8 18\" />",
   "megaphone":

package/templates/portal/js/search.js

@@ -0,0 +1,366 @@
+/* Search everything: ⌘K, or the search field in the sidebar.
+ *
+ * One dialog over the whole portal: issues and pull requests, staff, every fact and file in
+ * every brain, the org files, the docs, runs, and the screens themselves. All of it except the
+ * docs is already in the page, so it is searched here as you type; the docs are searched on the
+ * server, which reads every page rather than only titles.
+ *
+ * `index()` and `rank()` are plain functions over plain data, so what is found, and in which
+ * order, can be tested without a page. */
+
+import { getOrgLayer, getRuns, searchDocs } from "./api.js";
+import { ago, el } from "./dom.js";
+import { icon, staffIcon } from "./icons.js";
+import { ensureInbox } from "./refresh.js";
+import { go } from "./router.js";
+import { S } from "./state.js";
+import { openThread } from "./views/home.js";
+
+/** The groups, in the order they are shown. */
+const GROUPS = ["Screens", "Staff", "Issues", "Pull requests", "Memory", "Files", "Org", "Runs", "Docs"];
+/** How many of each a query shows; an empty query shows only screens and staff. */
+const PER_GROUP = 5;
+
+const SCREENS = [
+  ["home", "Home", "What needs you, and who is working"],
+  ["inbox", "Trackers", "Every open issue on each tracker"],
+  ["runs", "Runs", "What ran, and what it cost"],
+  ["org", "Org", "The files every staff member reads"],
+  ["staff", "Staff", "Hire, set up, retire"],
+  ["docs", "Docs", "How roster works"],
+];
+const STAFF_SCREENS = [
+  ["brain", "Brain"],
+  ["prompt", "Prompt"],
+  ["graph", "Graph"],
+  ["changed", "What changed"],
+  ["health", "Health"],
+];
+
+/**
+ * Every searchable thing, as `{ group, title, sub, text, icon, open }`. `text` is what is
+ * matched beyond the title; `open` is what choosing it does.
+ */
+export function index(state) {
+  const out = [];
+  const staff = state.data?.staff ?? [];
+
+  for (const [view, title, sub] of SCREENS) {
+    out.push({ group: "Screens", title, sub, text: view, icon: "square", open: () => go({ view }) });
+  }
+  for (const s of staff) {
+    for (const [view, label] of STAFF_SCREENS) {
+      out.push({
+        group: "Screens",
+        title: `${s.name} · ${label}`,
+        sub: s.handle,
+        text: `${s.handle} ${label}`,
+        icon: staffIcon(s),
+        open: () => go({ view, staffHandle: s.handle }),
+      });
+    }
+  }
+
+  for (const s of staff) {
+    out.push({
+      group: "Staff",
+      title: s.name,
+      sub: [s.handle, s.brain].filter(Boolean).join(" · "),
+      text: `${s.handle} ${s.brain ?? ""} ${s.mention ?? ""}`,
+      icon: staffIcon(s),
+      open: () => go({ view: "brain", staffHandle: s.handle, openFile: "mem:*", fileQuery: "" }),
+    });
+
+    for (const f of s.facts ?? []) {
+      out.push({
+        group: "Memory",
+        title: f.statement,
+        sub: `${s.name} · ${f.section} · ${f.slug}`,
+        text: `${f.slug} ${f.consequence ?? ""} ${f.section}`,
+        icon: "lightbulb",
+        open: () =>
+          go({ view: "brain", staffHandle: s.handle, openFile: "fact:" + f.slug, fileQuery: "" }),
+      });
+    }
+
+    for (const surface of s.surfaces ?? []) {
+      for (const file of surface.files ?? []) {
+        const note = /(^|\/)notes\//.test(file.path);
+        out.push({
+          group: note ? "Memory" : "Files",
+          title: file.path.split("/").pop(),
+          sub: `${s.name} · ${file.path}`,
+          text: file.path,
+          icon: "file",
+          open: () => go({ view: "brain", staffHandle: s.handle, openFile: file.path, fileQuery: "" }),
+        });
+      }
+    }
+  }
+
+  const brains = new Map(staff.filter((s) => s.brain).map((s) => [s.brain, s]));
+  for (const item of state.inbox?.items ?? []) {
+    const owner = brains.get(item.repo);
+    const repo = item.repo.split("/")[1] ?? item.repo;
+    const where = owner ? owner.name : repo;
+    const open = item.state === "OPEN";
+    out.push({
+      group: item.kind === "pr" ? "Pull requests" : "Issues",
+      title: item.title,
+      sub: `${where} · #${item.number} · ${open ? "open" : item.state.toLowerCase()} · ${ago(item.updatedAt)}`,
+      text: `#${item.number} ${repo}#${item.number} ${(item.labels ?? []).join(" ")} ${item.author}`,
+      icon: item.kind === "pr" ? (item.state === "MERGED" ? "merged" : "review") : open ? "issue-open" : "issue-closed",
+      // Open work first among equal matches: it is usually what is being looked for.
+      weight: open ? 1 : 0,
+      open: () => openThread(item),
+    });
+  }
+
+  for (const f of state.orgFiles ?? []) {
+    out.push({
+      group: "Org",
+      title: f.path.split("/").pop(),
+      sub: f.path,
+      text: f.path,
+      icon: "file",
+      open: () => go({ view: "org", orgOpen: f.path }),
+    });
+  }
+
+  for (const s of state.runs?.staff ?? []) {
+    for (const r of s.runs ?? []) {
+      const word = r.record?.outcome ?? r.conclusion ?? r.status;
+      out.push({
+        group: "Runs",
+        title: `${s.name} · ${r.kind} run · ${word}`,
+        sub: `${ago(r.createdAt)} · opens the log on GitHub`,
+        text: `${s.handle} ${r.kind} ${word} ${r.id}`,
+        icon: "play",
+        open: () => window.open(r.url, "_blank", "noopener"),
+      });
+    }
+  }
+
+  return out;
+}
+
+/**
+ * The best matches for a query, grouped. Every word has to appear somewhere; a match in the
+ * title outranks one elsewhere, and the start of the title outranks the middle of it.
+ */
+export function rank(entries, query) {
+  const words = String(query ?? "").toLowerCase().split(/\s+/).filter(Boolean);
+  const groups = new Map(GROUPS.map((g) => [g, []]));
+  if (!words.length) {
+    for (const e of entries) {
+      if (e.group === "Screens" || e.group === "Staff") groups.get(e.group).push({ e, score: 0 });
+    }
+  } else {
+    for (const e of entries) {
+      const title = e.title.toLowerCase();
+      const all = `${title} ${String(e.sub ?? "").toLowerCase()} ${String(e.text ?? "").toLowerCase()}`;
+      if (!words.every((w) => all.includes(w))) continue;
+      let score = e.weight ?? 0;
+      for (const w of words) {
+        if (title.startsWith(w)) score += 6;
+        else if (new RegExp(`\\b${w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`).test(title)) score += 4;
+        else if (title.includes(w)) score += 2;
+      }
+      groups.get(e.group)?.push({ e, score });
+    }
+  }
+  const out = [];
+  for (const [group, list] of groups) {
+    if (!list.length) continue;
+    list.sort((a, b) => b.score - a.score);
+    const shown = list.slice(0, words.length ? PER_GROUP : 40);
+    out.push({ group, entries: shown.map((x) => x.e), more: list.length - shown.length });
+  }
+  return out;
+}
+
+/* --------------------------------- the dialog --------------------------------- */
+
+let current = null;
+
+/** Open the search dialog, or focus it when it is already open. */
+export function openSearch() {
+  if (current) {
+    current.input.focus();
+    return;
+  }
+  const box = document.createElement("dialog");
+  if (typeof box.showModal !== "function") return;
+  box.className = "palette";
+
+  const input = el("input", {
+    type: "search",
+    className: "palinput",
+    placeholder: "Search issues, pull requests, memory, files, runs and docs",
+    autocomplete: "off",
+    spellcheck: false,
+  });
+  const results = el("div", { className: "palresults", role: "listbox" });
+  const foot = el("div", { className: "palfoot" }, [
+    el("span", { innerHTML: "<kbd>↑</kbd><kbd>↓</kbd> move" }),
+    el("span", { innerHTML: "<kbd>↵</kbd> open" }),
+    el("span", { innerHTML: "<kbd>esc</kbd> close" }),
+  ]);
+  box.append(el("div", { className: "palhead" }, [icon("search", "ic"), input]), results, foot);
+  document.body.append(box);
+  box.showModal();
+  input.focus();
+
+  let entries = index(S);
+  let flat = [];
+  let at = 0;
+  let docs = [];
+  let docsFor = "";
+  let docTimer = null;
+
+  const close = () => {
+    if (!current) return;
+    current = null;
+    clearTimeout(docTimer);
+    box.close();
+    box.remove();
+  };
+  current = { input, close };
+  box.addEventListener("close", () => {
+    current = null;
+    box.remove();
+  });
+  box.addEventListener("click", (e) => {
+    if (e.target === box) close();
+  });
+
+  const choose = (e) => {
+    close();
+    e.open();
+  };
+
+  const paint = () => {
+    const q = input.value.trim();
+    const grouped = rank(entries, q);
+    if (q && docsFor === q && docs.length) {
+      grouped.push({
+        group: "Docs",
+        entries: docs.slice(0, PER_GROUP).map((h) => ({
+          title: h.title,
+          sub: h.matches?.[0]?.text ?? h.file,
+          icon: "book-open",
+          open: () => go({ view: "docs", openDoc: h.file, docQuery: q }),
+        })),
+        more: Math.max(0, docs.length - PER_GROUP),
+      });
+    }
+    flat = grouped.flatMap((g) => g.entries);
+    at = Math.min(at, Math.max(0, flat.length - 1));
+    results.replaceChildren();
+    if (!flat.length) {
+      results.append(el("p", { className: "palempty", textContent: q ? "Nothing matches “" + q + "”." : "" }));
+      return;
+    }
+    let i = 0;
+    for (const g of grouped) {
+      results.append(
+        el("div", { className: "palgroup", textContent: g.group + (g.more ? ` · ${g.more} more` : "") }),
+      );
+      for (const e of g.entries) {
+        const n = i++;
+        const row = el("button", { className: "palrow", role: "option" }, [
+          icon(e.icon ?? "file", "ic"),
+          el("span", { className: "paltext" }, [
+            el("span", { className: "paltitle", innerHTML: highlight(e.title, q) }),
+            el("span", { className: "palsub", textContent: e.sub ?? "" }),
+          ]),
+        ]);
+        row.setAttribute("aria-selected", String(n === at));
+        row.onmouseenter = () => {
+          at = n;
+          mark();
+        };
+        row.onclick = () => choose(e);
+        results.append(row);
+      }
+    }
+    mark();
+  };
+
+  const mark = () => {
+    const rows = results.querySelectorAll(".palrow");
+    rows.forEach((r, n) => r.setAttribute("aria-selected", String(n === at)));
+    rows[at]?.scrollIntoView({ block: "nearest" });
+  };
+
+  input.addEventListener("input", () => {
+    at = 0;
+    paint();
+    const q = input.value.trim();
+    clearTimeout(docTimer);
+    if (q.length < 2) return;
+    docTimer = setTimeout(() => {
+      searchDocs(q)
+        .then((r) => {
+          docs = r.hits ?? [];
+          docsFor = q;
+          if (current && input.value.trim() === q) paint();
+        })
+        .catch(() => {});
+    }, 150);
+  });
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      at = Math.min(at + 1, flat.length - 1);
+      mark();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      at = Math.max(at - 1, 0);
+      mark();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (flat[at]) choose(flat[at]);
+    }
+  });
+
+  paint();
+
+  /* What is not in the page yet is fetched once and folded in as it lands: the issues, the org
+     files and the runs. The dialog is usable straight away with whatever is already here. */
+  const refill = () => {
+    if (!current) return;
+    entries = index(S);
+    paint();
+  };
+  if (!S.inbox) ensureInbox(false).then(refill).catch(() => {});
+  if (!S.orgFiles) {
+    getOrgLayer()
+      .then((r) => {
+        S.orgFiles = r.files ?? [];
+        refill();
+      })
+      .catch(() => {});
+  }
+  if (!S.runs) {
+    getRuns(false)
+      .then((r) => {
+        S.runs = r;
+        refill();
+      })
+      .catch(() => {});
+  }
+}
+
+/** The title with each query word marked, escaped first. */
+function highlight(title, q) {
+  let html = String(title ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+  for (const w of String(q ?? "").toLowerCase().split(/\s+/).filter((x) => x.length > 1)) {
+    const re = new RegExp(`(${w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "ig");
+    html = html.replace(re, "<mark>$1</mark>");
+  }
+  return html;
+}

package/templates/portal/js/views/home.js

@@ -541,7 +541,7 @@ function repaintInPlace() {
  * repaints Home, since a reply or a close there changes what belongs where. Where there is no
  * <dialog> (the test shim), it falls back to the thread on Trackers.
  */
-function openThread(item) {
+export function openThread(item) {
   const ref = { repo: item.repo, number: item.number, kind: item.kind };
   const body = el("div");
   const x = el("button", { className: "iconbtn", title: "Close (Esc)", ariaLabel: "Close" });