wowbagger 0.5.0-beta.0 → 0.5.0

package/src/report-evidence.js

@@ -71,59 +71,120 @@ function shiftDays(date, days) {
     .slice(0, 10);
 }
 
-// Arrivals against completions, week by week. An arrival is `created`; a
-// completion is the item reaching any terminal status, because every one of the
-// four terminal statuses removes work from the backlog.
-export function buildWeeklyFlow(allItems, asOf) {
-  const lastWeek = weekStart(asOf);
-  const counts = new Map();
+// Arrivals against closures, week by week. An arrival is `created`; a closure
+// is the item reaching any terminal status, because every one of the four
+// terminal statuses removes work from the backlog. `done` counts the closures
+// that delivered: only a `done` departure is finished work, so only `done`
+// may be read as completed work.
+function isValidDateString(value) {
+  if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return false;
+  }
+  const parsed = Date.parse(`${value}T00:00:00Z`);
+  return !Number.isNaN(parsed)
+    && new Date(parsed).toISOString().slice(0, 10) === value;
+}
+
+// The weeks an evidence window covers. The default is the trailing twelve
+// calendar weeks ending in the week of `asOf`. An explicit range uses the
+// inclusive UTC calendar dates `from` through `to` (`to <= asOf`); a week
+// bucket the range cuts short is marked partial, and the rolling mean only
+// covers complete weeks. A range never filters items out: anything created
+// before `from` still contributes to cumulative inventory.
+function resolveWindow(asOf, range) {
+  if (range === null || range === undefined) {
+    const lastWeek = weekStart(asOf);
+    const weekStarts = [];
+    for (let index = WINDOW_WEEKS - 1; index >= 0; index -= 1) {
+      weekStarts.push(shiftDays(lastWeek, -index * 7));
+    }
+    return {
+      weekStarts,
+      start: weekStarts[0],
+      end: asOf,
+      partial: new Set(),
+      windowWeeks: WINDOW_WEEKS,
+      range: null,
+    };
+  }
+  const from = range?.from ?? null;
+  const to = range?.to ?? null;
+  if (!isValidDateString(from) || !isValidDateString(to) || from > to || to > asOf) {
+    throw new Error(`invalid report range ${JSON.stringify(range)}`);
+  }
   const weekStarts = [];
-  for (let index = WINDOW_WEEKS - 1; index >= 0; index -= 1) {
-    const start = shiftDays(lastWeek, -index * 7);
+  for (let start = weekStart(from); start <= weekStart(to); start = shiftDays(start, 7)) {
     weekStarts.push(start);
-    counts.set(start, { weekStart: start, arrivals: 0, completions: 0 });
+  }
+  const partial = new Set(
+    weekStarts.filter((start) => start < from || shiftDays(start, 6) > to),
+  );
+  const windowDays = (daysBetween(from, to) ?? 0) + 1;
+  const windowWeeks = windowDays / 7;
+  return {
+    weekStarts, start: from, end: to, partial, windowWeeks, range: { from, to },
+  };
+}
+
+export function buildWeeklyFlow(allItems, asOf, range = null) {
+  const window = resolveWindow(asOf, range);
+  const counts = new Map();
+  for (const start of window.weekStarts) {
+    counts.set(start, {
+      weekStart: start, arrivals: 0, closures: 0, done: 0, partial: window.partial.has(start),
+    });
   }
 
   for (const item of allItems) {
     const arrivalWeek = counts.get(weekStart(item.created));
-    if (arrivalWeek !== undefined) {
+    if (arrivalWeek !== undefined && item.created >= window.start && item.created <= window.end) {
       arrivalWeek.arrivals += 1;
     }
-    const departureWeek = item.terminalDate === null
-      ? undefined
-      : counts.get(weekStart(item.terminalDate));
-    if (departureWeek !== undefined) {
-      departureWeek.completions += 1;
+    if (item.terminalDate === null) {
+      continue;
+    }
+    const departureWeek = counts.get(weekStart(item.terminalDate));
+    if (departureWeek !== undefined
+      && item.terminalDate >= window.start && item.terminalDate <= window.end) {
+      departureWeek.closures += 1;
+      if (item.status === 'done') {
+        departureWeek.done += 1;
+      }
     }
   }
-  const series = weekStarts.map((start) => counts.get(start));
-  return attachRollingMean(series);
+  return attachRollingMean(counts, window);
 }
 
-// A four-week trailing mean over completions. Weekly throughput is noisy
+// A four-week trailing mean over closures. Weekly throughput is noisy
 // enough that the bar heights alone mislead; the mean is the trend line.
-// The first three weeks stay null because a four-week mean needs four weeks,
-// and averaging over fewer would flatter the start of the window.
+// A trailing window shorter than four complete weeks stays null: averaging
+// over fewer weeks, or over a week the selected range cut short, would
+// flatter or understate the start of the window.
 const ROLLING_WEEKS = 4;
 
-function attachRollingMean(series) {
-  return series.map((week, index) => {
-    if (index < ROLLING_WEEKS - 1) {
+function attachRollingMean(counts, window) {
+  return window.weekStarts.map((start, index) => {
+    const week = counts.get(start);
+    const trailing = window.weekStarts.slice(Math.max(0, index - ROLLING_WEEKS + 1), index + 1);
+    if (trailing.length < ROLLING_WEEKS || trailing.some((member) => window.partial.has(member))) {
       return { ...week, rolling: null };
     }
-    const window = series.slice(index - ROLLING_WEEKS + 1, index + 1);
-    const total = window.reduce((sum, member) => sum + member.completions, 0);
+    const total = trailing.reduce((sum, member) => sum + counts.get(member).closures, 0);
     return { ...week, rolling: Math.round((total / ROLLING_WEEKS) * 100) / 100 };
   });
 }
-
 // Cumulative flow over the same window the weekly series covers. Each item
 // carries three timestamps - `created`, the accept decision, and its terminal
 // date - so every day in the window can be replayed from the current bytes.
 // Only three bands are honest here: `backlog -> in-progress` records no
-// decision, so the ledger cannot say when work actually started.
-export function buildCumulativeFlow(allItems, asOf) {
-  const start = shiftDays(weekStart(asOf), -(WINDOW_WEEKS - 1) * 7);
+// decision, so the ledger cannot say when work actually started. An explicit
+// range moves the window edges but never drops early items: anything created
+// before the range still stands in inventory on every day it spans.
+// A band named Untriaged holds items with no recorded accept decision, which
+// is reconstruction uncertainty - not proof the item sat untriaged. Deleted
+// items and unrecorded transitions cannot be recovered from the snapshot.
+export function buildCumulativeFlow(allItems, asOf, range = null) {
+  const window = resolveWindow(asOf, range);
   const states = allItems.map((item) => ({
     created: item.created,
     accepted: item.decisions.find((decision) => decision.action === 'accept')?.date ?? null,
@@ -131,7 +192,7 @@ export function buildCumulativeFlow(allItems, asOf) {
   }));
 
   const points = [];
-  for (let date = start; date <= asOf; date = shiftDays(date, 1)) {
+  for (let date = window.start; date <= window.end; date = shiftDays(date, 1)) {
     const point = {
       date, triage: 0, accepted: 0, terminal: 0,
     };
@@ -205,11 +266,13 @@ const FORECAST_WEEK_CEILING = 520;
 // the same --as-of, so the sampler may not read the clock or Math.random.
 const FORECAST_SEED = 0x9e3779b9;
 
-// Monte Carlo over observed weekly throughput, per Vacanti: resample the weeks
-// the ledger actually recorded rather than extrapolating an average, and report
-// a band instead of one false-precision date.
+// Monte Carlo over the observed weekly closure rate, per Vacanti: resample the
+// weeks the ledger actually recorded rather than extrapolating an average,
+// and report a band instead of one false-precision date. This is a
+// closure-based estimate of when open work clears, not a feature-delivery
+// commitment: closures include kills, deferrals, and archives alongside done.
 export function buildForecast(weeks, remaining, asOf) {
-  const samples = weeks.map((week) => week.completions);
+  const samples = weeks.map((week) => week.closures);
   if (samples.reduce((total, value) => total + value, 0) === 0) {
     return null;
   }
@@ -283,21 +346,75 @@ function seededRandom(seed) {
   };
 }
 
-export function buildEvidence(openItems, terminalItems, asOf) {
-  const weeks = buildWeeklyFlow([...openItems, ...terminalItems], asOf);
-  const completionTotal = weeks.reduce((total, week) => total + week.completions, 0);
+export function buildEvidence(openItems, terminalItems, asOf, range = null) {
+  const window = resolveWindow(asOf, range);
+  const retained = [...openItems, ...terminalItems];
+  const weeks = buildWeeklyFlow(retained, asOf, range);
+  const closureTotal = weeks.reduce((total, week) => total + week.closures, 0);
+  const doneTotal = weeks.reduce((total, week) => total + week.done, 0);
 
   return {
+    range: window.range,
     agingBuckets: buildAgingBuckets(openItems, asOf),
     agingMatrix: buildAgingMatrix(openItems, asOf),
     weeks,
     throughput: {
-      total: completionTotal,
-      windowWeeks: WINDOW_WEEKS,
-      perWeek: Math.round((completionTotal / WINDOW_WEEKS) * 100) / 100,
+      total: closureTotal,
+      done: doneTotal,
+      windowWeeks: window.windowWeeks,
+      perWeek: window.windowWeeks === 0
+        ? 0
+        : Math.round((closureTotal / window.windowWeeks) * 100) / 100,
+    },
+    cumulativeFlow: buildCumulativeFlow(retained, asOf, range),
+    coverageGaps: {
+      // Retained items past triage with no recorded accept decision. Their
+      // band history reads as untriaged until departure, which is
+      // reconstruction uncertainty, not proof they sat untriaged. An item
+      // killed straight from triage records a kill instead of an accept;
+      // its history is complete, so it is not a gap.
+      missingAcceptance: retained.filter((item) => item.status !== 'triage'
+        && !item.decisions.some((decision) => decision.action === 'accept')
+        && !(item.status === 'killed'
+          && item.decisions.some((decision) => decision.action === 'kill'))).length,
     },
-    cumulativeFlow: buildCumulativeFlow([...openItems, ...terminalItems], asOf),
     cycleTime: buildCycleTime(terminalItems),
     forecast: buildForecast(weeks, openItems.length, asOf),
   };
 }
+
+// The calculators the browser re-runs, serialized from the same functions
+// Node executes above. Tested for runtime parity against the direct functions
+// in a VM: the browser never carries a second formula.
+function browserFunctionSource(fn) {
+  return fn.toString().replace(/^export\s+/, '');
+}
+
+export function reportEvidenceBrowserSource() {
+  return [
+    `const AGE_BUCKETS = ${JSON.stringify(AGE_BUCKETS)};`,
+    `const OPEN_STATUSES = ${JSON.stringify(OPEN_STATUSES)};`,
+    `const WINDOW_WEEKS = ${WINDOW_WEEKS};`,
+    `const MILLISECONDS_PER_DAY = ${MILLISECONDS_PER_DAY};`,
+    `const ROLLING_WEEKS = ${ROLLING_WEEKS};`,
+    `const FORECAST_TRIALS = ${FORECAST_TRIALS};`,
+    `const FORECAST_WEEK_CEILING = ${FORECAST_WEEK_CEILING};`,
+    `const FORECAST_SEED = ${FORECAST_SEED};`,
+    browserFunctionSource(daysBetween),
+    browserFunctionSource(buildAgingBuckets),
+    browserFunctionSource(buildAgingMatrix),
+    browserFunctionSource(weekStart),
+    browserFunctionSource(shiftDays),
+    browserFunctionSource(isValidDateString),
+    browserFunctionSource(resolveWindow),
+    browserFunctionSource(buildWeeklyFlow),
+    browserFunctionSource(attachRollingMean),
+    browserFunctionSource(buildCumulativeFlow),
+    browserFunctionSource(buildCycleTime),
+    browserFunctionSource(percentile),
+    browserFunctionSource(buildForecast),
+    browserFunctionSource(cumulativeShare),
+    browserFunctionSource(seededRandom),
+    browserFunctionSource(buildEvidence),
+  ].join('\n');
+}

package/src/report-graph.js

@@ -66,6 +66,7 @@ export function buildGraphModel(model) {
     asOf: model.asOf,
     nodes,
     links: buildLinks([...model.items, ...model.terminalItems], new Set(nodes.map((node) => node.id))),
+    impactById: model.impactById ?? {},
   };
 }
 
@@ -174,12 +175,10 @@ export function graphStyleSource() {
     .join('');
   return `${bandRules}
 #graph-stage{position:relative;height:min(66vh,620px);border-radius:11px;background:#080b0f;overflow:hidden}
-.graph-filter{margin-bottom:13px}
-.graph-filter .facet-group{padding:0}
-.graph-filter-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
-.graph-filter-buttons{display:flex;gap:8px}
-.graph-filter-actions button{padding:7px 10px}
-.graph-filter-actions .result-count{margin-right:auto}
+#graph-node-count{margin:12px 0 0}
+.graph-actions{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0}
+.graph-actions button{padding:6px 10px}
+#graph-card .graph-actions button{border-color:#3b4c5e;background:#22303d;color:#e6edf3}
 #graph-empty{margin:12px 0 0;border-left:3px solid var(--navy);background:#eef1f4;padding:10px 13px}
 #graph-canvas{position:absolute;inset:0}
 #graph-labels{position:absolute;inset:0;pointer-events:none}
@@ -214,9 +213,25 @@ export function graphStyleSource() {
 
 // The roster is not a fallback bolted on for the WebGL-less reader; it is where
 // the graph's decision-relevant content lives. The 3D view adds shape and
-// adjacency to it and holds nothing the roster does not already say.
-function renderRoster(nodes) {
-  return `<details class="graph-fallback"><summary>Every node, without the graph</summary><ol class="graph-roster">${nodes.map((node) => `<li class="graph-band-${escapeHtml(node.band)}" data-node-status="${escapeHtml(node.status)}"><p class="graph-head"><span class="graph-handle">${escapeHtml(node.handle)}</span><span class="graph-title">${escapeHtml(node.title)}</span><span class="graph-meta">${escapeHtml(BAND_LABELS[node.band] ?? node.band)} · ${escapeHtml(node.status)} · age ${escapeHtml(node.ageDays)}d · unblocks ${escapeHtml(node.leverage)}</span></p><p class="graph-why">${node.reasons.map((reason) => `<span class="graph-reason">${escapeHtml(reason.label)}</span>`).join('')}</p></li>`).join('')}</ol></details>`;
+// adjacency to it and holds nothing the roster does not already say. Each row
+// carries the same actions the graph card offers: canonical details through
+// inspectItem, and labelled drilldowns from impactById. Only nonempty impact
+// sets become buttons, so a terminal node offers details alone.
+function renderGraphActions(node, impactById) {
+  const impact = impactById[node.id] ?? {};
+  const downstreamIds = Array.isArray(impact.downstreamIds) ? impact.downstreamIds : [];
+  const readyIds = Array.isArray(impact.readyIfDoneIds) ? impact.readyIfDoneIds : [];
+  let buttons = `<button type="button" data-inspect="${escapeHtml(node.id)}">Details</button>`;
+  if (downstreamIds.length > 0) {
+    buttons += `<button type="button" data-downstream="${escapeHtml(node.id)}">Downstream (${downstreamIds.length})</button>`;
+  }
+  if (readyIds.length > 0) {
+    buttons += `<button type="button" data-ready="${escapeHtml(node.id)}">Ready if done (${readyIds.length})</button>`;
+  }
+  return `<p class="graph-actions">${buttons}</p>`;
+}
+function renderRoster(nodes, impactById = {}) {
+  return `<details class="graph-fallback"><summary>Every node, without the graph</summary><ol class="graph-roster">${nodes.map((node) => `<li class="graph-band-${escapeHtml(node.band)}" data-node-id="${escapeHtml(node.id)}" data-node-status="${escapeHtml(node.status)}"><p class="graph-head"><span class="graph-handle">${escapeHtml(node.handle)}</span><span class="graph-title">${escapeHtml(node.title)}</span><span class="graph-meta">${escapeHtml(BAND_LABELS[node.band] ?? node.band)} · ${escapeHtml(node.status)} · age ${escapeHtml(node.ageDays)}d · unblocks ${escapeHtml(node.leverage)}</span></p><p class="graph-why">${node.reasons.map((reason) => `<span class="graph-reason">${escapeHtml(reason.label)}</span>`).join('')}</p>${renderGraphActions(node, impactById)}</li>`).join('')}</ol></details>`;
 }
 
 function renderLegend() {
@@ -225,20 +240,6 @@ function renderLegend() {
     .join('');
   return `<div id="graph-legend">${bands}<span class="graph-key graph-key-edge graph-band-depends">Unblocks (depends_on)</span><span class="graph-key graph-key-edge graph-key-edge-parent graph-band-parent">Parent to child</span></div>`;
 }
-
-// The filter offers the lifecycle statuses the ledger actually holds, each
-// carrying how many nodes answer to it, and starts with all of them selected:
-// the graph's own default is the whole ledger. Select all and Clear are the two
-// moves a chip strip cannot make on its own.
-function renderStatusFilter(nodes) {
-  const statuses = [...new Set(nodes.map((node) => node.status))].sort();
-  const chips = statuses.map((status) => {
-    const count = nodes.filter((node) => node.status === status).length;
-    return `<label class="chip"><input type="checkbox" class="graph-status" value="${escapeHtml(status)}" checked><span class="chip-text">${escapeHtml(status)}</span> <span class="chip-count">${count}</span></label>`;
-  }).join('');
-  return `<div id="graph-filter" class="graph-filter"><fieldset class="facet-group" data-group="graph-status"><legend>Status</legend><div class="chips">${chips}</div></fieldset><div class="graph-filter-actions"><p id="graph-node-count" class="result-count" role="status" aria-live="polite">Showing ${nodes.length} of ${nodes.length} ${nodes.length === 1 ? 'node' : 'nodes'}</p><span class="graph-filter-buttons"><button type="button" id="graph-status-all">Select all</button><button type="button" id="graph-status-clear">Clear</button></span></div></div>`;
-}
-
 // The empty state has to name what emptied the graph. A reader who cleared
 // every status did that, and selecting one undoes it. A named view that matched
 // nothing was never narrowed by anybody, and there is no status for that reader
@@ -250,36 +251,58 @@ function renderGraphEmptyState(nodes, view) {
 }
 
 export function graphSection(model, manifest, view = null) {
+  const nodes = model.nodes;
   return `<section id="graph" class="panel"><div class="section-heading"><div><p class="eyebrow">Dependencies</p><h2>Ledger graph</h2></div><p class="muted">Every item as a node, sized by how much it unblocks. Edges run from a prerequisite or parent to the item it releases.</p></div>
-${renderStatusFilter(model.nodes)}
+<p id="graph-node-count" class="result-count" role="status" aria-live="polite">Showing ${nodes.length} of ${nodes.length} ${nodes.length === 1 ? 'node' : 'nodes'}</p>
 <div id="graph-stage"><div id="graph-canvas"></div><div id="graph-labels" aria-hidden="true"></div><aside id="graph-card" hidden></aside><p id="graph-hint">Drag to orbit · scroll to zoom · hover or click a node</p></div>
 <p id="graph-nowebgl" hidden>This browser has no WebGL, so the graph cannot draw. Nothing is lost: every node, its status, its age, and the reasons that place it are listed below, and the graph only adds the shape of the dependencies between them.</p>
-${renderGraphEmptyState(model.nodes, view)}
+${renderGraphEmptyState(nodes, view)}
 ${renderLegend()}
-${renderRoster(model.nodes)}
+${renderRoster(nodes, model.impactById ?? {})}
 <p class="muted">Rendered by ${escapeHtml(manifest.package)} ${escapeHtml(manifest.version)}, vendored and checksummed in this repository and inlined here. This report fetches nothing.</p></section>`;
 }
 
 export function graphClientSource(model) {
   return `'use strict';
-var GRAPH_MODEL=${scriptJson(model)};
+var GRAPH_MODEL=${scriptJson({ asOf: model.asOf, nodes: model.nodes, links: model.links })};
 var GRAPH_COLORS=${scriptJson(BAND_COLORS)};
 var graphStage=document.getElementById('graph-stage');
 var graphNotice=document.getElementById('graph-nowebgl');
 var graphEmpty=document.getElementById('graph-empty');
 var graphCount=document.getElementById('graph-node-count');
+var graphEmptyCopy=graphEmpty?graphEmpty.textContent:'';
 var graphFallback=document.querySelector('.graph-fallback');
-var graphStatusInputs=Array.prototype.slice.call(document.querySelectorAll('.graph-status'));
-var graphRosterRows=Array.prototype.slice.call(document.querySelectorAll('[data-node-status]'));
-// The stage hands back the one function that redraws it. Without WebGL there is
-// no stage, and the filter still runs: it is the roster's filter too.
+var graphSection=document.getElementById('section-dependencies');
+var graphNav=document.getElementById('nav-dependencies');
+var graphReducedMotion=false;
+try{graphReducedMotion=!!(window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches);}catch(error){}
+var graphStarted=false;
+var graphDisposed=false;
+var graphInstance=null;
+var graphUnsubscribe=null;
+var graphLabelRaf=0;
+var graphRosterRows=Array.prototype.slice.call(document.querySelectorAll('[data-node-id]'));
+var graphNodesById=Object.create(null);
+GRAPH_MODEL.nodes.forEach(function(node){graphNodesById[node.id]=node;});
+// The shared report scope owns selection: the controller installed by
+// reportClientSource publishes matching items, and the graph draws the induced
+// subgraph without recomputing readiness from an incomplete picture.
+var graphReport=window.wowbaggerReport||null;
+// The stage hands back the one function that redraws it. A scope that arrives
+// before the stage exists waits here until the first sizing.
 var graphDraw=null;
+var graphPendingVisible=null;
 var graphShownId=null;
+// Probed once: every probe opens a WebGL context, and a retry loop that probes
+// each frame exhausts the browser's context budget and evicts the graph's own.
+var graphWebglProbe=null;
 function graphWebglAvailable(){
+  if(graphWebglProbe!==null)return graphWebglProbe;
   try{
     var probe=document.createElement('canvas');
-    return !!(window.WebGLRenderingContext&&(probe.getContext('webgl2')||probe.getContext('webgl')));
-  }catch(error){return false;}
+    graphWebglProbe=!!(window.WebGLRenderingContext&&(probe.getContext('webgl2')||probe.getContext('webgl')));
+  }catch(error){graphWebglProbe=false;}
+  return graphWebglProbe;
 }
 function graphBandColor(node){return GRAPH_COLORS[node.band]||'#94a3b8';}
 function graphRenderCard(card,node){
@@ -308,52 +331,158 @@ function graphRenderCard(card,node){
     why.append(chip);
   });
   card.append(handle,title,facts,why);
+  var actions=document.createElement('p');
+  actions.className='graph-actions';
+  var details=document.createElement('button');
+  details.type='button';
+  details.textContent='Details';
+  details.addEventListener('click',function(){graphInspect(node.id);});
+  actions.append(details);
+  var impact=graphImpactLists(node.id);
+  if(impact.downstreamIds.length>0){
+    var downstream=document.createElement('button');
+    downstream.type='button';
+    downstream.textContent='Downstream ('+impact.downstreamIds.length+')';
+    downstream.addEventListener('click',function(){graphShowImpact(node.id,'downstream');});
+    actions.append(downstream);
+  }
+  if(impact.readyIfDoneIds.length>0){
+    var unlocks=document.createElement('button');
+    unlocks.type='button';
+    unlocks.textContent='Ready if done ('+impact.readyIfDoneIds.length+')';
+    unlocks.addEventListener('click',function(){graphShowImpact(node.id,'ready');});
+    actions.append(unlocks);
+  }
+  card.append(actions);
   card.hidden=false;
   graphShownId=node.id;
 }
-function graphSelectedStatuses(){
-  var chosen=Object.create(null);
-  graphStatusInputs.forEach(function(input){
-    if(input.checked)chosen[input.value]=true;
-  });
-  return chosen;
-}
-// One selection drives the stage, the roster, and the count together, so the
-// three can never disagree about which part of the ledger is on screen.
-function graphApplyFilter(){
-  var chosen=graphSelectedStatuses();
+// One scope drives the stage, the roster, and the count together, so the three
+// can never disagree about which part of the ledger is on screen. Bands and
+// reasons come from the complete-ledger model, so hiding a prerequisite never
+// recomputes the items it holds back.
+function graphApplyScope(items){
   var visible=Object.create(null);
   var shown=0;
-  GRAPH_MODEL.nodes.forEach(function(node){
-    if(chosen[node.status]!==true)return;
-    visible[node.id]=true;
-    shown+=1;
+  (items||[]).forEach(function(item){
+    if(item&&graphNodesById[item.id]!==undefined&&visible[item.id]!==true){
+      visible[item.id]=true;
+      shown+=1;
+    }
   });
   graphRosterRows.forEach(function(row){
-    row.hidden=chosen[row.getAttribute('data-node-status')]!==true;
+    var id=row.getAttribute('data-node-id');
+    row.hidden=!(id!==null&&visible[id]===true);
   });
   var total=GRAPH_MODEL.nodes.length;
-  graphCount.textContent='Showing '+shown+' of '+total+(total===1?' node':' nodes');
-  graphEmpty.hidden=shown!==0;
+  if(graphCount)graphCount.textContent='Showing '+shown+' of '+total+(total===1?' node':' nodes');
+  if(graphEmpty){
+    if(total===0){graphEmpty.hidden=false;}
+    else if(shown===0){graphEmpty.textContent='No items match the current scope, so the graph has nothing to draw.';graphEmpty.hidden=false;}
+    else{graphEmpty.textContent=graphEmptyCopy;graphEmpty.hidden=true;}
+  }
   if(graphDraw)graphDraw(visible);
+  else graphPendingVisible=visible;
 }
-// The two moves a chip strip cannot make on its own. Clearing every status is a
-// legitimate request, and its honest answer is an empty graph that says so.
-function graphSetEveryStatus(checked){
-  graphStatusInputs.forEach(function(input){input.checked=checked;});
-  graphApplyFilter();
+function graphMount(){return document.getElementById('graph-canvas');}
+// Impact actions read the frozen controller map, never a recomputed graph: the
+// labels carry the same downstream and ready-if-done sets the Items detail
+// shows, with their distinct counts.
+function graphImpactLists(id){
+  var entry=null;
+  try{entry=graphReport&&graphReport.impactById?graphReport.impactById[id]:null;}catch(error){entry=null;}
+  var downstream=entry&&Array.isArray(entry.downstreamIds)?entry.downstreamIds.slice():[];
+  var ready=entry&&Array.isArray(entry.readyIfDoneIds)?entry.readyIfDoneIds.slice():[];
+  return {downstreamIds:downstream,readyIfDoneIds:ready};
 }
-if(!window.ForceGraph3D||!graphWebglAvailable()){
-  graphStage.hidden=true;
-  graphNotice.hidden=false;
-  graphFallback.open=true;
-}else{
+function graphNodeHandle(id){var node=graphNodesById[id];return node?node.handle:id;}
+function graphInspect(id){
+  try{if(graphReport&&typeof graphReport.inspectItem==='function')return graphReport.inspectItem(id);}catch(error){}
+  return false;
+}
+function graphShowImpact(id,kind){
+  if(!graphReport||typeof graphReport.showItems!=='function')return;
+  var lists=graphImpactLists(id);
+  var handle=graphNodeHandle(id);
+  if(kind==='downstream'&&lists.downstreamIds.length>0)graphReport.showItems({label:'Downstream of '+handle+' ('+lists.downstreamIds.length+')',itemIds:lists.downstreamIds});
+  if(kind==='ready'&&lists.readyIfDoneIds.length>0)graphReport.showItems({label:'Ready if '+handle+' is done ('+lists.readyIfDoneIds.length+')',itemIds:lists.readyIfDoneIds});
+}
+function graphWireActions(root){
+  Array.prototype.slice.call(root.querySelectorAll('[data-inspect]')).forEach(function(button){
+    button.addEventListener('click',function(){graphInspect(button.getAttribute('data-inspect'));});
+  });
+  Array.prototype.slice.call(root.querySelectorAll('[data-downstream]')).forEach(function(button){
+    button.addEventListener('click',function(){graphShowImpact(button.getAttribute('data-downstream'),'downstream');});
+  });
+  Array.prototype.slice.call(root.querySelectorAll('[data-ready]')).forEach(function(button){
+    button.addEventListener('click',function(){graphShowImpact(button.getAttribute('data-ready'),'ready');});
+  });
+}
+graphWireActions(document);
+function graphSectionHidden(){return !!(graphSection&&graphSection.hidden===true);}
+function graphMeasurable(){var mount=graphMount();return !!(mount&&mount.clientWidth>0&&mount.clientHeight>0);}
+function graphCanDraw(){return !!(window.ForceGraph3D&&graphWebglAvailable());}
+// The 1,744-item reference built one canvas while Dependencies was still
+// hidden: a hidden container measures zero, so the first sizing waits for a
+// visible section with measurable dimensions. Repeated visits reuse the one
+// canvas instead of starting the layout again.
+function graphEnsureStarted(){
+  if(graphStarted||graphDisposed)return;
+  if(!graphCanDraw()||GRAPH_MODEL.nodes.length===0)return;
+  if(graphSectionHidden())return;
+  if(!graphMeasurable()){
+    if(window.requestAnimationFrame)window.requestAnimationFrame(function(){graphEnsureStarted();});
+    return;
+  }
   graphStart();
+  graphStarted=true;
+  if(graphPendingVisible&&graphDraw)graphDraw(graphPendingVisible);
+}
+function graphNoteVisibility(){
+  if(!graphStarted||!graphInstance)return;
+  if(graphSectionHidden()){
+    if(graphInstance&&typeof graphInstance.pauseAnimation==='function')graphInstance.pauseAnimation();
+    return;
+  }
+  var mount=graphMount();
+  if(mount&&graphInstance&&typeof graphInstance.width==='function'){
+    try{graphInstance.width(mount.clientWidth).height(mount.clientHeight);}catch(error){}
+  }
+  if(graphInstance&&typeof graphInstance.resumeAnimation==='function')graphInstance.resumeAnimation();
+}
+// Disposal releases the layout, its label loop, and the scope subscription, so
+// leaving the document does not leave the force layout ticking.
+function graphDispose(){
+  if(graphDisposed)return;
+  graphDisposed=true;
+  if(typeof graphUnsubscribe==='function'){try{graphUnsubscribe();}catch(error){}graphUnsubscribe=null;}
+  if(window.cancelAnimationFrame&&graphLabelRaf){try{window.cancelAnimationFrame(graphLabelRaf);}catch(error){}graphLabelRaf=0;}
+  if(graphInstance&&typeof graphInstance._destructor==='function'){try{graphInstance._destructor();}catch(error){}}
+  graphInstance=null;
+  graphDraw=null;
+}
+if(!graphCanDraw()){
+  if(graphStage)graphStage.hidden=true;
+  if(graphNotice)graphNotice.hidden=false;
+  if(graphFallback)graphFallback.open=true;
+}
+if(graphReport&&typeof graphReport.subscribeScope==='function'){
+  graphUnsubscribe=graphReport.subscribeScope(function(items){graphApplyScope(items||[]);graphEnsureStarted();graphNoteVisibility();});
+}else{
+  graphApplyScope(GRAPH_MODEL.nodes.map(function(node){return {id:node.id};}));
+  graphEnsureStarted();
+}
+if(graphNav)graphNav.addEventListener('click',function(){graphEnsureStarted();graphNoteVisibility();});
+if(graphSection&&window.MutationObserver){
+  try{
+    new window.MutationObserver(function(){graphEnsureStarted();graphNoteVisibility();}).observe(graphSection,{attributes:true,attributeFilter:['hidden']});
+  }catch(error){}
+}
+if(window.addEventListener){
+  window.addEventListener('resize',function(){graphEnsureStarted();graphNoteVisibility();});
+  window.addEventListener('pagehide',function(){graphDispose();});
+  window.addEventListener('unload',function(){graphDispose();});
 }
-graphStatusInputs.forEach(function(input){input.addEventListener('change',graphApplyFilter);});
-document.getElementById('graph-status-all').addEventListener('click',function(){graphSetEveryStatus(true);});
-document.getElementById('graph-status-clear').addEventListener('click',function(){graphSetEveryStatus(false);});
-graphApplyFilter();
 function graphStart(){
   var mount=document.getElementById('graph-canvas');
   var labelLayer=document.getElementById('graph-labels');
@@ -381,9 +510,10 @@ function graphStart(){
     .linkDirectionalArrowLength(function(link){return link.kind==='parent'?0:8;})
     .linkDirectionalArrowRelPos(1)
     .onNodeHover(function(node){if(node)graphRenderCard(card,node);})
-    .onNodeClick(function(node){if(node)graphRenderCard(card,node);})
+    .onNodeClick(function(node){if(node){graphRenderCard(card,node);graphInspect(node.id);}})
     .onBackgroundClick(function(){card.hidden=true;graphShownId=null;})
-    .cooldownTicks(220);
+    .cooldownTicks(graphReducedMotion?0:220);
+  graphInstance=graph;
   graph.d3Force('charge').strength(-40);
   var labels=nodes.map(function(node){
     var element=document.createElement('span');
@@ -397,11 +527,9 @@ function graphStart(){
   graph.onEngineStop(function(){
     if(framed||drawn===0)return;
     framed=true;
-    graph.zoomToFit(800,20);
-  });
-  window.addEventListener('resize',function(){
-    graph.width(mount.clientWidth).height(mount.clientHeight);
+    graph.zoomToFit(graphReducedMotion?0:800,20);
   });
+  window.addEventListener('resize',function(){graphNoteVisibility();});
   // A hidden node's edges have nowhere to land, and its label would hang over
   // empty space, so the node, its links, and its label leave together. Handing
   // the graph new data reheats the layout, which is what re-forms the remaining
@@ -458,8 +586,8 @@ function graphStart(){
       placement.element.style.transform='translate('+placement.screen.x.toFixed(1)+'px,'+placement.screen.y.toFixed(1)+'px)';
       placement.element.style.opacity=(1-0.55*((placement.depth-nearest)/span)).toFixed(2);
     }
-    window.requestAnimationFrame(graphPlaceLabels);
+    if(!graphDisposed)graphLabelRaf=window.requestAnimationFrame(graphPlaceLabels);
   }
-  window.requestAnimationFrame(graphPlaceLabels);
+  graphLabelRaf=window.requestAnimationFrame(graphPlaceLabels);
 }`;
 }