@yemi33/minions 0.1.2150 → 0.1.2151

package/bin/minions.js

@@ -64,6 +64,10 @@ const PKG_ROOT = path.resolve(__dirname, '..');
 const shared = require(path.join(PKG_ROOT, 'engine', 'shared'));
 const { openUrlInBrowser } = shared;
 const { waitForRestartHealth, formatRestartHealthError } = require(path.join(PKG_ROOT, 'engine', 'restart-health'));
+// Dev-mode dashboard port. `--dev` mode (see argv parser below) retargets
+// MINIONS_HOME at PKG_ROOT and routes the dashboard onto this port so a dev
+// checkout coexists with a global npm install on the normal port (7331).
+const DEFAULT_DEV_DASH_PORT = 7332;
 
 /**
  * Resolve the dashboard port for any CLI command. Precedence (W-mq5nwl9l):
@@ -71,7 +75,7 @@ const { waitForRestartHealth, formatRestartHealthError } = require(path.join(PKG
  *      ACTUALLY bound to. Wins over the chain so status/dash/restart-health
  *      probes the right port even after an EADDRINUSE auto-fallback.
  *   2. Explicit `--port N` CLI flag if present in `argv`.
- *   3. env MINIONS_DASHBOARD_PORT.
+ *   3. env MINIONS_DASHBOARD_PORT (dev mode pre-seeds this with devPort).
  *   4. config.json#engine.dashboardPort.
  *   5. shared.DEFAULT_DASHBOARD_PORT (7331).
  *
@@ -578,7 +582,50 @@ function resolveMinionsHome(forInit = false) {
   return shared.resolveMinionsHome(forInit);
 }
 
-const [cmd, ...rest] = process.argv.slice(2);
+// `--dev` runs the in-place checkout AS the runtime root, on a separate
+// dashboard port (default 7332) so it can coexist with a global npm install on
+// 7331. Only valid when bin/minions.js sits inside a git checkout — the
+// `.git` probe stops the global shim (whose PKG_ROOT lives under
+// node_modules/) from accidentally activating dev mode.
+//
+// We strip --dev / --dev-port <n> from argv BEFORE the cmd/rest split so the
+// flag can appear in any position (`minions --dev help`, `minions help --dev`,
+// `minions --dev start --foo` all work). Otherwise `--dev` as the first arg
+// would be misread as the subcommand.
+const { cmd, rest, devMode, devPort } = (() => {
+  const raw = process.argv.slice(2);
+  const out = [];
+  let dev = process.env.MINIONS_DEV === '1';
+  let port = null;
+  for (let i = 0; i < raw.length; i++) {
+    const arg = raw[i];
+    if (arg === '--dev') { dev = true; continue; }
+    if (arg === '--dev-port') {
+      const next = raw[i + 1];
+      const n = Number(next);
+      if (!Number.isInteger(n) || n <= 0 || n > 65535) {
+        console.error(`\n  --dev-port requires an integer 1-65535, got: ${next || '(missing)'}\n`);
+        process.exit(2);
+      }
+      port = n; dev = true; i++; continue;
+    }
+    if (arg && arg.startsWith('--dev-port=')) {
+      const n = Number(arg.slice('--dev-port='.length));
+      if (!Number.isInteger(n) || n <= 0 || n > 65535) {
+        console.error(`\n  --dev-port=<n> requires an integer 1-65535, got: ${arg}\n`);
+        process.exit(2);
+      }
+      port = n; dev = true; continue;
+    }
+    out.push(arg);
+  }
+  if (dev && port == null) {
+    const envPort = Number(process.env.MINIONS_DEV_PORT);
+    if (Number.isInteger(envPort) && envPort > 0 && envPort <= 65535) port = envPort;
+  }
+  const [firstCmd, ...restArgs] = out;
+  return { cmd: firstCmd, rest: restArgs, devMode: dev, devPort: port || DEFAULT_DEV_DASH_PORT };
+})();
 let force = rest.includes('--force');
 const skipScan = rest.includes('--skip-scan');
 const skipStart = rest.includes('--skip-start') || rest.includes('--no-start');
@@ -587,8 +634,46 @@ const skipStart = rest.includes('--skip-start') || rest.includes('--no-start');
 // when the heuristic mis-fires (e.g. you closed your dashboard tab seconds before
 // running restart and its final heartbeat was still inside the 45s window).
 const forceOpen = rest.includes('--open') || process.env.MINIONS_FORCE_OPEN === '1';
-const MINIONS_HOME = resolveMinionsHome(cmd === 'init');
+// When --dev is set, PKG_ROOT MUST be a git checkout. Without the .git probe a
+// user who typed `minions --dev` from any directory would silently retarget the
+// globally-installed package as its own dev workspace.
+if (devMode && !fs.existsSync(path.join(PKG_ROOT, '.git'))) {
+  console.error(`
+  --dev requires running from a git checkout of minions.
+  This bin/minions.js lives under: ${PKG_ROOT}
+  No .git directory was found there — refusing to retarget runtime files.
+
+  To use dev mode, clone the repo and run from inside it:
+    git clone https://github.com/opg-microsoft/minions.git
+    cd minions && node bin/minions.js --dev restart
+`);
+  process.exit(2);
+}
+
+const MINIONS_HOME = devMode ? PKG_ROOT : resolveMinionsHome(cmd === 'init');
 process.env.MINIONS_HOME = MINIONS_HOME;
+// When --dev is set, force the dashboard chain onto the dev port (7332 by
+// default or --dev-port N) so a dev checkout coexists with a global install
+// on 7331. We seed MINIONS_DASHBOARD_PORT so resolveDashboardPort()'s env
+// step treats devPort as the fallback while still respecting an existing dev
+// runtime-file at PKG_ROOT/engine/dashboard-port.json (runtime-file wins).
+if (devMode) process.env.MINIONS_DASHBOARD_PORT = String(devPort);
+// Effective dashboard port for this CLI invocation. Honors the W-mq5nwl9l
+// chain (runtime-file → --port → env → config → DEFAULT_DASHBOARD_PORT/7331);
+// --dev overrides via the env seed above. Consumed by the watchdog tick
+// callsite below and propagated to children via MINIONS_PORT.
+// Named DASHBOARD_PORT (not the deprecated DASH-underscore-PORT identifier) so
+// the W-mq5nwl9l source-inspection guard in
+// test/unit/dashboard-port-resolution.test.js keeps holding: that test pins
+// that no static `\bDASH_PORT\b` survives, because anything other than the
+// dynamic chain re-introduces the 7331 bug W-mq5nwl9l was opened to fix.
+const DASHBOARD_PORT = resolveDashboardPort(rest).port;
+// Propagate the port to every child (engine, dashboard, delegated subcommands).
+// engine/cli.js status reads MINIONS_PORT; dashboard.js reads PORT. We export
+// MINIONS_PORT for the engine + watch-actions / pipeline / managed-spawn
+// loopback callers that already honor it, and pass PORT explicitly when
+// spawning dashboard.js.
+process.env.MINIONS_PORT = String(DASHBOARD_PORT);
 const POST_UPDATE_INIT_TIMEOUT_MS = 120000;
 const POST_UPDATE_RESTART_TIMEOUT_MS = 60000;
 
@@ -1051,8 +1136,16 @@ if (!cmd || cmd === 'help' || cmd === '--help' || cmd === '-h') {
     minions watchdog uninstall       Remove the scheduled task (idempotent)
     minions watchdog status          Show registration + last-run details from the OS scheduler
     minions watchdog tick            One-shot probe + recovery (used by the scheduler; safe to run by hand)
-
-  Runtime root: ${MINIONS_HOME}
+${fs.existsSync(path.join(PKG_ROOT, '.git')) ? `
+  Dev mode (this checkout, contributors only):
+    minions --dev <cmd>              Run against this checkout instead of ~/.minions/
+                                       MINIONS_HOME=<checkout>, dashboard on :7332.
+                                       Coexists with the global install on :7331.
+    minions --dev --dev-port <n> <cmd>  Override the dev dashboard port.
+    npm run dev                      Shortcut for: node bin/minions.js --dev restart
+` : ''}
+  Runtime root: ${MINIONS_HOME}${devMode ? '  [DEV]' : ''}${devMode ? `
+  Dashboard port: ${DASHBOARD_PORT}  [DEV]` : ''}
 `);
 } else if (cmd === 'init') {
   init();
@@ -1365,7 +1458,7 @@ if (!cmd || cmd === 'help' || cmd === '--help' || cmd === '-h') {
     watchdog.tick({
       minionsHome: MINIONS_HOME,
       minionsBin,
-      dashPort: resolveDashboardPort([]).port,
+      dashPort: DASHBOARD_PORT,
       readEnginePid,
       isPortListening,
       isStopIntentSet: shared.isStopIntentSet || (() => false),

package/dashboard/docs/typography-audit.md

@@ -0,0 +1,128 @@
+# Dashboard typography audit (W-mq1c8og40003a7cf)
+
+This document is the pre-migration audit that justified the token set
+now declared in `dashboard/styles.css` + `dashboard/slim/styles.css`.
+See `dashboard/docs/typography.md` for the contract.
+
+## Findings
+
+### Baseline before this WI
+
+| Surface                       | font-size declarations | Already on tokens?            |
+| ----------------------------- | ---------------------: | ----------------------------- |
+| `dashboard/styles.css` (main) | 179                    | ✅ all `var(--text-*)` except `.prd-item-id { font-size: 0.9em }` (slipped past PR #66 tripwire because the pattern was px-only) |
+| `dashboard/layout.html`       | 20                     | ✅ all `var(--text-*)`        |
+| `dashboard/pages/*.html`      | 32                     | ✅ all `var(--text-*)`        |
+| `dashboard/js/*.js`           | ~530                   | ✅ all `var(--text-*)` except `utils.js:263` `font-size:0.9em` (same em-pattern blind spot as above) |
+| `dashboard/slim/styles.css`   | 82                     | ❌ all literals (slim was explicitly out of scope for PR #66) |
+| `dashboard/slim/body.html`    | 2                      | ❌ inline literals            |
+| **Total**                     | **~845**               | **~84 raw / non-tokenized**   |
+
+The main dashboard was already ~99% tokenized by PR #66
+(`refactor(dashboard): anchor typography scale at 12px, migrate raw px
+to tokens`). Two `0.9em` declarations slipped past its `\d+\s*px`
+tripwire because the regex didn't catch the em form.
+
+The slim UX prototype (`dashboard/slim/*`) was deliberately out of scope
+for PR #66 — slim is a feature-flagged playground anchored at 16px
+body, and its CSS is served from disk on every request so the human can
+hand-edit it (`dashboard/slim/styles.css` header comment).
+
+### Distinct font-size values seen across the audit
+
+(Unique px values, sorted.)
+
+| px | Count | Maps to            | Where                                                      |
+| -: | -----:| ------------------ | ---------------------------------------------------------- |
+| 10 | many  | `--text-xs`        | main dashboard chips/badges                                |
+| 11 | many  | `--text-sm`        | main dashboard status badges                               |
+| 12 | ~30   | `--text-base`      | main dashboard captions + most slim chips/labels           |
+| 13 | ~26   | `--text-md`        | main dashboard default + slim default                      |
+| 14 | ~10   | `--text-lg`        | main dashboard body + slim body                            |
+| 15 | 1     | `--text-lg` (round −1) | slim `.topbar-title`                                   |
+| 16 | ~7    | `--text-xl`        | main dashboard body, slim chat input + msg                 |
+| 17 | 1     | `--text-2xl` (round +1) | slim `.agent-detail-name`                              |
+| 18 | many  | `--text-2xl`       | main dashboard h2 / modal headers                          |
+| 20 | 1     | `--text-2xl` (round −2) | slim `.icon-btn`                                       |
+| 22 | many  | `--text-stat`      | main + slim stat readouts                                  |
+| 24 | 1     | `--text-stat` (round −2) | slim `.member-emoji` (decorative emoji glyph)         |
+| 28 | many  | `--text-stat-lg`   | main + slim large readouts                                 |
+| 32 | many  | `--text-display`   | main dashboard hero / H1                                   |
+| 34 | 1     | `--text-display` (round −2) | slim `.agent-detail-emoji` (decorative emoji)      |
+| em |       |                    |                                                            |
+| 0.9em | 3  | `--text-code`      | inline `<code>` in main + slim                             |
+
+### Rounding decisions (5 sites)
+
+The task contract says: *"prefer rounding to the nearest token over
+inventing a new token. If rounding would visibly change the UI in a way
+you can't justify, flag it in the PR description."*
+
+All five rounded sites are within ±2px of their assigned token:
+
+| Selector                              | Was | Now (token)        | Δ    | Justification                                                  |
+| ------------------------------------- | --: | ------------------ | ---: | -------------------------------------------------------------- |
+| `slim .topbar-title`                  | 15  | 14 `--text-lg`     | −1px | Topbar title — 1px reduction not perceptible at glance         |
+| `slim .agent-detail-name`             | 17  | 18 `--text-2xl`    | +1px | Detail-modal heading — 1px increase matches modal-h3 elsewhere |
+| `slim .icon-btn`                      | 20  | 18 `--text-2xl`    | −2px | Hamburger / close icon — emoji-like glyph                      |
+| `slim .member-emoji`                  | 24  | 22 `--text-stat`   | −2px | Decorative emoji avatar                                        |
+| `slim .agent-detail-emoji`            | 34  | 32 `--text-display`| −2px | Decorative emoji in detail modal                               |
+
+Each rounded site has a `/* Rounded from Npx → Mpx … */` inline comment.
+All five sit inside the feature-flagged slim UX, so the blast radius is
+minimal even if the human decides to revert. If any rounding visibly
+breaks the slim layout, define a one-off custom property scoped to that
+selector and reference it instead of expanding the global token set.
+
+### Tokens chosen — and rejected
+
+**Chosen** (7 role tokens + 1 code token, all alias size primitives):
+
+`--text-role-display`, `--text-heading`, `--text-subheading`,
+`--text-body`, `--text-meta`, `--text-caption`, `--text-micro`,
+`--text-code`.
+
+**Rejected**:
+
+- `--text-h1` / `--text-h2` / `--text-h3` — semantic HTML headings don't
+  map 1:1 to visual roles in this dashboard (`<h1>` in `header` is 18px;
+  PRD section h1s render at 32px). Role names beat heading names.
+- `--text-label` — would overlap with `--text-caption`. Same role.
+- `--text-large` / `--text-medium` / `--text-small` — pure-size names
+  duplicate the primitives without adding semantics.
+- Slim-specific tokens (e.g. `--text-slim-body: 15px`) — would let slim
+  drift further from main. Better to round once and converge.
+- A separate `--icon-*` family for the decorative emoji glyphs — only
+  3 sites, all single-use, and they all happen to round cleanly to an
+  existing primitive. Not worth a parallel token family yet.
+
+### Out of scope (deliberately)
+
+- font-weight, line-height, letter-spacing, color — explicitly out of
+  scope per the task contract; this WI is size-only.
+- font-family — no change.
+- SVG `font-size='90'` inside the favicon `data:image/svg+xml` URL —
+  data URLs can't resolve CSS variables. Allowlisted.
+- The 4 `:root[data-font-size="…"] { --minions-font-scale: … }` rules
+  declare the dashboard zoom scale; they're attribute selectors, not
+  text-size declarations. Allowlisted.
+
+## Regression guard
+
+Extended `test/unit/dashboard-font-size-tokens.test.js`:
+
+- Already covered: main `dashboard/styles.css`, `dashboard/layout.html`,
+  `dashboard/pages/*.html`, `dashboard/js/*.js` for raw `Npx` font-sizes.
+- New in this WI:
+  - Extended file set to include `dashboard/slim/styles.css` and
+    `dashboard/slim/body.html`.
+  - Added pattern for `font-size: Nem|Nrem|N%` (catches the `0.9em`
+    blind spot that hid the two pre-existing inline-code declarations).
+  - Allowlisted the `--text-code: 0.9em` token declaration itself.
+  - Asserted that slim's typography tokens match the main ones
+    (drift-detection between the two stylesheets).
+
+The test runs in `npm test` and `npm run test:sequential`. ESLint
+remains scoped to XSS-prevention (`eslint.config.js`); we don't add a
+second lint plugin for CSS literals because the pure-Node tripwire
+already covers every file type.

package/dashboard/docs/typography.md

@@ -0,0 +1,114 @@
+# Dashboard typography tokens
+
+> Single source of truth for text sizing across the Minions dashboard.
+> Centralized in W-mq1c8og40003a7cf (follow-up to PR #66 size primitives
+> and PR #80 `.btn-add` consolidation).
+
+## Why this exists
+
+The dashboard SPA renders text from ~30 modules (`dashboard/js/render-*.js`,
+`dashboard/pages/*.html`, `dashboard/styles.css`, plus the slim UX prototype
+in `dashboard/slim/`). Without a shared token system, every callsite picks
+its own pixel size. Cards drift, captions disagree, headers don't line up
+across pages, and changing the design language costs ~700 edits.
+
+Two pieces solve this together:
+
+1. **Size primitives** (`--text-xs` ... `--text-display`) — raw px values.
+   The 10 declared sizes cover every visual role the dashboard currently
+   uses. Anchored at `--text-base = 12px`. PR #66 migrated ~664 callsites
+   from raw `Npx` to these tokens.
+2. **Role aliases** (`--text-heading`, `--text-body`, etc.) — semantic
+   names that point at size primitives. Added in W-mq1c8og40003a7cf so
+   new code talks in roles, not px. The size primitive stays the single
+   source of truth; role names are aliases.
+
+## Files this lives in
+
+| File                            | What it owns                                                                                               |
+| ------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `dashboard/styles.css`          | Canonical token declarations (`:root`), utility classes, and main-dashboard CSS rules.                     |
+| `dashboard/slim/styles.css`     | Duplicate token declarations + utility classes for the feature-flagged slim UX (self-contained stylesheet). |
+| `dashboard/docs/typography.md`  | This file — the contract.                                                                                  |
+| `dashboard/docs/typography-audit.md` | The pre-migration audit + rounding decisions.                                                         |
+| `test/unit/dashboard-font-size-tokens.test.js` | Tripwire that fails CI if raw `Npx` / `Nem` font-sizes leak back in.                          |
+
+A tripwire asserts the slim token VALUES match the main values so the
+two stay in lockstep.
+
+## Size primitives
+
+| Token              | Value | Common use                                                |
+| ------------------ | ----- | --------------------------------------------------------- |
+| `--text-xs`        | 10px  | Smallest legitimate text; sidebar badges, count pills     |
+| `--text-sm`        | 11px  | Status badges, chip / tag labels                          |
+| `--text-base`      | 12px  | Captions, secondary metadata, dense table cells           |
+| `--text-md`        | 13px  | Default for slim chat / detail tables / button labels     |
+| `--text-lg`        | 14px  | Body text, modal textarea, card titles                    |
+| `--text-xl`        | 16px  | Main `<body>` font, secondary headers, chat input         |
+| `--text-2xl`       | 18px  | Section headers, page headers, modal h3                   |
+| `--text-stat`      | 22px  | Stat counter readouts, member emoji glyphs                |
+| `--text-stat-lg`   | 28px  | Larger stat readouts, completions-card type emoji         |
+| `--text-display`   | 32px  | Page hero / markdown H1, agent-detail emoji               |
+| `--text-code`      | 0.9em | Inline `<code>` — relative so it scales with parent text  |
+
+> `--text-code` is intentionally relative (`em`, not `px`). Inline code
+> should read 10% smaller than whatever surrounds it. This is the one
+> token that breaks the "all px" rule and is explicitly allowlisted in
+> the tripwire.
+
+## Role aliases (preferred for new code)
+
+Use the role token when adding new UI. It survives a future size-scale
+redesign without callsite edits.
+
+| Role token             | Aliases             | Intended use                              |
+| ---------------------- | ------------------- | ----------------------------------------- |
+| `--text-role-display`  | `--text-display`    | Page hero, dashboard title                |
+| `--text-heading`       | `--text-2xl` (18px) | Section + modal headers                   |
+| `--text-subheading`    | `--text-xl` (16px)  | Secondary headers, card titles            |
+| `--text-body`          | `--text-lg` (14px)  | Default body text, paragraphs             |
+| `--text-meta`          | `--text-md` (13px)  | Captions, timestamps, secondary metadata  |
+| `--text-caption`       | `--text-base` (12px)| Small labels, table cells                 |
+| `--text-micro`         | `--text-sm` (11px)  | Chip / tag pill labels                    |
+| `--text-code`          | (`0.9em`)           | Inline code                               |
+
+## Utility classes
+
+Each role token has a matching utility class for callsites that can't
+write a CSS rule (inline `class="text-meta"`, template strings, etc.).
+Only `font-size` is set — weight, color, line-height stay with the caller.
+
+```html
+<span class="text-meta">3 min ago</span>
+<h3 class="text-heading">Active dispatches</h3>
+<code class="text-code">npm run lint</code>
+```
+
+Available classes: `.text-display`, `.text-heading`, `.text-subheading`,
+`.text-body`, `.text-meta`, `.text-caption`, `.text-micro`, `.text-code`.
+
+## How to add a new text style
+
+1. Pick an existing role token. The 7 roles + 1 code token cover every
+   case the audit found.
+2. If your value doesn't fit any role, round to the nearest primitive
+   and document it inline. Inventing a new token requires changing
+   `dashboard/styles.css`, `dashboard/slim/styles.css`, this doc, AND
+   the tripwire.
+3. NEVER hand-roll `font-size: 14px` in CSS / inline style / JS template
+   string. The tripwire test `test/unit/dashboard-font-size-tokens.test.js`
+   fails CI.
+
+## Exceptions / allowlist
+
+These declarations are intentional and exempt from the tripwire:
+
+- `:root[data-font-size="…"]` rules in `dashboard/styles.css` — these
+  declare the user-level zoom scale, not text size.
+- SVG `font-size='90'` inside the `data:image/svg+xml` favicon link in
+  `dashboard/layout.html` and `dashboard/slim/layout.html` — runtime
+  data URL, CSS variables don't resolve inside it.
+- The `--text-*` token declarations themselves in `:root` blocks.
+
+Everything else MUST go through a token.

package/dashboard/js/render-agents.js

@@ -82,7 +82,7 @@ async function openAgentDetail(id) {
   // guarantees no HTML interpretation even if the escape function were ever bypassed.
   const nameEl = document.getElementById('detail-agent-name');
   const emojiSpan = document.createElement('span');
-  emojiSpan.style.fontSize = '22px';
+  emojiSpan.style.fontSize = 'var(--text-stat)';
   emojiSpan.textContent = agent.emoji || '';
   // Runtime tag \u2014 uses the inline-SVG logo from the same RUNTIME_TAGS map the
   // card uses, so the visual is consistent. The container's user-controlled

package/dashboard/js/utils.js

@@ -280,7 +280,7 @@ function _renderMdCore(s) {
   }).join('\n');
 
   html = html.replace(/`([^`\n]+)`/g, function(_, code) {
-    codeSlots.push('<code style="background:var(--bg);padding:1px 4px;border-radius:3px;font-size:0.9em">' + code + '</code>');
+    codeSlots.push('<code style="background:var(--bg);padding:1px 4px;border-radius:3px;font-size:var(--text-code)">' + code + '</code>');
     return '\x00CB' + (codeSlots.length - 1) + '\x00';
   });
 

package/dashboard/slim/body.html

@@ -300,10 +300,10 @@
     <div class="modal-body">
       <p>Point to a local git repository. Minions will read its remote, name, and main branch automatically.</p>
       <div style="display:flex; gap:8px; align-items:stretch">
-        <input id="slim-add-project-path" type="text" placeholder="C:\path\to\repo" style="flex:1; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:13px; font-family:inherit">
+        <input id="slim-add-project-path" type="text" placeholder="C:\path\to\repo" style="flex:1; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:var(--text-md); font-family:inherit">
         <button id="slim-add-project-browse" class="btn-secondary" type="button">Browse&hellip;</button>
       </div>
-      <div id="slim-add-project-msg" style="margin-top:10px; font-size:12px; min-height:16px"></div>
+      <div id="slim-add-project-msg" style="margin-top:10px; font-size:var(--text-base); min-height:16px"></div>
     </div>
     <div class="modal-footer">
       <button id="slim-add-project-cancel" class="btn-secondary" type="button">Cancel</button>

package/dashboard/slim/styles.css

@@ -22,8 +22,38 @@
       --amber: #d29922;
       --red: #f85149;
       --radius: 6px;
+
+      /* Typography — mirrors dashboard/styles.css :root tokens
+         (W-mq1c8og40003a7cf). Slim ships its CSS independently
+         (template-baked into slim/layout.html), so we duplicate the
+         token VALUES here verbatim — see dashboard/docs/typography.md.
+         A tripwire test asserts the slim and main tokens stay in
+         sync (test/unit/dashboard-font-size-tokens.test.js). */
+      --text-xs: 10px; --text-sm: 11px; --text-base: 12px;
+      --text-md: 13px; --text-lg: 14px; --text-xl: 16px; --text-2xl: 18px;
+      --text-stat: 22px; --text-stat-lg: 28px; --text-display: 32px;
+      --text-role-display:    var(--text-display);
+      --text-heading:         var(--text-2xl);
+      --text-subheading:      var(--text-xl);
+      --text-body:            var(--text-lg);
+      --text-meta:            var(--text-md);
+      --text-caption:         var(--text-base);
+      --text-micro:           var(--text-sm);
+      --text-code:            0.9em;
     }
 
