teleopSample: step list on the older pages matches the pick-and-place layout

Same row format as the new pages (time range · duration · frame count · success
marker, then the numbered title and the token), coloured left border per step,
and the chip row is gone — the timeline over the scrubber already carries it.

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

teleopSample/enhance.js

@@ -32,6 +32,7 @@
   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)));
+  const num = (st, i) => (st.id != null ? st.id : i + 1);   // keep the page's own numbering
 
   // ---------- styles
   const css = document.createElement('style');
@@ -54,7 +55,10 @@
 .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}`;
+.x-sg .k{color:#9aa1ad}.x-sg .v{font-variant-numeric:tabular-nums}
+.span-item .x-t{font-size:11px;color:#8890a0;font-variant-numeric:tabular-nums}
+.span-item .x-title{font-size:13.5px;margin:2px 0;line-height:1.35}
+.span-item .x-tok{font-size:10.5px;color:#6f92c8;font-family:ui-monospace,monospace}`;
   document.head.appendChild(css);
 
   // ---------- instruction header
@@ -79,7 +83,6 @@
   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';
@@ -155,6 +158,23 @@
   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); })();
 
+  // ---------- sidebar: same step rows as the pick-and-place pages, and drop the chip row
+  // (the timeline above the scrubber already carries the colour key)
+  const chips = document.getElementById('chips') || document.querySelector('.chips');
+  if (chips) chips.remove();
+  document.querySelectorAll('.span-item').forEach((el, i) => {
+    const st = STEPS[i];
+    if (!st) return;
+    const a = frameAt(st.start_s), b = frameAt(st.end_s);
+    el.style.borderLeftColor = col(i);
+    el.innerHTML =
+      `<div class="x-t">${st.start_s.toFixed(2)}s – ${st.end_s.toFixed(2)}s · ` +
+      `${(st.end_s - st.start_s).toFixed(2)}s · ${b - a + 1}f` +
+      (st.success_s != null ? ` · ✓ ${st.success_s.toFixed(2)}s` : '') + `</div>` +
+      `<div class="x-title">${num(st, i)}. ${st.title}</div>` +
+      (st.token ? `<div class="x-tok">${st.token}</div>` : '');
+  });
+
   // ---------- wording: spans / subtask -> steps
   document.querySelectorAll('.spans-head').forEach(e => {
     e.textContent = e.textContent.replace(/temporal spans/i, 'annotated steps').replace(/spans/gi, 'steps');