@chrisdudek/yg 5.3.0 → 5.4.0

package/dist/templates/portal/js/tree.js

@@ -0,0 +1,190 @@
+/*
+ * Node tree — a DOM-virtualized, honest-state hierarchy.
+ *
+ * Builds the nested parent/child tree from the flat PortalNode[] (parent links), lays it
+ * out with the vendored d3-hierarchy tidy-tree so depth/order are real (not hand-rolled),
+ * and renders it as a DOM list — accessible, find-in-page, keyboard-reachable. To stay
+ * responsive on a large real graph (300–1000+ nodes) the list is VIRTUALIZED: only the
+ * rows in (and a small overscan around) the scroll viewport are in the DOM; a spacer holds
+ * the full scroll height so the scrollbar is honest.
+ *
+ * buildForest / flattenLayout are PURE over plain data (no DOM) so the tree shape is
+ * unit-testable; the virtualization is the thin DOM layer. Browser globals only — the
+ * vendored d3 layout is the only dependency, already on the page. No network, no Node.
+ */
+(function () {
+  'use strict';
+
+  var Yg = (window.YgPortal = window.YgPortal || {});
+  var dom = Yg.dom;
+  var ROW_H = 28; // px per row (matches the token grid)
+  var OVERSCAN = 8;
+
+  /**
+   * Build a nested {node, children} forest from the flat PortalNode[] via parent links,
+   * under one synthetic root so a multi-root graph lays out as a single tree. Children are
+   * kept in input order (the pipeline emits a stable order). Pure — returns plain objects.
+   */
+  function buildForest(nodes) {
+    var byPath = {};
+    var list = nodes || [];
+    for (var i = 0; i < list.length; i += 1) {
+      byPath[list[i].path] = { node: list[i], children: [] };
+    }
+    var roots = [];
+    for (var j = 0; j < list.length; j += 1) {
+      var n = list[j];
+      var entry = byPath[n.path];
+      var parent = n.parent ? byPath[n.parent] : null;
+      if (parent) parent.children.push(entry);
+      else roots.push(entry);
+    }
+    return { node: { path: '', name: 'graph', type: 'root', state: 'no-rule' }, children: roots };
+  }
+
+  /**
+   * Flatten the forest into an ordered, depth-tagged row list using the vendored
+   * d3-hierarchy layout when present (real tidy-tree order), falling back to a plain
+   * depth-first walk otherwise. Each row is { node, depth }. Pure over the forest + the
+   * (optional) injected d3 — testable by passing a d3 stub or none.
+   */
+  function flattenLayout(forest, d3) {
+    var rows = [];
+    if (d3 && d3.hierarchy && d3.tree) {
+      var h = d3.hierarchy(forest);
+      d3.tree().nodeSize([1, 1])(h);
+      h.eachBefore(function (d) {
+        if (!d.data.node.path) return; // skip synthetic root
+        rows.push({ node: d.data.node, depth: d.depth - 1 });
+      });
+      return rows;
+    }
+    walk(forest, -1, rows);
+    return rows;
+  }
+
+  function walk(entry, depth, out) {
+    if (entry.node.path) out.push({ node: entry.node, depth: depth });
+    for (var i = 0; i < entry.children.length; i += 1) walk(entry.children[i], depth + 1, out);
+  }
+
+  /**
+   * Render a virtualized tree into `mount` from `data`, calling `onSelect(path)` when a row
+   * is activated (click / Enter). Returns a controller exposing `destroy()`. Only the visible
+   * window of rows is materialized; scrolling re-materializes the window — so a 1000-node
+   * graph paints a couple dozen rows, not a thousand.
+   */
+  function render(mount, data, onSelect) {
+    var d3 = window.d3;
+    var nodes = data.nodes || [];
+    var allRows = flattenLayout(buildForest(nodes), d3);
+    var rows = allRows;
+    var revealPath = null;
+
+    // path -> parent path, so a filter can keep a match's ancestors (its place in the hierarchy).
+    var parentOf = {};
+    for (var pi = 0; pi < nodes.length; pi += 1) parentOf[nodes[pi].path] = nodes[pi].parent || null;
+
+    var scroller = dom.el('div', 'tree-scroller');
+    scroller.setAttribute('role', 'tree');
+    var spacer = dom.el('div', 'tree-spacer');
+    spacer.style.height = rows.length * ROW_H + 'px';
+    var win = dom.el('div', 'tree-window');
+    spacer.appendChild(win);
+    scroller.appendChild(spacer);
+    mount.appendChild(scroller);
+
+    function paint() {
+      var top = scroller.scrollTop;
+      var height = scroller.clientHeight || ROW_H * 24;
+      var first = Math.max(0, Math.floor(top / ROW_H) - OVERSCAN);
+      var last = Math.min(rows.length, Math.ceil((top + height) / ROW_H) + OVERSCAN);
+      dom.clear(win);
+      win.style.transform = 'translateY(' + first * ROW_H + 'px)';
+      for (var i = first; i < last; i += 1) win.appendChild(buildRow(rows[i], onSelect, revealPath));
+    }
+
+    scroller.addEventListener('scroll', paint);
+    paint();
+
+    /** Prune the tree to rows matching `q` (by name or path) plus their ancestors; empty = all. */
+    function filter(q) {
+      var query = String(q || '').trim().toLowerCase();
+      if (!query) {
+        rows = allRows;
+      } else {
+        var keep = {};
+        for (var i = 0; i < allRows.length; i += 1) {
+          var nd = allRows[i].node;
+          if ((nd.name || '').toLowerCase().indexOf(query) >= 0 || (nd.path || '').toLowerCase().indexOf(query) >= 0) {
+            keep[nd.path] = true;
+            var p = parentOf[nd.path];
+            while (p) {
+              keep[p] = true;
+              p = parentOf[p];
+            }
+          }
+        }
+        rows = allRows.filter(function (r) {
+          return keep[r.node.path];
+        });
+      }
+      spacer.style.height = rows.length * ROW_H + 'px';
+      scroller.scrollTop = 0;
+      paint();
+    }
+
+    /** Scroll the tree to `path` (in the current row set) and mark it, so a palette pick / deep
+        link lands the user ON the node in the hierarchy, not only in the side panel. */
+    function reveal(path) {
+      var idx = -1;
+      for (var i = 0; i < rows.length; i += 1) {
+        if (rows[i].node.path === path) {
+          idx = i;
+          break;
+        }
+      }
+      if (idx < 0) return;
+      revealPath = path;
+      var height = scroller.clientHeight || ROW_H * 24;
+      scroller.scrollTop = Math.max(0, idx * ROW_H - Math.floor(height / 2) + ROW_H);
+      paint();
+    }
+
+    return {
+      rowCount: allRows.length,
+      filter: filter,
+      reveal: reveal,
+      destroy: function () {
+        scroller.removeEventListener('scroll', paint);
+        if (scroller.parentNode) scroller.parentNode.removeChild(scroller);
+      },
+    };
+  }
+
+  function buildRow(row, onSelect, revealPath) {
+    var n = row.node;
+    var li = dom.el('div', 'tree-row ' + Yg.states.cssClass(n.state));
+    li.setAttribute('role', 'treeitem');
+    li.setAttribute('tabindex', '0');
+    li.setAttribute('data-path', n.path);
+    if (revealPath && n.path === revealPath) li.classList.add('tree-row-revealed');
+    li.style.paddingLeft = 12 + row.depth * 16 + 'px';
+    li.appendChild(Yg.states.badge(n.state));
+    li.appendChild(dom.el('span', 'tree-name', n.name || n.path));
+    li.appendChild(dom.el('span', 'tree-type', n.type || ''));
+    function activate() {
+      if (onSelect) onSelect(n.path);
+    }
+    li.addEventListener('click', activate);
+    li.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        activate();
+        e.preventDefault();
+      }
+    });
+    return li;
+  }
+
+  Yg.tree = { buildForest: buildForest, flattenLayout: flattenLayout, render: render, ROW_H: ROW_H };
+})();

package/dist/templates/portal/js/views/coverage-view.js

@@ -0,0 +1,247 @@
+/*
+ * V2 Coverage & Audit — the full Coverage-Truth Ledger.
+ *
+ * The precise, honest audit (§3a V2, §3.1): a 100%-width verdict bar over the full
+ * expected-pair universe (verified — sub-split billed-LLM vs free-deterministic — / refused /
+ * unverified, each color + glyph + label + exact count); a hairline-separated NON-PAIR track
+ * (no-rule / draft / not-applicable) that is counted but structurally barred from the
+ * coverage fraction; LIVE-badged counters (boundary / validator / log-missing) that equal what
+ * yg check enforces; a provenance line; the rule-grouped needs-attention worklist in the
+ * honesty-priority order the pipeline already sorted; and a jump-to-next-unresolved that, on
+ * an empty worklist, repoints to the top residue item rather than dead-ending. Every count is
+ * read from the live PortalData (== yg check); nothing here is a literal, nothing collapses to
+ * green.
+ *
+ * Browser globals only — reads the already-resolved PortalData; no network, no Node.
+ */
+(function () {
+  'use strict';
+
+  var Yg = (window.YgPortal = window.YgPortal || {});
+  var dom = Yg.dom;
+  Yg.views = Yg.views || {};
+
+  /** A bar segment with a non-zero width (collapses to nothing at 0 so the bar stays honest). */
+  function barSeg(cls, flex, label) {
+    if (flex <= 0) return null;
+    var seg = dom.el('div', 'cov-seg ' + cls, label);
+    seg.style.flex = String(flex);
+    return seg;
+  }
+
+  /** A labelled count key: glyph + count + plain label, all from the shared state model. */
+  function key(state, count, suffix) {
+    var k = dom.el('span', 'cov-key');
+    k.appendChild(Yg.states.badge(state));
+    k.appendChild(dom.el('b', null, String(count)));
+    k.appendChild(dom.el('span', 'cov-key-lbl', Yg.states.label(state)));
+    if (suffix) k.appendChild(dom.el('span', 'cov-key-sub', suffix));
+    return k;
+  }
+
+  /**
+   * A LIVE-badged counter. `value` is a number read from the live data, or the string 'UNKNOWN'
+   * when the underlying check could not run — never a fabricated zero. An explicit number is
+   * always rendered (no hidden row); an optional `onClick` routes the chip.
+   */
+  function liveChip(value, label, onClick) {
+    var unknown = value === 'UNKNOWN';
+    var chip = dom.el(onClick ? 'button' : 'div', 'cov-live' + (onClick ? ' cov-live-btn' : ''));
+    if (onClick) {
+      chip.type = 'button';
+      chip.addEventListener('click', onClick);
+    }
+    chip.appendChild(dom.el('span', 'cov-livebadge', 'LIVE'));
+    chip.appendChild(dom.el('b', null, String(value)));
+    chip.appendChild(dom.el('span', null, label));
+    if (unknown) chip.appendChild(dom.el('span', 'cov-key-sub', 'check could not run — not clean, not zero'));
+    else if (value === 0) chip.appendChild(dom.el('span', 'cov-key-sub', 'none on current inputs'));
+    return chip;
+  }
+
+  function renderBar(stage, data, ctx) {
+    var c = data.meta.counts;
+    var nav = ctx && ctx.navigate ? ctx.navigate : function () {};
+    var boundary = data.boundary || { unknown: false, phantom: [], forbiddenType: [] };
+    var ledger = dom.el('div', 'cov-ledger');
+
+    var head = dom.el('div', 'cov-lhead');
+    var frac = dom.el('span', 'cov-frac', c.verified + ' ');
+    frac.appendChild(dom.el('span', 'cov-den', '/ ' + c.pairsTotal));
+    head.appendChild(frac);
+    head.appendChild(dom.el('span', 'cov-lbl', 'expected verdict pairs verified'));
+    head.appendChild(dom.el('span', 'cov-right', c.nodes + ' nodes · ' + c.aspects + ' aspects · ' + c.flows + ' flows'));
+    ledger.appendChild(head);
+
+    // The bar is sized by the real pair STATES (verified / refused / unverified), never by the
+    // expected-pair kind totals — a verified segment must be exactly as wide as the verified
+    // count, so an unverified pair can never paint green. The verified label states the LLM-vs-
+    // deterministic makeup of the expected universe honestly without faking a verified split.
+    // Advisory refusals are a real expected-pair state, but per the honesty model they render
+    // as a NON-BLOCKING warning, never a blocking `refused`. They get their own warning-coloured
+    // segment + key so the bar still accounts for every expected pair without ever showing an
+    // advisory refusal as a blocking red. `refused` here is ENFORCED refusals only (== yg check).
+    var advisoryRefused = c.advisoryRefused || 0;
+    var bar = dom.el('div', 'cov-bar');
+    bar.setAttribute('role', 'group');
+    bar.setAttribute('aria-label', 'verified ' + c.verified + ' of ' + c.pairsTotal + ' expected pairs');
+    var segs = [
+      barSeg('cov-seg-v', c.verified, c.verified > 0 ? c.verified + ' verified' : ''),
+      barSeg('cov-seg-r', c.refused, ''),
+      barSeg(Yg.states.cssClass('warning'), advisoryRefused, ''),
+      barSeg('cov-seg-u', c.unverified, ''),
+    ];
+    for (var i = 0; i < segs.length; i += 1) if (segs[i]) bar.appendChild(segs[i]);
+    if (!bar.firstChild) bar.appendChild(dom.el('div', 'cov-seg cov-seg-empty', 'no expected pairs'));
+    ledger.appendChild(bar);
+
+    var labels = dom.el('div', 'cov-barlabels');
+    labels.appendChild(key('verified', c.verified, 'of ' + c.pairsLLM + ' LLM + ' + c.pairsDet + ' deterministic expected'));
+    labels.appendChild(key('refused', c.refused, 'enforced — blocks (== yg check)'));
+    if (advisoryRefused > 0) labels.appendChild(key('warning', advisoryRefused, 'advisory refusal — does not block'));
+    labels.appendChild(key('unverified', c.unverified));
+    ledger.appendChild(labels);
+
+    // The separated non-pair track — counted, shown, barred from the coverage fraction.
+    ledger.appendChild(dom.el('div', 'cov-hair'));
+    var nonpair = dom.el('div', 'cov-nonpair');
+    nonpair.appendChild(dom.el('span', 'cov-nptag', 'not in coverage fraction:'));
+    nonpair.appendChild(key('no-rule', c.noRule, 'own source'));
+    nonpair.appendChild(key('draft', c.draft));
+    nonpair.appendChild(key('not-applicable', c.notApplicable));
+    ledger.appendChild(nonpair);
+
+    // LIVE counters — read from the live data, never a fabricated zero. The boundary count is
+    // the real undeclared + forbidden-type violation total (declared-only is legitimate, never
+    // counted), or UNKNOWN when the live relation parse could not run; it routes to V4. The
+    // blocking-errors count is the live yg-check error total.
+    var boundaryValue = boundary.unknown
+      ? 'UNKNOWN'
+      : (boundary.phantom || []).length + (boundary.forbiddenType || []).length;
+    var live = dom.el('div', 'cov-livewrap');
+    live.appendChild(
+      liveChip(boundaryValue, 'boundary violations', function () {
+        nav({ view: 'relations' });
+      }),
+    );
+    live.appendChild(liveChip(c.errors, 'blocking errors (== yg check)', undefined));
+    ledger.appendChild(live);
+
+    ledger.appendChild(
+      dom.el(
+        'p',
+        'cov-prov',
+        'Lock read at generation. Deterministic checks and the relation / architecture / mapping / strict-coverage validators are re-run live at generation; the deterministic cache is never trusted. Counts equal what yg check enforces.',
+      ),
+    );
+    stage.appendChild(ledger);
+  }
+
+  function renderWorklist(stage, data, ctx) {
+    var nav = ctx && ctx.navigate ? ctx.navigate : function () {};
+    var worklist = data.worklist || [];
+
+    var title = dom.el('div', 'cov-section');
+    title.appendChild(dom.el('span', null, 'Needs attention'));
+    title.appendChild(dom.el('span', 'cov-section-count', '(' + worklist.length + ')'));
+    var jump = dom.el('button', 'cov-jump');
+    jump.type = 'button';
+    if (worklist.length > 0) {
+      jump.textContent = 'Jump to next unresolved →';
+      jump.addEventListener('click', function () {
+        var first = worklist[0];
+        if (first && first.nodes && first.nodes[0]) nav({ view: 'tree', node: first.nodes[0] });
+      });
+    } else {
+      jump.textContent = 'All clear — view the residue →';
+      jump.classList.add('cov-jump-residue');
+      jump.addEventListener('click', function () {
+        nav({ view: 'suppressions' });
+      });
+    }
+    title.appendChild(jump);
+    stage.appendChild(title);
+
+    if (worklist.length === 0) {
+      var calm = dom.el('div', 'cov-calm');
+      calm.appendChild(dom.el('p', null, 'No refusals and nothing unverified on current inputs. Absence of red is not a pass — the residue above (no-rule nodes, unmapped files, waivers) is still worth a look.'));
+      stage.appendChild(calm);
+      return;
+    }
+
+    var card = dom.el('div', 'cov-card');
+    for (var i = 0; i < worklist.length; i += 1) {
+      card.appendChild(worklistRow(worklist[i], nav));
+    }
+    stage.appendChild(card);
+  }
+
+  function worklistRow(group, nav) {
+    var sevState = group.severity === 'error' ? (group.rule === 'unverified' ? 'unverified' : 'refused') : 'warning';
+    var row = dom.el('div', 'cov-worow');
+    var pill = dom.el('span', 'cov-pill ' + Yg.states.cssClass(sevState));
+    pill.appendChild(Yg.states.badge(sevState));
+    pill.appendChild(dom.el('span', null, group.severity));
+    row.appendChild(pill);
+
+    var id = dom.el('span', 'cov-worow-id');
+    id.appendChild(dom.el('b', 'mono', group.rule));
+    id.appendChild(dom.el('span', 'cov-worow-reason', group.why));
+    row.appendChild(id);
+
+    var meta = dom.el('span', 'cov-worow-meta');
+    meta.appendChild(dom.el('span', null, group.nodes.length + (group.nodes.length === 1 ? ' node' : ' nodes')));
+    var link = dom.el('button', 'cov-deeplink');
+    link.type = 'button';
+    link.textContent = 'open →';
+    link.addEventListener('click', function () {
+      if (group.nodes[0]) nav({ view: 'tree', node: group.nodes[0] });
+    });
+    meta.appendChild(link);
+    row.appendChild(meta);
+
+    var ruleHdr = dom.el('button', 'cov-rulehdr');
+    ruleHdr.type = 'button';
+    ruleHdr.setAttribute('aria-label', 'open rule ' + group.rule);
+    ruleHdr.textContent = '› fix: ' + group.fix;
+    ruleHdr.addEventListener('click', function () {
+      nav({ view: 'rulebook', aspect: group.rule });
+    });
+    var wrap = dom.el('div', 'cov-worow-wrap');
+    wrap.appendChild(row);
+    wrap.appendChild(ruleHdr);
+    return wrap;
+  }
+
+  /** A keyboard-operable export trigger (a native <button>, focusable + Enter/Space-activatable). */
+  function exportBtn(label, aria, onClick) {
+    var b = dom.el('button', 'exp-btn', label);
+    b.type = 'button';
+    b.setAttribute('aria-label', aria);
+    b.addEventListener('click', onClick);
+    return b;
+  }
+
+  /** The portable-artifact export bar (CSV of the coverage summary + the no-rule residue, JSON bundle). */
+  function renderExport(stage, data) {
+    if (!Yg.exporter) return;
+    var bar = dom.el('div', 'exp-bar');
+    bar.appendChild(dom.el('span', 'exp-lbl', 'Export the audit (in-page, no network):'));
+    bar.appendChild(exportBtn('Coverage CSV', 'Download the coverage summary as CSV', function () {
+      Yg.exporter.exportCoverageCsv(data);
+    }));
+    bar.appendChild(exportBtn('Residue CSV', 'Download the no-rule nodes and unmapped files as CSV', function () {
+      Yg.exporter.exportResidueCsv(data);
+    }));
+    bar.appendChild(exportBtn('JSON bundle', 'Download the full audit bundle (coverage, residue, suppressions) as JSON', function () {
+      Yg.exporter.exportJson(data);
+    }));
+    stage.appendChild(bar);
+  }
+
+  Yg.views.coverage = function (stage, route, data, ctx) {
+    renderBar(stage, data, ctx);
+    renderExport(stage, data);
+    renderWorklist(stage, data, ctx);
+  };
+})();

package/dist/templates/portal/js/views/flows-view.js

@@ -0,0 +1,204 @@
+/*
+ * V7 Flows — the business-language lens.
+ *
+ * The only business-language artifact (§3.7, §3a V7): the bridge for a lead or director who
+ * never reads code. A gallery of flows by name + description; selecting one shows its detail —
+ * participants (declared PLUS auto-expanded descendants, each marked), the flow-level aspects,
+ * and each participant's honest verdict state.
+ *
+ * CRITICAL HONESTY — a flow state has THREE values, never two, and is NEVER green merely
+ * because nothing was checked:
+ *   - verified        — every participant carrying a rule is verified.
+ *   - attention       — any participant pair is refused or unverified (the weakest link).
+ *   - nothing-checked — no participant carries a rule at all; a flow can never vanity-green on
+ *                       the absence of any rule. Rendered in the distinct no-rule treatment.
+ * Every state treatment is read from the one shared honest-state model.
+ *
+ * Transitions (§3a V7): a flow card → select it (in-view, round-trips via the hash); a
+ * participant → its attestation panel (SHELL-panel); a flow aspect → V5 (the rulebook).
+ *
+ * Browser globals only — reads the already-resolved PortalData; no network, no Node.
+ */
+(function () {
+  'use strict';
+
+  var Yg = (window.YgPortal = window.YgPortal || {});
+  var dom = Yg.dom;
+  Yg.views = Yg.views || {};
+
+  // The flow state → the honest render state it maps to. 'attention' is signal (warning),
+  // 'nothing-checked' is the distinct no-rule treatment — NEVER verified unless truly all-green.
+  var FLOW_RENDER_STATE = {
+    verified: 'verified',
+    attention: 'warning',
+    'nothing-checked': 'no-rule',
+  };
+
+  // The plain label shown on a flow state pill (the engine's word, said for a human).
+  var FLOW_LABEL = {
+    verified: 'verified',
+    attention: 'weakest-link',
+    'nothing-checked': 'nothing-checked',
+  };
+
+  function flowRenderState(flow) {
+    return FLOW_RENDER_STATE[flow.state] || 'no-rule';
+  }
+
+  /** A flow state pill — its color/border comes from the shared honest-state model. */
+  function statePill(flow) {
+    var rs = flowRenderState(flow);
+    var pill = dom.el('span', 'fl-state ' + Yg.states.cssClass(rs));
+    pill.appendChild(dom.el('span', null, FLOW_LABEL[flow.state] || flow.state));
+    return pill;
+  }
+
+  function gallery(flows, selectedName, nav) {
+    var col = dom.el('div', 'fl-gallery');
+    for (var i = 0; i < flows.length; i += 1) {
+      col.appendChild(flowCard(flows[i], flows[i].name === selectedName, nav));
+    }
+    return col;
+  }
+
+  function flowCard(flow, selected, nav) {
+    var card = dom.el('button', 'fl-card' + (selected ? ' fl-card-sel' : ''));
+    card.type = 'button';
+    var top = dom.el('div', 'fl-card-top');
+    top.appendChild(dom.el('b', null, flow.name));
+    top.appendChild(statePill(flow));
+    card.appendChild(top);
+    if (flow.description) card.appendChild(dom.el('div', 'fl-card-d', flow.description));
+    card.addEventListener('click', function () {
+      nav({ view: 'flows', flow: flow.name });
+    });
+    return card;
+  }
+
+  /** Map a node's own state honestly — node.state is already no-rule for an unchecked
+   * node (no real verdict-bearing pair), never green, so we read it directly. */
+  function nodeState(data, path) {
+    var node = (data.nodes || []).filter(function (n) {
+      return n.path === path;
+    })[0];
+    if (!node) return 'no-rule';
+    return node.state;
+  }
+
+  /** Was a participant declared on the flow, or auto-included as a descendant? */
+  function isDeclared(flow, path, data) {
+    // A participant is "declared" if it equals a declared node; descendants are auto-included.
+    // The contract carries the expanded set only, so we infer: a participant whose parent is
+    // also a participant is a descendant; a participant with no participant-parent is declared.
+    var node = (data.nodes || []).filter(function (n) {
+      return n.path === path;
+    })[0];
+    if (!node || !node.parent) return true;
+    return flow.participants.indexOf(node.parent) === -1;
+  }
+
+  function participantRow(flow, path, data, nav) {
+    var declared = isDeclared(flow, path, data);
+    var state = nodeState(data, path);
+    var row = dom.el('button', 'fl-part');
+    if (!declared) row.classList.add('fl-part-desc');
+    row.type = 'button';
+    row.appendChild(Yg.states.badge(state));
+    row.appendChild(dom.el('span', 'mono fl-part-path', path));
+    row.appendChild(dom.el('span', 'fl-part-tag', declared ? 'declared' : 'descendant'));
+    row.addEventListener('click', function () {
+      nav({ view: 'tree', node: path });
+    });
+    return row;
+  }
+
+  function detail(flow, data, nav) {
+    var box = dom.el('div', 'fl-detail');
+
+    var head = dom.el('div', 'fl-detail-head');
+    head.appendChild(dom.el('h2', null, flow.name));
+    head.appendChild(statePill(flow));
+    box.appendChild(head);
+    if (flow.description) box.appendChild(dom.el('p', 'fl-detail-d', flow.description));
+
+    var declaredCount = 0;
+    var descCount = 0;
+    for (var i = 0; i < flow.participants.length; i += 1) {
+      if (isDeclared(flow, flow.participants[i], data)) declaredCount += 1;
+      else descCount += 1;
+    }
+    box.appendChild(
+      dom.el(
+        'h5',
+        'fl-h5',
+        'Participants — ' + flow.participants.length + ' (' + declaredCount + ' declared · ' + descCount + ' auto-included descendants)',
+      ),
+    );
+    var parts = dom.el('div', 'fl-parts');
+    for (var j = 0; j < flow.participants.length; j += 1) {
+      parts.appendChild(participantRow(flow, flow.participants[j], data, nav));
+    }
+    box.appendChild(parts);
+
+    box.appendChild(dom.el('h5', 'fl-h5', 'Flow aspects (channel 5)'));
+    if (flow.aspects && flow.aspects.length) {
+      var asp = dom.el('div', 'fl-asps');
+      for (var k = 0; k < flow.aspects.length; k += 1) {
+        var chip = dom.el('button', 'fl-asp mono');
+        chip.type = 'button';
+        chip.textContent = flow.aspects[k];
+        chip.addEventListener(
+          'click',
+          (function (id) {
+            return function () {
+              nav({ view: 'rulebook', aspect: id });
+            };
+          })(flow.aspects[k]),
+        );
+        asp.appendChild(chip);
+      }
+      box.appendChild(asp);
+    } else {
+      box.appendChild(dom.el('p', 'fl-rel-none', 'No flow-level aspects — flow membership alone attaches no rule.'));
+    }
+
+    box.appendChild(
+      dom.el(
+        'p',
+        'fl-foot',
+        'A flow with no aspects, or one whose participants are all unguarded, shows nothing-checked — never green. Flow membership attaches rules; it is not evidence of correctness.',
+      ),
+    );
+    return box;
+  }
+
+  Yg.views.flows = function (stage, route, data, ctx) {
+    var nav = ctx && ctx.navigate ? ctx.navigate : function () {};
+    var flows = (data.flows || []).slice();
+    var selectedName = route && route.flow ? route.flow : flows.length ? flows[0].name : null;
+
+    stage.appendChild(dom.el('p', 'view-lead', 'Business processes that span components — the only business-language lens. A flow is never just green or red: a flow whose participants are all unguarded shows nothing-checked, and any refused or unverified participant makes the whole flow need attention. Absence of red is not a pass.'));
+    stage.appendChild(dom.el('div', 'rb-sub', flows.length + ' flows · flow state is never just green/red'));
+
+    if (!flows.length) {
+      stage.appendChild(dom.el('p', 'rb-empty', 'No flows are defined yet — no business processes to lens.'));
+      return;
+    }
+
+    var layout = dom.el('div', 'fl-layout');
+    layout.appendChild(gallery(flows, selectedName, nav));
+    var selected = flows.filter(function (f) {
+      return f.name === selectedName;
+    })[0];
+    if (route && route.flow && !selected) {
+      // A deep-link to a flow that no longer exists — say so honestly instead of silently
+      // presenting a DIFFERENT flow as if the link had resolved.
+      var nf = dom.el('div', 'fl-detail');
+      nf.appendChild(dom.el('p', 'rb-empty', 'No flow named "' + route.flow + '" — it may have been removed.'));
+      layout.appendChild(nf);
+    } else {
+      layout.appendChild(detail(selected || flows[0], data, nav));
+    }
+    stage.appendChild(layout);
+  };
+})();