+    /* Typography utility classes — see dashboard/styles.css for the
+       canonical declarations; slim duplicates because the two
+       stylesheets are served independently. */
+    .text-display    { font-size: var(--text-role-display); }
+    .text-heading    { font-size: var(--text-heading); }
+    .text-subheading { font-size: var(--text-subheading); }
+    .text-body       { font-size: var(--text-body); }
+    .text-meta       { font-size: var(--text-meta); }
+    .text-caption    { font-size: var(--text-caption); }
+    .text-micro      { font-size: var(--text-micro); }
+    .text-code       { font-size: var(--text-code); }
+
     * { box-sizing: border-box; }
 
     /* Typography baseline (slim UX foundation phase).
@@ -41,7 +71,7 @@
       background: var(--bg);
       color: var(--text);
       font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-      font-size: 16px;
+      font-size: var(--text-xl);
       line-height: 1.5;
     }
 
@@ -89,7 +119,8 @@
     }
     .topbar-title {
       font-weight: 600;
-      font-size: 15px;
+      /* Rounded from 15px → 14px (--text-lg) in W-mq1c8og40003a7cf typography centralization. */
+      font-size: var(--text-lg);
       color: var(--text);
       letter-spacing: 0.3px;
     }
@@ -97,7 +128,7 @@
       display: inline-block;
       margin-left: 8px;
       padding: 1px 6px;
-      font-size: 12px;
+      font-size: var(--text-base);
       font-weight: 700;
       letter-spacing: 0.5px;
       color: var(--blue);
@@ -125,7 +156,8 @@
       border: none;
       cursor: pointer;
       color: var(--muted);
-      font-size: 20px;
+      /* Rounded from 20px → 18px (--text-2xl) in W-mq1c8og40003a7cf typography centralization. */
+      font-size: var(--text-2xl);
       line-height: 1;
       padding: 6px 10px;
       border-radius: var(--radius);
@@ -164,7 +196,7 @@
     }
     .panel-header {
       padding: 9px 14px;
-      font-size: 12px;
+      font-size: var(--text-base);
       font-weight: 700;
       letter-spacing: 0.7px;
       text-transform: uppercase;
@@ -180,7 +212,7 @@
       letter-spacing: 0;
       font-weight: 400;
       color: var(--muted);
-      font-size: 12px;
+      font-size: var(--text-base);
     }
     .panel-body {
       flex: 1;
@@ -191,7 +223,7 @@
     .panel-placeholder {
       color: var(--muted);
       font-style: italic;
-      font-size: 14px;
+      font-size: var(--text-lg);
     }
 
     .panel-actions { grid-area: actions; }
@@ -223,7 +255,7 @@
     }
     .chat-empty {
       color: var(--muted);
-      font-size: 14px;
+      font-size: var(--text-lg);
       font-style: italic;
       text-align: center;
       margin-top: 24px;
@@ -234,7 +266,7 @@
       border-radius: var(--radius);
       white-space: pre-wrap;
       word-wrap: break-word;
-      font-size: 16px;
+      font-size: var(--text-xl);
     }
     .chat-msg.user {
       align-self: flex-end;
@@ -251,7 +283,7 @@
       align-self: center;
       background: transparent;
       color: var(--muted);
-      font-size: 13px;
+      font-size: var(--text-md);
       font-style: italic;
     }
     .chat-msg.error {
@@ -259,7 +291,7 @@
       background: rgba(248, 81, 73, 0.1);
       color: var(--red);
       border: 1px solid var(--red);
-      font-size: 14px;
+      font-size: var(--text-lg);
     }
     .chat-input-wrap {
       display: flex;
@@ -290,14 +322,14 @@
       max-width: 800px;
       margin-left: auto;
       margin-right: auto;
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
     }
     .chat-context-strip .context-label {
       text-transform: uppercase;
       letter-spacing: 0.5px;
       font-weight: 700;
-      font-size: 12px;
+      font-size: var(--text-base);
     }
     .chat-context-strip select {
       background: var(--bg);
@@ -306,7 +338,7 @@
       border-radius: var(--radius);
       padding: 4px 8px;
       font-family: inherit;
-      font-size: 12px;
+      font-size: var(--text-base);
       cursor: pointer;
     }
     .chat-context-strip select:focus { outline: none; border-color: var(--blue); }
@@ -324,7 +356,7 @@
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 3px 9px;
-      font-size: 12px;
+      font-size: var(--text-base);
       cursor: pointer;
       line-height: 1;
     }
@@ -339,7 +371,7 @@
       color: var(--text);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      font-size: 16px;
+      font-size: var(--text-xl);
       font-family: inherit;
       resize: none;
       /* >= 2 lines visible by default. 16px font * 1.5 line-height = 24px/line,
@@ -354,7 +386,7 @@
       color: #fff;
       border: none;
       border-radius: var(--radius);
-      font-size: 14px;
+      font-size: var(--text-lg);
       font-weight: 600;
       cursor: pointer;
       align-self: flex-end;
@@ -367,7 +399,7 @@
       color: var(--red);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      font-size: 13px;
+      font-size: var(--text-md);
       cursor: pointer;
       align-self: flex-end;
       display: none;
@@ -413,7 +445,7 @@
     }
     .chat-tool {
       color: var(--muted);
-      font-size: 12px;
+      font-size: var(--text-base);
       line-height: 1.5;
       font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       white-space: nowrap;
@@ -425,7 +457,7 @@
     /* Tool-calls modal: full list, wrapped so long commands are readable. */
     .tools-modal-line {
       font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--text);
       padding: 5px 0;
       border-bottom: 1px solid var(--border);
@@ -434,7 +466,7 @@
     }
     .tools-modal-line::before { content: "● "; color: var(--muted); }
     .tools-modal-line:last-child { border-bottom: none; }
-    .tools-modal-empty { color: var(--muted); font-style: italic; font-size: 13px; }
+    .tools-modal-empty { color: var(--muted); font-style: italic; font-size: var(--text-md); }
     /* Wide enough to span the Actions + Status columns (820 + 10 gap + 548). */
     #slim-tools-modal .modal {
       width: 1378px;
@@ -458,13 +490,13 @@
     a.tile-item:hover { border-color: var(--blue); }
     .tile-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
     .tile-item-title {
-      font-size: 14px; font-weight: 600; color: var(--text);
+      font-size: var(--text-lg); font-weight: 600; color: var(--text);
       min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
-    .tile-item-meta { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }
+    .tile-item-meta { font-size: var(--text-base); color: var(--muted); margin-top: 3px; word-break: break-word; }
     .tile-chip {
       flex: 0 0 auto;
-      font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
+      font-size: var(--text-base); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
       padding: 1px 7px; border-radius: 10px;
       background: var(--surface); border: 1px solid var(--border); color: var(--muted);
     }
@@ -472,7 +504,7 @@
     .tile-chip.amber { background: rgba(210, 153, 34, 0.15); color: var(--amber); border-color: var(--amber); }
     .tile-chip.red   { background: rgba(248, 81, 73, 0.15);  color: var(--red);   border-color: var(--red); }
     .tile-chip.blue  { background: rgba(88, 166, 255, 0.12); color: var(--blue);  border-color: var(--blue); }
-    .tile-empty { color: var(--muted); font-style: italic; font-size: 13px; }
+    .tile-empty { color: var(--muted); font-style: italic; font-size: var(--text-md); }
 
     /* Pinned-context list rows (slim-pinned-modal). */
     .pinned-row {
@@ -499,7 +531,7 @@
 
     .chat-thinking {
       color: var(--muted);
-      font-size: 13px;
+      font-size: var(--text-md);
       font-style: italic;
     }
     .chat-thinking-dots {
@@ -526,7 +558,7 @@
       align-self: flex-start;
       padding: 5px 11px;
       border-radius: 4px;
-      font-size: 12px;
+      font-size: var(--text-base);
       border: 1px dashed var(--border);
       color: var(--muted);
     }
@@ -543,14 +575,14 @@
       background: var(--bg);
       padding: 1px 4px;
       border-radius: 3px;
-      font-size: 0.9em;
+      font-size: var(--text-code);
     }
     .chat-msg.assistant pre {
       background: var(--bg);
       padding: 10px;
       border-radius: 4px;
       overflow-x: auto;
-      font-size: 14px;
+      font-size: var(--text-lg);
       margin: 6px 0;
     }
     .chat-msg.assistant pre code { background: none; padding: 0; }
@@ -577,7 +609,7 @@
       border-radius: var(--radius);
       padding: 10px 12px;
       cursor: pointer;
-      font-size: 13px;
+      font-size: var(--text-md);
       font-family: inherit;
       display: flex;
       flex-direction: column;
@@ -602,28 +634,28 @@
     .act-ic-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M9%207C9.55228%207%2010%207.44772%2010%208C10%208.51284%209.61396%208.93551%209.11662%208.99327L9%209H7C5.34315%209%204%2010.3431%204%2012C4%2013.5977%205.24892%2014.9037%206.82373%2014.9949L7%2015H9C9.55228%2015%2010%2015.4477%2010%2016C10%2016.5128%209.61396%2016.9355%209.11662%2016.9933L9%2017H7C4.23858%2017%202%2014.7614%202%2012C2%209.31125%204.12231%207.11818%206.78311%207.00462L7%207H9ZM17%207C19.7614%207%2022%209.23858%2022%2012C22%2014.6888%2019.8777%2016.8818%2017.2169%2016.9954L17%2017H15C14.4477%2017%2014%2016.5523%2014%2016C14%2015.4872%2014.386%2015.0645%2014.8834%2015.0067L15%2015H17C18.6569%2015%2020%2013.6569%2020%2012C20%2010.4023%2018.7511%209.09634%2017.1763%209.00509L17%209H15C14.4477%209%2014%208.55228%2014%208C14%207.48716%2014.386%207.06449%2014.8834%207.00673L15%207H17ZM7%2011H17C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5128%2017.614%2012.9355%2017.1166%2012.9933L17%2013H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4872%206.38604%2011.0645%206.88338%2011.0067L7%2011H17H7Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M9%207C9.55228%207%2010%207.44772%2010%208C10%208.51284%209.61396%208.93551%209.11662%208.99327L9%209H7C5.34315%209%204%2010.3431%204%2012C4%2013.5977%205.24892%2014.9037%206.82373%2014.9949L7%2015H9C9.55228%2015%2010%2015.4477%2010%2016C10%2016.5128%209.61396%2016.9355%209.11662%2016.9933L9%2017H7C4.23858%2017%202%2014.7614%202%2012C2%209.31125%204.12231%207.11818%206.78311%207.00462L7%207H9ZM17%207C19.7614%207%2022%209.23858%2022%2012C22%2014.6888%2019.8777%2016.8818%2017.2169%2016.9954L17%2017H15C14.4477%2017%2014%2016.5523%2014%2016C14%2015.4872%2014.386%2015.0645%2014.8834%2015.0067L15%2015H17C18.6569%2015%2020%2013.6569%2020%2012C20%2010.4023%2018.7511%209.09634%2017.1763%209.00509L17%209H15C14.4477%209%2014%208.55228%2014%208C14%207.48716%2014.386%207.06449%2014.8834%207.00673L15%207H17ZM7%2011H17C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5128%2017.614%2012.9355%2017.1166%2012.9933L17%2013H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4872%206.38604%2011.0645%206.88338%2011.0067L7%2011H17H7Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); }
     .act-ic-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M21.0682%207.75765L16.2425%202.93189C14.9152%201.60462%2012.6777%201.96772%2011.8382%203.6466L9.40281%208.51748C9.31512%208.69287%209.16223%208.82694%208.97688%208.89096L4.81061%2010.3302C3.93791%2010.6317%203.682%2011.7427%204.33487%2012.3956L7.43936%2015.5001L3.00008%2019.9394L3%2021.0001H4.06074L8.50002%2016.5607L11.6045%2019.6653C12.2574%2020.3181%2013.3684%2020.0622%2013.6699%2019.1895L15.1092%2015.0232C15.1732%2014.8379%2015.3073%2014.685%2015.4826%2014.5973L20.3535%2012.1619C22.0324%2011.3224%2022.3955%209.08491%2021.0682%207.75765Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M21.0682%207.75765L16.2425%202.93189C14.9152%201.60462%2012.6777%201.96772%2011.8382%203.6466L9.40281%208.51748C9.31512%208.69287%209.16223%208.82694%208.97688%208.89096L4.81061%2010.3302C3.93791%2010.6317%203.682%2011.7427%204.33487%2012.3956L7.43936%2015.5001L3.00008%2019.9394L3%2021.0001H4.06074L8.50002%2016.5607L11.6045%2019.6653C12.2574%2020.3181%2013.3684%2020.0622%2013.6699%2019.1895L15.1092%2015.0232C15.1732%2014.8379%2015.3073%2014.685%2015.4826%2014.5973L20.3535%2012.1619C22.0324%2011.3224%2022.3955%209.08491%2021.0682%207.75765Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); }
     .link-pr-btn .link-pr-label { font-weight: 600; }
