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

package/templates/ops/prompts/_inflight.md

@@ -0,0 +1,14 @@
+{{#if inflight}}
+## Human work in flight
+
+People have these pull requests open on the product repos, and each one is theirs. A long-lived
+branch is usually rewriting what you would otherwise be about to change.
+
+- **Do not open competing work on files they touch**: no pull request, and no issue asking for a
+  change there. It gets overtaken when their branch lands, and it costs them a review first.
+- **If you have something to say about that work, say it on their pull request**, briefly, and
+  leave the decision to them.
+- If today's task sits on those files, say so in your report and take the next thing.
+
+{{inflight}}
+{{/if}}

package/templates/ops/prompts/_paths.md

@@ -5,7 +5,8 @@ repos sit side by side inside it:
 
 - `{{staff.dir}}/` - your brain. **Start by reading it.**
 - `{{ops.dir}}/` - the org's shared brain: `org/operating.md`, `org/voice.md`, `org/guardrails.md`,
-  `org/business.md`. **Read-only to you.** Propose a change as a PR; do not edit it in place.
+  `org/business.md`, `org/priorities.md`. **Read-only to you.** Propose a change as a PR; do not
+  edit it in place.
 {{#if peers}}
 {{peer_list}}
 {{/if}}

package/templates/ops/prompts/daily.md

@@ -33,11 +33,15 @@ your brain. Reconstitute yourself, do a day's work, hand off.
    **Do not read `log/decisions.md` at boot**; it is the audit trail, for when you need to know why
    something was decided.
 
+{{> prompts/_inflight.md}}
+{{>? org/priorities.md}}
+
 ## Then work. Autonomously.
 
-Take the top item off #{{staff.status_issue}}'s ordered list, unless something above changed the
-priority, in which case say so in your report and do the more urgent thing. **Then actually do it.**
-You are not writing a plan for {{human.name}} to approve.
+Take the top item off #{{staff.status_issue}}'s ordered list that serves the org's priorities
+(`org/priorities.md`, where there is one), unless something above changed the priority, in which
+case say so in your report and do the more urgent thing. **Then actually do it.** You are not
+writing a plan for {{human.name}} to approve.
 
 {{> org/operating.md}}
 
@@ -48,15 +52,16 @@ You are not writing a plan for {{human.name}} to approve.
 {{#if staff.product}}
 1. **Open the PR** on `{{staff.product.repo}}` if you produced anything there, from a branch:
    `GH_TOKEN=${{staff.public_token_env}} gh pr create --repo {{staff.product.repo}} ...`
-   **Body: what it does, what the gate covered, what it did not cover. Nothing else** - no design
-   essay, no narration of how you built it. It is reviewed on a phone and the diff is right there.
+   **Body: which priority it serves, what it does, what the gate covered, what it did not cover.
+   Nothing else** - no design essay, no narration of how you built it. It is reviewed on a phone
+   and the diff is right there.
 {{/if}}
 2. **Rewrite pinned issue #{{staff.status_issue}} "Where we are"**: the situation in a line, what
    this run did, what the next run picks up in priority order. **It is a handover for the next run,
    not a diary.** Rewrite it, do not append, and cut anything the next run can find for itself.
 3. **Reconcile the tracker.** Open issues for anything new needing {{human.name}}, labelled by owner
-   plus kind, assigned to `{{human.github}}`. Close what genuinely completed, citing evidence.
-   **Never close a `decision` issue.** **Comments and replies get the same concision as everything
+   plus kind, assigned to `{{human.github}}`. Sweep every open issue you opened: close what is done
+   or superseded, citing what closed it. **Comments and replies get the same concision as everything
    else:** what changed and what it means for them. A comment that only says an issue is still open
    is not worth the notification.
 4. **Update `{{staff.dir}}/memory/` only if a fact or watch-out changed.** A new fact is **one line**
@@ -64,6 +69,10 @@ You are not writing a plan for {{human.name}} to approve.
    with "updated:". If it needs an argument, that goes in `memory/notes/<slug>.md` and the line stays
    one line. **Delete any line that no longer changes a decision** and say so in the decision log.
    If the run was purely work, touch nothing.
+   **Then check the budget:** `wc -c {{staff.dir}}/memory/INDEX.md {{staff.dir}}/log/decisions.md`.
+   Over 24KB either, or any fact over 400 characters (unless a `memory:` block in `staff.yaml` or
+   `org.yaml` sets other limits), and pruning is this run's job: delete, shorten, move arguments
+   to notes, and roll older decisions into `log/decisions/<YYYY-MM>.md`.
 5. **Log real decisions** in `{{staff.dir}}/log/decisions.md`, dated, newest at top, with the why.
 {{#if peers}}
 6. **Write to the other staff** if anything shipped, changed or broke that touches their patch.

package/templates/ops/prompts/mention.md

@@ -35,6 +35,8 @@ An issue opened this way often carries a pull request somewhere else, and says w
 
 `gh issue view --comments` is broken; use `gh api` as above.
 
+{{> prompts/_inflight.md}}
+
 ## Do the work
 
 - **Read `{{staff.dir}}/CHARTER.md` and `{{staff.dir}}/memory/INDEX.md` before acting.** They are

package/templates/ops/run-record.mjs

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+// Writes down what one run was and what it cost, after the agent has finished or failed.
+//
+// Vendored alongside compose.mjs for the same reason: it runs on the runner, and must not depend
+// on npm or on an org the tenant does not control.
+//
+// The record is small and deliberately incomplete. Staff, kind, outcome and duration are always
+// known. Turns, cost and tokens are known only when the agent says so: claude-code-action writes
+// an execution file, the `claude` CLI writes JSON when asked, and anything else may say nothing.
+// An unknown is null, never a guess, because a total built from guesses is worse than none.
+//
+// Usage:  node roster-ops/run-record.mjs --out .roster-run/run.json
+//         (everything else arrives in the environment; see session.yaml)
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync, appendFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * The agent's own account of the run, from whatever it wrote.
+ *
+ * Three shapes turn up: an array of messages whose last `result` is the summary (the Action's
+ * execution file), a single result object (`claude -p --output-format json`), and one message
+ * per line (`stream-json`). All three end in the same object, so find that.
+ */
+export function readResult(text) {
+  if (!text || !text.trim()) return null;
+  let items;
+  try {
+    const parsed = JSON.parse(text);
+    items = Array.isArray(parsed) ? parsed : [parsed];
+  } catch {
+    items = [];
+    for (const line of text.split("\n")) {
+      try {
+        items.push(JSON.parse(line));
+      } catch {
+        // A line of log output between the JSON is not ours to fail on.
+      }
+    }
+  }
+  const results = items.filter(
+    (m) => m && typeof m === "object" && (m.type === "result" || "total_cost_usd" in m),
+  );
+  const last = results[results.length - 1];
+  if (!last) return null;
+
+  const n = (v) => (typeof v === "number" && Number.isFinite(v) ? v : null);
+  const u = last.usage ?? {};
+  const tokens = {
+    input: n(u.input_tokens),
+    output: n(u.output_tokens),
+    cache_read: n(u.cache_read_input_tokens),
+    cache_write: n(u.cache_creation_input_tokens),
+  };
+  return {
+    turns: n(last.num_turns),
+    cost_usd: n(last.total_cost_usd ?? last.cost_usd),
+    tokens: Object.values(tokens).some((v) => v !== null) ? tokens : null,
+  };
+}
+
+/**
+ * What happened, in one word.
+ *
+ * The agent step's own outcome when it ran. When it never ran, the job's status says whether
+ * that was a cancel (a timeout is one) or a failure somewhere in the setup before it.
+ */
+export function outcomeOf(agentOutcome, jobStatus) {
+  if (["success", "failure", "cancelled"].includes(agentOutcome)) return agentOutcome;
+  if (jobStatus === "cancelled") return "cancelled";
+  return "setup-failure";
+}
+
+export function buildRecord(env, resultText, now = Date.now()) {
+  const started = Number(env.ROSTER_STARTED) || null;
+  const result = readResult(resultText);
+  return {
+    v: 1,
+    staff: env.STAFF ?? "",
+    kind: env.KIND ?? "",
+    outcome: outcomeOf(env.AGENT_OUTCOME, env.JOB_STATUS),
+    started: started ? new Date(started * 1000).toISOString() : null,
+    duration_s: started ? Math.max(0, Math.round(now / 1000 - started)) : null,
+    agent: env.AGENT_ID || null,
+    model: env.MODEL || null,
+    turns: result?.turns ?? null,
+    cost_usd: result?.cost_usd ?? null,
+    tokens: result?.tokens ?? null,
+    run_id: env.GITHUB_RUN_ID ?? null,
+    run_url:
+      env.GITHUB_SERVER_URL && env.GITHUB_REPOSITORY && env.GITHUB_RUN_ID
+        ? `${env.GITHUB_SERVER_URL}/${env.GITHUB_REPOSITORY}/actions/runs/${env.GITHUB_RUN_ID}`
+        : null,
+  };
+}
+
+/** The same record as the job summary shows it: one table, unknowns as a dash. */
+export function summary(record) {
+  const dash = (v) => (v === null || v === undefined ? "—" : String(v));
+  const mins = record.duration_s === null ? null : `${Math.round(record.duration_s / 60)}m`;
+  const cost = record.cost_usd === null ? null : `$${record.cost_usd.toFixed(2)}`;
+  const t = record.tokens;
+  const tokens = t
+    ? [
+        t.input !== null ? `${t.input} in` : "",
+        t.output !== null ? `${t.output} out` : "",
+        t.cache_read !== null ? `${t.cache_read} cached` : "",
+      ]
+        .filter(Boolean)
+        .join(", ")
+    : null;
+  return [
+    `### ${record.staff} · ${record.kind} · ${record.outcome}`,
+    "",
+    "| duration | turns | cost | tokens | agent |",
+    "|---|---|---|---|---|",
+    `| ${dash(mins)} | ${dash(record.turns)} | ${dash(cost)} | ${dash(tokens)} | ${dash(record.agent)} |`,
+    "",
+  ].join("\n");
+}
+
+function main(argv) {
+  const args = {};
+  for (let i = 0; i < argv.length; i += 2) args[argv[i].replace(/^--/, "")] = argv[i + 1];
+  const out = resolve(args.out ?? ".roster-run/run.json");
+  const file = process.env.RESULT_FILE;
+  const text = file && existsSync(file) ? readFileSync(file, "utf8") : "";
+  const record = buildRecord(process.env, text);
+
+  mkdirSync(dirname(out), { recursive: true });
+  writeFileSync(out, JSON.stringify(record, null, 2) + "\n");
+  if (process.env.GITHUB_STEP_SUMMARY) appendFileSync(process.env.GITHUB_STEP_SUMMARY, summary(record));
+  process.stdout.write(JSON.stringify(record) + "\n");
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === resolve(fileURLToPath(import.meta.url))) {
+  try {
+    main(process.argv.slice(2));
+  } catch (err) {
+    console.error(`run-record: ${err.message}`);
+    process.exit(1);
+  }
+}

package/templates/portal/css/base.css

@@ -1,30 +1,64 @@
 /* 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;
-  --ruled:#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;
+  /* iOS system colours, shared with the website, so the portal and the page that introduces
+     it are one product. The older names below are aliases, kept so every screen's stylesheet
+     reads the same tokens it always has. `--accent` is for text and lines; `--accent-fill`
+     is for solid fills, which on a light background want the brighter green. */
+  --bg:#000000; --bg-elev:#1c1c1e; --surface:#1c1c1e; --surface-2:#2c2c2e;
+  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.16);
+  --text:#f5f5f7; --text-muted:#98989d; --text-faint:#636366;
+  --accent:#30d158; --accent-fill:#30d158; --accent-strong:#30d158;
+  --accent-soft:rgba(48,209,88,.15); --accent-ink:#000000; --accent-dim:rgba(48,209,88,.45);
+  --blue:#0a84ff; --amber:#ff9f0a; --red:#ff453a; --violet:#bf5af2;
+  --side:#161618; --sel:rgba(255,255,255,.10);
+  --hover:rgba(255,255,255,.05); --active:rgba(255,255,255,.10);
+  --shadow-sm:none; --shadow:none;
+  --shadow-lg:0 20px 48px rgba(0,0,0,.6);
+  --ease:cubic-bezier(.2,.8,.2,1);
+  --r-sm:6px; --r:10px; --r-lg:14px;
+  --scroll:rgba(255,255,255,.18); --scroll-hover:rgba(255,255,255,.3);
+  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;
+  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
+
+  --panel:var(--surface); --panel-2:var(--surface-2); --line:var(--border);
+  --ink:var(--text); --ink-dim:var(--text-muted); --ink-faint:var(--text-faint);
+  --warn:var(--amber); --err:var(--red);
+  --ruled:var(--blue); --measured:var(--accent); --derived:var(--violet);
+  color-scheme:dark;
 }
 /* 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;
-    --ruled:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+    --bg:#f5f5f7; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f2f2f7;
+    --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.14);
+    --text:#1d1d1f; --text-muted:#6e6e73; --text-faint:#aeaeb2;
+    --accent:#248a3d; --accent-fill:#34c759; --accent-strong:#248a3d;
+    --accent-soft:rgba(52,199,89,.12); --accent-ink:#ffffff; --accent-dim:rgba(52,199,89,.45);
+    --blue:#007aff; --amber:#c77700; --red:#ff3b30; --violet:#af52de;
+    --side:#ebebf0; --sel:rgba(0,0,0,.07);
+    --hover:rgba(0,0,0,.04); --active:rgba(0,0,0,.07);
+    --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
+    --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
+    --shadow-lg:0 4px 12px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.12);
+    --scroll:rgba(0,0,0,.18); --scroll-hover:rgba(0,0,0,.3);
+    color-scheme:light;
   }
 }
 :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;
-    --ruled:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+    --bg:#f5f5f7; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f2f2f7;
+    --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.14);
+    --text:#1d1d1f; --text-muted:#6e6e73; --text-faint:#aeaeb2;
+    --accent:#248a3d; --accent-fill:#34c759; --accent-strong:#248a3d;
+    --accent-soft:rgba(52,199,89,.12); --accent-ink:#ffffff; --accent-dim:rgba(52,199,89,.45);
+    --blue:#007aff; --amber:#c77700; --red:#ff3b30; --violet:#af52de;
+    --side:#ebebf0; --sel:rgba(0,0,0,.07);
+    --hover:rgba(0,0,0,.04); --active:rgba(0,0,0,.07);
+    --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
+    --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
+    --shadow-lg:0 4px 12px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.12);
+    --scroll:rgba(0,0,0,.18); --scroll-hover:rgba(0,0,0,.3);
+    color-scheme:light;
 }
 
 *{box-sizing:border-box}
@@ -34,47 +68,75 @@
    just stayed on screen. Said once, here. */
 [hidden]{display:none!important}
 
+html{background:var(--bg)}
 body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans);
-     -webkit-font-smoothing:antialiased}
+     font-feature-settings:"cv11","ss01","ss03";-webkit-font-smoothing:antialiased;
+     -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
 a{color:inherit}
+::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
+:focus-visible{outline:none}
+
+/* Scrollbars that belong to the page rather than to the operating system of 2009. */
+*{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
+::-webkit-scrollbar{width:10px;height:10px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:10px;
+      border:3px solid transparent;background-clip:padding-box}
+::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);background-clip:padding-box;
+      border:3px solid transparent}
+::-webkit-scrollbar-corner{background:transparent}
 
-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}
+h1{font:600 22px/1.25 var(--sans);margin:0 0 6px;letter-spacing:-.022em;color:var(--ink)}
+.sub{color:var(--ink-dim);margin:0 0 26px;font-size:13.5px}
 .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}
+.meta{color:var(--ink-faint);font:11.5px var(--mono);font-variant-numeric:tabular-nums}
+.empty{color:var(--ink-faint);padding:32px 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))}
+.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
+      padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-sm);
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
+.card h3{margin:0 0 4px;font:600 14px var(--sans);letter-spacing:-.01em}
+.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
 
 /* ---------- controls ---------- */
-input[type=search],input[type=time],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],input[type=time],input[type=text],select{background:var(--bg-elev);
+  border:1px solid var(--border-strong);color:var(--ink);
+  border-radius:var(--r);padding:7px 11px;font:13px var(--sans);outline:none;
+  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
 input[type=search]{width:280px}
-input[type=search]:focus,input[type=time]: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)}
+input::placeholder,textarea::placeholder{color:var(--ink-faint)}
+input[type=search]:hover,input[type=time]:hover,input[type=text]:hover,select:hover,
+textarea:hover{border-color:color-mix(in srgb,var(--ink) 20%,transparent)}
+input[type=search]:focus,input[type=time]:focus,input[type=text]:focus,select:focus{
+  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+textarea{width:100%;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:10px 12px;font:13px/1.6 var(--sans);outline:none;resize:vertical;
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
+textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 
 /* One size, whether it is a button or a link. They sit in rows together, and `a` taking its
    line-height from the font shorthand while `button` set its own made every such row a set of
    controls at two different heights. */
-.ghbtn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;
-       padding:5px 11px;border:1px solid var(--line);border-radius:7px;
-       font:12px/1.4 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)}
+.ghbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;
+       padding:5px 12px;border:1px solid transparent;border-radius:8px;
+       background:var(--surface-2);
+       font:500 12.5px/1.4 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;
+       transition:background .15s var(--ease),color .15s var(--ease),opacity .15s var(--ease)}
+.ghbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
+.ghbtn:active{opacity:.8}
+.ghbtn:focus-visible,.btn:focus-visible,.iconbtn:focus-visible{
+       border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+button.ghbtn{cursor:pointer;font-family:var(--sans);
+      -webkit-appearance:none;appearance:none;font-size:12.5px;line-height:1.4}
+button.ghbtn:hover{background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
+.ghbtn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:600}
+.ghbtn.primary:hover{background:var(--accent);color:var(--accent-ink);opacity:.88}
+.ghbtn:disabled{opacity:.45;cursor:default}
+.iconbtn{background:var(--surface-2);border:1px solid transparent;color:var(--ink-dim);
+       border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1;
+       transition:background .15s var(--ease),color .15s var(--ease)}
+.iconbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
 .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}
@@ -87,15 +149,17 @@ 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(--ruled);border-color:color-mix(in srgb,var(--ruled) 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)}
+.chip{display:inline-flex;align-items:center;font:500 10.5px/1.5 var(--sans);letter-spacing:.01em;
+      padding:1px 8px;border-radius:999px;border:1px solid transparent;color:var(--ink-dim);
+      background:color-mix(in srgb,var(--ink) 7%,transparent);white-space:nowrap}
+.chip.hot{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
+.chip.warm{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
+.chip.cool{color:var(--ruled);background:color-mix(in srgb,var(--ruled) 12%,transparent)}
+.pill{font:11px var(--mono);color:var(--ink-dim);border:1px solid transparent;
+      background:color-mix(in srgb,var(--ink) 4%,transparent);
+      border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
+kbd{font:500 10.5px var(--mono);border:1px solid var(--border-strong);
+    border-radius:5px;padding:1px 5px;color:var(--ink-dim);background:var(--surface-2)}
 
 /* ---------- waiting ----------
    The inbox reads every repo in the org, which is seconds on a cold cache. What used to stand
@@ -103,15 +167,11 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
    which reads as a page that has failed rather than one that is working. These are the shape
    of what is coming: rows in the list, a title and paragraphs in the viewer. */
 .sk{--skbg:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:6px;
-    background:linear-gradient(90deg,var(--skbg) 25%,
-      color-mix(in srgb,var(--ink) 12%,transparent) 37%,var(--skbg) 63%);
-    background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}
+    background:var(--skbg);animation:pulse 1.4s ease-in-out infinite}
 .sk-row{background:none;animation:none;padding:11px 10px;border-top:1px solid var(--line)}
 .sk-row:first-of-type{border-top:0}
-.sk-row .skbar{height:11px;border-radius:6px;background:inherit;
-    background:linear-gradient(90deg,var(--skbg) 25%,
-      color-mix(in srgb,var(--ink) 12%,transparent) 37%,var(--skbg) 63%);
-    background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}
+.sk-row .skbar{height:11px;border-radius:6px;
+    background:var(--skbg);animation:pulse 1.4s ease-in-out infinite}
 .sk-row .skbar.t{width:84%}
 .sk-row .skbar.m{width:38%;height:8px;margin-top:8px}
 /* Staggered, so the list reads as several things loading rather than one block flashing. */
@@ -125,7 +185,6 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
 .sk-line:last-child{width:42%}
 /* The word beside them. It is the only part a screen reader gets, so it stays real text. */
 .skhead{color:var(--ink-faint);font-size:12.5px;padding:4px 10px 8px}
-@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
 /* A count that is still being fetched is not zero, and an empty badge reads as zero. */
 .nav .n.wait{display:inline-block;width:15px;height:8px;border-radius:5px;
     background:color-mix(in srgb,var(--ink) 10%,transparent);animation:pulse 1.3s ease-in-out infinite}
@@ -134,23 +193,24 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   .sk,.sk-row .skbar,.nav .n.wait{animation:none}
 }
 
-.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{background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid transparent;color:var(--ink-dim);border-radius:var(--r);
+      padding:11px 14px;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{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-elev);
+      color:var(--ink);padding:22px 24px;width:min(560px,92vw);
+      box-shadow:var(--shadow-lg)}
+dialog.ask[open]{animation:dlgin .18s var(--ease)}
+@keyframes dlgin{from{opacity:0;transform:translateY(6px) scale(.985)}}
+dialog.ask::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
+dialog.ask h3{margin:0;font:600 16px var(--sans);letter-spacing:-.018em}
+dialog.ask .askhint{margin:6px 0 14px;font:12.5px/1.55 var(--sans);color:var(--ink-dim)}
 dialog.ask textarea{font:13.5px/1.6 var(--sans);min-height:96px;max-height:44vh}
 /* The attach control, when the dialog is a reply rather than a question. */
 dialog.ask .attach{margin-top:9px}
-dialog.ask .askrow{margin-top:12px;justify-content:flex-end}
+dialog.ask .askrow{margin-top:14px;justify-content:flex-end}
 dialog.ask .askrow .meta{margin-right:auto}
 
 /* The lightbox: an image, over the page, that zooms.
@@ -159,7 +219,7 @@ dialog.ask .askrow .meta{margin-right:auto}
  * from ::backdrop. 60 puts it over the `@` mention list (30) and over the dialog, which is
  * correct: a picture opened from inside a reply box should still open. */
 .lightbox{position:fixed;inset:0;z-index:60;display:flex;
-          background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
+          background:rgba(0,0,0,.82)}
 /* The stage is inset rather than the whole window, and that is not decoration.
    Most images here are screenshots *of this interface*, and one fitted edge to edge reads as
    the app having navigated rather than as a picture of it. The margin of backdrop around it,
@@ -216,3 +276,16 @@ body[data-lightbox] {overflow:hidden}
 
 /* And the affordance on the document side: an image you can open should say so. */
 .md img,img.zoomable{cursor:zoom-in}
+
+/* ---------- a dialog for a whole task (sheet() in dialog.js) ---------- */
+dialog.sheet{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg);
+      color:var(--ink);padding:0;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);
+      box-shadow:var(--shadow-lg)}
+dialog.sheet[open]{animation:dlgin .18s var(--ease)}
+dialog.sheet::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
+.sheetbody{padding:22px 24px 26px;overflow:auto;max-height:calc(100vh - 50px)}
+.sheettitle{margin:0 0 14px;font:600 18px var(--sans);letter-spacing:-.02em}
+.sheetloading{display:grid;place-items:center;min-height:260px}
+.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
+      animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}

package/templates/portal/css/brain.css

@@ -3,10 +3,11 @@
 /* ---------- 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{border:0;border-radius:var(--r);margin-bottom:6px;padding:2px 2px 4px}
+.navgroup + .navgroup{border-top:1px solid var(--line);border-radius:0;padding-top:6px}
 .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)}
+       font:600 11px var(--sans);letter-spacing:.08em;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)}
 
@@ -20,12 +21,12 @@
 /* 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)}
+.tfile[data-within="true"]{background:var(--hover)}
 
 .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)}
+      border:0;color:var(--ink-dim);font:11.5px var(--mono);padding:5px 8px;border-radius:6px;
+      cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
+.tsurface:hover{background:var(--hover);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}
@@ -35,21 +36,22 @@
 .tsfiles .tfile{font-size:12px}
 
 /* ---------- memory cards ---------- */
-.fact{border-bottom:1px solid var(--line);padding:13px 2px;scroll-margin-top:12px}
+.fact{border-bottom:1px solid var(--line);padding:15px 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}
+.fact.lit{background:color-mix(in srgb,var(--warn) 9%,transparent);
+     border-radius:8px;padding-left:12px}
+.slug{font:500 12px var(--mono);color:var(--accent);cursor:pointer}
 .slug:hover{text-decoration:underline}
-.stmt{margin:3px 0 0}
+.stmt{margin:4px 0 0;font-size:14px;color:var(--ink);letter-spacing:-.003em}
 .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.ruled{color:var(--ruled);border-color:var(--ruled)}
-.tag.measured{color:var(--measured);border-color:var(--measured)}
-.tag.derived{color:var(--derived);border-color:var(--derived)}
+.tag{display:inline-block;font:500 10px/1.6 var(--sans);padding:0 7px;border-radius:999px;
+     border:0;color:var(--ink-dim);margin-left:6px;vertical-align:1px;
+     background:color-mix(in srgb,var(--ink) 7%,transparent)}
+.tag.ruled{color:var(--ruled);background:color-mix(in srgb,var(--ruled) 12%,transparent)}
+.tag.measured{color:var(--measured);background:color-mix(in srgb,var(--accent-fill) 14%,transparent)}
+.tag.derived{color:var(--derived);background:color-mix(in srgb,var(--derived) 12%,transparent)}
 .notelink{font:11.5px var(--mono);color:var(--ink-faint);cursor:pointer;margin-left:6px}
 .notelink:hover{color:var(--accent)}
 
@@ -57,8 +59,8 @@
    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)}
+      border:1px solid transparent;
+      border-radius:var(--r);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}
@@ -98,7 +100,8 @@
 
 /* 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{border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;margin:0 3px 6px;
+      background:var(--bg-elev)}
 .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)}
@@ -110,4 +113,4 @@
 /* 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}
+      border-radius:var(--r);padding:11px 13px;margin-bottom:14px}