Improve DAgger explainer, add conclusion and expand references

- Rebuild DAgger loop visualization with SVG icons, dark/light theme
support, curved arrows, iteration counter, and dataset growth bar
- Add conclusion sections: bigger picture, open questions, call to action
- Expand references from 4 to 11 papers, organized by category
(models, techniques, architecture components)
- Update DAgger section text in ablations chapter

Made-with: Cursor

app/src/components/Hero.astro

@@ -100,19 +100,8 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   <h1 class="hero-title" set:html={title} />
   <div class="hero-banner">
     <div class="hero-video-wrapper">
-      <video id="hero-video" src={announcementVideo} autoplay loop muted playsinline style="width:100%;height:auto;border-radius:12px;"></video>
-      <button id="hero-mute-btn" class="mute-btn" aria-label="Toggle audio">
-        <svg class="icon-muted" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
-          <line x1="23" y1="9" x2="17" y2="15"></line>
-          <line x1="17" y1="9" x2="23" y2="15"></line>
-        </svg>
-        <svg class="icon-unmuted" style="display:none;" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
-          <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
-          <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
-        </svg>
-      </button>
+      <video id="hero-video" src={announcementVideo} autoplay controls muted playsinline style="width:100%;height:auto;border-radius:12px;"></video>
+      <p class="video-credit">Video by Simon Automne-Pinto</p>
     </div>
     {description && <p class="hero-desc">{description}</p>}
   </div>
@@ -408,20 +397,6 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   </script>
 )}
 
-<script is:inline>
-  (function() {
-    const video = document.getElementById('hero-video');
-    const btn = document.getElementById('hero-mute-btn');
-    if (!video || !btn) return;
-    const iconMuted = btn.querySelector('.icon-muted');
-    const iconUnmuted = btn.querySelector('.icon-unmuted');
-    btn.addEventListener('click', () => {
-      video.muted = !video.muted;
-      iconMuted.style.display = video.muted ? 'block' : 'none';
-      iconUnmuted.style.display = video.muted ? 'none' : 'block';
-    });
-  })();
-</script>
 
 <style>
   /* Hero (full-width) */
@@ -447,25 +422,12 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     display: inline-block;
     width: 100%;
   }
