rcf-lite 0.28.2 → 0.28.4

package/src/view/html-page.js

@@ -27,6 +27,7 @@ import {
 } from './doc-renderers/index.js';
 import { detailsWrap, escapeHtml } from './doc-renderers/helpers.js';
 import { allRequirementSubdiagrams } from './mermaid-diagram.js';
+import { renderProductMapPanel } from './product-map.js';
 
 // Inline SVG favicon: the Stravica kit mark (deep-navy tile with the
 // ribbon symbol in Stravica blue), taken from the estate brand kit at
@@ -74,6 +75,7 @@ export function renderPage(model) {
     <p class="subtitle">RCF review surface</p>
     <nav class="tabs" role="tablist" aria-label="Document sections">
       <button type="button" role="tab" data-tab="overview" aria-selected="true" aria-controls="tab-overview">Overview</button>
+      <button type="button" role="tab" data-tab="product-map" aria-selected="false" aria-controls="tab-product-map">Product Map</button>
       <button type="button" role="tab" data-tab="requirements" aria-selected="false" aria-controls="tab-requirements">Requirements</button>
       <button type="button" role="tab" data-tab="architecture" aria-selected="false" aria-controls="tab-architecture">Architecture</button>
       <button type="button" role="tab" data-tab="build" aria-selected="false" aria-controls="tab-build">Build sequence</button>
@@ -119,6 +121,7 @@ export function renderContent(model) {
   const requirementsPanel = renderRequirementsPanel(model, subdiagrams);
   const architecturePanel = renderArchitecturePanel(model);
   const buildPanel = renderBuildPanel(model);
+  const productMapPanel = renderProductMapPanel(model);
 
   const errorBanner = renderErrorBanner(model.errors ?? []);
 
@@ -129,6 +132,10 @@ export function renderContent(model) {
         ${prdSection}
       </div>
     </section>
+    <section id="tab-product-map" role="tabpanel" hidden>
+      <h2 class="tab-heading">Product Map</h2>
+      ${productMapPanel}
+    </section>
     <section id="tab-requirements" role="tabpanel" hidden>
       <h2 class="tab-heading">Requirements</h2>
       ${requirementsPanel}
@@ -320,14 +327,19 @@ function renderErrorBanner(errors) {
 function inlineScript() {
   return `
 (function () {
-  var TABS = ['overview', 'requirements', 'architecture', 'build'];
+  var TABS = ['overview', 'requirements', 'architecture', 'build', 'product-map'];
+  var PM_GROUPS = ['shape', 'component', 'trace', 'capability', 'blueprint'];
+  var PM_STATUSES = ['all', 'draft', 'review', 'needsRevision', 'approved', 'superseded'];
+  // Partial-render cache: grouping -> HTML string. First fetch fills it,
+  // subsequent switches use the cache.
+  var pmPartialCache = {};
+  // Track whether an SSE swap has invalidated the cache since the last
+  // successful hydration - the live-client sets window.__rcfPmDirty
+  // after each swap, and we clear the cache on the next activation.
+  function pmCacheKey(group) { return group; }
 
   function initMermaid() {
     if (typeof window.mermaid !== 'undefined') {
-      // startOnLoad: false. Mermaid can't lay out diagrams inside a
-      // display:none tabpanel (getBoundingClientRect is 0x0 -> NaN
-      // transforms). We run each tab's diagrams on activation instead;
-      // runMermaidIn is idempotent via the data-processed attribute.
       window.mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });
     }
   }
@@ -338,13 +350,11 @@ function inlineScript() {
     if (pending.length === 0) return;
     try {
       window.mermaid.run({ nodes: Array.prototype.slice.call(pending) });
-    } catch (e) {
-      // Mermaid.run may throw on init errors; do not block the UI.
-    }
+    } catch (e) { /* swallow */ }
   }
 
   function tabButtons() {
-    return Array.prototype.slice.call(document.querySelectorAll('[role="tab"]'));
+    return Array.prototype.slice.call(document.querySelectorAll('nav.tabs [role="tab"]'));
   }
 
   function panelFor(name) {
@@ -399,32 +409,326 @@ function inlineScript() {
     return document.querySelector('[data-doc-id="' + id.replace(/"/g, '\\\\"') + '"]');
   }
 
-  function resolveHash(hash) {
-    if (!hash) {
-      activateTab('overview');
+  function parseHashParams(raw) {
+    var out = {};
+    if (!raw) return out;
+    var parts = raw.split('&');
+    for (var i = 0; i < parts.length; i += 1) {
+      var eq = parts[i].indexOf('=');
+      if (eq === -1) continue;
+      var k = parts[i].slice(0, eq);
+      var v = parts[i].slice(eq + 1);
+      if (k) out[k] = v;
+    }
+    return out;
+  }
+
+  function pmGroupPanel(name) {
+    return document.getElementById('pm-group-' + name);
+  }
+
+  function hydrateLazyGroup(name, cb) {
+    var panel = pmGroupPanel(name);
+    if (!panel) { if (cb) cb(false); return; }
+    if (panel.getAttribute('data-pm-lazy') !== 'true' && !pmPartialCache[pmCacheKey(name)]) {
+      if (cb) cb(true);
+      return;
+    }
+    if (window.__rcfPmDirty) {
+      pmPartialCache = {};
+      window.__rcfPmDirty = false;
+    }
+    var cached = pmPartialCache[pmCacheKey(name)];
+    var heading = panel.querySelector('.pm-group-heading');
+    var headingHtml = heading ? heading.outerHTML : '';
+    if (cached) {
+      panel.innerHTML = headingHtml + cached;
+      panel.removeAttribute('data-pm-lazy');
+      wireProductMapWithin(panel);
+      if (cb) cb(true);
       return;
     }
+    // Show a lightweight loading state.
+    panel.setAttribute('data-pm-loading', 'true');
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', '/product-map/' + name, true);
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState !== 4) return;
+      panel.removeAttribute('data-pm-loading');
+      if (xhr.status >= 200 && xhr.status < 300) {
+        pmPartialCache[pmCacheKey(name)] = xhr.responseText;
+        panel.innerHTML = headingHtml + xhr.responseText;
+        panel.removeAttribute('data-pm-lazy');
+        wireProductMapWithin(panel);
+        if (cb) cb(true);
+      } else {
+        panel.setAttribute('data-pm-lazy', 'true');
+        if (cb) cb(false);
+      }
+    };
+    xhr.send();
+  }
+
+  function activatePmGroup(name, opts) {
+    if (PM_GROUPS.indexOf(name) === -1) return false;
+    var buttons = document.querySelectorAll('.pm-group-btn');
+    for (var i = 0; i < buttons.length; i += 1) {
+      var btn = buttons[i];
+      var isTarget = btn.getAttribute('data-pm-group') === name;
+      btn.setAttribute('aria-selected', isTarget ? 'true' : 'false');
+    }
+    var panels = document.querySelectorAll('.pm-group');
+    for (var j = 0; j < panels.length; j += 1) {
+      var p = panels[j];
+      if (p.getAttribute('data-pm-group') === name) {
+        p.removeAttribute('hidden');
+      } else {
+        p.setAttribute('hidden', '');
+      }
+    }
+    var target = pmGroupPanel(name);
+    if (target && target.getAttribute('data-pm-lazy') === 'true') {
+      hydrateLazyGroup(name, function () {
+        if (opts && opts.after) opts.after();
+        applyPmStatusFilter(currentStatus());
+      });
+    } else {
+      if (opts && opts.after) opts.after();
+      applyPmStatusFilter(currentStatus());
+    }
+    return true;
+  }
+
+  function currentGroup() {
+    var sel = document.querySelector('.pm-group-btn[aria-selected="true"]');
+    return sel ? sel.getAttribute('data-pm-group') : 'shape';
+  }
+
+  function currentStatus() {
+    var s = document.querySelector('.pm-status-select');
+    return s ? s.value : 'all';
+  }
+
+  function currentOpenBuckets() {
+    var group = currentGroup();
+    var panel = pmGroupPanel(group);
+    if (!panel) return [];
+    var nodes = panel.querySelectorAll('details.pm-bucket[open]');
+    var out = [];
+    for (var i = 0; i < nodes.length; i += 1) {
+      var id = nodes[i].getAttribute('data-pm-bucket-id');
+      if (id) out.push(id);
+    }
+    return out;
+  }
+
+  function applyPmStatusFilter(status) {
+    if (PM_STATUSES.indexOf(status) === -1) return false;
+    var select = document.querySelector('.pm-status-select');
+    if (select) select.value = status;
+    var reqCards = document.querySelectorAll('#tab-product-map [data-req-status]');
+    for (var i = 0; i < reqCards.length; i += 1) {
+      var card = reqCards[i];
+      var s = card.getAttribute('data-req-status') || '';
+      if (status === 'all' || s === status) {
+        card.removeAttribute('hidden');
+      } else {
+        card.setAttribute('hidden', '');
+      }
+    }
+    // Per AC-17002-1: empty buckets under the filter are HIDDEN by
+    // default with a "N empty" summary line to reveal them. Also keep
+    // the legacy in-bucket note for tests / no-JS accessibility.
+    var buckets = document.querySelectorAll('#tab-product-map .pm-group:not([hidden]) details.pm-bucket');
+    var emptyCount = 0;
+    for (var k = 0; k < buckets.length; k += 1) {
+      var bk = buckets[k];
+      var visible = bk.querySelectorAll('[data-req-status]:not([hidden])');
+      var bodyEmpty = bk.querySelector('.pm-bucket-body') && bk.querySelector('.pm-bucket-body').children.length === 0;
+      var isEmpty = visible.length === 0 && !bodyEmpty; // lazy-empty buckets don't count
+      var body = bk.querySelector('.pm-bucket-body');
+      var emptyNote = body ? body.querySelector('.pm-bucket-empty-filter') : null;
+      if (isEmpty && status !== 'all') {
+        if (body && !emptyNote) {
+          emptyNote = document.createElement('p');
+          emptyNote.className = 'pm-bucket-empty pm-bucket-empty-filter';
+          emptyNote.innerHTML = '<em>0 requirements match this filter.</em>';
+          body.appendChild(emptyNote);
+        }
+        bk.setAttribute('data-pm-empty-under-filter', 'true');
+        emptyCount += 1;
+      } else {
+        if (emptyNote) emptyNote.parentNode.removeChild(emptyNote);
+        bk.removeAttribute('data-pm-empty-under-filter');
+      }
+    }
+    // Update the rollup summary.
+    var activePanel = document.querySelector('#tab-product-map .pm-group:not([hidden])');
+    if (activePanel) {
+      var roll = activePanel.querySelector('.pm-empty-roll');
+      if (roll) {
+        var showBtn = roll.querySelector('.pm-empty-count');
+        if (emptyCount > 0 && status !== 'all') {
+          if (showBtn) showBtn.textContent = String(emptyCount);
+          roll.removeAttribute('hidden');
+          activePanel.classList.add('pm-hide-empty');
+        } else {
+          roll.setAttribute('hidden', '');
+          activePanel.classList.remove('pm-hide-empty');
+        }
+      }
+    }
+    return true;
+  }
+
+  function updatePmHash() {
+    if (!window.history || typeof window.history.pushState !== 'function') return;
+    var group = currentGroup();
+    var status = currentStatus();
+    var open = currentOpenBuckets();
+    var next = '#tab=product-map&group=' + group + '&status=' + status;
+    if (open.length > 0) next += '&open=' + encodeURIComponent(open.join(','));
+    if (window.location.hash === next) return;
+    window.history.pushState(null, '', next);
+  }
+
+  function openPmBuckets(ids) {
+    if (!ids || ids.length === 0) return;
+    var group = currentGroup();
+    var panel = pmGroupPanel(group);
+    if (!panel) return;
+    for (var i = 0; i < ids.length; i += 1) {
+      var raw = ids[i];
+      if (!raw) continue;
+      var node = panel.querySelector('details.pm-bucket[data-pm-bucket-id="' + raw.replace(/"/g, '\\"') + '"]');
+      if (node) node.open = true;
+    }
+  }
+
+  function wireProductMapWithin(root) {
+    root = root || document;
+    // Bucket toggle -> push hash on user toggle. The 'toggle' event
+    // fires for both open and close, from user action and from our own
+    // scripting; guard against feedback via a dirty flag.
+    var buckets = root.querySelectorAll('details.pm-bucket');
+    for (var i = 0; i < buckets.length; i += 1) {
+      var bk = buckets[i];
+      if (bk.__rcfPmBucketWired) continue;
+      bk.__rcfPmBucketWired = true;
+      bk.addEventListener('toggle', function () {
+        if (window.__rcfPmSuppress) return;
+        updatePmHash();
+      });
+    }
+    // Jump chip -> open bucket + scroll.
+    var chips = root.querySelectorAll('.pm-jump-chip');
+    for (var j = 0; j < chips.length; j += 1) {
+      var chip = chips[j];
+      if (chip.__rcfPmChipWired) continue;
+      chip.__rcfPmChipWired = true;
+      chip.addEventListener('click', function (ev) {
+        var target = ev.currentTarget.getAttribute('data-pm-jump');
+        var groupAttr = ev.currentTarget.closest('.pm-jump-nav').getAttribute('data-pm-jump-group');
+        var panel = pmGroupPanel(groupAttr);
+        if (!panel) return;
+        var node = panel.querySelector('details.pm-bucket[data-pm-bucket-id="' + target.replace(/"/g, '\\"') + '"]');
+        if (!node) return;
+        node.open = true;
+        try { node.scrollIntoView({ block: 'start' }); } catch (e) { node.scrollIntoView(); }
+      });
+    }
+    // Bulk expand/collapse.
+    var bulk = root.querySelectorAll('.pm-bulk-btn');
+    for (var b = 0; b < bulk.length; b += 1) {
+      var btn = bulk[b];
+      if (btn.__rcfPmBulkWired) continue;
+      btn.__rcfPmBulkWired = true;
+      btn.addEventListener('click', function (ev) {
+        var action = ev.currentTarget.getAttribute('data-pm-bulk');
+        var panel = document.querySelector('#tab-product-map .pm-group:not([hidden])');
+        if (!panel) return;
+        var all = panel.querySelectorAll('details.pm-bucket');
+        window.__rcfPmSuppress = true;
+        for (var i = 0; i < all.length; i += 1) all[i].open = (action === 'expand');
+        window.__rcfPmSuppress = false;
+        updatePmHash();
+      });
+    }
+    // Empty-roll toggle: reveals hidden empty buckets under the filter.
+    var rolls = root.querySelectorAll('.pm-empty-toggle');
+    for (var r = 0; r < rolls.length; r += 1) {
+      var rt = rolls[r];
+      if (rt.__rcfPmEmptyWired) continue;
+      rt.__rcfPmEmptyWired = true;
+      rt.addEventListener('click', function (ev) {
+        var panel = ev.currentTarget.closest('.pm-group');
+        if (!panel) return;
+        if (panel.classList.contains('pm-hide-empty')) {
+          panel.classList.remove('pm-hide-empty');
+          ev.currentTarget.textContent = 'Hide empty buckets';
+        } else {
+          panel.classList.add('pm-hide-empty');
+          var span = document.createElement('span');
+          span.className = 'pm-empty-count';
+          span.textContent = String(panel.querySelectorAll('details.pm-bucket[data-pm-empty-under-filter="true"]').length);
+          ev.currentTarget.textContent = '';
+          ev.currentTarget.appendChild(document.createTextNode('Show '));
+          ev.currentTarget.appendChild(span);
+          ev.currentTarget.appendChild(document.createTextNode(' empty buckets'));
+        }
+      });
+    }
+  }
+
+  function wireProductMap() {
+    var buttons = document.querySelectorAll('.pm-group-btn');
+    for (var i = 0; i < buttons.length; i += 1) {
+      if (buttons[i].__rcfPmWired) continue;
+      buttons[i].__rcfPmWired = true;
+      buttons[i].addEventListener('click', function (ev) {
+        var name = ev.currentTarget.getAttribute('data-pm-group');
+        if (activatePmGroup(name)) updatePmHash();
+      });
+    }
+    var select = document.querySelector('.pm-status-select');
+    if (select && !select.__rcfPmWired) {
+      select.__rcfPmWired = true;
+      select.addEventListener('change', function () {
+        applyPmStatusFilter(select.value);
+        updatePmHash();
+      });
+    }
+    wireProductMapWithin(document);
+  }
+
+  function resolveHash(hash) {
+    if (!hash) { activateTab('overview'); return; }
     var raw = hash.charAt(0) === '#' ? hash.slice(1) : hash;
     if (raw.indexOf('tab=') === 0) {
-      activateTab(raw.slice(4));
+      var afterTab = raw.slice(4);
+      var amp = afterTab.indexOf('&');
+      var tab = amp === -1 ? afterTab : afterTab.slice(0, amp);
+      var rest = amp === -1 ? '' : afterTab.slice(amp + 1);
+      activateTab(tab);
+      if (tab === 'product-map') {
+        var params = parseHashParams(rest);
+        var openIds = params.open ? decodeURIComponent(params.open).split(',').filter(Boolean) : [];
+        activatePmGroup(params.group || 'shape', {
+          after: function () {
+            if (params.status) applyPmStatusFilter(params.status);
+            openPmBuckets(openIds);
+          },
+        });
+      }
       return;
     }
     var target = findByDocId(raw);
-    if (!target) {
-      activateTab('overview');
-      return;
-    }
+    if (!target) { activateTab('overview'); return; }
     var tab = tabForNode(target);
     if (tab) activateTab(tab);
     openAncestorDetails(target);
-    if (target.tagName && target.tagName.toLowerCase() === 'details') {
-      target.open = true;
-    }
-    try {
-      target.scrollIntoView({ block: 'start' });
-    } catch (e) {
-      target.scrollIntoView();
-    }
+    if (target.tagName && target.tagName.toLowerCase() === 'details') target.open = true;
+    try { target.scrollIntoView({ block: 'start' }); } catch (e) { target.scrollIntoView(); }
   }
 
   function onTabClick(ev) {
@@ -432,6 +736,11 @@ function inlineScript() {
     var name = btn.getAttribute('data-tab');
     if (!name) return;
     activateTab(name);
+    if (name === 'product-map') {
+      // Hydrate whichever grouping was selected last (default: shape).
+      // No-op when the grouping is already inline.
+      activatePmGroup(currentGroup());
+    }
     if (window.history && typeof window.history.replaceState === 'function') {
       window.history.replaceState(null, '', '#tab=' + name);
     }
@@ -439,19 +748,29 @@ function inlineScript() {
 
   function wireTabs() {
     tabButtons().forEach(function (btn) {
+      if (btn.__rcfTabWired) return;
+      btn.__rcfTabWired = true;
       btn.addEventListener('click', onTabClick);
     });
   }
 
+  var hashchangeWired = false;
   function onReady() {
     initMermaid();
     wireTabs();
+    wireProductMap();
     resolveHash(window.location.hash);
-    window.addEventListener('hashchange', function () {
-      resolveHash(window.location.hash);
-    });
+    if (!hashchangeWired) {
+      hashchangeWired = true;
+      window.addEventListener('hashchange', function () {
+        resolveHash(window.location.hash);
+      });
+    }
   }
 
+  window.rcfPage = window.rcfPage || {};
+  window.rcfPage.init = onReady;
+
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', onReady);
   } else {

package/src/view/index.js

@@ -10,6 +10,7 @@ import { stat } from 'node:fs/promises';
 
 import { walkTree } from '#core/store';
 import { renderContent, renderPage } from './html-page.js';
+import { renderProductMapGrouping } from './product-map.js';
 import { buildTreeModel } from './tree-model.js';
 
 const here = dirname(fileURLToPath(import.meta.url));
@@ -59,5 +60,17 @@ export async function renderModelToPage({ projectRoot }) {
   const model = buildTreeModel({ tree, errors });
   const fullPageHtml = renderPage(model);
   const contentHtml = renderContent(model);
-  return { fullPageHtml, contentHtml, errors, tree };
+  // Pre-rendered partials for the /product-map/<group> endpoint
+  // (AC-17007-1). The full page ships only the shape grouping's REQ
+  // cards; the client fetches the other three on demand from these
+  // strings. Regenerated on every rewalk so the cache stays consistent
+  // with the tree on disk.
+  const pmPartials = {
+    shape: renderProductMapGrouping(model, 'shape'),
+    component: renderProductMapGrouping(model, 'component'),
+    trace: renderProductMapGrouping(model, 'trace'),
+    capability: renderProductMapGrouping(model, 'capability'),
+    blueprint: renderProductMapGrouping(model, 'blueprint'),
+  };
+  return { fullPageHtml, contentHtml, errors, tree, pmPartials };
 }

package/src/view/live-client.js

@@ -434,6 +434,12 @@
         host.innerHTML = payload.contentHtml;
       }
       currentVersion = payload.version;
+      // The Product Map panel keeps a client-side partial cache
+      // (window.__rcfPmPartialCache is opaque to us). A tree-update
+      // invalidates every partial: the next activatePmGroup on a lazy
+      // grouping refetches instead of using the stale cache. See
+      // hydrateLazyGroup in the inline script.
+      win.__rcfPmDirty = true;
       // Tab buttons live in the header (outside the swap wrapper) so
       // their click handlers survive. But the swap serves every panel
       // with the same `hidden` state Phase 3.6 renders (Overview
@@ -442,6 +448,13 @@
       // Mermaid inside the selected panel because .mermaid nodes in
       // the payload have no `data-processed` yet.
       resyncTabsAfterSwap(doc, win);
+      // Re-invoke the page init so pm-group-btn / pm-status-select
+      // listeners (which lived inside the swapped wrapper) are attached
+      // to the fresh DOM. onReady is idempotent for the header-scoped
+      // bindings that survive the swap.
+      if (win.rcfPage && typeof win.rcfPage.init === 'function') {
+        try { win.rcfPage.init(); } catch (e) { /* soft */ }
+      }
       restoreState(deps);
       applyScope();
       setState('connected');
@@ -484,8 +497,15 @@
   // the panels back in line with the aria-selected button and re-run
   // Mermaid in the visible one.
   function resyncTabsAfterSwap(doc, win) {
-    var TABS = ['overview', 'requirements', 'architecture', 'build'];
-    var selectedBtn = doc.querySelector('[role="tab"][aria-selected="true"]');
+    // Phase 3.8 tabs; Phase 3.9 added product-map. Product Map MUST be
+    // in this list so an SSE swap while it is the active tab keeps the
+    // panel visible; without it, resolveActiveTab falls back to
+    // overview and the freshly-swapped pm listeners have already been
+    // rewired by the rcfPage.init() call below.
+    var TABS = ['overview', 'requirements', 'architecture', 'build', 'product-map'];
+    // Scope to the top-level nav.tabs to avoid matching pm-group-btn
+    // nodes (they also carry role="tab").
+    var selectedBtn = doc.querySelector('nav.tabs [role="tab"][aria-selected="true"]');
     var selected = selectedBtn && selectedBtn.getAttribute ? selectedBtn.getAttribute('data-tab') : null;
     if (!selected || TABS.indexOf(selected) === -1) selected = 'overview';
     for (var i = 0; i < TABS.length; i += 1) {