@nanocollective/roster 0.1.0-alpha.1

package/templates/ops/prompts/pr-mention.md

@@ -0,0 +1,57 @@
+You are **{{staff.name}}** at {{org.name}}. {{human.name}} has asked for a change to an open pull
+request, in a comment on the PR itself. They are not watching a terminal; **your reply on that PR is
+the only thing they will see.**
+
+**This is not a session.** No boot ritual, no handoff, no rewriting #{{staff.status_issue}}. Make the
+change asked for, push it, reply, stop.
+
+{{#if staff.public_bot}}
+## You are anonymous over there
+
+The PR is on a **public** repo. You post as `{{staff.public_bot}}`, an ordinary automation account.
+**Never sign as {{staff.name}}, never mention a charter, a tracker, a scheduled run, or that there is
+a role behind the account.** Write like a maintainer's bot: short, factual, no personality.
+
+Every `gh` call against that repo must carry the public identity: `GH_TOKEN=$PUBLIC_TOKEN gh ...`.
+The bare `GH_TOKEN` is your private-tracker identity and using it there would sign your name to a
+public repo.
+{{/if}}
+
+{{> prompts/_paths.md}}
+
+## The request
+
+**PR #{{event.pr_number}}, comment `{{event.comment_id}}`.** Read it before touching anything: an
+inline review comment carries `path`, `line` and `diff_hunk`, which say exactly which code is meant.
+Do not guess from the prose.
+
+## Do the work
+
+1. **You are already on the PR branch** - the runner checked it out. Do not start a new one.
+2. **If the PR is from a fork you cannot push to**, do not try. Reply with the exact diff to apply,
+   and say why you could not push it.
+3. **Make only the change asked for.** A review comment is a narrow request. Fixing something else
+   makes the diff unreviewable and costs a second review. If you spot something real and separate,
+   mention it in the reply and leave the code alone.
+4. **Run the full gate before pushing.** If it goes red on the requested change, push nothing and
+   reply with what broke.
+5. **Pull with rebase before pushing** - there may be several comments, and another run may be on
+   the same branch. If the push is still rejected, pull and retry rather than forcing: a force push
+   on a branch being reviewed throws away their place in the diff.
+6. **You cannot verify anything UI-shaped** - there is no browser and no device here. Say so plainly
+   rather than implying a green gate covered it.
+
+**Do not merge, and do not push to the default branch.**
+
+{{> org/guardrails.md}}
+
+## Reply where they asked
+
+Answer in the same place the request came from. **Do not @-mention them** - they are subscribed to
+their own PR.
+
+{{> org/voice.md}}
+
+**For this reply specifically:** what changed, the SHA, gate status, what it did not cover.
+**Nothing else.** No preamble, no restating the request, no headers, no sign-off, no narration of
+the steps you took. If nothing changed, one line saying so and why.

package/templates/ops/runner-plan.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+// Works out what a runner has to check out, before it has checked anything out.
+//
+// The ops repo is the only thing a workflow can clone without reading a manifest first, so it
+// clones that, runs this, and gets back everything else: where the staff member's brain lands,
+// which peers to bring along, which product repos to clone and how deep.
+//
+// Emits `key=value` lines for $GITHUB_OUTPUT. Vendored alongside compose.mjs for the same reason:
+// a morning run must not depend on npm or on an org the tenant does not control.
+//
+// Usage:  node roster-ops/runner-plan.mjs --staff cto --ops roster-ops >> "$GITHUB_OUTPUT"
+
+import { readFileSync, existsSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { parseYaml } from "./compose.mjs";
+
+function main(argv) {
+  const args = {};
+  for (let i = 0; i < argv.length; i += 2) args[argv[i].replace(/^--/, "")] = argv[i + 1];
+  if (!args.staff) throw new Error("--staff is required");
+
+  const opsDir = resolve(args.ops ?? ".");
+  const org = parseYaml(readFileSync(join(opsDir, "org.yaml"), "utf8"), "org.yaml");
+
+  const entry = (org.staff ?? []).find((s) => s.handle === args.staff);
+  if (!entry) throw new Error(`org.yaml has no staff member "${args.staff}"`);
+  const dir = entry.dir ?? entry.handle;
+
+  // The staff manifest may not be readable yet (its repo is cloned after this runs), so
+  // everything here comes from org.yaml, which is the registry for exactly this reason.
+  const peers = (org.staff ?? [])
+    .filter((s) => s.handle !== args.staff)
+    .map((s) => `${org.org}/${s.dir ?? s.handle}:${s.dir ?? s.handle}`);
+
+  const products = (org.repos ?? [])
+    .filter((r) => r.role === "product")
+    .map((r) => `${org.org}/${r.name}:${r.name}:${r.depth ?? 0}`);
+
+  const out = {
+    brain_dir: dir,
+    brain_repo: `${org.org}/${dir}`,
+    org: org.org,
+    peers: peers.join(" "),
+    products: products.join(" "),
+    // A product repo present means node is worth setting up; a triage-only run should not
+    // pay for an install it will not use.
+    needs_node: products.length > 0 ? "true" : "false",
+    product_dir: products.length ? products[0].split(":")[1] : "",
+    product_repo: products.length ? products[0].split(":")[0] : "",
+    package_json: products.length ? `${products[0].split(":")[1]}/package.json` : "",
+  };
+
+  return Object.entries(out)
+    .map(([k, v]) => `${k}=${v}`)
+    .join("\n");
+}
+
+try {
+  process.stdout.write(main(process.argv.slice(2)) + "\n");
+} catch (err) {
+  console.error(`runner-plan: ${err.message}`);
+  process.exit(1);
+}
+
+export { main };

package/templates/portal/css/base.css

@@ -0,0 +1,104 @@
+/* Tokens, reset, and the primitives every screen uses: buttons, inputs, chips, meta text. */
+
+:root{
+  --bg:#0e1013; --panel:#15181d; --panel-2:#1b1f26; --line:#252a33;
+  --ink:#e6e9ef; --ink-dim:#9aa3b2; --ink-faint:#6b7484;
+  --accent:#7cc7a4; --accent-dim:#3d6b56;
+  --warn:#d8a657; --err:#e07b7b;
+  --will:#7aa2f7; --measured:#7cc7a4; --derived:#c99bd6;
+  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
+  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
+}
+/* System preference wins unless the toggle has stamped data-theme on the root. */
+@media (prefers-color-scheme:light){
+  :root:not([data-theme="dark"]){
+    --bg:#fbfbfa; --panel:#fff; --panel-2:#f4f5f7; --line:#e3e5ea;
+    --ink:#1b1f26; --ink-dim:#5b6472; --ink-faint:#8b95a5;
+    --accent:#2f7d5b; --accent-dim:#a8d5bf;
+    --warn:#a5701d; --err:#b34a4a;
+    --will:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+  }
+}
+:root[data-theme="light"]{
+    --bg:#fbfbfa; --panel:#fff; --panel-2:#f4f5f7; --line:#e3e5ea;
+    --ink:#1b1f26; --ink-dim:#5b6472; --ink-faint:#8b95a5;
+    --accent:#2f7d5b; --accent-dim:#a8d5bf;
+    --warn:#a5701d; --err:#b34a4a;
+    --will:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+}
+
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans);
+     -webkit-font-smoothing:antialiased}
+a{color:inherit}
+
+h1{font:600 21px var(--sans);margin:0 0 4px;letter-spacing:-.015em}
+.sub{color:var(--ink-dim);margin:0 0 24px;font-size:13px}
+.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
+.meta{color:var(--ink-faint);font:11.5px var(--mono)}
+.empty{color:var(--ink-faint);padding:26px 0;text-align:center;font-size:13px}
+.err{color:var(--err)} .warn{color:var(--warn)} .ok{color:var(--accent)}
+
+.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:15px 17px;margin-bottom:11px}
+.card h3{margin:0 0 3px;font:600 14px var(--sans)}
+.grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
+
+/* ---------- controls ---------- */
+input[type=search],select{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
+  border-radius:7px;padding:7px 11px;font:13px var(--sans);outline:none}
+input[type=search]{width:280px}
+input[type=search]:focus,select:focus{border-color:var(--accent-dim)}
+textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
+      border-radius:8px;padding:10px 12px;font:13px/1.55 var(--sans);outline:none;resize:vertical}
+textarea:focus{border-color:var(--accent-dim)}
+
+.ghbtn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;
+       font:12px var(--sans);color:var(--ink-dim);text-decoration:none;white-space:nowrap}
+.ghbtn:hover{color:var(--ink);border-color:var(--accent-dim);background:var(--panel-2)}
+button.ghbtn{cursor:pointer;font-family:var(--sans);background:transparent;
+      -webkit-appearance:none;appearance:none;font-size:12px;line-height:1.4}
+button.ghbtn:hover{background:var(--panel-2)}
+.ghbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
+.ghbtn.primary:hover{filter:brightness(1.08);background:var(--accent)}
+.ghbtn:disabled{opacity:.5;cursor:default}
+.iconbtn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);
+       border-radius:7px;width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1}
+.iconbtn:hover{color:var(--ink);border-color:var(--accent-dim)}
+.iconbtn{display:inline-flex;align-items:center;justify-content:center}
+.iconbtn .sync{display:inline-flex;--ic:15px}
+.iconbtn.spin .sync{animation:spin .9s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* ---------- icons ----------
+   Lucide, vendored in js/icons.js. They take colour from `currentColor` and size from the
+   `--ic` custom property, so a component sets both in CSS and never touches the SVG. */
+svg.ic{width:var(--ic,15px);height:var(--ic,15px);display:block;flex:none}
+/* A slot that holds one, centred, wherever a text glyph used to sit on a baseline. */
+.icslot{display:inline-flex;align-items:center;justify-content:center;flex:none}
+
+.chip{font:10px var(--sans);letter-spacing:.02em;padding:1.5px 7px;border-radius:20px;
+      border:1px solid var(--line);color:var(--ink-faint);white-space:nowrap}
+.chip.hot{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent)}
+.chip.warm{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
+.chip.cool{color:var(--will);border-color:color-mix(in srgb,var(--will) 40%,transparent)}
+.pill{font:11px var(--mono);color:var(--ink-faint);border:1px solid var(--line);
+      border-radius:20px;padding:2px 9px}
+kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
+    padding:1px 5px;color:var(--ink-dim)}
+
+.notice{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid
+      color-mix(in srgb,var(--warn) 40%,transparent);color:var(--ink-dim);border-radius:8px;
+      padding:10px 13px;margin-bottom:16px;font-size:12.5px;line-height:1.6}
+.notice b{color:var(--ink)}
+
+/* ---------- a dialog that asks for more than a line ----------
+   Native <dialog>, so the backdrop, the focus trap and Escape are the browser's job. */
+dialog.ask{border:1px solid var(--line);border-radius:11px;background:var(--panel);
+      color:var(--ink);padding:20px 22px;width:min(560px,92vw);
+      box-shadow:0 24px 60px rgba(0,0,0,.34)}
+dialog.ask::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
+dialog.ask h3{margin:0;font:600 15.5px var(--sans);letter-spacing:-.012em}
+dialog.ask .askhint{margin:6px 0 12px;font:12.5px/1.55 var(--sans);color:var(--ink-faint)}
+dialog.ask textarea{font:13.5px/1.6 var(--sans);min-height:96px;max-height:44vh}
+dialog.ask .askrow{margin-top:12px;justify-content:flex-end}
+dialog.ask .askrow .meta{margin-right:auto}

