@passioncode-ai/fabric-agent-adapter 0.8.3 → 0.9.0

package/plugins/fabric-agent-adapter/skills/building-fabric-services/references/dashboard-kit.md

@@ -0,0 +1,133 @@
+# The dashboard kit — `fabric-dashboard/0.1`
+
+Fabric Dashboards shows a service's page in a pane beside its sidebar and the agent console, and the
+operator drags the console wider whenever they need it. The page never knows how much room it will
+get. Fabric Agent Contract DEC-0036 (`docs/specification/embedded-dashboard.md`, ED-1…ED-10) says what
+the page promises; the kit in [`../assets/dashboard-kit/`](../assets/dashboard-kit/) keeps those
+promises so a service does not re-derive them.
+
+## Contents
+
+- The rules the page keeps
+- Using the kit
+- Themes and the host's appearance
+- Declaring it
+- Proving it
+- Upgrading an existing dashboard
+- When something is missing
+
+## The rules the page keeps
+
+| Rule | What it means for the page | How the kit does it |
+|---|---|---|
+| ED-1 floor | usable from 360 CSS px up (or the larger `minWidth` it declares), no sideways document scroll | fluid grids `repeat(auto-fit, minmax(min(100%, N), 1fr))`, no fixed widths, `overflow-wrap` on text |
+| ED-2 below the floor | keeps the floor layout and lets the document scroll | `html { min-width: 360px }` |
+| ED-3 navigation | every destination reachable at every width, never a strip that only scrolls sideways | the list wraps; with the script, links that do not fit move into a **More** menu |
+| ED-4 wide content | tables, logs, code, charts scroll in their own box, which shows it scrolls and takes keyboard focus | `.fd-scroll`: edge shades, a visible scrollbar, `tabindex="0"` and a name added by the script |
+| ED-5 one scroller | the document is the only full-height scroller; sticky chrome ≤ min(120 px, 25 % of the height); anchors land below it; a refresh keeps scroll and focus | `.fd-chrome` sticky; when header + navigation are taller than the budget the header scrolls away and the navigation stays; `scroll-margin-top` from the measured height |
+| ED-6 appearance | follows `prefers-color-scheme`; the host's cookie wins over the page's own choice and hides the page's controls; colour never carries meaning alone | the script reads `fabric_appearance`, sets `data-theme`/`data-scheme`, hides `[data-fd-appearance-control]` |
+
+The kit cannot keep two of them for you: **a refresh must keep the scroll position and focus**
+(replace changed regions, never the whole page; see [dashboard principles](dashboard.md) point 3),
+and **meaning never by colour alone** (put the word next to the dot: `.fd-chip` with a `.fd-dot`).
+
+## Using the kit
+
+```bash
+python3 <skill-dir>/scripts/dashboard_kit.py install <the directory your page's static files are served from>
+```
+
+It copies `fabric-dashboard.css` and `fabric-dashboard.js` (each starts with
+`fabric-dashboard-kit@<version>`). Serve both same-origin and link them; nothing is inline:
+
+```html
+<html lang="en" data-fd-appearance="scheme theme">
+<link rel="stylesheet" href="/static/fabric-dashboard.css">
+<link rel="stylesheet" href="/static/app.css">            <!-- the page's own rules, var(--…) only -->
+<script src="/static/fabric-dashboard.js" defer></script>
+```
+
+Never edit the copied files: the page's own rules go in its own stylesheet, consuming the tokens.
+`install` refuses to replace a copy the service changed. The page's skeleton is in
+[`demo.html`](../assets/dashboard-kit/demo.html); the parts:
+
+| Part | Markup |
+|---|---|
+| Sticky chrome | `<div class="fd-chrome"><header class="fd-header">…</header><nav class="fd-nav" aria-label="Sections"><ul class="fd-nav-list"><li><a href="#jobs">Jobs</a></li>…</ul></nav></div>` |
+| Page body | `<main class="fd-page">`, sections with `id`s the navigation links to |
+| Grids | `.fd-grid` (cards, 320 px columns), `.fd-grid--tiles` (160 px), `.fd-grid--wide` (480 px); `--fd-col` sets your own |
+| Wide content | `<div class="fd-scroll" data-fd-label="Jobs table"><table class="fd-table">…</table></div>`, `<pre class="fd-scroll">` |
+| Atoms | `.fd-card`, `.fd-tile`, `.fd-chip` + `.fd-dot` + `.fd-s-ok\|warn\|danger\|info`, `.fd-btn`, `.fd-btn--primary`, `.fd-input`, `.fd-select`, `.fd-banner`, `.fd-empty`, `.fd-pairs` |
+| Own appearance controls | `<select data-fd-theme-picker>`, `<select data-fd-scheme-picker>` (the script fills them; hidden while the host owns appearance) |
+
+Tokens are the workbench layer (`--bg`, `--panel`, `--panel-2`, `--ink`, `--muted`, `--border`,
+`--border-strong`, `--accent`, `--accent-weak`, `--accent-ink`, the four status pairs) plus `--edge`,
+a border that carries meaning (inputs, menus, scroll boxes) at 3:1. Accent-coloured text sits only on
+`--panel`. Status words stay in `--ink`; the colour is in the dot and the tint.
+
+## Themes and the host's appearance
+
+Seven reference themes, each light and dark, all WCAG 2.2 AA (ED-10): `graphite` (default, workbench
+verbatim), `fabric` (PassionCode.ai plum), `paper`, `forest`, `ocean`, `ember`, `contrast`. They are
+generated from `themes.json` into the CSS by `dashboard_kit.py build`; `test/test_dashboard_kit.py`
+measures every pair. A page selects one with `<html data-theme="ocean" data-scheme="dark">`; without
+`data-scheme` it follows the operator's system.
+
+The host carries the operator's choice as the cookie `fabric_appearance=v=1&scheme=dark&theme=ocean`
+(ED-8). The script applies it, marks the root `data-fd-host-appearance` and hides the page's own
+controls while it is present; an unknown `theme` is `graphite`. `data-fd-appearance="scheme"` limits
+what the page applies (declare the same in `appearance`). The page re-reads the cookie when it
+changes (`cookieStore`) and when it becomes visible again.
+
+## Declaring it
+
+When the page meets ED-1…ED-6, say so in the well-known document (ED-9):
+
+```python
+fs.build_well_known(..., extensions=fs.dashboard_extension())          # minWidth 360, both fields, 7 themes, the kit
+```
+
+Node: `buildWellKnown({ ..., extensions: dashboardExtension() })`. Pass `min_width`/`minWidth` when the
+page needs more than 360 (a host then gives it `max(480, minWidth)`), and `themes` when the page ships
+fewer. A dashboard without the declaration is a *legacy dashboard*: the host still gives it 480 px
+and promises nothing else.
+
+## Proving it
+
+```bash
+node <skill-dir>/scripts/check_dashboard_layout.mjs --service <id>[.<instance>]   # signs in with a login code
+node <skill-dir>/scripts/check_dashboard_layout.mjs http://127.0.0.1:<port>/dashboard
+python3 <skill-dir>/scripts/check_service.py <id>                                   # dashboard.declared (ED-9)
+```
+
+The layout probe renders the page in WebKit (Safari's engine; `--browser chromium` on request) at
+the floor minus 40 and at 360, 480, 768 and 1280 px, and reports ED-1…ED-5 per width. It needs
+Playwright where it runs (`npm i -D playwright && npx playwright install webkit`, or `--playwright
+<dir>`); without it every rule is `NOT_RUN`. It does not measure edge shades or that a refresh keeps
+the scroll position: say so in the report. A `NOT_RUN` is not a pass.
+
+## Upgrading an existing dashboard
+
+A session that starts in a repository whose dashboard has no kit or an older one gets one line from
+the plugin's SessionStart hook. That line is a notice, not an instruction to act: **tell the
+operator and update only with their go-ahead** — the page is theirs and may be open while you work.
+
+1. `dashboard_kit.py status` names each copy: `current`, `older`, `changed` (edited after it was
+   copied) or `unmarked`, and the services built from this repository.
+2. A page with no kit: move its colour, type and spacing values onto the kit's tokens (its own
+   palette becomes a theme in its stylesheet: `:root[data-theme="…"]`), replace fixed widths with the
+   kit's grids, put the navigation in `.fd-nav`, wrap wide tables and logs in `.fd-scroll`, remove
+   any nested full-height scroller, and drop a scheme toggle the kit's picker replaces.
+3. A page with an older kit: `dashboard_kit.py install <dir>`. A `changed` copy is refused; move the
+   edits into the page's own files, then install (or `--force` when the operator says the edits go).
+4. Raise `kit` in the declaration (`dashboard_extension()` does it), restart the service, and run
+   both probes above. Report the layout table with every `NOT_RUN`.
+
+## When something is missing
+
+- **No Python for the CLI:** copy the two files from `assets/dashboard-kit/` by hand and compare the
+  first line's version with `kit.json`.
+- **The page is built by a framework:** import the two files as static assets; keep them unbundled
+  or keep the version marker comment, so `status` can still read the version.
+- **The page needs a fixed width:** not decided by the profile; declare the `minWidth` it needs
+  (up to 1280) and say why in the README.

