Add playground failure timeline

Author: rsasaki0109

README.md

@@ -52,7 +52,7 @@ python3 examples/runtime/01_sense_act_loop.py
 | Failure recovery | `python3 examples/manipulation/01_pick_and_retry.py` | grasp miss -> belief update -> retry |
 | Runtime safety | `python3 examples/navigation/29_safety_filter_cbf.py` | nominal controller -> CBF projection -> safe motion |
 | Active perception | `python3 examples/navigation/07_active_slam_toy.py` | map and pose uncertainty -> information-seeking action |
-| Shareable live trace | [Try live](https://rsasaki0109.github.io/PythonInteractiveRobotics/playground.html?scenario=household&answer=red&compare=1&autoplay=1) | compare, step, and scrub action, reward, failure, and agent_state |
+| Shareable live trace | [Try live](https://rsasaki0109.github.io/PythonInteractiveRobotics/playground.html?scenario=household&answer=red&compare=1&autoplay=1) | compare, scrub, and jump through failure timelines |
 | Human correction | [Open in Colab](https://colab.research.google.com/github/rsasaki0109/PythonInteractiveRobotics/blob/main/notebooks/human_correction_replanning.ipynb) | shortcut -> human correction -> cost update -> replan |
 | Language ambiguity | [Open in Colab](https://colab.research.google.com/github/rsasaki0109/PythonInteractiveRobotics/blob/main/notebooks/clarifying_question.ipynb) | ambiguous command -> ask question -> answer -> act |
 | Integrated household task | [Open in Colab](https://colab.research.google.com/github/rsasaki0109/PythonInteractiveRobotics/blob/main/notebooks/household_task_agent.ipynb) | clarify -> plan -> safety check -> retry -> human replan |

docs/playground.css

@@ -497,7 +497,7 @@ button:disabled {
 
 .trace-panel {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr);
   max-height: calc(100vh - 124px);
   padding: 16px;
 }
@@ -520,6 +520,67 @@ button:disabled {
   font-weight: 800;
 }
 
+.timeline {
+  align-content: start;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
+  margin-bottom: 12px;
+  min-height: 40px;
+  padding: 8px;
+}
+
+.timeline-step {
+  align-items: center;
+  background: #eef3ef;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--ink);
+  cursor: pointer;
+  display: flex;
+  font-size: 0.72rem;
+  font-weight: 900;
+  height: 28px;
+  justify-content: center;
+  min-height: 28px;
+  min-width: 0;
+  padding: 0;
+}
+
+.timeline-step:hover {
+  transform: translateY(-1px);
+}
+
+.timeline-active {
+  box-shadow: 0 0 0 3px rgba(23, 32, 31, 0.18);
+}
+
+.timeline-ambiguous {
+  background: #805ad5;
+  border-color: #805ad5;
+  color: #ffffff;
+}
+
+.timeline-unsafe {
+  background: #f4ce82;
+  border-color: #b7791f;
+}
+
+.timeline-grasp,
+.timeline-human {
+  background: #c43d32;
+  border-color: #c43d32;
+  color: #ffffff;
+}
+
+.timeline-success {
+  background: #5c8b4a;
+  border-color: #5c8b4a;
+  color: #ffffff;
+}
+
 .trace-table {
   border: 1px solid var(--line);
   border-radius: 8px;

docs/playground.html

@@ -112,6 +112,7 @@ <h1 id="playground-title">Playground</h1>
             <h2 id="trace-title">Trace</h2>
             <span id="stepCounter">0 / 3</span>
           </div>
+          <div id="timeline" class="timeline" aria-label="Failure timeline"></div>
           <div class="trace-table" role="table" aria-label="Trace rows">
             <div class="trace-row trace-head" role="row">
               <span role="columnheader">#</span>

docs/playground.js

@@ -54,6 +54,7 @@
     replay: document.getElementById("replaySlider"),
     replayValue: document.getElementById("replayValue"),
     comparePanel: document.getElementById("comparePanel"),
+    timeline: document.getElementById("timeline"),
     scene: document.getElementById("scene"),
     traceRows: document.getElementById("traceRows"),
     stepCounter: document.getElementById("stepCounter"),
@@ -575,6 +576,7 @@
 
     renderReplay(replayIndex);
     renderCompare();
+    renderTimeline(replayIndex);
     renderScene(current);
     renderTrace(replayIndex);
   }
@@ -632,6 +634,42 @@
     elements.replayValue.textContent = replayLabel(replayIndex);
   }
 
+  function renderTimeline(replayIndex) {
+    elements.timeline.textContent = "";
+    state.trace.forEach((event, index) => {
+      const step = index + 1;
+      const button = document.createElement("button");
+      button.className = "timeline-step " + timelineClass(event);
+      button.type = "button";
+      button.textContent = String(step);
+      button.setAttribute("aria-label", timelineLabel(event, step));
+      if (step === replayIndex) {
+        button.classList.add("timeline-active");
+        button.setAttribute("aria-current", "step");
+      }
+      button.addEventListener("click", () => setReplayIndex(step));
+      elements.timeline.appendChild(button);
+    });
+  }
+
+  function timelineClass(event) {
+    if (event.failure === "ambiguous_goal") return "timeline-ambiguous";
+    if (event.failure === "unsafe_nominal_step") return "timeline-unsafe";
+    if (event.failure === "grasp_miss") return "timeline-grasp";
+    if (event.failure === "human_correction") return "timeline-human";
+    if (event.agentState === "done") return "timeline-success";
+    return "timeline-neutral";
+  }
+
+  function timelineLabel(event, step) {
+    return (
+      "Step " +
+      step +
+      ": " +
+      (event.failure || (event.agentState === "done" ? "success" : event.agentState))
+    );
+  }
+
   function currentReplayIndex() {
     if (state.replayIndex === null) {
       return state.trace.length;

tests/test_playground_assets.py

@@ -25,6 +25,7 @@ def test_playground_assets_support_shareable_scenarios() -> None:
         "replaySlider",
         "replayValue",
         "comparePanel",
+        "timeline",
         "traceRows",
     ):
         assert f'id="{element_id}"' in html
@@ -42,9 +43,12 @@ def test_playground_assets_support_shareable_scenarios() -> None:
         "buildHouseholdCompare",
         "renderCompare",
         "renderMiniMap",
+        "renderTimeline",
+        "timelineClass",
         "clampReplayIndex",
         "snapshotForReplayIndex",
         "trace-active",
+        "timeline-active",
     ):
         assert value in js
 
@@ -54,6 +58,7 @@ def test_playground_assets_support_shareable_scenarios() -> None:
     assert ".copy-status" in css
     assert ".replay-strip" in css
     assert ".compare-panel" in css
+    assert ".timeline" in css
 
 
 def test_readme_links_to_shareable_live_trace() -> None: