instar 1.3.810 → 1.3.811

package/dashboard/glance.js

@@ -0,0 +1,533 @@
+// Shared glance component — the three-layer template for the Dashboard UX Standard
+// glance floors F10 (glance) + F11 (universal drill-down). Spec:
+// docs/specs/dashboard-ux-standard.md ("The glance floors", topic 29836).
+//
+// Browser-native ESM (no build step; served at /dashboard/glance.js and imported by
+// index.html on tab activation). The pure functions are exported so the three-tier
+// jsdom tests exercise the SHIPPED code, not a copy.
+//
+// THE THREE LAYERS
+//   Layer 1 (glance)  — one plain-English headline + ≤5 labeled tiles. 100%
+//                       COMPONENT-AUTHORED: no agent/user free text ever reaches it.
+//   Layer 2 (list)    — click a tile → the rows behind that number, in plain words.
+//   Layer 3 (record)  — click a row → the full record (IDs, timestamps, raw detail).
+//
+// LOAD-BEARING SAFETY CONTRACT (mirrors dashboard/subscriptions.js): every dynamic
+// value flows through sanitizeForDisplay before the DOM; ALL DOM writes are
+// textContent only (never innerHTML); the only dynamic attributes are a fixed
+// state→literal token and a numeric count. Agent/user free text lives at Layer 2/3
+// where it is *displayed* through the sanitizer — it is never vocab-gated (F10's
+// jargon check runs only over the component-authored Layer-1 strings).
+//
+// F9 COMPOSITION: while a drill interaction is open (the drill container carries
+// data-interaction-open, or a field is focused/dirty) a background refresh MERGES
+// live counts via patchGlanceCounts instead of rebuilding over the interaction —
+// reusing the shipped hasOpenInteraction primitive.
+
+import { sanitizeForDisplay, hasOpenInteraction } from './subscriptions.js';
+
+export const GLANCE_MAX_TILES = 5;
+export const GLANCE_WORD_BUDGET = 150; // words on the front page before interaction
+export const GLANCE_MAX_TOKEN_LEN = 40; // a longer token is a glued-word budget dodge
+
+// ── The glance-adopted / grandfathered registries (the ratchet) ──────────────
+// A tab is ON the glance floor (F10/F11 apply) once it builds its glance through
+// this component. GLANCE_ADOPTED_TABS grows as tabs migrate; GLANCE_GRANDFATHERED
+// is every registered tab NOT yet on the floor, grandfathered against the survey
+// scorecard (topic 29836). THE RATCHET: the grandfather list only shrinks — a tab
+// leaves it only by adopting the floor (and passing F10/F11). Adding a tab here (or
+// shipping a NEW tab grandfathered) requires raising GLANCE_GRANDFATHERED_CEILING,
+// a visible committed change that needs a written justification + operator sign-off
+// (same discipline as the F3 purpose-line exempt list). The completeness test
+// asserts adopted ∪ grandfathered == every TAB_REGISTRY id, so a NEW tab in NEITHER
+// set fails the build; the monotonicity test asserts the grandfather size ≤ ceiling.
+export const GLANCE_ADOPTED_TABS = ['commitments'];
+
+export const GLANCE_GRANDFATHERED = [
+  'insights', 'sessions', 'files', 'dropzone', 'jobs', 'features', 'systems',
+  'integrated-being', 'pr-pipeline', 'projects', 'initiatives', 'tokens',
+  'resources', 'llm-activity', 'routing-map', 'spend', 'threadline', 'evidence',
+  'process-health', 'subscriptions', 'preferences-learning', 'machines', 'mandates',
+  'blockers', 'secrets',
+];
+
+// The committed ceiling on grandfathered-tab count. Only ever LOWER this (each
+// lowering marks a tab retrofitted onto the floor). Never raise it without an
+// operator-signed justification — raising it is how a NEW tab would silently ship
+// below the floor, the exact regression the ratchet exists to prevent.
+export const GLANCE_GRANDFATHERED_CEILING = 25;
+
+// ── F10 — insider-vocab detection ────────────────────────────────────────────
+// A readability floor, NOT a secret-redaction boundary (secret handling stays at
+// the API/data layer). It scans ONLY component-authored Layer-1 strings (headline +
+// tile labels + tile values), so it can never blank the glance on user free text.
+
+// Concept-jargon the form heuristics can't catch (curated; extend as jargon is
+// found). Matched case-insensitively as whole words/phrases over normalized text.
+const INSIDER_TERM_DENYLIST = [
+  'atrisk', 'at risk', 'at-risk', 'suppressed', 'beacon', 'beacons',
+  'beaconenabled', 'beaconsuppressed', 'cadence', 'heartbeat', 'heartbeats',
+  'lane', 'reflow', 'ttl', 'slo', 'sla', 'mrr', 'paid door', 'money-gated',
+  'quiet-hours', 'quiet hours',
+];
+
+// Internal IDs: a letter-run glued or hyphen/underscore-joined to 3+ digits
+// (CMT-953, CMT_953, cmt953) — separator-agnostic, case-insensitive, NOT
+// space-separated (so a quantity like "664 open promises" is never flagged).
+const ID_RE = /[a-z]{2,}[-_]?\d{3,}/i;
+// An all-caps prefix + optional space/sep + 3+ digits (CMT 953 / CMT-953) — safe
+// because component-authored plain copy never writes an ALLCAPS token beside a number.
+const ALLCAPS_ID_RE = /\b[A-Z]{2,6}[-_ ]?\d{3,}\b/;
+// Machine/agent hex ids: m_<hex>, agent_<hex>, machine-<hex-with-digit>.
+const HEX_ID_RE = /\b(?:[a-z]{1,}_[0-9a-f]{4,}|m_[0-9a-f]{4,}|[a-z]{2,}-[0-9a-f]*\d[0-9a-f]*)\b/i;
+// Config keys: a camelCase transition (softDeadlineAt) or a snake_case token.
+const CAMEL_RE = /\b[a-z][a-z0-9]*[A-Z][a-zA-Z0-9]*\b/;
+const SNAKE_RE = /\b[a-z0-9]+_[a-z0-9]+\b/i;
+// Machine-duration cadences: a bare number glued/spaced to a time unit — 1800s,
+// 1800 s, 1800sec, 1800000ms, PT30M — EXCLUDING 4-digit year/decade prose ("1800s"
+// meaning the 1800s decade is excluded via the decade guard below).
+const CADENCE_RE = /\b\d{1,9}\s?(?:ms|milliseconds?|secs?|seconds?|s)\b|\bPT\d+[HMSD]\b/i;
+const DECADE_RE = /^(?:1[5-9]\d0|20[0-4]\d)s$/i; // 1500s..1990s, 2000s..2049s
+
+/**
+ * Return the insider-vocabulary hits in a component-authored string. Empty array =
+ * clean. Each hit is { type, match }. NFKC-normalized + case-insensitive so
+ * look-alike glyphs and case tricks can't dodge the check.
+ */
+export function findInsiderVocab(text) {
+  const norm = String(text == null ? '' : text).normalize('NFKC');
+  const lower = norm.toLowerCase();
+  const hits = [];
+
+  const id = norm.match(ID_RE) || norm.match(ALLCAPS_ID_RE);
+  if (id) hits.push({ type: 'internal-id', match: id[0] });
+  const hex = norm.match(HEX_ID_RE);
+  if (hex) hits.push({ type: 'machine-id', match: hex[0] });
+  const camel = norm.match(CAMEL_RE);
+  if (camel) hits.push({ type: 'config-key', match: camel[0] });
+  const snake = norm.match(SNAKE_RE);
+  if (snake) hits.push({ type: 'config-key', match: snake[0] });
+
+  for (const m of lower.matchAll(new RegExp(CADENCE_RE, 'gi'))) {
+    const tok = m[0].replace(/\s+/g, '');
+    // "1800s" is ambiguous (1800 seconds vs the 1800s decade). Only treat it as a
+    // decade — and skip — when it reads as decade PROSE (preceded by "the"/"in").
+    if (DECADE_RE.test(tok)) {
+      const before = lower.slice(Math.max(0, m.index - 8), m.index);
+      if (/\b(?:the|in|early|late|mid)\s+$/.test(before)) continue;
+    }
+    hits.push({ type: 'cadence', match: m[0].trim() });
+  }
+
+  for (const term of INSIDER_TERM_DENYLIST) {
+    // Word/phrase boundary so "beacon" matches but "beaconing-signal-lantern" as a
+    // whole is still caught by the substring intent; keep it simple + robust.
+    const re = new RegExp(`(?:^|[^a-z0-9])${term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(?:$|[^a-z0-9])`, 'i');
+    if (re.test(lower)) hits.push({ type: 'insider-term', match: term });
+  }
+  return hits;
+}
+
+/**
+ * Tokenize Layer-1 copy for the word budget: split on whitespace and structural
+ * punctuation (hyphen / underscore / slash / common separators) so a glued
+ * "carrying-664-open-cmt953" cannot pose as one word. A token longer than
+ * GLANCE_MAX_TOKEN_LEN is itself a budget dodge and is reported separately.
+ */
+export function tokenizeGlance(text) {
+  return String(text == null ? '' : text)
+    .normalize('NFKC')
+    .split(/[\s\-_/.,;:·|()[\]{}]+/)
+    .map((t) => t.trim())
+    .filter(Boolean);
+}
+
+export function countGlanceWords(text) {
+  return tokenizeGlance(text).length;
+}
+
+/** The full component-authored Layer-1 text: headline + every tile label + value. */
+export function glanceText(spec) {
+  const parts = [String(spec?.headline ?? '')];
+  for (const t of spec?.tiles ?? []) {
+    parts.push(String(t?.label ?? ''));
+    parts.push(String(t?.value ?? ''));
+  }
+  return parts.join(' ');
+}
+
+/**
+ * F10 validator — the shared component refuses to build a glance that breaks the
+ * budget or carries jargon. Returns { ok, violations: [{code, detail}] }. Scans the
+ * concatenation of headline + every tile label + every tile value (all
+ * component-authored) — there is no free-text hole to hide jargon in.
+ */
+export function validateGlanceSpec(spec) {
+  const violations = [];
+  const tiles = Array.isArray(spec?.tiles) ? spec.tiles : [];
+
+  if (!spec || typeof spec.headline !== 'string' || spec.headline.trim() === '') {
+    violations.push({ code: 'no-headline', detail: 'a glance needs one plain-English headline sentence' });
+  }
+  if (tiles.length > GLANCE_MAX_TILES) {
+    violations.push({ code: 'too-many-tiles', detail: `${tiles.length} tiles > max ${GLANCE_MAX_TILES}` });
+  }
+
+  const text = glanceText(spec);
+  const words = countGlanceWords(text);
+  if (words > GLANCE_WORD_BUDGET) {
+    violations.push({ code: 'over-budget', detail: `${words} words > budget ${GLANCE_WORD_BUDGET}` });
+  }
+  for (const tok of tokenizeGlance(text)) {
+    if (tok.length > GLANCE_MAX_TOKEN_LEN) {
+      violations.push({ code: 'glued-token', detail: `"${tok.slice(0, 24)}…" (${tok.length} chars) evades the word count` });
+      break;
+    }
+  }
+
+  const jargon = findInsiderVocab(text);
+  for (const hit of jargon) {
+    violations.push({ code: 'insider-vocab', detail: `${hit.type}: "${hit.match}"` });
+  }
+
+  return { ok: violations.length === 0, violations };
+}
+
+// ── Rendering ────────────────────────────────────────────────────────────────
+
+function el(doc, tag, cls, text) {
+  const node = doc.createElement(tag);
+  if (cls) node.className = cls;
+  if (text != null) node.textContent = sanitizeForDisplay(text, 'label');
+  return node;
+}
+
+/**
+ * Render the three-layer glance into `root` from `spec`:
+ *   spec = { headline, tiles: [{ key, label, value, tone?, onActivate?(ctx) }] }
+ * Honors F9: if an interaction is open under `root`, MERGE live counts instead of
+ * rebuilding (patchGlanceCounts). On a spec that fails validation renders an HONEST
+ * DEGRADED glance (truncated headline + a "See details" drill) — NEVER a raw-record
+ * fallback. Returns a handle { root, headline, tiles, drilldown, spec }.
+ */
+export function renderGlance(doc, root, spec, opts = {}) {
+  if (!doc || !root) return null;
+
+  // F9 merge arm: an open drill / focused / dirty interaction holds the DOM.
+  if (root.querySelector('[data-glance-layer]') && hasOpenInteraction(doc, root)) {
+    patchGlanceCounts(doc, root, spec);
+    return { root, held: true, spec };
+  }
+
+  const { ok, violations } = validateGlanceSpec(spec);
+  if (!ok && typeof console !== 'undefined' && console.warn) {
+    console.warn('[glance] spec failed F10 validation — rendering honest degraded glance:', violations);
+  }
+
+  // Replace, don't append — repeated renders never leak detached DOM/listeners.
+  root.replaceChildren();
+
+  const layer = el(doc, 'div', 'glance-layer');
+  layer.setAttribute('data-glance-layer', '');
+
+  const headline = el(doc, 'div', 'glance-headline');
+  headline.setAttribute('data-glance-headline', '');
+  // Degraded mode: truncate to budget, never dump raw records.
+  const headlineText = ok
+    ? String(spec?.headline ?? '')
+    : truncateToWords(String(spec?.headline ?? 'Details available'), GLANCE_WORD_BUDGET);
+  headline.textContent = sanitizeForDisplay(headlineText, 'summary');
+  layer.appendChild(headline);
+
+  const drilldown = doc.createElement('section');
+  drilldown.className = 'glance-drilldown';
+  drilldown.setAttribute('data-glance-drilldown', '');
+  drilldown.hidden = true;
+
+  const tilesWrap = el(doc, 'div', 'glance-tiles');
+  tilesWrap.setAttribute('data-glance-tiles', '');
+  const tiles = Array.isArray(spec?.tiles) ? spec.tiles : [];
+  const tileNodes = [];
+  const usableTiles = ok ? tiles.slice(0, GLANCE_MAX_TILES) : [];
+  for (const tile of usableTiles) {
+    const btn = doc.createElement('button');
+    btn.type = 'button';
+    btn.className = 'glance-tile';
+    btn.setAttribute('data-glance-tile', String(tile.key ?? tile.label ?? ''));
+    if (tile.tone) btn.setAttribute('data-tone', String(tile.tone));
+    btn.setAttribute('aria-expanded', 'false');
+
+    const valEl = el(doc, 'span', 'glance-tile-value');
+    valEl.setAttribute('data-glance-count', '');
+    valEl.textContent = sanitizeForDisplay(String(tile.value ?? ''), 'label');
+    const labelEl = el(doc, 'span', 'glance-tile-label', String(tile.label ?? ''));
+
+    // Accessible label (F5) — never an icon-only/bare control.
+    btn.setAttribute('aria-label', `${sanitizeForDisplay(String(tile.label ?? ''), 'label')}: ${sanitizeForDisplay(String(tile.value ?? ''), 'label')}`);
+    btn.appendChild(valEl);
+    btn.appendChild(labelEl);
+
+    btn.addEventListener('click', () => openDrill(doc, root, drilldown, btn, tile, tileNodes));
+    tilesWrap.appendChild(btn);
+    tileNodes.push(btn);
+  }
+
+  // Degraded fallback: one honest "See details" affordance, never the raw dump.
+  if (!ok) {
+    const btn = doc.createElement('button');
+    btn.type = 'button';
+    btn.className = 'glance-tile glance-tile-degraded';
+    btn.setAttribute('data-glance-tile', '__details__');
+    btn.setAttribute('aria-expanded', 'false');
+    btn.appendChild(el(doc, 'span', 'glance-tile-label', 'See details'));
+    btn.addEventListener('click', () => openDrill(doc, root, drilldown, btn, {
+      key: '__details__',
+      onActivate: (ctx) => { ctx.drilldown.appendChild(el(doc, 'div', 'glance-empty', 'Details are being prepared.')); },
+    }, tileNodes));
+    tilesWrap.appendChild(btn);
+    tileNodes.push(btn);
+  }
+
+  layer.appendChild(tilesWrap);
+  root.appendChild(layer);
+  root.appendChild(drilldown);
+
+  return { root, headline, tiles: tileNodes, drilldown, spec };
+}
+
+function truncateToWords(text, max) {
+  const toks = tokenizeGlance(text);
+  if (toks.length <= max) return text;
+  return toks.slice(0, max).join(' ') + '…';
+}
+
+/**
+ * Open a tile's drill (Layer 2). Replaces the drill container (never appends),
+ * calls the tile's onActivate to populate it, reveals it, and marks it
+ * data-interaction-open so a background refresh HOLDS it (F9). Clicking the same
+ * tile again (or the Back control) releases the hold. onActivate receives:
+ *   { doc, drilldown, tile, openRecord } — openRecord(node) swaps in a Layer-3 record.
+ */
+function openDrill(doc, root, drilldown, btn, tile, allTiles) {
+  const alreadyOpen = drilldown.getAttribute('data-open-tile') === btn.getAttribute('data-glance-tile') && !drilldown.hidden;
+  // Collapse any open tile first.
+  for (const t of allTiles) t.setAttribute('aria-expanded', 'false');
+  drilldown.replaceChildren();
+  drilldown.removeAttribute('data-interaction-open');
+
+  if (alreadyOpen) {
+    drilldown.hidden = true;
+    drilldown.removeAttribute('data-open-tile');
+    return;
+  }
+
+  const header = el(doc, 'div', 'glance-drill-header');
+  const back = doc.createElement('button');
+  back.type = 'button';
+  back.className = 'glance-drill-back';
+  back.setAttribute('aria-label', 'Back to the glance');
+  back.textContent = '← Back';
+  back.addEventListener('click', () => {
+    drilldown.replaceChildren();
+    drilldown.hidden = true;
+    drilldown.removeAttribute('data-interaction-open');
+    drilldown.removeAttribute('data-open-tile');
+    btn.setAttribute('aria-expanded', 'false');
+  });
+  header.appendChild(back);
+  const title = el(doc, 'span', 'glance-drill-title', tile.label != null ? String(tile.label) : 'Details');
+  header.appendChild(title);
+  drilldown.appendChild(header);
+
+  const body = el(doc, 'div', 'glance-drill-body');
+  body.setAttribute('data-glance-drill-body', '');
+  drilldown.appendChild(body);
+
+  const openRecord = (node) => {
+    // Layer 3: swap the list for the full record, with a Back-to-list control.
+    const recWrap = el(doc, 'div', 'glance-record');
+    recWrap.setAttribute('data-glance-record', '');
+    const toList = doc.createElement('button');
+    toList.type = 'button';
+    toList.className = 'glance-drill-back';
+    toList.setAttribute('aria-label', 'Back to the list');
+    toList.textContent = '← Back to list';
+    const priorList = Array.from(body.childNodes);
+    toList.addEventListener('click', () => {
+      body.replaceChildren(...priorList);
+    });
+    recWrap.appendChild(toList);
+    if (node) recWrap.appendChild(node);
+    body.replaceChildren(recWrap);
+  };
+
+  try {
+    if (typeof tile.onActivate === 'function') {
+      tile.onActivate({ doc, drilldown: body, tile, openRecord });
+    }
+  } catch (err) {
+    // A drill builder that throws must not white-screen the tab: show an honest
+    // error state, never a raw dump. @silent-fallback-ok — degraded drill, logged.
+    body.replaceChildren(el(doc, 'div', 'glance-empty', 'Could not load these details right now.'));
+    if (typeof console !== 'undefined' && console.warn) console.warn('[glance] drill onActivate failed:', err);
+  }
+
+  // An honest F6 empty-state if the drill produced nothing (e.g. a zero-count tile).
+  if (body.childNodes.length === 0) {
+    body.appendChild(el(doc, 'div', 'glance-empty', 'Nothing here right now.'));
+  }
+
+  drilldown.setAttribute('data-open-tile', btn.getAttribute('data-glance-tile') || '');
+  drilldown.setAttribute('data-interaction-open', 'glance-drill');
+  drilldown.hidden = false;
+  btn.setAttribute('aria-expanded', 'true');
+}
+
+/**
+ * F9 merge arm — patch the live tile counts (and headline) from a fresh spec
+ * WITHOUT rebuilding the DOM, so an open drill interaction is never clobbered.
+ * Returns the number of tiles patched.
+ */
+export function patchGlanceCounts(doc, root, spec) {
+  if (!root || !spec) return 0;
+  let patched = 0;
+  const headline = root.querySelector('[data-glance-headline]');
+  if (headline && typeof spec.headline === 'string') {
+    headline.textContent = sanitizeForDisplay(spec.headline, 'summary');
+  }
+  for (const tile of spec.tiles ?? []) {
+    const key = String(tile.key ?? tile.label ?? '');
+    const btn = root.querySelector(`[data-glance-tile="${cssEscape(key)}"]`);
+    if (!btn) continue;
+    const val = btn.querySelector('[data-glance-count]');
+    if (val) { val.textContent = sanitizeForDisplay(String(tile.value ?? ''), 'label'); patched++; }
+  }
+  return patched;
+}
+
+function cssEscape(s) {
+  if (typeof CSS !== 'undefined' && CSS.escape) return CSS.escape(s);
+  return String(s).replace(/["\\\]]/g, '\\$&');
+}
+
+// ── Commitments reference builder (the Phase-1 living example) ────────────────
+// Pure: turns the /commitments open-promises list into a glance spec. Derives every
+// tile + the headline from ONE population — the beacon-watched open promises
+// (beaconEnabled && status==='pending'), the identical set the drill-down shows — so
+// the headline count EQUALS the Layer-2 list length by construction, and each tile
+// maps to an EXISTING server field (no client-side state re-derivation).
+
+/** The single population: beacon-watched open promises. */
+export function commitmentsOpenPopulation(commitments) {
+  return (Array.isArray(commitments) ? commitments : [])
+    .filter((c) => c && c.beaconEnabled && c.status === 'pending');
+}
+
+export function buildCommitmentsGlance(commitments, now = Date.now()) {
+  const open = commitmentsOpenPopulation(commitments);
+  const dueSoon = open.filter((c) => c.atRisk === true);
+  const waiting = open.filter((c) => c.blockedOn === 'user-input' || c.blockedOn === 'user-authorization');
+  const quiet = open.filter((c) => c.beaconSuppressed === true);
+  const overdue = open.filter((c) => c.hardDeadlineAt && Date.parse(c.hardDeadlineAt) < now);
+
+  // Component-authored, jargon-free headline — honest to the one population.
+  let headline;
+  if (open.length === 0) {
+    headline = "You have no open promises right now.";
+  } else {
+    const soonClause = dueSoon.length > 0 ? `${dueSoon.length} need attention soon` : 'none need attention soon';
+    const overdueClause = overdue.length > 0 ? `${overdue.length} overdue` : 'none overdue';
+    const noun = open.length === 1 ? 'open promise' : 'open promises';
+    headline = `I'm carrying ${open.length} ${noun}; ${soonClause}, ${overdueClause}.`;
+  }
+
+  const tiles = [
+    { key: 'open', label: 'Open', value: String(open.length), tone: 'neutral', rows: open },
+    { key: 'due-soon', label: 'Due soon', value: String(dueSoon.length), tone: dueSoon.length ? 'warn' : 'neutral', rows: dueSoon },
+    { key: 'waiting', label: 'Waiting on you', value: String(waiting.length), tone: waiting.length ? 'warn' : 'neutral', rows: waiting },
+    { key: 'quiet', label: 'Quiet', value: String(quiet.length), tone: 'muted', rows: quiet },
+  ];
+
+  return { headline, tiles, population: open };
+}
+
+/** One plain-word Layer-2 row for a commitment (no IDs/cadences — those are Layer 3). */
+export function commitmentRowText(c) {
+  const summary = sanitizeForDisplay(c.agentResponse || c.userRequest || 'A promise', 'summary');
+  return summary;
+}
+
+function defaultFmtTs(iso) {
+  if (!iso) return '—';
+  try { return new Date(iso).toLocaleString(); } catch { return String(iso); }
+}
+
+/**
+ * Layer-3 full record for a commitment — the raw detail (IDs, cadence, deadlines)
+ * lives HERE, one click below the plain Layer-2 row. All values via textContent
+ * (XSS-safe); this is where insider fields legitimately appear. Optional onDeliver
+ * wires the existing "Mark delivered" action onto the record.
+ */
+export function commitmentRecordNode(doc, c, opts = {}) {
+  const fmtTs = opts.fmtTs || defaultFmtTs;
+  const wrap = el(doc, 'div', 'glance-record-fields');
+  const rows = [
+    ['Promise', c.agentResponse || c.userRequest || '—'],
+    ['id', c.id || '—'],
+    ['topic', c.topicId != null ? String(c.topicId) : '—'],
+    ['cadence', c.cadenceMs ? `${Math.round(c.cadenceMs / 1000)}s` : '—'],
+    ['heartbeats', String(c.heartbeatCount ?? 0)],
+    ['last heartbeat', fmtTs(c.lastHeartbeatAt)],
+    ['soft deadline', fmtTs(c.softDeadlineAt)],
+    ['hard deadline', fmtTs(c.hardDeadlineAt)],
+  ];
+  for (const [k, v] of rows) {
+    const row = el(doc, 'div', 'glance-record-row');
+    row.appendChild(el(doc, 'span', 'glance-record-key', String(k)));
+    row.appendChild(el(doc, 'span', 'glance-record-val', String(v)));
+    wrap.appendChild(row);
+  }
+  if (typeof opts.onDeliver === 'function' && c.id) {
+    const btn = doc.createElement('button');
+    btn.type = 'button';
+    btn.className = 'glance-record-action';
+    btn.textContent = 'Mark delivered';
+    btn.addEventListener('click', () => { btn.disabled = true; opts.onDeliver(c.id); });
+    wrap.appendChild(btn);
+  }
+  return wrap;
+}
+
+/**
+ * Build the FULL Commitments glance spec with drill wiring — the reference
+ * implementation, importable by index.html AND the three test tiers. Each tile's
+ * onActivate renders the filtered open-promises as plain Layer-2 rows; each row
+ * opens the Layer-3 record. Population + counts come from buildCommitmentsGlance
+ * (one denominator, honest counts).
+ */
+export function commitmentsGlanceSpec(doc, commitments, opts = {}) {
+  const now = opts.now ?? Date.now();
+  const base = buildCommitmentsGlance(commitments, now);
+  const tiles = base.tiles.map((t) => ({
+    key: t.key,
+    label: t.label,
+    value: t.value,
+    tone: t.tone,
+    onActivate: ({ doc: d, drilldown, openRecord }) => {
+      const rows = t.rows || [];
+      if (rows.length === 0) return; // component renders the honest F6 empty-state
+      const list = el(d, 'div', 'glance-list');
+      for (const c of rows) {
+        const row = d.createElement('button');
+        row.type = 'button';
+        row.className = 'glance-list-row';
+        row.setAttribute('aria-label', 'Open the full record');
+        row.appendChild(el(d, 'span', 'glance-list-summary', commitmentRowText(c)));
+        row.addEventListener('click', () => openRecord(commitmentRecordNode(d, c, { onDeliver: opts.onDeliver })));
+        list.appendChild(row);
+      }
+      drilldown.appendChild(list);
+    },
+  }));
+  return { headline: base.headline, tiles, population: base.population };
+}

package/dashboard/index.html

@@ -593,6 +593,71 @@
       max-width: 900px;
     }
 
+    /* ── Glance component (Dashboard UX Standard F10/F11, topic 29836) ──
+       The shared three-layer template rendered by dashboard/glance.js: a
+       plain-English headline + ≤5 labeled tiles (Layer 1), each drilling into a
+       list (Layer 2) then a full record (Layer 3). Theme-consistent + mobile
+       responsive (tiles/records reflow; nothing scrolls the page sideways). */
+    .glance-root { display: flex; flex-direction: column; gap: 16px; }
+    .glance-layer { display: flex; flex-direction: column; gap: 16px; }
+    .glance-headline {
+      font-size: 20px; font-weight: 600; line-height: 1.4;
+      color: var(--text-bright); max-width: 900px;
+    }
+    .glance-tiles {
+      display: grid; gap: 12px;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    }
+    .glance-tile {
+      display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
+      padding: 16px; border: 1px solid var(--border); border-radius: 10px;
+      background: var(--bg-panel); color: var(--text); cursor: pointer;
+      text-align: left; min-width: 0;
+      transition: background .15s, border-color .15s;
+    }
+    .glance-tile:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
+    .glance-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .glance-tile[aria-expanded="true"] { border-color: var(--accent); background: var(--bg-active); }
+    .glance-tile-value { font-size: 28px; font-weight: 700; color: var(--text-bright); }
+    .glance-tile-label { font-size: 13px; color: var(--text-dim); }
+    .glance-tile[data-tone="warn"] .glance-tile-value { color: var(--orange); }
+    .glance-tile[data-tone="muted"] .glance-tile-value { color: var(--text-dim); }
+    .glance-tile-degraded { justify-content: center; }
+    .glance-tile-degraded .glance-tile-label { color: var(--text); font-weight: 600; }
+    .glance-drilldown {
+      border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel);
+      padding: 16px; display: flex; flex-direction: column; gap: 12px;
+    }
+    .glance-drilldown[hidden] { display: none; }
+    .glance-drill-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+    .glance-drill-title { font-weight: 600; color: var(--text-bright); }
+    .glance-drill-back {
+      padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
+      background: var(--bg-hover); color: var(--text); cursor: pointer; font-size: 12px;
+    }
+    .glance-drill-back:hover { border-color: var(--accent-dim); }
+    .glance-list { display: flex; flex-direction: column; gap: 8px; }
+    .glance-list-row {
+      text-align: left; padding: 12px 14px; border: 1px solid var(--border);
+      border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer;
+      line-height: 1.4; width: 100%;
+    }
+    .glance-list-row:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
+    .glance-empty { padding: 24px; text-align: center; color: var(--text-dim); }
+    .glance-record { display: flex; flex-direction: column; gap: 10px; }
+    .glance-record-fields { display: flex; flex-direction: column; gap: 6px; }
+    .glance-record-row {
+      display: grid; grid-template-columns: minmax(80px, 140px) 1fr; gap: 10px; font-size: 13px;
+    }
+    .glance-record-key { color: var(--text-dim); }
+    .glance-record-val { color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
+    .glance-record-action {
+      align-self: flex-start; margin-top: 8px; padding: 6px 12px;
+      border: 1px solid var(--border); border-radius: 6px; background: var(--bg-hover);
+      color: var(--text); cursor: pointer;
+    }
+    .glance-record-action:hover { border-color: var(--accent-dim); }
+
     .terminal-header {
       display: flex;
       align-items: center;
@@ -3312,15 +3377,11 @@
         <button onclick="loadCommitments()" style="padding:6px 12px">Refresh</button>
       </div>
       <div class="tab-purpose">
-        Open promises — beacon-watched commitments (⏳). States:
-        <span style="color:#4a9a4a">pending</span>,
-        <span style="color:#e27d3b">atRisk</span>,
-        <span style="color:#888">suppressed</span>.
-      </div>
-      <div id="commitmentsEmpty" style="padding:40px;text-align:center;color:var(--text-dim);display:none">
-        No open promises.
+        Your open promises at a glance — the headline says where things stand; tap a tile to see which promises, tap one for the full record.
       </div>
-      <div id="commitmentsList" style="display:flex;flex-direction:column;gap:12px"></div>
+      <!-- Glance floors F10/F11 (topic 29836): the shared component renders the
+           headline + tiles + drill-down here. Reference implementation. -->
+      <div id="commitmentsGlance" class="glance-root"></div>
     </div>
 
     <!-- Tokens Tab — read-only token-usage observability -->
@@ -8757,119 +8818,72 @@
       }
     }
 