package/plugins/fabric-agent-adapter/skills/building-fabric-services/references/dashboard.md

@@ -23,9 +23,10 @@ service are not.
    when it returns.
 7. **Approvals show the diff and its hash.** Any write the operator approves shows
    before → after and the hash the service will verify at apply time.
-8. **Theme.** Follow the operator's product design system (PassionCode.ai tokens for
-   Fabric-family services); respect `prefers-color-scheme` unless the product fixes a
-   theme; never encode meaning by colour alone.
+8. **Theme and width.** Build the page from the dashboard kit: its seven AA themes, light and
+   dark, follow `prefers-color-scheme` and the host's `fabric_appearance` cookie, and its layout
+   holds from 360 CSS px inside a host pane (`fabric-dashboard/0.1`, DEC-0036;
+   [the dashboard kit reference](dashboard-kit.md)). Never encode meaning by colour alone.
 9. **Links into the page are stable.** Event `link`s point at hash routes that survive
    a reload (`/dashboard#/approvals/77`) so a notification opens the exact item.
 10. **No second browser tab required.** With Fabric Dashboards installed, the page is

package/plugins/fabric-agent-adapter/skills/building-fabric-services/references/protocol.md

@@ -1,8 +1,8 @@
 # fabric-service/0.1 — wire reference
 
