Refresh CacheBack website, demos and latent-vector caption

.gitattributes

@@ -35,3 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 demo/coding/rclc-cacheback-4k.mp4 filter=lfs diff=lfs merge=lfs -text
 social-preview.jpg filter=lfs diff=lfs merge=lfs -text
+demo/coding/cacheback-coding-4k.mp4 filter=lfs diff=lfs merge=lfs -text
+demo/coding/cacheback-coding-poster.jpg filter=lfs diff=lfs merge=lfs -text

README.md

@@ -16,6 +16,6 @@ Receiver-Conditioned Latent Communication gives 94% CacheBack.
 
 [Paper](https://arxiv.org/abs/2609.32046) · [Code](https://github.com/agentcacheback/cacheback) · [Website](https://agentcacheback.github.io/)
 
-This static Space mirrors the project website, with benchmark results, an interactive recorded booking replay, and a coding demo video. It does not run model inference.
+This static Space mirrors the project website, with benchmark results, the architecture animation, an interactive recorded document replay, and the updated coding demo video. It does not run model inference.
 
 The website source is maintained at https://github.com/agentcacheback/agentcacheback.github.io.

demo/coding/cacheback-coding-4k.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f3425292f525489d0238ac2a9109e784961233707c2cfdbb42a8f81acd3f111e
+size 5817953

demo/coding/cacheback-render-receipt.json

@@ -0,0 +1,16 @@
+{
+  "width": 3840,
+  "height": 2160,
+  "fps": 60,
+  "seconds": 36,
+  "frames": 2160,
+  "claims": {
+    "passed": true,
+    "run": "bughunt-16333-run-20261001T051520Z",
+    "textSeconds": 113.20635836,
+    "latentSeconds": 25.66205141,
+    "tests": 88,
+    "textFinish": 31.69303836875,
+    "duration": 36
+  }
+}

demo/communication.css

@@ -0,0 +1,7 @@
+.communication-animation { position:relative; font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; color:#444; }
+.communication-animation svg { display:block; width:100%; height:auto; }
+#animation-caption { min-height:2.7em; padding:8px 0; font-size:16px; line-height:1.4; }
+#animation-play { position:absolute; top:8px; right:8px; border:0; border-radius:50%; width:40px; height:40px; background:#0b7872; color:white; cursor:pointer; font-size:18px; }
+#animation-play:hover { background:#202827; }
+#animation-play:focus-visible { outline:2px solid #0b7872; outline-offset:3px; }
+@media(max-width:600px) { #animation-caption { font-size:14px; min-height:4.2em; } #animation-play { width:32px; height:32px; top:0; right:0; font-size:14px; } }

demo/communication.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>CacheBack vs. full-KV transfer animation</title>
+  <style>body { margin:0; }</style>
+  <link rel="stylesheet" href="communication.css?v=inline-1">
+  <script type="module" src="communication.js?v=inline-1"></script>
+</head>
+<body>
+<div class="communication-animation">
+  <button id="animation-play" aria-label="Play animation" title="Play animation">▶</button>
+  <svg id="communication-svg" viewBox="0 0 1180 548" role="img" aria-label="Animated comparison of full KV transfer and CacheBack"></svg>
+  <div id="animation-caption">Selected source positions can be sent as <span style="color:#6a4fb8"><b>token IDs</b></span>; latent steps must be sent as <span style="color:#3f669f"><b>continuous vectors</b></span>. The receiver prefills both to build its own state.</div>
+</div>
+</body>
+</html>

demo/communication.js

@@ -0,0 +1,281 @@
+/* ===================== configuration ===================== */
+const C = {
+  gray:'#d9d9d9', purple:'#c5b3e0', blue:'#6c8ebf', teal:'#a9d7c9',
+  red:'#e53935', overflow:'#ef9a9a', overflowBg:'#fdecea',
+  text:'#555', purpleText:'#6a4fb8', blueText:'#3f669f', tealText:'#3d8f78', green:'#2e8b57', arrow:'#c4c4c4'
+};
+const P = 19, W = 14, H = 64;          // column pitch, column width, column height (= layers)
+const N = 10, LAT = 2;                  // positions per sender, latent steps per sender
+const SEL = [[2, 7], [3, 6]];           // selected positions per sender
+const SX = 130, SY = [118, 250];        // sender KV origin
+const RX = 620, RY = 118, SEG = 10;     // receiver KV row (LatentMAS/KVComm)
+const STX = 400, STY = 250;             // staging row (colored entries only)
+const CY = 382, TY = 382;               // CacheBack row y, token-ID row y
+const LIMIT_SLOT = 16;                  // context limit falls before this receiver slot
+const GROUP_GAP = 10;                   // gap between purple and blue groups in staging
+
+const T = { s0:0, s1:1.6, s2:4.0, s3:7.0, s4:11.0, s5:13.4, s6:17.0, s7:20.0, end:23.5 };
+const STAGES = [
+  { t:T.s0, name:'Sender KVs',    cap:'Each sender agent holds a <b>KV cache</b> — one column per position, spanning all layers.' },
+  { t:T.s1, name:'Select',        cap:'Positions relevant to the receiver\'s query <b>q</b> are <span style="color:#6a4fb8"><b>selected</b></span>.' },
+  { t:T.s2, name:'Latent steps',  cap:'Each sender generates <span style="color:#3f669f"><b>latent steps</b></span>, appending new KV entries.' },
+  { t:T.s3, name:'Concatenate',   cap:'<b>LatentMAS / KVComm</b>: transfer <i>all</i> positions and concatenate them into the receiver\'s KV, followed by the receiver prompt.' },
+  { t:T.s4, name:'Overflow',      cap:'The concatenated cache plus the receiver prompt <span style="color:#e53935"><b>exceeds the context limit</b></span>.' },
+  { t:T.s5, name:'Pick & sort',   cap:'<b>CacheBack</b>: keep only the selected positions and latent steps, and organize them.' },
+  { t:T.s6, name:'CacheBack',     cap:'The compact set is written into the receiver\'s cache — <span style="color:#2e8b57"><b>well within the context limit</b></span>.' },
+  { t:T.s7, name:'Token IDs',     cap:'Selected source positions can be sent as <span style="color:#6a4fb8"><b>token IDs</b></span>; latent steps must be sent as <span style="color:#3f669f"><b>continuous vectors</b></span>. The receiver prefills both to build its own state.' },
+];
+
+/* ===================== tiny timeline engine ===================== */
+const NS = 'http://www.w3.org/2000/svg';
+const svg = document.getElementById('communication-svg');
+function el(tag, attrs = {}, parent) {
+  const n = document.createElementNS(NS, tag);
+  for (const k in attrs) n.setAttribute(k, attrs[k]);
+  if (parent) parent.appendChild(n);
+  return n;
+}
+const ease = {
+  lin: t => t,
+  io:  t => t < .5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2,
+  out: t => 1 - Math.pow(1 - t, 3),
+  back:t => { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3*Math.pow(t - 1, 3) + c1*Math.pow(t - 1, 2); },
+};
+const COLOR_PROPS = new Set(['fill', 'stroke']);
+const ATTR = { w:'width', h:'height' };
+const hex = h => [0, 2, 4].map(i => parseInt(h.replace('#', '').substr(i, 2), 16));
+const norm = (k, v) => COLOR_PROPS.has(k) ? hex(v) : v;
+const mix = (a, b, p) => Array.isArray(a) ? a.map((v, i) => v + (b[i] - v) * p) : a + (b - a) * p;
+const actors = [];
+class Actor {
+  constructor(node, init) {
+    this.node = node; this.init = {}; this.tracks = {}; this.last = {};
+    for (const k in init) this.init[k] = norm(k, init[k]);
+    actors.push(this);
+  }
+  to(t0, dur, props, e = 'io') {
+    for (const k in props) if (!(k in this.init)) this.init[k] = +this.node.getAttribute(ATTR[k] || k);
+    for (const k in props) (this.tracks[k] ||= []).push({ t0, t1: t0 + dur, v: norm(k, props[k]), e: ease[e] });
+    return this;
+  }
+  at(t, props) { return this.to(t, 0, props, 'lin'); }
+  eval(t) {
+    for (const k in this.init) {
+      let v = this.init[k];
+      for (const s of (this.tracks[k] || [])) {
+        if (t >= s.t1) { v = s.v; continue; }
+        if (t > s.t0) v = mix(v, s.v, s.e((t - s.t0) / (s.t1 - s.t0)));
+        break;
+      }
+      const out = COLOR_PROPS.has(k) ? `rgb(${v.map(Math.round).join(',')})` : (+v.toFixed(2));
+      if (this.last[k] !== out) { this.node.setAttribute(ATTR[k] || k, out); this.last[k] = out; }
+    }
+  }
+  finalize() { for (const k in this.tracks) this.tracks[k].sort((a, b) => a.t0 - b.t0); }
+}
+
+/* ===================== scene ===================== */
+const defs = el('defs', {}, svg);
+const mk = el('marker', { id:'ah', viewBox:'0 0 10 10', refX:5, refY:5, markerWidth:3.2, markerHeight:3.2, orient:'auto-start-reverse' }, defs);
+el('path', { d:'M0,0 L10,5 L0,10 z', fill:C.arrow }, mk);
+
+const L = {};
+for (const name of ['bg', 'main', 'clone', 'over', 'labels']) L[name] = el('g', {}, svg);
+
+const rect = (init, parent = L.main, rx = 2) => new Actor(el('rect', { rx }, parent), init);
+function txt(str, x, y, o = {}, parent = L.labels) {
+  const n = el('text', { x, y, 'font-size':o.size || 14, 'font-weight':o.weight || 400,
+                         fill:o.fill || C.text, 'text-anchor':o.anchor || 'start', ...(o.attrs || {}) }, parent);
+  n.innerHTML = str;
+  return new Actor(n, { opacity:o.opacity ?? 0, ...(o.init || {}) });
+}
+const group = (parent = L.labels, opacity = 0) => { const g = el('g', {}, parent); return [g, new Actor(g, { opacity })]; };
+
+const colX = i => SX + i * P;
+const slotX = g => RX + Math.floor(g / (N + LAT)) * ((N + LAT) * P + SEG) + (g % (N + LAT)) * P;
+const limitX = slotX(LIMIT_SLOT) - (P - W) / 2;
+const recvPromptX = RX + 2 * ((N + LAT) * P + SEG);
+const PROMPT_W = 3 * P - (P - W);
+
+/* --- axes --- */
+{
+  const [g, a] = group();
+  el('line', { x1:SX, y1:76, x2:SX + 200, y2:76, stroke:C.arrow, 'stroke-width':5, 'marker-end':'url(#ah)' }, g);
+  const t1 = el('text', { x:SX, y:62, 'font-size':16, fill:'#666' }, g); t1.textContent = 'positions';
+  el('line', { x1:SX - 24, y1:SY[0], x2:SX - 24, y2:SY[0] + 110, stroke:C.arrow, 'stroke-width':5, 'marker-end':'url(#ah)' }, g);
+  const t2 = el('text', { x:SX - 34, y:SY[0] + 14, 'font-size':16, fill:'#666', 'text-anchor':'end' }, g); t2.textContent = 'layers';
+  a.to(0.1, .6, { opacity:1 });
+}
+const senderLabels = [0, 1].map(s => txt(`Sender ${s + 1} KV`, SX, SY[s] - 10, { size:15, weight:700 }).to(0.1 + s * .25, .5, { opacity:1 }));
+
+/* --- stage 0/1/2: sender columns --- */
+const senderCols = [[], []];
+const scanStart = T.s1 + 0.3, scanDur = 1.8;
+for (const s of [0, 1]) {
+  for (let i = 0; i < N + LAT; i++) {
+    const isLat = i >= N, y = SY[s];
+    const a = rect({ x:colX(i), y:y + H/2, w:W, h:0, fill:isLat ? C.blue : C.gray, opacity:1 });
+    if (!isLat) a.to(0.15 + s * .25 + i * .05, .45, { y, h:H }, 'out');
+    if (SEL[s].includes(i)) {
+      const ts = scanStart + scanDur * (i + 1) / (N + 1);
+      a.to(ts, .25, { fill:C.purple }, 'lin')
+       .to(ts, .15, { y:y - 4, h:H + 8 }, 'out').to(ts + .15, .25, { y, h:H });
+    }
+    senderCols[s].push(a);
+  }
+  // scan bar with query q
+  const scan = rect({ x:colX(-1) - 3, y:SY[s] - 6, w:W + 6, h:H + 12, fill:'#7cc4b0', opacity:0 }, L.over, 4);
+  scan.to(scanStart - .15, .15, { opacity:.5 }, 'lin')
+      .to(scanStart, scanDur, { x:colX(N) - 3 }, 'lin')
+      .to(scanStart + scanDur, .2, { opacity:0 }, 'lin');
+  const q = txt('q', colX(-1) + W/2, SY[s] + H + 18, { size:15, weight:700, fill:C.tealText, anchor:'middle', attrs:{ 'font-style':'italic' } });
+  q.to(scanStart - .15, .15, { opacity:1 }, 'lin')
+   .to(scanStart, scanDur, { x:colX(N) + W/2 }, 'lin')
+   .to(scanStart + scanDur, .2, { opacity:0 }, 'lin');
+
+  // latent step generation: attend over existing cache, then append a blue column
+  for (let k = 0; k < LAT; k++) {
+    const tk = T.s2 + 0.3 + k * 1.3;
+    const flash = rect({ x:SX - 4, y:SY[s] - 4, w:(N + k) * P - (P - W) + 8, h:H + 8, fill:C.blue, opacity:0 }, L.over, 5);
+    flash.to(tk, .3, { opacity:.2 }, 'out').to(tk + .35, .35, { opacity:0 });
+    senderCols[s][N + k].to(tk + .45, .5, { y:SY[s], h:H }, 'back');
+  }
+}
+const typeOf = (s, i) => i >= N ? 'b' : SEL[s].includes(i) ? 'p' : 'g';
+const fillOf = { p:C.purple, b:C.blue, g:C.gray };
+
+/* --- stage 3: LatentMAS / KVComm concatenation --- */
+const recvTitle = txt(`LatentMAS, KVComm <tspan font-weight="400" fill="#999">· all positions</tspan>`, RX, RY - 10, { size:15, weight:700 });
+recvTitle.to(T.s3, .5, { opacity:1 });
+const recv = [];
+for (const s of [0, 1]) for (let i = 0; i < N + LAT; i++) {
+  const g = s * (N + LAT) + i;
+  const c = rect({ x:colX(i), y:SY[s], w:W, h:H, fill:fillOf[typeOf(s, i)], opacity:0 }, L.clone);
+  const t0 = T.s3 + 0.4 + s * 1.1 + i * .06;
+  c.at(t0, { opacity:1 }).to(t0, .9, { x:slotX(g), y:RY });
+  recv.push(c);
+}
+const recvPrompt = rect({ x:recvPromptX + 60, y:RY, w:PROMPT_W, h:H, fill:C.teal, opacity:0 }, L.clone);
+recvPrompt.to(T.s3 + 3.0, .7, { x:recvPromptX, opacity:1 }, 'out');
+
+/* --- stage 4: context limit & overflow --- */
+const overBg = rect({ x:limitX, y:RY - 6, w:recvPromptX + PROMPT_W + 8 - limitX, h:H + 12, fill:C.overflowBg, opacity:0 }, L.bg, 4);
+overBg.to(T.s4 + .8, .4, { opacity:1 });
+const limitLine = new Actor(el('line', { x1:limitX, x2:limitX, y1:92, stroke:C.red, 'stroke-width':2.5, 'stroke-dasharray':'8 6' }, L.labels), { y2:92, opacity:0 });
+limitLine.at(T.s4 + .1, { opacity:1 }).to(T.s4 + .1, .7, { y2:478 }, 'io');
+const limitText = txt('Context Limit', 0, 0, { size:17, fill:C.red, anchor:'middle', attrs:{ transform:`translate(${limitX + 16},${(RY + H + CY) / 2 + 6}) rotate(90)` } });
+limitText.to(T.s4 + .6, .4, { opacity:1 });
+recv.forEach((c, g) => { if (g >= LIMIT_SLOT) c.to(T.s4 + .9 + (g - LIMIT_SLOT) * .05, .3, { fill:C.overflow }, 'lin'); });
+recvPrompt.to(T.s4 + .9 + (recv.length - LIMIT_SLOT) * .05, .3, { fill:C.overflow }, 'lin');
+const overLabel = txt('✕ exceeds context', limitX + 10, RY - 10, { size:14, weight:700, fill:C.red });
+overLabel.to(T.s4 + 1.4, .4, { opacity:1 });
+
+/* --- stage 5: CacheBack — pick colored entries, then sort by type --- */
+[...recv, recvPrompt, recvTitle, overBg, overLabel].forEach(a => a.to(T.s5, .5, { opacity:.3 }));
+for (const s of [0, 1]) senderCols[s].forEach((a, i) => { if (typeOf(s, i) === 'g') a.to(T.s5 + .1, .5, { opacity:.3 }); });
+
+const picks = [];
+for (const s of [0, 1]) {
+  SEL[s].forEach(i => picks.push({ s, i, type:'p' }));
+  for (let k = 0; k < LAT; k++) picks.push({ s, i:N + k, type:'b' });
+}
+const purples = picks.filter(p => p.type === 'p'), blues = picks.filter(p => p.type === 'b');
+const sortedX = p => p.type === 'p' ? STX + purples.indexOf(p) * P
+                                    : STX + (purples.length + blues.indexOf(p)) * P + GROUP_GAP;
+const sortT = T.s5 + 2.2;
+picks.forEach((p, j) => {
+  const c = rect({ x:colX(p.i), y:SY[p.s], w:W, h:H, fill:fillOf[p.type], opacity:0 }, L.clone);
+  c.at(T.s5 + .3, { opacity:1 }).to(T.s5 + .3, .3, { y:SY[p.s] - 8 }, 'out');               // lift out
+  c.to(T.s5 + .8 + j * .08, .8, { x:STX + j * P, y:STY });                                 // gather
+  if (p.type === 'b') {                                                                     // sort: blues dodge down, slide, come back
+    c.to(sortT, .3, { y:STY + 40 }).to(sortT + .85, .3, { y:STY });
+  }
+  c.to(sortT + .35, .45, { x:sortedX(p) });
+  p.actor = c;
+});
+txt('selected + latent only', STX, STY - 10, { size:13, fill:'#888' }).to(T.s5 + .8, .5, { opacity:1 });
+
+/* --- stage 6: write into CacheBack receiver cache --- */
+txt('CacheBack', RX, CY - 10, { size:15, weight:700 }).to(T.s6, .5, { opacity:1 });
+const perSender = SEL[0].length + LAT;
+const cbX = (p) => {
+  const m = p.type === 'p' ? SEL[p.s].indexOf(p.i) : SEL[p.s].length + (p.i - N);
+  return RX + p.s * (perSender * P + SEG) + m * P;
+};
+const cbOrder = [...picks]; // per-sender: selected positions, then latent steps
+cbOrder.forEach((p, j) => {
+  const c = rect({ x:sortedX(p), y:STY, w:W, h:H, fill:fillOf[p.type], opacity:0 }, L.clone);
+  const t0 = T.s6 + .3 + j * .07;
+  c.at(t0, { opacity:1 }).to(t0, .9, { x:cbX(p), y:CY });
+});
+const cbPromptX = RX + 2 * (perSender * P + SEG);
+rect({ x:cbPromptX + 40, y:CY, w:PROMPT_W, h:H, fill:C.teal, opacity:0 }, L.clone).to(T.s6 + 1.5, .7, { x:cbPromptX, opacity:1 }, 'out');
+txt('✓ fits', cbPromptX + PROMPT_W + 14, CY + H / 2 + 5, { size:15, weight:700, fill:C.green }).to(T.s6 + 2.3, .4, { opacity:1 });
+
+/* --- stage 7: purple entries compress to token IDs --- */
+picks.forEach((p, j) => {
+  const c = rect({ x:sortedX(p), y:STY, w:W, h:H, fill:fillOf[p.type], opacity:0 }, L.clone);
+  const t0 = T.s7 + .3 + j * .08;
+  c.at(t0, { opacity:1 });
+  if (p.type === 'p') c.to(t0, .9, { y:TY + H / 2 - 4, h:8 });
+  else c.to(t0, .9, { y:TY });
+});
+txt('Token IDs', STX + (purples.length * P - (P - W)) / 2, TY + H / 2 - 12, { size:14, weight:600, fill:C.purpleText, anchor:'middle' })
+  .to(T.s7 + 1.6, .4, { opacity:1 });
+txt('+prefill', STX + purples.length * P + GROUP_GAP + (blues.length * P - (P - W)) / 2, TY + H + 20, { size:14, weight:600, fill:C.purpleText, anchor:'middle' })
+  .to(T.s7 + 2.0, .4, { opacity:1 });
+
+/* --- legend (always visible) --- */
+{
+  const ly = 524, items = [
+    { x:130, fill:C.purple, label:'Selected for receiver query q', color:C.purpleText },
+    { x:385, fill:C.gray,   label:'Unselected positions', color:'#888' },
+    { x:580, fill:C.blue,   label:'Latent steps', color:C.blueText },
+    { x:730, fill:C.teal,   label:'Receiver prompt', color:C.tealText },
+  ];
+  for (const it of items) {
+    el('rect', { x:it.x, y:ly - 13, width:16, height:16, rx:2, fill:it.fill }, svg);
+    const t = el('text', { x:it.x + 24, y:ly, 'font-size':14, fill:it.color }, svg); t.textContent = it.label;
+  }
+  el('line', { x1:905, y1:ly - 5, x2:935, y2:ly - 5, stroke:C.red, 'stroke-width':2.5, 'stroke-dasharray':'6 4' }, svg);
+  const t = el('text', { x:943, y:ly, 'font-size':14, fill:C.red }, svg); t.textContent = 'Context limit';
+}
+actors.forEach(a => a.finalize());
+
+/* ===================== playback ===================== */
+const button = document.getElementById('animation-play');
+let t = T.end, playing = false, lastTs = null, stageIdx = -1;
+function render(time) {
+  for (const a of actors) a.eval(time);
+  let idx = 0;
+  for (let i = 0; i < STAGES.length; i++) if (time >= STAGES[i].t) idx = i;
+  if (idx !== stageIdx) {
+    stageIdx = idx;
+    document.getElementById('animation-caption').innerHTML = STAGES[idx].cap;
+  }
+}
+function pause() {
+  playing = false;
+  button.textContent = '▶';
+  button.title = t >= T.end ? 'Replay animation' : 'Play animation';
+  button.setAttribute('aria-label', button.title);
+}
+function frame(ts) {
+  if (!playing) return;
+  if (lastTs !== null) t = Math.min(T.end, t + (ts - lastTs) / 1000);
+  lastTs = ts;
+  render(t);
+  if (t >= T.end) pause();
+  else requestAnimationFrame(frame);
+}
+button.onclick = () => {
+  if (playing) { pause(); return; }
+  if (t >= T.end) t = 0;
+  playing = true;
+  lastTs = null;
+  button.textContent = 'Ⅱ';
+  button.title = 'Pause animation';
+  button.setAttribute('aria-label', button.title);
+  requestAnimationFrame(frame);
+};
+render(t);

demo/index.html

@@ -4,84 +4,24 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="light">
-  <title>CacheBack | Booking relay</title>
-  <style>
-    * { box-sizing:border-box; }
-    body { margin:0; background:#fff; color:#222; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
-    main { width:min(1320px,calc(100% - 64px)); margin:24px auto; }
-    header { font-size:18px; font-weight:650; }
-    .question { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:14px 0 22px; }
-    h1 { max-width:880px; margin:0; font-size:clamp(23px,3vw,28px); font-weight:500; letter-spacing:-.6px; line-height:1.3; }
-    h2 { margin:0; font-size:15px; font-weight:600; }
-    button,a { -webkit-tap-highlight-color:transparent; }
-    button { font:inherit; cursor:pointer; border:0; border-radius:4px; background:#222; color:#fff; padding:10px 20px; white-space:nowrap; }
-    button:disabled { cursor:default; opacity:.5; }
-    .controls { display:flex; align-items:center; gap:14px; }
-    #speed { font:inherit; font-size:13px; color:#666; border:0; background:transparent; padding:8px 2px; cursor:pointer; }
-    #clear { background:none; color:#777; padding:8px 0; font-size:13px; }
-    :focus-visible { outline:2px solid #222; outline-offset:5px; }
-    .topology,.row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
-    .topology { margin:0 0 16px; padding:0; list-style:none; }
-    .flow-label { margin:0 0 10px; color:#777; font-size:11px; }
-    .topology li { position:relative; padding:10px 14px; border:1px solid #ddd; border-radius:5px; font-size:13px; }
-    .topology li:not(:last-child)::after { content:"→"; position:absolute; right:-23px; top:50%; transform:translateY(-50%); font-size:20px; color:#777; }
-    .topology strong { display:block; }
-    .topology span { color:#777; font-size:12px; }
-    .method { margin-top:16px; }
-    .method-heading { display:flex; align-items:baseline; gap:14px; margin-bottom:12px; }
-    .time { font-size:13px; color:#666; font-variant-numeric:tabular-nums; }
-    .chunk { border-top:1px solid #ddd; padding:12px 10px 0 0; height:230px; overflow:auto; scrollbar-width:thin; white-space:pre-wrap; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
-    .chunk::before { display:none; content:attr(data-agent); font:600 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space:normal; margin-bottom:12px; }
-    .source { font-family:Georgia,"Times New Roman",serif; font-size:13px; }
-    .answer { font-size:13px; }
-    .answer-check { margin:14px 0 0; font-size:12px; font-weight:600; }
-    strong { font-weight:600; }
-    mark { color:inherit; background:linear-gradient(#bde8e3,#bde8e3) left/100% 100% no-repeat; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
-    .revealing mark { animation:highlight .18s ease-out both; }
-    @keyframes highlight { from { background-size:0% 100%; } to { background-size:100% 100%; } }
-    footer { display:flex; justify-content:space-between; gap:20px; margin-top:28px; font-size:11px; color:#777; }
-    footer p { margin:0; }
-    a { color:inherit; text-underline-offset:3px; }
-    #error { color:#8e2b1d; }
-    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
-    @media(max-width:800px) {
-      main { width:calc(100% - 32px); margin:24px auto; }
-      .question { align-items:flex-start; flex-direction:column; gap:18px; margin:24px 0; }
-      .topology { display:none; }
-      .row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
-      .chunk::before { display:block; }
-      .chunk { height:260px; }
-      footer { flex-direction:column; gap:8px; }
-    }
-    @media(max-width:520px) { .row { grid-template-columns:1fr; } }
-    .embedded header,.embedded #question { display:none; }
-    .embedded main { margin:16px auto; }
-    .embedded .question { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
-    .embedded .flow-label { display:none; }
-    .embedded .question { padding-bottom:12px; border-bottom:1px solid #ddd; }
-    .embedded .topology { display:flex; flex:1; min-width:0; gap:22px; margin:0; }
-    .embedded .topology li { display:flex; align-items:center; gap:6px; flex:1; min-width:0; padding:0; border:0; }
-    .embedded .topology strong { white-space:nowrap; font-size:12px; }
-    .embedded .topology span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
-    .embedded .topology li:not(:last-child)::after { right:-17px; font-size:15px; }
-    .embedded .controls { flex-shrink:0; gap:10px; }
-    @media(max-width:800px) {
-      .embedded .topology span { display:none; }
-      .embedded .topology { gap:16px; }
-      .embedded .topology li:not(:last-child)::after { right:-12px; }
-      .embedded .topology strong { font-size:10px; }
-      .embedded .controls { gap:5px; }
-      .embedded button { padding:8px 10px; }
-    }
-    @media(min-width:801px) { .embedded .chunk { height:260px; } }
-    @media(prefers-reduced-motion:reduce) { .revealing mark { animation:none; } }
-  </style>
+  <title>CacheBack | Multi-hop document Q&amp;A</title>
+  <link rel="stylesheet" href="replay.css?v=selection-1">
+  <script src="replay.js?v=selection-1" defer></script>
 </head>
 <body>
   <main>
-    <header>CacheBack</header>
-    <section class="question" aria-label="Recorded question">
-      <h1 id="question">Where should Maya collect her pass on Friday, and what ID should she bring?</h1>
+    <header>CacheBack · Multi-hop document Q&amp;A</header>
+    <h1 id="question">Where should Maya collect her pass on Friday, and what ID should she bring?</h1>
+    <p class="standalone-guide">In multi-agent question answering, a large document collection can be split across agents, each with its own context. Answering a question requires combining information across those contexts.</p>
+    <p class="standalone-guide">With text communication, agents write messages summarising what they read. CacheBack lets them pass latent thoughts together with a subset of internal state selected for what the next agent needs. This example shows selected-state handoffs: three agents read separate documents in sequence, and a fourth agent produces the final answer.</p>
+    <p class="standalone-guide">The top row shows each agent’s input document: a booking confirmation, a location-change notice, then an ID policy. Agents 2 and 3 also receive the previous agent’s handoff; Agent 4 answers from the final handoff alone. The bottom row shows the messages generated by the text agents.</p>
+    <div class="relay-bar">
+      <ol class="topology" aria-label="Agent topology">
+        <li><strong>1</strong><span>Booking reference</span></li>
+        <li><strong>2</strong><span>Collection desk</span></li>
+        <li><strong>3</strong><span>Required ID</span></li>
+        <li><strong>4</strong><span>Final answer</span></li>
+      </ol>
       <div class="controls">
         <select id="speed" aria-label="Playback speed" disabled>
           <option value="1">1×</option>
@@ -89,191 +29,31 @@
           <option value="4">4×</option>
         </select>
         <button id="clear" type="button" hidden>Clear</button>
-        <button id="play" type="button" disabled>Run</button>
+        <button id="play" type="button" disabled>Run <span aria-hidden="true">▶</span></button>
       </div>
-    </section>
+    </div>
     <p id="error" role="alert" hidden></p>
     <div class="flow" aria-label="Four-agent relay">
-      <p class="flow-label">Chain of agents</p>
-      <ol class="topology" aria-label="Agent topology">
-        <li><strong>Agent 1</strong><span>booking-confirmation.txt</span></li>
-        <li><strong>Agent 2</strong><span>friday-desk-changes.txt</span></li>
-        <li><strong>Agent 3</strong><span>collection-id-rules.txt</span></li>
-        <li><strong>Agent 4</strong><span>Final answer</span></li>
-      </ol>
       <section class="method" aria-labelledby="rclc-title">
-        <div class="method-heading"><h2 id="rclc-title">CacheBack</h2><span class="time" id="rclc-time"></span></div>
+        <div class="method-heading">
+          <div class="method-name"><h2 id="rclc-title">CacheBack</h2><span class="channel-label">Select &amp; pass internal state</span></div>
+          <div class="run-status"><span class="activity" id="rclc-activity">Ready</span><span class="time" id="rclc-time">0.00 s</span></div>
+        </div>
         <div class="row" id="rclc-row"></div>
       </section>
       <section class="method" aria-labelledby="text-title">
-        <div class="method-heading"><h2 id="text-title">Text</h2><span class="time" id="text-time"></span></div>
+        <div class="method-heading">
+          <div class="method-name"><h2 id="text-title">Text</h2><span class="channel-label">Generate &amp; pass messages</span></div>
+          <div class="run-status"><span class="activity" id="text-activity">Ready</span><span class="time" id="text-time">0.00 s</span></div>
+        </div>
         <div class="row" id="text-row"></div>
       </section>
     </div>
     <p class="sr-only" id="status" role="status" aria-live="polite"></p>
     <footer>
-      <p><span id="run-info">Recorded replay</span> · <span id="timing-note">Estimated streaming, measured completion times.</span></p>
+      <p><span id="run-info">Recorded replay</span> · <span id="timing-note">Measured times; selection and streaming animated for playback.</span></p>
       <a href="https://github.com/agentcacheback/cacheback/tree/main/demo">Code &amp; recording</a>
     </footer>
   </main>
-  <script>
-    const $ = id => document.getElementById(id);
-    const host = window.frameElement;
-    if (host) {
-      document.body.classList.add("embedded");
-      document.querySelector(".question").prepend(document.querySelector(".topology"));
-      const main = document.querySelector("main");
-      new ResizeObserver(() => {
-        const bottomMargin = parseFloat(getComputedStyle(main).marginBottom);
-        host.style.height = `${Math.ceil(main.offsetTop + main.offsetHeight + bottomMargin) + 1}px`;
-      }).observe(main);
-    }
-    let trace, playing = false, frame;
-    const phases = {rclc:0, text:0};
-    const reviewedAnswer = 'Maya should collect her pass at **Harbour Hub** on Friday, and she should bring a **passport** as her ID.\n\n**Evidence:**\n- "Reference J7 has moved to Harbour Hub."\n- "Harbour Hub requires a passport for replacement building pass collections."';
-
-    function element(tag, text) {
-      const node = document.createElement(tag);
-      if (text !== undefined) node.textContent = text;
-      return node;
-    }
-
-    function segments(source, indices) {
-      const chars = Array.from(source.text), mask = Array(chars.length).fill(false);
-      for (const index of indices) {
-        const [start, end] = source.offsets[index];
-        for (let i = start; i < end; i++) mask[i] = true;
-      }
-      const result = [];
-      for (let start = 0; start < chars.length;) {
-        let end = start + 1;
-        while (end < chars.length && mask[end] === mask[start]) end++;
-        result.push({text:chars.slice(start, end).join(""), selected:mask[start]});
-        start = end;
-      }
-      return result;
-    }
-
-    function prose(container, text, fraction = 1) {
-      const parts = text.split(/(\*\*[^*\n]+\*\*)/g).map(part => {
-        const bold = part.startsWith("**") && part.endsWith("**");
-        return {bold, chars:Array.from(bold ? part.slice(2, -2) : part)};
-      });
-      let remaining = Math.floor(parts.reduce((n, part) => n + part.chars.length, 0) * fraction);
-      if (container.dataset.characters === String(remaining)) return;
-      container.dataset.characters = String(remaining); container.replaceChildren();
-      for (const part of parts) {
-        const chars = part.chars.slice(0, remaining); remaining -= chars.length;
-        if (chars.length) container.append(element(part.bold ? "strong" : "span", chars.join("")));
-      }
-    }
-
-    function render(method) {
-      const phase = phases[method], recorded = trace.cases[0], selected = trace.sources.map(() => []);
-      if (method === "rclc" && phase) for (const [source, token] of recorded.rclc.hops[Math.min(phase,3) - 1].origins) selected[source].push(token);
-      const row = $(`${method}-row`), scroll = [...row.children].map(node => node.scrollTop);
-      row.replaceChildren();
-      trace.sources.forEach((source, i) => {
-        const chunk = element("div"); chunk.className = "chunk";
-        const name = document.querySelectorAll(".topology li span")[i].textContent;
-        chunk.dataset.agent = `Agent ${i + 1} · ${name}`;
-        chunk.tabIndex = 0; chunk.setAttribute("aria-label", `${method === "rclc" ? "Source document" : "Text handoff"} ${i + 1}: ${name}`);
-        if (method === "rclc") {
-          chunk.classList.add("source");
-          chunk.classList.toggle("revealing", playing && phase === i + 1);
-          for (const piece of segments(source, selected[i])) chunk.append(element(piece.selected ? "mark" : "span", piece.text));
-        } else if (phase > i) {
-          const message = recorded.text.hops[i].message;
-          prose(chunk, message.text || "(empty handoff)");
-          if (message.stop === "limit") chunk.append(element("p", "Handoff reached its token limit."));
-        }
-        row.append(chunk);
-        chunk.scrollTop = method === "text" && phase === i + 1 ? chunk.scrollHeight : scroll[i] || 0;
-      });
-      const answer = element("div"); answer.className = "chunk answer";
-      answer.dataset.agent = "Agent 4 · Final answer";
-      answer.tabIndex = 0; answer.setAttribute("aria-label", `${method === "rclc" ? "CacheBack" : "Text"} final answer`);
-      if (phase === 4) {
-        prose(answer, recorded[method].answer.text || "(empty answer)");
-        if (recorded[method].answer.stop === "limit") answer.append(element("p", "Answer reached its token limit."));
-        if (method === "rclc" && recorded.question === "Where should Maya collect her pass on Friday, and what ID should she bring?" && recorded.rclc.answer.text === reviewedAnswer) {
-          const check = element("p", "✓ Harbour Hub · Passport");
-          check.className = "answer-check"; answer.append(check);
-        }
-      }
-      row.append(answer); answer.scrollTop = phase === 4 ? answer.scrollHeight : scroll[3] || 0;
-      $(`${method}-time`).textContent = phase === 4 ? `${recorded[method].seconds.toFixed(2)} s` : "";
-      $("status").textContent = `${method === "rclc" ? "CacheBack" : "Text"}: ${phase === 4 ? "final answer received." : `${phase} of 3 handoffs received.`}`;
-    }
-
-    function play() {
-      if (playing || !trace) return;
-      playing = true; $("play").disabled = $("speed").disabled = true;
-      $("clear").hidden = false;
-      const speed = Number($("speed").value), deadlines = {};
-      for (const method of ["rclc", "text"]) {
-        const run = trace.cases[0][method];
-        let elapsed = 0;
-        deadlines[method] = [...run.hops.map(hop => elapsed += hop.seconds * 1000), run.seconds * 1000];
-        phases[method] = 0; render(method);
-      }
-      let start;
-      function advance(now) {
-        start ??= now;
-        const elapsed = (now - start) * speed;
-        for (const method of ["rclc", "text"]) {
-          const phase = deadlines[method].filter(ms => elapsed >= ms).length;
-          if (phase !== phases[method]) { phases[method] = phase; render(method); }
-          if (phase < 4) {
-            $(`${method}-time`).textContent = `${(elapsed / 1000).toFixed(2)} s`;
-            if (method === "text" || phase === 3) {
-              const begin = phase ? deadlines[method][phase - 1] : 0;
-              const message = phase === 3 ? trace.cases[0][method].answer : trace.cases[0].text.hops[phase].message;
-              const chunk = $(`${method}-row`).children[phase];
-              prose(chunk, message.text, (elapsed - begin) / (deadlines[method][phase] - begin));
-              chunk.scrollTop = chunk.scrollHeight;
-            }
-          }
-        }
-        if (phases.rclc < 4 || phases.text < 4) frame = requestAnimationFrame(advance);
-        else {
-          playing = false; $("play").disabled = $("speed").disabled = false;
-          $("play").textContent = "Replay";
-        }
-      }
-      frame = requestAnimationFrame(advance);
-    }
-    $("play").addEventListener("click", play);
-    $("clear").addEventListener("click", () => {
-      cancelAnimationFrame(frame); playing = false;
-      for (const method of ["rclc", "text"]) {
-        phases[method] = 0; render(method);
-        for (const chunk of $(`${method}-row`).children) chunk.scrollTop = 0;
-      }
-      $("play").disabled = $("speed").disabled = false;
-      $("play").textContent = "Run"; $("clear").hidden = true;
-      $("play").focus();
-    });
-    $("speed").addEventListener("change", () => {
-      $("timing-note").textContent = `${$("speed").value === "1" ? "" : `Playback ${$("speed").value}×. `}Estimated streaming, measured completion times.`;
-    });
-
-    async function load() {
-      try {
-        const response = await fetch("trace-w4.json");
-        if (!response.ok) throw new Error(`Recording unavailable (${response.status}).`);
-        trace = await response.json();
-        if (trace.schema !== 2 || trace.span_size !== 4 || trace.sources.length !== 3 || !trace.cases.length) throw new Error("Expected a W=4 three-handoff recording.");
-        $("question").textContent = trace.cases[0].question;
-        const hardware = trace.run.device.startsWith("cuda") ? trace.run.gpu.replace("NVIDIA ", "") : "CPU";
-        $("run-info").textContent = `Recorded ${trace.run.model.split("/").pop()} · ${hardware} · r${trace.ratio} · W=4${trace.complete === false ? " · Partial recording" : ""}`;
-        render("rclc"); render("text"); $("play").disabled = $("speed").disabled = false;
-      } catch (error) {
-        $("error").hidden = false;
-        $("error").textContent = `${error.message} Serve this folder with python -m http.server.`;
-      }
-    }
-    load();
-  </script>
 </body>
 </html>

demo/replay.css

@@ -0,0 +1,130 @@
+* { box-sizing:border-box; }
+:root { --teal:#0f766e; --highlight:#a8e1d9; --line:#e0e8e6; --quiet:#7d8b88; }
+body { margin:0; background:#fff; color:#222c2a; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
+main { width:min(1320px,calc(100% - 64px)); margin:24px auto; }
+header { color:var(--teal); font-size:18px; font-weight:650; }
+h1 { max-width:980px; margin:16px 0 12px; font-size:clamp(23px,3vw,28px); font-weight:550; letter-spacing:-.6px; line-height:1.3; }
+h2 { margin:0; font-size:17px; font-weight:650; }
+button,a { -webkit-tap-highlight-color:transparent; }
+button { font:inherit; cursor:pointer; border:0; border-radius:8px; background:#222c2a; color:#fff; padding:10px 18px; white-space:nowrap; }
+button:hover { background:var(--teal); }
+button:disabled { cursor:default; opacity:.45; }
+button>span { margin-left:10px; font-size:11px; }
+.controls { display:flex; align-items:center; gap:14px; }
+#speed { font:inherit; font-size:13px; color:#667570; border:0; background:transparent; padding:8px 2px; cursor:pointer; }
+#clear { background:none; color:#667570; padding:8px 0; font-size:13px; }
+:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
+.standalone-guide { color:#667570; font-size:13px; margin-bottom:28px; }
+.relay-bar { display:flex; align-items:center; gap:24px; padding-bottom:16px; border-bottom:1px solid var(--line); }
+.topology { display:flex; flex:1; min-width:0; gap:25px; margin:0; padding:0; list-style:none; }
+.topology li { position:relative; display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:12px; }
+.topology strong { display:grid; place-items:center; flex-shrink:0; width:23px; height:23px; background:#f1f5f4; border-radius:50%; color:#5f706a; font-size:11px; }
+.topology span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.topology li:not(:last-child)::after { content:"→"; position:absolute; right:-19px; color:#8c9b97; font-size:16px; }
+.topology li.reached strong { background:#d5eeea; color:var(--teal); }
+.method { margin-top:22px; }
+.method-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
+.method-name,.run-status { display:flex; align-items:center; gap:12px; }
+.channel-label { font-size:12px; color:#6b7974; }
+#rclc-title { color:var(--teal); }
+.activity { display:flex; align-items:center; gap:6px; font-size:11px; color:#7d8b88; }
+.activity::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
+.activity.running::before { animation:pulse 1.2s ease-in-out infinite; }
+.activity.complete { color:var(--teal); }
+.time { min-width:78px; text-align:right; font-size:19px; line-height:1; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
+#rclc-time { color:var(--teal); }
+.row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
+.chunk { position:relative; height:320px; min-width:0; border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; }
+.source-title { display:flex; justify-content:space-between; gap:8px; margin:0 0 12px; color:#53665f; font-size:11px; font-weight:600; }
+.source-title>span { color:#90a09a; font-weight:400; white-space:nowrap; }
+.document-body,.message-body { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#c9d4d0 transparent; padding-right:10px; white-space:pre-wrap; overflow-wrap:anywhere; }
+.document-body { font:11.5px/1.85 Georgia,"Times New Roman",serif; color:#68776f; }
+mark { color:#104f47; background:var(--highlight); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
+.source.is-selecting mark { animation:highlight var(--selection-duration,.3s) ease-out both; }
+.source.is-selecting .document-body { background:linear-gradient(180deg,transparent,#eef9f6 50%,transparent) 0 -300px/100% 150px no-repeat; animation:scan var(--selection-duration,.3s) linear both; }
+.position-map { width:100%; height:13px; display:block; margin:12px 0 0; border-radius:2px; }
+.position-map rect { fill:#e7edeb; }
+.position-map rect.selected { fill:var(--teal); }
+.source.is-selecting .position-map { animation:pulse .65s ease-in-out infinite; }
+.source>.position-map { margin:0; flex-shrink:0; }
+.source>.handoff { margin-bottom:12px; }
+.handoff { display:flex; align-items:center; gap:8px; position:relative; height:29px; flex-shrink:0; color:#95a49e; font-size:10px; }
+.handoff>span { position:relative; z-index:1; background:white; padding-right:8px; }
+.handoff::after { content:"→"; position:absolute; right:-18px; color:#b3c2bc; font-size:16px; }
+.handoff-track { position:absolute; left:0; right:-13px; bottom:5px; height:1px; background:#e7eeeb; }
+.packet { position:absolute; left:0; top:-4px; display:flex; gap:2px; opacity:0; }
+.packet i { width:5px; height:9px; border-radius:1px; background:var(--teal); }
+.source.has-passed .handoff { color:var(--teal); }
+.source.has-passed .handoff::after { color:var(--teal); }
+.source.has-passed .packet { animation:pass-state 1.1s cubic-bezier(.2,.6,.3,1) both; }
+.message-body { font-size:12px; line-height:1.75; color:#56665f; }
+.message-title { color:#788980; }
+.message-card.is-writing .message-body::after { content:""; display:inline-block; height:1em; width:2px; background:#55665e; vertical-align:text-bottom; margin-left:3px; animation:cursor .8s steps(1) infinite; }
+.message-card .handoff::after { color:#9ca9a3; }
+.message-card.has-passed .handoff { color:#53665f; }
+.placeholder { color:#a4afa9; font-size:11px; line-height:1.65; white-space:normal; margin:0; }
+.waiting-state { display:flex; gap:5px; margin:24px 0 12px; }
+.waiting-state i { width:6px; height:6px; background:#e2e9e6; border-radius:50%; }
+.is-writing .waiting-state i { animation:pulse .9s ease-in-out infinite; }
+.answer { padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#f9fbfa; }
+.answer .source-title { margin-bottom:12px; }
+.answer-check { margin:0 0 12px; font-size:16px; font-weight:650; line-height:1.45; color:var(--teal); }
+.answer.complete { background:#f1f9f7; border-color:#c9e7df; }
+.answer.unresolved { background:#fcfaf6; border-color:#ece4d4; }
+.unresolved .answer-check { color:#956724; font-size:14px; }
+.answer.is-writing .source-title { color:var(--teal); }
+.answer .message-body { font-size:12px; }
+strong { font-weight:650; }
+footer { display:flex; justify-content:space-between; gap:20px; margin-top:24px; font-size:10px; color:#8a9992; }
+footer p { margin:0; }
+footer a { flex-shrink:0; }
+a { color:inherit; text-underline-offset:3px; }
+#error { color:#8e2b1d; }
+.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+.embedded header,.embedded #question,.embedded .standalone-guide { display:none; }
+.embedded main { margin:20px auto; }
+@keyframes highlight { from { background-color:transparent; color:#68776f; } to { background-color:var(--highlight); color:#104f47; } }
+@keyframes scan { to { background-position:0 400px; } }
+@keyframes pulse { 50% { opacity:.4; } }
+@keyframes cursor { 50% { opacity:0; } }
+@keyframes pass-state { 0% { left:0; opacity:0; } 15% { opacity:1; } 80% { opacity:1; } 100% { left:calc(100% - 24px); opacity:0; } }
+@media(max-width:900px) {
+  main { width:calc(100% - 36px); }
+  .relay-bar { gap:16px; }
+  .topology { gap:16px; }
+  .topology li { gap:5px; font-size:10px; }
+  .topology li:not(:last-child)::after { right:-12px; font-size:13px; }
+  .controls { gap:8px; }
+  button { padding:9px 12px; }
+  .row { gap:16px; }
+  .handoff::after { right:-13px; }
+  .handoff-track { right:-8px; }
+  .source-title>span { display:none; }
+}
+@media(max-width:680px) {
+  .relay-bar { flex-wrap:wrap; }
+  .topology { flex-basis:100%; }
+  .controls { margin-left:auto; }
+  .method-heading { align-items:flex-start; }
+  .method-name { align-items:flex-start; flex-direction:column; gap:2px; }
+  .run-status { flex-direction:column-reverse; align-items:flex-end; gap:7px; }
+  .time { font-size:18px; }
+  .row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
+  .chunk { height:280px; }
+  .chunk:nth-child(2) .handoff::after { right:0; content:"↓"; }
+  .chunk:nth-child(2) .handoff-track { right:5px; }
+  footer { flex-direction:column; gap:8px; }
+}
+@media(max-width:420px) {
+  main { width:calc(100% - 28px); }
+  .row { gap:14px; }
+  .document-body { font-size:10.5px; }
+  .message-body { font-size:11px; }
+  .channel-label { font-size:10px; }
+  .source-title { font-size:10px; }
+  .topology span { font-size:9px; }
+  .topology strong { width:18px; height:18px; font-size:9px; }
+  .answer { padding-inline:10px; }
+  .answer-check { font-size:14px; }
+}
+@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; } }

demo/replay.js

@@ -0,0 +1,232 @@
+const $ = id => document.getElementById(id);
+const host = window.frameElement;
+if (host) {
+  document.body.classList.add('embedded');
+  const main = document.querySelector('main');
+  new ResizeObserver(() => {
+    const margin = parseFloat(getComputedStyle(main).marginBottom);
+    host.style.height = `${Math.ceil(main.offsetTop + main.offsetHeight + margin) + 1}px`;
+  }).observe(main);
+}
+
+let trace, playing = false, frame;
+const phases = {rclc:0, text:0};
+const cards = {rclc:[], text:[]};
+const titles = ['Booking confirmation', 'Location-change notice', 'ID policy'];
+const question = 'Where should Maya collect her pass on Friday, and what ID should she bring?';
+const reviewedAnswer = 'Maya should collect her pass at **Harbour Hub** on Friday, and she should bring a **passport** as her ID.\n\n**Evidence:**\n- "Reference J7 has moved to Harbour Hub."\n- "Harbour Hub requires a passport for replacement building pass collections."';
+
+function element(tag, text, className) {
+  const node = document.createElement(tag);
+  if (text !== undefined) node.textContent = text;
+  if (className) node.className = className;
+  return node;
+}
+
+function segments(source, indices) {
+  const chars = Array.from(source.text), mask = Array(chars.length).fill(false);
+  for (const index of indices) {
+    const [start, end] = source.offsets[index];
+    for (let i = start; i < end; i++) mask[i] = true;
+  }
+  const result = [];
+  for (let start = 0; start < chars.length;) {
+    let end = start + 1;
+    while (end < chars.length && mask[end] === mask[start]) end++;
+    result.push({text:chars.slice(start, end).join(''), selected:mask[start]});
+    start = end;
+  }
+  return result;
+}
+
+function prose(container, text, fraction = 1) {
+  const parts = text.split(/(\*\*[^*\n]+\*\*)/g).map(part => {
+    const bold = part.startsWith('**') && part.endsWith('**');
+    return {bold, chars:Array.from(bold ? part.slice(2, -2) : part)};
+  });
+  let remaining = Math.floor(parts.reduce((n, part) => n + part.chars.length, 0) * Math.min(1, Math.max(0, fraction)));
+  if (container.dataset.characters === String(remaining)) return;
+  container.dataset.characters = String(remaining); container.replaceChildren();
+  for (const part of parts) {
+    const chars = part.chars.slice(0, remaining); remaining -= chars.length;
+    if (chars.length) container.append(element(part.bold ? 'strong' : 'span', chars.join('')));
+  }
+}
+
+function positionMap(source) {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.classList.add('position-map');
+  svg.setAttribute('viewBox', `0 0 ${source.offsets.length} 6`);
+  svg.setAttribute('preserveAspectRatio', 'none');
+  svg.setAttribute('role', 'img'); svg.setAttribute('aria-label', 'Source positions; teal positions are selected');
+  source.offsets.forEach((_, i) => {
+    const rect = document.createElementNS(svg.namespaceURI, 'rect');
+    rect.setAttribute('x', i); rect.setAttribute('y', 0);
+    rect.setAttribute('width', '.8'); rect.setAttribute('height', '6');
+    svg.append(rect);
+  });
+  return svg;
+}
+
+function makeCards(method) {
+  for (let i = 0; i < 4; i++) {
+    const answer = i === 3, source = method === 'rclc' && !answer;
+    const card = element('div', undefined, `chunk ${answer ? 'answer message-card' : source ? 'source' : 'message-card'}`);
+    card.setAttribute('aria-label', answer ? `${method === 'rclc' ? 'CacheBack' : 'Text'} final answer` : source ? `Full source document ${i + 1}: ${titles[i]}` : `Generated message from Agent ${i + 1}`);
+    const title = element('p', answer ? 'Final answer' : source ? titles[i] : `Agent ${i + 1}’s message`, 'source-title');
+    if (source) title.append(element('span', `Agent ${i + 1}`));
+    card.append(title);
+    const badge = element('p', '', 'answer-check'); badge.hidden = true;
+    if (answer) card.append(badge);
+    const body = element('div', undefined, source ? 'document-body' : 'message-body');
+    body.tabIndex = 0; card.append(body);
+    let map, handoff, label;
+    if (source) { map = positionMap(trace.sources[i]); card.append(map); }
+    if (!answer) {
+      handoff = element('div', undefined, 'handoff');
+      label = element('span', 'Waiting'); handoff.append(label);
+      const track = element('div', undefined, 'handoff-track'); track.setAttribute('aria-hidden', 'true');
+      if (source) {
+        const packet = element('div', undefined, 'packet');
+        for (let n = 0; n < 4; n++) packet.append(element('i'));
+        track.append(packet);
+      }
+      handoff.append(track); card.append(handoff);
+    }
+    if (source) card.prepend(map, handoff);
+    $(`${method}-row`).append(card);
+    cards[method].push({card, body, map, badge, label});
+  }
+}
+
+function render(method) {
+  const phase = phases[method], recorded = trace.cases[0];
+  const selected = trace.sources.map(() => []);
+  if (method === 'rclc' && (playing || phase)) {
+    // Reveal the recorded target selection during each handoff's playback interval.
+    const hop = playing && phase < 3 ? phase : Math.min(phase, 3) - 1;
+    for (const [source, token] of recorded.rclc.hops[hop].origins) selected[source].push(token);
+  }
+  cards[method].forEach(({card, body, map, badge, label}, i) => {
+    const active = playing && phase === i, passed = phase > i;
+    card.classList.toggle('is-selecting', method === 'rclc' && i < 3 && active);
+    card.classList.toggle('is-writing', active && (method === 'text' || i === 3));
+    card.classList.toggle('has-passed', passed);
+    if (method === 'rclc' && i < 3) {
+      card.style.setProperty('--selection-duration', `${recorded.rclc.hops[i].seconds / Number($('speed').value)}s`);
+      const scroll = body.scrollTop;
+      body.replaceChildren(...segments(trace.sources[i], selected[i]).map(piece => element(piece.selected ? 'mark' : 'span', piece.text)));
+      body.scrollTop = scroll;
+      const indices = new Set(selected[i]);
+      [...map.children].forEach((rect, n) => rect.classList.toggle('selected', indices.has(n)));
+      label.textContent = passed ? 'Selected state passed' : active ? 'Selecting positions' : 'Full source document';
+    } else {
+      delete body.dataset.characters;
+      if (passed) {
+        const message = i === 3 ? recorded[method].answer : recorded.text.hops[i].message;
+        prose(body, message.text || '(empty message)');
+        body.scrollTop = 0;
+      } else {
+        body.replaceChildren();
+        if (!active) {
+          const dots = element('div', undefined, 'waiting-state'); dots.setAttribute('aria-hidden', 'true');
+          for (let n = 0; n < 3; n++) dots.append(element('i'));
+          body.append(dots, element('p', i === 3 ? 'Waiting for the handoffs.' : 'Waiting to generate a message.', 'placeholder'));
+        }
+      }
+      if (label) label.textContent = passed ? 'Message passed' : active ? 'Generating message' : 'Waiting';
+    }
+    if (i === 3) {
+      const done = phase === 4, reviewed = recorded.question === question;
+      card.classList.toggle('complete', done && method === 'rclc');
+      const unresolved = done && reviewed && method === 'text' && recorded.text.answer.text.startsWith('Maya should collect her pass at the assigned desk based on her reference J7');
+      card.classList.toggle('unresolved', unresolved);
+      badge.hidden = true;
+      if (done && reviewed && method === 'rclc' && recorded.rclc.answer.text === reviewedAnswer) {
+        badge.textContent = '✓ Harbour Hub · Passport'; badge.hidden = false;
+      } else if (unresolved) {
+        badge.textContent = 'Collection desk unresolved'; badge.hidden = false;
+      }
+    }
+  });
+  const activity = $(`${method}-activity`);
+  activity.textContent = phase === 4 ? 'Finished' : playing ? phase === 3 ? 'Generating answer' : method === 'rclc' ? 'Selecting & passing' : 'Generating message' : 'Ready';
+  activity.classList.toggle('running', playing && phase < 4);
+  activity.classList.toggle('complete', phase === 4);
+  $(`${method}-time`).textContent = phase === 4 ? `${recorded[method].seconds.toFixed(2)} s` : '0.00 s';
+  if (method === 'rclc') document.querySelectorAll('.topology li').forEach((node, i) => node.classList.toggle('reached', phase > i));
+  $('status').textContent = `${method === 'rclc' ? 'CacheBack' : 'Text'}: ${phase === 4 ? 'final answer received.' : `${phase} of 3 handoffs received.`}`;
+}
+
+function reset() {
+  cancelAnimationFrame(frame); playing = false;
+  for (const method of ['rclc', 'text']) {
+    phases[method] = 0; render(method);
+    cards[method].forEach(({body}) => { body.scrollTop = 0; });
+  }
+  $('play').disabled = $('speed').disabled = false;
+  $('play').textContent = 'Run ▶'; $('clear').hidden = true;
+}
+
+function play() {
+  if (playing || !trace) return;
+  reset(); playing = true; $('play').disabled = $('speed').disabled = true;
+  $('play').textContent = 'Running';
+  $('clear').hidden = false;
+  const speed = Number($('speed').value), deadlines = {};
+  for (const method of ['rclc', 'text']) {
+    let elapsed = 0;
+    const run = trace.cases[0][method];
+    deadlines[method] = [...run.hops.map(hop => elapsed += hop.seconds * 1000), run.seconds * 1000];
+    render(method);
+  }
+  let start;
+  function advance(now) {
+    start ??= now;
+    const elapsed = (now - start) * speed;
+    for (const method of ['rclc', 'text']) {
+      const phase = deadlines[method].filter(ms => elapsed >= ms).length;
+      if (phase !== phases[method]) { phases[method] = phase; render(method); }
+      if (phase < 4) {
+        $(`${method}-time`).textContent = `${(elapsed / 1000).toFixed(2)} s`;
+        if (method === 'text' || phase === 3) {
+          const begin = phase ? deadlines[method][phase - 1] : 0;
+          const message = phase === 3 ? trace.cases[0][method].answer : trace.cases[0].text.hops[phase].message;
+          const body = cards[method][phase].body;
+          prose(body, message.text, (elapsed - begin) / (deadlines[method][phase] - begin));
+          body.scrollTop = body.scrollHeight;
+        }
+      }
+    }
+    if (phases.rclc < 4 || phases.text < 4) frame = requestAnimationFrame(advance);
+    else {
+      playing = false; $('play').disabled = $('speed').disabled = false;
+      $('play').textContent = 'Replay';
+    }
+  }
+  frame = requestAnimationFrame(advance);
+}
+
+$('play').addEventListener('click', play);
+$('clear').addEventListener('click', () => { reset(); $('play').focus(); });
+$('speed').addEventListener('change', () => {
+  $('timing-note').textContent = `${$('speed').value === '1' ? '' : `Playback ${$('speed').value}×. `}Measured times; selection and streaming animated for playback.`;
+});
+
+async function load() {
+  try {
+    const response = await fetch('trace-w4.json');
+    if (!response.ok) throw new Error(`Recording unavailable (${response.status}).`);
+    trace = await response.json();
+    if (trace.schema !== 2 || trace.span_size !== 4 || trace.sources.length !== 3 || !trace.cases.length) throw new Error('Expected a W=4 three-handoff recording.');
+    $('question').textContent = trace.cases[0].question;
+    const hardware = trace.run.device.startsWith('cuda') ? trace.run.gpu.replace('NVIDIA ', '') : 'CPU';
+    $('run-info').textContent = `Recorded ${trace.run.model.split('/').pop()} · ${hardware} · r${trace.ratio} · W=4${trace.complete === false ? ' · Partial recording' : ''}`;
+    for (const method of ['rclc', 'text']) { makeCards(method); render(method); }
+    $('play').disabled = $('speed').disabled = false;
+  } catch (error) {
+    $('error').hidden = false;
+    $('error').textContent = `${error.message} Serve this folder with python -m http.server.`;
+  }
+}
+load();

index.html

@@ -19,7 +19,9 @@
   <link rel="canonical" href="https://agentcacheback.github.io/">
   <title>Receiver-Conditioned Latent Communication gives 94% CacheBack</title>
   <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231c211e'/%3E%3Cpath d='M7 7h7v7H7zm11 0h7v7h-7zM7 18h7v7H7z' fill='%230f766e'/%3E%3Cpath d='M18 18h7v7h-7z' fill='%23fff'/%3E%3C/svg%3E">
-  <link rel="stylesheet" href="website/assets/styles.css?v=tldr-hero-2">
+  <link rel="stylesheet" href="website/assets/styles.css?v=method-order-1">
+  <link rel="stylesheet" href="demo/communication.css?v=inline-1">
+  <script type="module" src="demo/communication.js?v=inline-1"></script>
   <script type="module" src="website/assets/app.js"></script>
 </head>
 <body>
@@ -37,7 +39,7 @@
           <ul aria-label="Authors"><li>Maximillian Rossi</li><li>Prajwal Raghunath</li><li>Haoqing Xuan</li><li>Yusen Zhang</li><li>Eugene Wu</li></ul>
           <p class="affiliations"><a href="https://daplab.cs.columbia.edu/"><img src="https://daplab.cs.columbia.edu/files/images/daplab_logo_horiz.png" width="1508" height="331" alt="DAP Lab"></a><span>Columbia University</span></p>
         </div>
-        <div class="tldr"><p><b>TLDR;</b> Agents can share <strong>internal model state</strong> instead of generating text messages. Sending all of it, however, overwhelms the receiver.</p><p><strong>The receiver asks for what it needs.</strong> CacheBack uses attention to that request to select which state gets sent. Simple, robust, and <strong>training-free.</strong></p><p>The title’s 94% refers to removing 93.75% of sender positions at 16× compression.</p></div>
+        <div class="tldr"><p><b>TLDR;</b> Agents can share <strong>internal model state</strong> instead of generating text messages. Sending all of it, however, overwhelms the receiver.</p><p><strong>The receiver asks for what it needs.</strong> CacheBack uses attention to that request to select which state gets sent. Simple, robust, and <strong>training-free.</strong></p><p>At 16× compression, CacheBack passes on just 6.25% of sender positions.</p></div>
         <nav class="resource-links" aria-label="Project resources">
           <a href="https://arxiv.org/pdf/2609.32046">Paper <span>PDF</span></a>
           <a href="https://github.com/agentcacheback/cacheback">Code</a>
@@ -47,62 +49,73 @@
         </nav>
       </div>
       <aside class="hero-results" aria-labelledby="hero-results-title">
-        <h2 id="hero-results-title" class="eyebrow">FANOUTQA</h2><p class="visual-note">Three senders read different Wikipedia pages; one receiver combines their messages to answer a question. Each row compares same-size models: higher accuracy and lower time are better. pp = percentage points.</p>
+        <h2 id="hero-results-title" class="eyebrow">FANOUTQA</h2><p class="visual-note">FanOutQA asks agents to combine evidence across documents. Each row compares same-size models: higher accuracy and lower time are better. pp = percentage points.</p>
       <figure id="result-summary" class="comparison-plot" aria-labelledby="hero-results-title">
         <div class="plot-legend"><span><i></i>Text · same-size senders</span><span class="rclc-emphasis"><i></i>CacheBack</span></div>
         <div class="paired-metrics chart-heading"><div><strong>Strict accuracy (%) ↑</strong></div><div><strong>Median time (s) ↓</strong></div></div>
-        <div class="model-row" data-model="qwen"><div class="model-heading paired-metrics"><div class="model-label"><h3>Qwen 3 <small>8B</small></h3><strong class="accuracy-gain">+14.7<abbr title="percentage points">pp</abbr></strong></div></div><div class="paired-metrics"><div class="paired-bars"><div class="bar-row" role="img" aria-label="Text: 40.7%"><div class="bar-track"><i style="width:40.6700%"></i></div><b>40.7%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 55.3%"><div class="bar-track"><i style="width:55.3300%"></i></div><b>55.3%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:11.9938%"><strong class="speedup">3.2× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 612 s"><div class="bar-track"><i style="width:38.2437%"></i></div><b>612 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 192 s"><div class="bar-track"><i style="width:11.9938%"></i></div><b>192 s</b></div></div></div></div>
-        <div class="model-row" data-model="nemotron"><div class="model-heading paired-metrics"><div class="model-label"><h3>Nemotron <small>12B</small></h3><strong class="accuracy-gain">+11.3<abbr title="percentage points">pp</abbr></strong></div></div><div class="paired-metrics"><div class="paired-bars"><div class="bar-row" role="img" aria-label="Text: 38.7%"><div class="bar-track"><i style="width:38.6667%"></i></div><b>38.7%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 50.0%"><div class="bar-track"><i style="width:50.0000%"></i></div><b>50.0%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:6.3516%"><strong class="speedup">1.3× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 131 s"><div class="bar-track"><i style="width:8.2023%"></i></div><b>131 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 102 s"><div class="bar-track"><i style="width:6.3516%"></i></div><b>102 s</b></div></div></div></div>
-        <div class="model-row" data-model="gemma"><div class="model-heading paired-metrics"><div class="model-label"><h3>Gemma 4 <small>12B</small></h3><strong class="accuracy-gain">+7.3<abbr title="percentage points">pp</abbr></strong></div></div><div class="paired-metrics"><div class="paired-bars"><div class="bar-row" role="img" aria-label="Text: 52.0%"><div class="bar-track"><i style="width:52.0000%"></i></div><b>52.0%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 59.3%"><div class="bar-track"><i style="width:59.3300%"></i></div><b>59.3%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:12.5812%"><strong class="speedup">3× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 603 s"><div class="bar-track"><i style="width:37.6938%"></i></div><b>603 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 201 s"><div class="bar-track"><i style="width:12.5812%"></i></div><b>201 s</b></div></div></div></div>
-        <div class="model-row" data-model="ministral"><div class="model-heading paired-metrics"><div class="model-label"><h3>Ministral 3 <small>14B</small></h3><strong class="accuracy-gain">+20.7<abbr title="percentage points">pp</abbr></strong></div></div><div class="paired-metrics"><div class="paired-bars"><div class="bar-row" role="img" aria-label="Text: 38.7%"><div class="bar-track"><i style="width:38.6700%"></i></div><b>38.7%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 59.3%"><div class="bar-track"><i style="width:59.3300%"></i></div><b>59.3%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:12.0813%"><strong class="speedup">8× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 1,537 s"><div class="bar-track"><i style="width:96.0563%"></i></div><b>1,537 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 193 s"><div class="bar-track"><i style="width:12.0813%"></i></div><b>193 s</b></div></div></div></div>
+        <div class="model-row" data-model="qwen"><div class="model-heading paired-metrics"><div class="model-label"><h3>Qwen 3 <small>8B</small></h3></div></div><div class="paired-metrics"><div class="paired-bars accuracy-bars"><div class="accuracy-guide" style="--bar-end:55.3300%"><span class="gain-bracket" aria-hidden="true"></span><strong class="accuracy-gain">+14.7<abbr title="percentage points">pp</abbr></strong></div><div class="bar-row" role="img" aria-label="Text: 40.7%"><div class="bar-track"><i style="width:40.6700%"></i></div><b>40.7%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 55.3%"><div class="bar-track"><i style="width:55.3300%"></i></div><b>55.3%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:11.9938%"><strong class="speedup">3.2× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 612 s"><div class="bar-track"><i style="width:38.2437%"></i></div><b>612 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 192 s"><div class="bar-track"><i style="width:11.9938%"></i></div><b>192 s</b></div></div></div></div>
+        <div class="model-row" data-model="nemotron"><div class="model-heading paired-metrics"><div class="model-label"><h3>Nemotron <small>12B</small></h3></div></div><div class="paired-metrics"><div class="paired-bars accuracy-bars"><div class="accuracy-guide" style="--bar-end:50.0000%"><span class="gain-bracket" aria-hidden="true"></span><strong class="accuracy-gain">+11.3<abbr title="percentage points">pp</abbr></strong></div><div class="bar-row" role="img" aria-label="Text: 38.7%"><div class="bar-track"><i style="width:38.6667%"></i></div><b>38.7%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 50.0%"><div class="bar-track"><i style="width:50.0000%"></i></div><b>50.0%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:6.3516%"><strong class="speedup">1.3× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 131 s"><div class="bar-track"><i style="width:8.2023%"></i></div><b>131 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 102 s"><div class="bar-track"><i style="width:6.3516%"></i></div><b>102 s</b></div></div></div></div>
+        <div class="model-row" data-model="gemma"><div class="model-heading paired-metrics"><div class="model-label"><h3>Gemma 4 <small>12B</small></h3></div></div><div class="paired-metrics"><div class="paired-bars accuracy-bars"><div class="accuracy-guide" style="--bar-end:59.3300%"><span class="gain-bracket" aria-hidden="true"></span><strong class="accuracy-gain">+7.3<abbr title="percentage points">pp</abbr></strong></div><div class="bar-row" role="img" aria-label="Text: 52.0%"><div class="bar-track"><i style="width:52.0000%"></i></div><b>52.0%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 59.3%"><div class="bar-track"><i style="width:59.3300%"></i></div><b>59.3%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:12.5812%"><strong class="speedup">3× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 603 s"><div class="bar-track"><i style="width:37.6938%"></i></div><b>603 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 201 s"><div class="bar-track"><i style="width:12.5812%"></i></div><b>201 s</b></div></div></div></div>
+        <div class="model-row" data-model="ministral"><div class="model-heading paired-metrics"><div class="model-label"><h3>Ministral 3 <small>14B</small></h3></div></div><div class="paired-metrics"><div class="paired-bars accuracy-bars"><div class="accuracy-guide" style="--bar-end:59.3300%"><span class="gain-bracket" aria-hidden="true"></span><strong class="accuracy-gain">+20.7<abbr title="percentage points">pp</abbr></strong></div><div class="bar-row" role="img" aria-label="Text: 38.7%"><div class="bar-track"><i style="width:38.6700%"></i></div><b>38.7%</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 59.3%"><div class="bar-track"><i style="width:59.3300%"></i></div><b>59.3%</b></div></div><div class="paired-bars latency-bars"><div class="speed-guide" style="--cache-end:12.0813%"><strong class="speedup">8× faster</strong></div><div class="bar-row" role="img" aria-label="Text: 1,537 s"><div class="bar-track"><i style="width:96.0563%"></i></div><b>1,537 s</b></div><div class="bar-row rclc-bar" role="img" aria-label="CacheBack: 193 s"><div class="bar-track"><i style="width:12.0813%"></i></div><b>193 s</b></div></div></div></div>
         <div class="paired-metrics chart-axes" aria-hidden="true"><div class="chart-axis"><span>0</span><span>50</span><span>100</span></div><div class="chart-axis"><span>0</span><span>800</span><span>1,600</span></div></div>
       </figure>
 
       </aside>
     </section>
-    <section id="booking-demo" class="section wrap" aria-labelledby="booking-question">
-      <div class="booking-heading"><div><p class="eyebrow">Interactive demo</p><h2 id="booking-question">Where should Maya collect her pass on Friday, and what ID should she bring?</h2></div><a class="text-link" href="demo/index.html" target="_blank" rel="noopener noreferrer">Open full window <span aria-hidden="true">↗</span></a></div>
-      <p class="visual-note">Press <strong>Run</strong> to replay two Qwen3-8B chains. Agents 1-3 each read a different document and pass a message to the next agent; Agent 4 answers. <strong>Top:</strong> CacheBack highlights source positions whose state is selected for the next agent, guided by the question. Highlights change at each handoff as inherited and new positions are selected. <strong>Bottom:</strong> text messages appear as they are generated. The last column shows each chain’s answer. Timers show recorded elapsed time; streaming is reconstructed.</p>
-      <div class="recorded-demo">
-        <div class="demo-window"><iframe id="flagship-demo" src="demo/index.html?v=fit-7" title="Recorded CacheBack and text booking relay comparison, with playback controls" loading="lazy" sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer"></iframe></div>
+    <section id="abstract" class="abstract-section wrap" aria-label="Communication overview">
+      <figure class="overview-figure">
+      <div class="communication-animation">
+        <button id="animation-play" aria-label="Play animation" title="Play animation">▶</button>
+        <svg id="communication-svg" viewBox="0 0 1180 548" role="img" aria-label="Animated comparison of full KV transfer and CacheBack"></svg>
+        <div id="animation-caption">Selected source positions can be sent as <span style="color:#6a4fb8"><b>token IDs</b></span>; latent steps must be sent as <span style="color:#3f669f"><b>continuous vectors</b></span>. The receiver prefills both to build its own state.</div>
       </div>
+
+    </figure>
     </section>
-    <section id="abstract" class="abstract-section wrap" aria-label="Communication overview">
-      <figure class="overview-figure"><a href="https://arxiv.org/pdf/2609.32046" aria-label="Read Figure 2 in the paper"><img src="website/assets/figures/communication-overview.svg" width="1240" height="510" loading="lazy" alt="Figure 2: sending every agent's full cache exceeds the receiver's context limit. CacheBack sends selected positions and latent steps, leaving room for the receiver's prompt."></a><figcaption>Figure 2. Full KV caches (stored model state) accumulate source context at the receiver and can exceed its context limit. Receiver-conditioning selects source and latent positions, leaving room for the receiver’s prompt. Token IDs represent source positions; continuous vectors represent latent steps.</figcaption></figure>
+    <section id="demo" class="demo-section" aria-labelledby="demo-title">
+      <div class="wrap">
+        <div class="demo-heading"><h2 id="demo-title">CacheBack on a coding task</h2></div>
+        <article class="recorded-demo coding-demo" id="coding-demo" aria-labelledby="coding-title">
+          <div class="demo-description"><div><p class="demo-type">36 seconds · 4K · Recorded coding task</p><h3 id="coding-title">Fixing a Django bug with seven coding agents</h3><p>Seven Qwen3-8B workers inspect the code and send information to a coordinator, which writes the Django fix. The video compares selected latent state with generated text messages. CacheBack produces the patch <strong class="rclc-emphasis">4.41× faster</strong> than with text communication on this case. Both runs make the same one-line code change and pass all 88 tests.</p></div></div>
+          <div class="demo-player"><video id="coding-video" controls playsinline preload="auto" tabindex="0" width="3840" height="2160" poster="demo/coding/cacheback-coding-poster.jpg" aria-labelledby="coding-title" aria-describedby="coding-caption">
+            <source src="demo/coding/cacheback-coding-4k.mp4" type="video/mp4">
+            <p><a href="demo/coding/cacheback-coding-4k.mp4">Watch the demo as an MP4</a>.</p>
+          </video><button class="play-demo" id="play-demo" type="button" hidden><span aria-hidden="true">▶</span> Watch the full demo</button></div>
+          <div class="demo-caption" id="coding-caption"><p><strong>One recorded case:</strong> CacheBack 25.66 s; text 113.21 s. Separate recorded runs are aligned at their start. Startup and test grading excluded. Silent video; playback speed varies. <a href="demo/coding/cacheback-coding-4k.mp4">Open in full window</a></p>
+          </div>
+        </article>
+      </div>
     </section>
     <section id="results" class="section wrap" aria-labelledby="results-title">
       <h2 id="results-title">Results</h2>
       <div class="paper-curves" id="paper-curves">
-        <div class="benchmark-setup"><div class="curves-heading"><h3>FanOutQA</h3><p id="compression-guide">Questions require combining evidence across Wikipedia pages. We split at least 120K tokens among three parallel senders; a receiver answers from their messages. Strict accuracy requires every reference-answer group. <strong>Higher is more accurate; left is faster.</strong> Each panel fixes the receiver model. Text labels give sender size; CacheBack uses same-size senders. <strong>rX retains 1/X of sender positions; r4 keeps 25%.</strong></p></div>
+        <div class="benchmark-setup"><div class="curves-heading"><h3>FanOutQA</h3><p id="compression-guide">Questions require combining evidence across Wikipedia pages. We split at least 120K tokens among three parallel senders; a receiver answers from their messages. Strict accuracy requires every reference-answer group. <strong>Higher is more accurate; left is faster.</strong> Each panel fixes the receiver model. Text labels give sender size; CacheBack uses same-size senders. <strong>4× compression retains ¼ of sender positions; 16× retains ¹⁄₁₆.</strong></p></div>
         <div class="topology-diagram parallel" role="img" aria-label="Three senders read separate Wikipedia pages in parallel. Their messages converge on one receiver, which answers."><div class="senders"><div class="agent-node"><small>Wikipedia pages A</small><strong>Sender 1</strong></div><div class="agent-node"><small>Wikipedia pages B</small><strong>Sender 2</strong></div><div class="agent-node"><small>Wikipedia pages C</small><strong>Sender 3</strong></div></div><div class="merge" aria-hidden="true"><span>messages</span></div><div class="agent-node receiver"><small>Combines 3 messages</small><strong>Receiver</strong><small>↓ Answer</small></div></div></div>
-        <div class="curve-legend" aria-label="Curve legend"><span class="rclc-emphasis">● ━ CacheBack</span><span class="text-emphasis">▲ ┄ Text · labels show sender size</span><span>× Question only</span></div>
+        <div class="curve-legend" aria-label="Curve legend"><span class="rclc-emphasis">● ━ CacheBack · labels show compression factor</span><span class="text-emphasis">▲ ┄ Text · labels show sender size</span><span>× Question only</span></div>
         <div class="curve-grid">
-          <figure><img src="website/assets/figures/fanoutqa-qwen.svg?v=sender-sizes" width="560" height="460" loading="lazy" alt="FanOutQA, Qwen 3 8B: CacheBack r4 reaches 55.3% strict accuracy at 192 seconds, compared with 40.7% at 612 seconds for same-size text; weaker settings are also plotted."><figcaption>Qwen: r4 improves accuracy and completion time over 8B text; 1.7B text is slightly faster but less accurate.</figcaption></figure>
-          <figure><img src="website/assets/figures/fanoutqa-nemotron.svg?v=sender-sizes" width="560" height="460" loading="lazy" alt="FanOutQA, Nemotron Nano 2 12B: CacheBack r8 reaches 50% accuracy near 102 seconds versus 38.7% near 131 seconds for same-size text. A smaller text sender is faster at lower accuracy."><figcaption>Nemotron: r8 improves on 12B text; 4B text is faster but less accurate.</figcaption></figure>
+          <figure><img src="website/assets/figures/fanoutqa-qwen.svg?v=compression-labels" width="560" height="460" loading="lazy" alt="FanOutQA, Qwen 3 8B: CacheBack 4× compression reaches 55.3% strict accuracy at 192 seconds, compared with 40.7% at 612 seconds for same-size text; weaker settings are also plotted."><figcaption>Qwen: 4× compression improves accuracy and completion time over 8B text; 1.7B text is slightly faster but less accurate.</figcaption></figure>
+          <figure><img src="website/assets/figures/fanoutqa-nemotron.svg?v=compression-labels" width="560" height="460" loading="lazy" alt="FanOutQA, Nemotron Nano 2 12B: CacheBack 8× compression reaches 50% accuracy near 102 seconds versus 38.7% near 131 seconds for same-size text. A smaller text sender is faster at lower accuracy."><figcaption>Nemotron: 8× compression improves on 12B text; 4B text is faster but less accurate.</figcaption></figure>
         </div>
-        <div class="chain-results" id="chain-results"><div class="benchmark-setup"><div class="curves-heading"><h3>LongBench v2 Easy</h3><p>Long-document questions test whether evidence survives repeated handoffs. We split each 100K-246K-token document into four equal parts. Each sender reads its part plus the previous message; a final receiver answers from the fourth message. Relative budgets (rX) grow with accumulated context; fixed budgets (32K, 64K) cap message positions. Axes and text-size labels follow FanOutQA.</p></div>
+        <div class="chain-results" id="chain-results"><div class="benchmark-setup"><div class="curves-heading"><h3>LongBench v2 Easy</h3><p>Long-document questions test whether evidence survives repeated handoffs. We split each 100K-246K-token document into four equal parts. Each sender reads its part plus the previous message; a final receiver answers from the fourth message. Compression factors retain a fraction of accumulated context (4× keeps ¼); fixed budgets (32K, 64K) cap message positions. Axes and text-size labels follow FanOutQA.</p></div>
         <div class="topology-diagram sequential" role="img" aria-label="Four agents read document parts in order. Each passes a message to the next. A final receiver answers from the fourth message."><div class="agent-node"><small>Document part 1</small><strong>Agent 1</strong></div><div class="agent-node"><small>Document part 2</small><strong>Agent 2</strong></div><div class="agent-node"><small>Document part 3</small><strong>Agent 3</strong></div><div class="agent-node"><small>Document part 4</small><strong>Agent 4</strong></div><div class="agent-node receiver"><small>Final message</small><strong>Receiver</strong><small>↓ Answer</small></div></div></div>
-        <div class="curve-legend" aria-label="LongBench curve legend"><span class="rclc-emphasis">● ━ CacheBack · relative budget</span><span class="fixed-emphasis">■ ━ CacheBack · fixed budget</span><span class="text-emphasis">▲ ┄ Text · labels show sender size</span><span>× Question only</span></div>
+        <div class="curve-legend" aria-label="LongBench curve legend"><span class="rclc-emphasis">● ━ CacheBack · labels show compression factor</span><span class="fixed-emphasis">■ ━ CacheBack · labels show fixed position budget</span><span class="text-emphasis">▲ ┄ Text · labels show sender size</span><span>× Question only</span></div>
         <div class="curve-grid">
-          <figure><img src="website/assets/figures/longbench-qwen.svg?v=sender-sizes" width="560" height="460" loading="lazy" alt="LongBench v2 Easy, Qwen 3 8B: both relative and fixed CacheBack budgets include settings faster and more accurate than same-size text. Stronger compression eventually lowers accuracy."><figcaption>Qwen: relative r4 gives the highest plotted accuracy; stronger compression loses accuracy.</figcaption></figure>
-          <figure><img src="website/assets/figures/longbench-nemotron.svg?v=sender-sizes" width="560" height="460" loading="lazy" alt="LongBench v2 Easy, Nemotron Nano 2 12B: CacheBack r8 reaches 48% accuracy near 133 seconds, while fixed-budget settings show a different tradeoff; smaller text senders can be faster."><figcaption>Nemotron: relative r8 beats 12B text on both axes; 4B text remains faster but less accurate.</figcaption></figure>
+          <figure><img src="website/assets/figures/longbench-qwen.svg?v=compression-labels" width="560" height="460" loading="lazy" alt="LongBench v2 Easy, Qwen 3 8B: both relative and fixed CacheBack budgets include settings faster and more accurate than same-size text. Stronger compression eventually lowers accuracy."><figcaption>Qwen: 4× compression gives the highest plotted accuracy; stronger compression loses accuracy.</figcaption></figure>
+          <figure><img src="website/assets/figures/longbench-nemotron.svg?v=compression-labels" width="560" height="460" loading="lazy" alt="LongBench v2 Easy, Nemotron Nano 2 12B: CacheBack 8× compression reaches 48% accuracy near 133 seconds, while fixed-budget settings show a different tradeoff; smaller text senders can be faster."><figcaption>Nemotron: relative 8× compression beats 12B text on both axes; 4B text remains faster but less accurate.</figcaption></figure>
         </div>
         </div>
         <p class="curve-caption">Lines join the best accuracy-time tradeoffs within each channel; faded points are dominated settings. × means the receiver gets only the question. 50 concurrent tasks on 8 H100s; accuracy averaged over three receiver draws. Completion includes queueing. <a href="https://arxiv.org/pdf/2609.32046">Full setup and results in the paper.</a></p>
       </div>
     </section>
-    <section id="demo" class="demo-section" aria-labelledby="demo-title">
-      <div class="wrap">
-        <div class="demo-heading"><h2 id="demo-title">Watch the demo</h2></div>
-        <article class="recorded-demo coding-demo" id="coding-demo" aria-labelledby="coding-title">
-          <div class="demo-description"><div><p class="demo-type">36 seconds · 4K · Recorded coding task</p><h3 id="coding-title">Fixing a Django bug with seven coding agents</h3><p>Seven Qwen3-8B workers inspect the code and send information to a coordinator, which writes the Django fix. The video compares selected latent state with generated text messages. CacheBack produces the patch <strong class="rclc-emphasis">4.41× faster</strong> than with text communication on this case. Both runs make the same one-line code change and pass all 88 tests.</p></div></div>
-          <div class="demo-player"><video id="coding-video" controls playsinline preload="auto" tabindex="0" width="3840" height="2160" poster="demo/coding/poster.jpg" aria-labelledby="coding-title" aria-describedby="coding-caption">
-            <source src="demo/coding/rclc-cacheback-4k.mp4" type="video/mp4">
-            <p><a href="demo/coding/rclc-cacheback-4k.mp4">Watch the demo as an MP4</a>.</p>
-          </video><button class="play-demo" id="play-demo" type="button" hidden><span aria-hidden="true">▶</span> Watch the full demo</button></div>
-          <div class="demo-caption" id="coding-caption"><p><strong>One recorded case:</strong> CacheBack 25.66 s; text 113.21 s. Separate recorded runs are aligned at their start. Startup and test grading excluded. Silent video; playback speed varies. <a href="demo/coding/rclc-cacheback-4k.mp4">Open in full window</a></p>
-          </div>
-        </article>
+    <section id="booking-demo" class="section wrap" aria-labelledby="booking-title">
+      <div class="booking-heading"><div><p class="eyebrow">Interactive demo · Unstructured documents</p><h2 id="booking-title">Multi-hop document Q&amp;A</h2></div><a class="text-link" href="demo/index.html" target="_blank" rel="noopener noreferrer">Open full window <span aria-hidden="true">↗</span></a></div>
+      <p class="demo-scenario">In multi-agent question answering, a large document collection can be split across agents, each with its own context. Answering a question requires combining information across those contexts.</p>
+      <p class="demo-scenario">With text communication, agents write messages summarising what they read. CacheBack lets them pass latent thoughts together with a subset of internal state selected for what the next agent needs. This example shows selected-state handoffs: three agents read separate documents in sequence, and a fourth agent produces the final answer.</p>
+      <p class="demo-scenario">The top row shows each agent’s input document: a booking confirmation, a location-change notice, then an ID policy. Agents 2 and 3 also receive the previous agent’s handoff; Agent 4 answers from the final handoff alone. The bottom row shows the messages generated by the text agents.</p>
+      <div class="question-brief"><span>Question</span><h3 id="booking-question">Where should Maya collect her pass on Friday, and what ID should she bring?</h3></div>
+      <p class="visual-note">Press <strong>Run</strong> to watch the handoffs.</p>
+      <div class="recorded-demo">
+        <div class="demo-window"><iframe id="flagship-demo" src="demo/index.html?v=selection-1" title="Multi-hop document question answering: selected internal state versus generated text messages" loading="lazy" sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer"></iframe></div>
       </div>
     </section>
     <section class="code-section" id="code" aria-labelledby="code-title"><div class="wrap code-layout"><div><h2 id="code-title">Use CacheBack</h2><p>Install <code>rclc</code>, bind your agents, and pass the receiver’s request.</p><a class="button primary" href="https://github.com/agentcacheback/cacheback">Code and documentation</a></div><div class="code-card"><div class="code-bar"><span>Python</span><button class="copy-button" data-copy="quickstart" type="button" aria-label="Copy code"><svg class="copy-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg><span class="copy-feedback" aria-hidden="true">Copied</span></button></div><pre><code id="quickstart"><span class="code-keyword">import</span> rclc

website/assets/styles.css

@@ -65,26 +65,32 @@ strong,b { font-weight:650; }
 .plot-legend span { display:flex; align-items:center; gap:7px; }
 .plot-legend i { width:16px; height:8px; background:#67726b; border-radius:2px; }
 .plot-legend .rclc-emphasis i { background:var(--rclc); }
-.paired-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
-.chart-heading { border-bottom:1px solid var(--line); padding-bottom:15px; font-size:14px; line-height:1.4; }
-.model-row { padding:14px 0; border-bottom:1px solid var(--line); }
+.paired-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
+.chart-heading { font-size:14px; line-height:1.4; }
+.chart-heading>div { border-bottom:1px solid var(--line); padding-bottom:15px; }
+.model-row { padding-top:14px; }
+.paired-bars { padding-bottom:14px; border-bottom:1px solid var(--line); }
 .model-heading { margin-bottom:8px; }
 .model-label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-width:0; }
 .accuracy-gain,.speedup { color:var(--rclc); font-size:14px; white-space:nowrap; }
 .accuracy-gain abbr { text-decoration:none; }
+.accuracy-bars { position:relative; }
+.accuracy-guide { position:absolute; inset:0 0 14px 58px; color:var(--rclc); pointer-events:none; }
+.gain-bracket { position:absolute; top:1.5px; bottom:1.5px; left:calc(var(--bar-end) + 4px); width:7px; border:1px solid currentColor; border-left:0; }
+.accuracy-guide .accuracy-gain { position:absolute; left:calc(var(--bar-end) + 17px); top:50%; transform:translateY(-50%); font-size:12px; line-height:20px; }
 .latency-bars { position:relative; }
-.speed-guide { position:absolute; inset:0 58px 0 0; color:var(--rclc); pointer-events:none; }
+.speed-guide { position:absolute; inset:0 0 0 58px; color:var(--rclc); pointer-events:none; }
 .speedup { position:absolute; left:calc(var(--cache-end) + 6px); top:25px; font-size:12px; line-height:20px; }
 .model-heading h3 { font-size:15px; font-weight:650; letter-spacing:0; }
 .model-heading small { color:var(--muted); font-size:12px; font-weight:400; }
-.bar-row { line-height:20px; display:grid; grid-template-columns:minmax(0,1fr) 50px; gap:8px; align-items:center; font-size:12px; }
+.bar-row { line-height:20px; display:grid; grid-template-columns:50px minmax(0,1fr); gap:8px; align-items:center; font-size:12px; }
 .bar-row+.bar-row { margin-top:5px; }
-.bar-row>b { text-align:right; font-variant-numeric:tabular-nums; }
-.bar-track { border-left:1px solid #b5bfb7; background:repeating-linear-gradient(to right,transparent 0 calc(50% - 1px),#dce2dc calc(50% - 1px) 50%); }
+.bar-row>b { grid-column:1; grid-row:1; text-align:right; font-variant-numeric:tabular-nums; }
+.bar-track { grid-column:2; grid-row:1; border-left:1px solid #b5bfb7; background:repeating-linear-gradient(to right,transparent 0 calc(50% - 1px),#dce2dc calc(50% - 1px) 50%); }
 .bar-track i { display:block; height:17px; background:#67726b; border-radius:0 2px 2px 0; }
 .rclc-bar { color:var(--rclc); }
 .rclc-bar i { background:var(--rclc); }
-.chart-axis { margin:8px 58px 0 0; color:var(--muted); font-size:12px; position:relative; height:20px; }
+.chart-axis { margin:8px 0 0 58px; color:var(--muted); font-size:12px; position:relative; height:20px; }
 .chart-axis span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
 .chart-axis span:nth-child(1) { left:0; }
 .chart-axis span:nth-child(2) { left:50%; }
@@ -92,7 +98,7 @@ strong,b { font-weight:650; }
 
 .abstract-section { display:grid; grid-template-columns:1fr; align-items:center; gap:48px; padding-block:64px; border-top:1px solid var(--line); }
 .tldr { font-size:16px; line-height:1.65; }
-.abstract-section .overview-figure { max-width:900px; margin-inline:auto; }
+.abstract-section .overview-figure { width:100%; max-width:900px; margin-inline:auto; }
 .overview-figure img { width:100%; height:auto; display:block; }
 .overview-figure figcaption { color:var(--muted); font-size:12px; margin-top:18px; }
 .tldr p+p { margin-top:12px; }
@@ -261,3 +267,11 @@ html { scroll-behavior:auto; }
 @media(max-width:900px) { .benchmark-setup { grid-template-columns:1fr; gap:20px; } }
 
 @media(max-width:600px) { .benchmark-setup .sequential { gap:25px; } }
+
+.overview-figure .communication-animation { background:transparent; }
+
+.demo-scenario { color:var(--muted); font-size:16px; max-width:75ch; margin-bottom:22px; }
+.question-brief { display:flex; align-items:baseline; gap:20px; padding:18px 0; border-block:1px solid var(--line); margin-bottom:17px; }
+.question-brief>span { color:var(--rclc); font-size:12px; font-weight:650; }
+.question-brief h3 { font-size:21px; line-height:1.4; letter-spacing:-.3px; }
+@media(max-width:520px) { .paired-metrics { gap:36px; } .accuracy-guide .accuracy-gain,.speedup { font-size:10px; } .question-brief { display:block; } .question-brief h3 { font-size:19px; margin-top:6px; } }

website/check.mjs

@@ -16,15 +16,15 @@ const ids = [...html.matchAll(/\bid="([^"]+)"/g)].map((match) => match[1]);
 assert.equal(new Set(ids).size, ids.length, 'Duplicate HTML IDs');
 assert.equal((html.match(/<h1\b/g) || []).length, 1, 'One page heading');
 assert.match(html, /<h1 id="hero-title">Receiver-Conditioned Latent Communication gives/);
-assert.equal((html.match(/<figcaption>/g) || []).length, 5, 'Explain each paper figure');
+assert.equal((html.match(/<figcaption>/g) || []).length, 4, 'Explain each static paper figure');
 assert.match(html, /<html lang="en">/);
 assert.match(html, /name="viewport"/);
 assert.match(html, /<title>Receiver-Conditioned Latent Communication gives 94% CacheBack<\/title>/);
-const sectionOrder = ['result-summary', 'booking-demo', 'abstract', 'results', 'demo', 'code', 'paper'];
+const sectionOrder = ['result-summary', 'abstract', 'demo', 'results', 'booking-demo', 'code', 'paper'];
 sectionOrder.slice(1).forEach((id, i) => {
   assert.ok(html.indexOf(`id="${sectionOrder[i]}"`) < html.indexOf(`id="${id}"`), `Section order: ${id}`);
 });
-assert.equal((html.match(/<img src="website\/assets\/figures\//g) || []).length, 5);
+assert.equal((html.match(/<img src="website\/assets\/figures\//g) || []).length, 4);
 
 for (const [, url] of html.matchAll(/(?:href|src|poster)="([^"]+)"/g)) {
   if (/^(https:|data:)/.test(url)) continue;
@@ -68,23 +68,25 @@ assert.match(html, /loading="lazy" sandbox="allow-scripts allow-same-origin"/);
 assert.match(css, /prefers-reduced-motion:reduce/);
 assert.match(css, /:focus-visible/);
 assert.match(html, /id="bibtex"/);
-assert.match(html, /<iframe[^>]+src="demo\/index\.html\?v=fit-7"/);
-assert.match(readFileSync(resolve(project, 'demo/index.html'), 'utf8'), /fetch\("trace-w4\.json"\)/);
+assert.match(html, /<iframe[^>]+src="demo\/index\.html\?v=selection-1"/);
+const replayScript = readFileSync(resolve(project, 'demo/replay.js'), 'utf8');
+assert.match(replayScript, /fetch\('trace-w4\.json'\)/);
 // The booking record is rendered by the embedded replay, not duplicated in the page.
 const replay = readFileSync(resolve(project, 'demo/index.html'), 'utf8');
-assert.match(replay, /trace-w4\.json/);
-assert.match(html, /aria-labelledby="booking-question"/);
+assert.match(replay, /src="replay.js\?v=selection-1"/);
+new Function(replayScript);
+assert.match(html, /aria-labelledby="booking-title"/);
 assert.doesNotMatch(html, /Recorded model run|demo-outcomes|hero-description|class="contribution"/);
 for (const label of ['Copy code', 'Copy citation']) assert.ok(html.includes(`aria-label="${label}"`));
 
 const coding = JSON.parse(readFileSync(resolve(project, 'demo/coding/evidence.json'), 'utf8')).arms;
-assert.ok(html.indexOf('id="booking-demo"') < html.indexOf('id="coding-demo"'), 'Booking replay precedes coding video');
+assert.ok(html.indexOf('id="coding-demo"') < html.indexOf('id="booking-demo"'), 'Coding video precedes document replay');
 const video = html.match(/<video\b[^>]*>[\s\S]*?<\/video>/)[0];
 assert.match(video, /controls playsinline preload="auto"/);
 assert.doesNotMatch(video, /autoplay/);
-assert.match(video, /src="demo\/coding\/rclc-cacheback-4k.mp4"/);
-assert.match(video, /poster="demo\/coding\/poster.jpg"/);
-assert.equal(readFileSync(resolve(project, 'demo/coding/rclc-cacheback-4k.mp4')).toString('ascii', 4, 8), 'ftyp', 'Real MP4, not a Git LFS pointer');
+assert.match(video, /src="demo\/coding\/cacheback-coding-4k.mp4"/);
+assert.match(video, /poster="demo\/coding\/cacheback-coding-poster.jpg"/);
+assert.equal(readFileSync(resolve(project, 'demo/coding/cacheback-coding-4k.mp4')).toString('ascii', 4, 8), 'ftyp', 'Real MP4, not a Git LFS pointer');
 assert.ok(html.includes(`${(coding.text.seconds / coding.latent.seconds).toFixed(2)}× faster`));
 assert.ok(html.includes(`CacheBack ${coding.latent.seconds.toFixed(2)} s; text ${coding.text.seconds.toFixed(2)} s`));
 assert.equal(coding.latent.patch, coding.text.patch);
@@ -104,3 +106,15 @@ for (const name of readdirSync(dist, { recursive: true })) {
 }
 assert.ok(bytes < 100000, 'Keep first-party static assets below 100 KB');
 console.log(`Website checks passed: anchors, assets, benchmark points, accessibility hooks; ${bytes} bytes, ${gzipSync(js).length} bytes gzipped JS.`);
+
+const animation = readFileSync(resolve(project, 'demo/communication.html'), 'utf8');
+const animationScript = readFileSync(resolve(project, 'demo/communication.js'), 'utf8');
+assert.doesNotMatch(html, /<iframe[^>]*communication/, 'Method animation participates in page layout');
+for (const markup of [html, animation]) {
+  assert.equal((markup.match(/<svg id="communication-svg"/g) || []).length, 1);
+  assert.equal((markup.match(/id="animation-play"/g) || []).length, 1, 'One animation control');
+  assert.match(markup, /src="(?:demo\/)?communication.js\?v=inline-1"/);
+}
+assert.doesNotMatch(animationScript, /frameElement|ResizeObserver/, 'No iframe height synchronisation');
+assert.doesNotMatch(animationScript, /setTimeout\(play/, 'Playback starts on user action');
+new Function(animationScript);