teleopSample: step annotations + timeline on the older pages, autoplay on ours

enhance.js adds to the 14 existing episode pages what the Faber U pick-and-place
pages have: an instruction / object / target / scene header, a segmented step
timeline over the scrubber, and a panel with the current step's annotation and
measured signals (end-effector travel, height change, speed, gripper). Wording
switched from "spans" to "steps" throughout, including the sidebar. The eight
pick-and-place pages now autoplay and loop like the older ones.

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

teleopSample/drink_ep0.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (3) · instruction segments</div>
+    <div class="spans-head">annotated steps (3) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>

teleopSample/drink_ep1.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (3) · instruction segments</div>
+    <div class="spans-head">annotated steps (3) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>

teleopSample/enhance.js

@@ -0,0 +1,167 @@
+/* Brings the older sample pages up to the layout of the Faber U pick-and-place pages:
+   an instruction / object / target / scene header, a segmented step timeline above the
+   scrubber, and a panel showing the current step's annotation and measured signals.
+   Also switches the wording from "spans" to "steps".
+   Loaded with <script src="enhance.js"> (or ../enhance.js) — the page itself is untouched. */
+(function () {
+  const J = id => { const e = document.getElementById(id); return e ? JSON.parse(e.textContent) : null; };
+  const S = J('series'), STEPS = J('spans') || [], META = J('meta');
+  if (!S || !STEPS.length) return;
+
+  const slug = (META && META.slug) || (location.pathname.match(/\/(ep\d+)\//) || [])[1] || '';
+  const family = slug.replace(/_?ep\d+$/, '') || 'legacy';
+  // object / target / scene, written from each recording's own description
+  const TASK = {
+    mem:    { object: 'DDR memory module', target: 'motherboard slot',
+              scene: 'workbench with an open motherboard, dual-arm grippers' },
+    drink:  { object: 'bottled green beverage', target: 'coaster on the countertop',
+              scene: 'countertop with the drink and a coaster set apart' },
+    sort:   { object: 'packed garment bags (pink / white / beige / green)',
+              target: 'left side of the table', scene: 'table with a material bin of packed garment bags' },
+    wipe:   { object: 'sponge', target: 'stains on the tabletop', scene: 'tabletop with stains' },
+    legacy: { object: 'water bottle', target: 'basket',
+              scene: 'tabletop with a water bottle and a basket' },
+  }[family] || {};
+  const instruction = (META && META.high_level_instruction) ||
+    (document.querySelector('header h1') || {}).textContent || '';
+  const sceneLine = (document.querySelector('.hilevel') || {}).textContent || '';
+  const scene = (sceneLine.replace(/^\s*scene\s*/i, '').trim()) || TASK.scene || '';
+
+  const COLORS = ["#8a8f98", "#4f8ff7", "#41c76b", "#e0a53e", "#b46fe0", "#e0616f", "#e08f5f", "#5fc9e0"];
+  const col = i => COLORS[i % COLORS.length];
+  const DUR = S.t ? S.t[S.n - 1] : (S.n - 1) / S.fps;
+  const END = S.end || S.end_pos;                       // [n][6] = left xyz, right xyz
+  const frameAt = t => Math.max(0, Math.min(S.n - 1, Math.round(t * S.fps)));
+
+  // ---------- styles
+  const css = document.createElement('style');
+  css.textContent = `
+.x-instr{margin:10px 22px 0;padding:11px 15px;background:#12151c;border:1px solid #232733;border-radius:8px;font-size:13px;line-height:1.65}
+.x-instr .k{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#9aa1ad;margin-right:8px}
+.x-instr .obj{color:#7fb2ff}.x-instr .tgt{color:#7fe0a0}
+.x-tlwrap{margin:12px 22px 0;padding:9px 14px;background:#12151c;border:1px solid #232733;border-radius:8px}
+.x-tl{position:relative;display:flex;height:26px;border-radius:5px;overflow:hidden;cursor:pointer}
+.x-tl .seg{position:relative;opacity:.85;transition:opacity .12s}
+.x-tl .seg.on{opacity:1;box-shadow:inset 0 0 0 2px #fff}
+.x-tl .seg span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#0b0d12;font-weight:700}
+.x-tl .cur{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none}
+.x-tlnums{display:flex;justify-content:space-between;font-size:10.5px;color:#6b7686;margin-top:4px;font-variant-numeric:tabular-nums}
+.x-annot{margin:12px 22px 0;padding:14px 18px;background:#12151c;border:1px solid #232733;border-radius:8px}
+.x-annot .t{font-size:11px;letter-spacing:.04em;color:#9aa1ad;text-transform:uppercase;margin-bottom:10px}
+.x-annot h3{margin:0 0 2px;font-size:16px}
+.x-annot h3 .tok{font-size:11.5px;color:#6f92c8;font-family:ui-monospace,monospace;margin-left:8px}
+.x-annot .when{font-size:12px;color:#8890a0;font-variant-numeric:tabular-nums;margin-bottom:8px}
+.x-annot p{margin:0 0 6px;line-height:1.6;font-size:13.5px;color:#dfe4ec}
+.x-sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:7px 26px;margin-top:10px}
+.x-sg{display:flex;justify-content:space-between;border-bottom:1px dashed #232733;padding-bottom:3px;font-size:12.5px}
+.x-sg .k{color:#9aa1ad}.x-sg .v{font-variant-numeric:tabular-nums}`;
+  document.head.appendChild(css);
+
+  // ---------- instruction header
+  const head = document.querySelector('header');
+  const instr = document.createElement('div');
+  instr.className = 'x-instr';
+  instr.innerHTML =
+    `<div><span class="k">instruction</span>${instruction}</div>` +
+    `<div style="margin-top:6px"><span class="k">object</span><span class="obj">${TASK.object || '—'}</span>` +
+    `<span class="k" style="margin-left:14px">target</span><span class="tgt">${TASK.target || '—'}</span>` +
+    `<span class="k" style="margin-left:14px">scene</span>${scene}</div>`;
+  head.parentNode.insertBefore(instr, head.nextSibling);
+
+  // ---------- step timeline over the scrubber
+  const controls = document.querySelector('.panel.controls');
+  const tlw = document.createElement('div');
+  tlw.className = 'x-tlwrap';
+  tlw.innerHTML = `<div class="x-tl" id="xTl"><div class="cur" id="xCur"></div></div>` +
+    `<div class="x-tlnums"><span>0.00s</span><span>${DUR.toFixed(2)}s</span></div>`;
+  controls.parentNode.insertBefore(tlw, controls);
+  const tl = tlw.querySelector('#xTl'), cur = tlw.querySelector('#xCur');
+  const videos = [...document.querySelectorAll('video')];
+  const master = videos[0];
+  const seek = t => videos.forEach(v => { try { v.currentTime = t; } catch (e) {} });
+  const num = (st, i) => (st.id != null ? st.id : i + 1);   // keep the page's own numbering
+  STEPS.forEach((st, i) => {
+    const sg = document.createElement('div');
+    sg.className = 'seg';
+    sg.style.background = col(i);
+    sg.style.width = (100 * (st.end_s - st.start_s) / DUR) + '%';
+    sg.title = `${num(st, i)}. ${st.title}  ${st.start_s.toFixed(2)}-${st.end_s.toFixed(2)}s`;
+    sg.innerHTML = `<span>${num(st, i)}</span>`;
+    sg.onclick = e => { e.stopPropagation(); seek(st.start_s + 0.01); };
+    tl.insertBefore(sg, cur);
+  });
+  tl.onclick = e => { const r = tl.getBoundingClientRect(); seek((e.clientX - r.left) / r.width * DUR); };
+
+  // ---------- current-step annotation
+  const an = document.createElement('div');
+  an.className = 'x-annot';
+  an.innerHTML = `<div class="t">step annotation · current step</div><h3 id="xLbl">–</h3>` +
+    `<div class="when" id="xWhen"></div><p id="xDesc"></p><div class="x-sgrid" id="xSig"></div>`;
+  controls.parentNode.insertBefore(an, controls.nextSibling);
+
+  const stat = (a, b) => {                       // measurements over a frame range
+    a = Math.max(0, a); b = Math.min(S.n - 1, b);
+    const arm = (o) => {
+      let path = 0, dz = 0, vmax = 0;
+      for (let i = a + 1; i <= b; i++) {
+        const p = END[i], q = END[i - 1];
+        const d = Math.hypot(p[o] - q[o], p[o + 1] - q[o + 1], p[o + 2] - q[o + 2]);
+        path += d; vmax = Math.max(vmax, d * S.fps);
+      }
+      dz = END[b][o + 2] - END[a][o + 2];
+      const dxy = Math.hypot(END[b][o] - END[a][o], END[b][o + 1] - END[a][o + 1]);
+      return { path, dz, dxy, vmax, vmean: path / Math.max(1e-6, (b - a) / S.fps) };
+    };
+    const L = arm(0), R = arm(3);
+    const act = L.path >= R.path ? L : R, side = L.path >= R.path ? 'left' : 'right';
+    return { act, side, L, R };
+  };
+
+  let curIdx = -1;
+  function render(i, t) {
+    const st = STEPS[i];
+    if (i !== curIdx) {
+      curIdx = i;
+      const a = frameAt(st.start_s), b = frameAt(st.end_s), m = stat(a, b);
+      document.getElementById('xLbl').innerHTML =
+        `${num(st, i)}. ${st.title}` + (st.token ? `<span class="tok">${st.token}</span>` : '');
+      document.getElementById('xWhen').textContent =
+        `${st.start_s.toFixed(2)}s – ${st.end_s.toFixed(2)}s · ${(st.end_s - st.start_s).toFixed(2)}s · ` +
+        `frames ${a}–${b} (${b - a + 1})` +
+        (st.success_s != null ? ` · success at ${st.success_s.toFixed(2)}s` : '');
+      const seg = META && META.instruction_segments &&
+        META.instruction_segments.find(x => Math.abs(x.start_frame_index / S.fps - st.start_s) < 0.2);
+      document.getElementById('xDesc').textContent = seg ? seg.instruction :
+        `${m.side} arm · ${m.act.path.toFixed(3)} m of end-effector travel in ` +
+        `${(st.end_s - st.start_s).toFixed(2)}s (mean ${m.act.vmean.toFixed(2)}, peak ` +
+        `${m.act.vmax.toFixed(2)} m/s), height change ${m.act.dz >= 0 ? '+' : ''}${m.act.dz.toFixed(2)} m.`;
+      const rows = [
+        ['active arm', m.side],
+        ['ee path', m.act.path.toFixed(3) + ' m'],
+        ['ee Δz', (m.act.dz >= 0 ? '+' : '') + m.act.dz.toFixed(3) + ' m'],
+        ['ee Δxy', m.act.dxy.toFixed(3) + ' m'],
+        ['speed mean / max', `${m.act.vmean.toFixed(2)} / ${m.act.vmax.toFixed(2)} m/s`],
+        ['gripper L', `${S.grip_l[a].toFixed(2)} → ${S.grip_l[b].toFixed(2)}`],
+        ['gripper R', `${S.grip_r[a].toFixed(2)} → ${S.grip_r[b].toFixed(2)}`],
+      ];
+      if (S.intervened) rows.push(['operator-sourced frames',
+        `${Math.round(100 * S.intervened.slice(a, b + 1).reduce((p, c) => p + (c ? 1 : 0), 0) / (b - a + 1))}%`]);
+      document.getElementById('xSig').innerHTML = rows.map(r =>
+        `<div class="x-sg"><span class="k">${r[0]}</span><span class="v">${r[1]}</span></div>`).join('');
+      tl.querySelectorAll('.seg').forEach((e, k) => e.classList.toggle('on', k === i));
+    }
+    cur.style.left = (100 * t / DUR) + '%';
+  }
+  function at(t) { for (let i = 0; i < STEPS.length; i++) if (t >= STEPS[i].start_s && t < STEPS[i].end_s) return i; return t < STEPS[0].start_s ? 0 : STEPS.length - 1; }
+  (function tick() { if (master) render(at(master.currentTime), master.currentTime); requestAnimationFrame(tick); })();
+
+  // ---------- wording: spans / subtask -> steps
+  document.querySelectorAll('.spans-head').forEach(e => {
+    e.textContent = e.textContent.replace(/temporal spans/i, 'annotated steps').replace(/spans/gi, 'steps');
+  });
+  document.querySelectorAll('.ro .k, .rgrid .k').forEach(e => {
+    const t = e.textContent.trim().toLowerCase();
+    if (t === 'subtask') e.textContent = 'step';
+    if (t === 'span progress') e.textContent = 'step progress';
+  });
+})();

teleopSample/ep0/viewer.html

@@ -74,7 +74,7 @@ canvas{width:100%;display:block;cursor:pointer}
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
   <div class="sidecol">
   <div class="panel">
-    <div class="spans-head">TEMPORAL SPANS (3) · auto-derived</div>
+    <div class="spans-head">annotated steps (3) · auto-derived</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 <div class="panel tacpanel">
@@ -488,4 +488,5 @@ setTimeout(fitHand,2000); setTimeout(fitHand,4000);
   var probe=grid.querySelector('.cam');
   if(probe && window.ResizeObserver) new ResizeObserver(function(){fitHand();}).observe(probe);
 })();