-Pinned to `fabric-agent-contract` commit `52da526d7cc1e063d74c5b520dbc03d0ace15246`
+Pinned to `fabric-agent-contract` commit `a83bec6b47776af688402c18efec507143061f68`
 (`docs/specification/service.md`, DEC-0015; the usage report DEC-0021; Windows and Linux supervision
-DEC-0032 and DEC-0033; the operator channel DEC-0034 and DEC-0035). The contract's schemas are normative;
+DEC-0032 and DEC-0033; the operator channel DEC-0034 and DEC-0035; the embedded dashboard DEC-0036). The contract's schemas are normative;
 this page is the working summary. Extension key:
 `https://fabric.passioncode.ai/agent-contract/extensions/service/0.1`.
 
@@ -54,6 +54,11 @@ No auth; the Host/Origin guard applies; answered from memory in under 100 ms.
   `operatorChannel.path` (DEC-0034) when the service has an operator channel — its status
   document follows the contract's `operator-channel-status.schema.json` and is token-protected
   like the events feed. The kits do not serve it yet.
+- `extensions` MAY carry the embedded dashboard declaration under
+  `https://fabric.passioncode.ai/agent-contract/extensions/dashboard/0.1` (`fabric-dashboard/0.1`,
+  ED-9): `minWidth` 360…1280 (required), `appearance` ⊆ `scheme`, `theme`, `themes`, `kit`
+  (`name@semver`), nothing else. The kits build it with `dashboard_extension()` /
+  `dashboardExtension()`; see [the dashboard kit reference](dashboard-kit.md).
 
 ## Events page — `GET /fabric/v1/events?after=<cursor>&limit=<n>`
 

package/plugins/fabric-agent-adapter/skills/building-fabric-services/scripts/check_dashboard_layout.mjs

