feat(web): step-through memory replay grid in the memory panel

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

proteus/web/static/index.html

@@ -87,6 +87,16 @@
     <div id="memInfo" style="color:var(--muted);font-size:12px"></div>
     <details id="memoryPanel" class="hidden" open>
       <summary id="memorySummary">memory shown to the model</summary>
+      <div id="memReplay" class="hidden" style="padding:6px 10px">
+        <div style="margin-bottom:6px">
+          <button id="memReplayPrev" type="button">◀ prev</button>
+          <button id="memReplayNext" type="button">next ▶</button>
+          <button id="memReplayPlay" type="button">▶ play</button>
+          <span id="memReplayCap" style="color:var(--muted);margin-left:8px"></span>
+        </div>
+        <div id="memReplayGrid" style="display:grid;gap:1px;width:max-content;
+             background:var(--line);padding:1px;border-radius:4px"></div>
+      </div>
       <pre id="memoryBlock"></pre>
     </details>
     <div id="grid"></div>
@@ -140,8 +150,8 @@ async function jpost(url, body) {
 
 function hex6(h) { return h.length >= 7 ? h.slice(0,7) : h; }  // drop alpha for CSS
 
-function drawGrid(grid) {
-  const g = $("grid");
+function drawGrid(grid, target) {
+  const g = target || $("grid");
   const h = grid.length, w = grid[0].length;
   // Auto-fit the whole grid into a comfortable box: shrink cells for large
   // grids (so a 64x64 field fits and stays centered) and cap at 30px so small
@@ -246,11 +256,38 @@ function selectProvider(p) {
 }
 function currentModel() { return `${PROVIDER}:${$("modelId").value.trim()}`; }
 
+// --- memory step-through replay -------------------------------------------- //
+let MEM_FRAMES = [], MEM_I = 0, MEM_PLAY = false;
+function renderMemFrame() {
+  if (!MEM_FRAMES.length) return;
+  const f = MEM_FRAMES[MEM_I];
+  drawGrid(f.grid, $("memReplayGrid"));
+  $("memReplayCap").textContent =
+    `Memory ${f.turn_idx} / ${MEM_FRAMES.length} — you chose: ${f.action}`;
+}
+function memStep(d) {
+  if (!MEM_FRAMES.length) return;
+  MEM_PLAY = false; $("memReplayPlay").textContent = "▶ play";
+  MEM_I = (MEM_I + d + MEM_FRAMES.length) % MEM_FRAMES.length;
+  renderMemFrame();
+}
+async function memPlay() {
+  if (MEM_PLAY) { MEM_PLAY = false; $("memReplayPlay").textContent = "▶ play"; return; }
+  if (!MEM_FRAMES.length) return;
+  MEM_PLAY = true; $("memReplayPlay").textContent = "⏸ pause";
+  for (let k = 0; k < MEM_FRAMES.length && MEM_PLAY; k++) {
+    MEM_I = k; renderMemFrame();
+    await new Promise(r => setTimeout(r, SPEED));
+  }
+  MEM_PLAY = false; $("memReplayPlay").textContent = "▶ play";
+}
+
 function showMem(m) {
   const panel = $("memoryPanel");
   if (!m || !m.attached) {
     $("memInfo").textContent = m ? "memory: none (no pre-roll before the task)" : "";
     panel.classList.add("hidden");
+    MEM_FRAMES = []; MEM_PLAY = false; $("memReplay").classList.add("hidden");
     return;
   }
   $("memInfo").textContent =
@@ -260,6 +297,12 @@ function showMem(m) {
   $("memoryBlock").textContent = m.block || "";
   $("memorySummary").textContent =
     `memory shown to the model — ${m.source} · ${m.turns} turns (click to collapse)`;
+  // Replay of how the model actually moved (alongside the text block).
+  MEM_FRAMES = (m && m.frames) || []; MEM_I = 0; MEM_PLAY = false;
+  $("memReplayPlay").textContent = "▶ play";
+  const rep = $("memReplay");
+  if (MEM_FRAMES.length) { rep.classList.remove("hidden"); renderMemFrame(); }
+  else rep.classList.add("hidden");
   panel.open = true;
   panel.classList.remove("hidden");
 }
@@ -366,6 +409,9 @@ async function init() {
   showModelInput();
   SPEED = Number($("speed").value);
   $("speed").addEventListener("change", () => { SPEED = Number($("speed").value); });
+  $("memReplayPrev").addEventListener("click", () => memStep(-1));
+  $("memReplayNext").addEventListener("click", () => memStep(1));
+  $("memReplayPlay").addEventListener("click", memPlay);
   $("pauseBtn").addEventListener("click", () => {
     PAUSED = !PAUSED; $("pauseBtn").textContent = PAUSED ? "Resume" : "Pause";
     if (!PAUSED) spectateLoop();

tests/web/test_memory_modes.py

@@ -104,3 +104,10 @@ def test_memory_frames_empty_when_no_memory():
         _reg())
     assert payload["memory"]["attached"] is False
     assert payload["memory"]["frames"] == []
+
+
+def test_index_html_has_replay_controls():
+    status, body, ctype = server.handle_request("GET", "/", None, _reg())
+    html = body.decode() if isinstance(body, (bytes, bytearray)) else body
+    assert "memReplayGrid" in html
+    assert "memReplayPrev" in html and "memReplayNext" in html and "memReplayPlay" in html