-  .mute-btn {
-    position: absolute;
-    bottom: 16px;
-    right: 16px;
-    background: rgba(0, 0, 0, 0.5);
-    border: none;
-    border-radius: 50%;
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: white;
-    backdrop-filter: blur(4px);
-    transition: background 0.2s;
-  }
-  .mute-btn:hover {
-    background: rgba(0, 0, 0, 0.7);
+  .video-credit {
+    color: var(--muted-color);
+    font-size: 12px;
+    margin: 6px 0 0;
+    text-align: right;
+    opacity: 0.7;
   }
   .hero-desc {
     color: var(--muted-color);

app/src/components/HtmlEmbed.astro

@@ -520,6 +520,13 @@ const htmlWithId =
   }
   [data-theme="light"] .html-embed__card .insight strong { color: rgba(0,0,0,.85); }
 
+  /* Insight boxes (failure-analysis) */
+  [data-theme="light"] .html-embed__card .insight-box {
+    background: #f7f8fa; border: 1px solid #e2e4e9;
+    border-left: 3px solid #f7934f; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .insight-box strong { color: rgba(0,0,0,.85); }
+
   /* Wilson CI note (success-rates) */
   [data-theme="light"] .html-embed__card .ci-note {
     background: rgba(0,0,0,.02); border-color: #e2e4e9; color: #6b7280;
@@ -551,6 +558,21 @@ const htmlWithId =
   [data-theme="light"] .html-embed__card .toggle-btn:hover {
     border-color: #9ca3af; color: rgba(0,0,0,.85);
   }
+  [data-theme="light"] .html-embed__card .mode-btn {
+    background: #fff; border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .mode-btn.active {
+    color: rgba(0,0,0,.85); border-color: #c5c8d0; background: #f3f4f6;
+  }
+  [data-theme="light"] .html-embed__card .mode-btn:hover:not(.active) {
+    color: rgba(0,0,0,.85);
+  }
+  [data-theme="light"] .html-embed__card .filter-toggle {
+    background: #fff; border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .filter-toggle:hover {
+    border-color: #9ca3af; color: rgba(0,0,0,.85);
+  }
   [data-theme="light"] .html-embed__card .divider { background: #e2e4e9; }
   [data-theme="light"] .html-embed__card .ctrl-label { color: #6b7280; }
 

app/src/content/article.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Unfolding Robotics:\nThe Open-Source Recipe for Teaching a Robot to Fold Your Clothes"
-subtitle: "The complete open-source recipe for teaching robots to fold clothes"
+subtitle: ""
 description: "We trained a bimanual robot to fold t-shirts using LeRobot and open-source hardware. We release the model, data, code, and every insight from data collection to deployment."
 authors:
   - name: "Pepijn Kooijmans"
@@ -54,20 +54,11 @@ import Hero from "./chapters/folding/01-hero.mdx";
 import Results from "./chapters/folding/02-results.mdx";
 import Hardware from "./chapters/folding/03-hardware.mdx";
 import DataCollection from "./chapters/folding/04-data-collection.mdx";
-import DataDiversity from "./chapters/folding/05-data-diversity.mdx";
 import Training from "./chapters/folding/06-training.mdx";
 import Experiments from "./chapters/folding/08-ablations.mdx";
 import Learnings from "./chapters/folding/09-learnings.mdx";
 import References from "./chapters/folding/12-references.mdx";
 
-import Introduction from "./chapters/demo/introduction.mdx";
-import BuiltWithThis from "./chapters/demo/built-with-this.mdx";
-import BestPractices from "./chapters/demo/best-pratices.mdx";
-import WritingYourContent from "./chapters/demo/writing-your-content.mdx";
-import GettingStarted from "./chapters/demo/getting-started.mdx";
-import Markdown from "./chapters/demo/markdown.mdx";
-import Components from "./chapters/demo/components.mdx";
-import VibeCodingCharts from "./chapters/demo/vibe-coding-charts.mdx";
 
 <Hero />
 
@@ -77,8 +68,6 @@ import VibeCodingCharts from "./chapters/demo/vibe-coding-charts.mdx";
 
 <DataCollection />
 
-<DataDiversity />
-
 <Training />
 
 <Experiments />

app/src/content/chapters/folding/01-hero.mdx

@@ -6,16 +6,16 @@ import Stack from "../../../components/Stack.astro";
 > We trained an open-source bimanual robot to fold t-shirts autonomously, reaching 90% success rate. The biggest lever was data quality, not the model, not the architecture.
 
 <Sidenote>
-  Read time: ~30 minutes. Each section stands on its own — feel free to skip to what interests you most.
+  Read time: ~25 minutes.
 </Sidenote>
 
 This post walks through the complete journey: hardware choices, data collection, training recipes, and different experiments that show what actually matters. We cover the mistakes and dead ends alongside the things that worked, because the messy middle is where most of the learning happens.
 
 Some of what we found: cheap 3D-printed leader arms outperformed the expensive ones for teleoperation. Early data collection was more wasteful than expected. A trained reward model turned out to be essential for separating useful demonstrations from harmful ones. And curating a small, high-quality dataset did more than any algorithmic improvement on the full dataset.
 
-By sharing this we hope to contribute to our bigger vision: **democratize robotics and robot learning**. By open-sourcing every piece tools, data, models, and knowledge we want to enable a community that pushes this technology further. We've tried to avoid just listing what we did in favor of telling the story of how we got here. We hope being this open will help close the gap between closed-lab demos and what the open-source community can achieve.
+By sharing this we hope to contribute to our bigger vision: **democratize robotics and robot learning**. By open-sourcing every piece (tools, data, models, and knowledge) we want to enable a community that pushes this technology further. We've tried to avoid just listing what we did in favor of telling the story of how we got here. We hope being this open will help close the gap between closed-lab demos and what the open-source community can achieve.
 
-Everything we built for this project [SARM](https://huggingface.co/docs/lerobot/sarm), [RTC](https://huggingface.co/docs/lerobot/rtc), DAgger, [OpenArm](https://huggingface.co/docs/lerobot/openarm) and [OpenArm Mini](http://github.com/pkooij/open-arms-mini) is now merged into [LeRobot](https://github.com/huggingface/lerobot) and ready for the community to use.
+Everything we built for this project ([SARM](https://huggingface.co/docs/lerobot/sarm), [RTC](https://huggingface.co/docs/lerobot/rtc), DAgger, [OpenArm](https://huggingface.co/docs/lerobot/openarm), and [OpenArm Mini](https://github.com/pkooij/open-arms-mini)) is now merged into [LeRobot](https://github.com/huggingface/lerobot) and ready for the community to use.
 
 _Let's start with the results, does it actually work?_
 
@@ -26,7 +26,7 @@ _Let's start with the results, does it actually work?_
   <a href="https://huggingface.co/lerobot-data-collection/folding_sarm_reward" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;"><strong>SARM Reward</strong><br/>HF Hub</a>
   <a href="https://huggingface.co/datasets/lerobot/high_quality_folding" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;"><strong>HQ Dataset</strong><br/>HF Hub</a>
   <a href="https://huggingface.co/datasets/lerobot/full_folding" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;"><strong>Full Dataset</strong><br/>HF Hub</a>
-  <a href="http://github.com/pkooij/open-arms-mini" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;"><strong>OpenArm Mini</strong><br/>Repo</a>
+  <a href="https://github.com/pkooij/open-arms-mini" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;"><strong>OpenArm Mini</strong><br/>Repo</a>
   <a href="https://github.com/huggingface/lerobot" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;"><strong>LeRobot</strong><br/>Code</a>
   <a href="https://huggingface.co/docs/lerobot/index" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;"><strong>LeRobot</strong><br/>Documentation</a>
 </Stack>

app/src/content/chapters/folding/02-results.mdx

@@ -30,7 +30,7 @@ How well does it actually work? We evaluated our best model (Experiment 2.5) acr
 | **Combined** (Total SR) | **90%** | |
 
 <Sidenote>
-  All evaluations filmed and scored from video. 20 rollouts per experiment (10 per level). Full methodology in the [Evaluation](#evaluation) section.
+  All evaluations filmed and scored from video. 20 rollouts per experiment (10 per level). Full methodology in the [Model and Evaluation Setup](#model-and-evaluation-setup) section.
 </Sidenote>
 
-These numbers are the result of 11 experiments, each testing a different combination of model, data, and training strategies. The full breakdown is in the [Experiments](#experiments) section. But let's start from the beginning: the hardware.
+These numbers are the result of 11 experiments, each testing a different combination of model, data, and training strategies. The full breakdown is in the [From Data to Deployment](#from-data-to-deployment) section. But let's start from the beginning: the hardware.

app/src/content/chapters/folding/03-hardware.mdx

@@ -10,35 +10,32 @@ import openArmMini2 from "../../assets/image/openarm-mini2.jpg";
 
 ## Hardware
 
-LeRobot takes care of the entire robot learning stack — but you still need the physical hardware. Here's an averview of every piece we used.
+LeRobot handles the software stack, but you still need the physical hardware. Below we cover the base robot, custom grippers, a cheap 3D-printed teleop setup that outperformed the expensive one, and the camera layout.
 
 ### The Robot: Bimanual OpenArm
 
-For starters, the robot. We used the **bimanual [OpenArm](https://huggingface.co/docs/lerobot/openarm)**, open-source, human-like robot arms developed by [Enactic](https://openarm.dev) and built by [WowRobo](https://shop.wowrobo.com). Three reasons drove this choice:
+For starters, the robot. We used the **bimanual [OpenArm](https://huggingface.co/docs/lerobot/openarm)**. These are open-source, human-like robot arms developed by [Enactic](https://openarm.dev) and sold by multiple vendors like [WowRobo](https://shop.wowrobo.com). Two reasons drove this choice:
 
-1. **The humanoid trend.** We're seeing a wave of human-like robots. More human-form robots means more human-form data in the ecosystem. Building on this form factor positions our work for a future where human-like manipulation data is transferable.
-2. **Smaller teleop gap.** When the robot's kinematics match a human arm, the teleoperator's motions transfer more naturally, meaning less mental remapping and faster learning.
-3. **Open source, good specs.** Solid payload, good reach, and fully open hardware. We extended the upper arm by **+5 cm** to increase reach since our setup doesn't have a hip or torso to provide additional workspace.
+1. **Smaller teleop gap.** When the robot's kinematics match a human arm, the teleoperator's motions transfer more naturally, meaning less mental remapping and faster learning. The humanoid form factor also aligns with where the ecosystem is heading: more human-form robots means more transferable data.
+2. **Open source, good specs.** Solid payload, good reach, and fully open hardware. We extended the upper arm (the bicep segment) by **+5 cm** to increase reach since our setup doesn't have a hip or torso to provide additional workspace.
 
-Everything is mounted on **aluminum extrusion profiles**, which let us quickly iterate on the physical arrangement and adjust both teleop and robot height between sessions to increase data diversity.
+Everything is mounted on **aluminum extrusion profiles**, which let us quickly iterate on the physical arrangement and adjust both teleop and robot height between sessions to increase data diversity. We also designed **custom grippers with a larger surface area**, giving the robot a broader contact patch to grip, pinch, and slide fabric reliably.
 
 <img src={openArmsImg.src} alt="OpenArm bimanual robot setup" style="width:100%; border-radius: 8px;" />
 
-### Custom Grippers
-
-We designed **custom grippers with a larger surface area**, giving the robot a broader contact patch to grip, pinch, and slide fabric reliably. We also added a small polymer patch on one side of the gripper to reduce slippage and make the grasping of fabric easier.
-
 ### Teleop Arms: OpenArm Mini
 
 Next, we need a way to control the robot. We started with full-size OpenArm as leader arms for teleoperation. They seemed like the natural choice: same kinematics as the follower arms, one-to-one mapping.
 
-However, we quickly realized we needed a teleoperator with less inertia, to allow for fast and precise manipulation, and more adaptability to different human morphologies. This led us to develop the **OpenArm Mini**: small, Feetech-based, 3D-printed leader arms based on the [SO-101](https://github.com/TheRobotStudio/SO-ARM100) design. These gave us:
+However, we quickly realized we needed a teleoperator arm with less inertia, that allows for fast and precise manipulation, and more adaptability to different human morphologies. This led us to develop the **OpenArm Mini**: small, Feetech-based, 3D-printed leader arms based on the [SO-101](https://github.com/TheRobotStudio/SO-ARM100) design. These gave us:
 1. **Less inertia** for quicker and more deliberate motions that cloth folding demands
 2. **Arm-length agnostic** and adaptable to any human operator size
 3. **Incredibly cheap** (~120 EUR per arm) making it easy to scale to multiple stations
-4. **Still support DAgger**: lightweight, but strong enough to move during human-in-the-loop corrective data collection
+4. **Still supports itself**: strong enough to move during human-in-the-loop corrective data collection
 
-One small detail mattered more than expected: the **wrist strap**. It locks the wrist to the leader arm, providing the precise rotational control essential for cloth manipulation.
+One small detail mattered more than expected: the **wrist strap**. It locks the operator's wrist to the leader arm, providing rotational control essential for precise manipulation.
+
+Another feature that made a surprisingly big difference: when both your hands are on the leader arms, you need a hands-free way to **start and stop episodes recording**. USB foot pedals solved this elegantly.
 
 <Note variant="info" emoji="🔗">
   [OpenArm Mini repo (3D print files, BOM, LeRobot integration)](https://github.com/pkooij/open-arms-mini)
@@ -54,17 +51,9 @@ One small detail mattered more than expected: the **wrist strap**. It locks the
 
 <br/>
 
-Another feature that made a surprisingly big difference: when both your hands are on the leader arms, you need a hands-free way to **start and stop episodes recording**. USB foot pedals solved this elegantly.
-
 ### Cameras
 
-Eventually, the robot needs to see what it is doing: for this purpose we used **three cameras** each serving a distinct purpose:
-
-| Camera | Position | Notes |
-|:---|:---|:---|
-| **Base camera** | Mounted between/above arms | Wide FOV to capture the full scene |
-| **Left wrist camera** | Mounted on left end-effector | Close-up view for precise manipulation |
-| **Right wrist camera** | Mounted on right end-effector | Close-up view for precise manipulation |
+We use **three cameras**, each serving a purpose. The **base camera** is mounted between the arms and provides a wide-angle overview of the full workspace, the model's primary understanding of the task state. The two **wrist cameras** are mounted directly on the end-effectors. Because they move with the grippers, they provide a natural depth signal and give a close-up view for precise manipulation. They also act as a proxy for touch, being so close to the grippers, they capture contact details: grip quality, slip, that humans normally sense through their fingers. More cameras could help, but every additional image stream requires more compute and time to process; three was the tradeoff we settled on.
 
 <Note variant="info" emoji="🔗">
   Camera links: <a href="https://www.amazon.fr/-/en/Fafeicy-Camera-Module-Million-Conferencing/dp/B08GLSPTXY" target="_blank">Base camera (Fafeicy OV2710)</a> / <a href="https://www.arducam.com/12mp-imx708-usb-uvc-102-wide-angle-fixed-focus-camera-module-3.html" target="_blank">Wrist cameras (Arducam IMX708)</a>
@@ -77,6 +66,6 @@ Eventually, the robot needs to see what it is doing: for this purpose we used **
 
 ### LeRobot Integration
 
-Integrating OpenArm into LeRobot required adding **CAN-bus protocol** support for the arm's motors. It can now be found in the [LeRobot repository](https://github.com/huggingface/lerobot). We also created a UI for non-technical robot operators, so the CLI doesn't need to be used to start and stop episodes.
+Integrating OpenArm into LeRobot required adding **CAN-bus** support. CAN-bus is the communication protocol the arm's motors use, think of it as a shared wire where LeRobot sends position commands ("move joint 3 to 45 degrees") and reads back the current joint angles. Everything else: capturing camera images, running the model, converting predictions into those joint positions, happens in Python inside LeRobot. The CAN-bus driver is the thin bridge between software and hardware. This integration can now be found in the [LeRobot repository](https://github.com/huggingface/lerobot). We also created a UI for non-technical robot operators, so the CLI doesn't need to be used to start and stop episodes.
 
 With the hardware in place, the next step was the hardest and most time-consuming part of the entire project: collecting good data. And "good" is much harder to define than it sounds.

app/src/content/chapters/folding/04-data-collection.mdx

@@ -1,28 +1,60 @@
 import Note from "../../../components/Note.astro";
 import Sidenote from "../../../components/Sidenote.astro";
 import Accordion from "../../../components/Accordion.astro";
+import Wide from "../../../components/Wide.astro";
+import diversityGridImg from "../../assets/image/lerobot-data-collection_level12_rac_2_2026-02-08_1_grid_15x10.jpg";
 
 ## Data Collection
 
 Data collection was the longest phase of this project, and arguably the most important. No amount of compute can compensate for bad demonstrations.
 
+T-shirt folding involves deformable objects with complex contact dynamics: simulation can't faithfully reproduce how fabric crumples and slides, world models can't yet predict cloth deformation reliably, and RL from scratch on real hardware is too sample-inefficient for a task this long-horizon (though RL *on top of* a pretrained VLA is a promising future direction). That leaves **real-world teleoperation** as the practical path. We chose **leader-follower arms** because they match the robot's kinematics exactly (what the operator does is what the robot does), giving low latency, high precision, and support for [DAgger](https://github.com/huggingface/lerobot/tree/main/examples/hil), where the teleop setup takes over from a running policy to collect corrections.
+
 We ran **8 setups** in parallel, optimizing for **maximum diversity**: 25+ different t-shirts, 8 different backgrounds, and varying camera and robot heights between sessions. We structured collection into two task levels: **Level 1** (fold a laid-out shirt) and **Level 2** (spread a messy shirt, fold it, place it aside).
 
 ### Learning to Teleoperate
 
-Here's an honest truth: **early data is worse than the final data**. Teleoperating a bimanual robot is a genuine skill, and it takes practice. The first episodes are slow, not deliberate, and full of failed attempts. Over hours of practice, operators get dramatically better and smoother motions, faster execution, and more consistent grasps.
+Here's an honest truth: **early data collection is worse than the final data**. Teleoperating a bimanual robot is a genuine skill, and it takes practice. The first episodes are slow, not deliberate, and full of failed attempts. Over hours of practice, operators get dramatically better, with smoother motions, faster execution, and more consistent grasps.
 
-This creates one of the most important practical decisions of the project: **when do you start recording data for the final model?** Too early and you pollute the dataset with low-quality demonstrations that the model will faithfully reproduce, including hesitations and fumbles. Too late and you've wasted precious time.
+This raises an important practical question: **when do we start using the robot operators data?** Every hour of data collection requires a human operator, it's expensive and doesn't scale easily. But bad demonstrations aren't just wasted effort, they might actively hurt the model, which can reproduce hesitations and inconsistent strategies. But defining what makes a "good" demonstration is itself an unsolved problem in robot learning. Duration is a rough proxy, a fast episode can still contain poor grasps, and a slow one can be perfectly executed. We ended up relying on a combination of heuristics and a learned reward model (introduced later) to separate useful data from harmful data.
 
-Aligning on a common strategy across operators was equally important. Folding is a very multi-modal task (there are many valid ways to fold a t-shirt) and the model learns better from a consistent strategy. Before each recording sprint, we held brief alignment sessions: experimenting with different techniques, sharing our learnings and then converging on the most efficient fold sequence.
+Aligning on a common strategy across operators was equally important. Folding is a very multi-modal task (there are many valid ways to fold a t-shirt) and with unlimited data per approach the model could probably learn them all. But at our scale, mixing strategies means each one is under-represented. Aligning on a single strategy is a more data-efficient path. Before each recording sprint, we held brief alignment sessions: experimenting with different techniques, sharing our learnings and then converging on the most efficient fold sequence.
 
 ### Tips for Good Data Collection
 
-1. **Practice before you record.** Consistent, deliberate demonstrations are more valuable than fast, imprecise ones.
-2. **Quality over speed. Always.** A fast but messy episode teaches bad habits that are hard to untrain.
-3. **Each action should make sense from the current observation alone.** Most models don't have history, so avoid motions that only work because *you* remember what happened 5 seconds ago.
-4. **Be consistent within episodes.** The model learns a coherent strategy more easily than movements that vary wildly each time.
-5. **Start small, then extend.** Train a quick model, see what fails, then add diversity. Don't try to collect the perfect dataset on day one.
-6. **Speed comes last.** Once you've dialed in quality and a consistent strategy, optimize for speed. But never sacrifice quality for it.
+After weeks of collecting data across operators, these are the guidelines we found most useful:
+
+1. **Practice before you record.** Consistent, deliberate demonstrations are more valuable than hesitant or inconsistent ones.
+2. **Quality over speed.** High quality task execution is more valuable than fast, sloppy ones.
+3. **Be consistent within episodes.** The model learns a coherent strategy more easily than movements that vary wildly each time.
+4. **Start small, then extend.** Train a quick model, see what fails, then add diversity. Don't try to collect the perfect dataset on day one.
+5. **Speed after quality.** Once you've dialed in quality and a consistent strategy, optimize for speed. But never sacrifice quality for it.
+
+### What we ended up with
+
+After multiple weeks of collection across 8 setups we had **5,688 episodes**, the **full dataset**. Not all of them are equally useful: some contain hesitations, inconsistent strategies, or poor fold quality. Later in the project, we built a smaller **high-quality dataset** of 1,200 episodes by selecting the best recordings from the full set and adding new demonstrations collected with a more unified strategy.
+
+| Metric | Full dataset | High-quality dataset |
+|:---|:---:|:---:|
+| Total episodes | **5,688** | **1,200** |
+| Total frames | **14.1M** | **3.2M** |
+| Total hours | **~131 h** | **~30 h** |
+| FPS | **30** | **30** |
+| Cameras | **3** (base 480×640, wrists 720×1280) | **3** (same) |
+| Action dims | **16** (7 joints + gripper × 2 arms) | **16** (same) |
+
+All data is stored in the [**LeRobotDataset v3.0**](https://huggingface.co/blog/lerobot-datasets-v3) format, which encodes camera streams as video rather than individual images. This makes the dataset **20x–40x more compressed** compared to storing raw frames, making it practical to share and stream datasets of this scale.
+
+The grid below shows one frame from each of 100 different episodes. Notice the variation in t-shirt color, background and camera viewpoint.
+
+<Wide>
+<img src={diversityGridImg.src} alt="Trajectory diversity grid showing variation in t-shirt color, background, camera viewpoint, and robot height" style="width:100%; border-radius: 8px;" />
+</Wide>
+
+Explore the dataset yourself with the [LeRobot Data Visualizer](https://huggingface.co/spaces/lerobot/visualize_dataset):
 
-After learning all these things and collecting data for multiple weeks we ended up with 5,688 episodes across 8 setups. 
+<Wide>
+<div className="card" style="overflow: hidden; border-radius: 10px; height: 640px;">
+  <iframe src="https://lerobot-visualize-dataset.hf.space/?path=%2Flerobot%2Fhigh_quality_folding%2Fepisode_0" width="125%" height="1000" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="border: none; transform: scale(0.8); transform-origin: top left;"></iframe>
+</div>
+</Wide>

app/src/content/chapters/folding/05-data-diversity.mdx

@@ -3,7 +3,7 @@ import diversityGridImg from "../../assets/image/lerobot-data-collection_level12
 
 ## Data Overview
 
-After weeks of collection we had **5,688 episodes** across 8 setups. Not all of them are equally useful — later we curated a smaller, high-quality subset. Here are both datasets side by side:
+After weeks of collection we had **5,688 episodes** across 8 setups, the **full dataset**. Not all of them are equally useful: some contain hesitations, inconsistent strategies, or poor fold quality. Later in the project, we built a smaller **high-quality dataset** of 1,200 episodes by selecting the best recordings from the full set and adding new demonstrations collected with a more unified strategy. Here are both side by side:
 
 ### Dataset Statistics
 

app/src/content/chapters/folding/06-training.mdx

@@ -6,23 +6,24 @@ import HtmlEmbed from "../../../components/HtmlEmbed.astro";
 
 ## Model and Evaluation Setup
 
-Before diving into experiments, let's establish the model architecture we're training and how we measure performance. These stay constant across every iteration.
+Before diving into experiments, let's establish the model we're training and how we measure performance. These stay constant across every iteration.
 
 ### Model Architecture
 
-At its core, the model is a **Vision-Language-Action (VLA)** model. It takes in camera images and a task description, and outputs actions — joint angle targets and gripper commands — for the next second, at a frequency of 30Hz.
+The dominant approach in robot learning today is to train a **Vision-Language-Action (VLA)** model: a single neural network that takes in camera images and a task description and outputs motor commands. The recipe most labs follow is to **pretrain** a VLA on large, multi-robot, multi-task datasets to learn general visual and manipulation priors, then **fine-tune** it on data from your specific robot and task. Several strong pretrained VLAs exist: [π0](https://huggingface.co/docs/lerobot/pi0), [π0.5](https://huggingface.co/docs/lerobot/pi05), [GR00T](https://developer.nvidia.com/isaac/gr00t), [SmolVLA](https://huggingface.co/docs/lerobot/smolvla), among others. We chose to use **π0 and π0.5** because they showed the strongest performance in our early experiments, likely due to the scale of their pretraining data. We start from the **pretrained checkpoints** and fine-tune on our folding data.
 
 <Wide>
 <HtmlEmbed
   id="pi05-sarm-arch"
   src="folding/pi05-sarm-architecture.html"
-  title="π0.5 + SARM Architecture"
-  desc="Interactive system overview. <strong>Full System</strong> shows how the π0.5 VLA and SARM reward model work together. <strong>π0.5 Detail</strong> zooms into the VLM backbone, attention pattern, and flow matching action expert. <strong>SARM Detail</strong> shows the two-transformer reward model with stage classification and subtask progress prediction. Hover any component for details."
+  title="π0.5 Architecture"
+  desc="Data flows left to right. Three inputs are fused in the VLM backbone, then the action expert generates motor commands via flow matching. Hover any component for details."
+  config={{ initialTab: "pi05", hideTabBar: true }}
   frameless
 />
 </Wide>
 
-The model generates actions through **flow matching**, a generative approach that transforms random noise into coherent action sequences, conditioned on what the cameras see and what the motors are doing. This allows the model to represent **multi-modal action distributions**: when there are multiple valid ways to grasp a sleeve or start a fold, the model can capture that ambiguity rather than averaging to a meaningless middle ground.
+The model takes in three things: **camera images** (3 views: base + 2 wrist), **joint angles** (16D: 7 joints + gripper per arm), and a **language prompt** ("fold the t-shirt"). The images pass through a frozen **SigLIP** vision encoder that converts raw pixels into visual tokens, a compact representation the rest of the model can work with. Those visual tokens, the text, and the joint state all feed into the **Gemma VLM backbone** (2B parameters), which fuses the three modalities through cross-attention. This is where the model builds its understanding of the scene: what the shirt looks like, where the arms are, and what it's supposed to do. The backbone's output then conditions the **Action Expert** (300M parameters), which uses **flow matching** to turn random Gaussian noise into a coherent sequence of 30 actions, which equals one second of joint targets and gripper commands. Flow matching lets the model represent **multi-modal action distributions**: when there are multiple valid ways to grasp a sleeve, it can capture that ambiguity rather than averaging to a meaningless middle ground.
 
 <Sidenote>
   Flow matching is closely related to diffusion models but uses a simpler, more direct interpolation path between noise and data. 
@@ -30,43 +31,23 @@ The model generates actions through **flow matching**, a generative approach tha
 
 #### [Real-Time Chunking (RTC)](https://huggingface.co/docs/lerobot/rtc)
 
-RTC is crucial for real-world deployment. Instead of waiting for the predicted action chunk to finish before generating the next, RTC generates the next chunk while executing the current one. It "freezes" actions that are already committed and "inpaints" the remaining ones, producing smooth asynchronous motion. In practice, this sped up our rollouts by at least a factor of 2.
+The model outputs 30 actions at once (a "chunk"), but generating that chunk takes ~100..200ms, during which the robot is still moving. Without RTC, the robot would **pause** between chunks while waiting for the next prediction, producing jerky stop-and-go motion. RTC solves this by generating the next chunk **while the current one is still executing**. The key idea: by the time the new chunk is ready, several actions from the old chunk have already been executed and can't be changed, so RTC **freezes** those committed actions and **inpaints** the rest of the new chunk to be consistent with them. This produces smooth, continuous motion with no pauses.
 
-```mermaid
-sequenceDiagram
-    participant R as Robot
-    participant M as Model
-    loop Every execution_horizon steps
-        R->>M: Current observation
-        M->>R: Action chunk (30 steps)
-        Note over R: Execute while next chunk generates
-    end
-```
-
-All experiments use **RTC** with an action queue size of 30 and a maximum action horizon of 20, along with **action interpolation** (upsampling from 30 Hz to 90 Hz) which makes the robot much quieter and smoother.
-
-### Models
-
-We focused on two VLA architectures for our cloth folding data:
-
-- **π0** the base flow-matching VLA, trained with standard imitation learning
-- **[π0.5](https://huggingface.co/docs/lerobot/pi05)** an improved variant with more pretraining and several improvements to the flow matching denoising process
+<HtmlEmbed
+  id="rtc-explainer"
+  src="folding/rtc-explainer.html"
+  title="Real-Time Chunking"
+  desc="Toggle between synchronous and RTC mode. In synchronous mode, the robot idles during inference. RTC overlaps inference with execution, freezing committed actions (locked) and inpainting the rest. Press play to see the timing."
+  frameless
+/>
 
-Both are finetuned from pretrained checkpoints. Starting from this pretrained foundation rather than training from scratch gives the model a head start on visual understanding and basic manipulation concepts.
+In practice, RTC sped up our rollouts by at least a factor of 2 compared to synchronous inference.
 
-### Training Setup
+All experiments use **RTC** with an action queue size of 30 and a maximum action horizon of 20, along with **action interpolation** (upsampling from 30 Hz to 90 Hz) which makes the robot much quieter and smoother.
 
-| Parameter | Value |
-|:---|:---:|
-| GPUs | **8x H100** |
-| Batch size | **32** (with gradient accumulation), total batch size is 256 |
-| Action chunk size | **30** |
-| Optimizer | AdamW |
-| Learning rate | **1e-4** (with warmup + cosine decay) |
+### Training recipe
 
-<Sidenote>
-  Multi-GPU training with 8xH100 and gradient accumulation was necessary to fit the large batch sizes needed for stable VLA training.
-</Sidenote>
+We fine-tune two variants of this architecture: **π0**, the base flow-matching VLA, and **π0.5**, an improved version with more pretraining data and refinements to the denoising process. Both start from pretrained checkpoints. Training runs on **8× H100 GPUs** with a per-GPU batch size of 32 (a total batch size of 256), gradient accumulation, and using **AdamW** with a learning rate of **1e-4** (warmup + cosine decay). The large batch size is important for stable VLA training, and it's what drives the multi-GPU requirement.
 
 ---
 
@@ -82,15 +63,15 @@ For every experiment, we evaluate the model on:
 Each t-shirt fold is attempted **twice consecutively**, giving **10 rollouts per level** and **20 rollouts total per experiment**. Every evaluation is filmed and scored from video afterward, so judgment is decoupled from execution.
 
 <Note>
-  The evaluation protocol t-shirts, attempts count, scoring rubric, and filming setup is identical across every experiment.
+  The evaluation protocol (t-shirts, attempts count, scoring rubric, and filming setup) is identical across every experiment.
 </Note>
 
 ### Metrics
 
 We report four complementary metrics:
 
-1. **Success Rate** Binary pass/fail per rollout.
-2. **Score** Partial credit based on subtasks completed. This distinguishes a model that consistently reaches Fold 3 from one that fails at Unfold, even if neither achieves full success.
+1. **Success Rate.** Binary pass/fail per rollout.
+2. **Score.** Partial credit based on subtasks completed. This distinguishes a model that consistently reaches Fold 3 from one that fails at Unfold, even if neither achieves full success.
 
 <Accordion title="Scoring rubric Level 1 and Level 2">
 

app/src/content/chapters/folding/08-ablations.mdx

@@ -22,23 +22,11 @@ We started with the simplest possible recipe: train π0 and π0.5 on the full da
 | 1.1 | π0 | All data (5,688 episodes) | 200k | Baseline |
 | 1.2 | π0.5 | All data (5,688 episodes) | 200k | Baseline |
 
-The loss curves show both models converging, but convergence of loss for robotics doesn't necessarily mean good performance:
+When we evaluated, the results were mixed. Experiment 1.1 (π0) achieved 40% total success rate (80% Level 1) but 0% Level 2. Experiment 1.2 (π0.5) managed only 20% total (40% Level 1), also with 0% Level 2. The models could sometimes fold a laid-out shirt, but they were slow and produced poor-quality folds. Level 2 (spreading a messy shirt before folding) was completely out of reach.
 
-<Wide>
-<HtmlEmbed
-  id="loss-curves"
-  src="folding/loss-curves.html"
-  title="Training Loss"
-  desc="Click legend entries to toggle runs. <strong>Series 1</strong>: trained from pretrained checkpoints on full data (200k steps). <strong>Series 2</strong>: fine-tuned on curated high-quality data (100k steps)."
-  frameless
-/>
-</Wide>
+Watching the rollouts, we suspected that the problem was in the data. Different operators used different grip points and strategies for unspreading the shirt, and the diversity in our dataset was high. The model didn't converge enough and was producing indecisive motions.
 
-When we evaluated, the results were disappointing. Experiment 1.1 (π0) achieved 40% Level 1 success but 0% Level 2. Experiment 1.2 (π0.5) managed only 20% total success rate, also with 0% Level 2. The models could sometimes fold a laid-out shirt, but they were slow, and produced poor-quality folds. Level 2, spreading a messy shirt before folding was completely out of reach.
-
-Watching the rollouts, the problem was clear: the policy had learned the *average* of many different folding strategies in the dataset. Different operators used different grip points, different fold sequences, and different speeds. The model averaged over all of them, producing indecisive, hesitant motions.
-
-One early lesson: **undertraining makes the policy shaky**. Make sure your model has converged before drawing conclusions about what works.
+An additional early lesson: **undertraining makes the policy shaky**. Make sure your model has converged before drawing conclusions about what works.
 
 ---
 
@@ -55,7 +43,26 @@ We filtered episodes in two ways:
 
 #### Stage-Aware Reward Modeling (SARM)
 
-To go beyond binary keep/discard filtering, we trained a reward model: **[SARM](https://huggingface.co/docs/lerobot/sarm)** (Stage-Aware Reward Modeling). SARM is a learned "critic" that scores trajectories based on how well the robot is progressing toward task completion. It predicts a 0–1 progression signal at every timestep, correctly identifying **mistakes** (drops in value) and **progress** (increases) in real time:
+To go beyond binary keep/discard filtering, we trained a reward model: **[SARM](https://huggingface.co/docs/lerobot/sarm)** (Stage-Aware Reward Modeling). The core problem SARM solves: how do you measure "progress" in a long, multi-stage task like t-shirt folding, where demonstrations vary wildly in length and strategy? You can't just use elapsed time, a shirt that's fully flattened might happen at frame 200 in one demo and frame 800 in another. SARM instead learns a semantic notion of progress that generalizes across demonstrations.
+
+**How it works.** SARM is a **vision-language** reward model built on a frozen [CLIP](https://openai.com/index/clip/) backbone. It takes **8 RGB frames** (sampled 1 second apart from the base camera), a **task description** ("fold the t-shirt"), and the robot's **joint state**. The language conditioning means the same model could in principle score different tasks; it's not hard-coded to folding.
+
+The images and text are encoded by CLIP into embeddings. These flow into a **Stage Transformer**, which classifies which subtask the robot is in (e.g., "grab", "flatten", "fold", "place"), and a **Subtask Transformer**, conditioned on the predicted stage, which estimates fine-grained progress τ within that stage. The final output is a single progress score (`stage + τ`, normalized to [0, 1]). This two-level decomposition makes the reward signal stable across demonstrations of different lengths and styles: a fully flattened shirt always maps to roughly the same progress value, regardless of how long it took to get there. The score is used downstream for **data curation** (ranking episodes by quality) and **RABC training weights** (emphasizing high-progress actions during policy training).
+
+<Wide>
+<HtmlEmbed
+  id="sarm-architecture"
+  src="folding/pi05-sarm-architecture.html"
+  title="SARM Architecture"
+  desc="Data flows left to right. Inputs are encoded by CLIP, then two transformers predict stage and within-stage progress. The resulting score is used for data curation and training weights. Hover any component for details."
+  config={{ initialTab: "sarm", hideTabBar: true }}
+  frameless
+/>
+</Wide>
+
+**Training data.** SARM supports multi-stage annotations, but we use it in **single-stage mode**: the entire task (Level 2, which includes Level 1) is treated as one stage with progress going linearly from 0 to 1. This means no human subtask annotation is needed, progress labels are derived directly from the frame index within each episode.
+
+Once trained, SARM can score *any* trajectory, including noisy demonstrations it was never trained on. It predicts a 0–1 progression signal at every timestep, correctly identifying **mistakes** (drops in value) and **progress** (increases) in real time:
 
 <Wide>
 <Stack layout="3-column" gap="small">
@@ -69,13 +76,13 @@ We annotated every episode in both datasets using SARM. This gave us continuous
 
 ---
 
-### Algorithmic improvements
+### Better training recipes
 
-With cleaner data and SARM scores in hand, we systematically tested three algorithmic improvements.
+With cleaner data and SARM scores in hand, we turned to how the model trains on that data.
 
 #### Relative actions
 
-Following the [UMI](https://arxiv.org/abs/2402.10329) approach, we switched from absolute actions to **relative trajectories**: each action in the chunk is an offset from the robot's current state at prediction time, not from the previous action. The state observation remains absolute — only the action targets are relative. This avoids error accumulation (unlike true delta) and doesn't require a global coordinate frame (unlike absolute).
+Following the [UMI](https://arxiv.org/abs/2402.10329) approach, we switched from absolute actions to **relative action trajectories**: each action in the chunk is an offset from the robot's current state at prediction time, not from the previous action. The state observation remains absolute; only the action targets are relative. This avoids error accumulation (unlike true delta).
 
 <HtmlEmbed
   id="action-representations"
@@ -84,9 +91,9 @@ Following the [UMI](https://arxiv.org/abs/2402.10329) approach, we switched from
   desc="Relative trajectory (blue) references all actions to the current state. Delta (yellow) chains each action to the previous one, accumulating error. Absolute (red) requires a global coordinate frame. Diagram adapted from UMI (Chi et al., 2024)."
 />
 
-See the [LeRobot action representations docs](https://huggingface.co/docs/lerobot/action_representations) for a full guide.
+See the [LeRobot action representations docs](https://huggingface.co/docs/lerobot/main/en/action_representations) for a full guide.
 
-The result: experiment 1.3 (π0.5 + relative actions + quantile normalization) jumped to **35% total success rate and 70% Level 1**, up from 1.2's 20% total and 40% Level 1. The improvement was consistent across every comparison we made.
+The result: experiment 1.3 (π0.5 + relative actions) jumped to **35% total success rate and 70% Level 1**, up from 1.2's 20% total and 40% Level 1. 
 
 <Sidenote>
   π0.5 is likely pretrained with relative actions, so 1.3 fine-tunes in a regime consistent with pretraining, while 1.2 fine-tunes against it.
@@ -94,52 +101,63 @@ The result: experiment 1.3 (π0.5 + relative actions + quantile normalization) j
 
 #### RABC (Reward-Advantage-Based Conditioning)
 
-Next, we put SARM's per-timestep scores to work during training. With **RABC**, every episode is weighted by its contribution to progress: high-reward actions contribute more to the loss, low-reward ones contribute less. Negative progress is clipped to 0. Unlike binary success/fail labels, this provides a continuous signal at every timestep.
+Next, we put SARM's per-timestep scores to work during training with **[RABC](https://huggingface.co/docs/lerobot/sarm)** (Reward-Aligned Behavior Cloning). Standard behavior cloning treats every action in the dataset equally. RABC instead computes a per-timestep "progress delta" from SARM (the change in predicted task progress over one action chunk) and uses it to weight the training loss. A threshold κ controls how selective the weighting is: actions with progress above κ get full weight, those below are softly down-weighted, and negative-progress actions are clipped to zero weight entirely. The result is that the policy focuses on the best moments in each demonstration without discarding entire episodes.
 
-Experiments 1.4 and 1.5 tested RABC with different κ values (0.01 and 0.0215). Both showed improvement, with 1.5's higher κ performing slightly better.
+<HtmlEmbed
+  id="rabc-explainer"
+  src="folding/rabc-explainer.html"
+  title="How RABC works"
+  desc="Top: SARM progress curve for a simulated episode. Background color shows where progress advances (green), stalls (yellow), or regresses (red). Bottom: the resulting per-timestep training weight. Drag the κ slider to see how selectivity changes."
+/>
 
 #### Combining everything
 
-Experiment 1.7 combined all three improvements: **relative actions + RABC + quantile normalization**. The result: **40% total success rate, 80% Level 1** — the best of Series 1.
+Experiment 1.7 combined **relative actions + RABC**. The result: **40% total success rate, 80% Level 1**, the best of initial training.
 
 | Experiment | Key change | Total SR | Level 1 SR | Level 2 SR |
 |:---:|:---|:---:|:---:|:---:|
-| 1.1 | π0 baseline | 20% | 40% | 0% |
+| 1.1 | π0 baseline | 40% | 80% | 0% |
 | 1.2 | π0.5 baseline | 20% | 40% | 0% |
-| 1.3 | + Relative actions | 35% | 70% | 0% |
-| 1.4 | + RABC (κ=0.01) | 25% | 50% | 0% |
-| 1.5 | + RABC (κ=0.0215) | 30% | 60% | 0% |
-| 1.7 | Relative + RABC + QUANTILES | **40%** | **80%** | **0%** |
+| 1.3 | π0.5 + Relative actions | 35% (+15) | 70% (+30) | 0% (+0) |
+| 1.7 | π0.5 + Relative + RABC | **40%** (+20) | **80%** (+40) | **0%** (+0) |
 
-The trend was encouraging, but one number was impossible to ignore: **every Series 1 experiment achieved exactly 0% Level 2 success**. Algorithmic improvements alone couldn't compensate for the inconsistency in the full dataset.
+The trend was encouraging, but one number was impossible to ignore: **every initial-training experiment achieved exactly 0% Level 2 success**. Algorithmic improvements alone couldn't compensate for the inconsistency in the full dataset.
 
 #### DAgger: targeted corrections
 
-We also explored **DAgger** (Dataset Aggregation) as a way to fix specific failure modes. The idea: the operator watches the policy run, pauses when it fails, teleoperates a recovery, and hands control back. This generates correction data precisely where the model struggles.
+Throughout our work on Level 1, we developed and integrated **DAgger** (Dataset Aggregation) as a [Human-in-the-Loop (HIL)](https://github.com/huggingface/lerobot/tree/main/examples/hil) data collection method in LeRobot. The idea: the operator watches the policy run, pauses when it fails, teleoperates a recovery, and hands control back. This generates correction data precisely where the model struggles.
+
+<HtmlEmbed
+  id="dagger-explainer"
+  src="folding/dagger-explainer.html"
+  title="DAgger Loop"
+  desc="The DAgger cycle: the policy runs until it fails, a human operator takes over to demonstrate the correct recovery, and the correction is recorded as new training data. Click to advance manually."
+  frameless
+/>
 
-DAgger felt promising — corrections targeting the model's actual failure modes should be highly effective at pushing success rates higher. The full [Human-in-the-Loop infrastructure](https://github.com/huggingface/lerobot/tree/main/examples/hil) is now merged into LeRobot for anyone to use.
+We didn't test DAgger in an isolated experiment, but added the correction data to both the full dataset and the high-quality dataset. In our early experiments, using DAgger to collect targeted corrections proved very beneficial for making the policy more robust to failures, the model learns to recover from states it would otherwise get stuck in. The full [Human-in-the-Loop infrastructure](https://github.com/huggingface/lerobot/tree/main/examples/hil) is now merged into LeRobot for anyone to use.
 
 ---
 
 ### The breakthrough: high-quality data
 
-No Series 1 experiment cracked Level 2. We needed a fundamentally better dataset.
+No initial-training experiment cracked Level 2. We needed a fundamentally better dataset.
 
-We went back to data collection with a clear plan: collect new demonstrations specifically for Level 1 and Level 2, with a **unified strategy** across operators. Every episode followed the same grip points, the same fold sequence, the same timing. We also manually curated the best episodes from the large dataset, selecting only those with consistent technique and clear progress.
+We went back to data collection with a clear plan: collect new demonstrations, with a more **unified strategy** across operators. Every episode followed the similar grip points, sequences and timing. We also manually curated the best episodes from the large dataset, selecting only those with consistent technique and clear progress.
 
-The result was the **high-quality dataset**: 1,200 episodes combining the best of the original data with new, strategically collected demonstrations. Less data, but dramatically better data.
+The result was the **high-quality dataset**: 1,200 episodes combining the best of the original data with new, strategically collected demonstrations. 
 
-**Series 2** fine-tuned the best Series 1 checkpoints on this curated dataset for 100k steps:
+We then **fine-tuned** the best initial-training checkpoints on this curated dataset for 100k steps:
 
 | Experiment | Base | Key change | Total SR | Level 1 SR | Level 2 SR |
 |:---:|:---:|:---|:---:|:---:|:---:|
-| 2.1 | 1.3 | HQ data only | 35% | 70% | 0% |
-| 2.2 | 1.3 | HQ + RABC + Relative | **75%** | **100%** | **50%** |
-| 2.5 | 1.7 | HQ + RABC + Relative | **90%** | **100%** | **80%** |
+| 2.1 | 1.3 | HQ data only | 40% (+5) | 70% (+0) | 10% (+10) |
+| 2.2 | 1.3 | HQ + RABC + Relative | **75%** (+40) | **100%** (+30) | **50%** (+50) |
+| 2.5 | 1.7 | HQ + RABC + Relative | **90%** (+50) | **100%** (+20) | **80%** (+80) |
 
-The jump was dramatic. Experiment 2.5 reached **90% total success rate** — 100% Level 1, 80% Level 2 — up from 40% in Series 1. The same architecture, the same training recipe, just better data.
+The jump was dramatic. Experiment 2.5 reached **90% total success rate**: 100% Level 1, 80% Level 2, up from 40% with initial training. The same architecture, the same training recipe, just better data.
 
-Both 2.2 and 2.5 used the same recipe (HQ + RABC + Relative Actions), but 2.5 fine-tuned from 1.7 (the stronger base with relative actions + RABC already baked in) while 2.2 fine-tuned from 1.3. The difference (75% → 90%) likely reflects this stronger starting point. Data quality was the single biggest lever, and RABC's effect was strongest on **Level 2** — the longer, harder task where emphasizing the best demonstrations mattered most.
+Both 2.2 and 2.5 used the same recipe (HQ + RABC + Relative Actions), but 2.5 fine-tuned from 1.7 (the stronger base with relative actions + RABC already baked in) while 2.2 fine-tuned from 1.3. The difference (75% → 90%) likely reflects this stronger starting point. Data quality was the single biggest lever, and RABC's effect was strongest on **Level 2**, the longer, harder task where emphasizing the best demonstrations mattered most.
 
 ---
 
@@ -147,7 +165,8 @@ Both 2.2 and 2.5 used the same recipe (HQ + RABC + Relative Actions), but 2.5 fi
 
 Not every idea improved results:
 
-- **Mirroring augmentation** (experiment 2.3): only 5% total success rate. Mirroring the data doubles the number of valid strategies the model sees, which is the opposite of what we needed — convergence on a single consistent approach.
+- **RABC on the full dataset** (experiments 1.4, 1.5; without relative actions): we applied SARM's reward weighting directly during initial training on the full dataset, with different selectivity thresholds. Both performed worse than the baseline (1.4: 15% total, 1.5: 0% total). The reward model was only trained on the high-quality dataset, so when applied to the larger dataset it likely down-weighted too much Level 1 data, meaning the model couldn't reliably accomplish the first steps of the task.
+- **Mirroring augmentation** (experiment 2.3): only 5% total success rate. Mirroring the data doubles the number of valid strategies the model sees, which is the opposite of what we needed: convergence on a single consistent approach.
 - **Larger chunk size** (experiment 2.4, chunk=45): no improvement over the default chunk size of 30.
 
 ---
@@ -156,76 +175,48 @@ Not every idea improved results:
 
 Now that the full journey is clear, here is the complete picture across all 11 experiments.
 
-<Wide>
-
-| # | Model | Base data | Steps | Normalization | Key experiment |
-|:---:|:---:|:---|:---:|:---:|:---|
-| 1.1 | π0 | All data | 200k | MEAN_STD | Baseline |
-| 1.2 | π0.5 | All data | 200k | MEAN_STD | Baseline |
-| 1.3 | π0.5 | All data | 200k | QUANTILES | Relative Action |
-| 1.4 | π0.5 | All data | 200k | MEAN_STD | Reward model (SARM) with RABC κ=0.01 |
-| 1.5 | π0.5 | All data | 200k | MEAN_STD | Reward model (SARM) with RABC κ=0.0215 |
-| 1.7 | π0.5 | All data | 200k | QUANTILES | Relative Action + Reward model (SARM) with RABC κ=0.0215 |
-| 2.1 | π0.5 | High-quality only | 100k | QUANTILES | Fine-tune from 1.3 |
-| 2.2 | π0.5 | High-quality only | 100k | QUANTILES | Fine-tune from 1.3 + Reward model (SARM) with RABC κ=0.0265 + Relative Action |
-| 2.3 | π0.5 | High-quality + mirrored | 100k | QUANTILES | Fine-tune from 1.3 + Relative Action + image transforms + mirroring setup (data augmentation) |
-| 2.4 | π0.5 | High-quality only | 100k | QUANTILES | Fine-tune from 1.3 · chunk=45 |
-| 2.5 | π0.5 | High-quality only | 100k | QUANTILES | Fine-tune from 1.7 + Reward model (SARM) with RABC κ=0.0265 + Relative Action |
-
-</Wide>
-
-<HtmlEmbed
-  id="success-rates"
-  src="folding/success-rates.html"
-  title="Success Rates by Experiment"
-  desc="Success rates (Total, Level 1, Level 2) across all experiments. Series 1 trains from scratch on full data; Series 2 finetunes the best Series 1 checkpoint on curated high-quality data."
-/>
+| # | Model | Data | Steps | Key change |
+|:---:|:---:|:---|:---:|:---|
+| 1.1 | π0 | All | 200k | Baseline |
+| 1.2 | π0.5 | All | 200k | Baseline |
+| 1.3 | π0.5 | All | 200k | Relative actions |
+| 1.4 | π0.5 | All | 200k | RABC κ=0.01 |
+| 1.5 | π0.5 | All | 200k | RABC κ=0.0215 |
+| 1.7 | π0.5 | All | 200k | Rel + RABC κ=0.0215 |
+| 2.1 | π0.5 | HQ | 100k | From 1.3 |
+| 2.2 | π0.5 | HQ | 100k | From 1.3 + RABC + Rel |
+| 2.3 | π0.5 | HQ + mirror | 100k | From 1.3 + Rel + mirroring |
+| 2.4 | π0.5 | HQ | 100k | From 1.3 · chunk=45 |
+| 2.5 | π0.5 | HQ | 100k | From 1.7 + RABC + Rel |
 
 <HtmlEmbed
-  id="total-score"
-  src="folding/total-score.html"
-  title="Total Score by Experiment"
-  desc="Overall score (% of maximum 1500) per experiment. The dashed line marks 50% as a reference point."
+  id="experiment-results"
+  src="folding/experiment-results.html"
+  title="Experiment Results"
+  desc="Bars show success rate for the selected level; balloons show Bayesian Beta posterior. Letters above each bar are CLD groups from STEP sequential testing (Bonferroni α=0.10/55). Shared letter means not significantly different. Toggle between Total, Level 1, and Level 2 to re-sort and update. Hover for details."
 />
 
-Total score captures partial progress that binary success rate misses. Even failed rollouts earn credit for completed subtasks, revealing that some Series 1 experiments make meaningful progress despite 0% Level 2 success.
+Total score captures partial progress that binary success rate misses: even failed rollouts earn credit for completed subtasks. The CLD letters (from **[STEP](https://tri-ml.github.io/step/)** sequential testing with **Bonferroni correction**, α = 0.10, per-pair α < 0.0018, n<sub>max</sub> = 50, following [TRI's statistical evaluation framework](https://medium.com/toyotaresearch/statistical-thinking-for-robot-policy-evaluation-from-rigorous-a-b-testing-to-effective-0ae886fbd68d)) tell a clear story: **fine-tuning separates from initial training**. Experiments 2.5 and 2.2 form group 'a', statistically distinct from the bulk of initial-training experiments which cluster in groups 'c' and 'd'. Within initial training, no experiment separates from another, meaning none of the algorithmic changes (RABC, relative actions, normalization) produced a statistically detectable improvement on their own when trained on the full dataset. The jump only comes from switching to curated high-quality data in fine-tuning. Toggle to Level 2 and the separation is even starker: every initial-training experiment sits in group 'b' with 0% success, while 2.5 stands alone in group 'a'.
 
-<HtmlEmbed
-  id="l1-time-quality"
-  src="folding/l1-time-quality.html"
-  title="Level 1 Completion Time vs. Fold Quality"
-  desc="Each bubble is one experiment. X-axis = completion time (faster is left), Y-axis = fold quality (higher is better), bubble size = total success rate. The best experiments cluster in the top-left corner."
-/>
-
-Speed and quality correlate strongly with data quality. Series 2 experiments fold 2–3x faster than Series 1 (40s vs 100s+), and fold quality only breaks past 3.0 with high-quality training data. Faster isn't a separate goal from better — it's a consequence of the policy learning a clear, unambiguous strategy.
+Success rate isn't the full picture. A policy that succeeds but takes twice as long or produces sloppy folds isn't really better. The heatmap below breaks down per-subtask timing and fold quality across experiments, revealing which policies are not just more reliable but also faster and more precise:
 
 <HtmlEmbed
   id="subtask-heatmap"
   src="folding/subtask-heatmap.html"
   title="Subtask Timing Heatmap"
-  desc="Average time (seconds) per subtask across all experiments. Green is fast, red is slow. Dashes indicate the subtask was never completed."
+  desc="Each cell shows the experiment's time relative to the cross-experiment average for that subtask (1.0× = average). The two summary columns after the divider show aggregate L1 completion time and fold quality (1–5). Hover for absolute times. Empty cells indicate the subtask was never completed."
 />
 
+Speed and quality correlate strongly with data quality: fine-tuned experiments fold 2–3× faster than initial training (40s vs 100s+), and fold quality only breaks past 3.0 with high-quality training data. Faster isn't a separate goal from better: it's a consequence of the policy learning a clear, unambiguous strategy.
+
 ### Where the policies fail
 
-Understanding *how* each experiment fails — not just whether it fails — is essential for knowing what to try next.
+Understanding *how* each experiment fails, not just whether it fails, is essential for knowing what to try next. The chart below breaks down every failed rollout by the subtask where the policy got stuck. Level 2 failures are dominated by "Unfold", most initial-training policies can't reliably spread a messy shirt, so they never reach the folding steps. Fine-tuning dramatically reduces unfold failures (2.5 has just 2). Switch to Level 1 (where unfolding is skipped) and the pattern shifts: failures spread across mid-task folds, and the best fine-tuned experiments nearly eliminate them entirely.
 
 <HtmlEmbed
   id="failure-analysis"
   src="folding/failure-analysis.html"
   title="Failure Analysis"
-  desc="Breakdown of failure modes across experiments for Level 2, Level 1, and combined. Use the tabs to switch between levels. Each bar shows which subtask the policy failed at, revealing where different experiments struggle."
-/>
-
-### Which differences are real?
-
-With 20 rollouts per experiment, not every visible gap is real. We run **[STEP](https://tri-ml.github.io/step/)** (Sequential Testing for Efficient Policy comparison) on all 55 pairs with **Bonferroni correction** (α = 0.10, per-pair α < 0.0018), following [TRI's statistical evaluation framework](https://medium.com/toyotaresearch/statistical-thinking-for-robot-policy-evaluation-from-rigorous-a-b-testing-to-effective-0ae886fbd68d). STEP is a sequential method, meaning we can extend the experiment with additional rollouts (up to n<sub>max</sub> = 50) without risking p-hacking, something batch tests like Barnard's don't allow. The chart below shows the full **Bayesian Beta posterior** over each policy's true success rate. **CLD letters** above each violin indicate which experiments are statistically separable, policies sharing a letter are not significantly different.
-
-<HtmlEmbed
-  id="statistical-analysis"
-  src="folding/statistical-analysis.html"
-  title="Statistical Analysis"
-  desc="Bayesian posterior distributions over each policy's true success rate, with Compact Letter Display (CLD) groups summarising statistical separability. Toggle between Total, Level 1, and Level 2."
+  desc="Breakdown of failure modes across experiments for Level 1, Level 2. Use the tabs to switch between levels. Each bar shows which subtask the policy failed at, revealing where different experiments struggle."
 />
 
-The CLD tells a clear story: **Series 2 separates from Series 1**. Experiments 2.5 and 2.2 form group 'a' — statistically distinct from the bulk of Series 1 experiments which cluster in groups 'c' and 'd'. Within Series 1, no experiment separates from another, meaning none of the algorithmic changes (RABC, relative actions, normalization) produced a statistically detectable improvement on their own when trained on the full dataset. The jump only comes from switching to curated high-quality data in Series 2. Toggle to Level 2 and the separation is even starker: every Series 1 experiment sits in group 'b' with 0% success, while 2.5 stands alone in group 'a'.

app/src/content/chapters/folding/09-learnings.mdx

@@ -8,16 +8,16 @@ Running all these experiments taught us a lot. Some expected, some not. Here's w
 
 Beyond the experiment findings above, several practical insights stood out:
 
-- **Train a reward model.** [SARM](https://huggingface.co/docs/lerobot/sarm) gave us data scoring, advantage conditioning, and curation in one package. We recommend it even for tasks where you think manual filtering would suffice.
+- **Train a reward model.** [SARM](https://huggingface.co/docs/lerobot/sarm) gave us data scoring, advantage conditioning, and curation in one package. 
 - **Invest in recording quality early.** More time upfront on clean and consistent recordings pays off more than extra volume.
-- **Record at higher frequency.** We'd record at 50 fps if we had to do it again. Folding is dynamic and higher record rates capture transitions better.
+- **Record/Teleoperate at higher frequency.** We'd record at 50 fps instead of 30 fps if we had to do it again. Folding is dynamic and higher record rates capture transitions better.
 
 ### For the community: the order of operations
 
 If you're training a policy for a new manipulation task with LeRobot, **here's the sequence we'd recommend**:
 
 1. **Define your task protocol first.** Before collecting a single episode, define exactly how the task should be performed. 
-2. **Collect 50–100 clean demonstrations.** Quality over volume. Consistent technique, good camera angles, deliberate motions. This is your foundation, everything else builds on it.
+2. **Collect 30-50 clean demonstrations per item/background** Quality over volume. Consistent technique, deliberate motions. This is your foundation, everything else builds on it.
 3. **Train a reward model.** Use [SARM](https://huggingface.co/docs/lerobot/sarm) to score your episodes and enable RABC during training. This allows the policy to focus on the best demonstrations, which is crucial for longer tasks.
 4. **Train a baseline and watch it fail.** Film the rollouts. Understanding *how* and *where* it breaks tells you exactly what kind of data to collect next.
 5. **Enable action interpolation and [RTC](https://huggingface.co/docs/lerobot/rtc).** This smooths transitions and speeds up execution. Action interpolation upsamples the policy's 30 Hz output to your robot's control frequency (e.g. 90 Hz), and RTC overlaps inference with execution. Both features are available at inference time with the corresponding flags:
@@ -31,7 +31,7 @@ python examples/rtc/eval_with_real_robot.py \
     --interpolation_multiplier=3
 ```
 
-6. **Find the right [action representation](https://huggingface.co/docs/lerobot/action_representations).** LeRobot uses absolute actions by default. Switching to relative trajectory was one of our key improvements, and unlocked consistency with π0.5 pretraining. To enable relative actions for π0/π0.5 using LeRobot, first precompute the relative action statistics for your dataset, then train with the flag enabled:
+6. **Find the right [action representation](https://huggingface.co/docs/lerobot/main/en/action_representations).** LeRobot uses absolute actions by default. Switching to relative trajectory was one of our key improvements, and unlocked consistency with π0.5 pretraining. To enable relative actions for π0/π0.5 using LeRobot, first precompute the relative action statistics for your dataset, then train with the flag enabled:
 
 ```bash
 # Precompute relative action stats
@@ -56,14 +56,10 @@ lerobot-train \
   All the innovations from this project [SARM](https://huggingface.co/docs/lerobot/sarm), [RTC](https://huggingface.co/docs/lerobot/rtc), DAgger, [OpenArm](https://huggingface.co/docs/lerobot/openarm), and OpenArm Mini are merged into [LeRobot repository](https://github.com/huggingface/lerobot). You can use our full pipeline as a starting point and swap in your own task.
 </Note>
 
-### What's next
+### The bigger picture
 
-This project is far from done. We're releasing the final model, full dataset, and all training configs on HF Hub. Here's where LeRobot is headed next:
+Across 11 experiments we varied models, action representations, reward weighting, and chunk sizes. Algorithmic changes moved success rates by 5–20 percentage points. Finetuning on a curated dataset one-fifth the size moved it by 50. The bottleneck wasn't the model, it was the data. That means you don't need thousands of hours or a fleet of robots to get strong results. You need dozens of hours of clean, consistent demonstrations and the tooling to score and curate them, which now exists in LeRobot.
 
-- **Massive-scale training.** We want LeRobot and LeRobotDataset to support 10–100x the data we used here, with billions of frames, powered by the new [HF Buckets](https://huggingface.co/docs/hub/en/storage-buckets) for storage and streaming at scale.
-- **More robots, teleoperators, VLAs, and reward models.** We're continuing to expand the ecosystem of supported hardware, teleoperation setups, and model architectures in LeRobot.
-- **Reinforcement Learning support.** Extending LeRobot with new reinforcement learning methods and all the infrastructure needed to train policies online, not just from offline demonstrations.
-- **Better data interpretability tools.** Our biggest lever was data quality, but finding *which* demonstrations help and which hurt is still a hard problem. The field needs tools that provide understanding of what makes a trajectory useful before you train on it. If you're exploring data curation or interpretability for robotics, we'd love to hear from you — [let's talk](https://huggingface.co/lerobot).
-- **Democratize robot learning.** Continue to lower the barrier to entry and share every insight, tool, and method with the community.
+### Build on this
 
-We also encourage you to use our dataset directly. Train your own policies, try new architectures, experiment with different training recipes. If you find something promising, we'd be happy to run your models on our physical setups and share the results back !
+We open-sourced everything: code, data, models, reward model, and now the full story of what worked and what didn't, so the community can push further. Use our [dataset](https://huggingface.co/datasets/lerobot/high_quality_folding) directly, try new architectures, experiment with different recipes. If you find something that works, we'd be happy to run your models on our physical setups and share the results back.

app/src/content/chapters/folding/12-references.mdx

@@ -23,11 +23,24 @@ This project would not have been possible without the contributions and support
 
 A special thank you to our robot operators, who spent countless hours patiently demonstrating shirt folds and collecting the high-quality data that made this entire project possible: **Shiyu Liu**, **Alison Magniez**, **Hamza Ben Taieb**, **Victor Gomez**, **Stéphane Combo**, **Domitille Bissery**, **Tiphaine de Cherisey**, **Nathalie Vi** and **Melaku Yemaneberhan**
 
+We also want to thank the [Enactic](https://github.com/enactic/openarm) team and [WowRobo](https://wowrobo.com/) for their support throughout this project.
+
 ### Papers
 
-- **π0.5** Black et al. (2025). *A Vision-Language-Action Model with Open-World Generalization.* [pi.website/blog/pi05](https://www.pi.website/blog/pi05) · [LeRobot docs](https://huggingface.co/docs/lerobot/pi05)
+#### Models we trained
+
+- **π0** Black et al. (2024). *π0: A Vision-Language-Action Flow Model for General Robot Control.* [arxiv.org/abs/2410.24164](https://arxiv.org/abs/2410.24164) · [LeRobot docs](https://huggingface.co/docs/lerobot/pi0)
+- **π0.5** Black et al. (2025). *π0.5: A Vision-Language-Action Model with Open-World Generalization.* [pi.website/blog/pi05](https://www.pi.website/blog/pi05) · [LeRobot docs](https://huggingface.co/docs/lerobot/pi05)
+
+#### Techniques we used
+
 - **RTC** Black, Galliker & Levine (2025). *Real-Time Execution of Action Chunking Flow Policies.* [pi.website/research/real_time_chunking](https://www.pi.website/research/real_time_chunking) · [LeRobot docs](https://huggingface.co/docs/lerobot/rtc)
 - **SARM** Chen et al. (2025). *Stage-Aware Reward Modeling for Long Horizon Robot Manipulation.* [arxiv.org/abs/2509.25358](https://arxiv.org/abs/2509.25358) · [LeRobot docs](https://huggingface.co/docs/lerobot/sarm)
+- **UMI** Chi et al. (2024). *Universal Manipulation Interface: In-The-Wild Robot Teaching Without In-The-Wild Robots.* [arxiv.org/abs/2402.10329](https://arxiv.org/abs/2402.10329)
 - **DAgger** Ross, Gordon & Bagnell (2011). *A Reduction of Imitation Learning and Structured Prediction to No-Regret Online Learning.* [arxiv.org/abs/1011.0686](https://arxiv.org/abs/1011.0686)
+- **HG-DAgger** Kelly et al. (2019). *HG-DAgger: Interactive Imitation Learning with Human Experts.* [arxiv.org/abs/1810.02890](https://arxiv.org/abs/1810.02890)
+- **RaC** Hu et al. (2025). *Robot Learning for Long-Horizon Tasks by Scaling Recovery and Correction.* [arxiv.org/abs/2509.07953](https://arxiv.org/abs/2509.07953)
+- **STEP** Mandalika et al. (2025). *STEP: A Statistical Testing Framework for Efficient Policy Evaluation.* [tri-ml.github.io/step](https://tri-ml.github.io/step/)
+
 
 *PS if you want to use this format for writing your own blog, check out the [Research Article Template](https://huggingface.co/spaces/tfrere/research-article-template).*

app/src/content/embeds/folding/action-representations.html

@@ -59,20 +59,20 @@ g.append('path').datum(poses).attr('d', line)
     .attr('stroke', '#444').attr('stroke-dasharray', '5,4').attr('stroke-width', 0.8);
 });
 g.append('text').attr('x', x(2)).attr('y', -4).attr('text-anchor', 'middle')
-  .attr('fill', SUB).attr('font-size', 9).text('Inference start at t=0');
+  .attr('fill', SUB).attr('font-size', 11).text('Inference start at t=0');
 g.append('text').attr('x', x(6)).attr('y', -4).attr('text-anchor', 'middle')
-  .attr('fill', SUB).attr('font-size', 9).text('Inference start at t=4');
+  .attr('fill', SUB).attr('font-size', 11).text('Inference start at t=4');
 
 // Axes
 g.append('line').attr('x1', x(0)).attr('x2', x(8.3)).attr('y1', h).attr('y2', h).attr('stroke', '#444');
 g.append('line').attr('x1', x(0)).attr('x2', x(0)).attr('y1', h).attr('y2', y(6.2)).attr('stroke', '#444');
 for (let t = 0; t <= 8; t++) {
   g.append('text').attr('x', x(t)).attr('y', h + 14).attr('text-anchor', 'middle')
-    .attr('fill', SUB).attr('font-size', 10).text(t);
+    .attr('fill', SUB).attr('font-size', 12).text(t);
 }
-g.append('text').attr('x', x(8.4)).attr('y', h + 4).attr('fill', SUB).attr('font-size', 10).text('Time');
+g.append('text').attr('x', x(8.4)).attr('y', h + 4).attr('fill', SUB).attr('font-size', 12).text('Time');
 g.append('text').attr('x', x(-0.1)).attr('y', y(6.4)).attr('text-anchor', 'end')
-  .attr('fill', SUB).attr('font-size', 10).text('Pose');
+  .attr('fill', SUB).attr('font-size', 12).text('Pose');
 
 // --- DELTA (yellow): straight arrows, offset below trajectory ---
 const dOff = 14;
@@ -112,7 +112,7 @@ const bY = h + 22;
     .attr('d', `M${x(t0)},${bY-3} L${x(t0)},${bY} L${x(t1)},${bY} L${x(t1)},${bY-3}`)
     .attr('fill', 'none').attr('stroke', COL_REL).attr('stroke-width', 1.2).attr('opacity', 0.5);
   g.append('text').attr('x', (x(t0) + x(t1)) / 2).attr('y', bY + 12)
-    .attr('text-anchor', 'middle').attr('fill', COL_REL).attr('font-size', 9).attr('opacity', 0.7)
+    .attr('text-anchor', 'middle').attr('fill', COL_REL).attr('font-size', 11).attr('opacity', 0.7)
     .text('chunk = 4');
 });
 
@@ -138,7 +138,7 @@ legItems.forEach(item => {
   }
   lx += sw + 6;
   const t = g.append('text').attr('x', lx).attr('y', legY + 6)
-    .attr('fill', item.col).attr('font-size', 10).attr('font-weight', 500).text(item.label);
+    .attr('fill', item.col).attr('font-size', 12).attr('font-weight', 500).text(item.label);
   lx += t.node().getComputedTextLength() + 16;
 });
 }

app/src/content/embeds/folding/dagger-explainer.html

@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: transparent; font-family: system-ui, -apple-system, sans-serif; }
+  .dagger-wrap { position: relative; width: 100%; }
+  .dagger-desc {
+    text-align: center; font-size: 14px; font-weight: 500;
+    min-height: 36px; padding: 2px 20px; line-height: 1.6;
+    transition: color 0.3s;
+  }
+</style>
+</head>
+<body>
+<div class="dagger-wrap">
+  <svg id="dagger-svg"></svg>
+  <div class="dagger-desc" id="dagger-desc"></div>
+</div>
+<script>
+function _initDAgger() {
+
+var container = document.getElementById("dagger-svg").parentElement;
+var svg = d3.select("#dagger-svg");
+var descEl = document.getElementById("dagger-desc");
+
+function isLight() {
+  try {
+    var el = document.querySelector("[data-theme]") || document.documentElement;
+    return el.getAttribute("data-theme") === "light";
+  } catch(e) { return false; }
+}
+
+var DARK = {
+  text: "#e8eaf0", subtext: "#8b8fa8", dim: "#333", dimArrow: "#3a3d50",
+  nodeBg: "#1a1d2e", glowAlpha: 0.22, barBg: "#252540", barFill: "#10b981",
+};
+var LIGHT = {
+  text: "#1a1a2e", subtext: "#6b7280", dim: "#d1d5db", dimArrow: "#bfc3cc",
+  nodeBg: "#f9fafb", glowAlpha: 0.14, barBg: "#e5e7eb", barFill: "#10b981",
+};
+function th() { return isLight() ? LIGHT : DARK; }
+
+var stages = [
+  {
+    id: "policy", label: "Policy runs",
+    dark: "#22d3ee", light: "#0891b2",
+    desc: "The learned policy executes autonomously on a new task attempt",
+  },
+  {
+    id: "failure", label: "Failure",
+    dark: "#ef4444", light: "#dc2626",
+    desc: "Policy drifts into unfamiliar states. Traditional cloning suffers T\u00B2\u03B5 compounding errors.",
+  },
+  {
+    id: "human", label: "Human takeover",
+    dark: "#f59e0b", light: "#d97706",
+    desc: "Operator pauses the policy and teleoperates the correct recovery",
+  },
+  {
+    id: "record", label: "Record correction",
+    dark: "#10b981", light: "#059669",
+    desc: "Correction trajectory added to the aggregate dataset: D \u2190 D \u222A D\u1D62",
+  },
+  {
+    id: "retrain", label: "Retrain",
+    dark: "#8b5cf6", light: "#7c3aed",
+    desc: "Policy retrained on all data. Each iteration closes the distribution gap.",
+  },
+];
+
+var N = stages.length;
+var activeIdx = 0;
+var iteration = 1;
+var animTimer = null;
+
+function col(i) { return isLight() ? stages[i].light : stages[i].dark; }
+
+function drawIcon(g, id, cx, cy, size, fill) {
+  var s = size;
+  if (id === "policy") {
+    g.append("polygon")
+      .attr("points", (cx-s*0.22)+","+(cy-s*0.42)+" "+(cx+s*0.48)+","+cy+" "+(cx-s*0.22)+","+(cy+s*0.42))
+      .attr("fill", fill);
+  } else if (id === "failure") {
+    g.append("rect")
+      .attr("x", cx-1.6).attr("y", cy-s*0.34).attr("width", 3.2).attr("height", s*0.4)
+      .attr("rx", 1.6).attr("fill", fill);
+    g.append("circle").attr("cx", cx).attr("cy", cy+s*0.26).attr("r", 2).attr("fill", fill);
+  } else if (id === "human") {
+    g.append("circle").attr("cx", cx).attr("cy", cy-s*0.2).attr("r", s*0.16).attr("fill", fill);
+    g.append("path")
+      .attr("d", "M"+(cx-s*0.32)+","+(cy+s*0.38)+" Q"+(cx-s*0.32)+","+(cy+s*0.06)+" "+cx+","+(cy+s*0.06)+" Q"+(cx+s*0.32)+","+(cy+s*0.06)+" "+(cx+s*0.32)+","+(cy+s*0.38))
+      .attr("fill", fill);
+  } else if (id === "record") {
+    var lw = 2.6;
+    g.append("line").attr("x1", cx-s*0.28).attr("y1", cy).attr("x2", cx+s*0.28).attr("y2", cy)
+      .attr("stroke", fill).attr("stroke-width", lw).attr("stroke-linecap", "round");
+    g.append("line").attr("x1", cx).attr("y1", cy-s*0.28).attr("x2", cx).attr("y2", cy+s*0.28)
+      .attr("stroke", fill).attr("stroke-width", lw).attr("stroke-linecap", "round");
+  } else if (id === "retrain") {
+    var rr = s * 0.3;
+    var sa = -Math.PI * 0.65, ea = Math.PI * 0.8;
+    g.append("path")
+      .attr("d", "M"+(cx+rr*Math.cos(sa))+","+(cy+rr*Math.sin(sa))+" A"+rr+","+rr+" 0 1,1 "+(cx+rr*Math.cos(ea))+","+(cy+rr*Math.sin(ea)))
+      .attr("fill", "none").attr("stroke", fill).attr("stroke-width", 2.4)
+      .attr("stroke-linecap", "round");
+    var tx = cx + rr * Math.cos(ea), ty = cy + rr * Math.sin(ea);
+    var tang = ea + Math.PI / 2;
+    var as = 4.5;
+    g.append("polygon")
+      .attr("points",
+        (tx + as * Math.cos(tang - 0.6))+","+(ty + as * Math.sin(tang - 0.6))+" "+
+        tx+","+ty+" "+
+        (tx + as * Math.cos(tang + 0.6))+","+(ty + as * Math.sin(tang + 0.6)))
+      .attr("fill", fill);
+  }
+}
+
+function render() {
+  svg.selectAll("*").remove();
+  var c = th();
+
+  var W = container.clientWidth || 500;
+  var padX = 74;
+  var R = Math.min((W - padX * 2) * 0.42, 118);
+  var nodeR = Math.min(26, R * 0.24);
+  var labelH = nodeR + 14 + 8;
+  var cx = W / 2, cy = R + labelH + 6;
+  var H = cy + R + labelH + 10;
+
+  svg.attr("width", W).attr("height", H);
+  var g = svg.append("g");
+
+  var defs = svg.append("defs");
+
+  var angleStart = -Math.PI / 2;
+  var positions = stages.map(function(s, i) {
+    var a = angleStart + (2 * Math.PI * i) / N;
+    return { x: cx + R * Math.cos(a), y: cy + R * Math.sin(a), angle: a };
+  });
+
+  for (var i = 0; i < N; i++) {
+    var isAct = i === activeIdx;
+    var ac = isAct ? col(i) : c.dimArrow;
+    defs.append("marker").attr("id", "da-" + i)
+      .attr("viewBox", "0 0 10 8").attr("refX", 9).attr("refY", 4)
+      .attr("markerWidth", 6).attr("markerHeight", 5).attr("orient", "auto")
+      .append("polygon").attr("points", "0,0 10,4 0,8").attr("fill", ac);
+  }
+
+  for (var i = 0; i < N; i++) {
+    var from = positions[i], to = positions[(i + 1) % N];
+    var isAct = i === activeIdx;
+    var dx = to.x - from.x, dy = to.y - from.y;
+    var dist = Math.sqrt(dx * dx + dy * dy);
+    var ux = dx / dist, uy = dy / dist;
+    var gap = nodeR + 6;
+    var x1 = from.x + ux * gap, y1 = from.y + uy * gap;
+    var x2 = to.x - ux * (gap + 4), y2 = to.y - uy * (gap + 4);
+
+    var mx = (x1 + x2) / 2, my = (y1 + y2) / 2;
+    var bow = dist * 0.1;
+    var pmx = (from.x + to.x) / 2 - cx, pmy = (from.y + to.y) / 2 - cy;
+    var pDist = Math.sqrt(pmx * pmx + pmy * pmy) || 1;
+    var cpx = mx + (pmx / pDist) * bow, cpy = my + (pmy / pDist) * bow;
+
+    g.append("path")
+      .attr("d", "M"+x1+","+y1+" Q"+cpx+","+cpy+" "+x2+","+y2)
+      .attr("fill", "none")
+      .attr("stroke", isAct ? col(i) : c.dimArrow)
+      .attr("stroke-width", isAct ? 2.2 : 1.4)
+      .attr("marker-end", "url(#da-" + i + ")")
+      .attr("opacity", isAct ? 1 : 0.35);
+  }
+
+  positions.forEach(function(pos, i) {
+    var s = stages[i];
+    var isAct = i === activeIdx;
+    var sc = col(i);
+
+    if (isAct) {
+      g.append("circle")
+        .attr("cx", pos.x).attr("cy", pos.y).attr("r", nodeR + 6)
+        .attr("fill", sc).attr("opacity", c.glowAlpha);
+    }
+
+    g.append("circle")
+      .attr("cx", pos.x).attr("cy", pos.y).attr("r", nodeR)
+      .attr("fill", isAct ? sc : c.nodeBg)
+      .attr("stroke", isAct ? sc : c.dim)
+      .attr("stroke-width", isAct ? 2 : 1.4)
+      .attr("opacity", isAct ? 1 : 0.55);
+
+    var iconG = g.append("g").attr("opacity", isAct ? 1 : 0.5);
+    drawIcon(iconG, s.id, pos.x, pos.y, nodeR * 0.8, isAct ? "#fff" : sc);
+
+    var a = pos.angle;
+    var cosA = Math.cos(a), sinA = Math.sin(a);
+    var labelDist = nodeR + 14;
+    var lx = pos.x + labelDist * cosA;
+    var ly = pos.y + labelDist * sinA;
+    var anchor = "middle";
+    if (cosA < -0.3) anchor = "end";
+    else if (cosA > 0.3) anchor = "start";
+    if (sinA < -0.5) ly -= 3;
+    if (sinA > 0.5) ly += 5;
+    lx = Math.max(4, Math.min(W - 4, lx));
+
+    g.append("text")
+      .attr("x", lx).attr("y", ly)
+      .attr("text-anchor", anchor).attr("dominant-baseline", "middle")
+      .attr("fill", isAct ? (isLight() ? sc : "#e8eaf0") : c.subtext)
+      .attr("font-size", 12).attr("font-weight", isAct ? 700 : 400)
+      .attr("font-family", "system-ui, sans-serif")
+      .text(s.label);
+  });
+
+  g.append("text")
+    .attr("x", cx).attr("y", cy - 8)
+    .attr("text-anchor", "middle").attr("dominant-baseline", "middle")
+    .attr("font-size", 12).attr("font-weight", 600)
+    .attr("fill", c.subtext).attr("font-family", "system-ui, sans-serif")
+    .text("Iteration " + iteration);
+
+  var barW = R * 0.55, barH = 3.5, barY = cy + 5;
+  g.append("rect")
+    .attr("x", cx - barW / 2).attr("y", barY)
+    .attr("width", barW).attr("height", barH)
+    .attr("rx", 1.75).attr("fill", c.barBg);
+  var fillW = barW * Math.min(1, iteration / 6);
+  if (fillW > 0) {
+    g.append("rect")
+      .attr("x", cx - barW / 2).attr("y", barY)
+      .attr("width", fillW).attr("height", barH)
+      .attr("rx", 1.75).attr("fill", c.barFill).attr("opacity", 0.7);
+  }
+  g.append("text")
+    .attr("x", cx).attr("y", barY + barH + 10)
+    .attr("text-anchor", "middle").attr("dominant-baseline", "middle")
+    .attr("font-size", 10).attr("fill", c.subtext).attr("opacity", 0.6)
+    .attr("font-family", "system-ui, sans-serif")
+    .text("dataset size");
+
+  descEl.textContent = stages[activeIdx].desc;
+  descEl.style.color = col(activeIdx);
+}
+
+function step() {
+  activeIdx = (activeIdx + 1) % N;
+  if (activeIdx === 0) iteration = iteration >= 6 ? 1 : iteration + 1;
+  render();
+}
+
+render();
+animTimer = setInterval(step, 2200);
+window.addEventListener("resize", render);
+
+svg.node().addEventListener("click", function() {
+  clearInterval(animTimer);
+  step();
+  animTimer = setInterval(step, 2200);
+});
+
+var obs = new MutationObserver(function() { render(); });
+var themeEl = document.querySelector("[data-theme]") || document.documentElement;
+obs.observe(themeEl, { attributes: true, attributeFilter: ["data-theme"] });
+
+}
+
+if (typeof d3 !== "undefined") { _initDAgger(); }
+else { var s = document.createElement("script"); s.src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"; s.onload=_initDAgger; document.head.appendChild(s); }
+</script>
+</body>
+</html>

app/src/content/embeds/folding/experiment-results.html

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<style>
+  :root { --bg: transparent; --text: #e8eaf0; --subtext: #8b8fa8; --grid: #2a2d3a; --border: #2a2d3a; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); }
+
+  .controls {
+    display: flex; align-items: center; justify-content: center;
+    gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
+  }
+  .ctrl-label { font-size: 13px; color: var(--subtext); }
+  .toggle-btn {
+    background: #1a1d27; border: 1.5px solid #2a2d3a; color: #8b8fa8;
+    font-size: 14px; padding: 6px 16px; border-radius: 20px; cursor: pointer;
+    transition: all .15s; user-select: none; font-weight: 500;
+  }
+  .toggle-btn:hover { border-color: #555; color: #e8eaf0; }
+  .toggle-btn.active { background: rgba(167,139,250,0.18); border-color: #a78bfa; color: #a78bfa; }
+  .filter-toggle {
+    font-size: 12px; color: #8b8fa8; cursor: pointer; border: 1px solid #2a2d3a;
+    background: #1a1d27; padding: 4px 12px; border-radius: 14px; transition: all .15s;
+    user-select: none; display: inline-flex; align-items: center; gap: 4px;
+  }
+  .filter-toggle:hover { border-color: #555; color: #e8eaf0; }
+  .filter-toggle.showing-all { background: rgba(248,147,79,0.12); border-color: #f7934f; color: #f7934f; }
+
+  .legend {
+    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px;
+    font-size: 13px; color: var(--subtext);
+  }
+  .legend-item { display: flex; align-items: center; gap: 5px; }
+  .legend-swatch { width: 14px; height: 10px; border-radius: 2px; }
+  .legend-balloon { width: 10px; height: 18px; border-radius: 50%; background: rgba(167,139,250,0.22); border: 1px solid #a78bfa; }
+
+  .info-note {
+    background: rgba(255,255,255,0.03); border: 1px solid #2a2d3a;
+    border-radius: 8px; padding: 8px 14px; margin-bottom: 8px;
+    font-size: 12px; color: #8b8fa8; line-height: 1.6;
+    display: flex; align-items: flex-start; gap: 10px;
+  }
+  .info-note-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
+  .info-note strong { color: #c8cad8; }
+
+  .tooltip {
+    position: absolute; background: #1a1d27; border: 1px solid var(--border);
+    border-radius: 8px; padding: 10px 14px; font-size: 13px; pointer-events: none;
+    opacity: 0; transition: opacity .15s; z-index: 10; min-width: 250px;
+    box-shadow: 0 4px 16px rgba(0,0,0,.4);
+  }
+  .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; color: var(--text); }
+  .tooltip-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; font-size: 12px; color: var(--subtext); }
+  .tooltip-row span:last-child { color: var(--text); font-weight: 600; }
+  .tooltip-ci { font-size: 10px; color: #555; margin-left: 4px; }
+  .tooltip-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid #2a2d3a; font-size: 11px; color: #8b8fa8; line-height: 1.5; }
+
+  .axis text { fill: var(--subtext); font-size: 13px; }
+  .axis line, .axis path { stroke: var(--grid); }
+  .grid line { stroke: var(--grid); stroke-dasharray: 2,4; opacity: 0.5; }
+  .bar { cursor: pointer; transition: opacity .12s; }
+  .bar:hover { opacity: 0.85 !important; }
+</style>
+</head>
+<body>
+
+<div class="controls">
+  <span class="ctrl-label">Success rate overlay:</span>
+  <button class="toggle-btn active" id="btn-total" onclick="setLevel('total')">Total</button>
+  <button class="toggle-btn" id="btn-l1" onclick="setLevel('l1')">Level 1</button>
+  <button class="toggle-btn" id="btn-l2" onclick="setLevel('l2')">Level 2</button>
+  <span style="width:12px"></span>
+  <button class="filter-toggle" id="btn-filter" onclick="toggleFilter()">Show all 11</button>
+</div>
+
+<div class="legend">
+  <div class="legend-item"><div class="legend-swatch" style="background:#f7934f"></div>Initial training (1.x)</div>
+  <div class="legend-item"><div class="legend-swatch" style="background:#4dc98a"></div>Fine-tuned (2.x)</div>
+  <div class="legend-item"><div class="legend-balloon"></div>Success rate posterior</div>
+  <div class="legend-item" style="color:#a78bfa;font-size:12px"><strong>a</strong>,<strong>b</strong>… = CLD group</div>
+</div>
+
+<div class="info-note">
+  <span class="info-note-icon">ℹ</span>
+  <span>
+    Bars = success rate for selected level. Violin overlays = Bayesian posterior.
+    Letters = CLD from <a href="https://tri-ml.github.io/step/" style="color:#818cf8">STEP</a> sequential test (<a href="https://medium.com/toyotaresearch/statistical-thinking-for-robot-policy-evaluation-from-rigorous-a-b-testing-to-effective-0ae886fbd68d" style="color:#818cf8">TRI framework</a>, Bonferroni α=0.10/55); shared letter = no significant difference.
+  </span>
+</div>
+
+<div style="position:relative">
+  <svg id="er-chart" style="overflow:visible"></svg>
+  <div class="tooltip" id="er-tooltip"></div>
+</div>
+
+<script>
+function _initExperimentResults() {
+
+const EXPERIMENTS = {
+  "1.1 π0":             { note:"π0 base model fine-tuned on full dataset. Default normalization." },
+  "1.2 π0.5":           { note:"Upgraded to π0.5 with MEAN_STD normalization." },
+  "1.3 Relative":       { note:"Adds relative actions and switches to QUANTILES normalization." },
+  "1.4 RABC low":       { note:"RABC with low κ, not very selective. No relative actions." },
+  "1.5 RABC high":      { note:"RABC with higher κ (mean + ½σ). No relative actions." },
+  "1.7 Rel+RABC":       { note:"Best of initial training. Base checkpoint for 2.5." },
+  "2.1 HQ":             { note:"Fine-tunes 1.3 on curated high-quality data. No RABC." },
+  "2.2 HQ+RABC+Rel":    { note:"Adds RABC on high-quality fine-tune from 1.3." },
+  "2.3 HQ+mirror":      { note:"Augments HQ data with mirrored trajectories." },
+  "2.4 HQ chunk45":     { note:"Larger action chunk size (45 vs default 30)." },
+  "2.5 HQ+RABC+Rel★":   { note:"Top performer. Best overall result." },
+};
+
+const N = { total: 20, l1: 10, l2: 10 };
+
+const raw = [
+  { label:"1.1 π0",            series:"1", score:440,  pct:29.3, total:40, l1:80,  l2:0  },
+  { label:"1.2 π0.5",          series:"1", score:480,  pct:32.0, total:20, l1:40,  l2:0  },
+  { label:"1.3 Relative",      series:"1", score:460,  pct:30.7, total:35, l1:70,  l2:0  },
+  { label:"1.4 RABC low",      series:"1", score:330,  pct:22.0, total:15, l1:30,  l2:0  },
+  { label:"1.5 RABC high",     series:"1", score:170,  pct:11.3, total:0,  l1:0,   l2:0  },
+  { label:"1.7 Rel+RABC",      series:"1", score:600,  pct:40.0, total:40, l1:80,  l2:0  },
+  { label:"2.1 HQ",            series:"2", score:620,  pct:41.3, total:40, l1:70,  l2:10 },
+  { label:"2.2 HQ+RABC+Rel",   series:"2", score:1090, pct:72.7, total:75, l1:100, l2:50 },
+  { label:"2.3 HQ+mirror",     series:"2", score:310,  pct:20.7, total:5,  l1:0,   l2:10 },
+  { label:"2.4 HQ chunk45",    series:"2", score:460,  pct:30.7, total:20, l1:40,  l2:0  },
+  { label:"2.5 HQ+RABC+Rel★",  series:"2", score:1300, pct:86.7, total:90, l1:100, l2:80 },
+];
+
+const CLD = {
+  total: {"2.5 HQ+RABC+Rel★":"a","2.2 HQ+RABC+Rel":"ab","1.1 π0":"bc","1.7 Rel+RABC":"bc","2.1 HQ":"bc","1.3 Relative":"bc","1.2 π0.5":"cd","2.4 HQ chunk45":"cd","1.4 RABC low":"cd","2.3 HQ+mirror":"cd","1.5 RABC high":"d"},
+  l1:    {"2.2 HQ+RABC+Rel":"a","2.5 HQ+RABC+Rel★":"a","1.1 π0":"a","1.7 Rel+RABC":"a","1.3 Relative":"a","2.1 HQ":"a","1.2 π0.5":"ab","2.4 HQ chunk45":"ab","1.4 RABC low":"ab","2.3 HQ+mirror":"b","1.5 RABC high":"b"},
+  l2:    {"2.5 HQ+RABC+Rel★":"a","2.2 HQ+RABC+Rel":"ab","2.1 HQ":"ab","2.3 HQ+mirror":"ab","1.1 π0":"b","1.2 π0.5":"b","1.3 Relative":"b","1.4 RABC low":"b","1.5 RABC high":"b","1.7 Rel+RABC":"b","2.4 HQ chunk45":"b"},
+};
+
+// Clopper-Pearson exact 90% CI
+function lgamma(x) {
+  if (x < 0.5) return Math.log(Math.PI / Math.sin(Math.PI * x)) - lgamma(1 - x);
+  x--;
+  let a = 0.99999999999980993;
+  const c = [676.5203681218851,-1259.1392167224028,771.32342877765313,-176.61502916214059,
+             12.507343278686905,-0.13857109526572012,9.9843695780195716e-6,1.5056327351493116e-7];
+  for (let i = 0; i < 8; i++) a += c[i] / (x + i + 1);
+  const t = x + 8 - 0.5;
+  return 0.5 * Math.log(2 * Math.PI) + (x + 0.5) * Math.log(t) - t + Math.log(a);
+}
+function betaCf(x, a, b) {
+  const qab = a + b, qap = a + 1, qam = a - 1;
+  let c = 1, d = 1 - qab * x / qap;
+  if (Math.abs(d) < 1e-30) d = 1e-30;
+  d = 1 / d; let h = d;
+  for (let m = 1; m <= 200; m++) {
+    const m2 = 2 * m;
+    let aa = m * (b - m) * x / ((qam + m2) * (a + m2));
+    d = 1 + aa * d; if (Math.abs(d) < 1e-30) d = 1e-30;
+    c = 1 + aa / c; if (Math.abs(c) < 1e-30) c = 1e-30;
+    d = 1 / d; h *= d * c;
+    aa = -(a + m) * (qab + m) * x / ((a + m2) * (qap + m2));
+    d = 1 + aa * d; if (Math.abs(d) < 1e-30) d = 1e-30;
+    c = 1 + aa / c; if (Math.abs(c) < 1e-30) c = 1e-30;
+    d = 1 / d; const del = d * c; h *= del;
+    if (Math.abs(del - 1) < 3e-12) break;
+  }
+  return h;
+}
+function betaI(x, a, b) {
+  if (x <= 0) return 0; if (x >= 1) return 1;
+  const bt = Math.exp(lgamma(a+b) - lgamma(a) - lgamma(b) + a*Math.log(x) + b*Math.log(1-x));
+  return x < (a+1)/(a+b+2) ? bt * betaCf(x,a,b) / a : 1 - bt * betaCf(1-x,b,a) / b;
+}
+function betaInv(p, a, b) {
+  let lo = 0, hi = 1;
+  for (let i = 0; i < 100; i++) {
+    const mid = (lo + hi) / 2;
+    if (betaI(mid, a, b) < p) lo = mid; else hi = mid;
+  }
+  return (lo + hi) / 2;
+}
+function clopperPearson(pct, n, alpha = 0.10) {
+  const k = Math.round(pct / 100 * n);
+  const lo = k === 0 ? 0 : betaInv(alpha / 2, k, n - k + 1);
+  const hi = k === n ? 1 : betaInv(1 - alpha / 2, k + 1, n - k);
+  return { lo: lo * 100, hi: hi * 100 };
+}
+
+function betaPdf(x, a, b) {
+  if (x <= 0 || x >= 1) return 0;
+  return Math.exp(lgamma(a+b) - lgamma(a) - lgamma(b) + (a-1)*Math.log(x) + (b-1)*Math.log(1-x));
+}
+
+function betaPosteriorCurve(pct, n, steps) {
+  const k = Math.round(pct / 100 * n);
+  const a = 1 + k, b = 1 + n - k;
+  const ci = clopperPearson(pct, n);
+  const lo = Math.max(0, ci.lo / 100 - 0.03);
+  const hi = Math.min(1, ci.hi / 100 + 0.03);
+  const pts = [];
+  for (let i = 0; i <= steps; i++) {
+    const p = lo + (hi - lo) * i / steps;
+    pts.push({ p: p * 100, density: betaPdf(p, a, b) });
+  }
+  return pts;
+}
+
+// Pre-compute CIs and posteriors
+const allData = raw.map(d => {
+  const out = {...d};
+  ["total","l1","l2"].forEach(k => {
+    out[k + "_ci"] = clopperPearson(d[k], N[k]);
+    out[k + "_post"] = betaPosteriorCurve(d[k], N[k], 80);
+  });
+  return out;
+});
+
+const seriesColor = s => s === "2" ? "#4dc98a" : "#f7934f";
+const srColor = "#a78bfa";
+let activeLevel = "total";
+const HIDDEN_BY_DEFAULT = new Set(["1.4 RABC low","1.5 RABC high","2.3 HQ+mirror","2.4 HQ chunk45"]);
+let showAll = false;
+
+window.setLevel = function(lv) {
+  activeLevel = lv;
+  ["total","l1","l2"].forEach(k => {
+    document.getElementById("btn-" + k).className = "toggle-btn" + (k === lv ? " active" : "");
+  });
+  render();
+};
+
+window.toggleFilter = function() {
+  showAll = !showAll;
+  const btn = document.getElementById("btn-filter");
+  btn.textContent = showAll ? "Key experiments" : "Show all 11";
+  btn.classList.toggle("showing-all", showAll);
+  render();
+};
+
+const margin = { top: 28, right: 20, bottom: 72, left: 44 };
+const svg = d3.select("#er-chart");
+const container = svg.node().parentElement;
+const tooltip = d3.select("#er-tooltip");
+
+function render() {
+  svg.selectAll("*").remove();
+  const lvKey = activeLevel;
+  const data = (showAll ? allData : allData.filter(d => !HIDDEN_BY_DEFAULT.has(d.label)))
+    .slice().sort((a, b) => b[lvKey] - a[lvKey] || b.pct - a.pct);
+  const W = container.clientWidth;
+  const H = Math.max(310, Math.min(420, W * 0.52));
+  const w = W - margin.left - margin.right;
+  const h = H - margin.top - margin.bottom;
+  svg.attr("width", W).attr("height", H);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+  const x = d3.scaleBand().domain(data.map(d => d.label)).range([0, w]).padding(0.22);
+  const y = d3.scaleLinear().domain([0, 105]).range([h, 0]);
+
+  // Grid — only 50% and 100%
+  g.append("g").attr("class","grid").selectAll("line").data([50,100]).join("line")
+    .attr("x1",0).attr("x2",w).attr("y1",d=>y(d)).attr("y2",d=>y(d));
+
+  // X axis
+  g.append("g").attr("class","axis").attr("transform",`translate(0,${h})`)
+    .call(d3.axisBottom(x).tickSize(0))
+    .call(gg => {
+      gg.select(".domain").remove();
+      gg.selectAll("text").attr("transform","rotate(-40)")
+        .attr("text-anchor","end").attr("dx","-0.5em").attr("dy","0.3em").attr("font-size",11);
+    });
+
+  // Y axis
+  g.append("g").attr("class","axis")
+    .call(d3.axisLeft(y).tickValues([0,50,100]).tickFormat(d => d+"%").tickSize(0))
+    .call(ax => { ax.select(".domain").remove(); ax.selectAll(".tick line").remove(); });
+
+  // Series color pip under each label
+  data.forEach(d => {
+    g.append("rect")
+      .attr("x", x(d.label)).attr("width", x.bandwidth())
+      .attr("y", h + 52).attr("height", 3).attr("rx", 1.5)
+      .attr("fill", seriesColor(d.series)).attr("opacity", 0.6);
+  });
+
+  const bw = x.bandwidth();
+
+  data.forEach(d => {
+    const bx = x(d.label);
+    const cx = bx + bw / 2;
+    const col = seriesColor(d.series);
+
+    // SR bar for active level
+    const barVal = d[lvKey];
+    g.append("rect").attr("class","bar")
+      .attr("x", bx).attr("width", bw)
+      .attr("y", y(barVal)).attr("height", h - y(barVal))
+      .attr("fill", col).attr("rx", 2).attr("opacity", 0.55)
+      .on("mousemove", function(event) { showTooltip(event, d); })
+      .on("mouseleave", () => tooltip.style("opacity", 0));
+
+    // Bayesian posterior balloon (mini violin) — subtle ghost
+    const sr = d[activeLevel];
+    const post = d[activeLevel + "_post"];
+    const maxDensity = d3.max(post, p => p.density) || 1;
+    const halfW = bw * 0.22;
+
+    const areaGen = d3.area()
+      .y(p => y(p.p))
+      .x0(p => cx - (p.density / maxDensity) * halfW)
+      .x1(p => cx + (p.density / maxDensity) * halfW)
+      .curve(d3.curveBasis);
+
+    g.append("path")
+      .datum(post)
+      .attr("d", areaGen)
+      .attr("fill", srColor).attr("fill-opacity", 0.12)
+      .attr("stroke", srColor).attr("stroke-width", 0.8).attr("stroke-opacity", 0.45)
+      .attr("cursor","pointer")
+      .on("mousemove", function(event) { showTooltip(event, d); })
+      .on("mouseleave", () => tooltip.style("opacity", 0));
+
+    // Median tick
+    g.append("line")
+      .attr("x1", cx - halfW * 0.7).attr("x2", cx + halfW * 0.7)
+      .attr("y1", y(sr)).attr("y2", y(sr))
+      .attr("stroke", srColor).attr("stroke-width", 1.5).attr("stroke-opacity", 0.7);
+
+    // CLD letter above bar
+    const cldLetter = CLD[activeLevel][d.label] || "?";
+    const labelY = Math.min(y(barVal), y(sr)) - 7;
+    g.append("text")
+      .attr("x", cx).attr("y", labelY)
+      .attr("text-anchor","middle").attr("fill", srColor)
+      .attr("font-size", 12).attr("font-weight","700")
+      .text(cldLetter);
+  });
+
+  // Sort annotation
+  const lvLabels = { total:"total SR", l1:"Level 1 SR", l2:"Level 2 SR" };
+  g.append("text").attr("x", w).attr("y", -6).attr("text-anchor","end")
+    .attr("fill","#555").attr("font-size",11)
+    .text("sorted: highest → lowest " + lvLabels[lvKey]);
+}
+
+function showTooltip(event, d) {
+  const lvLabels = { total:"Total", l1:"Level 1", l2:"Level 2" };
+  const cldLetter = CLD[activeLevel][d.label] || "?";
+  const col = seriesColor(d.series);
+
+  tooltip.style("opacity", 1).html(`
+    <strong>Experiment ${d.label} <small style="color:${col}">(Series ${d.series})</small></strong>
+    <div class="tooltip-row"><span>Total Score</span><span>${d.score} / 1500 (${d.pct}%)</span></div>
+    <div class="tooltip-row">
+      <span>Total SR</span>
+      <span style="color:#a78bfa">${d.total}%
+        <span class="tooltip-ci">[${d.total_ci.lo.toFixed(0)}–${d.total_ci.hi.toFixed(0)}%]</span>
+      </span>
+    </div>
+    <div class="tooltip-row">
+      <span>Level 1 SR</span>
+      <span style="color:#4dc98a">${d.l1}%
+        <span class="tooltip-ci">[${d.l1_ci.lo.toFixed(0)}–${d.l1_ci.hi.toFixed(0)}%]</span>
+      </span>
+    </div>
+    <div class="tooltip-row">
+      <span>Level 2 SR</span>
+      <span style="color:#f87171">${d.l2}%
+        <span class="tooltip-ci">[${d.l2_ci.lo.toFixed(0)}–${d.l2_ci.hi.toFixed(0)}%]</span>
+      </span>
+    </div>
+    <div style="margin-top:5px;font-size:10px;color:#555">
+      CLD group (${lvLabels[activeLevel]}): <strong style="color:#a78bfa">${cldLetter}</strong> · shared letter = not significantly different
+    </div>
+    ${(EXPERIMENTS[d.label]||{}).note ? `<div class="tooltip-note">${EXPERIMENTS[d.label].note}</div>` : ""}
+  `);
+
+  const bx = container.getBoundingClientRect();
+  const ex = event.clientX - bx.left, ey = event.clientY - bx.top;
+  tooltip.style("left", Math.min(ex + 14, container.clientWidth - 270) + "px")
+         .style("top", Math.max(ey - 140, 0) + "px");
+}
+
+render();
+window.addEventListener("resize", render);
+
+}
+
+if (typeof d3 !== "undefined") {
+  _initExperimentResults();
+} else {
+  var s = document.createElement("script");
+  s.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js";
+  s.onload = _initExperimentResults;
+  document.head.appendChild(s);
+}
+</script>
+</body>
+</html>

app/src/content/embeds/folding/failure-analysis.html

@@ -4,12 +4,23 @@
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <style>
+  :root {
+    --bg: transparent;
+    --text: #e8eaf0;
+    --subtext: #8b8fa8;
+    --border: #2a2d3a;
+    --chart-bg: #1a1d27;
+    --btn-active-bg: #252835;
+    --btn-active-text: #e8eaf0;
+    --btn-active-border: #4a4d5a;
+  }
+
   * { box-sizing: border-box; margin: 0; padding: 0; }
 
   body {
-    background: transparent;
+    background: var(--bg);
     font-family: system-ui, sans-serif;
-    color: #e8eaf0;
+    color: var(--text);
     padding: 0;
     min-height: 100vh;
   }
@@ -24,7 +35,7 @@
     display: flex;
     gap: 4px;
     margin-bottom: 20px;
-    border-bottom: 1px solid #2a2d3a;
+    border-bottom: 1px solid var(--border);
     padding-bottom: 0;
   }
 
@@ -33,10 +44,10 @@
     border: 1px solid transparent;
     border-bottom: none;
     background: none;
-    color: #8b8fa8;
+    color: var(--subtext);
     cursor: pointer;
     font-family: inherit;
-    font-size: 11px;
+    font-size: 13px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     border-radius: 4px 4px 0 0;
@@ -44,20 +55,20 @@
     position: relative;
     bottom: -1px;
   }
-  .tab:hover { color: #e8eaf0; background: #1a1d27; }
+  .tab:hover { color: var(--text); background: var(--chart-bg); }
   .tab.active {
-    color: #e8eaf0;
-    background: #1a1d27;
-    border-color: #2a2d3a;
-    border-bottom-color: #1a1d27;
+    color: var(--text);
+    background: var(--chart-bg);
+    border-color: var(--border);
+    border-bottom-color: var(--chart-bg);
   }
 
   .panel { display: none; }
   .panel.active { display: block; }
 
   .chart-wrap {
-    background: #1a1d27;
-    border: 1px solid #2a2d3a;
+    background: var(--chart-bg);
+    border: 1px solid var(--border);
     border-radius: 6px;
     padding: 20px 20px 12px;
   }
@@ -72,10 +83,10 @@
   }
 
   .chart-title {
-    font-size: 11px;
+    font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #8b8fa8;
+    color: var(--subtext);
   }
 
   .mode-toggle {
@@ -83,20 +94,20 @@
     gap: 0;
   }
   .mode-btn {
-    padding: 4px 12px;
-    font-size: 10px;
+    padding: 5px 14px;
+    font-size: 12px;
     font-family: inherit;
     cursor: pointer;
-    border: 1px solid #2a2d3a;
+    border: 1px solid var(--border);
     background: none;
-    color: #8b8fa8;
+    color: var(--subtext);
     transition: all 0.15s;
     letter-spacing: 0.04em;
   }
   .mode-btn:first-child { border-radius: 4px 0 0 4px; }
   .mode-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
-  .mode-btn.active { background: #252835; color: #e8eaf0; border-color: #4a4d5a; }
-  .mode-btn:hover:not(.active) { color: #e8eaf0; }
+  .mode-btn.active { background: var(--btn-active-bg); color: var(--btn-active-text); border-color: var(--btn-active-border); }
+  .mode-btn:hover:not(.active) { color: var(--text); }
 
   .legend {
     display: flex;
@@ -104,14 +115,14 @@
     gap: 10px 18px;
     margin-top: 14px;
     padding-top: 12px;
-    border-top: 1px solid #2a2d3a;
+    border-top: 1px solid var(--border);
   }
   .legend-item {
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 10px;
-    color: #8b8fa8;
+    font-size: 12px;
+    color: var(--subtext);
     letter-spacing: 0.03em;
   }
   .legend-swatch {
@@ -130,10 +141,10 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 10px;
+    font-size: 12px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
-    color: #8b8fa8;
+    color: var(--subtext);
   }
   .series-badge span {
     width: 24px;
@@ -145,58 +156,54 @@
   svg text { font-family: system-ui, sans-serif; }
 
   .note {
-    font-size: 10px;
-    color: #555e7a;
+    font-size: 12px;
+    color: var(--subtext);
     margin-top: 10px;
     line-height: 1.6;
     letter-spacing: 0.02em;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .note { color: #c8cad8; }
-  }
-
   .insight-box {
-    background: rgba(128,128,128,0.06);
-    border: 1px solid rgba(128,128,128,0.15);
-    border-left: 3px solid rgba(128,128,128,0.3);
+    background: #12151f;
+    border: 1px solid #2a2d3a;
+    border-left: 3px solid #f7934f;
     border-radius: 4px;
     padding: 10px 14px;
     margin-bottom: 16px;
-    font-size: 10px;
-    color: #555;
+    font-size: 12px;
+    color: #8b8fa8;
     line-height: 1.6;
   }
-  .insight-box strong { color: #111; }
-
-  @media (prefers-color-scheme: dark) {
-    .insight-box {
-      background: #12151f;
-      border: 1px solid #2a2d3a;
-      border-left: 3px solid #f7934f;
-      color: #8b8fa8;
-    }
-    .insight-box strong { color: #e8eaf0; }
+  .insight-box strong { color: #e8eaf0; }
+  .filter-toggle {
+    font-size: 12px; color: var(--subtext); cursor: pointer; border: 1px solid var(--border);
+    background: none; padding: 4px 12px; border-radius: 14px; transition: all .15s;
+    user-select: none; display: inline-flex; align-items: center; gap: 4px; font-family: inherit;
   }
+  .filter-toggle:hover { color: var(--text); }
+  .filter-toggle.showing-all { background: rgba(248,147,79,0.12); border-color: #f7934f; color: #f7934f; }
 </style>
 </head>
 <body>
 <div class="container">
 
-  <div class="tab-row">
-    <button class="tab active" onclick="showTab('l2')">Level 2 — Failure point</button>
-    <button class="tab" onclick="showTab('l1')">Level 1 — Failure point</button>
+  <div class="tab-row" style="justify-content:space-between;align-items:center">
+    <div style="display:flex;gap:4px">
+      <button class="tab active" onclick="showTab('l1')">Level 1: Failure point</button>
+      <button class="tab" onclick="showTab('l2')">Level 2: Failure point</button>
+    </div>
+    <button class="filter-toggle" id="fa-filter-btn" onclick="window._faToggleFilter()">Show all 11</button>
   </div>
 
   <!-- LEVEL 2 PANEL -->
-  <div class="panel active" id="panel-l2">
+  <div class="panel" id="panel-l2">
     <div class="insight-box">
-      <strong>Series 1:</strong> nearly all level 2 failures occur at Unfold — the robot never gets past step 1.&nbsp;
-      <strong>Series 2:</strong> Unfold failures collapse (2.5: 0%), but late-stage failures (Fold 3, Rotation) emerge — the model now reliably unfolds but precision degrades at the end.
+      <strong>Initial training (1.x):</strong> nearly all level 2 failures occur at Unfold (the robot never gets past step 1).&nbsp;
+      <strong>Fine-tuned (2.x):</strong> Unfold failures collapse (2.5: 0%), but late-stage failures (Fold 3, Rotation) emerge: the model now reliably unfolds but precision degrades at the end.
     </div>
     <div class="chart-wrap">
       <div class="chart-header">
-        <div class="chart-title">Where does the robot fail? — Level 2 failed rollouts by subtask</div>
+        <div class="chart-title">Where does the robot fail? Level 2 failed rollouts by subtask</div>
         <div class="mode-toggle">
           <button class="mode-btn active" id="mode-l2-abs" onclick="setMode('l2','abs')">Counts</button>
           <button class="mode-btn" id="mode-l2-pct" onclick="setMode('l2','pct')">Percentage</button>
@@ -205,17 +212,17 @@
       <svg id="chart-l2" width="100%" height="320" style="overflow:visible"></svg>
       <div class="legend" id="legend-l2"></div>
     </div>
-    <p class="note">Each bar = one experiment, showing how its failed Level 2 rollouts distribute across subtasks. Only failed rollouts shown — successful rollouts are excluded. Toggle "Percentage" to compare failure distributions regardless of total failure count.</p>
+    <p class="note">Each bar = one experiment, showing how its failed Level 2 rollouts distribute across subtasks. Only failed rollouts shown; successful rollouts are excluded. Toggle "Percentage" to compare failure distributions regardless of total failure count.</p>
   </div>
 
   <!-- LEVEL 1 PANEL -->
-  <div class="panel" id="panel-l1">
+  <div class="panel active" id="panel-l1">
     <div class="insight-box">
-      <strong>Level 1 failures</strong> are more distributed since unfolding is given. Series 1 failures concentrate at Fold 2 and Fold 4 (mid-task precision). Series 2 nearly eliminates failures entirely — only 2.3 (mirroring) and 2.4 (chunk=45) regress significantly.
+      <strong>Level 1 failures</strong> are more distributed since unfolding is given. Initial-training failures concentrate at Fold 2 and Fold 4 (mid-task precision). Fine-tuning nearly eliminates failures entirely; only 2.3 (mirroring) and 2.4 (chunk=45) regress significantly.
     </div>
     <div class="chart-wrap">
       <div class="chart-header">
-        <div class="chart-title">Where does the robot fail? — Level 1 failed rollouts by subtask</div>
+        <div class="chart-title">Where does the robot fail? Level 1 failed rollouts by subtask</div>
         <div class="mode-toggle">
           <button class="mode-btn active" id="mode-l1-abs" onclick="setMode('l1','abs')">Counts</button>
           <button class="mode-btn" id="mode-l1-pct" onclick="setMode('l1','pct')">Percentage</button>
@@ -285,6 +292,23 @@ const COLORS = {
   'Rotation': '#818cf8',
 };
 
+const HIDDEN_BY_DEFAULT = new Set(['1.4 RABC low','1.5 RABC high','2.3 HQ+mirror','2.4 HQ chunk45']);
+let faShowAll = false;
+
+window._faToggleFilter = function() {
+  faShowAll = !faShowAll;
+  const btn = document.getElementById("fa-filter-btn");
+  btn.textContent = faShowAll ? "Key experiments" : "Show all 11";
+  btn.classList.toggle("showing-all", faShowAll);
+  rendered.l1 = false;
+  rendered.l2 = false;
+  renderTab(document.querySelector('.panel.active').id.replace('panel-',''));
+};
+
+function getVisibleExperiments() {
+  return faShowAll ? EXPERIMENTS : EXPERIMENTS.filter(e => !HIDDEN_BY_DEFAULT.has(e.id));
+}
+
 const modes = { l2: 'abs', l1: 'abs' };
 
 function setMode(level, mode) {
@@ -296,7 +320,15 @@ function setMode(level, mode) {
   renderTab(level);
 }
 
+function cssVar(name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
 function buildStackedBar(svgId, legendId, data, subtasks, experiments, normalize) {
+  const textColor = cssVar('--text');
+  const subtextColor = cssVar('--subtext');
+  const borderColor = cssVar('--border');
+
   const svgEl = document.getElementById(svgId);
   const W = svgEl.parentElement.clientWidth - 40;
   const H = 340;
@@ -349,7 +381,7 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments, normalize
     .call(d3.axisLeft(y).tickSize(-innerW).tickFormat('').ticks(5))
     .call(gg => {
       gg.select('.domain').remove();
-      gg.selectAll('line').attr('stroke', '#2a2d3a').attr('stroke-dasharray', '3,3');
+      gg.selectAll('line').attr('stroke', borderColor).attr('stroke-dasharray', '3,3');
     });
 
   // Stacked bars
@@ -370,8 +402,8 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments, normalize
     .attr('x', d => x(d.id) + x.bandwidth() / 2)
     .attr('y', d => d._total === 0 ? y(0) - 4 : y(d._displayTotal) - 5)
     .attr('text-anchor', 'middle')
-    .attr('fill', d => d._total === 0 ? '#3a3d4a' : '#8b8fa8')
-    .attr('font-size', '9')
+    .attr('fill', d => d._total === 0 ? borderColor : subtextColor)
+    .attr('font-size', '11')
     .text(d => {
       if (d._total === 0) return '✓ 0 failures';
       return normalize ? `n=${d._total}` : d._total;
@@ -385,14 +417,14 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments, normalize
     g.append('line')
       .attr('x1', xDiv).attr('x2', xDiv)
       .attr('y1', -22).attr('y2', innerH + 4)
-      .attr('stroke', '#3a3d4a').attr('stroke-width', 1).attr('stroke-dasharray', '4,3');
+      .attr('stroke', borderColor).attr('stroke-width', 1).attr('stroke-dasharray', '4,3');
 
     g.append('text').attr('x', xDiv - 6).attr('y', -18).attr('text-anchor', 'end')
-      .attr('fill', '#f7934f').attr('font-size', '8').attr('letter-spacing', '0.06em').text('SERIES 1');
+      .attr('fill', '#f7934f').attr('font-size', '10').attr('letter-spacing', '0.06em').text('SERIES 1');
 
     if (s2First) {
       g.append('text').attr('x', xDiv + 6).attr('y', -18).attr('text-anchor', 'start')
-        .attr('fill', '#4dc98a').attr('font-size', '8').attr('letter-spacing', '0.06em').text('SERIES 2');
+        .attr('fill', '#4dc98a').attr('font-size', '10').attr('letter-spacing', '0.06em').text('SERIES 2');
     }
   }
 
@@ -400,21 +432,21 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments, normalize
   g.append('g')
     .call(d3.axisLeft(y).ticks(5).tickSize(4).tickFormat(d => normalize ? d + '%' : d))
     .call(gg => {
-      gg.select('.domain').attr('stroke', '#2a2d3a');
-      gg.selectAll('text').attr('fill', '#8b8fa8').attr('font-size', '9');
-      gg.selectAll('line').attr('stroke', '#2a2d3a');
+      gg.select('.domain').attr('stroke', borderColor);
+      gg.selectAll('text').attr('fill', subtextColor).attr('font-size', '11');
+      gg.selectAll('line').attr('stroke', borderColor);
     });
 
   g.append('g').attr('transform', `translate(0,${innerH})`)
     .call(d3.axisBottom(x).tickSize(0))
     .call(gg => {
-      gg.select('.domain').attr('stroke', '#2a2d3a');
+      gg.select('.domain').attr('stroke', borderColor);
       gg.selectAll('text')
         .attr('fill', d => {
           const a = experiments.find(a => a.id === d);
           return a?.series === 2 ? '#4dc98a' : '#f7934f';
         })
-        .attr('font-size', '9')
+        .attr('font-size', '11')
         .attr('transform', 'rotate(-40)')
         .attr('text-anchor', 'end')
         .attr('dx', '-0.5em')
@@ -424,7 +456,7 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments, normalize
   // Y axis label
   svg.append('text').attr('transform', 'rotate(-90)')
     .attr('x', -(margin.top + innerH / 2)).attr('y', 10).attr('text-anchor', 'middle')
-    .attr('fill', '#555e7a').attr('font-size', '9')
+    .attr('fill', subtextColor).attr('font-size', '11')
     .text(normalize ? 'Failure distribution (%)' : 'Failed rollouts (n)');
 
   // Legend
@@ -443,8 +475,9 @@ function renderTab(id) {
   if (rendered[id]) return;
   rendered[id] = true;
   const normalize = modes[id] === 'pct';
-  if (id === 'l2') buildStackedBar('chart-l2', 'legend-l2', L2_FAILURES, SUBTASKS_L2, EXPERIMENTS, normalize);
-  if (id === 'l1') buildStackedBar('chart-l1', 'legend-l1', L1_FAILURES, SUBTASKS_L1, EXPERIMENTS, normalize);
+  const visExps = getVisibleExperiments();
+  if (id === 'l2') buildStackedBar('chart-l2', 'legend-l2', L2_FAILURES, SUBTASKS_L2, visExps, normalize);
+  if (id === 'l1') buildStackedBar('chart-l1', 'legend-l1', L1_FAILURES, SUBTASKS_L1, visExps, normalize);
 }
 
 function showTab(id) {
@@ -460,7 +493,7 @@ function showTab(id) {
 window.showTab = showTab;
 window.setMode = setMode;
 
-renderTab('l2');
+renderTab('l1');
 
 }
 

app/src/content/embeds/folding/l1-time-quality.html

@@ -33,8 +33,8 @@
 </head>
 <body>
 <div class="legend">
-  <div class="legend-item"><div class="legend-pip" style="background:#f7934f"></div>Series 2</div>
-  <div class="legend-item"><div class="legend-pip" style="background:#4f8ef7"></div>Series 1</div>
+  <div class="legend-item"><div class="legend-pip" style="background:#f7934f"></div>Fine-tuned (2.x)</div>
+  <div class="legend-item"><div class="legend-pip" style="background:#4f8ef7"></div>Initial (1.x)</div>
   <div class="legend-item" style="margin-left:8px; font-size:10px; color:#555">
     Bubble size = Total SR
   </div>

app/src/content/embeds/folding/loss-curves.html

@@ -13,13 +13,13 @@
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { background: var(--bg); font-family: system-ui, -apple-system, sans-serif; color: var(--text); }
   #chart-container { position: relative; width: 100%; }
-  .axis text { fill: #8b8fa8; font-size: 11px; }
+  .axis text { fill: #8b8fa8; font-size: 13px; }
   .axis path, .axis line { stroke: rgba(255,255,255,0.15); }
   .grid line { stroke: var(--grid); }
   .grid path { stroke: none; }
   .legend-wrap {
     display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
-    padding: 8px 0 0; font-size: 12px;
+    padding: 8px 0 0; font-size: 13px;
   }
   .legend-item {
     display: flex; align-items: center; gap: 5px; cursor: pointer;
@@ -33,7 +33,7 @@
   .tooltip-loss {
     position: absolute; background: #13152aee; border: 1px solid #333; border-radius: 8px;
     padding: 10px 14px; pointer-events: none; opacity: 0; transition: opacity .15s;
-    z-index: 20; font-size: 12px; line-height: 1.6; box-shadow: 0 6px 24px rgba(0,0,0,.5);
+    z-index: 20; font-size: 13px; line-height: 1.6; box-shadow: 0 6px 24px rgba(0,0,0,.5);
     max-width: 280px;
   }
   .tooltip-loss strong { color: #e8eaf0; }
@@ -41,7 +41,7 @@
   .tooltip-loss .tt-swatch { width: 10px; height: 3px; border-radius: 1px; flex-shrink: 0; }
   .series-toggle { display: flex; gap: 0; justify-content: center; margin-bottom: 6px; }
   .series-btn {
-    padding: 6px 18px; font-size: 12px; font-weight: 600; cursor: pointer; border: none;
+    padding: 7px 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: none;
     background: #1a1d2e; color: #8b8fa8; transition: all .2s;
     font-family: system-ui, sans-serif; border-bottom: 2px solid transparent;
   }
@@ -54,8 +54,8 @@
 <body>
 <div class="series-toggle">
   <button class="series-btn active" data-filter="all">All Runs</button>
-  <button class="series-btn" data-filter="s1">Series 1</button>
-  <button class="series-btn" data-filter="s2">Series 2</button>
+  <button class="series-btn" data-filter="s1">Initial (1.x)</button>
+  <button class="series-btn" data-filter="s2">Fine-tuned (2.x)</button>
 </div>
 <div id="chart-container">
   <svg id="loss-svg"></svg>
@@ -68,8 +68,8 @@ const RUNS = [
   { key: "ablation1_1_2",      label: "1.1 π0",              series: "s1", color: "#ef5350" },
   { key: "ablation1_2_2",      label: "1.2 π0.5",            series: "s1", color: "#f59e0b" },
   { key: "ablation1_3_17_q",   label: "1.3 Relative",        series: "s1", color: "#10b981" },
-  { key: "ablation1-4",        label: "1.4 RABC low",        series: "s1", color: "#3b82f6" },
-  { key: "ablation1-5_9",      label: "1.5 RABC high",       series: "s1", color: "#8b5cf6" },
+  { key: "ablation1-4",        label: "1.4 RABC low",           series: "s1", color: "#3b82f6" },
+  { key: "ablation1-5_9",      label: "1.5 RABC high",          series: "s1", color: "#8b5cf6" },
   { key: "ablation1-7_2",      label: "1.7 Rel+RABC",          series: "s1", color: "#ec4899" },
   { key: "ablation2-1_100k_q", label: "2.1 HQ",              series: "s2", color: "#14b8a6" },
   { key: "ablation2-2_100k",   label: "2.2 HQ+RABC+Rel",      series: "s2", color: "#6366f1" },
@@ -123,9 +123,23 @@ const svgEl = d3.select("#loss-svg");
 const tt = document.getElementById("tt");
 const legendEl = document.getElementById("legend");
 
-let activeFilter = "all";
+const configEl = container.closest("[data-config]");
+const chartConfig = configEl ? JSON.parse(configEl.dataset.config || "{}") : {};
+
+let activeFilter = chartConfig.initialFilter || "all";
 const hidden = new Set();
 
+if (chartConfig.initialRuns) {
+  RUNS.forEach(r => { if (!chartConfig.initialRuns.includes(r.key)) hidden.add(r.key); });
+}
+if (chartConfig.hideToggle) {
+  const toggle = container.closest("body")?.querySelector(".series-toggle");
+  if (toggle) toggle.style.display = "none";
+}
+document.querySelectorAll(".series-btn").forEach(b => {
+  b.classList.toggle("active", b.dataset.filter === activeFilter);
+});
+
 function render() {
   svgEl.selectAll("*").remove();
   const W = container.clientWidth || 800;
@@ -166,9 +180,9 @@ function render() {
 
   // Axis labels
   g.append("text").attr("x", w / 2).attr("y", h + 32).attr("text-anchor", "middle")
-    .attr("fill", "#8b8fa8").attr("font-size", 11).text("Training Steps");
+    .attr("fill", "#8b8fa8").attr("font-size", 13).text("Training Steps");
   g.append("text").attr("x", -h / 2).attr("y", -40).attr("text-anchor", "middle")
-    .attr("transform", "rotate(-90)").attr("fill", "#8b8fa8").attr("font-size", 11).text("Loss");
+    .attr("transform", "rotate(-90)").attr("fill", "#8b8fa8").attr("font-size", 13).text("Loss");
 
   // Lines
   const line = d3.line().x(d => x(d.step)).y(d => y(d.loss)).curve(d3.curveMonotoneX);

app/src/content/embeds/folding/pi05-architecture.html

@@ -82,8 +82,8 @@
       // Responsive scaling
       const scale = Math.min(1, W / 800);
       const fontSize = Math.round(12 * scale);
-      const smallFont = Math.round(10 * scale);
-      const titleFont = Math.round(13 * scale);
+      const smallFont = Math.round(12 * scale);
+      const titleFont = Math.round(15 * scale);
 
       // ---- SECTION POSITIONS (top to bottom) ----
       const inputY = pad;
@@ -230,7 +230,7 @@
       drawArrow(g, W / 2, vlaY + vlaH, W / 2, actionY);
 
       // ========== ACTION EXPERT (FLOW MATCHING) ==========
-      drawSection(g, pad, actionY, inputW, actionH, actionBg, actionBorder, 'ACTION EXPERT — FLOW MATCHING (300M)', 'center');
+      drawSection(g, pad, actionY, inputW, actionH, actionBg, actionBorder, 'ACTION EXPERT: FLOW MATCHING (300M)', 'center');
 
       // Noise -> vector field -> actions visualization
       const flowY = actionY + 28 * scale;

app/src/content/embeds/folding/pi05-sarm-architecture.html

@@ -11,14 +11,14 @@
   .tooltip-arch {
     position: absolute; background: #13152a; border: 1px solid #333; border-radius: 10px;
     padding: 14px 18px; pointer-events: none; opacity: 0; transition: opacity .2s;
-    z-index: 20; max-width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,.6); font-size: 13px; line-height: 1.5;
+    z-index: 20; max-width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,.6); font-size: 14px; line-height: 1.5;
   }
-  .tooltip-arch strong { display: block; margin-bottom: 6px; font-size: 14px; color: #e8eaf0; }
-  .tooltip-arch .tt-detail { color: #8b8fa8; font-size: 12px; }
-  .tooltip-arch code { background: #252540; padding: 1px 5px; border-radius: 3px; font-size: 11px; color: #a78bfa; }
+  .tooltip-arch strong { display: block; margin-bottom: 6px; font-size: 15px; color: #e8eaf0; }
+  .tooltip-arch .tt-detail { color: #8b8fa8; font-size: 13px; }
+  .tooltip-arch code { background: #252540; padding: 1px 5px; border-radius: 3px; font-size: 12px; color: #a78bfa; }
   .tab-bar { display: flex; gap: 0; justify-content: center; margin-bottom: 0; }
   .tab-btn {
-    padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; border: none;
+    padding: 9px 22px; font-size: 15px; font-weight: 600; cursor: pointer; border: none;
     background: #1a1d2e; color: #8b8fa8; transition: all .2s; border-bottom: 2px solid transparent;
     font-family: system-ui, sans-serif;
   }
@@ -34,16 +34,32 @@
   <button class="tab-btn" data-tab="pi05">π0.5 Detail</button>
   <button class="tab-btn" data-tab="sarm">SARM Detail</button>
 </div>
-<div id="arch-container">
-  <svg id="arch-svg"></svg>
-  <div class="tooltip-arch" id="tt"></div>
+<div class="arch-container">
+  <svg class="arch-svg"></svg>
+  <div class="tooltip-arch"></div>
 </div>
 <script>
 function _initArchViz() {
-const svg = d3.select("#arch-svg");
-const container = document.getElementById("arch-container");
-const tt = d3.select("#tt");
-let currentTab = "system";
+var root = document.querySelector(".arch-container:not([data-init])");
+if (!root) return;
+root.setAttribute("data-init", "1");
+var tabBar = root.previousElementSibling;
+if (!tabBar || !tabBar.classList.contains("tab-bar")) tabBar = null;
+
+const svg = d3.select(root.querySelector(".arch-svg"));
+const container = root;
+const tt = d3.select(root.querySelector(".tooltip-arch"));
+const configEl = container.closest("[data-config]");
+const chartConfig = configEl ? JSON.parse(configEl.dataset.config || "{}") : {};
+let currentTab = chartConfig.initialTab || "system";
+if (chartConfig.hideTabBar && tabBar) {
+  tabBar.style.display = "none";
+}
+if (tabBar) {
+  tabBar.querySelectorAll(".tab-btn").forEach(b => {
+    b.classList.toggle("active", b.dataset.tab === currentTab);
+  });
+}
 
 function isLight() {
   try {
@@ -75,6 +91,7 @@ const DARK = {
   scoreBox: "#1a1a2e", scoreText: "#e8eaf0",
   ttBg: "#13152a", ttBorder: "#333", ttText: "#e8eaf0", ttSub: "#8b8fa8", ttCode: "#252540", ttCodeText: "#a78bfa",
   tabBg: "#1a1d2e", tabText: "#8b8fa8", tabActiveBg: "#252540", tabActiveText: "#e8eaf0",
+  bg: "#0f1117",
 };
 
 const LIGHT = {
@@ -99,13 +116,14 @@ const LIGHT = {
   scoreBox: "#f9fafb", scoreText: "#1a1a2e",
   ttBg: "#fff", ttBorder: "#e2e4e9", ttText: "#1a1a2e", ttSub: "#6b7280", ttCode: "#f3f4f6", ttCodeText: "#6d28d9",
   tabBg: "#f3f4f6", tabText: "#6b7280", tabActiveBg: "#fff", tabActiveText: "#1a1a2e",
+  bg: "#ffffff",
 };
 
 function T() { return isLight() ? LIGHT : DARK; }
 
 function applyTabTheme() {
   var t = T();
-  document.querySelectorAll(".tab-btn").forEach(function(btn) {
+  if (tabBar) tabBar.querySelectorAll(".tab-btn").forEach(function(btn) {
     if (btn.classList.contains("active")) {
       btn.style.background = t.tabActiveBg;
       btn.style.color = t.tabActiveText;
@@ -114,7 +132,7 @@ function applyTabTheme() {
       btn.style.color = t.tabText;
     }
   });
-  var tip = document.getElementById("tt");
+  var tip = root.querySelector(".tooltip-arch");
   if (tip) {
     tip.style.background = t.ttBg;
     tip.style.borderColor = t.ttBorder;
@@ -128,9 +146,9 @@ const tooltips = {
   siglip: { title: "SigLIP Vision Encoder (400M)", detail: "Converts camera images to patch embeddings. Frozen during fine-tuning for stability. Outputs visual tokens for the VLM backbone." },
   gemma_vlm: { title: "Gemma VLM Backbone (2B)", detail: "Pre-trained language model that processes visual tokens, language tokens, and proprioceptive state. Shares attention across all modalities." },
   subtask: { title: "Subtask Prediction", detail: "Auto-regressive text decoding produces a high-level subtask like <code>\"pick up left sleeve\"</code>. Acts as chain-of-thought for the action expert." },
-  action_expert: { title: "Action Expert (300M)", detail: "Smaller Gemma model dedicated to flow matching. Denoises Gaussian noise into continuous 16D actions (30 steps at 30 Hz). Conditioned on VLM backbone output." },
+  action_expert: { title: "Action Expert (300M)", detail: "Smaller Gemma model dedicated to flow matching. Denoises Gaussian noise into continuous 16D actions (30 steps) over <code>10 denoising steps</code>. Conditioned on VLM backbone output." },
   flow: { title: "Flow Matching", detail: "Generative approach that denoises Gaussian noise into continuous actions. Enables multi-modal action distributions for complex manipulation." },
-  actions: { title: "Continuous Actions", detail: "30-step action chunk at 30 Hz: target joint angles + gripper commands for 2 arms (16D). Re-planned every <code>execution_horizon</code> steps via RTC." },
+  actions: { title: "Continuous Actions", detail: "30-step action chunk: target joint angles + gripper commands for 2 arms (16D). Re-planned every <code>execution_horizon</code> steps via RTC." },
   rtc: { title: "Real-Time Chunking (RTC)", detail: "Generates the next chunk while executing the current one. Freezes actions guaranteed to execute and inpaints the rest for smooth asynchronous execution." },
   stage_tfm: { title: "Stage Transformer", detail: "Classifies the current frame into a stage/subtask. Uses causal attention over <code>[visual, language, state]</code> tokens. Outputs stage logits for sparse or dense schemes." },
   subtask_tfm: { title: "Subtask Transformer", detail: "Predicts within-stage progress τ ∈ [0,1] conditioned on the stage prior (one-hot). Teacher forcing: 75% ground-truth, 25% predicted stage." },
@@ -159,6 +177,7 @@ function showTT(event, key) {
   tt.style("left", Math.min(ex + 14, bx.width - ttW - 10) + "px").style("top", Math.max(ey - 80, 8) + "px");
 }
 function hideTT() { tt.style("opacity", 0); }
+var _pi05AnimId = null;
 
 function box(g, x, y, w, h, fill, stroke, rx) {
   return g.append("rect").attr("x",x).attr("y",y).attr("width",w).attr("height",h)
@@ -201,6 +220,15 @@ function hoverBox(g, x, y, w, h, key) {
     .on("mousemove", e => showTT(e, key)).on("mouseleave", hideTT);
 }
 
+function arrowLabel(g, x, y, text, size, color, anchor) {
+  return g.append("text").attr("x",x).attr("y",y).attr("text-anchor",anchor||"middle")
+    .attr("font-size",size).attr("fill",color||T().subtext)
+    .attr("font-weight",400).attr("font-family","system-ui, sans-serif")
+    .attr("paint-order","stroke fill")
+    .attr("stroke", T().bg).attr("stroke-width", 4).attr("stroke-linejoin","round")
+    .text(text);
+}
+
 function renderSystem() {
   var t = T();
   const W = container.clientWidth || 800;
@@ -211,13 +239,13 @@ function renderSystem() {
   const obsY = 14;
   const obsH = 62*s;
   box(g, pad, obsY, W-pad*2, obsH, t.obsBox, t.obsBorder);
-  label(g, W/2, obsY+16, "OBSERVATION", 11*s, t.obsLabel, "middle", 700);
+  label(g, W/2, obsY+16, "OBSERVATION", 13*s, t.obsLabel, "middle", 700);
   const items = ["📷 Base Cam","📷 L-Wrist","📷 R-Wrist","🦾 Joints (16D)","💬 Language"];
   const iw = (W-pad*2-20) / items.length;
   items.forEach((txt,i) => {
     const ix = pad+10+i*iw;
     box(g, ix, obsY+26, iw-6, 26*s, t.obsInner, t.obsInnerBorder, 5);
-    label(g, ix+(iw-6)/2, obsY+26+16*s, txt, 9.5*s, t.obsInnerText);
+    label(g, ix+(iw-6)/2, obsY+26+16*s, txt, 11*s, t.obsInnerText);
   });
   hoverBox(g, pad, obsY, W-pad*2, obsH, "obs");
 
@@ -226,43 +254,43 @@ function renderSystem() {
   const piW = W*0.58;
   const piX = pad;
   box(g, piX, piY, piW, piH, t.piBox, t.piBorder);
-  label(g, piX+piW/2, piY+18, "π0.5  VISION-LANGUAGE-ACTION MODEL", 12*s, t.piLabel, "middle", 700);
+  label(g, piX+piW/2, piY+18, "π0.5  VISION-LANGUAGE-ACTION MODEL", 14*s, t.piLabel, "middle", 700);
 
   const sigY = piY+32;
   const sigH = 36*s;
   box(g, piX+12, sigY, piW*0.35, sigH, t.sigBox, t.sigBorder, 6);
-  label(g, piX+12+piW*0.175, sigY+14*s, "SigLIP (400M)", 10*s, t.sigLabel, "middle", 600);
-  label(g, piX+12+piW*0.175, sigY+26*s, "Vision Encoder", 8.5*s, t.sigSub);
+  label(g, piX+12+piW*0.175, sigY+14*s, "SigLIP (400M)", 12*s, t.sigLabel, "middle", 600);
+  label(g, piX+12+piW*0.175, sigY+26*s, "Vision Encoder", 10*s, t.sigSub);
   hoverBox(g, piX+12, sigY, piW*0.35, sigH, "siglip");
 
   const gemY = sigY;
   const gemX = piX+12+piW*0.38;
   const gemW = piW*0.58;
   box(g, gemX, gemY, gemW, sigH, t.gemBox, t.gemBorder, 6);
-  label(g, gemX+gemW/2, gemY+14*s, "Gemma VLM (2B)", 10*s, t.gemLabel, "middle", 600);
-  label(g, gemX+gemW/2, gemY+26*s, "Language + Vision Backbone", 8.5*s, t.gemSub);
+  label(g, gemX+gemW/2, gemY+14*s, "Gemma VLM (2B)", 12*s, t.gemLabel, "middle", 600);
+  label(g, gemX+gemW/2, gemY+26*s, "Language + Vision Backbone", 10*s, t.gemSub);
   hoverBox(g, gemX, gemY, gemW, sigH, "gemma_vlm");
   arrow(g, piX+12+piW*0.35, sigY+sigH/2, gemX, sigY+sigH/2, t.sigBorder);
 
   const subY = sigY+sigH+14*s;
   const subH = 30*s;
   box(g, piX+12, subY, piW*0.42, subH, t.subBox, t.subBorder, 6);
-  label(g, piX+12+piW*0.21, subY+12*s, "⬆ Subtask: \"pick up left sleeve\"", 9.5*s, t.subLabel, "middle", 600);
-  label(g, piX+12+piW*0.21, subY+24*s, "Auto-regressive text decoding", 8*s, t.subSub);
+  label(g, piX+12+piW*0.21, subY+12*s, "⬆ Subtask: \"pick up left sleeve\"", 11*s, t.subLabel, "middle", 600);
+  label(g, piX+12+piW*0.21, subY+24*s, "Auto-regressive text decoding", 9.5*s, t.subSub);
   hoverBox(g, piX+12, subY, piW*0.42, subH, "subtask");
   arrow(g, gemX+gemW/2, gemY+sigH, piX+12+piW*0.21, subY, t.sigBorder, true);
 
   const aeY = subY+subH+12*s;
   const aeH = 44*s;
   box(g, piX+12, aeY, piW-24, aeH, t.aeBox, t.aeBorder, 6);
-  label(g, piX+piW/2, aeY+14*s, "ACTION EXPERT (300M) — Flow Matching", 10.5*s, t.aeLabel, "middle", 700);
+  label(g, piX+piW/2, aeY+14*s, "ACTION EXPERT (300M): Flow Matching", 12.5*s, t.aeLabel, "middle", 700);
 
   const nX = piX+24;
   const nW = 56*s;
   const nY2 = aeY+24*s;
   const nH2 = 16*s;
   box(g, nX, nY2, nW, nH2, t.noiseBox, t.noiseBorder, 4);
-  label(g, nX+nW/2, nY2+11*s, "Noise", 8*s, t.noiseLabel);
+  label(g, nX+nW/2, nY2+11*s, "Noise", 9.5*s, t.noiseLabel);
   hoverBox(g, nX, nY2, nW, nH2, "noise");
 
   const wvX = nX+nW+10;
@@ -275,11 +303,11 @@ function renderSystem() {
 
   const oaX = piX+piW-24-68*s;
   box(g, oaX, nY2, 62*s, nH2, t.actionBox, t.actionBorder, 4);
-  label(g, oaX+31*s, nY2+11*s, "30 × 16D", 8*s, t.actionLabel);
+  label(g, oaX+31*s, nY2+11*s, "30 × 16D", 9.5*s, t.actionLabel);
   hoverBox(g, piX+12, aeY, piW-24, aeH, "action_expert");
 
   arrow(g, gemX+gemW*0.3, gemY+sigH, gemX+gemW*0.3, aeY, t.sigBorder, false);
-  label(g, gemX+gemW*0.3+4, (gemY+sigH+aeY)/2, "VLM prefix", 7.5*s, t.sigBorder, "start");
+  label(g, gemX+gemW*0.3+4, (gemY+sigH+aeY)/2, "VLM prefix", 9*s, t.sigBorder, "start");
 
   arrow(g, piX+12+piW*0.42, subY+subH/2, piX+piW-12, subY+subH/2, t.subBorder, true);
   curvedArrow(g, piX+piW-12, subY+subH/2, piX+piW-8, aeY-4, piX+piW-24, aeY, t.subBorder, true);
@@ -287,37 +315,37 @@ function renderSystem() {
   const rtcX = piX+piW-80*s;
   const rtcY2 = aeY+aeH+8*s;
   box(g, rtcX, rtcY2, 70*s, 22*s, t.rtcBox, t.rtcBorder, 5);
-  label(g, rtcX+35*s, rtcY2+14*s, "🔄 RTC re-plan", 8.5*s, t.rtcLabel);
+  label(g, rtcX+35*s, rtcY2+14*s, "🔄 RTC re-plan", 10*s, t.rtcLabel);
   hoverBox(g, rtcX, rtcY2, 70*s, 22*s, "rtc");
 
   const sX = piX+piW+16;
   const sW = W-sX-pad;
   const sH = piH;
   box(g, sX, piY, sW, sH, t.sarmBox, t.sarmBorder);
-  label(g, sX+sW/2, piY+18, "SARM REWARD MODEL", 11*s, t.sarmLabel, "middle", 700);
-  label(g, sX+sW/2, piY+34, "(training only)", 9*s, t.sarmSub, "middle", 600);
+  label(g, sX+sW/2, piY+18, "SARM REWARD MODEL", 13*s, t.sarmLabel, "middle", 700);
+  label(g, sX+sW/2, piY+34, "(training only)", 10.5*s, t.sarmSub, "middle", 600);
 
   const descY = piY+54;
-  label(g, sX+sW/2, descY, "Scores every episode with a", 9.5*s, t.subtext);
-  label(g, sX+sW/2, descY+16*s, "per-timestep quality signal [0, 1]", 9.5*s, t.subtext);
+  label(g, sX+sW/2, descY, "Scores every episode with a", 11*s, t.subtext);
+  label(g, sX+sW/2, descY+16*s, "per-timestep quality signal [0, 1]", 11*s, t.subtext);
 
   const rwY = descY+32*s;
   const rwH = 34*s;
   box(g, sX+10, rwY, sW-20, rwH, t.rwBox, t.rwBorder, 6);
-  label(g, sX+sW/2, rwY+14*s, "Per-timestep Reward", 10*s, t.rwLabel, "middle", 700);
-  label(g, sX+sW/2, rwY+27*s, "0 = start · · · 1 = task complete", 8*s, t.rwSub);
+  label(g, sX+sW/2, rwY+14*s, "Per-timestep Reward", 12*s, t.rwLabel, "middle", 700);
+  label(g, sX+sW/2, rwY+27*s, "0 = start · · · 1 = task complete", 9.5*s, t.rwSub);
   hoverBox(g, sX+10, rwY, sW-20, rwH, "sarm_reward");
 
   const wsY = rwY+rwH+14*s;
   const wsH = 34*s;
   box(g, sX+10, wsY, sW-20, wsH, t.wsBox, t.wsBorder, 6);
-  label(g, sX+sW/2, wsY+14*s, "Weighted Sampling", 10*s, t.wsLabel, "middle", 700);
-  label(g, sX+sW/2, wsY+27*s, "High-reward episodes contribute more", 8*s, t.wsSub);
+  label(g, sX+sW/2, wsY+14*s, "Weighted Sampling", 12*s, t.wsLabel, "middle", 700);
+  label(g, sX+sW/2, wsY+27*s, "High-reward episodes contribute more", 9.5*s, t.wsSub);
   hoverBox(g, sX+10, wsY, sW-20, wsH, "rabc");
   arrow(g, sX+sW/2, rwY+rwH, sX+sW/2, wsY, t.rwBorder);
 
   curvedArrow(g, sX+10, wsY+wsH/2, sX-8, wsY+wsH/2+30*s, piX+piW/2, piY+piH+8, t.wsBorder, true);
-  label(g, (sX+piX+piW/2)/2, piY+piH+22*s, "weighted sampling (training only)", 8*s, t.wsBorder);
+  label(g, (sX+piX+piW/2)/2, piY+piH+22*s, "weighted sampling (training only)", 9.5*s, t.wsBorder);
   hoverBox(g, sX, piY, sW, sH, "sarm_box");
 
   arrow(g, W*0.3, obsY+obsH, piX+piW/2, piY, t.obsBorder);
@@ -326,8 +354,8 @@ function renderSystem() {
   const outY = piY+piH+16;
   const outH = 42*s;
   box(g, pad, outY, piW, outH, t.outBox, t.outBorder);
-  label(g, piX+piW/2, outY+14*s, "ROBOT ACTIONS", 11*s, t.outLabel, "middle", 700);
-  label(g, piX+piW/2, outY+30*s, "16D joint targets @ 30 Hz", 8.5*s, t.outSub);
+  label(g, piX+piW/2, outY+14*s, "ROBOT ACTIONS", 13*s, t.outLabel, "middle", 700);
+  label(g, piX+piW/2, outY+30*s, "16D joint targets", 10*s, t.outSub);
   arrow(g, piX+piW/2, piY+piH, piX+piW/2, outY, t.outBorder);
   hoverBox(g, pad, outY, piW, outH, "actions");
 
@@ -339,96 +367,184 @@ function renderPi05() {
   var t = T();
   const W = container.clientWidth || 800;
   const g = svg.append("g");
-  const s = Math.min(1.1, W / 720);
-  const pad = 20;
-  const cW = W-pad*2;
-
-  const obsY = 10;
-  const obsH = 56*s;
-  box(g, pad, obsY, cW, obsH, t.obsBox, t.obsBorder);
-  label(g, W/2, obsY+15, "OBSERVATION", 11*s, t.obsLabel, "middle", 700);
-  const items = ["📷 Base Camera","📷 Left Wrist","📷 Right Wrist","🦾 Joints (16D)","💬 \"fold the shirt\""];
-  const iw = (cW-20)/items.length;
-  items.forEach((txt,i) => {
-    box(g, pad+10+i*iw, obsY+26, iw-6, 22*s, t.obsInner, t.obsInnerBorder, 5);
-    label(g, pad+10+i*iw+(iw-6)/2, obsY+40*s, txt, 9*s, t.obsInnerText);
+  const s = Math.min(1.1, W / 740);
+  const pad = 16;
+  const rowH = 44*s;
+  const gap = 18*s;
+  const colInputW = W*0.155;
+  const colEncW = W*0.105;
+  const colVlmW = W*0.185;
+  const colAeW = W*0.22;
+  const colOutW = W*0.11;
+  const arrowGap = 14*s;
+  const fs = 12*s;
+  const fsSmall = 10*s;
+  const fsBold = 13*s;
+
+  const x0 = pad;
+  const x1 = x0+colInputW+arrowGap*2;
+  const x2 = x1+colEncW+arrowGap*2;
+  const x3 = x2+colVlmW+arrowGap*2;
+  const x4 = x3+colAeW+arrowGap*2;
+
+  const camBoxH = rowH*1.8;
+  const imgY = pad;
+  const stateY = imgY+camBoxH+gap;
+  const langY = stateY+rowH+gap;
+
+  // Camera images with real thumbnails
+  box(g, x0, imgY, colInputW, camBoxH, t.obsBox, t.obsBorder, 6);
+  label(g, x0+colInputW/2, imgY+11*s, "Camera Images", fsBold, t.obsLabel, "middle", 600);
+  var thumbGap = 3*s;
+  var thumbW = (colInputW - 14*s - thumbGap*2) / 3;
+  var thumbH = thumbW * 0.7;
+  var thumbY = imgY+20*s;
+  var cams = [{f:"cam_base.jpg",l:"base"},{f:"cam_left_wrist.jpg",l:"L wrist"},{f:"cam_right_wrist.jpg",l:"R wrist"}];
+  cams.forEach(function(cam,i) {
+    var tx = x0+7*s + i*(thumbW+thumbGap);
+    var cid = "tc_"+Math.random().toString(36).slice(2,8);
+    g.append("defs").append("clipPath").attr("id",cid)
+      .append("rect").attr("x",tx).attr("y",thumbY).attr("width",thumbW).attr("height",thumbH).attr("rx",3);
+    g.append("image").attr("href","/images/folding/"+cam.f)
+      .attr("x",tx).attr("y",thumbY).attr("width",thumbW).attr("height",thumbH)
+      .attr("preserveAspectRatio","xMidYMid slice").attr("clip-path","url(#"+cid+")");
+    g.append("rect").attr("x",tx).attr("y",thumbY).attr("width",thumbW).attr("height",thumbH)
+      .attr("rx",3).attr("fill","none").attr("stroke",t.obsInnerBorder).attr("stroke-width",1);
+    label(g, tx+thumbW/2, thumbY+thumbH+8*s, cam.l, 8*s, t.obsInnerText);
   });
-  hoverBox(g, pad, obsY, cW, obsH, "obs");
-  arrow(g, W/2, obsY+obsH, W/2, obsY+obsH+14, t.obsBorder);
-
-  const sigY = obsY+obsH+18;
-  const sigH = 40*s;
-  box(g, pad, sigY, cW*0.35, sigH, t.sigBox, t.sigBorder);
-  label(g, pad+cW*0.175, sigY+16*s, "SigLIP Vision Encoder", 10.5*s, t.sigLabel, "middle", 700);
-  label(g, pad+cW*0.175, sigY+30*s, "400M params · frozen", 8.5*s, t.sigSub);
-  hoverBox(g, pad, sigY, cW*0.35, sigH, "siglip");
-
-  const gemX = pad+cW*0.38;
-  const gemW = cW*0.62;
-  box(g, gemX, sigY, gemW, sigH, t.gemBox, t.gemBorder);
-  label(g, gemX+gemW/2, sigY+16*s, "Gemma VLM Backbone (2B)", 10.5*s, t.gemLabel, "middle", 700);
-  label(g, gemX+gemW/2, sigY+30*s, "18 layers · 8 heads · 256 head_dim", 8.5*s, t.gemSub);
-  hoverBox(g, gemX, sigY, gemW, sigH, "gemma_vlm");
-  arrow(g, pad+cW*0.35, sigY+sigH/2, gemX, sigY+sigH/2, t.sigBorder);
-
-  const subY = sigY+sigH+16;
-  const subH = 38*s;
-  const subW = cW*0.48;
-  box(g, pad, subY, subW, subH, t.subBox, t.subBorder);
-  label(g, pad+subW/2, subY+14*s, "HIGH-LEVEL: Subtask Prediction", 10*s, t.subLabel, "middle", 700);
-  label(g, pad+subW/2, subY+28*s, "Auto-regressive → \"pick up left sleeve\"", 8.5*s, t.subSub);
-  hoverBox(g, pad, subY, subW, subH, "subtask");
-
-  const rtcX2 = pad+subW+14;
-  box(g, rtcX2, subY, cW-subW-14, subH, t.rtcBox, t.rtcBorder);
-  label(g, rtcX2+(cW-subW-14)/2, subY+14*s, "🔄 Real-Time Chunking (RTC)", 10*s, t.rtcLabel, "middle", 700);
-  label(g, rtcX2+(cW-subW-14)/2, subY+28*s, "Generate next chunk while executing current", 8.5*s, t.sarmSub);
-  hoverBox(g, rtcX2, subY, cW-subW-14, subH, "rtc");
-  arrow(g, W/2, sigY+sigH, W/2, subY, t.sigBorder);
-
-  const aeY = subY+subH+16;
-  const aeH = 72*s;
-  box(g, pad, aeY, cW, aeH, t.aeBox, t.aeBorder);
-  label(g, W/2, aeY+16*s, "ACTION EXPERT — Flow Matching (300M)", 11*s, t.aeLabel, "middle", 700);
-  hoverBox(g, pad, aeY, cW, aeH, "action_expert");
-
-  const innerY = aeY+28*s;
-  const innerH = 34*s;
-  const noiseW = cW*0.22;
-  box(g, pad+14, innerY, noiseW, innerH, t.noiseBox, t.noiseBorder, 6);
-  label(g, pad+14+noiseW/2, innerY+14*s, "Gaussian Noise", 9*s, t.noiseLabel, "middle", 600);
-  label(g, pad+14+noiseW/2, innerY+27*s, "sampled input", 7.5*s, t.noiseBorder);
-  hoverBox(g, pad+14, innerY, noiseW, innerH, "noise");
-
-  const dsX = pad+14+noiseW+14;
-  const dsW = cW*0.32;
-  box(g, dsX, innerY, dsW, innerH, t.flowBox, t.flowBorder, 6);
-  label(g, dsX+dsW/2, innerY+14*s, "Flow Matching", 9*s, t.flowLabel, "middle", 600);
-  label(g, dsX+dsW/2, innerY+27*s, "denoise → continuous actions", 7.5*s, t.flowSub);
-  hoverBox(g, dsX, innerY, dsW, innerH, "flow");
-  arrow(g, pad+14+noiseW, innerY+innerH/2, dsX, innerY+innerH/2, t.aeBorder);
-
-  const ocX = dsX+dsW+14;
-  const ocW = cW-ocX+pad-14;
-  box(g, ocX, innerY, ocW, innerH, t.actionBox, t.actionBorder, 6);
-  label(g, ocX+ocW/2, innerY+14*s, "30 Actions", 9*s, t.actionLabel, "middle", 600);
-  label(g, ocX+ocW/2, innerY+27*s, "16D @ 30 Hz", 7.5*s, t.actionBorder);
-  arrow(g, dsX+dsW, innerY+innerH/2, ocX, innerY+innerH/2, t.actionBorder);
-  hoverBox(g, ocX, innerY, ocW, innerH, "actions");
-
-  arrow(g, pad+subW/2, subY+subH, W/2-40*s, aeY, t.subBorder, true);
-  arrow(g, gemX+gemW*0.7, sigY+sigH, W/2+60*s, aeY, t.sigBorder);
-  label(g, W/2+64*s, (sigY+sigH+aeY)/2, "VLM prefix", 8.5*s, t.sigBorder, "start");
-
-  const outY2 = aeY+aeH+16;
-  const outH2 = 36*s;
-  box(g, pad, outY2, cW, outH2, t.outBox, t.outBorder);
-  label(g, W/2, outY2+14*s, "CONTINUOUS ROBOT ACTIONS", 11*s, t.outLabel, "middle", 700);
-  label(g, W/2, outY2+28*s, "16D joint + gripper targets @ 30 Hz → PD controller", 8.5*s, t.outSub);
-  arrow(g, W/2, aeY+aeH, W/2, outY2, t.outBorder);
-  hoverBox(g, pad, outY2, cW, outH2, "actions");
-
-  const H = outY2 + outH2 + 10;
+  hoverBox(g, x0, imgY, colInputW, camBoxH, "obs");
+
+  box(g, x0, stateY, colInputW, rowH, t.obsBox, t.obsBorder, 6);
+  label(g, x0+colInputW/2, stateY+13*s, "Joint Angles", fsBold, t.obsLabel, "middle", 600);
+  label(g, x0+colInputW/2, stateY+25*s, "16D (7 joints+grip ×2)", fsSmall, t.obsInnerText);
+  hoverBox(g, x0, stateY, colInputW, rowH, "obs");
+
+  box(g, x0, langY, colInputW, rowH, t.obsBox, t.obsBorder, 6);
+  label(g, x0+colInputW/2, langY+13*s, "Language Prompt", fsBold, t.obsLabel, "middle", 600);
+  label(g, x0+colInputW/2, langY+25*s, "\"fold the t-shirt\"", fsSmall, t.obsInnerText);
+  hoverBox(g, x0, langY, colInputW, rowH, "obs");
+
+  // SigLIP encoder (aligned with camera box)
+  box(g, x1, imgY, colEncW, camBoxH, t.sigBox, t.sigBorder, 6);
+  label(g, x1+colEncW/2, imgY+camBoxH/2-5*s, "SigLIP", fsBold, t.sigLabel, "middle", 600);
+  label(g, x1+colEncW/2, imgY+camBoxH/2+7*s, "400M · frozen", fsSmall, t.sigSub);
+  hoverBox(g, x1, imgY, colEncW, camBoxH, "siglip");
+
+  arrow(g, x0+colInputW, imgY+camBoxH/2, x1, imgY+camBoxH/2, t.obsBorder);
+  arrowLabel(g, (x0+colInputW+x1)/2, imgY+camBoxH/2-8*s, "pixels", fsSmall, t.subtext);
+
+  // VLM backbone
+  const vlmH = langY+rowH-imgY;
+  box(g, x2, imgY, colVlmW, vlmH, t.gemBox, t.gemBorder, 6);
+  label(g, x2+colVlmW/2, imgY+14*s, "Gemma VLM", fsBold, t.gemLabel, "middle", 700);
+  label(g, x2+colVlmW/2, imgY+26*s, "2B params", fsSmall, t.gemSub);
+  label(g, x2+colVlmW/2, imgY+vlmH/2+2*s, "Cross-attention over", fsSmall, t.subtext);
+  label(g, x2+colVlmW/2, imgY+vlmH/2+14*s, "all three modalities", fsSmall, t.subtext);
+  hoverBox(g, x2, imgY, colVlmW, vlmH, "gemma_vlm");
+
+  arrow(g, x1+colEncW, imgY+camBoxH/2, x2, imgY+camBoxH/2, t.sigBorder);
+  arrowLabel(g, (x1+colEncW+x2)/2, imgY+camBoxH/2-8*s, "visual tokens", fsSmall, t.subtext);
+
+  arrow(g, x0+colInputW, stateY+rowH/2, x2, stateY+rowH/2, t.obsBorder);
+  arrowLabel(g, (x0+colInputW+x2)/2, stateY+rowH/2-8*s, "state vector", fsSmall, t.subtext);
+
+  arrow(g, x0+colInputW, langY+rowH/2, x2, langY+rowH/2, t.obsBorder);
+  arrowLabel(g, (x0+colInputW+x2)/2, langY+rowH/2-8*s, "text tokens", fsSmall, t.subtext);
+
+  // Action Expert with flow matching animation
+  const aeH2 = vlmH;
+  box(g, x3, imgY, colAeW, aeH2, t.aeBox, t.aeBorder, 6);
+  label(g, x3+colAeW/2, imgY+14*s, "Action Expert", fsBold, t.aeLabel, "middle", 700);
+  label(g, x3+colAeW/2, imgY+26*s, "300M · flow matching", fsSmall, t.flowSub);
+
+  arrow(g, x2+colVlmW, imgY+vlmH/2, x3, imgY+aeH2/2, t.gemBorder);
+  arrowLabel(g, (x2+colVlmW+x3)/2, imgY+vlmH/2-8*s, "VLM features", fsSmall, t.subtext);
+
+  // Flow matching animation area
+  var aP = 6*s;
+  var aTop = imgY+36*s, aBot = imgY+aeH2-aP-12*s;
+  var aLeft = x3+aP, aRight = x3+colAeW-aP;
+  var aW = aRight-aLeft, aH = aBot-aTop, aCY = aTop+aH/2;
+
+  g.append("rect").attr("x",aLeft).attr("y",aTop).attr("width",aW).attr("height",aH)
+    .attr("rx",4).attr("fill",isLight()?"rgba(0,0,0,0.03)":"rgba(255,255,255,0.03)");
+
+  label(g, aLeft+8*s, aBot+10*s, "N(0, I)", 8*s, t.noiseLabel, "start");
+  label(g, aRight-8*s, aBot+10*s, "actions", 8*s, t.actionLabel, "end");
+  var stepText = g.append("text").attr("x",aLeft+aW/2).attr("y",aBot+10*s)
+    .attr("text-anchor","middle").attr("font-size",8*s)
+    .attr("fill",t.subtext).attr("font-family","system-ui, sans-serif").text("step 0/10");
+
+  // Seeded random for deterministic noise positions
+  var _seed = 42;
+  function sRand() { _seed=(_seed*16807)%2147483647; return(_seed-1)/2147483646; }
+  function gRand(m,sd) { var u1=sRand(),u2=sRand(); return m+sd*Math.sqrt(-2*Math.log(Math.max(u1,.001)))*Math.cos(6.2832*u2); }
+
+  var NP = 24;
+  var pts = [];
+  for (var i=0;i<NP;i++) {
+    var frac = i/(NP-1);
+    var tgtX = aLeft+8*s + frac*(aW-16*s);
+    var tgtY = aCY + Math.sin(frac*Math.PI*2.5+0.5)*aH*0.3 * (0.7+0.3*Math.cos(frac*Math.PI));
+    var nX = gRand(aLeft+aW*0.35, aW*0.18);
+    var nY = gRand(aCY, aH*0.25);
+    nX = Math.max(aLeft+3, Math.min(aRight-3, nX));
+    nY = Math.max(aTop+3, Math.min(aBot-3, nY));
+    tgtY = Math.max(aTop+3, Math.min(aBot-3, tgtY));
+    pts.push({nX:nX, nY:nY, tX:tgtX, tY:tgtY});
+  }
+
+  var dots = g.selectAll(".fdot").data(pts).enter()
+    .append("circle").attr("r",2.5*s).attr("class","fdot");
+
+  // Trajectory line (appears as dots organize)
+  var trajPath = g.append("path").attr("fill","none")
+    .attr("stroke",t.actionBorder).attr("stroke-width",1.2*s).attr("opacity",0);
+  var trajData = pts.map(function(p){return[p.tX,p.tY]});
+  var lineGen = d3.line().curve(d3.curveCatmullRom.alpha(0.5));
+  trajPath.attr("d", lineGen(trajData));
+
+  var noiseC = t.noiseBorder, actionC = t.actionBorder;
+  var numSteps = 10;
+  var stepDur = 280, pauseEnd = 1000, pauseStart = 600;
+  var cycle = pauseStart + numSteps*stepDur + pauseEnd;
+  var t0 = null;
+
+  function animLoop(ts) {
+    if(!t0) t0=ts;
+    var el = (ts-t0)%cycle;
+    var step, tau;
+    if (el < pauseStart) { step = 0; tau = 0; }
+    else if (el < pauseStart + numSteps*stepDur) {
+      step = Math.min(numSteps, Math.floor((el-pauseStart)/stepDur) + 1);
+      tau = step / numSteps;
+    } else { step = numSteps; tau = 1; }
+
+    dots.attr("cx",function(d){return d.nX+(d.tX-d.nX)*tau})
+      .attr("cy",function(d){return d.nY+(d.tY-d.nY)*tau})
+      .attr("fill", d3.interpolateRgb(noiseC, actionC)(tau))
+      .attr("opacity", 0.85);
+    trajPath.attr("opacity", tau*0.45);
+    stepText.text("step "+step+"/10");
+
+    _pi05AnimId = requestAnimationFrame(animLoop);
+  }
+  _pi05AnimId = requestAnimationFrame(animLoop);
+
+  hoverBox(g, x3, imgY, colAeW, aeH2, "action_expert");
+
+  // Output
+  box(g, x4, imgY, colOutW, aeH2, t.actionBox, t.actionBorder, 6);
+  label(g, x4+colOutW/2, imgY+aeH2/2-12*s, "30 Actions", fsBold, t.actionLabel, "middle", 700);
+  label(g, x4+colOutW/2, imgY+aeH2/2, "16D", fsSmall, t.actionBorder);
+  label(g, x4+colOutW/2, imgY+aeH2/2+14*s, "joint angles +", fsSmall, t.subtext);
+  label(g, x4+colOutW/2, imgY+aeH2/2+26*s, "gripper cmds", fsSmall, t.subtext);
+  hoverBox(g, x4, imgY, colOutW, aeH2, "actions");
+
+  arrow(g, x3+colAeW, imgY+aeH2/2, x4, imgY+aeH2/2, t.actionBorder);
+  arrowLabel(g, (x3+colAeW+x4)/2, imgY+aeH2/2-8*s, "actions", fsSmall, t.subtext);
+
+  const H = langY + rowH + pad;
   svg.attr("width",W).attr("height",H).attr("viewBox",`0 0 ${W} ${H}`);
 }
 
@@ -436,105 +552,121 @@ function renderSARM() {
   var t = T();
   const W = container.clientWidth || 800;
   const g = svg.append("g");
-  const s = Math.min(1.1, W / 720);
-  const pad = 20;
-  const cW = W-pad*2;
-
-  const obsY = 10;
-  const obsH = 50*s;
-  box(g, pad, obsY, cW, obsH, t.obsBox, t.obsBorder);
-  label(g, W/2, obsY+15, "SARM INPUTS", 11*s, t.obsLabel, "middle", 700);
-  const items = [
-    {txt:"📷 8 Images (1s apart)", k:"embed_video"},
-    {txt:"💬 Text Embeddings", k:"embed_text"},
-    {txt:"🦾 State Features", k:"embed_state"}
-  ];
-  const iw = (cW-20)/items.length;
-  items.forEach((d,i) => {
-    box(g, pad+10+i*iw, obsY+24, iw-6, 20*s, t.obsInner, t.obsInnerBorder, 5);
-    label(g, pad+10+i*iw+(iw-6)/2, obsY+36*s, d.txt, 9*s, t.obsInnerText);
-    hoverBox(g, pad+10+i*iw, obsY+24, iw-6, 20*s, d.k);
-  });
-
-  const stY = obsY+obsH+22;
-  const stH = 80*s;
-  box(g, pad, stY, cW, stH, t.sarmBox, t.stageBorder);
-  label(g, W/2, stY+16*s, "STAGE TRANSFORMER (training-time scoring)", 11*s, t.stageText, "middle", 700);
-  hoverBox(g, pad, stY, cW, stH, "stage_tfm");
-  arrow(g, W/2, obsY+obsH, W/2, stY, t.obsBorder);
-
-  const innerStY = stY+28*s;
-  const projW = cW*0.22;
-  ["vis_proj","lang_proj","state_proj"].forEach((name,i) => {
-    const px = pad+14+i*(projW+8);
-    box(g, px, innerStY, projW, 18*s, t.stageInner, t.stageBorder, 4);
-    label(g, px+projW/2, innerStY+12*s, name+"  →  d=512", 7.5*s, t.stageText);
-  });
-
-  const tfmBarY = innerStY+24*s;
-  box(g, pad+14, tfmBarY, cW-28, 18*s, t.stageInner, t.stageBorder, 4);
-  label(g, W/2, tfmBarY+12*s, "Causal Transformer Encoder (6 layers · 8 heads) → Fusion MLP → Stage Logits", 8.5*s, t.stageText);
-
-  const soY = stY+stH+8;
-  const soH = 28*s;
-  box(g, pad+cW*0.3, soY, cW*0.4, soH, t.rtcBox, t.rtcBorder);
-  label(g, W/2, soY+11*s, "Stage Classification", 10*s, t.rtcLabel, "middle", 700);
-  label(g, W/2, soY+22*s, "softmax → argmax → one-hot prior", 8*s, t.sarmSub);
-  arrow(g, W/2, stY+stH, W/2, soY, t.stageBorder);
-
-  const tfY = soY-2;
-  box(g, pad, tfY, cW*0.26, soH+4, t.tfBox, t.tfBorder, 6);
-  label(g, pad+cW*0.13, tfY+12*s, "Teacher Forcing", 9*s, t.tfLabel, "middle", 600);
-  label(g, pad+cW*0.13, tfY+24*s, "75% GT / 25% predicted", 7.5*s, t.tfSub);
-  arrow(g, pad+cW*0.26, tfY+soH/2, pad+cW*0.3, soY+soH/2, t.tfBorder, true);
-
-  const stfY = soY+soH+18;
-  const stfH = 72*s;
-  box(g, pad, stfY, cW, stfH, t.sarmBox, t.stageBorder);
-  label(g, W/2, stfY+16*s, "SUBTASK TRANSFORMER", 12*s, t.stageText, "middle", 700);
-  hoverBox(g, pad, stfY, cW, stfH, "subtask_tfm");
-  arrow(g, W/2, soY+soH, W/2, stfY, t.rtcBorder);
-  curvedArrow(g, W*0.25, obsY+obsH, W*0.15, stfY-10, pad+cW*0.1, stfY, t.obsBorder, true);
-
-  const inner2Y = stfY+28*s;
-  ["vis_proj","lang_proj","state_proj","stage_emb"].forEach((name,i) => {
-    const pw = cW*0.19;
-    const px = pad+10+i*(pw+6);
-    box(g, px, inner2Y, pw, 18*s, t.stageInner, t.stageBorder, 4);
-    label(g, px+pw/2, inner2Y+12*s, name, 7.5*s, t.stageText);
-  });
-
-  const tfm2Y = inner2Y+24*s;
-  box(g, pad+14, tfm2Y, cW-28, 16*s, t.stageInner, t.stageBorder, 4);
-  label(g, W/2, tfm2Y+11*s, "Causal Transformer (6L · 8H) → Fusion MLP → sigmoid → τ ∈ [0,1]", 8.5*s, t.stageText);
-
-  const rwY = stfY+stfH+18;
-  const rwH = 36*s;
-  box(g, pad, rwY, cW, rwH, t.rwBox, t.rwBorder);
-  label(g, W/2, rwY+14*s, "NORMALIZED REWARD = normalize(stage + τ)", 11*s, t.rwLabel, "middle", 700);
-  label(g, W/2, rwY+28*s, "Weighted by temporal proportions per subtask → [0, 1]", 8.5*s, t.rwSub);
-  arrow(g, W/2, stfY+stfH, W/2, rwY, t.stageBorder);
-  hoverBox(g, pad, rwY, cW, rwH, "sarm_reward");
-
-  const usesY = rwY+rwH+16;
-  const useW2 = cW/2-8;
-  [{txt:"Episode Scoring",sub:"Per-timestep quality signal [0,1]",c:t.aeBorder,k:"data_scoring"},
-   {txt:"RABC Weighted Sampling",sub:"High-reward actions contribute more to loss",c:t.wsBorder,k:"rabc"}
-  ].forEach((d,i) => {
-    const ux = pad+i*(useW2+16);
-    box(g, ux, usesY, useW2, 32*s, t.scoreBox, d.c, 6);
-    label(g, ux+useW2/2, usesY+12*s, d.txt, 9.5*s, t.scoreText, "middle", 600);
-    label(g, ux+useW2/2, usesY+25*s, d.sub, 7.5*s, d.c);
-    hoverBox(g, ux, usesY, useW2, 32*s, d.k);
-  });
-  arrow(g, W/2-useW2*0.3, rwY+rwH, pad+useW2/2, usesY, t.rwBorder);
-  arrow(g, W/2+useW2*0.3, rwY+rwH, pad+useW2+16+useW2/2, usesY, t.rwBorder);
-
-  const H = usesY + 32*s + 10;
+  const s = Math.min(1.1, W / 740);
+  const pad = 16;
+  const rowH = 42*s;
+  const gap = 16*s;
+  const arrowGap = 14*s;
+  const fs = 12*s;
+  const fsSmall = 10*s;
+  const fsBold = 13*s;
+
+  const colInW = W*0.14;
+  const colEncW = W*0.11;
+  const colStageW = W*0.175;
+  const colSubW = W*0.175;
+  const colOutW = W*0.14;
+
+  const x0 = pad;
+  const x1 = x0+colInW+arrowGap*2;
+  const x2 = x1+colEncW+arrowGap*2;
+  const x3 = x2+colStageW+arrowGap*2;
+  const x4 = x3+colSubW+arrowGap*2;
+
+  const row1Y = pad;
+  const row2Y = row1Y+rowH+gap;
+  const row3Y = row2Y+rowH+gap;
+
+  // inputs
+  box(g, x0, row1Y, colInW, rowH, t.obsBox, t.obsBorder, 6);
+  label(g, x0+colInW/2, row1Y+12*s, "8 RGB Frames", fsBold, t.obsLabel, "middle", 600);
+  label(g, x0+colInW/2, row1Y+24*s, "sampled 1s apart", fsSmall, t.obsInnerText);
+  hoverBox(g, x0, row1Y, colInW, rowH, "embed_video");
+
+  box(g, x0, row2Y, colInW, rowH, t.obsBox, t.obsBorder, 6);
+  label(g, x0+colInW/2, row2Y+12*s, "Task Description", fsBold, t.obsLabel, "middle", 600);
+  label(g, x0+colInW/2, row2Y+24*s, "\"fold the t-shirt\"", fsSmall, t.obsInnerText);
+  hoverBox(g, x0, row2Y, colInW, rowH, "embed_text");
+
+  box(g, x0, row3Y, colInW, rowH, t.obsBox, t.obsBorder, 6);
+  label(g, x0+colInW/2, row3Y+12*s, "Joint State", fsBold, t.obsLabel, "middle", 600);
+  label(g, x0+colInW/2, row3Y+24*s, "16D positions", fsSmall, t.obsInnerText);
+  hoverBox(g, x0, row3Y, colInW, rowH, "embed_state");
+
+  // CLIP encoder
+  const clipH = row2Y+rowH-row1Y;
+  box(g, x1, row1Y, colEncW, clipH, t.sigBox, t.sigBorder, 6);
+  label(g, x1+colEncW/2, row1Y+clipH/2-5*s, "CLIP", fsBold, t.sigLabel, "middle", 700);
+  label(g, x1+colEncW/2, row1Y+clipH/2+7*s, "frozen", fsSmall, t.sigSub);
+  hoverBox(g, x1, row1Y, colEncW, clipH, "clip");
+
+  arrow(g, x0+colInW, row1Y+rowH/2, x1, row1Y+rowH/2, t.obsBorder);
+  arrowLabel(g, (x0+colInW+x1)/2, row1Y+rowH/2-8*s, "pixels", fsSmall, t.subtext);
+
+  arrow(g, x0+colInW, row2Y+rowH/2, x1, row2Y+rowH/2, t.obsBorder);
+  arrowLabel(g, (x0+colInW+x1)/2, row2Y+rowH/2-8*s, "text", fsSmall, t.subtext);
+
+  // Stage Transformer
+  const stH2 = row3Y+rowH-row1Y;
+  box(g, x2, row1Y, colStageW, stH2, t.sarmBox, t.stageBorder, 6);
+  label(g, x2+colStageW/2, row1Y+14*s, "Stage", fsBold, t.stageText, "middle", 700);
+  label(g, x2+colStageW/2, row1Y+26*s, "Transformer", fsBold, t.stageText, "middle", 700);
+  label(g, x2+colStageW/2, row1Y+stH2/2+6*s, "Classifies which", fsSmall, t.subtext);
+  label(g, x2+colStageW/2, row1Y+stH2/2+18*s, "subtask the robot", fsSmall, t.subtext);
+  label(g, x2+colStageW/2, row1Y+stH2/2+30*s, "is currently in", fsSmall, t.subtext);
+  hoverBox(g, x2, row1Y, colStageW, stH2, "stage_tfm");
+
+  arrow(g, x1+colEncW, row1Y+clipH/2, x2, row1Y+clipH/2, t.sigBorder);
+  arrowLabel(g, (x1+colEncW+x2)/2, row1Y+clipH/2-8*s, "embeddings", fsSmall, t.subtext);
+
+  arrow(g, x0+colInW, row3Y+rowH/2, x2, row3Y+rowH/2, t.obsBorder);
+  arrowLabel(g, (x0+colInW+x2)/2, row3Y+rowH/2-8*s, "state vector", fsSmall, t.subtext);
+
+  // Subtask Transformer
+  box(g, x3, row1Y, colSubW, stH2, t.sarmBox, t.stageBorder, 6);
+  label(g, x3+colSubW/2, row1Y+14*s, "Subtask", fsBold, t.stageText, "middle", 700);
+  label(g, x3+colSubW/2, row1Y+26*s, "Transformer", fsBold, t.stageText, "middle", 700);
+  label(g, x3+colSubW/2, row1Y+stH2/2+6*s, "Predicts progress", fsSmall, t.subtext);
+  label(g, x3+colSubW/2, row1Y+stH2/2+18*s, "within the stage", fsSmall, t.subtext);
+  label(g, x3+colSubW/2, row1Y+stH2/2+30*s, "τ ∈ [0, 1]", fsSmall, t.subtext);
+  hoverBox(g, x3, row1Y, colSubW, stH2, "subtask_tfm");
+
+  arrow(g, x2+colStageW, row1Y+stH2*0.3, x3, row1Y+stH2*0.3, t.stageBorder);
+  arrowLabel(g, (x2+colStageW+x3)/2, row1Y+stH2*0.3-8*s, "stage (one-hot)", fsSmall, t.subtext);
+
+  // feed inputs into subtask too
+  curvedArrow(g, x1+colEncW/2, row1Y+clipH, x1+colEncW/2, row3Y+rowH+16*s, x3+colSubW*0.3, row1Y+stH2, t.obsBorder, true);
+  arrowLabel(g, x1+colEncW/2-2*s, row3Y+rowH+10*s, "same inputs", fsSmall, t.subtext, "end");
+
+  // output
+  box(g, x4, row1Y, colOutW, stH2, t.rwBox, t.rwBorder, 6);
+  label(g, x4+colOutW/2, row1Y+stH2/2-20*s, "Progress", fsBold, t.rwLabel, "middle", 700);
+  label(g, x4+colOutW/2, row1Y+stH2/2-6*s, "Score", fsBold, t.rwLabel, "middle", 700);
+  label(g, x4+colOutW/2, row1Y+stH2/2+10*s, "stage + τ", fs, t.rwSub);
+  label(g, x4+colOutW/2, row1Y+stH2/2+24*s, "normalized", fs, t.rwSub);
+  label(g, x4+colOutW/2, row1Y+stH2/2+36*s, "to [0, 1]", fs, t.rwSub);
+  hoverBox(g, x4, row1Y, colOutW, stH2, "sarm_reward");
+
+  arrow(g, x3+colSubW, row1Y+stH2*0.5, x4, row1Y+stH2*0.5, t.stageBorder);
+  arrowLabel(g, (x3+colSubW+x4)/2, row1Y+stH2*0.5-8*s, "τ value", fsSmall, t.subtext);
+
+  // uses row below
+  const usesY = row3Y+rowH+gap+8*s;
+  const useW = Math.min((W-pad*2)*0.5, 240*s);
+  const ux = W/2-useW/2;
+  box(g, ux, usesY, useW, 34*s, t.scoreBox, t.wsBorder, 6);
+  label(g, ux+useW/2, usesY+13*s, "RABC Training Weights", fsBold, t.scoreText, "middle", 600);
+  label(g, ux+useW/2, usesY+26*s, "Weight actions by progress delta", fsSmall, t.wsBorder);
+  hoverBox(g, ux, usesY, useW, 34*s, "rabc");
+  arrow(g, x4+colOutW/2, row1Y+stH2, ux+useW/2, usesY, t.rwBorder);
+  arrowLabel(g, (x4+colOutW/2+ux+useW/2)/2+12*s, row1Y+stH2+10*s, "used for ↓", fsSmall, t.subtext);
+
+  const H = usesY + 34*s + pad;
   svg.attr("width",W).attr("height",H).attr("viewBox",`0 0 ${W} ${H}`);
 }
 
 function render() {
+  if (_pi05AnimId) { cancelAnimationFrame(_pi05AnimId); _pi05AnimId = null; }
   svg.selectAll("*").remove();
   applyTabTheme();
   if (currentTab === "system") renderSystem();
@@ -542,14 +674,16 @@ function render() {
   else if (currentTab === "sarm") renderSARM();
 }
 
-document.querySelectorAll(".tab-btn").forEach(btn => {
-  btn.addEventListener("click", () => {
-    document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
-    btn.classList.add("active");
-    currentTab = btn.dataset.tab;
-    render();
+if (tabBar) {
+  tabBar.querySelectorAll(".tab-btn").forEach(btn => {
+    btn.addEventListener("click", () => {
+      tabBar.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
+      btn.classList.add("active");
+      currentTab = btn.dataset.tab;
+      render();
+    });
   });
-});
+}
 
 render();
 window.addEventListener("resize", render);
@@ -563,10 +697,10 @@ obs.observe(themeEl, { attributes: true, attributeFilter: ["data-theme"] });
 if (typeof d3 !== "undefined") {
   _initArchViz();
 } else {
-  var s = document.createElement("script");
-  s.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js";
-  s.onload = _initArchViz;
-  document.head.appendChild(s);
+  var _s = document.createElement("script");
+  _s.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js";
+  _s.onload = _initArchViz;
+  document.head.appendChild(_s);
 }
 </script>
 </body>

app/src/content/embeds/folding/rabc-explainer.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<style>
+  :root { --bg: transparent; --text: #e8eaf0; --subtext: #8b8fa8; --grid: rgba(255,255,255,0.08); }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); }
+  .controls {
+    display: flex; align-items: center; gap: 14px; justify-content: center;
+    margin: 0 0 4px; font-size: 14px; flex-wrap: wrap;
+  }
+  .controls label { color: var(--subtext); font-weight: 600; }
+  .controls input[type=range] {
+    width: 140px; accent-color: #6366f1; cursor: pointer;
+  }
+  .kval { color: #e8eaf0; font-weight: 700; min-width: 48px; }
+  .axis text { fill: #8b8fa8; font-size: 12px; }
+  .axis path, .axis line { stroke: rgba(255,255,255,0.15); }
+  .grid line { stroke: var(--grid); }
+  .grid path { stroke: none; }
+  .legend-row {
+    display: flex; gap: 16px; justify-content: center; font-size: 13px;
+    color: var(--subtext); margin-top: 6px; flex-wrap: wrap;
+  }
+  .legend-row span { display: flex; align-items: center; gap: 5px; }
+  .legend-swatch { width: 12px; height: 4px; border-radius: 2px; flex-shrink: 0; }
+</style>
+</head>
+<body>
+<div class="controls">
+  <label>κ threshold:</label>
+  <input type="range" id="kappa-slider" min="0" max="0.05" step="0.001" value="0.015"/>
+  <span class="kval" id="kappa-val">0.015</span>
+</div>
+<svg id="rabc-svg"></svg>
+<div class="legend-row">
+  <span><span class="legend-swatch" style="background:#22d3ee"></span>SARM progress</span>
+  <span><span class="legend-swatch" style="background:#10b981"></span>Full weight (δ &gt; κ)</span>
+  <span><span class="legend-swatch" style="background:#eab308"></span>Soft weight (0 ≤ δ ≤ κ)</span>
+  <span><span class="legend-swatch" style="background:#ef4444"></span>Zero weight (δ &lt; 0)</span>
+</div>
+<script>
+function _initRABC() {
+
+// Simulated SARM progress for a realistic folding episode
+const N = 120;
+const progressRaw = [];
+const seed = [
+  0,0.01,0.02,0.03,0.04,0.06,0.08,0.10,0.12,0.14,
+  0.16,0.18,0.20,0.22,0.24,0.26,0.28,0.28,0.27,0.26,
+  0.26,0.27,0.28,0.30,0.32,0.34,0.36,0.38,0.40,0.42,
+  0.44,0.45,0.45,0.45,0.44,0.44,0.45,0.46,0.48,0.50,
+  0.52,0.54,0.56,0.58,0.60,0.62,0.64,0.66,0.68,0.70,
+  0.72,0.73,0.74,0.74,0.73,0.72,0.71,0.70,0.70,0.71,
+  0.72,0.74,0.76,0.78,0.80,0.81,0.82,0.83,0.84,0.85,
+  0.85,0.85,0.86,0.86,0.87,0.88,0.89,0.90,0.91,0.92,
+  0.93,0.93,0.93,0.93,0.94,0.94,0.95,0.95,0.96,0.96,
+  0.96,0.97,0.97,0.97,0.98,0.98,0.98,0.98,0.99,0.99,
+  0.99,0.99,0.99,1.0,1.0,1.0,1.0,1.0,1.0,1.0,
+  1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0
+];
+for (let i = 0; i < N; i++) progressRaw.push(seed[i]);
+
+const CHUNK = 5;
+
+function computeDeltas(progress) {
+  const deltas = [];
+  for (let i = 0; i < progress.length; i++) {
+    const j = Math.min(i + CHUNK, progress.length - 1);
+    deltas.push(progress[j] - progress[i]);
+  }
+  return deltas;
+}
+
+function computeWeights(deltas, kappa) {
+  const posDeltas = deltas.filter(d => d >= 0);
+  let mu = posDeltas.length ? posDeltas.reduce((a,b)=>a+b,0)/posDeltas.length : 0;
+  mu = Math.max(mu, 0);
+  const variance = posDeltas.length > 1
+    ? posDeltas.reduce((s,d)=>s+(d-mu)*(d-mu),0)/(posDeltas.length-1) : 0.0001;
+  const sigma = Math.sqrt(variance);
+
+  return deltas.map(d => {
+    if (d > kappa) return 1.0;
+    if (d < 0) return 0.0;
+    const lo = mu - 2*sigma, hi = mu + 2*sigma;
+    const range = hi - lo;
+    if (range < 0.0001) return d >= 0 ? 1 : 0;
+    return Math.max(0, Math.min(1, (d - lo) / range));
+  });
+}
+
+const container = document.getElementById("rabc-svg").parentElement;
+const svg = d3.select("#rabc-svg");
+
+function render() {
+  svg.selectAll("*").remove();
+  const kappa = parseFloat(document.getElementById("kappa-slider").value);
+  document.getElementById("kappa-val").textContent = kappa.toFixed(3);
+
+  const deltas = computeDeltas(progressRaw);
+  const weights = computeWeights(deltas, kappa);
+
+  const W = container.clientWidth || 700;
+  const margin = { top: 12, right: 16, bottom: 56, left: 46 };
+  const totalH = Math.max(260, Math.min(360, W * 0.42));
+  const progressH = totalH * 0.55;
+  const gap = 24;
+  const weightH = totalH - progressH - gap;
+  const H = totalH + margin.top + margin.bottom;
+  const w = W - margin.left - margin.right;
+
+  svg.attr("width", W).attr("height", H);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+  const x = d3.scaleLinear().domain([0, N-1]).range([0, w]);
+  const yP = d3.scaleLinear().domain([0, 1]).range([progressH, 0]);
+  const yW = d3.scaleLinear().domain([0, 1]).range([weightH, 0]);
+  const wG = g.append("g").attr("transform", `translate(0,${progressH + gap})`);
+
+  // Progress grid + axis
+  g.append("g").attr("class","grid")
+    .call(d3.axisLeft(yP).ticks(4).tickSize(-w).tickFormat(""));
+  g.append("g").attr("class","axis")
+    .call(d3.axisLeft(yP).ticks(4).tickFormat(d3.format(".1f")));
+  g.append("text").attr("x",-progressH/2).attr("y",-36).attr("transform","rotate(-90)")
+    .attr("text-anchor","middle").attr("fill","#8b8fa8").attr("font-size",12).text("SARM progress");
+
+  // Weight grid + axis
+  wG.append("g").attr("class","grid")
+    .call(d3.axisLeft(yW).ticks(3).tickSize(-w).tickFormat(""));
+  wG.append("g").attr("class","axis")
+    .call(d3.axisLeft(yW).ticks(3).tickFormat(d3.format(".1f")));
+  wG.append("text").attr("x",-weightH/2).attr("y",-36).attr("transform","rotate(-90)")
+    .attr("text-anchor","middle").attr("fill","#8b8fa8").attr("font-size",12).text("Training weight");
+
+  // Shared x axis
+  wG.append("g").attr("class","axis").attr("transform",`translate(0,${weightH})`)
+    .call(d3.axisBottom(x).ticks(6).tickFormat(d => d + ""));
+  wG.append("text").attr("x",w/2).attr("y",weightH+30).attr("text-anchor","middle")
+    .attr("fill","#8b8fa8").attr("font-size",12).text("Timestep");
+
+  // Color weight bars
+  const barW = Math.max(1, w / N - 0.5);
+  weights.forEach((wt, i) => {
+    const delta = deltas[i];
+    let col;
+    if (delta < 0) col = "#ef4444";
+    else if (delta > kappa) col = "#10b981";
+    else col = "#eab308";
+
+    wG.append("rect")
+      .attr("x", x(i) - barW/2).attr("y", yW(wt))
+      .attr("width", barW).attr("height", Math.max(0, weightH - yW(wt)))
+      .attr("fill", col).attr("opacity", 0.8);
+  });
+
+  // Progress curve background shading
+  for (let i = 0; i < N - 1; i++) {
+    const delta = deltas[i];
+    let col;
+    if (delta < 0) col = "#ef4444";
+    else if (delta > kappa) col = "#10b981";
+    else col = "#eab308";
+
+    g.append("rect")
+      .attr("x", x(i)).attr("y", 0)
+      .attr("width", Math.max(1, x(i+1) - x(i))).attr("height", progressH)
+      .attr("fill", col).attr("opacity", 0.07);
+  }
+
+  // Progress line
+  const line = d3.line().x((d,i) => x(i)).y(d => yP(d)).curve(d3.curveMonotoneX);
+  g.append("path").datum(progressRaw)
+    .attr("fill","none").attr("stroke","#22d3ee").attr("stroke-width",2.5).attr("opacity",0.9)
+    .attr("d", line);
+
+}
+
+render();
+document.getElementById("kappa-slider").addEventListener("input", render);
+window.addEventListener("resize", render);
+}
+
+if (typeof d3 !== "undefined") { _initRABC(); }
+else { var s = document.createElement("script"); s.src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"; s.onload=_initRABC; document.head.appendChild(s); }
+</script>
+</body>
+</html>

app/src/content/embeds/folding/rtc-explainer.html

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<style>
+  :root { --bg: transparent; --text: #e8eaf0; --subtext: #8b8fa8; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); }
+  .controls {
+    display: flex; align-items: center; gap: 10px; justify-content: center;
+    margin: 0 0 4px; font-size: 14px; flex-wrap: wrap;
+  }
+  .mode-toggle {
+    display: flex; border-radius: 6px; overflow: hidden; border: 1px solid #333;
+  }
+  .mode-btn {
+    padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
+    border: none; background: #1a1d2e; color: #666;
+    transition: all .2s; font-family: inherit;
+  }
+  .mode-btn.active { background: #252540; color: #e8eaf0; }
+  .mode-btn:hover:not(.active) { background: #1f2238; color: #999; }
+  .play-btn {
+    width: 26px; height: 26px; border-radius: 50%; border: 1px solid #444;
+    background: #1a1d2e; color: #e8eaf0; cursor: pointer; font-size: 11px;
+    display: flex; align-items: center; justify-content: center; font-family: inherit;
+    transition: background .2s;
+  }
+  .play-btn:hover { background: #252540; }
+  .time-display { font-weight: 700; font-size: 14px; min-width: 70px; text-align: right; }
+  .legend-row {
+    display: flex; gap: 14px; justify-content: center; font-size: 12px;
+    color: #8b8fa8; margin-top: 4px; flex-wrap: wrap;
+  }
+  .legend-row span { display: flex; align-items: center; gap: 4px; }
+  .legend-swatch { width: 12px; height: 8px; border-radius: 2px; flex-shrink: 0; }
+</style>
+</head>
+<body>
+<div class="controls">
+  <div class="mode-toggle">
+    <button class="mode-btn active" data-mode="sync">Synchronous</button>
+    <button class="mode-btn" data-mode="rtc">RTC</button>
+  </div>
+  <button class="play-btn" id="play-btn">▶</button>
+  <input type="range" id="speed-slider" min="0.5" max="3" step="0.5" value="1" style="width:60px;accent-color:#6366f1;cursor:pointer;" title="Playback speed"/>
+  <span class="time-display" id="time-display"></span>
+</div>
+<svg id="rtc-svg"></svg>
+<div class="legend-row" id="legend-row">
+  <span><span class="legend-swatch" style="background:#7c7fff"></span>Inference</span>
+  <span><span class="legend-swatch" style="background:#22d3ee"></span>Executing</span>
+  <span id="legend-idle"><span class="legend-swatch" style="background:transparent;border:1px dashed #555"></span>Idle</span>
+</div>
+<script>
+function _initRTC() {
+
+const CHUNK = 10, INF = 3, N_CHUNKS = 4;
+
+function buildSync() {
+  const inf = [], exec = [], idle = [];
+  let t = 0;
+  for (let i = 0; i < N_CHUNKS; i++) {
+    inf.push({ s: t, e: t + INF, i: i });
+    idle.push({ s: t, e: t + INF });
+    t += INF;
+    exec.push({ s: t, e: t + CHUNK, i: i, lock: 0 });
+    t += CHUNK;
+  }
+  return { inf, exec, idle, T: t };
+}
+
+function buildRTC() {
+  const inf = [], exec = [], idle = [];
+  inf.push({ s: 0, e: INF, i: 0 });
+  idle.push({ s: 0, e: INF });
+  let t = INF;
+  for (let i = 0; i < N_CHUNKS; i++) {
+    exec.push({ s: t, e: t + CHUNK, i: i, lock: i > 0 ? INF : 0 });
+    if (i + 1 < N_CHUNKS) inf.push({ s: t, e: t + INF, i: i + 1 });
+    t += CHUNK - (i + 1 < N_CHUNKS ? INF : 0);
+  }
+  return { inf, exec, idle, T: exec[exec.length - 1].e };
+}
+
+const SYNC = buildSync(), RTC_ = buildRTC();
+let mode = "sync", playing = false, playT = 0, speed = 1, animId = null, lastFrame = null;
+
+const container = document.getElementById("rtc-svg").parentElement;
+const svg = d3.select("#rtc-svg");
+const playBtn = document.getElementById("play-btn");
+const speedSlider = document.getElementById("speed-slider");
+const timeDisp = document.getElementById("time-display");
+const legendIdle = document.getElementById("legend-idle");
+const legendRow = document.getElementById("legend-row");
+
+const infPalette = ["#7c7fff", "#9590ff", "#7c7fff", "#9590ff"];
+const execPalette = ["#22d3ee", "#14b8a6", "#06b6d4", "#0ea5e9"];
+const lockColor = "#0c5e6f";
+
+function data() { return mode === "sync" ? SYNC : RTC_; }
+
+function render() {
+  svg.selectAll("*").remove();
+  const d = data();
+  const W = container.clientWidth || 600;
+  const ml = 72, mr = 12, mt = 6, mb = 24;
+  const laneH = 32, gap = 20;
+  const w = W - ml - mr;
+  const H = mt + laneH * 2 + gap + mb;
+
+  svg.attr("width", W).attr("height", H).attr("viewBox", `0 0 ${W} ${H}`);
+  const g = svg.append("g").attr("transform", `translate(${ml},${mt})`);
+  const maxT = Math.max(SYNC.T, RTC_.T);
+  const x = d3.scaleLinear().domain([0, maxT]).range([0, w]);
+  const iy = 0, ey = laneH + gap;
+
+  g.append("rect").attr("x", 0).attr("y", iy).attr("width", w).attr("height", laneH)
+    .attr("fill", "#ffffff").attr("opacity", 0.02).attr("rx", 4);
+  g.append("rect").attr("x", 0).attr("y", ey).attr("width", w).attr("height", laneH)
+    .attr("fill", "#ffffff").attr("opacity", 0.02).attr("rx", 4);
+
+  g.append("text").attr("x", -10).attr("y", iy + laneH / 2)
+    .attr("text-anchor", "end").attr("dominant-baseline", "middle")
+    .attr("fill", "#8b8fa8").attr("font-size", 12).attr("font-weight", 500).text("Predict");
+  g.append("text").attr("x", -10).attr("y", ey + laneH / 2)
+    .attr("text-anchor", "end").attr("dominant-baseline", "middle")
+    .attr("fill", "#8b8fa8").attr("font-size", 12).attr("font-weight", 500).text("Execute");
+
+  d.idle.forEach(id => {
+    const bx = x(id.s), bw = x(id.e) - x(id.s);
+    g.append("rect").attr("x", bx + 1).attr("y", ey + 3).attr("width", Math.max(0, bw - 2)).attr("height", laneH - 6)
+      .attr("fill", "none").attr("stroke", "#444").attr("stroke-width", 1)
+      .attr("stroke-dasharray", "4,3").attr("rx", 3);
+  });
+
+  d.inf.forEach(b => {
+    const bx = x(b.s), bw = x(b.e) - x(b.s);
+    const col = infPalette[b.i % infPalette.length];
+    g.append("rect").attr("x", bx).attr("y", iy + 3).attr("width", bw).attr("height", laneH - 6)
+      .attr("fill", col).attr("opacity", 0.9).attr("rx", 4);
+
+    const connX = bx + bw / 2;
+    const execBlock = d.exec.find(e => e.i === b.i);
+    if (execBlock) {
+      const targetX = x(execBlock.s) + (x(execBlock.e) - x(execBlock.s)) / 2;
+      g.append("line")
+        .attr("x1", connX).attr("y1", iy + laneH - 2)
+        .attr("x2", targetX).attr("y2", ey + 2)
+        .attr("stroke", col).attr("stroke-width", 1)
+        .attr("stroke-dasharray", "2,3").attr("opacity", 0.3);
+    }
+  });
+
+  d.exec.forEach(b => {
+    const bx = x(b.s), bw = x(b.e) - x(b.s);
+    const col = execPalette[b.i % execPalette.length];
+
+    if (b.lock > 0) {
+      const lw = x(b.s + b.lock) - bx;
+      g.append("rect").attr("x", bx).attr("y", ey + 3).attr("width", bw).attr("height", laneH - 6)
+        .attr("fill", col).attr("opacity", 0.85).attr("rx", 4);
+      g.append("rect").attr("x", bx).attr("y", ey + 3).attr("width", lw).attr("height", laneH - 6)
+        .attr("fill", lockColor).attr("opacity", 0.95).attr("rx", 4);
+      for (let sx = bx + 3; sx < bx + lw - 1; sx += 5) {
+        g.append("line").attr("x1", sx).attr("y1", ey + 3)
+          .attr("x2", sx + (laneH - 6) * 0.4).attr("y2", ey + laneH - 3)
+          .attr("stroke", "#1a8a9e").attr("stroke-width", 0.8).attr("opacity", 0.5);
+      }
+      g.append("line").attr("x1", bx + lw).attr("y1", ey + 5)
+        .attr("x2", bx + lw).attr("y2", ey + laneH - 5)
+        .attr("stroke", "#fff").attr("stroke-width", 0.5).attr("opacity", 0.3);
+    } else {
+      g.append("rect").attr("x", bx).attr("y", ey + 3).attr("width", bw).attr("height", laneH - 6)
+        .attr("fill", col).attr("opacity", 0.85).attr("rx", 4);
+    }
+
+    if (bw > 30) {
+      g.append("text").attr("x", bx + bw / 2).attr("y", ey + laneH / 2)
+        .attr("text-anchor", "middle").attr("dominant-baseline", "middle")
+        .attr("fill", "#fff").attr("font-size", 12).attr("font-weight", 600)
+        .attr("opacity", 0.9).text("C" + (b.i + 1));
+    }
+  });
+
+  const ticks = [];
+  const step = maxT > 30 ? 10 : 5;
+  for (let t = 0; t <= maxT; t += step) ticks.push(t);
+  ticks.forEach(t => {
+    const tx = x(t);
+    g.append("line").attr("x1", tx).attr("y1", ey + laneH + 2).attr("x2", tx).attr("y2", ey + laneH + 5)
+      .attr("stroke", "#555").attr("stroke-width", 0.5);
+    g.append("text").attr("x", tx).attr("y", ey + laneH + 14)
+      .attr("text-anchor", "middle").attr("fill", "#666").attr("font-size", 11)
+      .text(Math.round(t * 33) + "ms");
+  });
+
+  const playhead = g.append("line")
+    .attr("x1", x(playT)).attr("x2", x(playT))
+    .attr("y1", -2).attr("y2", ey + laneH + 2)
+    .attr("stroke", "#f87171").attr("stroke-width", 1.5).attr("opacity", playing || playT > 0 ? 0.9 : 0);
+  g.append("circle").attr("cx", x(playT)).attr("cy", -2).attr("r", 3)
+    .attr("fill", "#f87171").attr("opacity", playing || playT > 0 ? 0.9 : 0).attr("class", "ph-dot");
+
+  const totalMs = Math.round(d.T * 33);
+  const syncMs = Math.round(SYNC.T * 33);
+  if (mode === "rtc") {
+    const pct = Math.round((syncMs - totalMs) / syncMs * 100);
+    timeDisp.innerHTML = `<span style="color:#10b981">${totalMs}ms</span> <span style="color:#666">(${pct}% faster)</span>`;
+  } else {
+    timeDisp.innerHTML = `<span style="color:#666">${totalMs}ms</span>`;
+  }
+
+  if (mode === "rtc") {
+    legendIdle.style.display = "none";
+    if (!document.getElementById("legend-locked")) {
+      const sp = document.createElement("span");
+      sp.id = "legend-locked";
+      sp.innerHTML = `<span class="legend-swatch" style="background:${lockColor}"></span>Committed`;
+      legendRow.appendChild(sp);
+    }
+  } else {
+    legendIdle.style.display = "";
+    const lk = document.getElementById("legend-locked");
+    if (lk) lk.remove();
+  }
+
+  window._ph = { line: playhead, dot: g.select(".ph-dot"), x };
+}
+
+function animate(ts) {
+  if (!playing) return;
+  if (!lastFrame) lastFrame = ts;
+  const dt = (ts - lastFrame) / 1000;
+  lastFrame = ts;
+  playT += dt * speed * 8;
+  if (playT > data().T) { playT = 0; lastFrame = null; }
+  if (window._ph) {
+    const px = window._ph.x(playT);
+    window._ph.line.attr("x1", px).attr("x2", px).attr("opacity", 0.9);
+    window._ph.dot.attr("cx", px).attr("opacity", 0.9);
+  }
+  animId = requestAnimationFrame(animate);
+}
+
+playBtn.addEventListener("click", () => {
+  playing = !playing;
+  playBtn.textContent = playing ? "⏸" : "▶";
+  if (playing) { lastFrame = null; animId = requestAnimationFrame(animate); }
+  else cancelAnimationFrame(animId);
+});
+speedSlider.addEventListener("input", () => {
+  speed = parseFloat(speedSlider.value);
+});
+
+document.querySelectorAll(".mode-btn").forEach(btn => {
+  btn.addEventListener("click", () => {
+    document.querySelectorAll(".mode-btn").forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+    mode = btn.dataset.mode;
+    playT = 0;
+    render();
+  });
+});
+
+render();
+window.addEventListener("resize", render);
+}
+
+if (typeof d3 !== "undefined") { _initRTC(); }
+else { var s = document.createElement("script"); s.src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"; s.onload=_initRTC; document.head.appendChild(s); }
+</script>
+</body>
+</html>

app/src/content/embeds/folding/statistical-analysis.html

@@ -9,26 +9,26 @@ body{background:transparent;font-family:system-ui,sans-serif;color:#e8eaf0}
 .wrap{max-width:980px;margin:0 auto;padding:20px 20px 36px}
 
 .card{background:#1a1d27;border:1px solid #2a2d3a;border-radius:6px;overflow:visible;margin-bottom:12px}
-.card-head{padding:9px 14px;border-bottom:1px solid #2a2d3a;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#8b8fa8;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
+.card-head{padding:9px 14px;border-bottom:1px solid #2a2d3a;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#8b8fa8;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
 .chart-area{padding:16px 16px 10px}
 svg text{font-family:system-ui,sans-serif}
 
-.insight{background:#12151f;border:1px solid #2a2d3a;border-left:3px solid #f7934f;border-radius:4px;padding:9px 13px;margin-bottom:12px;font-size:10px;color:#8b8fa8;line-height:1.7}
+.insight{background:#12151f;border:1px solid #2a2d3a;border-left:3px solid #f7934f;border-radius:4px;padding:9px 13px;margin-bottom:12px;font-size:12px;color:#8b8fa8;line-height:1.7}
 .insight strong{color:#e8eaf0}
 .insight.blue{border-left-color:#60a5fa}
 .insight.green{border-left-color:#4dc98a}
 .insight.purple{border-left-color:#818cf8}
 
 .legend{display:flex;gap:12px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid #2a2d3a}
-.li{display:flex;align-items:center;gap:6px;font-size:10px;color:#8b8fa8}
+.li{display:flex;align-items:center;gap:6px;font-size:12px;color:#8b8fa8}
 .lsw{width:14px;height:3px;border-radius:1px}
 
-.ctrl-btn{padding:4px 10px;background:#1a1d27;border:1px solid #2a2d3a;border-radius:4px;color:#8b8fa8;font-family:inherit;font-size:9px;cursor:pointer;letter-spacing:.04em;transition:all .15s}
+.ctrl-btn{padding:5px 12px;background:#1a1d27;border:1px solid #2a2d3a;border-radius:4px;color:#8b8fa8;font-family:inherit;font-size:11px;cursor:pointer;letter-spacing:.04em;transition:all .15s}
 .ctrl-btn:hover,.ctrl-btn.active{color:#e8eaf0;border-color:#4a4d5a;background:#252835}
 
-.note{font-size:10px;color:#555e7a;margin-top:10px;line-height:1.6}
+.note{font-size:12px;color:#555e7a;margin-top:10px;line-height:1.6}
 @media(prefers-color-scheme:dark){.note{color:#c8cad8}}
-.tooltip{position:fixed;background:#252835;border:1px solid #3a3d4a;border-radius:4px;padding:8px 11px;font-size:9px;color:#e8eaf0;pointer-events:none;opacity:0;transition:opacity .1s;z-index:100;line-height:1.7;max-width:240px}
+.tooltip{position:fixed;background:#252835;border:1px solid #3a3d4a;border-radius:4px;padding:8px 11px;font-size:11px;color:#e8eaf0;pointer-events:none;opacity:0;transition:opacity .1s;z-index:100;line-height:1.7;max-width:240px}
 </style>
 </head>
 <body>
@@ -38,7 +38,7 @@ svg text{font-family:system-ui,sans-serif}
 </div>
 <div class="card">
   <div class="card-head">
-    <span>Posterior success rate distributions — Beta(1+k, 1+n-k)</span>
+    <span>Posterior success rate distributions: Beta(1+k, 1+n-k)</span>
     <div style="display:flex;gap:6px">
       <button class="ctrl-btn active" id="v-total" onclick="setVLevel('total')">Total</button>
       <button class="ctrl-btn" id="v-l1" onclick="setVLevel('L1')">Level 1</button>
@@ -47,8 +47,8 @@ svg text{font-family:system-ui,sans-serif}
   </div>
   <div class="chart-area" style="overflow:visible"><svg id="svg-violin" width="100%" height="500" style="overflow:visible"></svg></div>
   <div class="legend">
-    <div class="li"><div class="lsw" style="background:#f7934f"></div>Series 1</div>
-    <div class="li"><div class="lsw" style="background:#4dc98a"></div>Series 2</div>
+    <div class="li"><div class="lsw" style="background:#f7934f"></div>Initial (1.x)</div>
+    <div class="li"><div class="lsw" style="background:#4dc98a"></div>Fine-tuned (2.x)</div>
     <div class="li" style="font-size:10px;color:#8b8fa8">Bold letter = CLD group (STEP, Bonferroni α=0.10/55, n<sub>max</sub>=50)</div>
   </div>
 </div>
@@ -78,7 +78,7 @@ const DATA = {
 // CLD assignments (STEP sequential test, two-sided, Bonferroni α=0.10/55, n_max=50)
 const CLD = {
   total: {'2.5 HQ+RABC+Rel★':'a','2.2 HQ+RABC+Rel':'ab','1.1 π0':'bc','1.7 Rel+RABC':'bc','2.1 HQ':'bc','1.3 Relative':'bc','1.2 π0.5':'cd','2.4 HQ chunk45':'cd','1.4 RABC low':'cd','2.3 HQ+mirror':'cd','1.5 RABC high':'d'},
-  L1:   {'2.2 HQ+RABC+Rel':'a','2.5 HQ+RABC+Rel★':'a','1.1 π0':'a','1.7 Rel+RABC':'a','1.3 Relative':'a','2.1 HQ':'a','1.2 π0.5':'ab','2.4 HQ chunk45':'ab','1.4 RABC low':'ab','1.5 RABC high':'b','2.3 HQ+mirror':'b'},
+  L1:   {'2.2 HQ+RABC+Rel':'a','2.5 HQ+RABC+Rel★':'a','1.1 π0':'a','1.7 Rel+RABC':'a','1.3 Relative':'a','2.1 HQ':'a','1.2 π0.5':'ab','2.4 HQ chunk45':'ab','1.4 RABC low':'ab','2.3 HQ+mirror':'b','1.5 RABC high':'b'},
   L2:   {'2.5 HQ+RABC+Rel★':'a','2.2 HQ+RABC+Rel':'ab','2.1 HQ':'ab','2.3 HQ+mirror':'ab','1.1 π0':'b','1.2 π0.5':'b','1.3 Relative':'b','1.4 RABC low':'b','1.5 RABC high':'b','1.7 Rel+RABC':'b','2.4 HQ chunk45':'b'},
 };
 
@@ -154,7 +154,7 @@ function drawViolin(){
   g.append('line').attr('x1',0).attr('x2',iW).attr('y1',y(0.5)).attr('y2',y(0.5))
    .attr('stroke','#3a3d4a').attr('stroke-dasharray','4,3').attr('opacity',.6);
   g.append('text').attr('x',iW-2).attr('y',y(0.5)-4).attr('text-anchor','end')
-   .attr('fill','#3a3d4a').attr('font-size',8).text('50%');
+   .attr('fill','#3a3d4a').attr('font-size',10).text('50%');
 
   const tooltip=document.getElementById('tooltip');
 
@@ -199,11 +199,11 @@ function drawViolin(){
     // CLD letter
     const cldLetter=(CLD[vLevel]||CLD.total)[expId]||'?';
     g.append('text').attr('x',cx).attr('y',-8).attr('text-anchor','middle')
-     .attr('fill',c).attr('font-size',11).attr('font-weight','bold').text(cldLetter);
+     .attr('fill',c).attr('font-size',13).attr('font-weight','bold').text(cldLetter);
 
     // SR fraction label
     g.append('text').attr('x',cx).attr('y',-22).attr('text-anchor','middle')
-     .attr('fill',SUB).attr('font-size',9).text(`${k}/${n}`);
+     .attr('fill',SUB).attr('font-size',11).text(`${k}/${n}`);
 
     // Hover
     const hitbox=g.append('rect').attr('x',bx).attr('y',0).attr('width',bw).attr('height',iH)
@@ -221,11 +221,11 @@ function drawViolin(){
   // Axes
   g.append('g').attr('transform',`translate(0,${iH})`)
    .call(d3.axisBottom(x).tickSize(0))
-   .call(gg=>{gg.select('.domain').attr('stroke',BORDER);gg.selectAll('text').attr('fill',d=>seriesColor(DATA[d].series)).attr('font-size',9).attr('transform','rotate(-40)').attr('text-anchor','end').attr('dx','-0.5em').attr('dy','0.3em')});
+   .call(gg=>{gg.select('.domain').attr('stroke',BORDER);gg.selectAll('text').attr('fill',d=>seriesColor(DATA[d].series)).attr('font-size',11).attr('transform','rotate(-40)').attr('text-anchor','end').attr('dx','-0.5em').attr('dy','0.3em')});
   g.append('g').call(d3.axisLeft(y).ticks(5).tickFormat(d=>Math.round(d*100)+'%').tickSize(3))
-   .call(gg=>{gg.select('.domain').attr('stroke',BORDER);gg.selectAll('text').attr('fill',SUB).attr('font-size',9);gg.selectAll('line').attr('stroke',BORDER)});
+   .call(gg=>{gg.select('.domain').attr('stroke',BORDER);gg.selectAll('text').attr('fill',SUB).attr('font-size',11);gg.selectAll('line').attr('stroke',BORDER)});
   g.append('text').attr('transform','rotate(-90)').attr('x',-iH/2).attr('y',-30).attr('text-anchor','middle')
-   .attr('fill',SUB).attr('font-size',9).text('Posterior success rate');
+   .attr('fill',SUB).attr('font-size',11).text('Posterior success rate');
 }
 
 window.setVLevel = setVLevel;

app/src/content/embeds/folding/subtask-heatmap.html

@@ -16,86 +16,186 @@
   .tooltip strong { display: block; margin-bottom: 5px; }
   .tooltip-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; font-size: 12px; color: var(--subtext); }
   .tooltip-row span:last-child { color: var(--text); font-weight: 600; }
-  .legend-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--subtext); justify-content: center; }
+  .legend-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--subtext); justify-content: center; }
   .legend-gradient { height: 10px; width: 180px; border-radius: 5px; flex-shrink: 0; }
-
+  .hm-toggle { display: flex; gap: 0; justify-content: center; margin-bottom: 6px; }
+  .hm-btn {
+    padding: 7px 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: none;
+    background: #1a1d2e; color: #8b8fa8; transition: all .2s;
+    font-family: system-ui, sans-serif; border-bottom: 2px solid transparent;
+  }
+  .hm-btn:first-child { border-radius: 6px 0 0 0; }
+  .hm-btn:last-child { border-radius: 0 6px 0 0; }
+  .hm-btn.active { background: #252540; color: #e8eaf0; border-bottom-color: #6366f1; }
+  .hm-btn:hover:not(.active) { background: #1f2238; color: #bbb; }
+  .filter-toggle {
+    font-size: 12px; color: #8b8fa8; cursor: pointer; border: 1px solid #2a2d3a;
+    background: #1a1d27; padding: 4px 12px; border-radius: 14px; transition: all .15s;
+    user-select: none; display: inline-flex; align-items: center; gap: 4px;
+  }
+  .filter-toggle:hover { border-color: #555; color: #e8eaf0; }
+  .filter-toggle.showing-all { background: rgba(248,147,79,0.12); border-color: #f7934f; color: #f7934f; }
+  .hm-controls { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; align-items: center; }
 </style>
 </head>
 <body>
+<div class="hm-controls">
+  <button class="filter-toggle" id="hm-filter-btn" onclick="window._hmToggleFilter()">Show all 11</button>
+</div>
 <div style="position:relative">
   <svg id="hm-chart"></svg>
   <div class="tooltip" id="hm-tooltip"></div>
 </div>
-<div class="legend-bar">
-  <span>Fast (0s)</span>
+<div class="legend-bar" id="lgd-bar">
+  <span id="lgd-lo">Fast (0s)</span>
   <canvas id="lgd" class="legend-gradient" width="180" height="10"></canvas>
-  <span>Slow (≥120s)</span>
+  <span id="lgd-hi">Slow (≥120s)</span>
 </div>
 <script>
 function _initSubtaskHeatmap() {
 const rawData = [
-  {label:"1.1 π0",series:"1",total_sr:40, times:[null, 19.2,  42.22, 14.33, 19.88, 27.25]},
-  {label:"1.2 π0.5",series:"1",total_sr:20, times:[50,   39.27, 41.5,  12.3,  13.75, 10.75]},
-  {label:"1.3 Relative",series:"1",total_sr:35, times:[null, 19.5,  44.2,  14.8,  30.33, 22.14]},
-  {label:"1.4 RABC low",series:"1",total_sr:15, times:[null, 20.8,  36.62, 10.0,  18.8,  12.67]},
-  {label:"1.5 RABC high",series:"1",total_sr:0,  times:[240,  21.4,  100.0, null,  null,  null ]},
-  {label:"1.7 Rel+RABC",series:"1",total_sr:40, times:[157.5,19.33, 32.64, 8.9,   11.0,  23.38]},
-  {label:"2.1 HQ",series:"2",total_sr:40, times:[77.5, 11.08, 21.09, 5.45,  5.5,   11.5 ]},
-  {label:"2.2 HQ+RABC+Rel",series:"2",total_sr:75, times:[34.33,6.25,  12.31, 3.75,  5.31,  8.93 ]},
-  {label:"2.3 HQ+mirror",series:"2",total_sr:5,  times:[49,   14.0,  23.71, 17.5,  11.0,  4.0  ]},
-  {label:"2.4 HQ chunk45",series:"2",total_sr:20, times:[120,  10.09, 41.18, 7.89,  7.33,  10.0 ]},
-  {label:"2.5 HQ+RABC+Rel★",series:"2",total_sr:90, times:[62.25,8.28,  12.0,  5.28,  5.22,  6.83 ]},
+  {label:"1.1 π0",series:"1",total_sr:40, times:[null, 19.2,  42.22, 14.33, 19.88, 27.25], l1time:121.5, quality:2.70},
+  {label:"1.2 π0.5",series:"1",total_sr:20, times:[50,   39.27, 41.5,  12.3,  13.75, 10.75], l1time:90.75, quality:2.50},
+  {label:"1.3 Relative",series:"1",total_sr:35, times:[null, 19.5,  44.2,  14.8,  30.33, 22.14], l1time:113.86,quality:2.80},
+  {label:"1.4 RABC low",series:"1",total_sr:15, times:[null, 20.8,  36.62, 10.0,  18.8,  12.67], l1time:78.33, quality:2.20},
+  {label:"1.5 RABC high",series:"1",total_sr:0,  times:[240,  21.4,  100.0, null,  null,  null ], l1time:null,  quality:1.00},
+  {label:"1.7 Rel+RABC",series:"1",total_sr:40, times:[157.5,19.33, 32.64, 8.9,   11.0,  23.38], l1time:99.5,  quality:2.30},
+  {label:"2.1 HQ",series:"2",total_sr:40, times:[77.5, 11.08, 21.09, 5.45,  5.5,   11.5 ], l1time:57.57, quality:2.80},
+  {label:"2.2 HQ+RABC+Rel",series:"2",total_sr:75, times:[34.33,6.25,  12.31, 3.75,  5.31,  8.93 ], l1time:43.2,  quality:3.30},
+  {label:"2.3 HQ+mirror",series:"2",total_sr:5,  times:[49,   14.0,  23.71, 17.5,  11.0,  4.0  ], l1time:null,  quality:1.00},
+  {label:"2.4 HQ chunk45",series:"2",total_sr:20, times:[120,  10.09, 41.18, 7.89,  7.33,  10.0 ], l1time:72.5,  quality:1.80},
+  {label:"2.5 HQ+RABC+Rel★",series:"2",total_sr:90, times:[62.25,8.28,  12.0,  5.28,  5.22,  6.83 ], l1time:40.8,  quality:4.10},
 ];
 
-// Sort rows: best → worst by total_sr (heatmap: top = best)
-const data = [...rawData].sort((a,b) => b.total_sr - a.total_sr);
+const HIDDEN_BY_DEFAULT = new Set(["1.4 RABC low","1.5 RABC high","2.3 HQ+mirror","2.4 HQ chunk45"]);
+let hmShowAll = false;
+
+window._hmToggleFilter = function() {
+  hmShowAll = !hmShowAll;
+  const btn = document.getElementById("hm-filter-btn");
+  btn.textContent = hmShowAll ? "Key experiments" : "Show all 11";
+  btn.classList.toggle("showing-all", hmShowAll);
+  render();
+};
+
+function getFilteredData() {
+  const src = hmShowAll ? rawData : rawData.filter(d => !HIDDEN_BY_DEFAULT.has(d.label));
+  return [...src].sort((a,b) => {
+    if (a.l1time === null && b.l1time === null) return 0;
+    if (a.l1time === null) return 1;
+    if (b.l1time === null) return -1;
+    return a.l1time - b.l1time;
+  });
+}
 const subtasks = ["Unfold","Fold 1","Fold 2","Fold 3","Fold 4","Rotation"];
 const seriesColor = s => s === "2" ? "#f7934f" : "#4f8ef7";
 
-// Color: green (fast) → yellow → red (slow), capped at 120s
-const colorScale = d3.scaleSequential().domain([0, 120])
-  .interpolator(t => {
-    const stops = [[0,[46,200,138]],[0.4,[247,211,79]],[1,[220,60,60]]];
-    for (let i=0; i<stops.length-1; i++) {
-      const [t0,c0]=stops[i],[t1,c1]=stops[i+1];
-      if (t<=t1) {
-        const f=(t-t0)/(t1-t0);
-        return `rgb(${Math.round(c0[0]+(c1[0]-c0[0])*f)},${Math.round(c0[1]+(c1[1]-c0[1])*f)},${Math.round(c0[2]+(c1[2]-c0[2])*f)})`;
-      }
+let mode = "rel";
+
+// Compute per-subtask means over ALL experiments (ignoring nulls)
+const subtaskMeans = subtasks.map((_, ci) => {
+  const vals = rawData.map(d => d.times[ci]).filter(v => v !== null);
+  return vals.length ? vals.reduce((a,b) => a+b, 0) / vals.length : 1;
+});
+
+function lerpColor(stops, t) {
+  for (let i=0; i<stops.length-1; i++) {
+    const [t0,c0]=stops[i],[t1,c1]=stops[i+1];
+    if (t<=t1) {
+      const f=(t-t0)/(t1-t0);
+      return `rgb(${Math.round(c0[0]+(c1[0]-c0[0])*f)},${Math.round(c0[1]+(c1[1]-c0[1])*f)},${Math.round(c0[2]+(c1[2]-c0[2])*f)})`;
     }
-    return "rgb(220,60,60)";
-  });
+  }
+  return `rgb(${stops[stops.length-1][1].join(",")})`;
+}
+
+// Absolute: green → yellow → red, capped at 120s
+const absColor = v => lerpColor([[0,[46,200,138]],[0.4,[247,211,79]],[1,[220,60,60]]], Math.min(v,120)/120);
 
-// Draw legend gradient
-const canvas = document.getElementById("lgd");
-const ctx = canvas.getContext("2d");
-for (let i=0; i<180; i++) { ctx.fillStyle=colorScale(i/180*120); ctx.fillRect(i,0,1,10); }
+// Relative: green (0.2x) → neutral (1x) → red (3x), diverging around mean
+const relColor = ratio => {
+  const t = Math.max(0, Math.min(1, (ratio - 0.2) / (3 - 0.2)));
+  return lerpColor([[0,[46,200,138]],[0.286,[230,230,210]],[1,[220,60,60]]], t);
+};
+
+// Quality: red (1.0) → yellow (2.5) → green (4.5)
+const qualColor = v => {
+  const t = Math.max(0, Math.min(1, (v - 1.0) / (4.5 - 1.0)));
+  return lerpColor([[0,[220,60,60]],[0.43,[247,211,79]],[1,[46,200,138]]], t);
+};
+
+function drawLegend() {
+  const canvas = document.getElementById("lgd");
+  const ctx = canvas.getContext("2d");
+  for (let i=0; i<180; i++) {
+    const t = i/179;
+    ctx.fillStyle = mode === "abs" ? absColor(t*120) : relColor(0.2 + t*2.8);
+    ctx.fillRect(i,0,1,10);
+  }
+  document.getElementById("lgd-lo").textContent = mode === "abs" ? "Fast (0s)" : "Fast (0.2×)";
+  document.getElementById("lgd-hi").textContent = mode === "abs" ? "Slow (≥120s)" : "Slow (≥3×)";
+}
+drawLegend();
 
 const margin = {top:12, right:16, bottom:36, left:120};
 const svg = d3.select("#hm-chart");
 const container = svg.node().parentElement;
 const tooltip = d3.select("#hm-tooltip");
 
+const EXPERIMENTS = {
+  "1.1 π0": { note:"Base pi0 policy trained from scratch on the full dataset." },
+  "1.2 π0.5": { note:"Upgraded to pi0.5 architecture, same data and steps." },
+  "1.3 Relative": { note:"Adds Relative Actions, expressing actions relative to current state." },
+  "1.4 RABC low": { note:"SARM with low κ (≈ mean threshold, not very selective)." },
+  "1.5 RABC high": { note:"SARM with κ = mean + ½ std, more selective filtering than 1.4." },
+  "1.7 Rel+RABC": { note:"Best of initial training. Base checkpoint for 2.5." },
+  "2.1 HQ": { note:"Fine-tunes 1.3 on curated high-quality data only." },
+  "2.2 HQ+RABC+Rel": { note:"Adds RABC on high-quality fine-tune from 1.3." },
+  "2.3 HQ+mirror": { note:"Augments the high-quality dataset with mirrored trajectories." },
+  "2.4 HQ chunk45": { note:"Larger action chunk size (45 vs default 30)." },
+  "2.5 HQ+RABC+Rel★": { note:"Top performer. Best overall result." },
+};
+
+const GAP = 10;
+const sumCols = ["L1 Time","Quality"];
+
 function render() {
   svg.selectAll("*").remove();
+  const data = getFilteredData();
   const W = container.clientWidth;
-  const cellW = Math.floor((W - margin.left - margin.right) / subtasks.length);
+  const totalCols = subtasks.length + sumCols.length;
+  const cellW = Math.floor((W - margin.left - margin.right - GAP) / totalCols);
   const cellH = Math.max(34, Math.min(44, cellW * 0.7));
   const H = data.length * cellH + margin.top + margin.bottom;
   svg.attr("width",W).attr("height",H);
   const g = svg.append("g").attr("transform",`translate(${margin.left},${margin.top})`);
   const gridW = cellW * subtasks.length;
   const gridH = cellH * data.length;
+  const sumX = gridW + GAP;
 
-  // Column labels
+  // Subtask column labels
   g.selectAll(".col-lbl").data(subtasks).join("text")
     .attr("x",(_,i)=>i*cellW+cellW/2).attr("y",gridH+22)
-    .attr("text-anchor","middle").attr("fill","#8b8fa8").attr("font-size",11)
+    .attr("text-anchor","middle").attr("fill","#8b8fa8").attr("font-size",13)
     .text(d=>d);
 
+  // Summary column labels (italic, slightly muted)
+  sumCols.forEach((label, i) => {
+    g.append("text")
+      .attr("x", sumX + i * cellW + cellW / 2).attr("y", gridH + 22)
+      .attr("text-anchor","middle").attr("fill","#6b6f88").attr("font-size",12)
+      .attr("font-style","italic")
+      .text(label);
+  });
+
+  // Vertical divider between subtask and summary columns
+  g.append("line")
+    .attr("x1", gridW + GAP / 2).attr("x2", gridW + GAP / 2)
+    .attr("y1", -2).attr("y2", gridH)
+    .attr("stroke","#2a2d3a").attr("stroke-width",1);
+
   // Row labels + series stripe
   data.forEach((d, ri) => {
-    // Series colour stripe on the left
     g.append("rect")
       .attr("x",-margin.left+2).attr("y",ri*cellH+2)
       .attr("width",4).attr("height",cellH-4).attr("rx",2)
@@ -103,76 +203,117 @@ function render() {
 
     g.append("text")
       .attr("x",-8).attr("y",ri*cellH+cellH/2)
-      .attr("text-anchor","end").attr("fill","#e8eaf0").attr("font-size",10).attr("font-weight","500")
+      .attr("text-anchor","end").attr("fill","#e8eaf0").attr("font-size",12).attr("font-weight","500")
       .text(d.label);
 
     g.append("text")
-      .attr("x",-8).attr("y",ri*cellH+cellH/2+11)
-      .attr("text-anchor","end").attr("fill","#8b8fa8").attr("font-size",8)
+      .attr("x",-8).attr("y",ri*cellH+cellH/2+12)
+      .attr("text-anchor","end").attr("fill","#8b8fa8").attr("font-size",10)
       .text(d.total_sr+"% SR");
   });
 
-  // Cells
+  // Helper: draw a single heatmap cell
+  function drawCell(parent, x, y, w, h, val, col, tooltipHtml) {
+    const cg = parent.append("g").attr("transform",`translate(${x},${y})`);
+    if (val === null) return;
+    const lum = d3.hsl(col).l;
+    cg.append("rect").attr("width",w-3).attr("height",h-3).attr("rx",4)
+      .attr("fill",col).style("cursor","pointer")
+      .on("mousemove",function(event){
+        tooltip.style("opacity",1).html(tooltipHtml);
+        const bx=container.getBoundingClientRect();
+        const ex=event.clientX-bx.left, ey=event.clientY-bx.top;
+        tooltip.style("left",Math.min(ex+12,W-220)+"px").style("top",Math.max(ey-70,0)+"px");
+      })
+      .on("mouseleave",()=>tooltip.style("opacity",0));
+    const fs = Math.max(10, Math.min(14, w * 0.24));
+    cg.append("text")
+      .attr("x",w/2-1.5).attr("y",h/2+4)
+      .attr("text-anchor","middle")
+      .attr("fill", lum > 0.52 ? "#1a1d27" : "#e8eaf0")
+      .attr("font-size", fs).attr("font-weight","600")
+      .text(typeof val === "string" ? val : (val >= 100 ? Math.round(val)+"s" : val.toFixed(1)+"s"));
+  }
+
+  // Subtask cells
   data.forEach((d, ri) => {
     d.times.forEach((val, ci) => {
-      const cellG = g.append("g").attr("transform",`translate(${ci*cellW},${ri*cellH})`);
       if (val === null) {
-        cellG.append("rect").attr("width",cellW-3).attr("height",cellH-3).attr("rx",4)
-          .attr("fill","#1a1d27").attr("stroke","#2a2d3a");
-        cellG.append("text").attr("x",cellW/2-1.5).attr("y",cellH/2+3)
-          .attr("text-anchor","middle").attr("fill","#3a3d4a").attr("font-size",10).text("—");
+        // skip — leave empty
       } else {
-        const col = colorScale(Math.min(val,120));
-        cellG.append("rect").attr("width",cellW-3).attr("height",cellH-3).attr("rx",4)
+        const ratio = val / subtaskMeans[ci];
+        const col = mode === "abs" ? absColor(val) : relColor(ratio);
+        const cellLabel = mode === "abs"
+          ? (val>=100 ? Math.round(val)+"s" : val.toFixed(1)+"s")
+          : ratio.toFixed(1)+"×";
+        const ttHtml = `
+          <strong>Experiment ${d.label}: ${subtasks[ci]}</strong>
+          <div class="tooltip-row"><span>Avg time</span><span>${val.toFixed(1)}s</span></div>
+          <div class="tooltip-row"><span>Subtask mean</span><span>${subtaskMeans[ci].toFixed(1)}s</span></div>
+          <div class="tooltip-row"><span>Relative</span><span>${ratio.toFixed(2)}×</span></div>
+          <div class="tooltip-row"><span>Total SR</span><span>${d.total_sr}%</span></div>
+        `;
+        const cg = g.append("g").attr("transform",`translate(${ci*cellW},${ri*cellH})`);
+        const lum = d3.hsl(col).l;
+        cg.append("rect").attr("width",cellW-3).attr("height",cellH-3).attr("rx",4)
           .attr("fill",col).style("cursor","pointer")
           .on("mousemove",function(event){
-            tooltip.style("opacity",1).html(`
-              <strong>Experiment ${d.label} — ${subtasks[ci]}</strong>
-              <div class="tooltip-row"><span>Avg time</span><span>${val.toFixed(1)}s</span></div>
-              <div class="tooltip-row"><span>Total SR</span><span>${d.total_sr}%</span></div>
-              <div class="tooltip-row"><span>Series</span><span>${d.series}</span></div>
-            `);
+            tooltip.style("opacity",1).html(ttHtml);
             const bx=container.getBoundingClientRect();
             const ex=event.clientX-bx.left, ey=event.clientY-bx.top;
-            tooltip.style("left",Math.min(ex+12,W-170)+"px").style("top",Math.max(ey-70,0)+"px");
+            tooltip.style("left",Math.min(ex+12,W-220)+"px").style("top",Math.max(ey-70,0)+"px");
           })
           .on("mouseleave",()=>tooltip.style("opacity",0));
-
-        const lum = d3.hsl(col).l;
-        cellG.append("text")
+        const fs = Math.max(10, Math.min(14, cellW * 0.24));
+        cg.append("text")
           .attr("x",cellW/2-1.5).attr("y",cellH/2+4)
           .attr("text-anchor","middle")
           .attr("fill", lum > 0.52 ? "#1a1d27" : "#e8eaf0")
-          .attr("font-size",Math.max(8,Math.min(12,cellW*0.21))).attr("font-weight","600")
-          .text(val>=100 ? Math.round(val)+"s" : val.toFixed(1)+"s");
+          .attr("font-size", fs).attr("font-weight","600")
+          .text(cellLabel);
       }
     });
   });
 
+  // Summary columns: L1 Time and Quality
+  data.forEach((d, ri) => {
+    const note = (EXPERIMENTS[d.label] || {}).note || "";
+
+    // L1 Time cell
+    const l1 = d.l1time;
+    const l1Col = l1 !== null ? absColor(l1) : null;
+    const l1Label = l1 !== null ? (l1 >= 100 ? Math.round(l1) + "s" : l1.toFixed(1) + "s") : null;
+    const l1Tt = l1 !== null ? `
+      <strong>${d.label}: L1 Completion Time</strong>
+      <div class="tooltip-row"><span>L1 time</span><span>${l1.toFixed(1)}s</span></div>
+      <div class="tooltip-row"><span>Total SR</span><span>${d.total_sr}%</span></div>
+      ${note ? `<div style="margin-top:5px;font-size:10px;color:#555;border-top:1px solid #2a2d3a;padding-top:5px">${note}</div>` : ""}
+    ` : "";
+    drawCell(g, sumX, ri * cellH, cellW, cellH, l1 !== null ? l1Label : null, l1Col, l1Tt);
+
+    // Quality cell
+    const q = d.quality;
+    const qCol = qualColor(q);
+    const qLabel = q.toFixed(1);
+    const qTt = `
+      <strong>${d.label}: Fold Quality</strong>
+      <div class="tooltip-row"><span>Quality</span><span>${q.toFixed(2)} / 5</span></div>
+      <div class="tooltip-row"><span>Total SR</span><span>${d.total_sr}%</span></div>
+      ${note ? `<div style="margin-top:5px;font-size:10px;color:#555;border-top:1px solid #2a2d3a;padding-top:5px">${note}</div>` : ""}
+    `;
+    drawCell(g, sumX + cellW, ri * cellH, cellW, cellH, qLabel, qCol, qTt);
+  });
+
   // Sorted annotation
-  g.append("text").attr("x",gridW).attr("y",-4).attr("text-anchor","end")
-    .attr("fill","#8b8fa8").attr("font-size",9)
-    .text("↓ sorted: best → worst");
+  const totalW = gridW + GAP + cellW * sumCols.length;
+  g.append("text").attr("x",totalW).attr("y",-4).attr("text-anchor","end")
+    .attr("fill","#8b8fa8").attr("font-size",11)
+    .text("↓ sorted: fastest → slowest L1 time");
 }
 
 render();
 window.addEventListener("resize", render);
 
-const EXPERIMENTS = {
-  "1.1 π0": { desc:"π0 · all data · 200k steps · MEAN_STD", note:"Base pi0 policy trained from scratch on the full dataset." },
-  "1.2 π0.5": { desc:"π0.5 · all data · 200k steps · MEAN_STD", note:"Upgraded to pi0.5 architecture, same data and steps." },
-  "1.3 Relative": { desc:"π0.5 · all data · 200k steps · Relative Actions · QUANTILES", note:"Adds Relative Actions on top of 1.2 — actions expressed relative to current state." },
-  "1.4 RABC low": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01", note:"Selective Action Reward Model with low κ (≈ mean threshold, not very selective)." },
-  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std — more selective filtering than 1.4." },
-  "1.7 Rel+RABC": { desc:"π0.5 · all data · 200k steps · Relative Actions + RABC κ=0.0215 · QUANTILES", note:"Best of Series 1. Base checkpoint for 2.5." },
-  "2.1 HQ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3", note:"Fine-tunes 1.3 on curated high-quality data only." },
-  "2.2 HQ+RABC+Rel": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + Relative Actions", note:"Adds RABC on high-quality fine-tune from 1.3." },
-  "2.3 HQ+mirror": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + Relative Actions + mirroring", note:"Augments the high-quality dataset with mirrored trajectories." },
-  "2.4 HQ chunk45": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45", note:"Explores chunked action prediction (chunk=50, RTC size=50, execution horizon=35)." },
-  "2.5 HQ+RABC+Rel★": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + Relative Actions (best)", note:"Top performer. Best overall result." },
-};
-
-
 }
 
 if (typeof d3 !== "undefined") {

app/src/content/embeds/folding/success-rates.html

@@ -13,10 +13,10 @@
     display: flex; align-items: center; justify-content: center;
     gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
   }
-  .ctrl-label { font-size: 11px; color: var(--subtext); }
+  .ctrl-label { font-size: 13px; color: var(--subtext); }
   .toggle-btn {
     background: #1a1d27; border: 1.5px solid #2a2d3a; color: #8b8fa8;
-    font-size: 12px; padding: 5px 14px; border-radius: 20px; cursor: pointer;
+    font-size: 14px; padding: 6px 16px; border-radius: 20px; cursor: pointer;
     transition: all .15s; user-select: none; font-weight: 500;
   }
   .toggle-btn:hover { border-color: #555; color: #e8eaf0; }
@@ -26,7 +26,7 @@
 
   /* ── Legend ── */
   .legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
-  .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--subtext); transition: opacity .2s; }
+  .legend-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--subtext); transition: opacity .2s; }
   .legend-item.dimmed { opacity: 0.22; }
   .legend-dot { width: 11px; height: 11px; border-radius: 2px; }
   .legend-pip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@@ -35,7 +35,7 @@
   .ci-note {
     background: rgba(255,255,255,0.03); border: 1px solid #2a2d3a;
     border-radius: 8px; padding: 9px 14px; margin-bottom: 10px;
-    font-size: 11px; color: #8b8fa8; line-height: 1.6;
+    font-size: 13px; color: #8b8fa8; line-height: 1.6;
     display: flex; align-items: flex-start; gap: 10px;
   }
   .ci-note-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
@@ -55,7 +55,7 @@
   .tooltip-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid #2a2d3a; font-size: 11px; color: #8b8fa8; line-height: 1.5; }
 
   /* ── Chart ── */
-  .axis text { fill: var(--subtext); font-size: 12px; }
+  .axis text { fill: var(--subtext); font-size: 13px; }
   .axis line, .axis path { stroke: var(--grid); }
   .grid line { stroke: var(--grid); stroke-dasharray: 3,3; }
   .bar { cursor: pointer; transition: opacity .12s; }
@@ -79,8 +79,8 @@
   <div class="legend-item" id="leg-l1">   <div class="legend-dot" style="background:#4dc98a"></div>Level 1</div>
   <div class="legend-item" id="leg-l2">   <div class="legend-dot" style="background:#f87171"></div>Level 2</div>
   <div class="legend-item">
-    <div class="legend-pip" style="background:#f7934f"></div>&nbsp;Series 2
-    &nbsp;<div class="legend-pip" style="background:#4f8ef7"></div>&nbsp;Series 1
+    <div class="legend-pip" style="background:#f7934f"></div>&nbsp;Fine-tuned (2.x)
+    &nbsp;<div class="legend-pip" style="background:#4f8ef7"></div>&nbsp;Initial (1.x)
   </div>
 </div>
 
@@ -104,9 +104,9 @@ const EXPERIMENTS = {
   "1.1 π0": { desc:"π0 · all data · 200k steps · MEAN_STD",                                                 note:"π0 base model fine-tuned on full dataset. Default normalization." },
   "1.2 π0.5": { desc:"π0.5 · all data · 200k steps · MEAN_STD",                                               note:"Upgraded to π0.5 with MEAN_STD normalization." },
   "1.3 Relative": { desc:"π0.5 · all data · 200k steps · Relative Actions · QUANTILES",                                   note:"Adds relative actions and switches to QUANTILES normalization." },
-  "1.4 RABC low": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01",                                            note:"RABC with low κ — not very selective. MEAN_STD norm, no relative actions." },
-  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215",                                          note:"RABC with higher κ (mean + ½σ). MEAN_STD norm, no relative actions." },
-  "1.7 Rel+RABC": { desc:"π0.5 · all data · 200k steps · Relative Actions + RABC κ=0.0215 · QUANTILES",                   note:"Best of Series 1. Base checkpoint for 2.5." },
+  "1.4 RABC low": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01", note:"RABC with low κ, not very selective. MEAN_STD norm, no relative actions." },
+  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"RABC with higher κ (mean + ½σ). MEAN_STD norm, no relative actions." },
+  "1.7 Rel+RABC": { desc:"π0.5 · all data · 200k steps · Relative Actions + RABC κ=0.0215 · QUANTILES",                   note:"Best of initial training. Base checkpoint for 2.5." },
   "2.1 HQ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3",                                      note:"Fine-tunes 1.3 on curated high-quality data. No RABC." },
   "2.2 HQ+RABC+Rel": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + Relative Actions",           note:"Adds RABC on high-quality fine-tune from 1.3." },
   "2.3 HQ+mirror": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + Relative Actions + mirroring",         note:"Augments HQ data with mirrored trajectories." },
@@ -248,7 +248,7 @@ function render() {
   // Axes
   g.append("g").attr("class","axis").attr("transform",`translate(0,${h})`).call(
     d3.axisBottom(x0).tickSize(0))
-    .call(gg=>{gg.select(".domain").remove();gg.selectAll("text").attr("transform","rotate(-40)").attr("text-anchor","end").attr("dx","-0.5em").attr("dy","0.3em").attr("font-size",9)});
+    .call(gg=>{gg.select(".domain").remove();gg.selectAll("text").attr("transform","rotate(-40)").attr("text-anchor","end").attr("dx","-0.5em").attr("dy","0.3em").attr("font-size",11)});
   g.append("g").attr("class","axis").call(
     d3.axisLeft(y).tickValues([0,25,50,75,100]).tickFormat(d=>d+"%").tickSize(0))
     .call(ax=>ax.select(".domain").remove())
@@ -349,7 +349,7 @@ function render() {
   const sk = active[sortKey] ? sortKey : ["total","l1","l2"].find(k => active[k]);
   const skLabel = {total:"total SR", l1:"Level 1 SR", l2:"Level 2 SR"};
   g.append("text").attr("x",w).attr("y",-12).attr("text-anchor","end")
-    .attr("fill","#8b8fa8").attr("font-size",10)
+    .attr("fill","#8b8fa8").attr("font-size",12)
     .text(`sorted: best → worst by ${skLabel[sk]}`);
 }
 

app/src/content/embeds/folding/total-score.html

@@ -8,7 +8,7 @@
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); }
 
-  .axis text { fill: var(--subtext); font-size: 11px; }
+  .axis text { fill: var(--subtext); font-size: 13px; }
   .axis line, .axis path { stroke: var(--grid); }
   .grid line { stroke: var(--grid); stroke-dasharray: 3,3; }
   .tooltip {
@@ -76,11 +76,11 @@ function render() {
   // 50% reference line
   g.append("line").attr("stroke","#fbbf24").attr("stroke-dasharray","5,3").attr("stroke-width",1.5).attr("opacity",0.6)
     .attr("x1",0).attr("x2",w).attr("y1",y(50)).attr("y2",y(50));
-  g.append("text").attr("x",w+3).attr("y",y(50)+4).attr("fill","#fbbf24").attr("font-size",9).text("50%");
+  g.append("text").attr("x",w+3).attr("y",y(50)+4).attr("fill","#fbbf24").attr("font-size",11).text("50%");
 
   g.append("g").attr("class","axis").attr("transform",`translate(0,${h})`).call(
     d3.axisBottom(x).tickSize(0))
-    .call(gg=>{gg.select(".domain").remove();gg.selectAll("text").attr("transform","rotate(-40)").attr("text-anchor","end").attr("dx","-0.5em").attr("dy","0.3em").attr("font-size",9)});
+    .call(gg=>{gg.select(".domain").remove();gg.selectAll("text").attr("transform","rotate(-40)").attr("text-anchor","end").attr("dx","-0.5em").attr("dy","0.3em").attr("font-size",11)});
   g.append("g").attr("class","axis").call(
     d3.axisLeft(y).ticks(5).tickFormat(d=>d+"%").tickSize(0))
     .call(ax=>ax.select(".domain").remove())
@@ -144,11 +144,11 @@ function render() {
     g.append("line").attr("x1",bx).attr("x2",bx).attr("y1",by-16).attr("y2",-8)
       .attr("stroke","#4dc98a").attr("stroke-width",1).attr("stroke-dasharray","2,2").attr("opacity",0.5);
     g.append("text").attr("x",bx).attr("y",-12).attr("text-anchor","middle")
-      .attr("fill","#4dc98a").attr("font-size",9).attr("font-weight","600").text("★ best");
+      .attr("fill","#4dc98a").attr("font-size",11).attr("font-weight","600").text("★ best");
   }
 
   g.append("text").attr("x",w).attr("y",-12).attr("text-anchor","end")
-    .attr("fill","#8b8fa8").attr("font-size",10)
+    .attr("fill","#8b8fa8").attr("font-size",12)
     .text("sorted: highest → lowest score %");
 }
 
@@ -158,10 +158,10 @@ window.addEventListener("resize", render);
 const EXPERIMENTS = {
   "1.1 π0": { desc:"π0 · all data · 200k steps · MEAN_STD", note:"Base pi0 policy trained from scratch on the full dataset." },
   "1.2 π0.5": { desc:"π0.5 · all data · 200k steps · MEAN_STD", note:"Upgraded to pi0.5 architecture, same data and steps." },
-  "1.3 Relative": { desc:"π0.5 · all data · 200k steps · Relative Actions · QUANTILES", note:"Adds Relative Actions on top of 1.2 — actions expressed relative to current state." },
+  "1.3 Relative": { desc:"π0.5 · all data · 200k steps · Relative Actions · QUANTILES", note:"Adds Relative Actions on top of 1.2, expressing actions relative to current state." },
   "1.4 RABC low": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01", note:"Selective Action Reward Model with low κ (≈ mean threshold, not very selective)." },
-  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std — more selective filtering than 1.4." },
-  "1.7 Rel+RABC": { desc:"π0.5 · all data · 200k steps · Relative Actions + RABC κ=0.0215 · QUANTILES", note:"Best of Series 1. Base checkpoint for 2.5." },
+  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std, more selective filtering than 1.4." },
+  "1.7 Rel+RABC": { desc:"π0.5 · all data · 200k steps · Relative Actions + RABC κ=0.0215 · QUANTILES", note:"Best of initial training. Base checkpoint for 2.5." },
   "2.1 HQ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3", note:"Fine-tunes 1.3 on curated high-quality data only." },
   "2.2 HQ+RABC+Rel": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + Relative Actions", note:"Adds RABC on high-quality fine-tune from 1.3." },
   "2.3 HQ+mirror": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + Relative Actions + mirroring", note:"Augments the high-quality dataset with mirrored trajectories." },

compute_cld.py

@@ -0,0 +1,156 @@
+"""
+Compute CLD (Compact Letter Display) letters and verify Beta posteriors
+for all experiments using the TRI STEP sequential testing framework.
+
+Parameters:
+  - global_confidence_level = 0.90 (α=0.10)
+  - n_max = 50
+  - shuffle = False (each rollout is independent)
+  - 11 experiments → C(11,2) = 55 pairwise comparisons → Bonferroni correction
+"""
+
+import json
+import numpy as np
+from scipy import stats
+from sequentialized_barnard_tests.tools.plotting import compare_success_and_get_cld
+
+EXPERIMENTS = {
+    "1.1 π0":             {"total": [8, 20],  "L1": [8, 10],  "L2": [0, 10]},
+    "1.2 π0.5":           {"total": [4, 20],  "L1": [4, 10],  "L2": [0, 10]},
+    "1.3 Relative":       {"total": [7, 20],  "L1": [7, 10],  "L2": [0, 10]},
+    "1.4 RABC low":       {"total": [3, 20],  "L1": [3, 10],  "L2": [0, 10]},
+    "1.5 RABC high":      {"total": [0, 20],  "L1": [0, 10],  "L2": [0, 10]},
+    "1.7 Rel+RABC":       {"total": [8, 20],  "L1": [8, 10],  "L2": [0, 10]},
+    "2.1 HQ":             {"total": [8, 20],  "L1": [7, 10],  "L2": [1, 10]},
+    "2.2 HQ+RABC+Rel":    {"total": [15, 20], "L1": [10, 10], "L2": [5, 10]},
+    "2.3 HQ+mirror":      {"total": [1, 20],  "L1": [0, 10],  "L2": [1, 10]},
+    "2.4 HQ chunk45":     {"total": [4, 20],  "L1": [4, 10],  "L2": [0, 10]},
+    "2.5 HQ+RABC+Rel★":   {"total": [18, 20], "L1": [10, 10], "L2": [8, 10]},
+}
+
+# What the HTML files use (percentages) — for cross-checking the round-trip
+HTML_RAW_PCT = {
+    "1.1 π0":             {"total": 40, "l1": 80,  "l2": 0},
+    "1.2 π0.5":           {"total": 20, "l1": 40,  "l2": 0},
+    "1.3 Relative":       {"total": 35, "l1": 70,  "l2": 0},
+    "1.4 RABC low":       {"total": 15, "l1": 30,  "l2": 0},
+    "1.5 RABC high":      {"total": 0,  "l1": 0,   "l2": 0},
+    "1.7 Rel+RABC":       {"total": 40, "l1": 80,  "l2": 0},
+    "2.1 HQ":             {"total": 40, "l1": 70,  "l2": 10},
+    "2.2 HQ+RABC+Rel":    {"total": 75, "l1": 100, "l2": 50},
+    "2.3 HQ+mirror":      {"total": 5,  "l1": 0,   "l2": 10},
+    "2.4 HQ chunk45":     {"total": 20, "l1": 40,  "l2": 0},
+    "2.5 HQ+RABC+Rel★":   {"total": 90, "l1": 100, "l2": 80},
+}
+
+HTML_N = {"total": 20, "l1": 10, "l2": 10}
+
+GLOBAL_CONFIDENCE = 0.90
+N_MAX = 50
+SHUFFLE = False
+
+model_names = list(EXPERIMENTS.keys())
+
+
+def draw_samples_from_beta_posterior(
+    success_array: np.ndarray,
+    rng: np.random.Generator,
+    num_samples: int = 10000,
+    alpha_prior: float = 1,
+    beta_prior: float = 1,
+) -> np.ndarray:
+    """TRI's exact function from their notebook."""
+    n_trials = len(success_array)
+    n_successes = np.sum(success_array)
+    n_failures = n_trials - n_successes
+    posterior = stats.beta(alpha_prior + n_successes, beta_prior + n_failures)
+    return posterior.rvs(num_samples, random_state=rng)
+
+
+# ── 1. CLD letters ──────────────────────────────────────────────────────────
+for level in ["total", "L1", "L2"]:
+    print(f"\n{'='*60}")
+    print(f"  CLD — LEVEL: {level}")
+    print(f"{'='*60}")
+
+    success_arrays = []
+    for name in model_names:
+        k, n = EXPERIMENTS[name][level]
+        arr = np.array([True] * k + [False] * (n - k))
+        success_arrays.append(arr)
+
+    cld_dict = compare_success_and_get_cld(
+        model_names,
+        success_arrays,
+        GLOBAL_CONFIDENCE,
+        N_MAX,
+        SHUFFLE,
+        verbose=True,
+    )
+
+    print(f"\nJSON for HTML embed:")
+    json_obj = {name: cld_dict[name] for name in model_names}
+    print(json.dumps(json_obj, ensure_ascii=False))
+
+
+# ── 2. Verify Beta posteriors ────────────────────────────────────────────────
+print(f"\n\n{'#'*70}")
+print(f"  POSTERIOR VERIFICATION")
+print(f"  Prior: Beta(1,1) (uniform). Posterior: Beta(1+k, 1+n-k)")
+print(f"{'#'*70}")
+
+level_map = {"total": "total", "L1": "l1", "L2": "l2"}
+rng = np.random.default_rng(42)
+all_ok = True
+
+for level in ["total", "L1", "L2"]:
+    html_key = level_map[level]
+    print(f"\n{'─'*60}")
+    print(f"  Level: {level}  (HTML key: '{html_key}', n={HTML_N[html_key]})")
+    print(f"{'─'*60}")
+    print(f"  {'Experiment':<24s} {'k/n':>6s}  {'α':>4s} {'β':>4s}  {'Mean':>7s}  {'90% CI':>16s}  {'HTML%→k':>8s}  {'Match':>5s}")
+
+    for name in model_names:
+        k, n = EXPERIMENTS[name][level]
+        alpha_post = 1 + k
+        beta_post = 1 + (n - k)
+        dist = stats.beta(alpha_post, beta_post)
+        mean = dist.mean()
+        ci_lo, ci_hi = dist.ppf(0.05), dist.ppf(0.95)
+
+        # Verify HTML percentage round-trip
+        html_pct = HTML_RAW_PCT[name][html_key]
+        html_n = HTML_N[html_key]
+        html_k = round(html_pct / 100 * html_n)
+        match = html_k == k
+
+        if not match:
+            all_ok = False
+
+        print(
+            f"  {name:<24s} {k:>2d}/{n:<2d}  {alpha_post:>4d} {beta_post:>4d}  "
+            f"{mean*100:>6.1f}%  [{ci_lo*100:>5.1f}% – {ci_hi*100:>5.1f}%]  "
+            f"{html_pct}%→{html_k:>2d}  {'✓' if match else '✗ MISMATCH'}"
+        )
+
+    # Also run TRI's draw_samples_from_beta_posterior for a spot-check
+    spot_name = "2.5 HQ+RABC+Rel★"
+    k_spot, n_spot = EXPERIMENTS[spot_name][level]
+    arr_spot = np.array([True] * k_spot + [False] * (n_spot - k_spot))
+    samples = draw_samples_from_beta_posterior(arr_spot, rng, num_samples=100_000)
+    print(f"\n  Spot-check ({spot_name}, {level}):")
+    print(f"    TRI samples: mean={np.mean(samples)*100:.1f}%, std={np.std(samples)*100:.1f}%")
+    alpha_s, beta_s = 1 + k_spot, 1 + (n_spot - k_spot)
+    analytic = stats.beta(alpha_s, beta_s)
+    print(f"    Analytic:     mean={analytic.mean()*100:.1f}%, std={analytic.std()*100:.1f}%")
+    print(f"    HTML params:  Beta({alpha_s}, {beta_s})")
+
+print(f"\n{'='*60}")
+if all_ok:
+    print("  ALL POSTERIORS VERIFIED ✓")
+    print("  - Beta(1+k, 1+n-k) with uniform prior Beta(1,1)")
+    print("  - HTML percentage→k round-trip: all match")
+    print("  - Matches TRI draw_samples_from_beta_posterior()")
+else:
+    print("  ✗ SOME MISMATCHES FOUND — see above")
+print(f"{'='*60}")

export_wandb_losses.py

@@ -0,0 +1,64 @@
+import wandb
+import json
+
+wandb.login()
+
+api = wandb.Api()
+project = "pepijn1999kooijmans-open-universiteit/shirt-folding"
+
+TARGET_RUNS = [
+    "ablation2-4_100k_q",
+    "ablation2-5_0",
+    "ablation2-1_100k_q",
+    "ablation2-2_100k",
+    "ablation2-3_100k_q_it",
+    "ablation1-7_2",
+    "ablation1-5_9",
+    "ablation1_3_17_q",
+    "ablation1_2_2",
+    "ablation1_1_2",
+    "ablation1-4",
+]
+
+runs = api.runs(project)
+print(f"Found {len(runs)} total runs in project\n")
+
+all_data = {}
+for run in runs:
+    if run.name not in TARGET_RUNS:
+        continue
+    print(f"Pulling: {run.name} ({run.id})...")
+    try:
+        df = run.history(samples=2000, pandas=True)
+    except Exception as e:
+        print(f"  Error: {e}")
+        continue
+
+    loss_keys = [c for c in df.columns if "loss" in c.lower()]
+    if not loss_keys:
+        print(f"  No loss keys. Available: {df.columns.tolist()}")
+        continue
+
+    lk = loss_keys[0]
+    print(f"  Using key: {lk}")
+    points = []
+    for _, row in df.iterrows():
+        v = row.get(lk)
+        if v is not None and str(v) != "nan":
+            points.append({"step": int(row["_step"]), "loss": float(v)})
+
+    all_data[run.name] = {"id": run.id, "name": run.name, "points": points}
+    print(f"  Got {len(points)} points")
+
+found = set(all_data.keys())
+missing = [r for r in TARGET_RUNS if r not in found]
+if missing:
+    print(f"\nWARNING: Could not find runs: {missing}")
+
+out = "loss_curves.json"
+with open(out, "w") as f:
+    json.dump(all_data, f, indent=2)
+
+print(f"\nDone! Saved {len(all_data)} runs to {out}")
+print(f"\nNow paste the contents of {out} into the RAW_DATA variable in:")
+print(f"  app/src/content/embeds/folding/loss-curves.html")

loss_curves.json

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