feat(demos): add full-stack macro strip; finalize change summary

Reuse renderRateStrip on the full-stack page: a small backend call-rate
strip below the lanes, revealed each tick with the single-client run,
labeled with the active incident phase. Gated by config.macroStrip so
every other lane page is unaffected. Finalizes the change summary with
the realized herd multipliers (naive ~70x vs httpware ~3x).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: lesnik512

docs/demos/demos.css

@@ -158,3 +158,9 @@
   clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
   width: 11px; height: 11px; top: 4px;
 }
+
+/* full-stack macro strip (reuses .herd-strip / .herd-bar-hw) */
+.hw-demo .macro { margin-top: 6px; }
+.hw-demo .macro-head { font-family: var(--hw-mono); font-size: .72rem; color: var(--hw-muted); margin-bottom: 4px; }
+.hw-demo .macro .herd-strip { height: 54px; }
+.hw-demo .macro .herd-svg { height: 54px; }

docs/demos/engine.js

@@ -524,6 +524,11 @@ window.HttpwareDemo = (function () {
   </div>
 
   <p class="note" data-el="note">Faithful model of httpware, not httpware running in your browser. Pick a scenario above to begin.</p>
+
+  <div class="macro" data-el="macroWrap" style="display:none">
+    <div class="macro-head"><span class="k">backend call-rate</span> &mdash; <span data-el="macroStage">healthy</span></div>
+    <div class="herd-strip" data-el="macroStrip"></div>
+  </div>
 </div>
 
 <div class="dim" data-el="dimT"></div><div class="dim" data-el="dimB"></div>
@@ -554,6 +559,7 @@ window.HttpwareDemo = (function () {
       poolWrap: $('poolWrap'), poolB: $('poolB'),
       elapsedWrap: $('elapsedWrap'), elapsedB: $('elapsedB'),
       note: $('note'),
+      macroWrap: $('macroWrap'), macroStrip: $('macroStrip'), macroStage: $('macroStage'),
       dimT: $('dimT'), dimB: $('dimB'), dimL: $('dimL'), dimR: $('dimR'), ring: $('ring'),
       coach: $('coach'), cArrow: $('cArrow'), cStep: $('cStep'), cTitle: $('cTitle'), cBody: $('cBody'), cGo: $('cGo'),
     };
@@ -579,6 +585,7 @@ window.HttpwareDemo = (function () {
     let A = { ok: 0, bad: 0, if: 0, pend: [] };
     let B = { ok: 0, bad: 0, rej: 0, if: 0, pend: [] };
     let brk = null;
+    let macroSeries = []; // lane-B backend calls per tick, for config.macroStrip
     let bulk = null;
     let retryCfg = null, budget = null, budgetExhausted = false;
     let tmoCfg = null, timedOutCount = 0;
@@ -641,6 +648,7 @@ window.HttpwareDemo = (function () {
       els.poolB.textContent = cfgB.bulkhead ? ('0/' + cfgB.bulkhead.maxConcurrent) : '—';
       els.elapsedWrap.style.display = cfgB.timeout ? '' : 'none';
       els.elapsedB.textContent = cfgB.timeout ? ('0.0s / ' + cfgB.timeout.timeout.toFixed(1) + 's') : '—';
+      els.macroWrap.style.display = (selectedScenario && config.macroStrip) ? '' : 'none';
       els.srvA.className = 'box'; els.srvA.textContent = 'server ✓';
       els.srvB.className = 'box'; els.srvB.textContent = 'server ✓';
       els.laneA.className = 'lane'; els.laneB.className = 'lane';
@@ -729,6 +737,8 @@ window.HttpwareDemo = (function () {
       timedOutCount = 0;
       rnd = mulberry(SEED);
       resetVisual();
+      macroSeries = new Array(Math.ceil(scenario.dur * 1000 / TICK) + 2).fill(0);
+      if (config.macroStrip) els.macroWrap.style.display = '';
 
       timer = setInterval(() => {
         if (paused) return;
@@ -776,6 +786,7 @@ window.HttpwareDemo = (function () {
                   L.pend.push({ land, ok: f2.ok, attempt: nextAttempt, bh: p.bh, start: p.start, deadline: p.deadline, timedOut });
                   spawnDot(dotsB, els.trackB, f2.ok ? 'ok' : 'bad');
                   retried = true;
+                  if (config.macroStrip) macroSeries[tick]++;
                 } else if (budget) {
                   budgetExhausted = true;
                 }
@@ -822,9 +833,16 @@ window.HttpwareDemo = (function () {
             const { land, timedOut } = clampToDeadline(tick, landTicks, deadline);
             B.if++; B.pend.push({ land, ok: f.ok, attempt: 0, bh: !!bulk, start: now, deadline, timedOut });
             spawnDot(dotsB, els.trackB, f.ok ? 'ok' : 'bad');
+            if (config.macroStrip) macroSeries[tick]++;
           }
         }
         updateUI(now, lastFault);
+        if (config.macroStrip) {
+          const peak = macroSeries.reduce((m, v) => Math.max(m, v), 0) || 1;
+          renderRateStrip(els.macroStrip, macroSeries, tick + 1,
+            { peakScale: peak, baseline: 0, outage: null, dur: scenario.dur * 1000 / TICK, cls: 'herd-bar-hw' });
+          els.macroStage.textContent = config.stageLabel ? config.stageLabel(now) : '';
+        }
         tick++;
         if (now >= scenario.dur) clearInterval(timer);
       }, TICK);

docs/demos/full-stack.md

@@ -24,6 +24,11 @@ document.addEventListener('DOMContentLoaded', function () {
                 retry: { maxAttempts: 3, baseDelay: 0.1, maxDelay: 5.0 },
                 budget: { ttl: 10.0, minRetriesPerSec: 10.0, percentCanRetry: 0.2 } } },
   ],
+  macroStrip: true,
+  stageLabel: (now) => now < 2 ? 'healthy'
+    : now < 5 ? 'phase 1 — latency spike'
+    : now < 8 ? 'phase 2 — brownout'
+    : now < 12 ? 'phase 3 — hard down' : 'recovered',
   buildStops: () => [
     { when: (s) => s.now >= 2.4, spot: ['poolB', 'elapsedB'], title: 'Phase 1 — latency spike',
       body: 'Bulkhead caps concurrency so the slow phase can’t exhaust the client; timeout bounds each operation at 2s.' },

planning/changes/2026-07-19.02-resilience-demo-herd-and-enrich.md

@@ -1,5 +1,5 @@
 ---
-summary: Add a many-client thundering-herd macro view to the retry/budget demo and fold borrowed visualization techniques (backoff countdown ring, jagged failure shape, full-stack macro strip) across the demo suite.
+summary: Added a many-client thundering-herd macro view to the retry page (naive ~70x vs httpware ~3x peak backend load, httpware bounded by max_attempts at demo scale with a per-client budget) and folded three enrich techniques across the demo suite — a backoff countdown ring on timeout + circuit-breaker only (retry's sub-tick backoff makes a faithful ring there impossible, so it's dropped, not faked), a color-independent jagged failure shape everywhere, and a live backend call-rate macro strip with active-phase label on the full-stack page.
 ---
 
 # Design: Resilience demo herd view + enrich pass