package/templates/portal/css/brain.css

@@ -0,0 +1,106 @@
+/* The brain screen: its navigator, and the memory cards in the right pane. */
+
+/* ---------- navigator ----------
+   Memory and Files are two kinds of thing, so they are two boxes rather than one flat list
+   where a parsed section and a markdown file are told apart only by their typeface. */
+.navgroup{border:1px solid var(--line);border-radius:7px;margin-bottom:8px;padding:4px 3px 5px}
+.navgroup:last-child{margin-bottom:0}
+.ghead{display:flex;align-items:baseline;gap:8px;padding:6px 8px 6px;
+       font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
+.ghead i{font-style:normal;font:10.5px var(--mono);letter-spacing:0;text-transform:none;
+       margin-left:auto;color:var(--ink-faint)}
+
+/* A memory section is prose, not a path, so it gets the sans face and is allowed to wrap
+   onto a second line rather than being cut off mid-word. */
+.tfile.tmem{align-items:flex-start}
+.tfile.tmem span.t{font:13px/1.4 var(--sans);color:var(--ink-dim);white-space:normal;
+       display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.tfile.tmem[aria-current="true"] span.t{color:var(--accent)}
+.tfile.tmem i{position:relative;top:1px}
+/* The section a focused fact belongs to stays lit, so opening one fact never loses your
+   place in the list. */
+.tfile[data-within="true"] span.t{color:var(--ink)}
+.tfile[data-within="true"]{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
+
+.tsurface{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;
+      border:0;color:var(--ink-dim);font:11.5px var(--mono);padding:5px 8px;border-radius:5px;
+      cursor:pointer}
+.tsurface:hover{background:var(--panel-2);color:var(--ink)}
+.tsurface .caret{color:var(--ink-faint);--ic:12px;flex:none;transition:transform .12s ease}
+.tsurface[aria-expanded="false"] .caret{transform:rotate(-90deg)}
+.tsurface .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tsurface i{font-style:normal;font-size:10.5px;color:var(--ink-faint);flex:none;
+      font-variant-numeric:tabular-nums}
+.tsfiles{padding-left:15px}
+.tsfiles .tfile{font-size:12px}
+
+/* ---------- memory cards ---------- */
+.fact{border-bottom:1px solid var(--line);padding:13px 2px;scroll-margin-top:12px}
+.fact:last-child{border-bottom:0}
+.fact.lit{background:color-mix(in srgb,var(--warn) 10%,transparent);
+     box-shadow:inset 3px 0 0 var(--warn);border-radius:0 6px 6px 0;padding-left:11px}
+.slug{font:12px var(--mono);color:var(--accent);cursor:pointer}
+.slug:hover{text-decoration:underline}
+.stmt{margin:3px 0 0}
+.so{margin:4px 0 0;color:var(--ink-dim);font-size:13.2px}
+.so b{color:var(--ink);font-weight:600}
+.factsub{color:var(--ink-faint);font-size:12.5px;margin:0 0 14px}
+.tag{display:inline-block;font:10.5px var(--mono);padding:1px 6px;border-radius:20px;
+     border:1px solid var(--line);color:var(--ink-faint);margin-left:6px;vertical-align:1px}
+.tag.will{color:var(--will);border-color:var(--will)}
+.tag.measured{color:var(--measured);border-color:var(--measured)}
+.tag.derived{color:var(--derived);border-color:var(--derived)}
+.notelink{font:11.5px var(--mono);color:var(--ink-faint);cursor:pointer;margin-left:6px}
+.notelink:hover{color:var(--accent)}
+
+/* Clicking a fact's name narrows the pane to that one fact. Without a crumb saying so and
+   a way out, that read as the page breaking. */
+.focusbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;
+      background:color-mix(in srgb,var(--warn) 10%,transparent);
+      border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
+      border-radius:7px;padding:7px 8px 7px 11px;font:12px var(--sans);color:var(--ink-dim)}
+.focusbar .crumb{background:none;border:0;color:var(--ink-dim);cursor:pointer;
+      font:12px var(--sans);padding:0;text-align:left}
+.focusbar .crumb:hover{color:var(--ink);text-decoration:underline}
+.focusbar .sep{color:var(--ink-faint)}
+.focusbar .here{font:12px var(--mono);color:var(--ink)}
+.focusbar .x{margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;
+      color:var(--ink-dim);cursor:pointer;font:11px var(--sans);padding:3px 9px;white-space:nowrap}
+.focusbar .x:hover{color:var(--ink);border-color:var(--ink-faint);background:var(--panel-2)}
+
+/* ---------- the prompt screen ----------
+   A layer row carries two facts: the file, and which repo it came out of. The repo matters
+   because editing one in `roster-ops` reaches every staff member and one in a brain reaches
+   one, and that is the difference worth seeing before you click Edit. */
+.tfile.tlayer{align-items:flex-start;padding:5px 8px}
+.tfile.tlayer span.t{display:flex;flex-direction:column;gap:1px}
+.tfile.tlayer .lname{font:12.5px var(--mono);overflow:hidden;text-overflow:ellipsis}
+.tfile.tlayer .lrepo{font:10px/1.45 var(--sans);color:var(--ink-faint);letter-spacing:.02em;
+      white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
+      overflow:hidden}
+.tfile.tlayer[aria-current="true"] .lname{color:var(--accent)}
+.tfile.tlayer.dim{opacity:.5}
+.treenote{margin:0 8px 6px;font:11px/1.45 var(--sans);color:var(--ink-faint)}
+
+/* The card already scrolls. A textarea that scrolls too gives you two scrollbars for one
+   document and neither of them is the one you want, so this one grows to fit its content
+   and never scrolls itself. Height is set in JS from scrollHeight; min-height is the floor
+   for a short file. */
+.editor{font:12.5px/1.7 var(--mono);min-height:340px;overflow:hidden;resize:none}
+.editnote{margin:8px 0 0;font:11.5px var(--sans);color:var(--ink-faint)}
+
+/* A prompt audit finding. Not a tree row: it carries an explanation and two buttons, and
+   squeezing that into the navigator's row shape is how it would get ignored. */
+.prob{border:1px solid var(--line);border-radius:7px;padding:9px 10px;margin:0 3px 6px}
+.prob .ptitle{font:600 12.5px var(--sans);color:var(--ink)}
+.prob .pdetail{margin-top:3px;font:11.5px/1.5 var(--sans);color:var(--ink-faint)}
+.prob.error{border-color:color-mix(in srgb,var(--err) 45%,transparent)}
+.prob.error .ptitle{color:var(--err)}
+.prob.warning{border-color:color-mix(in srgb,var(--warn) 38%,transparent)}
+.prob.warning .ptitle{color:var(--warn)}
+.prob .ghbtn{font-size:11px;padding:3px 8px}
+
+/* What an edit did to the composed prompt, which is the question you were actually asking. */
+.effect{border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
+      background:color-mix(in srgb,var(--accent) 7%,transparent);
+      border-radius:8px;padding:10px 12px;margin-bottom:14px}

package/templates/portal/css/diff.css

@@ -0,0 +1,28 @@
+/* A unified diff, on the "what changed" screen. */
+
+.dblock{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
+.dblock:last-child{margin-bottom:0}
+.diff{margin:0;font:12px/1.6 var(--mono);background:var(--panel-2);overflow-x:auto}
+.dline{display:grid;grid-template-columns:42px 42px 1fr;white-space:pre;min-width:max-content}
+.dline .ln{color:var(--ink-faint);text-align:right;padding:0 7px 0 5px;font-size:11px;
+      user-select:none;background:color-mix(in srgb,var(--line) 34%,transparent)}
+.dline .tx{padding:0 14px 0 9px}
+.dadd{background:color-mix(in srgb,var(--accent) 15%,transparent)}
+.dadd .tx{color:var(--ink)}
+.dadd .ln{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent)}
+.ddel{background:color-mix(in srgb,var(--err) 13%,transparent)}
+.ddel .tx{color:var(--ink-dim)}
+.ddel .ln{background:color-mix(in srgb,var(--err) 22%,transparent);color:var(--err)}
+.dhunk{background:color-mix(in srgb,var(--will) 13%,transparent);
+      border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
+.dhunk .tx{color:var(--will);font-size:11.5px}
+.dmeta .tx{color:var(--ink-faint);font-size:11.5px}
+.dfocus{box-shadow:inset 3px 0 0 var(--warn)}
+.dfile{font:11.5px var(--mono);color:var(--ink-dim);background:var(--panel);padding:8px 12px;
+      border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
+.dfile b{color:var(--ink);font-weight:600}
+.dfile .p{color:var(--accent)} .dfile .m{color:var(--err)}
+.dempty{padding:20px;color:var(--ink-faint);font-size:12.5px}
+
+/* The learned/forgotten marker on a "what changed" row. */
+.chg{display:inline-flex;flex:none;--ic:13px;position:relative;top:2px}

package/templates/portal/css/graph.css

@@ -0,0 +1,34 @@
+/* The link graph: canvas, its controls, and the sheet a selected fact opens. */
+
+.graphwrap{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}
+#graph{display:block;width:100%;height:72vh;cursor:grab;touch-action:none}
+#graph.grabbing{cursor:grabbing}
+#graph.onnode{cursor:pointer}
+
+.legend{position:absolute;left:12px;bottom:12px;font:11px var(--mono);color:var(--ink-dim);
+        background:color-mix(in srgb,var(--panel) 92%,transparent);padding:8px 11px;border-radius:7px;
+        border:1px solid var(--line);max-height:44%;overflow:auto}
+.legend div{white-space:nowrap;line-height:1.75;cursor:pointer;opacity:.55}
+.legend div.on{opacity:1}
+.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
+
+.gtools{position:absolute;right:12px;top:12px;display:flex;gap:7px;align-items:center}
+.gtools button{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);
+        color:var(--ink-dim);border-radius:7px;padding:5px 10px;font:11.5px var(--mono);cursor:pointer}
+.gtools button:hover{color:var(--ink);border-color:var(--accent-dim)}
+.gtools input[type=search]{width:170px;padding:5px 10px;font:11.5px var(--mono)}
+
+.sheet{position:absolute;right:0;top:0;bottom:0;width:370px;max-width:100%;
+       background:var(--panel);border-left:1px solid var(--line);padding:20px 22px;
+       overflow:auto;box-shadow:-14px 0 34px rgba(0,0,0,.16)}
+.sheet .x{position:absolute;right:12px;top:12px;background:none;border:0;color:var(--ink-faint);
+       cursor:pointer;display:inline-flex;padding:4px;border-radius:6px;--ic:16px}
+.sheet .x:hover{color:var(--ink);background:var(--panel-2)}
+.sheet .skind{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
+.sheet h4{margin:0 0 10px;font:600 15px var(--mono);word-break:break-word;padding-right:22px;letter-spacing:-.01em}
+.sheet p{margin:8px 0 0;font-size:13.5px;line-height:1.6}
+.sheet .lk{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink-dim);
+       font:12px var(--mono);padding:4px 0;cursor:pointer;white-space:nowrap;overflow:hidden;
+       text-overflow:ellipsis}
+.sheet .lk:hover{color:var(--accent)}
+@media (max-width:760px){.sheet{width:100%}}

package/templates/portal/css/health.css

@@ -0,0 +1,41 @@
+/* The health screen's fact strip and lint cards. */
+
+.kv{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
+.kv .k{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
+.kv .v{margin-top:5px;font:14px var(--sans);color:var(--ink);line-height:1.45}
+.kv .v small{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}
+.kv.bad{border-color:color-mix(in srgb,var(--err) 45%,transparent)}
+.kv.bad .v{color:var(--err)}
+.card .fix{margin-top:10px}
+.card .fixed{color:var(--accent);font:11.5px var(--mono)}
+.hsect{font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
+      color:var(--ink-faint);margin:24px 0 10px}
+
+/* ---------- the staff screen ---------- */
+.staffcard .v small{margin-top:4px}
+
+/* A plan, before anything happens. The two halves are deliberately equal in weight: "this is
+   what it keeps" is what somebody needs to believe before retiring anybody. */
+.plan{border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-top:14px;
+      background:var(--panel)}
+.plan h3{margin:0 0 10px;font:600 15px var(--sans)}
+.planhead{font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
+      color:var(--ink-faint);margin:14px 0 7px}
+.planhead:first-of-type{margin-top:0}
+.planhead.keep{color:var(--accent)}
+.planline{display:flex;gap:9px;align-items:flex-start;font:12.5px/1.55 var(--sans);
+      color:var(--ink-dim);padding:2px 0}
+.planline .ic{--ic:14px;flex:none;position:relative;top:3px}
+.planline.ok .ic{color:var(--accent)}
+.planline.stop .ic{color:var(--err)}
+.planline.keep .ic{color:var(--accent)}
+.planline.keep span{color:var(--ink)}
+.planline.todo .ic{color:var(--warn)}
+.planline.warn{color:var(--ink-faint)}
+.planline.warn .ic{color:var(--warn)}
+.planout{margin-top:14px;max-height:320px;overflow:auto;font-size:11.5px}
+
+.ffield{margin-bottom:10px}
+.ffield label{display:block;font:600 11px var(--sans);letter-spacing:.05em;
+      text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
+.ffield small{display:block;margin-top:3px;font:11px var(--sans);color:var(--ink-faint)}

package/templates/portal/css/inbox.css

@@ -0,0 +1,79 @@
+/* The inbox list, and the thread beside it. */
+
+.irow{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
+      padding:9px 10px;border-radius:7px;color:var(--ink-dim)}
+.irow:hover{background:var(--panel-2)}
+.irow:focus{outline:none}
+.irow:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
+.irow[aria-current="true"]{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
+.ititle{font:13.5px/1.4 var(--sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;
+        -webkit-box-orient:vertical;overflow:hidden}
+.irow[aria-current="true"] .ititle{color:var(--accent)}
+.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);
+     margin-right:6px;vertical-align:2px}
+.imeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
+.imeta .repo{font:10px var(--sans);letter-spacing:.03em;text-transform:uppercase;
+      color:var(--ink-faint);border-right:1px solid var(--line);padding-right:7px}
+.imeta .num{font:10.5px var(--mono);color:var(--ink-faint)}
+.imeta .when{font:10.5px var(--sans);color:var(--ink-faint);margin-left:auto}
+.ck{display:inline-flex;--ic:13px}
+/* Closed work reads as finished at a glance, so it can share a list with open work without
+   competing with it. */
+.irow.shut .ititle{color:var(--ink-dim)}
+.irow.shut[aria-current="true"] .ititle{color:var(--accent)}
+.ist{display:inline-flex;--ic:12px}
+.ist.closed{color:var(--derived)} .ist.merged{color:var(--derived)}
+.ck.passing{color:var(--accent)} .ck.failing{color:var(--err)} .ck.pending{color:var(--warn)}
+
+/* ---------- thread ---------- */
+.thead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:4px}
+.trow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
+.thead h3{margin:8px 0 0;font:600 17px/1.35 var(--sans);letter-spacing:-.012em;color:var(--ink)}
+.cmt{border-top:1px solid var(--line);padding:16px 0}
+.cmt.first{border-top:0}
+.reply{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
+
+/* ---------- timeline events ----------
+   Not comments, so not comment-shaped: a marker, a line of prose, and whatever it points at.
+   These carry the half of a thread that is agents referring to each other's work. */
+.tev{display:flex;gap:10px;align-items:flex-start;padding:9px 0 9px 2px;
+     font:12.5px/1.5 var(--sans);color:var(--ink-dim)}
+.tev .tico{flex:none;display:inline-flex;align-items:center;justify-content:center;
+     width:16px;height:19px;color:var(--ink-faint);--ic:14px}
+.tev .tbody{flex:1;min-width:0}
+.tev b{color:var(--ink);font-weight:600}
+.tev .tsub{display:block;margin-top:4px}
+.tev .tcommit{font:11.5px var(--mono);color:var(--ink-dim);background:var(--panel-2);
+     text-decoration:none;
+     border:1px solid var(--line);border-radius:6px;padding:4px 9px;display:inline-block;
+     max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
+.tev .tcommit:hover{color:var(--ink);border-color:var(--ink-faint)}
+.tev .twhen{color:var(--ink-faint);font-size:11px;white-space:nowrap}
+.tev.closed .tico{color:var(--err)}
+.tev.reopened .tico,.tev.merged .tico{color:var(--accent)}
+.tev.cross-referenced .tico{color:var(--will)}
+
+/* An item this thread points at, as a row you can open here rather than a link that throws
+   you out to GitHub. Open and closed read at a glance, which is the whole reason to show it. */
+.xref{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;
+      border:1px solid var(--line);border-radius:7px;padding:6px 10px;margin-top:5px;
+      cursor:pointer;color:var(--ink-dim);font:12.5px var(--sans)}
+.xref:hover{border-color:var(--accent-dim);background:var(--panel-2);color:var(--ink)}
+.xref .st{flex:none;display:inline-flex;--ic:14px;position:relative;top:2px}
+.xref .st.open{color:var(--accent)} .xref .st.closed{color:var(--derived)}
+.xref .st.merged{color:var(--derived)} .xref .st.draft{color:var(--ink-faint)}
+.xref .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.xref .n{flex:none;font:11px var(--mono);color:var(--ink-faint)}
+
+/* The bookkeeping — labels, assignees, renames — folded away by default. It is real history
+   and worth being able to see, but it is not what you opened the thread to read. */
+.tevmore{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
+      color:var(--ink-faint);font:11.5px var(--sans);padding:8px 2px}
+.tevmore:hover{color:var(--ink-dim)}
+/* The chevron points down when open and right when closed, which is the other way round
+   from the "▸" character this used to be. */
+.tevmore .caret{--ic:12px;display:inline-flex;transition:transform .12s ease;
+      transform:rotate(-90deg)}
+.tevmore[aria-expanded="true"] .caret{transform:none}
+.tevquiet{border-left:1px solid var(--line);margin-left:9px;padding-left:14px}
+.tevquiet .tev{padding:5px 0;font-size:12px}

package/templates/portal/css/layout.css

@@ -0,0 +1,98 @@
+/* The page frame: sidebar, main column, and the tree-beside-viewer split every screen uses. */
+
+.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
+/* ---------- sidebar ---------- */
+.side{background:var(--panel);border-right:1px solid var(--line);padding:20px 0 14px;
+      position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
+.brand{padding:0 20px 18px;font:600 15px var(--sans);letter-spacing:-.01em}
+.brand small{display:block;color:var(--ink-faint);font-weight:400;font-size:11.5px;
+             letter-spacing:.02em;margin-top:2px}
+.refreshall{display:flex;align-items:center;gap:8px;width:calc(100% - 24px);margin:0 12px 4px;
+      background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
+      border-radius:7px;padding:7px 10px;cursor:pointer;font:11px var(--sans);text-align:left}
+.refreshall:hover{color:var(--ink);border-color:var(--accent-dim)}
+.refreshall .sync{display:inline-flex;--ic:13px;flex:none}
+.refreshall.spin .sync{animation:spin .9s linear infinite}
+
+.sect{padding:14px 20px 6px;font:600 10.5px var(--sans);letter-spacing:.09em;
+      text-transform:uppercase;color:var(--ink-faint)}
+/* Flex, not block with a float. The icons are block-level SVGs and the trailing count has to
+   sit hard right; `float` does neither of those inside a flex row, and did neither of them
+   outside one once the icons arrived. */
+.nav{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;
+     color:var(--ink-dim);font:14px var(--sans);padding:7px 20px;cursor:pointer;
+     border-left:2px solid transparent}
+.nav:hover{color:var(--ink);background:var(--panel-2)}
+.nav[aria-current="true"]{color:var(--ink);border-left-color:var(--accent);background:var(--panel-2)}
+.nav .ic{color:var(--ink-faint);margin-right:9px;--ic:15px;flex:none}
+.nav .n{margin-left:auto;padding-left:10px;color:var(--ink-faint);font:11px var(--mono)}
+.nav.top{margin-bottom:2px}
+
+/* Staff are rows that unfold into their own views, rather than a dropdown plus a list you
+   have to connect for yourself. The nesting is the hierarchy, said out loud. */
+.staffrow{display:flex;align-items:center;gap:7px;font:13.5px var(--sans);color:var(--ink);
+      padding-right:14px}
+.staffrow .caret{color:var(--ink-faint);--ic:12px;flex:none;transition:transform .12s ease}
+.staffrow[aria-expanded="false"] .caret{transform:rotate(-90deg)}
+.staffrow .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.staffrow .hh{font:10.5px var(--mono);color:var(--ink-faint);flex:none}
+.staffrow[aria-selected="true"]{color:var(--ink)}
+.staffviews{padding-bottom:4px}
+/* `subnav`, not `sub`: `.sub` is the page subtitle and carries a 24px bottom margin, which
+   these rows inherited as a gap you could park a car in. */
+.nav.subnav{padding:5px 20px 5px 40px;font-size:13px}
+.nav.subnav .n{font-size:10px}
+.sidefoot{margin-top:auto;padding-top:14px}
+.sidefoot .nav{font-size:12.5px;color:var(--ink-faint)}
+.sidefoot .nav:hover{color:var(--ink-dim)}
+
+/* ---------- main ---------- */
+main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
+
+/* ---------- tree beside viewer ---------- */
+.split{display:grid;grid-template-columns:314px 1fr;gap:16px;align-items:start}
+@media (max-width:900px){.split{grid-template-columns:1fr}}
+.tree{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px;
+      max-height:74vh;overflow:auto}
+.tdir{font:600 11px var(--mono);color:var(--ink-faint);padding:8px 8px 4px;letter-spacing:.04em}
+.tdir.first{padding-top:2px}
+.tfile{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;
+       border:0;color:var(--ink-dim);font:12.5px var(--mono);padding:4px 8px;border-radius:5px;
+       cursor:pointer}
+.tfile:hover{background:var(--panel-2);color:var(--ink)}
+.tfile[aria-current="true"]{background:var(--panel-2);color:var(--accent)}
+.tfile span.t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tfile i{color:var(--ink-faint);font-style:normal;font-size:10.5px;flex:none;
+      font-variant-numeric:tabular-nums}
+.tfile:focus{outline:none}
+.tfile:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
+
+.viewer{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:20px 22px;
+        min-height:340px;max-height:74vh;overflow:auto}
+.viewer pre{margin:0;white-space:pre-wrap;word-break:break-word;font:12.5px/1.65 var(--mono);color:var(--ink-dim)}
+/* Source keeps its own line breaks and scrolls, rather than wrapping into soup. */
+.viewer pre.code{white-space:pre;word-break:normal;overflow-x:auto}
+.viewer img{max-width:100%;border-radius:6px;background:#fff}
+.viewer table{border-collapse:collapse;font:12px var(--mono);width:100%}
+.viewer td,.viewer th{border:1px solid var(--line);padding:4px 8px;text-align:left;white-space:nowrap}
+.viewer th{position:sticky;top:0;background:var(--panel-2);color:var(--ink)}
+
+.gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
+.gallery figure{margin:0}
+.gallery img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--panel-2);border-radius:6px;
+             border:1px solid var(--line);cursor:pointer}
+.gallery figcaption{font:10.5px var(--mono);color:var(--ink-faint);margin-top:4px;
+                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ---------- narrow ----------
+   Last in the file on purpose. This block used to sit next to `.app`, above the `.side` rule
+   that sets `height:100vh` — same specificity, later wins, so the override never applied and
+   the stacked sidebar filled the viewport with the page below the fold.
+
+   `align-content:start` is the other half: a grid with a min-height and auto rows stretches
+   them by default. */
+@media (max-width:820px){
+  .app{grid-template-columns:1fr;align-content:start}
+  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
+  .sidefoot{margin-top:0}
+}