-    .link-pr-btn .link-pr-sub { font-size: 12px; color: var(--muted); }
+    .link-pr-btn .link-pr-sub { font-size: var(--text-base); color: var(--muted); }
 
     /* Link-PR dialog fields + the "+ Link PR" chip (tile corner + modal header). */
-    .linkpr-label { display: block; color: var(--text); font-size: 13px; margin-bottom: 10px; }
+    .linkpr-label { display: block; color: var(--text); font-size: var(--text-md); margin-bottom: 10px; }
     .linkpr-input {
       display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
       background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
-      color: var(--text); font-size: 13px; font-family: inherit; resize: vertical;
+      color: var(--text); font-size: var(--text-md); font-family: inherit; resize: vertical;
     }
     .linkpr-input:focus { outline: none; border-color: var(--blue); }
-    .linkpr-check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; cursor: pointer; margin-bottom: 4px; }
+    .linkpr-check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--text-md); cursor: pointer; margin-bottom: 4px; }
     .linkpr-check input { width: 16px; height: 16px; accent-color: var(--blue); }
     .linkpr-hint-inline { color: var(--muted); font-weight: 400; }
-    .linkpr-hint { font-size: 12px; color: var(--muted); padding-left: 24px; }
+    .linkpr-hint { font-size: var(--text-base); color: var(--muted); padding-left: 24px; }
     .linkpr-warning {
       padding: 8px 12px; margin-bottom: 10px;
       background: rgba(210, 153, 34, 0.15); border: 1px solid rgba(210, 153, 34, 0.3);
-      border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text);
+      border-radius: var(--radius); font-size: var(--text-md); line-height: 1.5; color: var(--text);
     }
     .linkpr-warning-title { font-weight: 700; margin-bottom: 2px; color: var(--amber); }
     .linkpr-chip {
-      font-size: 12px; font-weight: 600;
+      font-size: var(--text-base); font-weight: 600;
       padding: 1px 8px; border-radius: 10px;
       background: rgba(63, 185, 80, 0.12); color: var(--green); border: 1px solid var(--green);
       cursor: pointer; font-family: inherit;
@@ -671,7 +703,7 @@
       background: rgba(248, 81, 73, 0.08);
     }
     .cockpit-label {
-      font-size: 12px;
+      font-size: var(--text-base);
       font-weight: 700;
       letter-spacing: 0.6px;
       text-transform: uppercase;
@@ -692,14 +724,14 @@
     .lit-amber .cockpit-dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
     .lit-red   .cockpit-dot { background: var(--red);   box-shadow: 0 0 6px var(--red); }
     .cockpit-value {
-      font-size: 22px;
+      font-size: var(--text-stat);
       font-weight: 700;
       color: var(--text);
       line-height: 1;
     }
     .cockpit-value.dim { color: var(--muted); }
     .cockpit-detail {
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
       line-height: 1.3;
       min-height: 14px;
@@ -726,7 +758,7 @@
     .member-empty {
       grid-column: 1 / -1;
       color: var(--muted);
-      font-size: 13px;
+      font-size: var(--text-md);
       font-style: italic;
     }
     .member-card {
@@ -750,9 +782,10 @@
     .member-card.working { border-color: rgba(210, 153, 34, 0.6); }
     .member-card.done    { border-color: rgba(63, 185, 80, 0.6); }
     .member-card.error   { border-color: rgba(248, 81, 73, 0.6); }
-    .member-emoji { font-size: 24px; line-height: 1; }
+    /* Rounded from 24px → 22px (--text-stat) in W-mq1c8og40003a7cf typography centralization. Emoji glyph; 2px diff is visually negligible. */
+    .member-emoji { font-size: var(--text-stat); line-height: 1; }
     .member-name {
-      font-size: 13px;
+      font-size: var(--text-md);
       font-weight: 600;
       line-height: 1.2;
       color: var(--text);
@@ -762,7 +795,7 @@
       white-space: nowrap;
     }
     .member-role {
-      font-size: 12px;
+      font-size: var(--text-base);
       line-height: 1.2;
       color: var(--muted);
       max-width: 100%;
@@ -774,7 +807,7 @@
        status-badge but tuned to the slim token palette. */
     .member-status {
       margin-top: 2px;
-      font-size: 12px;
+      font-size: var(--text-base);
       font-weight: 700;
       letter-spacing: 0.5px;
       text-transform: uppercase;
@@ -812,19 +845,21 @@
       gap: 12px;
       margin-bottom: 14px;
     }
-    .agent-detail-emoji { font-size: 34px; line-height: 1; }
-    .agent-detail-name { font-size: 17px; font-weight: 600; color: var(--text); }
-    .agent-detail-role { font-size: 13px; color: var(--muted); }
+    /* Rounded from 34px → 32px (--text-display) in W-mq1c8og40003a7cf typography centralization. Emoji glyph; 2px diff is visually negligible. */
+    .agent-detail-emoji { font-size: var(--text-display); line-height: 1; }
+    /* Rounded from 17px → 18px (--text-2xl) in W-mq1c8og40003a7cf typography centralization. */
+    .agent-detail-name { font-size: var(--text-2xl); font-weight: 600; color: var(--text); }
+    .agent-detail-role { font-size: var(--text-md); color: var(--muted); }
     .agent-detail-row { margin-bottom: 12px; }
     .agent-detail-key {
-      font-size: 12px;
+      font-size: var(--text-base);
       font-weight: 700;
       letter-spacing: 0.5px;
       text-transform: uppercase;
       color: var(--muted);
       margin-bottom: 3px;
     }
-    .agent-detail-val { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
+    .agent-detail-val { font-size: var(--text-md); color: var(--text); white-space: pre-wrap; word-break: break-word; }
     .agent-detail-val.muted { color: var(--muted); font-style: italic; }
 
     /* ── History panel: event log ─────────────────────────────── */
@@ -851,27 +886,27 @@
       justify-content: space-between;
       align-items: baseline;
       gap: 8px;
-      font-size: 13px;
+      font-size: var(--text-md);
     }
     .history-kind {
       font-weight: 700;
       letter-spacing: 0.4px;
       text-transform: uppercase;
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
     }
     .history-time {
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
       white-space: nowrap;
     }
     .history-title {
-      font-size: 13px;
+      font-size: var(--text-md);
       color: var(--text);
       word-break: break-word;
     }
     .history-meta {
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
       word-break: break-word;
     }
@@ -879,7 +914,7 @@
     .history-empty {
       color: var(--muted);
       font-style: italic;
-      font-size: 13px;
+      font-size: var(--text-md);
     }
 
     /* ╔══════════════════════════════════════════════════════════════════╗
@@ -941,7 +976,7 @@
       justify-content: center;
       gap: 4px;
       color: var(--muted);
-      font-size: 12px;
+      font-size: var(--text-base);
     }
     .completions-card-body-top {
       /* parent grid cell (col 2, row 1) — wraps title and optional
@@ -958,7 +993,7 @@
        relative time so the rail's bottom row reads as a single quiet line:
        `✓ · 8h ago`. */
     .completions-card-status-icon {
-      font-size: 12px;
+      font-size: var(--text-base);
       line-height: 1;
       color: var(--muted);
     }
@@ -1036,7 +1071,7 @@
        but a larger font so it reads as the rail's primary type marker. */
     .completions-card-type-word {
       font-family: 'Consolas', 'Courier New', monospace;
-      font-size: 14px;
+      font-size: var(--text-lg);
       font-weight: 700;
       letter-spacing: 0.5px;
       line-height: 1;
@@ -1049,12 +1084,12 @@
       cursor: help;
     }
     .completions-card-time {
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
       white-space: nowrap;
     }
     .completions-card-title {
-      font-size: 16px;
+      font-size: var(--text-xl);
       color: var(--text);
       line-height: 1.35;
       /* Always reserve two lines so cards have a consistent vertical
@@ -1070,7 +1105,7 @@
     /* Byline — "Agent · Role" under the title. Quiet (muted, small) so the
        title stays primary, but always present so every row names its owner. */
     .completions-card-byline {
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
       white-space: nowrap;
       overflow: hidden;
@@ -1078,7 +1113,7 @@
       min-width: 0;
     }
     .completions-card-fail-line {
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--red);
       word-break: break-word;
     }
@@ -1092,7 +1127,7 @@
        above the chips is supplied by the parent card grid's row gap. */
     .completions-card-lineage {
       grid-column: 2;             /* cell 2,2 of the parent card grid */
-      font-size: 12px;
+      font-size: var(--text-base);
       color: var(--muted);
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
@@ -1101,7 +1136,7 @@
     }
     .completions-card-chip {
       font-family: 'Consolas', 'Courier New', monospace;
-      font-size: 12px;
+      font-size: var(--text-base);
       background: var(--bg);
       border: 1px solid var(--border);
       border-radius: 3px;
@@ -1146,7 +1181,7 @@
     .completions-modal-section { margin-bottom: 14px; }
     .completions-modal-section:last-child { margin-bottom: 0; }
     .completions-modal-label {
-      font-size: 12px;
+      font-size: var(--text-base);
       font-weight: 700;
       letter-spacing: 0.4px;
       text-transform: uppercase;
@@ -1154,14 +1189,14 @@
       margin-bottom: 4px;
     }
     .completions-modal-value {
-      font-size: 13px;
+      font-size: var(--text-md);
       color: var(--text);
       word-break: break-word;
       white-space: pre-wrap;
     }
     .completions-modal-report {
       font-family: 'Consolas', 'Courier New', monospace;
-      font-size: 12px;
+      font-size: var(--text-base);
       background: var(--bg);
       border: 1px solid var(--border);
       border-radius: var(--radius);
@@ -1209,9 +1244,9 @@
       padding: 12px 16px;
       border-bottom: 1px solid var(--border);
     }
-    .modal-header h3 { margin: 0; font-size: 16px; color: var(--blue); }
+    .modal-header h3 { margin: 0; font-size: var(--text-xl); color: var(--blue); }
     .modal-body { padding: 14px 18px; overflow-y: auto; }
-    .modal-body p { color: var(--muted); margin: 4px 0 12px; font-size: 13px; }
+    .modal-body p { color: var(--muted); margin: 4px 0 12px; font-size: var(--text-md); }
     .modal-footer {
       padding: 10px 16px;
       border-top: 1px solid var(--border);
@@ -1226,7 +1261,7 @@
       border: none;
       border-radius: var(--radius);
       cursor: pointer;
-      font-size: 13px;
+      font-size: var(--text-md);
       font-weight: 600;
     }
     .btn-secondary {
@@ -1236,7 +1271,7 @@
       border: 1px solid var(--border);
       border-radius: var(--radius);
       cursor: pointer;
-      font-size: 13px;
+      font-size: var(--text-md);
     }
     .btn-primary:hover, .btn-secondary:hover { filter: brightness(1.1); }
 
@@ -1248,9 +1283,9 @@
       border-bottom: 1px solid var(--border);
     }
     .flag-row:last-child { border-bottom: none; }
-    .flag-name { font-size: 14px; font-weight: 600; }
-    .flag-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
-    .flag-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+    .flag-name { font-size: var(--text-lg); font-weight: 600; }
+    .flag-desc { font-size: var(--text-base); color: var(--muted); margin-top: 2px; }
+    .flag-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); }
     .flag-toggle input { cursor: pointer; }
     .settings-link {
       display: block;
@@ -1261,7 +1296,7 @@
       border-radius: var(--radius);
       color: var(--blue);
       text-decoration: none;
-      font-size: 13px;
+      font-size: var(--text-md);
       text-align: center;
     }
     .settings-link:hover { filter: brightness(1.1); }
@@ -1274,7 +1309,7 @@
       color: var(--text);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      font-size: 14px;
+      font-size: var(--text-lg);
       font-family: inherit;
       resize: vertical;
     }

package/dashboard/styles.css

@@ -3,7 +3,7 @@
        [data-font-size] on <html>. 'small' is the historic default (1.0) so
        existing users see no change. Body-level CSS `zoom` is the cheapest
        way to scale every px/em/rem rule across the SPA (typography tokens
-       below, slim.html, and the many inline `font-size:11px` styles) without
+       below, slim.html, and the many inline font-size Npx styles) without
        rewriting every rule. Scales modals, drawers, and fixed-position
        elements because they all live inside <body>. */
     --minions-font-scale: 1;
@@ -15,11 +15,30 @@
     --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px;
     --space-5: 10px; --space-6: 12px; --space-7: 16px; --space-8: 20px; --space-9: 24px;
 
-    /* Typography scale */
+    /* Typography — size primitives (raw px). Source of truth for the
+       ~700 callsites migrated in PR #66; do NOT introduce new raw `Npx`
+       font-sizes outside this block. Tripwire:
+       test/unit/dashboard-font-size-tokens.test.js */
     --text-xs: 10px; --text-sm: 11px; --text-base: 12px;
     --text-md: 13px; --text-lg: 14px; --text-xl: 16px; --text-2xl: 18px;
     --text-stat: 22px; --text-stat-lg: 28px; --text-display: 32px;
 
+    /* Typography — role aliases (W-mq1c8og40003a7cf). Prefer these for
+       NEW code: the role names survive a size-scale redesign while the
+       primitives do not. Existing callsites that still reference the
+       size primitives directly are kept (they're correct by
+       construction — every role alias is just an indirection). See
+       dashboard/docs/typography.md for the role → primitive map and
+       intended use. */
+    --text-role-display:    var(--text-display);  /* 32px — hero / page title */
+    --text-heading:         var(--text-2xl);      /* 18px — section + modal headers */
+    --text-subheading:      var(--text-xl);       /* 16px — secondary headers, card titles */
+    --text-body:            var(--text-lg);       /* 14px — default body text */
+    --text-meta:            var(--text-md);       /* 13px — captions, timestamps, secondary metadata */
+    --text-caption:         var(--text-base);     /* 12px — small labels, table cells */
+    --text-micro:           var(--text-sm);       /* 11px — chip / tag pill labels */
+    --text-code:            0.9em;                /* inline code; relative so it scales with the surrounding text */
+
     /* Border radius */
     --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-full: 50%;
 
@@ -43,6 +62,21 @@
   html, body { height: 100%; margin: 0; overflow: hidden; }
   body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: var(--text-xl); display: flex; flex-direction: column; zoom: var(--minions-font-scale, 1); }
 
+  /* Typography utility classes (W-mq1c8og40003a7cf).
+     One class per role token. Apply directly on any element
+     (`<span class="text-meta">`) so JS/HTML callsites don't need to
+     hand-roll inline `style="font-size:var(--text-*)"`. The classes
+     ONLY set font-size — weight, color, line-height stay with the
+     caller. Mirrors the `.btn-add` consolidation in spirit. */
+  .text-display    { font-size: var(--text-role-display); }
+  .text-heading    { font-size: var(--text-heading); }
+  .text-subheading { font-size: var(--text-subheading); }
+  .text-body       { font-size: var(--text-body); }
+  .text-meta       { font-size: var(--text-meta); }
+  .text-caption    { font-size: var(--text-caption); }
+  .text-micro      { font-size: var(--text-micro); }
+  .text-code       { font-size: var(--text-code); }
+
   header {
     background: var(--surface); border-bottom: 1px solid var(--border);
     padding: var(--space-6) 14px; display: flex; align-items: center; justify-content: space-between;
@@ -240,7 +274,7 @@
   .prd-item-row.st-needs-human-review { border-left-color: var(--orange); }
   .prd-item-row.st-updated { border-left-color: var(--purple); }
   .prd-item-row.st-paused { border-left-color: var(--muted); opacity: 0.5; }
-  .prd-item-id { font-family: Consolas, monospace; color: var(--muted); min-width: 36px; font-size: 0.9em; }
+  .prd-item-id { font-family: Consolas, monospace; color: var(--muted); min-width: 36px; font-size: var(--text-code); }
   .prd-item-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .prd-item-priority { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-lg); }
   .prd-item-priority.high { background: rgba(248,81,73,0.15); color: var(--red); }

package/engine/cli.js

@@ -1304,15 +1304,17 @@ const commands = {
       console.log(`Engine: ${control.state} (PID ${control.pid || 'N/A'})`);
     }
 
-    // Dashboard check
+    // Dashboard check. Honors MINIONS_PORT so `minions --dev status` probes the
+    // dev dashboard (7332 by default) rather than the binary install's 7331.
     const http = require('http');
+    const dashPort = Number(process.env.MINIONS_PORT) || 7331;
     const dashCheck = new Promise(resolve => {
-      const req = http.get('http://localhost:7331/api/health', { timeout: 2000 }, () => resolve(true));
+      const req = http.get(`http://localhost:${dashPort}/api/health`, { timeout: 2000 }, () => resolve(true));
       req.on('error', () => resolve(false));
       req.on('timeout', () => { req.destroy(); resolve(false); });
     });
     dashCheck.then(dashUp => {
-      if (dashUp) console.log('Dashboard: running (http://localhost:7331)');
+      if (dashUp) console.log(`Dashboard: running (http://localhost:${dashPort})`);
       else console.log('Dashboard: not running — start with: minions dash');
     }).catch(() => {});
 

package/engine/dispatch.js

@@ -18,6 +18,18 @@ const { getConfig, INBOX_DIR } = queries;
 
 const MINIONS_DIR = shared.MINIONS_DIR;
 
+// Dispatch types that do not push code to a PR branch. These remain dispatchable
+// against `_contextOnly: true` PRs because casting a review vote, posting a
+// comment, asking a question, or running a read-only explore never mutates the
+// PR's source branch. Auto-discovery (engine.js#discoverFromPrs) is still
+// gated on `_contextOnly` separately — only explicit WIs (dashboard, watches,
+// CC) can target a context-only PR, and only via these types.
+const NON_MUTATING_DISPATCH_TYPES = new Set([
+  WORK_TYPE.REVIEW,
+  WORK_TYPE.ASK,
+  WORK_TYPE.EXPLORE,
+]);
+
 // Lazy require to break circular dependency with engine.js
 let _lifecycle = null;
 function lifecycle() { if (!_lifecycle) _lifecycle = require('./lifecycle'); return _lifecycle; }
@@ -358,7 +370,19 @@ function getStalePrDispatchReason(entry, config) {
   const prLabel = entry.meta.pr?.id || entry.meta.pr?.url || entry.id;
   if (!tracked) return `PR ${prLabel} is no longer tracked`;
   if (tracked.status !== PR_STATUS.ACTIVE) return `PR ${tracked.id || prLabel} is ${tracked.status || 'missing status'}`;
-  if (tracked._contextOnly && entry.meta?.source !== 'work-item') return `PR ${tracked.id || prLabel} is context-only`;
+  // Combined gate (W-mq5v612m001g1545 + #3126):
+  //   1. `entry.meta?.source !== 'work-item'` — blocks any non-work-item dispatch
+  //      (e.g. legacy `pr`/`pr-human-feedback` discovery paths) from running
+  //      against a context-only PR. Auto-discovery in engine.js#discoverFromPrs
+  //      already skips _contextOnly PRs at the source, so this is defense-in-depth.
+  //   2. `!NON_MUTATING_DISPATCH_TYPES.has(entry.type)` — even an explicit
+  //      work-item dispatch is dropped if it's a mutating type (fix, implement,
+  //      test, verify, decompose, docs). Only review/ask/explore — which never
+  //      push to the PR's source branch — are allowed through.
+  if (tracked._contextOnly
+      && (entry.meta?.source !== 'work-item' || !NON_MUTATING_DISPATCH_TYPES.has(entry.type))) {
+    return `PR ${tracked.id || prLabel} is context-only`;
+  }
 
   const queuedBranch = entry.meta.branch || entry.meta.pr?.branch || '';
   const trackedBranch = tracked.branch || '';
@@ -1048,4 +1072,5 @@ module.exports = {
   findActivePrOrBranchLock,
   normalizeRetryableDecision,
   isCompletedWorkItemForFailure,
+  NON_MUTATING_DISPATCH_TYPES,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.2150",
+  "version": "0.1.2151",
   "description": "Multi-agent AI dev team that runs from ~/.minions/ — five autonomous agents share a single engine, dashboard, and knowledge base",
   "bin": {
     "minions": "bin/minions.js"
@@ -9,6 +9,11 @@
     "package:check": "node tools/check-package-boundary.js public",
     "package:prepare:public": "node tools/prepare-package.js public",
     "package:prepare:internal": "node tools/prepare-package.js internal",
+    "dev": "node bin/minions.js --dev restart",
+    "dev:start": "node bin/minions.js --dev start",
+    "dev:stop": "node bin/minions.js --dev stop",
+    "dev:dash": "node bin/minions.js --dev dash",
+    "dev:status": "node bin/minions.js --dev status",
     "test": "node test/run-parallel.js",
     "test:sequential": "node test/unit.test.js",
     "test:unit": "node test/run-parallel.js",