@nanocollective/roster 0.1.0-alpha.1

package/templates/portal/js/dom.js

@@ -0,0 +1,106 @@
+/* The handful of DOM helpers every view uses. No framework: the portal is a few thousand
+   lines of rendering over a JSON export, and a build step would cost more than it saves. */
+
+export const $ = (s, r = document) => r.querySelector(s);
+
+export const el = (t, props = {}, kids = []) => {
+  const n = Object.assign(document.createElement(t), props);
+  for (const k of [].concat(kids)) n.append(k);
+  return n;
+};
+
+export const esc = (s) =>
+  String(s ?? "").replace(
+    /[&<>"]/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c],
+  );
+
+export function ago(iso) {
+  const s = (Date.now() - new Date(iso).getTime()) / 1000;
+  if (s < 90) return "just now";
+  if (s < 5400) return Math.round(s / 60) + "m ago";
+  if (s < 172800) return Math.round(s / 3600) + "h ago";
+  return Math.round(s / 86400) + "d ago";
+}
+
+export const kb = (n) =>
+  n < 1024 ? n + "b" : n < 1048576 ? Math.round(n / 1024) + "k" : (n / 1048576).toFixed(1) + "M";
+
+/** Rows are `.tfile` in a file tree and `.irow` in the inbox. Matching only one of them is
+    how every clicked row stayed selected. */
+export function markCurrent(list, btn) {
+  for (const o of list.querySelectorAll('[aria-current="true"]')) {
+    o.setAttribute("aria-current", "false");
+  }
+  btn.setAttribute("aria-current", "true");
+}
+
+export function store(k, v) {
+  try {
+    return v === undefined ? localStorage.getItem(k) : localStorage.setItem(k, v);
+  } catch {
+    return null;
+  }
+}
+
+/** GitHub's heading slug, for in-page anchors. */
+export function slug(text) {
+  return String(text)
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "")
+    .trim()
+    .replace(/\s+/g, "-");
+}
+
+/**
+ * Size a textarea to its content, so the card it sits in is the only thing that scrolls.
+ *
+ * The border has to be added back: everything here is `border-box`, so `height` sets the
+ * outer box while `scrollHeight` counts the padding and not the border. Two pixels short is
+ * enough to clip the last line.
+ */
+export function grow(ta) {
+  ta.style.height = "auto";
+  const border = (ta.offsetHeight || 0) - (ta.clientHeight || 0);
+  ta.style.height = (ta.scrollHeight || 0) + border + "px";
+}
+
+/**
+ * Put text on the clipboard and say so on the button that asked.
+ *
+ * `navigator.clipboard` needs a secure context, and http://localhost counts, but a portal
+ * bound to a LAN address does not. The textarea fallback is what makes the button work there
+ * rather than failing silently, which for a copy button is the worst outcome: you paste the
+ * last thing you copied and never notice.
+ */
+export async function toClipboard(text, btn, label) {
+  const said = (msg) => {
+    if (!btn) return;
+    btn.textContent = msg;
+    setTimeout(() => {
+      btn.textContent = label;
+    }, 2200);
+  };
+  try {
+    await navigator.clipboard.writeText(text);
+    said("copied · " + Math.round(text.length / 1000) + "k");
+    return true;
+  } catch {
+    /* fall through */
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.append(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    ta.remove();
+    said(ok ? "copied" : "could not copy");
+    return ok;
+  } catch {
+    said("could not copy");
+    return false;
+  }
+}

package/templates/portal/js/icons.js

@@ -0,0 +1,94 @@
+/* Icons.
+ *
+ * Twenty-four Lucide glyphs (lucide.dev, ISC), vendored as path data rather than pulled from
+ * a CDN or a font. The portal is local-first and offline, so an icon that needs the network
+ * is an icon that is sometimes a blank square.
+ *
+ * This replaces the arrow-and-lozenge characters the UI used to draw with. Those were never
+ * icons: they are text, they render differently on every platform, half of them fall back to
+ * a box in the wrong font, and none of them line up with a baseline.
+ *
+ * They inherit `currentColor` and size from the `--ic` custom property, so a caller sets
+ * colour and size in CSS and never touches the SVG.
+ */
+
+const PATHS = {
+  "check":
+    "<path d=\"M20 6 9 17l-5-5\" />",
+  "chevron":
+    "<path d=\"m6 9 6 6 6-6\" />",
+  "close":
+    "<path d=\"M18 6 6 18\" /> <path d=\"m6 6 12 12\" />",
+  "closed":
+    "<circle cx=\"12\" cy=\"12\" r=\"10\" /> <path d=\"m15 9-6 6\" /> <path d=\"m9 9 6 6\" />",
+  "commit":
+    "<circle cx=\"12\" cy=\"12\" r=\"3\" /> <line x1=\"3\" x2=\"9\" y1=\"12\" y2=\"12\" /> <line x1=\"15\" x2=\"21\" y1=\"12\" y2=\"12\" />",
+  "crossref":
+    "<path d=\"M7 7h10v10\" /> <path d=\"M7 17 17 7\" />",
+  "dash":
+    "<path d=\"M5 12h14\" />",
+  "docs":
+    "<path d=\"M12 5v16\" /> <path d=\"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z\" />",
+  "dot":
+    "<circle cx=\"12\" cy=\"12\" r=\"1\" />",
+  "draft":
+    "<circle cx=\"18\" cy=\"18\" r=\"3\" /> <circle cx=\"6\" cy=\"6\" r=\"3\" /> <path d=\"M18 6V5\" /> <path d=\"M18 11v-1\" /> <line x1=\"6\" x2=\"6\" y1=\"9\" y2=\"21\" />",
+  "edit":
+    "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" /> <path d=\"m15 5 4 4\" />",
+  "file":
+    "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /> <path d=\"M14 2v5a1 1 0 0 0 1 1h5\" /> <path d=\"M10 9H8\" /> <path d=\"M16 13H8\" /> <path d=\"M16 17H8\" />",
+  "gallery":
+    "<path d=\"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16\" /> <path d=\"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2\" /> <circle cx=\"13\" cy=\"7\" r=\"1\" fill=\"currentColor\" /> <rect x=\"8\" y=\"2\" width=\"14\" height=\"14\" rx=\"2\" />",
+  "inbox":
+    "<polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\" /> <path d=\"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\" />",
+  "issue-closed":
+    "<circle cx=\"12\" cy=\"12\" r=\"10\" /> <path d=\"m16 9-5.5 5.5L8 12\" />",
+  "issue-open":
+    "<circle cx=\"12\" cy=\"12\" r=\"1\" /> <circle cx=\"12\" cy=\"12\" r=\"10\" />",
+  "label":
+    "<path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\" /> <circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />",
+  "merged":
+    "<circle cx=\"18\" cy=\"18\" r=\"3\" /> <circle cx=\"6\" cy=\"6\" r=\"3\" /> <path d=\"M6 21V9a9 9 0 0 0 9 9\" />",
+  "monitor":
+    "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\" /> <line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\" /> <line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\" />",
+  "moon":
+    "<path d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\" />",
+  "person":
+    "<circle cx=\"12\" cy=\"8\" r=\"5\" /> <path d=\"M20 21a8 8 0 0 0-16 0\" />",
+  "refresh":
+    "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /> <path d=\"M21 3v5h-5\" /> <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /> <path d=\"M8 16H3v5\" />",
+  "rename":
+    "<path d=\"M13 21h8\" /> <path d=\"m15 5 4 4\" /> <path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" />",
+  "reopened":
+    "<path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" /> <path d=\"M3 3v5h5\" />",
+  "review":
+    "<path d=\"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z\" /> <path d=\"M7 11h10\" /> <path d=\"M7 15h6\" /> <path d=\"M7 7h8\" />",
+  "square":
+    "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />",
+  "sun":
+    "<circle cx=\"12\" cy=\"12\" r=\"4\" /> <path d=\"M12 2v2\" /> <path d=\"M12 20v2\" /> <path d=\"m4.93 4.93 1.41 1.41\" /> <path d=\"m17.66 17.66 1.41 1.41\" /> <path d=\"M2 12h2\" /> <path d=\"M20 12h2\" /> <path d=\"m6.34 17.66-1.41 1.41\" /> <path d=\"m19.07 4.93-1.41 1.41\" />",
+  "task-done":
+    "<path d=\"M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344\" /> <path d=\"m9 11 3 3L22 4\" />",
+};
+
+const OPEN =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+  'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"';
+
+/** An icon as an HTML string, for the places that build markup rather than nodes. */
+export function iconHTML(name, cls = "") {
+  const body = PATHS[name];
+  if (!body) return "";
+  return OPEN + ' class="ic' + (cls ? " " + cls : "") + '">' + body + "</svg>";
+}
+
+/** An icon as an element. */
+export function icon(name, cls = "") {
+  const span = document.createElement("span");
+  span.innerHTML = iconHTML(name, cls);
+  return span.firstChild ?? span;
+}
+
+export function hasIcon(name) {
+  return Object.hasOwn(PATHS, name);
+}

package/templates/portal/js/md.js

@@ -0,0 +1,386 @@
+/* Enough markdown for an issue thread and for a file in a brain, escaped first. Not a
+ * general parser: tables, headings, nested lists, code, quotes, rules, images and links,
+ * which is what these actually contain. Tables matter most — the status issues are mostly
+ * tables, and without them the body is a wall of pipes.
+ */
+
+import { esc } from "./dom.js";
+import { iconHTML } from "./icons.js";
+
+/* Who this org is, so `@cto` can be told from `@some-stranger`. Registered once at boot
+   rather than threaded through every call site, because every call site would pass the
+   same value. */
+let PEOPLE = new Map();
+
+/** @param people Map of lowercased handle → { href, known } */
+export function setPeople(people) {
+  PEOPLE = people;
+}
+
+/* Renders the small subset of markdown that appears in a fact line. Deliberately not a
+   markdown parser: escaping first, then a handful of inline forms. */
+export function inline(s) {
+  return esc(s)
+    .replace(/`([^`]+)`/g, '<code style="font:12px var(--mono);color:var(--accent)">$1</code>')
+    .replace(/\[\[([a-z0-9-]+)\]\]/g, '<span class="slug" data-goto="$1">[[$1]]</span>')
+    .replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>")
+    .replace(
+      /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noopener">$1</a>',
+    );
+}
+
+const LIST_RE = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/;
+
+/* ---------------------------- HTML tables ----------------------------------
+ * Some comments are raw HTML rather than markdown. The Cloudflare Pages bot posts its deploy
+ * status as a `<table>`, and GitHub renders it; this escaped it and showed you the tags.
+ *
+ * Nothing here relaxes the escaping, which is the one thing standing between a comment on a
+ * public repo and this page. The table is taken apart, each cell is reduced to the handful of
+ * markdown forms a cell actually uses, and the result goes back through the same escape-first
+ * pipeline as everything else. No attacker-controlled markup reaches innerHTML.
+ */
+const TABLE_RE = /<table[^>]*>[\s\S]*?<\/table>/gi;
+const ROW_RE = /<tr[^>]*>([\s\S]*?)<\/tr>/gi;
+const CELL_RE = /<(t[hd])[^>]*>([\s\S]*?)<\/\1>/gi;
+
+const ENTITIES = {
+  "&nbsp;": " ", "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"',
+  "&#39;": "'", "&apos;": "'", "&mdash;": "—", "&ndash;": "–",
+};
+
+/**
+ * The handful of inline HTML forms a comment actually uses, as the markdown they stand in for.
+ * Everything else is dropped to its text, which is what GitHub does with it too.
+ *
+ * `<img>` is resolved before `<a>` on purpose: a linked icon is `<a><img alt="x"></a>`, and
+ * taking the anchor first leaves an empty label and a bare URL on the page.
+ */
+function htmlToMarkdown(html, breakAs, stripUnknown) {
+  return html
+    .replace(/<br\s*\/?>/gi, breakAs)
+    .replace(/<(strong|b)[^>]*>([\s\S]*?)<\/\1>/gi, (_m, _t, x) => "**" + x.trim() + "**")
+    .replace(/<(em|i)[^>]*>([\s\S]*?)<\/\1>/gi, (_m, _t, x) => "*" + x.trim() + "*")
+    .replace(/<code[^>]*>([\s\S]*?)<\/code>/gi, (_m, x) => "`" + x.trim() + "`")
+    .replace(/<img[^>]*alt=["']([^"']*)["'][^>]*>/gi, "$1")
+    .replace(/<img[^>]*>/gi, "")
+    // Only http(s). A `javascript:` href would be escaped downstream anyway, but a link that
+    // cannot go anywhere useful is better dropped than rendered.
+    .replace(
+      /<a[^>]*href=["'](https?:\/\/[^"']+)["'][^>]*>([\s\S]*?)<\/a>/gi,
+      (_m, href, text) => {
+        const label = text.replace(/<[^>]+>/g, "").trim();
+        return label ? "[" + label + "](" + href + ")" : href;
+      },
+    )
+    /* Only inside a cell. Out in the prose, a tag nobody asked about stays escaped and
+       visible: a brain document that mentions `<script>` or <div> without backticks should
+       still say so, and silently deleting a word is worse than printing an angle bracket. */
+    .replace(stripUnknown ? /<[^>]+>/g : /(?!)/g, "")
+    .replace(/&[a-z#0-9]+;/gi, (e) => ENTITIES[e.toLowerCase()] ?? e);
+}
+
+/** One `<td>`, on one line. */
+function cellToMarkdown(html) {
+  return htmlToMarkdown(html, " ", true).replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Pull every `<table>` out of the source, leaving a marker line where each one was.
+ *
+ * The markers are substituted back inside the main loop, so the table renders in place and
+ * everything around it is still ordinary markdown. A literal `%%HTMLTABLE0%%` typed by a
+ * person only collides if the same comment also contains a real HTML table.
+ */
+/* A fence or a code span is content, not markup. Splitting on them first is what keeps a
+   comment discussing `<meta name="robots">` from having its example quietly deleted. */
+const CODE_RE = /(```[\s\S]*?```|`[^`\n]*`)/;
+
+function liftTables(src) {
+  const tables = [];
+  const text = String(src ?? "")
+    .split(CODE_RE)
+    .map((part, i) => (i % 2 ? part : htmlToMarkdown(liftTablesIn(part, tables), "\n", false)))
+    .join("");
+  return { text, tables };
+}
+
+function liftTablesIn(src, tables) {
+  return src.replace(TABLE_RE, (block) => {
+    const rows = [];
+    let head = null;
+    for (const [, inner] of block.matchAll(ROW_RE)) {
+      const cells = [];
+      let isHead = true;
+      for (const [, tag, body] of inner.matchAll(CELL_RE)) {
+        if (tag.toLowerCase() !== "th") isHead = false;
+        cells.push(cellToMarkdown(body));
+      }
+      if (!cells.length) continue;
+      if (isHead && !rows.length && !head) head = cells;
+      else rows.push(cells);
+    }
+    if (!head && !rows.length) return block;
+    tables.push({ head, rows });
+    return "\n\n%%HTMLTABLE" + (tables.length - 1) + "%%\n\n";
+  });
+}
+
+const MARKER_RE = /^%%HTMLTABLE(\d+)%%$/;
+
+/**
+ * opts.repo   resolves a bare #123 to that repository
+ * opts.file   { dir, staffDir } resolves relative images and links inside a brain
+ * opts.docs   links between doc pages stay inside the portal
+ */
+export function mdlite(src, opts = {}) {
+  const lifted = liftTables(String(src ?? ""));
+  const lines = esc(lifted.text).replace(/\r/g, "").split("\n");
+  const out = [];
+  let i = 0;
+
+  const inlineFmt = (s) =>
+    chips(
+      s
+        .replace(/`([^`]+)`/g, "<code>$1</code>")
+        .replace(
+          /!\[([^\]]*)\]\(([^)\s]+)\)/g,
+          (_m, alt, src2) =>
+            '<img src="' + mdAsset(src2, opts) + '" alt="' + alt + '" loading="lazy">',
+        )
+        // Non-greedy and allowing an inner asterisk, because "**bold with *this* inside**" is
+        // ordinary in these files and the old pattern silently left the stars on the page.
+        // Requiring a non-space first character keeps a literal "/** wildcard" from opening one.
+        .replace(/\*\*(\S[\s\S]*?)\*\*/g, "<b>$1</b>")
+        .replace(/(^|[\s(])\*([^*\s][^*]*)\*/g, "$1<i>$2</i>")
+        .replace(/~~([^~]+)~~/g, "<s>$1</s>")
+        .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, text, href) => mdLink(href, text, opts))
+        .replace(/(^|[\s(])(https?:\/\/[^\s<)]+)/g, (_m, pre, url) => pre + mdLink(url, url, opts)),
+      opts,
+    );
+
+  const cells = (row) => {
+    let s = row.trim();
+    if (s.startsWith("|")) s = s.slice(1);
+    if (s.endsWith("|")) s = s.slice(0, -1);
+    return s.split("|").map((c) => inlineFmt(c.trim()));
+  };
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    const lifted_at = MARKER_RE.exec(line.trim());
+    if (lifted_at && lifted.tables[Number(lifted_at[1])]) {
+      const t = lifted.tables[Number(lifted_at[1])];
+      const th = (t.head ?? []).map((h) => "<th>" + inlineFmt(esc(h)) + "</th>").join("");
+      const tr = t.rows
+        .map((r) => "<tr>" + r.map((c) => "<td>" + inlineFmt(esc(c)) + "</td>").join("") + "</tr>")
+        .join("");
+      out.push(
+        '<div class="ctable"><table>' +
+          (t.head ? "<thead><tr>" + th + "</tr></thead>" : "") +
+          "<tbody>" + tr + "</tbody></table></div>",
+      );
+      i++;
+      continue;
+    }
+
+    if (line.trim().startsWith("```")) {
+      const buf = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith("```")) buf.push(lines[i++]);
+      i++;
+      out.push("<pre><code>" + buf.join("\n") + "</code></pre>");
+      continue;
+    }
+
+    // A table is a pipe row followed by a --- separator row.
+    if (
+      line.trim().startsWith("|") &&
+      (lines[i + 1] ?? "").replace(/[^|:\-\s]/g, "") === (lines[i + 1] ?? "").trim() &&
+      /^\|?[\s:|-]+\|[\s:|-]*$/.test((lines[i + 1] ?? "").trim())
+    ) {
+      const head = cells(line);
+      i += 2;
+      const body = [];
+      while (i < lines.length && lines[i].trim().startsWith("|")) body.push(cells(lines[i++]));
+      const th = head.map((h) => "<th>" + h + "</th>").join("");
+      const tr = body.map((r) => "<tr>" + r.map((c) => "<td>" + c + "</td>").join("") + "</tr>").join("");
+      // A leading empty header cell is how these issues start a two-column "thing | ask"
+      // table; keeping the row would just print a blank strip.
+      const showHead = head.some((h) => h.trim());
+      out.push(
+        '<div class="ctable"><table>' +
+          (showHead ? "<thead><tr>" + th + "</tr></thead>" : "") +
+          "<tbody>" + tr + "</tbody></table></div>",
+      );
+      continue;
+    }
+
+    if (!line.trim()) { i++; continue; }
+
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    if (h) { out.push("<h" + h[1].length + ">" + inlineFmt(h[2]) + "</h" + h[1].length + ">"); i++; continue; }
+
+    if (/^\s*([-*_])\s*\1\s*\1[\s\-*_]*$/.test(line)) { out.push("<hr>"); i++; continue; }
+
+    if (line.trim().startsWith("&gt;")) {
+      const buf = [];
+      while (i < lines.length && lines[i].trim().startsWith("&gt;")) {
+        buf.push(lines[i++].trim().replace(/^&gt;\s?/, ""));
+      }
+      out.push("<blockquote>" + inlineFmt(buf.join(" ")) + "</blockquote>");
+      continue;
+    }
+
+    // Lists are gathered whole and nested by indent. Flat divs with a left margin looked
+    // right until a sub-point wrapped, and then the wrap did not line up with the bullet.
+    if (LIST_RE.test(line)) {
+      const items = [];
+      while (i < lines.length && LIST_RE.test(lines[i])) {
+        const m = LIST_RE.exec(lines[i++]);
+        items.push({
+          depth: Math.floor(m[1].replace(/\t/g, "  ").length / 2),
+          ordered: /\d/.test(m[2]),
+          text: m[3],
+        });
+        // A continuation line indented under the bullet is part of that bullet.
+        while (i < lines.length && lines[i].trim() && /^\s{2,}\S/.test(lines[i]) && !LIST_RE.test(lines[i])) {
+          items[items.length - 1].text += " " + lines[i++].trim();
+        }
+      }
+      out.push(mdList(items, 0, items[0].depth, inlineFmt).html);
+      continue;
+    }
+
+    /* Consecutive plain lines are one paragraph; markdown hard-wraps and we should not.
+       The join happens before the formatting, not after: these files wrap at 95 columns, so
+       a **bold run** or a [link](…) routinely straddles two source lines, and formatting
+       line by line left the asterisks on the page. */
+    const para = [];
+    while (
+      i < lines.length && lines[i].trim() &&
+      !LIST_RE.test(lines[i]) && !/^\s*(#{1,6}\s|\||&gt;|```)/.test(lines[i])
+    ) {
+      para.push(lines[i++].trim());
+    }
+    out.push("<p>" + inlineFmt(para.length ? para.join(" ") : lines[i++].trim()) + "</p>");
+  }
+  return out.join("\n");
+}
+
+/** One level of a list, recursing wherever the indent goes deeper. */
+function mdList(items, from, depth, fmt) {
+  let html = "";
+  let tasks = 0;
+  let i = from;
+  const ordered = items[from].ordered;
+  while (i < items.length && items[i].depth >= depth) {
+    if (items[i].depth > depth) {
+      const sub = mdList(items, i, items[i].depth, fmt);
+      // Nest inside the bullet we just closed, so the sub-list belongs to it.
+      html = html.replace(/<\/li>$/, sub.html + "</li>");
+      i = sub.next;
+      continue;
+    }
+    const task = /^\[( |x|X)\]\s+(.*)$/.exec(items[i].text);
+    if (task) {
+      tasks++;
+      html += '<li><span class="box">' + iconHTML(task[1] === " " ? "square" : "task-done") +
+        "</span>" + fmt(task[2]) + "</li>";
+    } else {
+      html += "<li>" + fmt(items[i].text) + "</li>";
+    }
+    i++;
+  }
+  const tag = ordered ? "ol" : "ul";
+  return { html: "<" + tag + (tasks ? ' class="tasks"' : "") + ">" + html + "</" + tag + ">", next: i };
+}
+
+const GH_REF = /^https?:\/\/github\.com\/([\w.-]+)\/([\w.-]+)\/(issues|pull)\/(\d+)/;
+
+/** A link, or a chip if it points at an issue or a PR and the text adds nothing. */
+function mdLink(href, text, opts) {
+  const gh = GH_REF.exec(href);
+  if (gh && (text === href || text === gh[1] + "/" + gh[2] + "#" + gh[4])) {
+    const repo = gh[1] + "/" + gh[2];
+    const label = (repo === opts.repo ? "" : repo) + "#" + gh[4];
+    return '<a class="ref' + (gh[3] === "pull" ? " pr" : "") + '" href="' + href +
+      '" target="_blank" rel="noopener" title="' + repo + " #" + gh[4] + '">' + label + "</a>";
+  }
+  if (/^https?:\/\//.test(href)) {
+    return '<a href="' + href + '" target="_blank" rel="noopener">' + text + "</a>";
+  }
+  if (opts.docs) {
+    // A link between doc pages stays inside the portal.
+    if (/^[\w.-]*\.md(#.*)?$/.test(href) || href.startsWith("#")) {
+      return '<a href="#" data-doc="' + href + '">' + text + "</a>";
+    }
+    return text;
+  }
+  if (href.startsWith("#")) return text;
+  // A relative link inside a brain opens the file here rather than going nowhere.
+  const path = mdPath(href, opts);
+  if (!path) return text;
+  return '<a href="#" data-file="' + path + '">' + text + "</a>";
+}
+
+/** Resolve a relative path against the file being read, so ../assets/x.png works. */
+function mdPath(href, opts) {
+  if (!opts.file || /^(https?:|data:|mailto:)/.test(href)) return null;
+  const parts = (opts.file.dir + href.split("#")[0].split("?")[0]).split("/");
+  const stack = [];
+  for (const p of parts) {
+    if (!p || p === ".") continue;
+    if (p === "..") stack.pop();
+    else stack.push(p);
+  }
+  return stack.join("/");
+}
+
+function mdAsset(src, opts) {
+  const path = /^(https?:|data:)/.test(src) ? null : mdPath(src, opts);
+  return path ? "/api/file?path=" + encodeURIComponent(opts.file.staffDir + "/" + path) : src;
+}
+
+const REF_RE = /(^|[\s(>])([\w.-]+\/[\w.-]+)?#(\d+)\b/g;
+// GitHub's own username shape, plus the short aliases the agents answer to.
+const AT_RE = /(^|[\s(>])@([a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38})\b/gi;
+
+/* #123, owner/repo#123 and @handle become chips.
+   Split on tags and skip anything already inside an anchor, because a markdown link whose
+   text is "#113" would otherwise end up as an anchor nested in an anchor. */
+export function chips(html, opts = {}) {
+  const parts = html.split(/(<[^>]*>)/);
+  let inA = 0;
+  return parts
+    .map((p) => {
+      if (p.startsWith("<")) {
+        if (/^<a\b/i.test(p)) inA++;
+        else if (/^<\/a>/i.test(p)) inA = Math.max(0, inA - 1);
+        return p;
+      }
+      if (inA) return p;
+      return p
+        .replace(REF_RE, (m, pre, repo, n) => {
+          const target = repo || opts.repo;
+          if (!target) return m;
+          // /issues/N redirects to /pull/N when it is a PR, so one form is always right.
+          return pre + '<a class="ref" href="https://github.com/' + target + "/issues/" + n +
+            '" target="_blank" rel="noopener" title="' + target + " #" + n + '">' +
+            (repo ? repo : "") + "#" + n + "</a>";
+        })
+        .replace(AT_RE, (m, pre, name) => {
+          const who = PEOPLE.get(name.toLowerCase());
+          if (!who) {
+            return pre + '<a class="at" href="https://github.com/' + name +
+              '" target="_blank" rel="noopener">@' + name + "</a>";
+          }
+          // A mention of someone on this roster is marked, and goes to their repo.
+          return pre + '<a class="at you" href="' + who.href + '" target="_blank" rel="noopener"' +
+            ' title="' + esc(who.title) + '">@' + name + "</a>";
+        });
+    })
+    .join("");
+}

package/templates/portal/js/refresh.js

@@ -0,0 +1,59 @@
+/* Re-reading the world, and saying so.
+ *
+ * Everything is read from disk per request, so a refresh is just re-fetching. Without it a
+ * run that lands while the page is open stays invisible until a reload, which is what made
+ * the diffs look days old.
+ *
+ * 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 { $, ago, el, esc } from "./dom.js";
+import { render } from "./router.js";
+import { S } from "./state.js";
+
+export async function refreshAll(soft) {
+  const bar = $("#refreshall");
+  bar?.classList.add("spin");
+  try {
+    // Pull first. The portal reads the working tree, so a run that has landed on GitHub is
+    // invisible here until the checkout catches up.
+    S.sync = await getSync();
+    S.data = await getOrg();
+    S.inbox = null; // the inbox re-fetches itself on next paint
+    S.loadedAt = new Date();
+    if (!soft) render();
+    stampLoaded();
+  } finally {
+    bar?.classList.remove("spin");
+  }
+}
+
+export function stampLoaded() {
+  const s = $("#loaded");
+  if (s && S.loadedAt) s.textContent = "data " + ago(S.loadedAt.toISOString());
+}
+
+/* A repo that could not be fast-forwarded is the difference between "nothing happened
+   today" and "something happened and you cannot see it", so it is said out loud. */
+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
+    .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"
+            : r.skipped === "diverged"
+              ? "has diverged (" + r.ahead + " ahead, " + r.behind + " behind)"
+              : r.skipped === "no-remote"
+                ? "has no remote"
+                : "is still " + r.behind + " behind"),
+    )
+    .join("<br>");
+  return d;
+}

package/templates/portal/js/router.js

@@ -0,0 +1,20 @@
+/* One indirection, so a view can ask for a repaint without importing the shell that owns it.
+   app.js registers the real renderer at boot; views import `render` and `go`. */
+
+import { S } from "./state.js";
+
+let renderer = () => {};
+
+export function onRender(fn) {
+  renderer = fn;
+}
+
+export function render() {
+  renderer();
+}
+
+/** Change some state and repaint. The one way a view navigates. */
+export function go(patch) {
+  Object.assign(S, patch);
+  render();
+}