-    // ── Commitments Tab (PROMISE-BEACON-SPEC — Open Promises) ────
-    // Fetches /commitments?status=active and renders beacon-watched
-    // pending + atRisk commitments with a "Mark delivered" action.
-    // All content goes through textContent; no innerHTML. XSS-safe.
+    // ── Commitments Tab — glance floors F10/F11 (topic 29836) ────
+    // The reference implementation of the shared glance component. Fetches
+    // /commitments?status=active and renders a plain-English headline + ≤5 tiles
+    // (Layer 1); each tile drills into the filtered open-promises list (Layer 2);
+    // each row opens the full record with IDs/cadence/deadlines (Layer 3). All
+    // content goes through the component's sanitizer + textContent (XSS-safe).
+    let __glanceModule = null;
+    async function loadGlanceModule() {
+      if (!__glanceModule) {
+        // Same try/catch dynamic-import guard the other tabs use — a missing/failed
+        // glance.js degrades the tab gracefully instead of white-screening.
+        try { __glanceModule = await import('/dashboard/glance.js'); }
+        catch (e) { console.error('[glance] module load failed', e); return null; }
+      }
+      return __glanceModule;
+    }
+
     async function loadCommitments() {
-      const list = document.getElementById('commitmentsList');
-      const empty = document.getElementById('commitmentsEmpty');
+      const glanceRoot = document.getElementById('commitmentsGlance');
       const countBadge = document.getElementById('tabCommitmentCount');
-      while (list.firstChild) list.removeChild(list.firstChild);
-      empty.style.display = 'none';
+      if (!glanceRoot) return;
+
+      const glance = await loadGlanceModule();
+      if (!glance) {
+        // Graceful degrade: the component couldn't load. Show an honest note, no crash.
+        glanceRoot.textContent = 'Loading the glance view failed — refresh to retry.';
+        return;
+      }
 
       let res = null;
       try {
         res = await apiFetch('/commitments?status=active');
-      } catch { /* fall through */ }
+      } catch { /* fall through to the disabled/empty glance @silent-fallback-ok — network hiccup renders the honest empty state */ }
 
       if (!res || !res.enabled) {
-        empty.style.display = 'block';
-        empty.textContent = 'CommitmentTracker not available.';
+        glanceRoot.textContent = '';
+        const note = document.createElement('div');
+        note.className = 'glance-empty';
+        note.textContent = res && res.enabled === false
+          ? 'Promise tracking is not set up on this agent yet.'
+          : 'Could not load your promises right now — refresh to retry.';
+        glanceRoot.appendChild(note);
         if (countBadge) countBadge.textContent = '0';
         return;
       }