@@ -0,0 +1,295 @@
+#!/usr/bin/env node
+// Layout probe for an embedded dashboard (fabric-dashboard/0.1, Fabric Agent Contract DEC-0036).
+//
+//   node check_dashboard_layout.mjs <url>                  # a page you can open as is
+//   node check_dashboard_layout.mjs --service <id>[.<instance>]   # a registered service: signs in with a
+//                                                          # one-time login code, reads minWidth (ED-9)
+//   options: --widths 360,480,768,1280  --floor N  --height 800  --browser webkit|chromium|firefox
+//            --services-dir DIR  --playwright DIR (where node_modules/playwright lives)  --json
+//
+// It renders the page in a real browser at each width and measures ED-1 (no sideways document
+// scroll from the floor up), ED-2 (the floor layout kept below the floor), ED-3 (every navigation
+// link visible or inside an open-able menu), ED-4 (wide content in its own keyboard-reachable
+// scroll box) and ED-5 (sticky chrome within min(120 px, a quarter of the height), anchors landing
+// below it, no nested full-height scroller). What it cannot measure is NOT_RUN with the reason,
+// never a pass. WebKit is the default engine (Safari's). Exit 0 when nothing FAILs, 1 when
+// something does, 2 on a usage error. It reads; it never clicks a control of the page.
+import { readFileSync, existsSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { homedir, platform } from 'node:os';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const EXTENSION_KEY = 'https://fabric.passioncode.ai/agent-contract/extensions/dashboard/0.1';
+const RULES = ['ED-1', 'ED-2', 'ED-3', 'ED-4', 'ED-5'];
+
+function usage(message) {
+  if (message) process.stderr.write(message + '\n');
+  process.stderr.write('usage: check_dashboard_layout.mjs <url> | --service <id>[.<instance>] [--widths 360,480,768,1280] [--json]\n');
+  process.exit(2);
+}
+
+export function parseArgs(argv) {
+  const opts = { widths: [360, 480, 768, 1280], height: 800, browser: 'webkit', json: false };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    const next = () => { if (i + 1 >= argv.length) usage(`${a} needs a value`); return argv[++i]; };
+    if (a === '--json') opts.json = true;
+    else if (a === '--service') opts.service = next();
+    else if (a === '--widths') opts.widths = next().split(',').map((w) => Number(w.trim()));
+    else if (a === '--floor') opts.floor = Number(next());
+    else if (a === '--height') opts.height = Number(next());
+    else if (a === '--browser') opts.browser = next();
+    else if (a === '--services-dir') opts.servicesDir = next();
+    else if (a === '--playwright') opts.playwright = next();
+    else if (a.startsWith('--')) usage(`unknown option ${a}`);
+    else if (!opts.url) opts.url = a;
+    else usage('one URL at a time');
+  }
+  if (!opts.url && !opts.service) usage();
+  if (opts.widths.some((w) => !Number.isInteger(w) || w < 200 || w > 4000)) usage('widths are whole CSS pixels, 200…4000');
+  if (!['webkit', 'chromium', 'firefox'].includes(opts.browser)) usage('browser is webkit, chromium or firefox');
+  return opts;
+}
+
+function servicesDir(override) {
+  if (override) return override;
+  if (process.env.FABRIC_SERVICES_DIR) return process.env.FABRIC_SERVICES_DIR;
+  if (platform() === 'darwin') return path.join(homedir(), 'Library/Application Support/ai.passioncode.fabric/services');
+  if (platform() === 'win32') return path.join(process.env.LOCALAPPDATA || path.join(homedir(), 'AppData/Local'), 'passioncode-fabric', 'services');
+  return path.join(process.env.XDG_DATA_HOME || path.join(homedir(), '.local/share'), 'passioncode-fabric/services');
+}
+
+async function loadPlaywright(dir) {
+  const bases = [dir, process.env.FABRIC_PLAYWRIGHT, process.cwd()].filter(Boolean);
+  for (const base of bases) {
+    try {
+      const req = createRequire(path.join(path.resolve(base), 'noop.js'));
+      const mod = await import(pathToFileURL(req.resolve('playwright')).href);
+      return mod.webkit ? mod : mod.default;
+    } catch { /* try the next place */ }
+  }
+  try { const mod = await import('playwright'); return mod.webkit ? mod : mod.default; } catch { return null; }
+}
+
+// Sign in to a registered service the protocol's way: the token stays in its file and a header;
+// the page gets a one-time code, never the token.
+async function serviceTarget(spec, dir) {
+  const [id, instance = 'default'] = spec.split(/\.(.+)/);
+  const file = path.join(servicesDir(dir), `${id}.${instance}.json`);
+  if (!existsSync(file)) throw new Error(`no descriptor for ${id}.${instance} in ${servicesDir(dir)}`);
+  const d = JSON.parse(readFileSync(file, 'utf8'));
+  const origin = String(d.origin || '').replace(/\/$/, '');
+  const auth = d.auth || {};
+  let token = '';
+  try { token = readFileSync(auth.tokenFile, 'utf8').trim(); } catch { /* reported below */ }
+  const header = auth.header || 'Authorization';
+  const value = (auth.scheme || 'Bearer') === 'Bearer' ? `Bearer ${token}` : token;
+  const remote = d.placement === 'remote';
+  const wkRes = await fetch(`${origin}/.well-known/fabric-service`, { headers: remote && token ? { [header]: value } : {} });
+  if (!wkRes.ok) throw new Error(`well-known document answered HTTP ${wkRes.status}`);
+  const wk = await wkRes.json();
+  const dashboard = wk.surfaces?.dashboard;
+  if (!dashboard?.path) throw new Error(`${id}.${instance} declares no surfaces.dashboard`);
+  const declared = wk.extensions?.[EXTENSION_KEY];
+  let url = origin + dashboard.path;
+  if (dashboard.login) {
+    if (!token) throw new Error(`no readable token file for ${id}.${instance}`);
+    const res = await fetch(`${origin}/fabric/v1/login-code`, { method: 'POST', headers: { [header]: value } });
+    if (!res.ok) throw new Error(`login-code answered HTTP ${res.status}`);
+    url = origin + (await res.json()).url;
+  }
+  return { url, declared, name: `${id}.${instance}` };
+}
+
+// Runs inside the page. Everything it reports is measured from the rendered layout.
+function measure(floor) {
+  const de = document.documentElement;
+  const vw = de.clientWidth;
+  const vh = window.innerHeight;
+  const out = { vw, vh, scrollWidth: de.scrollWidth, nav: { total: 0, unreachable: [] }, boxes: [], past: [], nested: [], chrome: 0, anchor: null };
+  const cs = (el) => getComputedStyle(el);
+  const scrollsX = (el) => /(auto|scroll)/.test(cs(el).overflowX);
+  const clipsX = (el) => cs(el).overflowX !== 'visible';
+  const label = (el) => {
+    const id = el.id ? '#' + el.id : '';
+    const cls = typeof el.className === 'string' && el.className.trim() ? '.' + el.className.trim().split(/\s+/).join('.') : '';
+    return (el.tagName.toLowerCase() + id + cls).slice(0, 80);
+  };
+  const visible = (el) => { const r = el.getBoundingClientRect(); return r.width > 0 && r.height > 0 && cs(el).visibility !== 'hidden'; };
+
+  // ED-3: a link is reachable when it is fully inside the viewport and not clipped by an ancestor,
+  // or when it sits in a closed <details> whose summary is reachable, or in a menu a visible
+  // aria-controls button opens.
+  const inViewport = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0 || r.left < -1 || r.right > vw + 1) return false;
+    for (let a = el.parentElement; a && a !== de; a = a.parentElement) {
+      if (!clipsX(a)) continue;
+      const ar = a.getBoundingClientRect();
+      if (r.left < ar.left - 1 || r.right > ar.right + 1) return false;
+    }
+    return true;
+  };
+  const opener = (el) => {
+    const details = el.closest('details');
+    if (details && !details.open) {
+      const summary = details.querySelector(':scope > summary');
+      if (summary && inViewport(summary)) return true;
+    }
+    for (let a = el.parentElement; a; a = a.parentElement) {
+      if (!a.id) continue;
+      const btn = document.querySelector(`[aria-controls="${CSS.escape(a.id)}"]`);
+      if (btn && inViewport(btn)) return true;
+    }
+    return false;
+  };
+  for (const nav of document.querySelectorAll('nav, [role="navigation"]')) {
+    for (const link of nav.querySelectorAll('a[href]')) {
+      out.nav.total++;
+      if (!inViewport(link) && !opener(link)) out.nav.unreachable.push((link.textContent || link.getAttribute('href')).trim().slice(0, 40));
+    }
+  }
+
+  // ED-4: overflowing scroll boxes must be keyboard-reachable; nothing may poke past the viewport
+  // unless it is inside a scroll box or clipped by an ancestor that is itself inside the viewport.
+  const all = document.body ? document.body.querySelectorAll('*') : [];
+  const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]';
+  let n = 0;
+  for (const el of all) {
+    if (++n > 6000) break;
+    if (!visible(el)) continue;
+    if (scrollsX(el) && el.scrollWidth > el.clientWidth + 1) {
+      const keyboard = el.tabIndex >= 0 || !!el.querySelector(FOCUSABLE);
+      const named = !(el.tabIndex >= 0 && !el.querySelector(FOCUSABLE)) || !!(el.getAttribute('aria-label') || el.getAttribute('aria-labelledby'));
+      out.boxes.push({ el: label(el), keyboard, named });
+    }
+    const r = el.getBoundingClientRect();
+    // Only the right edge: a page cannot scroll to the left of 0, so content parked there (a skip
+    // link) makes no sideways scroll; content past the right edge does, or is cut off.
+    if (r.right > vw + 1) {
+      let held = false;
+      for (let a = el.parentElement; a && a !== de && a !== document.body; a = a.parentElement) {
+        if (scrollsX(a)) { held = true; break; }
+        if (clipsX(a)) { const ar = a.getBoundingClientRect(); if (ar.right <= vw + 1 && ar.left >= -1) { held = true; break; } }
+      }
+      if (!held && out.past.length < 12) out.past.push(label(el));
+    }
+    // ED-5: a nested container that takes the viewport's height and scrolls on its own.
+    if (/(auto|scroll)/.test(cs(el).overflowY) && el.scrollHeight > el.clientHeight + 1 && el.clientHeight >= vh * 0.9) out.nested.push(label(el));
+  }
+  // ED-5: the sticky band at the top, measured after scrolling so sticky elements engage.
+  const startY = window.scrollY;
+  window.scrollTo(0, Math.min(400, de.scrollHeight));
+  for (const el of all) {
+    const p = cs(el).position;
+    if (p !== 'sticky' && p !== 'fixed') continue;
+    const r = el.getBoundingClientRect();
+    // A stuck element's visible part is what stays pinned; a negative top lets a header scroll away.
+    if (r.height > 0 && r.top <= 2 && r.bottom > 0 && r.bottom < vh / 2 + 200) out.chrome = Math.max(out.chrome, Math.round(r.bottom));
+  }
+  // ED-5: the first in-page navigation anchor must land below the chrome.
+  const anchor = [...document.querySelectorAll('nav a[href^="#"], [role="navigation"] a[href^="#"]')]
+    .map((a) => document.getElementById(decodeURIComponent(a.getAttribute('href').slice(1)))).find(Boolean);
+  if (anchor && de.scrollHeight > vh) {
+    anchor.scrollIntoView({ block: 'start' });
+    out.anchor = { el: label(anchor), top: Math.round(anchor.getBoundingClientRect().top) };
+  }
+  window.scrollTo(0, startY);
+  out.rootMinWidth = parseFloat(cs(de).minWidth) || 0;
+  out.floor = floor;
+  return out;
+}
+
+export function verdicts(width, floor, m) {
+  const rows = [];
+  const add = (rule, verdict, evidence) => rows.push({ rule, width, verdict, evidence });
+  if (width < floor) {
+    add('ED-2', m.scrollWidth >= floor - 1 ? 'PASS' : 'FAIL',
+      `below the floor ${floor}: document ${m.scrollWidth} px wide in ${m.vw} px (root min-width ${m.rootMinWidth || 'none'})`);
+    return rows;
+  }
+  add('ED-1', m.scrollWidth <= m.vw + 1 ? 'PASS' : 'FAIL', `document scrollWidth ${m.scrollWidth} in a ${m.vw} px viewport`);
+  if (!m.nav.total) add('ED-3', 'NOT_RUN', 'no <nav> or role="navigation" links on the page');
+  else add('ED-3', m.nav.unreachable.length ? 'FAIL' : 'PASS',
+    m.nav.unreachable.length ? `${m.nav.unreachable.length} of ${m.nav.total} links unreachable: ${m.nav.unreachable.slice(0, 6).join(', ')}` : `${m.nav.total} links reachable`);
+  const badBoxes = m.boxes.filter((b) => !b.keyboard || !b.named);
+  const problems = [];
+  if (m.past.length) problems.push(`past the viewport, not in a scroll box: ${m.past.slice(0, 4).join(', ')}`);
+  if (badBoxes.length) problems.push(`scroll box without keyboard access or a name: ${badBoxes.slice(0, 4).map((b) => b.el).join(', ')}`);
+  add('ED-4', problems.length ? 'FAIL' : 'PASS', problems.join('; ') || `${m.boxes.length} overflowing box(es), each keyboard-reachable; edge shades not measured`);
+  const limit = Math.min(120, m.vh / 4);
+  const ed5 = [];
+  if (m.chrome > limit) ed5.push(`sticky chrome ${m.chrome} px > ${Math.round(limit)} px`);
+  if (m.nested.length) ed5.push(`nested full-height scroller: ${m.nested.slice(0, 3).join(', ')}`);
+  if (m.anchor && m.anchor.top < m.chrome - 1) ed5.push(`anchor ${m.anchor.el} lands at ${m.anchor.top} px, under the ${m.chrome} px chrome`);
+  add('ED-5', ed5.length ? 'FAIL' : 'PASS', ed5.join('; ') ||
+    `sticky chrome ${m.chrome} px ≤ ${Math.round(limit)} px` + (m.anchor ? `; anchor lands at ${m.anchor.top} px` : '; no in-page anchor to jump to') + '; refresh keeps scroll: not measured');
+  return rows;
+}
+
+function report(rows, opts, target) {
+  const failed = rows.filter((r) => r.verdict === 'FAIL').length;
+  if (opts.json) {
+    process.stdout.write(JSON.stringify({ target, browser: opts.browser, results: rows, failed }, null, 2) + '\n');
+  } else {
+    for (const r of rows) process.stdout.write(`${r.verdict.padEnd(8)} ${(r.rule + (r.width ? '@' + r.width : '')).padEnd(10)} ${r.evidence}\n`);
+    process.stdout.write(`\n${rows.length} rule(s), ${failed} FAIL, ${rows.filter((r) => r.verdict === 'NOT_RUN').length} NOT_RUN\n`);
+  }
+  return failed ? 1 : 0;
+}
+
+async function main(argv) {
+  const opts = parseArgs(argv);
+  let target = opts.url;
+  let floor = opts.floor;
+  const notRun = (why) => report(RULES.map((rule) => ({ rule, width: 0, verdict: 'NOT_RUN', evidence: why })), opts, target || opts.service);
+  if (opts.service) {
+    try {
+      const t = await serviceTarget(opts.service, opts.servicesDir);
+      target = t.url;
+      if (floor === undefined && Number.isInteger(t.declared?.minWidth)) floor = t.declared.minWidth;
+    } catch (err) {
+      return notRun(`could not open the service's dashboard: ${err.message}`);
+    }
+  }
+  floor = floor ?? 360;
+  const pw = await loadPlaywright(opts.playwright);
+  if (!pw) return notRun('Playwright is not installed here: npm i -D playwright && npx playwright install webkit (or pass --playwright DIR)');
+  let browser;
+  try {
+    browser = await pw[opts.browser].launch();
+  } catch (err) {
+    return notRun(`the ${opts.browser} browser does not start: ${String(err.message).split('\n')[0]} (npx playwright install ${opts.browser})`);
+  }
+  const rows = [];
+  try {
+    const context = await browser.newContext({ viewport: { width: Math.max(...opts.widths), height: opts.height } });
+    const page = await context.newPage();
+    const response = await page.goto(target, { waitUntil: 'load' });
+    if (response && !response.ok()) {
+      return notRun(`the page answered HTTP ${response.status()}`);
+    }
+    // Measure a settled page: its own data requests done, so a header that grows when the data
+    // arrives is not caught between its new size and the script that reacts to it.
+    await page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
+    const widths = [...new Set([floor - 40, ...opts.widths])].filter((w) => w >= 200).sort((a, b) => a - b);
+    for (const width of widths) {
+      await page.setViewportSize({ width, height: opts.height });
+      await page.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))));
+      await page.waitForTimeout(250);
+      await page.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))));
+      const m = await page.evaluate(measure, floor);
+      rows.push(...verdicts(width, floor, m));
+    }
+  } catch (err) {
+    rows.push({ rule: 'ED-1', width: 0, verdict: 'NOT_RUN', evidence: `the page could not be measured: ${String(err.message).split('\n')[0]}` });
+  } finally {
+    await browser.close();
+  }
+  return report(rows, opts, opts.service || target);
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] || '').href) {
+  main(process.argv.slice(2)).then((code) => process.exit(code), (err) => { process.stderr.write(String(err?.stack || err) + '\n'); process.exit(2); });
+}