-</script></body></html>
+</script><script src="../enhance.js"></script>
+</body></html>

teleopSample/ep1/viewer.html

@@ -74,7 +74,7 @@ canvas{width:100%;display:block;cursor:pointer}
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
   <div class="sidecol">
   <div class="panel">
-    <div class="spans-head">TEMPORAL SPANS (3) · auto-derived</div>
+    <div class="spans-head">annotated steps (3) · auto-derived</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 <div class="panel tacpanel">
@@ -488,4 +488,5 @@ setTimeout(fitHand,2000); setTimeout(fitHand,4000);
   var probe=grid.querySelector('.cam');
   if(probe && window.ResizeObserver) new ResizeObserver(function(){fitHand();}).observe(probe);
 })();
-</script></body></html>
+</script><script src="../enhance.js"></script>
+</body></html>

teleopSample/ep2/viewer.html

@@ -74,7 +74,7 @@ canvas{width:100%;display:block;cursor:pointer}
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
   <div class="sidecol">
   <div class="panel">
-    <div class="spans-head">TEMPORAL SPANS (3) · auto-derived</div>
+    <div class="spans-head">annotated steps (3) · auto-derived</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 <div class="panel tacpanel">
@@ -488,4 +488,5 @@ setTimeout(fitHand,2000); setTimeout(fitHand,4000);
   var probe=grid.querySelector('.cam');
   if(probe && window.ResizeObserver) new ResizeObserver(function(){fitHand();}).observe(probe);
 })();