+
       const items = Array.isArray(res.commitments) ? res.commitments : [];
-      // Show only beacon-watched pending + atRisk.
       const open = items.filter(c => c.beaconEnabled && c.status === 'pending');
       if (countBadge) countBadge.textContent = String(open.length);
-      if (open.length === 0) {
-        empty.style.display = 'block';
-        empty.textContent = 'No open promises.';
-        return;
-      }
-
-      const fmtTs = (iso) => {
-        if (!iso) return '—';
-        try { return new Date(iso).toLocaleString(); } catch { return iso; }
-      };
-
-      for (const c of open) {
-        const card = document.createElement('div');
-        card.style.cssText = 'padding:14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-dim);display:flex;flex-direction:column;gap:8px';
 
-        const header = document.createElement('div');
-        header.style.cssText = 'display:flex;justify-content:space-between;gap:12px;align-items:flex-start';
-        const summary = document.createElement('div');
-        summary.style.cssText = 'flex:1;font-weight:600;line-height:1.3';
-        summary.textContent = (c.agentResponse || c.userRequest || '(no summary)').slice(0, 160);
-        header.appendChild(summary);
-
-        // State badge.
-        const badge = document.createElement('span');
-        const atRisk = !!c.atRisk;
-        const suppressed = !!c.beaconSuppressed;
-        const [badgeText, badgeBg] = suppressed
-          ? [`suppressed: ${c.beaconSuppressionReason || '?'}`, '#555']
-          : atRisk
-            ? ['atRisk', '#e27d3b']
-            : ['pending', '#4a9a4a'];
-        badge.textContent = badgeText;
-        badge.style.cssText = `font-size:11px;padding:3px 8px;border-radius:4px;background:${badgeBg};color:#fff;white-space:nowrap`;
-        header.appendChild(badge);
-        card.appendChild(header);
-
-        const meta = document.createElement('div');
-        meta.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;font-size:12px;color:var(--text-dim)';
-        const rows = [
-          ['id', c.id],
-          ['topic', c.topicId != null ? String(c.topicId) : '—'],
-          ['cadence', c.cadenceMs ? `${Math.round(c.cadenceMs / 1000)}s` : '—'],
-          ['heartbeats', String(c.heartbeatCount ?? 0)],
-          ['lastHeartbeat', fmtTs(c.lastHeartbeatAt)],
-          ['nextUpdateDue', fmtTs(c.nextUpdateDueAt)],
-          ['softDeadline', fmtTs(c.softDeadlineAt)],
-          ['hardDeadline', fmtTs(c.hardDeadlineAt)],
-        ];
-        for (const [k, v] of rows) {
-          const cell = document.createElement('div');
-          const kEl = document.createElement('span');
-          kEl.textContent = `${k}: `;
-          kEl.style.opacity = '0.7';
-          const vEl = document.createElement('span');
-          vEl.textContent = v;
-          vEl.style.color = 'var(--text)';
-          cell.appendChild(kEl);
-          cell.appendChild(vEl);
-          meta.appendChild(cell);
-        }
-        card.appendChild(meta);
-
-        // Actions.
-        const actions = document.createElement('div');
-        actions.style.cssText = 'display:flex;gap:8px;align-items:center';
-        const deliverBtn = document.createElement('button');
-        deliverBtn.textContent = 'Mark delivered';
-        deliverBtn.style.cssText = 'padding:6px 10px;cursor:pointer';
-        deliverBtn.addEventListener('click', async () => {
-          deliverBtn.disabled = true;
+      const spec = glance.commitmentsGlanceSpec(document, items, {
+        now: Date.now(),
+        onDeliver: async (id) => {
           try {
-            await apiFetch(`/commitments/${encodeURIComponent(c.id)}/deliver`, {
+            await apiFetch(`/commitments/${encodeURIComponent(id)}/deliver`, {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({}),
             });
             await loadCommitments();
           } catch (err) {
-            deliverBtn.disabled = false;
             alert('Deliver failed: ' + (err && err.message ? err.message : String(err)));
           }
-        });
-        actions.appendChild(deliverBtn);
-        card.appendChild(actions);
-
-        list.appendChild(card);
-      }
+        },
+      });
+      glance.renderGlance(document, glanceRoot, spec);
     }
 
     // ── Secrets Tab ──────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instar",
-  "version": "1.3.810",
+  "version": "1.3.811",
   "description": "Coherence infrastructure for self-evolving AI agents — on the Claude Code or Codex subscription you already have.",
   "type": "module",
   "main": "dist/index.js",

package/src/data/builtin-manifest.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./builtin-manifest.schema.json",
   "schemaVersion": 1,
-  "generatedAt": "2026-07-11T01:56:42.834Z",
-  "instarVersion": "1.3.810",
+  "generatedAt": "2026-07-11T02:35:23.065Z",
+  "instarVersion": "1.3.811",
   "entryCount": 202,
   "entries": {
     "hook:session-start": {

package/upgrades/1.3.811.md

@@ -0,0 +1,53 @@
+# Upgrade Guide — vNEXT
+
+<!-- assembled-by: assemble-next-md -->
+<!-- bump: patch -->
+
+## What Changed
+
+Added two new floors to the Dashboard UX Standard and shipped their enforcement plus
+the first reference view:
+
+- **F10 (glance floor):** every main view's front page is one plain-English headline +
+  at most 5 big labeled tiles, under 150 words, with no insider vocabulary (internal IDs,
+  state-machine names, config keys, seconds-cadences).
+- **F11 (universal drill-down):** every tile/count/row is clickable and opens the next
+  detail layer — a filtered list, then the full record — with no dead-end summaries.
+- A shared component `dashboard/glance.js` renders the three-layer template (headline +
+  tiles + drill-down) and *refuses* to build an over-budget or jargon-carrying glance, so
+  the rule is baked into the code, not left to memory.
+- Enforcement across all three test tiers (unit F10 + F11, integration against the real
+  `/commitments` route, e2e feature-alive), with the 25 other tabs grandfathered against a
+  survey scorecard whose list can only shrink (a NEW tab can't ship below the floor).
+- The **Commitments tab** is the reference implementation: its old wall of raw records
+  (IDs, `cadence: 1800s`, `atRisk`) is now a headline ("I'm carrying N open promises; K
+  need attention soon, none overdue.") over tiles (Open · Due soon · Waiting on you ·
+  Quiet); tap a tile to see which promises, tap one for the full record.
+
+This is Phase 1 of the operator-approved four-phase rollout (topic 29836). Phases 2–4
+retrofit the remaining tabs and are tracked in the spec.
+
+## What to Tell Your User
+
+Your dashboard's Commitments tab is now readable at a glance: instead of a wall of
+technical records, you'll see a one-sentence summary of where your open promises stand
+plus a few big tiles. Tap any tile to see exactly which promises are behind that number,
+and tap one of those to see its full detail. Nothing is lost — the IDs and timestamps
+just moved one or two taps down instead of crowding the front page. This is the first tab
+brought to the new "glance" standard; the rest follow in later updates.
+
+## Summary of New Capabilities
+
+- The Commitments dashboard tab now leads with a plain-English headline + tiles, with
+  every number tappable down to the full record.
+- A new dashboard-wide standard (F10/F11) that keeps future views readable at a glance and
+  fully drillable, enforced automatically in CI.
+
+## Evidence
+
+- Unit: `tests/unit/dashboard-glance-word-budget.test.ts` (31), `tests/unit/dashboard-glance-drilldown.test.ts` (8).
+- Integration: `tests/integration/glance-commitments-tab.test.ts`.
+- E2E: `tests/e2e/glance-commitments-tab-lifecycle.test.ts`.
+- Live browser render (Playwright): headline + 4 tiles render; tile → filtered list → full
+  record (`id: CMT-953`, `cadence: 1800s` shown only at the record layer).
+- Spec convergence: `docs/specs/reports/dashboard-ux-standard-convergence.md`.

package/upgrades/side-effects/glance-floors-f10-f11.md

@@ -0,0 +1,225 @@
+# Side-Effects Review — Dashboard glance floors F10/F11 (Phase 1)
+
+**Version / slug:** `glance-floors-f10-f11`
+**Date:** `2026-07-10`
+**Author:** `echo`
+**Second-pass reviewer:** `not required` (no block/allow, session-lifecycle, or gate/sentinel/guard surface — this is a display-only front-end component; see §5)
+
+## Summary of the change
+
+Adds the two "glance floors" (F10 glance + F11 universal drill-down) to the Dashboard
+UX Standard and ships their enforcement: one shared front-end component
+`dashboard/glance.js` (a plain-English headline + ≤5 labeled tiles + a drill-down
+container that opens a filtered list then a full record), a pure `validateGlanceSpec`
+that refuses an over-budget or jargon-carrying glance, and three test tiers
+(unit F10 + F11, integration against the real `/commitments` route, e2e feature-alive).
+One view — the Commitments tab — is wired onto the component as the reference
+implementation (glance layer → existing list as Layer 2 → full record as Layer 3).
+Files: `docs/specs/dashboard-ux-standard.md` (+ `.eli16.md` + convergence report),
+`docs/STANDARDS-REGISTRY.md`, `dashboard/glance.js` (new), `dashboard/index.html`
+(Commitments panel markup + CSS + `loadCommitments` rewrite), and four test files.
+**No `src/*.ts` change, no new server route, no config, no hooks.**
+
+## Decision-point inventory
+
+**No decision-point surface.** Nothing here gates information flow, blocks actions,
+filters messages, or constrains agent behavior. `validateGlanceSpec` is a build-time
+quality assertion over component-authored UI copy — it decides how a dashboard tab
+*renders*, never what the agent may do. The one "refusal" (the component refusing to
+render an over-budget/jargon glance) affects presentation only and falls back to an
+honest degraded glance, never a raw dump — it holds no authority over any pipeline.
+
+- `validateGlanceSpec` (dashboard/glance.js) — add — a pure UI-copy budget/jargon
+  check; presentation-only, no runtime authority.
+
+---
+
+## 1. Over-block
+
+**No block/allow surface — over-block not applicable.** The nearest analog is the
+jargon check possibly rejecting legitimate glance copy. It is scoped to
+*component-authored* Layer-1 strings only (headline + tile labels + values); agent/
+user free text lives at Layer 2/3 and is displayed (sanitized), never vocab-gated — so
+a user phrasing a promise with jargon can never blank the operator's glance. If the
+check does reject a builder's copy, the component renders an honest degraded glance
+(truncated headline + a drill), never a raw dump — no operator-visible data is lost.
+
+---
+
+## 2. Under-block
+
+**No block/allow surface — under-block not applicable.** As a readability floor the
+jargon detector is deliberately heuristic (it is NOT a secret-redaction boundary —
+secret handling stays at the API/data layer, untouched here). It can miss novel
+concept-jargon expressed in ordinary words; that residual is a tracked later-phase
+tightening, and the curated insider-TERM denylist + form heuristics cover the known
+classes (internal IDs, machine ids, config keys, cadences, state-machine names) with
+bypass-variant tests.
+
+---
+
+## 3. Level-of-abstraction fit
+
+Right layer. F10/F11 are enforced at the **component boundary** (a shared renderer +
+a pure validator), not by scraping bespoke per-tab markup — because the glance content
+is JS-rendered from live data, a static grep of `index.html` cannot see it, so the
+component is the correct place to make the floor structural. The component REUSES the
+existing lower-level primitives instead of re-implementing them: `sanitizeForDisplay`,
+`hasOpenInteraction`, and `updateCountdowns` are imported from `dashboard/subscriptions.js`
+(the shipped F9 safety + interaction-hold bar), so both surfaces share one contract.
+
+---
+
+## 4. Signal vs authority compliance
+
+**Required reference:** [docs/signal-vs-authority.md](../../docs/signal-vs-authority.md)
+
+- [x] No — this change has no block/allow surface.
+
+`validateGlanceSpec` is a build-time/presentation quality check with no blocking
+authority over any runtime pipeline. It informs how a tab renders (and, in the tests,
+fails CI on a NEW below-floor tab) — it never gates a message, action, session, or
+information flow. There is no brittle detector holding runtime authority here.
+
+---
+
+## 5. Interactions
+
+- **Shadowing:** none. The glance component is additive; it renders into a new
+  `#commitmentsGlance` container. It does not run before/after any check.
+- **Double-fire:** none. `loadCommitments` replaces (never appends) the glance root
+  and the drill container, so repeated renders/polls cannot accumulate DOM or listeners.
+- **Races:** F9-composed. While a drill interaction is open (the drill container carries
+  `data-interaction-open`, or a field is focused/dirty), a re-render MERGES live counts
+  via `patchGlanceCounts` instead of rebuilding over the interaction — reusing the shipped
+  `hasOpenInteraction`. The Commitments tab has no background poll today, so this is
+  latent-but-correct (and unit-tested), and will already be right if a poll is added.
+- **Feedback loops:** none — a pure renderer over data the tab already fetched.
+
+---
+
+## 6. External surfaces
+
+- **Other agents / users / external systems:** none. `dashboard/glance.js` is a
+  client-side ESM module served statically; it holds no secrets, opens no endpoint, and
+  makes no network call of its own (the Commitments reference reuses the EXISTING authed
+  `/commitments` GET and the EXISTING `/commitments/:id/deliver` POST).
+- **Persistent state:** none touched.
+- **Operator surface (Mobile-Complete):** the operator actions on this surface (view
+  promises, drill in, mark delivered) are all completable from the dashboard, which is
+  phone-reachable via the tunnel + PIN — no new laptop-bound step. The "Mark delivered"
+  action lives on the Layer-3 record and calls the existing authed route.
+
+---
+
+## 6b. Operator-surface quality (Operator-Surface Quality standard)
+
+This change touches an operator surface (`dashboard/glance.js`, `dashboard/index.html`).
+The glance floors ARE the whole-view structural application of this standard.
+
+1. **Leads with the primary action?** Yes. On arrival the Commitments tab shows the
+   headline answer ("I'm carrying N open promises; K need attention soon, none overdue.")
+   and the big labeled tiles — the state and the way in, visible immediately, no toggle,
+   no below-the-fold, no explanatory prose in front.
+2. **Zero raw internals as primary content?** Yes — enforced by F10 itself. No internal
+   IDs, state-machine names, config keys, or seconds-cadences may appear at the glance
+   layer (a machine-checked rule). The raw detail (`CMT-953`, `cadence 1800s`, timestamps)
+   lives at Layer 3, one click down, where it belongs — verified in a real browser (tile →
+   list → record).
+3. **Destructive actions de-emphasized?** N/a-leaning: the only action is the constructive
+   "Mark delivered", placed on the Layer-3 record (not above the glance). There is no
+   destructive control on this surface; nothing louder than the primary path.
+4. **Plain language + phone width?** Yes. Copy reads the way a person would say it
+   ("Waiting on you", "Due soon", "Quiet"). Tiles use an auto-fit grid that reflows at
+   phone width; the drill list/records stack; nothing scrolls the page sideways (records
+   use `word-break`/`overflow-wrap`). Verified visually at 900px and via the responsive
+   grid.
+
+---
+
+## 7. Multi-machine posture (Cross-Machine Coherence)
+
+**machine-local BY DESIGN → effectively `unified` by construction.** `dashboard/glance.js`
+is a **stateless client-side renderer**: it persists nothing, reads no config, holds no
+server state, and introduces no machine-divergent state. It renders whatever data the
+adopting tab already fetched and inherits that endpoint's existing posture — the
+Commitments reference drills into `GET /commitments`, whose pool-scope posture
+(`?scope=mesh`) is unchanged by this PR. So there is no new machine-local surface to
+justify and no `machine-local-justification` marker is required.
+
+- **User-facing notices:** none emitted (a passive render surface — one-voice gating n/a).
+- **Durable state:** none held (nothing strands on topic transfer).
+- **Generated URLs:** none (no links minted that must survive a machine boundary).
+
+**Migration Parity:** met by construction. The dashboard ships wholesale via
+`express.static(dashboardDir)` from the installed package directory (`package.json`
+`files` includes `dashboard/`; `AgentServer.resolveDashboardDir` resolves to the package
+root, not the agent home). A package update replaces `dashboard/glance.js` + updated
+`index.html` on the normal update path — exactly as `dashboard/subscriptions.js` shipped —
+so already-deployed agents receive the glance with **no `PostUpdateMigrator` entry** and
+no `init`-only templating. `loadCommitments` loads `glance.js` through the same `try/catch`
+dynamic-import guard the other tabs use, so a missing/failed module degrades the tab
+gracefully. **Agent Awareness:** n/a — this is an internal dashboard UX/dev standard (how
+a view renders), not a new operator-invocable capability/route/config/hook; the awareness
+surface is `STANDARDS-REGISTRY.md` (nine → eleven floors), already updated.
+
+---
+
+## 8. Rollback cost
+
+**Pure front-end change — revert and ship a patch.** No persistent state, no data
+migration, no agent-state repair. `dashboard/glance.js` and the `index.html` edits are
+replaced wholesale on the next package update; reverting the commit restores the prior
+Commitments renderer. No user-visible regression during the rollback window (the tab
+simply reverts to its previous look). The new tests would revert with the code.
+
+---
+
+## Conclusion
+
+This review produced no blocking concerns. The change is display-only with no
+decision-point, block/allow, session-lifecycle, or gate/sentinel surface, so no
+second-pass review is required. The design was materially hardened by /spec-converge
+(a six-angle internal panel + the code-backed Standards-Conformance Gate + an external
+Gemini pass across three rounds): the Layer-1-is-100%-component-authored invariant that
+makes the jargon check both safe and complete; the XSS/display-safety contract reusing
+the shipped `sanitizeForDisplay`; bypass-resistant vocab detection; the honest-degraded
+(never raw-dump) failure mode; a strengthened F11 (non-vacuous, distinct, tile→list→record,
+XSS + dead-end negatives); the structural grandfather ratchet (completeness + monotonic
+ceiling); the one-population honest tile→server-field derivation with a count-truthfulness
+test; and all three test tiers. Verified live in a real browser (Playwright): the
+Commitments glance renders headline + tiles, and drilling opens the filtered list then the
+full record with the raw IDs/cadence correctly one click down. Clear to ship.
+
+---
+
+## Second-pass review (if required)
+
+**Reviewer:** not required — no block/allow, messaging-dispatch, session-lifecycle,
+compaction, coherence/idempotency/trust, or sentinel/guard/gate/watchdog surface (Phase-5
+triggers). Display-only front-end component.
+
+---
+
+## Evidence pointers
+
+- Unit: `tests/unit/dashboard-glance-word-budget.test.ts` (31 tests — F10 budget/jargon +
+  bypass variants + adversarial-fixture conformance + count-truthfulness + the ratchet),
+  `tests/unit/dashboard-glance-drilldown.test.ts` (8 tests — F11 walk, Layer-2→3, negatives,
+  F9 hold, XSS).
+- Integration: `tests/integration/glance-commitments-tab.test.ts` (glance built + walked
+  against a real `GET /commitments` HTTP response with a live `CommitmentTracker`).
+- E2E: `tests/e2e/glance-commitments-tab-lifecycle.test.ts` (feature-alive: 200 not 503,
+  feature ON/OFF, full render, no `<script>` survives).
+- Live: Playwright render of the reference glance — headline "I'm carrying 5 open
+  promises; 2 need attention soon, none overdue.", 4 tiles, tile→list (2 rows)→record
+  (`id: CMT-953`, `cadence: 1800s` at Layer 3 only).
+- Spec convergence report: `docs/specs/reports/dashboard-ux-standard-convergence.md`.
+
+---
+
+## Class-Closure Declaration (display-only mirror)
+
+No agent-authored-artifact defect and no self-triggered controller (no loop / monitor /
+sentinel / reaper / scheduler / recovery path that fires a restart / swap / respawn /
+spawn / notify / retry / re-drive / kill) — **not applicable**.