package/plugins/fabric-agent-adapter/skills/building-fabric-services/scripts/check_service.py

@@ -366,6 +366,31 @@ class Probe:
         self.add("usage.report", "FAIL" if problems else "PASS",
                  "; ".join(problems[:5]) if problems else "%d day(s), unknown cost kept null" % len(days or []))
 
+    # dashboard (fabric-dashboard/0.1, DEC-0036) --------------------------------
+    def dashboard_rules(self) -> None:
+        wk = self.wk or {}
+        if not (wk.get("surfaces") or {}).get("dashboard"):
+            self.add("dashboard.declared", "NOT_RUN", "no surfaces.dashboard: nothing to declare")
+            return
+        extensions = wk.get("extensions") if isinstance(wk.get("extensions"), dict) else {}
+        if fs.DASHBOARD_EXTENSION_KEY not in extensions:
+            self.add("dashboard.declared", "NOT_RUN", "a legacy dashboard: no extensions dashboard/0.1 declaration (ED-9 SHOULD); "
+                     "a host still gives it 480 px (ED-7). Build it from the dashboard kit and declare it")
+            return
+        value = extensions[fs.DASHBOARD_EXTENSION_KEY]
+        problems = fs.dashboard_extension_problems(value)
+        if problems:
+            self.add("dashboard.declared", "FAIL", "; ".join(problems))
+            return
+        note = "minWidth %d, host floor %d" % (value["minWidth"], max(480, value["minWidth"]))
+        if value.get("kit"):
+            note += ", " + value["kit"]
+            name, _, version = str(value["kit"]).partition("@")
+            current = fs.DASHBOARD_KIT.partition("@")[2]
+            if name == fs.DASHBOARD_KIT.partition("@")[0] and _semver(version) < _semver(current):
+                note += " (kit %s is current: dashboard_kit.py status)" % current
+        self.add("dashboard.declared", "PASS", note + "; the page itself: check_dashboard_layout.mjs")
+
     def login_rules(self) -> None:
         dashboard = ((self.wk or {}).get("surfaces") or {}).get("dashboard")
         if not dashboard or not dashboard.get("login"):
@@ -696,12 +721,18 @@ class Probe:
             self.network_rules()
             self.auth_rules()
             self.usage_rules()
+            self.dashboard_rules()
             self.login_rules()
             self.interop_rules()
         self.lifecycle_rules()
         return self.results
 
 
+def _semver(text: str) -> Tuple[int, int, int]:
+    m = re.match(r"^(\d+)\.(\d+)\.(\d+)", text or "")
+    return (int(m.group(1)), int(m.group(2)), int(m.group(3))) if m else (0, 0, 0)
+
+
 def usage_problems(report: Any, service_id: str, instance: str) -> List[str]:
     """What makes this not a DEC-0021 usage report of the service: shape, identity and the sums of
     FAC-SEM-025. An unknown cost must be null; a day's totals are the sums of its models."""