-</script></body></html>
+</script><script src="../enhance.js"></script>
+</body></html>

teleopSample/ep3/viewer.html

@@ -74,7 +74,7 @@ canvas{width:100%;display:block;cursor:pointer}
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
   <div class="sidecol">
   <div class="panel">
-    <div class="spans-head">TEMPORAL SPANS (3) · auto-derived</div>
+    <div class="spans-head">annotated steps (3) · auto-derived</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 <div class="panel tacpanel">
@@ -488,4 +488,5 @@ setTimeout(fitHand,2000); setTimeout(fitHand,4000);
   var probe=grid.querySelector('.cam');
   if(probe && window.ResizeObserver) new ResizeObserver(function(){fitHand();}).observe(probe);
 })();
-</script></body></html>
+</script><script src="../enhance.js"></script>
+</body></html>

teleopSample/ep4/viewer.html

@@ -74,7 +74,7 @@ canvas{width:100%;display:block;cursor:pointer}
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
   <div class="sidecol">
   <div class="panel">
-    <div class="spans-head">TEMPORAL SPANS (3) · auto-derived</div>
+    <div class="spans-head">annotated steps (3) · auto-derived</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 <div class="panel tacpanel">
@@ -488,5 +488,6 @@ setTimeout(fitHand,2000); setTimeout(fitHand,4000);
   var probe=grid.querySelector('.cam');
   if(probe && window.ResizeObserver) new ResizeObserver(function(){fitHand();}).observe(probe);
 })();
-</script></body></html>
+</script><script src="../enhance.js"></script>
+</body></html>
 <!-- rev2 regular-file -->

teleopSample/ep5/viewer.html

@@ -74,7 +74,7 @@ canvas{width:100%;display:block;cursor:pointer}
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
   <div class="sidecol">
   <div class="panel">
-    <div class="spans-head">TEMPORAL SPANS (3) · auto-derived</div>
+    <div class="spans-head">annotated steps (3) · auto-derived</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 <div class="panel tacpanel">
@@ -488,4 +488,5 @@ setTimeout(fitHand,2000); setTimeout(fitHand,4000);
   var probe=grid.querySelector('.cam');
   if(probe && window.ResizeObserver) new ResizeObserver(function(){fitHand();}).observe(probe);
 })();
-</script></body></html>
+</script><script src="../enhance.js"></script>
+</body></html>

teleopSample/faberU/t2_pet_bottle_into_steel_tray/20260707052527/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/faberU/t2_pet_bottle_into_steel_tray/20260707052609/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/faberU/t3_juice_bottle_onto_plate/20260724050737/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/faberU/t3_juice_bottle_onto_plate/20260724050827/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/faberU/t4_juice_bottle_into_black_tray/20260728075709/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/faberU/t4_juice_bottle_into_black_tray/20260728080339/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/faberU/t6_pick_up_green_tea_bottle/20260730045050/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/faberU/t6_pick_up_green_tea_bottle/20260730045152/viewer.html

@@ -192,7 +192,24 @@ function stepAt(t){for(let i=0;i<STEPS.length;i++)if(t>=STEPS[i].start_s&&t<STEP
 const playBtn=document.getElementById('play'),seek=document.getElementById('seek'),tlabel=document.getElementById('tlabel');
 let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
-playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
+function setPlaying(p){
+  playing=p; playBtn.textContent=p?'❚❚':'▶︎';
+  if(p){videos.forEach(v=>v.play().catch(()=>{}));requestAnimationFrame(loop);}
+  else videos.forEach(v=>v.pause());
+}
+playBtn.onclick=()=>setPlaying(!playing);
+// autoplay once every tile can render, then loop — same scheme as the other sample pages
+let started=false, iv=setInterval(tryStart,400);
+function tryStart(){
+  if(started||playing||!videos.length||!videos.every(v=>v.readyState>=2))return;
+  started=true; clearInterval(iv); videos.forEach(v=>v.muted=true); setPlaying(true);
+}
+videos.forEach(v=>{v.addEventListener('canplay',tryStart);v.addEventListener('loadeddata',tryStart);});
+window.addEventListener('load',tryStart);
+setTimeout(()=>clearInterval(iv),90000);
+setInterval(()=>{
+  if(playing&&master.currentTime>=DUR-0.08){seekTo(0);videos.forEach(v=>v.play().catch(()=>{}));}
+},200);
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
 function resync(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.2){try{v.currentTime=t;}catch(e){}}});}
 master.addEventListener('seeked',resync);

teleopSample/index.html

@@ -54,7 +54,7 @@ function build(){
     leaves.forEach(m=>{
       const el = document.createElement('div'); el.className = 'leaf';
       el.innerHTML = `<div class="lt">${esc(m.label)}</div>
-        <div class="lm"><span class="rig">${esc(rig)}</span>${m.dur.toFixed(0)}s · ${m.spans} spans</div>`;
+        <div class="lm"><span class="rig">${esc(rig)}</span>${m.dur.toFixed(0)}s · ${m.spans} steps</div>`;
       el.onclick = ()=>go(m.hash);
       el._hash = m.hash; el._m = m; el._cat = cat;
       body.appendChild(el);

teleopSample/mem_ep0.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (4) · instruction segments</div>
+    <div class="spans-head">annotated steps (4) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>

teleopSample/mem_ep1.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (4) · instruction segments</div>
+    <div class="spans-head">annotated steps (4) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>

teleopSample/sort_ep0.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (16) · instruction segments</div>
+    <div class="spans-head">annotated steps (16) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>

teleopSample/sort_ep1.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (16) · instruction segments</div>
+    <div class="spans-head">annotated steps (16) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>

teleopSample/wipe_ep0.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (3) · instruction segments</div>
+    <div class="spans-head">annotated steps (3) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>

teleopSample/wipe_ep1.html

@@ -54,7 +54,7 @@ header{padding:16px 22px 8px}header h1{margin:0 0 3px;font-size:21px}
 <div class="layout">
   <div class="panel camwrap"><div id="camgrid" class="camgrid"></div></div>
   <div class="panel sidecol-spans">
-    <div class="spans-head">temporal spans (3) · instruction segments</div>
+    <div class="spans-head">annotated steps (3) · instruction segments</div>
     <div class="chips" id="chips"></div><div id="spanList"></div>
   </div>
 </div>
@@ -242,4 +242,5 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
 })();
 master.addEventListener('loadedmetadata',update); window.addEventListener('load',update);
 </script>
+<script src="enhance.js"></script>
 </body></html>