Robot folding blog post — initial deployment

.gitattributes

@@ -16,3 +16,4 @@ package-lock.json -filter -diff -merge text
 # Notion imported images should NOT be in LFS (needed for Docker build)
 app/src/content/assets/image/image_27877f1c*.png -filter -diff -merge text
 app/scripts/notion-importer/output/** -filter -diff -merge text
+app/src/content/assets/image/ogp.webp filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,5 +1,5 @@
 ---
-title: 'The Smol Training Playbook: The Secrets to Building World-Class LLMs'
+title: 'Bringing paper to life: A modern template for scientific writing'
 short_desc: 'A practical journey behind training SOTA LLMs'
 emoji: 📝
 colorFrom: blue

app/src/components/Hero.astro

@@ -1,5 +1,6 @@
 ---
 import HtmlEmbed from "./HtmlEmbed.astro";
+import announcementVideo from "../content/assets/image/Folding_V1.mp4";
 
 interface Props {
   title: string; // may contain HTML (e.g., <br/>)
@@ -98,7 +99,21 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 <section class="hero">
   <h1 class="hero-title" set:html={title} />
   <div class="hero-banner">
-    <HtmlEmbed src="banner.html" frameless />
+    <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>
+    </div>
     {description && <p class="hero-desc">{description}</p>}
   </div>
 </section>
@@ -393,6 +408,21 @@ 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) */
   .hero {
@@ -406,11 +436,37 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     line-height: 1.1;
     margin: 0 0 8px;
     max-width: 100%;
+    color: var(--text-color);
   }
   .hero-banner {
     max-width: 980px;
     margin: 0 auto;
   }
+  .hero-video-wrapper {
+    position: relative;
+    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);
+  }
   .hero-desc {
     color: var(--muted-color);
     font-style: italic;
@@ -472,6 +528,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   }
   .meta-container-cell p {
     margin: 0;
+    color: var(--text-color);
   }
   .authors {
     margin: 0;

app/src/components/HtmlEmbed.astro

@@ -214,6 +214,7 @@ const htmlWithId =
     margin: 0 0 var(--block-spacing-y);
     z-index: var(--z-elevated);
     position: relative;
+    gap: 0;
   }
 
   /* Wide mode - same styling as Wide.astro component */
@@ -278,8 +279,7 @@ const htmlWithId =
     font-size: 0.95rem;
     color: var(--text-color);
     margin: 0;
-    padding: 0;
-    padding-bottom: var(--spacing-1);
+    padding: 0 0 4px;
     position: relative;
     display: block;
     width: 100%;
@@ -301,11 +301,10 @@ const htmlWithId =
   }
   .html-embed__desc {
     text-align: left;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     color: var(--muted-color);
     margin: 0;
-    padding: 0;
-    padding-top: var(--spacing-1);
+    padding: 4px 0 0;
     position: relative;
     z-index: var(--z-elevated);
     display: block;
@@ -489,6 +488,153 @@ const htmlWithId =
       width: 100% !important;
     }
   }
+  /* ── Light-mode overrides for embedded charts ── */
+
+  /* CSS custom properties used by embeds that define :root vars */
+  [data-theme="light"] .html-embed__card {
+    --text: rgba(0,0,0,.85);
+    --subtext: #6b7280;
+    --grid: rgba(0,0,0,.10);
+    --border: #e2e4e9;
+    --card: #ffffff;
+    --bg: transparent;
+  }
+
+  /* Chrome: cards, panels, wraps */
+  [data-theme="light"] .html-embed__card .wrap,
+  [data-theme="light"] .html-embed__card .container { color: rgba(0,0,0,.85); }
+
+  [data-theme="light"] .html-embed__card .card,
+  [data-theme="light"] .html-embed__card .chart-wrap {
+    background: #fff; border-color: #e2e4e9;
+  }
+  [data-theme="light"] .html-embed__card .card-head {
+    border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .chart-title { color: #6b7280; }
+
+  /* Insight boxes (statistical-analysis) */
+  [data-theme="light"] .html-embed__card .insight {
+    background: #f7f8fa; border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .insight 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;
+  }
+  [data-theme="light"] .html-embed__card .ci-note strong { color: #374151; }
+
+  /* Legends */
+  [data-theme="light"] .html-embed__card .legend { border-color: #e2e4e9; }
+  [data-theme="light"] .html-embed__card .legend-item,
+  [data-theme="light"] .html-embed__card .li { color: #6b7280; }
+  [data-theme="light"] .html-embed__card .legend-item:hover { background: rgba(0,0,0,.04); }
+  [data-theme="light"] .html-embed__card .legend-label { color: #374151; }
+  [data-theme="light"] .html-embed__card .series-badge { color: #6b7280; }
+
+  /* Controls: buttons, toggles, sort, tabs */
+  [data-theme="light"] .html-embed__card .ctrl-btn,
+  [data-theme="light"] .html-embed__card .sort-btn {
+    background: #fff; border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .ctrl-btn:hover,
+  [data-theme="light"] .html-embed__card .ctrl-btn.active,
+  [data-theme="light"] .html-embed__card .sort-btn:hover,
+  [data-theme="light"] .html-embed__card .sort-btn.active {
+    color: rgba(0,0,0,.85); border-color: #c5c8d0; background: #f3f4f6;
+  }
+  [data-theme="light"] .html-embed__card .toggle-btn {
+    background: #fff; border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .toggle-btn: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; }
+
+  /* Tabs (failure-analysis) */
+  [data-theme="light"] .html-embed__card .tab-row { border-color: #e2e4e9; }
+  [data-theme="light"] .html-embed__card .tab { color: #6b7280; }
+  [data-theme="light"] .html-embed__card .tab:hover {
+    color: rgba(0,0,0,.85); background: #f3f4f6;
+  }
+  [data-theme="light"] .html-embed__card .tab.active {
+    color: rgba(0,0,0,.85); background: #fff;
+    border-color: #e2e4e9; border-bottom-color: #fff;
+  }
+
+  /* Tab buttons (loss-curves, pi05-architecture) */
+  [data-theme="light"] .html-embed__card .tab-btn,
+  [data-theme="light"] .html-embed__card .series-btn {
+    background: #f3f4f6; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .tab-btn.active,
+  [data-theme="light"] .html-embed__card .series-btn.active {
+    background: #fff; color: rgba(0,0,0,.85); border-bottom-color: #6366f1;
+  }
+  [data-theme="light"] .html-embed__card .tab-btn:hover:not(.active),
+  [data-theme="light"] .html-embed__card .series-btn:hover:not(.active) {
+    background: #e9ebee; color: #374151;
+  }
+
+  /* Tooltips */
+  [data-theme="light"] .html-embed__card .tooltip,
+  [data-theme="light"] .html-embed__card .tooltip-loss,
+  [data-theme="light"] .html-embed__card .tooltip-arch {
+    background: #fff; border-color: #e2e4e9; color: rgba(0,0,0,.85);
+    box-shadow: 0 4px 16px rgba(0,0,0,.10);
+  }
+  [data-theme="light"] .html-embed__card .tooltip strong,
+  [data-theme="light"] .html-embed__card .tooltip-loss strong,
+  [data-theme="light"] .html-embed__card .tooltip-arch strong { color: rgba(0,0,0,.85); }
+  [data-theme="light"] .html-embed__card .tooltip-arch .tt-detail { color: #6b7280; }
+  [data-theme="light"] .html-embed__card .tooltip-arch code {
+    background: #f3f4f6; color: #6d28d9;
+  }
+  [data-theme="light"] .html-embed__card .tooltip-note {
+    border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .tooltip-ci { color: #9ca3af; }
+  [data-theme="light"] .html-embed__card .note { color: #9ca3af; }
+
+  /* Experiment reference tables */
+  [data-theme="light"] .html-embed__card .abl-ref-toggle,
+  [data-theme="light"] .html-embed__card .exp-ref-toggle {
+    border-color: #e2e4e9; color: #6b7280;
+  }
+  [data-theme="light"] .html-embed__card .abl-ref-toggle:hover,
+  [data-theme="light"] .html-embed__card .exp-ref-toggle:hover {
+    color: rgba(0,0,0,.85); border-color: #6366f1;
+  }
+  [data-theme="light"] .html-embed__card .abl-table th,
+  [data-theme="light"] .html-embed__card .exp-table th {
+    color: #6b7280; border-color: #e2e4e9;
+  }
+  [data-theme="light"] .html-embed__card .abl-table td,
+  [data-theme="light"] .html-embed__card .exp-table td {
+    color: #374151; border-color: #f3f4f6;
+  }
+  [data-theme="light"] .html-embed__card .abl-table td:first-child,
+  [data-theme="light"] .html-embed__card .exp-table td:first-child {
+    color: rgba(0,0,0,.85);
+  }
+  [data-theme="light"] .html-embed__card .abl-table tr.s2 td,
+  [data-theme="light"] .html-embed__card .exp-table tr.s2 td { background: rgba(247,147,79,0.06); }
+  [data-theme="light"] .html-embed__card .abl-table tr.s1 td,
+  [data-theme="light"] .html-embed__card .exp-table tr.s1 td { background: rgba(79,142,247,0.05); }
+  [data-theme="light"] .html-embed__card .abl-table tr:hover td,
+  [data-theme="light"] .html-embed__card .exp-table tr:hover td { background: rgba(0,0,0,.03); }
+
+  /* SVG axes & grids */
+  [data-theme="light"] .html-embed__card .axis text { fill: #6b7280 !important; }
+  [data-theme="light"] .html-embed__card .axis path,
+  [data-theme="light"] .html-embed__card .axis line { stroke: rgba(0,0,0,.20) !important; }
+  [data-theme="light"] .html-embed__card .grid line { stroke: rgba(0,0,0,.08) !important; }
+
+  /* CLD / violin labels in statistical-analysis */
+  [data-theme="light"] .html-embed__card svg text { fill: #374151; }
+
   @media print {
     /* Avoid breaks inside embeds */
     .html-embed,

app/src/components/Image.astro

@@ -96,10 +96,10 @@ const hasCaption =
   hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
 const hasTitle = Astro.slots.has("title");
 const uid = `ri_${Math.random().toString(36).slice(2)}`;
-const dataZoomable =
-  zoomable !== false || (imgProps as any)["data-zoomable"] ? "1" : "1";
+// Use booleans instead of strings to avoid truthy "0" problem
+const dataZoomable = zoomable !== false || !!(imgProps as any)["data-zoomable"];
 const dataDownloadable =
-  downloadable !== false || (imgProps as any)["data-downloadable"] ? "1" : "1";
+  downloadable !== false || !!(imgProps as any)["data-downloadable"];
 const hasLink = typeof linkHref === "string" && linkHref.length > 0;
 const resolvedTarget = hasLink ? linkTarget || "_blank" : undefined;
 const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
@@ -109,8 +109,8 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
 ---
 
 <div
-  class={`ri-root`}
-  data-ri-root={uid}
+  class={`image-wrapper`}
+  data-image-wrapper={uid}
   data-has-title={hasTitle}
   data-has-caption={hasCaption}
 >
@@ -123,7 +123,7 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
           <span class="img-dl-wrap">
             {hasLink ? (
               <a
-                class="ri-link"
+                class="image-link"
                 href={linkHref}
                 target={resolvedTarget}
                 rel={resolvedRel}
@@ -166,7 +166,7 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
           </span>
         ) : hasLink ? (
           <a
-            class="ri-link"
+            class="image-link"
             href={linkHref}
             target={resolvedTarget}
             rel={resolvedRel}
@@ -200,7 +200,7 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
       <span class="img-dl-wrap">
         {hasLink ? (
           <a
-            class="ri-link"
+            class="image-link"
             href={linkHref}
             target={resolvedTarget}
             rel={resolvedRel}
@@ -241,7 +241,7 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
       </span>
     ) : hasLink ? (
       <a
-        class="ri-link"
+        class="image-link"
         href={linkHref}
         target={resolvedTarget}
         rel={resolvedRel}
@@ -300,7 +300,7 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
     };
 
     const initZoomIfNeeded = () => {
-      if (img.getAttribute("data-zoomable") !== "1") return;
+      if (img.getAttribute("data-zoomable") !== "true") return;
       const isDark =
         document.documentElement.getAttribute("data-theme") === "dark";
       const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
@@ -355,13 +355,13 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
     // Global zoom management to hide other Figures
     const setupGlobalZoomBehavior = () => {
       img.addEventListener("click", () => {
-        if (img.getAttribute("data-zoomable") === "1") {
-          // Enlever zoom-active de tous les autres ri-root
+        if (img.getAttribute("data-zoomable") === "true") {
+          // Remove zoom-active from all other image wrappers
           document
-            .querySelectorAll(".ri-root.zoom-active")
+            .querySelectorAll(".image-wrapper.zoom-active")
             .forEach((el) => el.classList.remove("zoom-active"));
 
-          // Add zoom-active to this ri-root
+          // Add zoom-active to this image wrapper
           root.classList.add("zoom-active");
         }
       });
@@ -427,9 +427,28 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
 </script>
 
 <style>
+  .image-wrapper {
+    display: block;
+    width: 100%;
+  }
+
+  .image-link {
+    display: block;
+    width: 100%;
+  }
+
+  .image-wrapper img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
   figure {
     margin: var(--block-spacing-y) 0;
+    display: block;
+    width: 100%;
   }
+
   figcaption {
     text-align: left;
     font-size: 0.9rem;
@@ -480,10 +499,10 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
   }
 
   /* Opt-in zoomable images */
-  img[data-zoomable] {
+  img[data-zoomable="true"] {
     cursor: zoom-in;
   }
-  .medium-zoom--opened img[data-zoomable] {
+  .medium-zoom--opened img[data-zoomable="true"] {
     cursor: zoom-out;
   }
 
@@ -495,6 +514,7 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
     position: relative;
   }
   .img-dl-wrap {
+    width: 100%;
     position: relative;
     display: inline-block;
   }
@@ -516,20 +536,20 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
   }
 
   /* When an image is zoomed, hide ALL Figures on the page */
-  :global(.medium-zoom--opened) .ri-root {
+  :global(.medium-zoom--opened) .image-wrapper {
     opacity: 0;
     z-index: calc(var(--z-base) - 1);
     transition: opacity 0.3s ease;
   }
 
   /* The currently zoomed image remains visible */
-  :global(.medium-zoom--opened) .ri-root:has(.medium-zoom--opened) {
+  :global(.medium-zoom--opened) .image-wrapper:has(.medium-zoom--opened) {
     opacity: 1;
     z-index: var(--z-overlay);
   }
 
   /* Fallback for browsers without :has() support */
-  :global(.medium-zoom--opened) .ri-root.zoom-active {
+  :global(.medium-zoom--opened) .image-wrapper.zoom-active {
     opacity: 1 !important;
     z-index: var(--z-overlay) !important;
   }
@@ -548,12 +568,12 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
   }
 
   /* Even for active zoomed image, hide button and caption for clean experience */
-  :global(.medium-zoom--opened) .ri-root.zoom-active .img-dl-btn {
+  :global(.medium-zoom--opened) .image-wrapper.zoom-active .img-dl-btn {
     opacity: 0;
     z-index: calc(var(--z-base) - 1);
   }
 
-  :global(.medium-zoom--opened) .ri-root.zoom-active figcaption {
+  :global(.medium-zoom--opened) .image-wrapper.zoom-active figcaption {
     opacity: 0;
     z-index: calc(var(--z-base) - 1);
   }
@@ -579,11 +599,11 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
   }
 
   /* Conditional margins based on title and caption presence */
-  .ri-root:not([data-has-title="true"]) {
+  .image-wrapper:not([data-has-title="true"]) {
     margin-top: 20px;
   }
 
-  .ri-root:not([data-has-caption="true"]) {
+  .image-wrapper:not([data-has-caption="true"]) {
     margin-bottom: 20px;
   }
 
@@ -595,7 +615,7 @@ const resolvedDownloadSrc = downloadSrc || originalSrc;
   }
 
   /* Dark mode: invert luminosity while preserving color harmony */
-  :global([data-theme="dark"]) .ri-root img {
+  :global([data-theme="dark"]) .image-wrapper img {
     filter: invert(0.925) hue-rotate(180deg);
   }
 

app/src/components/Reference.astro

@@ -40,11 +40,11 @@ const { id, caption } = Astro.props as Props;
         margin-bottom: 0;
     }
 
-    .reference__content :global(.ri-root) {
+    .reference__content :global(.image-wrapper) {
         margin-bottom: 0;
     }
 
-    .reference__content :global(.ri-root) :global(.reference__caption) {
+    .reference__content :global(.image-wrapper) :global(.reference__caption) {
         margin-top: 0;
     }
 

app/src/components/Video.astro

@@ -0,0 +1,123 @@
+---
+interface Props {
+  src: string;
+}
+const { src } = Astro.props;
+const id = `video-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div class="video-player" data-video-player={id}>
+  <video id={id} src={src} controls muted preload="auto" playsinline style="width:100%; border-radius: 8px; display: block;" />
+  <div class="speed-controls">
+    <span class="speed-label">Speed:</span>
+    <button class="speed-btn active" data-speed="1">1x</button>
+    <button class="speed-btn" data-speed="2">2x</button>
+    <button class="speed-btn" data-speed="4">4x</button>
+    <button class="speed-btn" data-speed="8">8x</button>
+    <button class="speed-btn" data-speed="16">16x</button>
+  </div>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-video-player]').forEach(player => {
+    const videoId = player.dataset.videoPlayer!;
+    const video = document.getElementById(videoId) as HTMLVideoElement;
+    if (!video) return;
+
+    let speed = 1;
+    let rafId: number | null = null;
+    let lastTime: number | null = null;
+    let seeking = false;
+
+    function stopSeekLoop() {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      lastTime = null;
+      seeking = false;
+    }
+
+    function startSeekLoop() {
+      stopSeekLoop();
+      if (speed <= 2) return;
+
+      seeking = true;
+      video.pause();
+      lastTime = performance.now();
+
+      function step(now: number) {
+        if (!seeking || lastTime === null) return;
+        const dt = (now - lastTime) / 1000;
+        lastTime = now;
+        video.currentTime = Math.min(video.currentTime + dt * speed, video.duration);
+        if (video.currentTime >= video.duration) {
+          stopSeekLoop();
+          return;
+        }
+        rafId = requestAnimationFrame(step);
+      }
+      rafId = requestAnimationFrame(step);
+    }
+
+    player.querySelectorAll<HTMLButtonElement>('.speed-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        speed = parseFloat(btn.dataset.speed || '1');
+        player.querySelectorAll('.speed-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        if (speed <= 2) {
+          stopSeekLoop();
+          video.playbackRate = speed;
+          if (video.paused && video.currentTime < video.duration) video.play();
+        } else {
+          video.playbackRate = 1;
+          startSeekLoop();
+        }
+      });
+    });
+
+    video.addEventListener('play', () => {
+      if (speed > 2) startSeekLoop();
+    });
+
+    video.addEventListener('pause', () => {
+      if (speed > 2 && !seeking) stopSeekLoop();
+    });
+  });
+</script>
+
+<style>
+  .video-player {
+    position: relative;
+  }
+  .speed-controls {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
+  }
+  .speed-label {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary, #888);
+    margin-right: 2px;
+  }
+  .speed-btn {
+    font-size: 0.75rem;
+    padding: 3px 10px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color, #ddd);
+    background: var(--surface-bg, #f5f5f5);
+    color: var(--text-color, #333);
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+  }
+  .speed-btn:hover {
+    border-color: var(--text-color-secondary, #888);
+  }
+  .speed-btn.active {
+    background: var(--text-color, #333);
+    color: var(--surface-bg, #fff);
+    border-color: var(--text-color, #333);
+  }
+</style>

app/src/components/trackio/TrackioWrapper.astro

@@ -192,7 +192,7 @@ import Trackio from "./Trackio.svelte";
 
     // Function to generate a new simulated metric value
     function generateSimulatedValue(step, metric) {
-      const baseProgress = Math.min(1, step / 100); // Normalise sur 100 steps
+      const baseProgress = Math.min(1, step / 100); // Normalize over 100 steps
 
       if (metric === "loss") {
         // Loss that decreases with noise
@@ -214,7 +214,7 @@ import Trackio from "./Trackio.svelte";
         clearInterval(simulationInterval);
       }
 
-      // Générer un nouveau nom de run
+      // Generate a new run name
       const adjectives = [
         "live",
         "real-time",
@@ -235,19 +235,19 @@ import Trackio from "./Trackio.svelte";
         adjectives[Math.floor(Math.random() * adjectives.length)];
       const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
       currentSimulationRun = `${randomAdj}-${randomNoun}-${Date.now().toString().slice(-4)}`;
-      currentStep = 1; // Commencer à step 1
+      currentStep = 1; // Start at step 1
 
       console.log(`Starting simulation for run: ${currentSimulationRun}`);
 
-      // Interface UI
+      // UI interface
       startSimulationBtn.style.display = "none";
       stopSimulationBtn.style.display = "inline-flex";
       startSimulationBtn.disabled = true;
 
-      // Ajouter le premier point
+      // Add the first point
       addSimulationStep();
 
-      // Continuer chaque seconde
+      // Continue every second
       simulationInterval = setInterval(() => {
         currentStep++;
         addSimulationStep();
@@ -256,7 +256,7 @@ import Trackio from "./Trackio.svelte";
         if (currentStep > 200) {
           stopSimulation();
         }
-      }, 1000); // Chaque seconde
+      }, 1000); // Every second
     }
 
     // Function to add a new data point
@@ -274,7 +274,7 @@ import Trackio from "./Trackio.svelte";
           newDataPoint,
         );
 
-        // Ajouter le point via l'instance Trackio
+        // Add the point via the Trackio instance
         if (
           typeof trackioEl.__trackioInstance.addLiveDataPoint === "function"
         ) {
@@ -310,14 +310,14 @@ import Trackio from "./Trackio.svelte";
     startSimulationBtn.addEventListener("click", startSimulation);
     stopSimulationBtn.addEventListener("click", stopSimulation);
 
-    // Arrêter la simulation si l'utilisateur quitte la page
+    // Stop the simulation if the user leaves the page
     window.addEventListener("beforeunload", stopSimulation);
 
     // Randomize data handler - now uses the store
     randomizeBtn.addEventListener("click", () => {
       console.log("Randomize button clicked - triggering jitter via store"); // Debug log
 
-      // Arrêter la simulation en cours si elle tourne
+      // Stop the current simulation if it's running
       if (simulationInterval) {
         stopSimulation();
       }
@@ -414,22 +414,6 @@ import Trackio from "./Trackio.svelte";
     color: var(--text-color);
   }
 
-  .theme-select {
-    padding: 6px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background: var(--input-bg, var(--surface-bg));
-    color: var(--text-color);
-    font-size: 14px;
-    cursor: pointer;
-    transition: border-color 0.15s ease;
-  }
-
-  .theme-select:focus {
-    outline: none;
-    border-color: var(--accent-color, #007acc);
-  }
-
   .scale-controls {
     display: flex;
     align-items: center;
@@ -483,6 +467,7 @@ import Trackio from "./Trackio.svelte";
     width: 100%;
     margin-top: 10px;
     border: 1px solid var(--border-color);
+    border-radius: 8px;
     padding: 24px 12px;
   }
 

app/src/components/trackio/components/Cell.svelte

@@ -1,19 +1,19 @@
 <script>
-  import ChartRenderer from '../renderers/ChartRendererRefactored.svelte';
-  import ChartTooltip from '../renderers/ChartTooltip.svelte';
-  import { formatAbbrev } from '../core/chart-utils.js';
-  
+  import ChartRenderer from "../renderers/ChartRendererRefactored.svelte";
+  import ChartTooltip from "../renderers/ChartTooltip.svelte";
+  import { formatAbbrev } from "../core/chart-utils.js";
+
   // Props
   export let metricKey;
   export let titleText;
   export let wide = false;
-  export let variant = 'classic';
+  export let variant = "classic";
   export let normalizeLoss = true;
   export let logScaleX = false;
   export let smoothing = false;
   export let metricData = {}; // { run -> [{step,value}] } - smoothed data
   export let rawMetricData = {}; // { run -> [{step,value}] } - original data for background when smoothing
-  export let colorForRun = (name) => '#999';
+  export let colorForRun = (name) => "#999";
   export let hostEl = null;
 
   // Navigation props
@@ -23,105 +23,131 @@
   // Component state
   let root;
   let chartRenderer; // Reference to ChartRenderer component
-  
+
   // Tooltip state
   let tooltipVisible = false;
   let tooltipX = -9999;
   let tooltipY = -9999;
-  let tooltipTitle = '';
-  let tooltipSubtitle = '';
+  let tooltipTitle = "";
+  let tooltipSubtitle = "";
   let tooltipEntries = [];
-  
+
+  // Zoom state
+  let hasZoom = false;
+
   // Handlers
   function openFullscreen() {
     if (onOpenModal) {
       onOpenModal(currentIndex);
     }
   }
-  
+
+  function resetZoom() {
+    if (chartRenderer) {
+      chartRenderer.resetZoom(true);
+    }
+  }
+
+  function handleZoomChange({ hasMoved }) {
+    hasZoom = hasMoved;
+  }
+
   function handleChartHover(data) {
-    console.log('🎯 Cell.svelte handleChartHover called with:', data);
+    console.log("🎯 Cell.svelte handleChartHover called with:", data);
     const { step, entries, position } = data;
-    
+
     if (entries.length) {
       // Use global mouse coordinates for tooltip positioning
-      const trackioEl = hostEl.closest('.trackio');
+      const trackioEl = hostEl.closest(".trackio");
       const trackioRect = trackioEl.getBoundingClientRect();
-      
+
       // Position tooltip near global cursor with small offset
-      const relativeX = (position.globalX || position.x) - trackioRect.left + 15;
+      const relativeX =
+        (position.globalX || position.x) - trackioRect.left + 15;
       const relativeY = (position.globalY || position.y) - trackioRect.top + 15;
-      
+
       tooltipVisible = true;
       tooltipX = Math.round(relativeX);
       tooltipY = Math.round(relativeY);
       tooltipTitle = `Step ${formatAbbrev(step)}`;
       tooltipSubtitle = titleText;
       tooltipEntries = entries;
-      
-      console.log('📍 Tooltip state updated:', { tooltipVisible, tooltipX, tooltipY, tooltipTitle, entriesCount: tooltipEntries.length });
-      
+
+      console.log("📍 Tooltip state updated:", {
+        tooltipVisible,
+        tooltipX,
+        tooltipY,
+        tooltipTitle,
+        entriesCount: tooltipEntries.length,
+      });
+
       // Dispatch to host for cross-cell synchronization
-      try { 
-        hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-step', { 
-          detail: { step, sourceMetric: metricKey } 
-        })); 
-      } catch(_) {}
+      try {
+        hostEl &&
+          hostEl.dispatchEvent(
+            new CustomEvent("trackio-hover-step", {
+              detail: { step, sourceMetric: metricKey },
+            }),
+          );
+      } catch (_) {}
     }
   }
-  
+
   function handleChartLeave() {
     tooltipVisible = false;
     tooltipX = -9999;
     tooltipY = -9999;
-    
+
     // Dispatch leave event
-    try { 
-      hostEl && hostEl.dispatchEvent(new CustomEvent('trackio-hover-clear', {
-        detail: { sourceMetric: metricKey }
-      })); 
-    } catch(_) {} 
+    try {
+      hostEl &&
+        hostEl.dispatchEvent(
+          new CustomEvent("trackio-hover-clear", {
+            detail: { sourceMetric: metricKey },
+          }),
+        );
+    } catch (_) {}
   }
-  
+
   // External hover synchronization
   function setupExternalHover() {
     if (!root || root.__syncAttached || !hostEl) return;
-    
-    hostEl.addEventListener('trackio-hover-step', (ev) => {
+
+    hostEl.addEventListener("trackio-hover-step", (ev) => {
       const d = ev && ev.detail;
       if (!d || !chartRenderer) return;
-      
+
       // Don't sync to self - avoid infinite loops
       if (d.sourceMetric === metricKey) return;
-      
+
       // Show hover line at the specified step
       chartRenderer.showHoverLine(d.step);
     });
-    
-    hostEl.addEventListener('trackio-hover-clear', (ev) => {
+
+    hostEl.addEventListener("trackio-hover-clear", (ev) => {
       if (!chartRenderer) return;
-      
+
       // Don't sync to self
       const d = ev && ev.detail;
       if (d && d.sourceMetric === metricKey) return;
-      
+
       // Hide hover line
       chartRenderer.hideHoverLine();
     });
-    
+
     root.__syncAttached = true;
   }
-  
+
   $: if (root && hostEl) {
     setupExternalHover();
   }
 </script>
 
-<div 
-  class="cell {wide ? 'cell--wide' : ''}" 
-  bind:this={root} 
-  data-metric={metricKey} 
-  data-title={titleText} 
+<div
+  class="cell {wide ? 'cell--wide' : ''}"
+  bind:this={root}
+  data-metric={metricKey}
+  data-title={titleText}
   data-variant={variant}
 >
   <div class="cell-bg"></div>
@@ -131,18 +157,32 @@
       <div class="cell-title">
         {titleText}
       </div>
-      <button 
-        class="cell-fullscreen-btn" 
-        type="button" 
-        on:click={openFullscreen} 
-        title="Fullscreen"
-      >
-        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-          <path d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"/>
-        </svg>
-      </button>
+      <div class="cell-header-buttons">
+        {#if hasZoom}
+          <button
+            class="cell-reset-btn"
+            type="button"
+            on:click={resetZoom}
+            title="Reset zoom"
+          >
+            Reset
+          </button>
+        {/if}
+        <button
+          class="cell-fullscreen-btn"
+          type="button"
+          on:click={openFullscreen}
+          title="Fullscreen"
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path
+              d="M4 9V4h5v2H6v3H4zm10-5h5v5h-2V6h-3V4zM6 18h3v2H4v-5h2v3zm12-3h2v5h-5v-2h3v-3z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
-    
+
     <div class="cell-body">
       <ChartRenderer
         bind:this={chartRenderer}
@@ -158,6 +198,8 @@
         {hostEl}
         width={800}
         height={150}
+        enableZoom={true}
+        onZoomChange={handleZoomChange}
         onHover={handleChartHover}
         onLeave={handleChartLeave}
       />
@@ -176,13 +218,11 @@
   parentElement={root}
 />
 
-
-
 <style>
   /* =========================
      CELL BASE STYLES
      ========================= */
-     
+
   :global(.trackio .cell) {
     border: 1px solid var(--trackio-cell-border);
     border-radius: 10px;
@@ -191,7 +231,7 @@
     flex-direction: column;
     position: relative;
   }
-  
+
   /* Default cell background - hidden */
   :global(.trackio .cell-bg) {
     position: absolute;
@@ -201,7 +241,7 @@
     border-radius: 4px;
     display: none;
   }
-  
+
   /* Default cell corners - hidden */
   :global(.trackio .cell-corners) {
     position: absolute;
@@ -211,7 +251,7 @@
     display: none;
     opacity: 0.85;
   }
-  
+
   :global(.trackio .cell-inner) {
     position: relative;
     z-index: 2;
@@ -219,28 +259,47 @@
     display: flex;
     flex-direction: column;
   }
-  
+
   /* Oblivion theme: adjust inner padding to account for corners and gap */
   :global(.trackio.theme--oblivion .cell-inner) {
-    padding: var(--trackio-oblivion-hud-corner-size, 8px) 12px 10px var(--trackio-oblivion-hud-gap, 10px);
+    padding: var(--trackio-oblivion-hud-corner-size, 8px) 12px 10px
+      var(--trackio-oblivion-hud-gap, 10px);
   }
-  
+
   /* Oblivion theme: show background and corners with proper styling */
   :global(.trackio.theme--oblivion .cell-bg) {
     display: block !important;
-    background: 
-      radial-gradient(1200px 200px at 20% -10%, rgba(0,0,0,.05), transparent 80%),
-      radial-gradient(900px 200px at 80% 110%, rgba(0,0,0,.05), transparent 80%);
+    background: radial-gradient(
+        1200px 200px at 20% -10%,
+        rgba(0, 0, 0, 0.05),
+        transparent 80%
+      ),
+      radial-gradient(
+        900px 200px at 80% 110%,
+        rgba(0, 0, 0, 0.05),
+        transparent 80%
+      );
   }
-  
+
   /* Dark mode: richer gradient for Oblivion */
   :global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-bg) {
-    background:
-      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, #ffffff 6.5%, transparent), transparent 80%),
-      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, #ffffff 6%, transparent), transparent 80%),
-      linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%);
+    background: radial-gradient(
+        1400px 260px at 20% -10%,
+        color-mix(in srgb, #ffffff 6.5%, transparent),
+        transparent 80%
+      ),
+      radial-gradient(
+        1100px 240px at 80% 110%,
+        color-mix(in srgb, #ffffff 6%, transparent),
+        transparent 80%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #ffffff 3.5%, transparent),
+        transparent 45%
+      );
   }
-  
+
   :global(.trackio.theme--oblivion .cell-corners) {
     display: block !important;
     inset: 6px;
@@ -256,7 +315,7 @@
     opacity: 1;
     z-index: 3;
   }
-  
+
   /* Dark mode: bright corners for Oblivion */
   :global([data-theme="dark"]) :global(.trackio.theme--oblivion .cell-corners) {
     background:
@@ -269,47 +328,48 @@
       linear-gradient(#ffffff, #ffffff) bottom right / 8px 1px no-repeat,
       linear-gradient(#ffffff, #ffffff) bottom right / 1px 8px no-repeat;
   }
-  
+
   :global(.trackio .cell-header) {
-    padding: 0 0px 10px 10px; 
+    padding: 0 0px 10px 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
   }
-  
+
   /* Oblivion theme: adjust header padding */
   :global(.trackio.theme--oblivion .cell-header) {
     padding: 5px 0px 18px 12px;
   }
-  
+
   :global(.trackio .cell-title) {
     font-size: 13px;
     font-weight: 700;
     color: var(--trackio-text-primary);
     font-family: var(--trackio-font-family);
   }
-  
+
   :global(.trackio .cell-body) {
     position: relative;
     width: 100%;
     overflow: hidden;
   }
-  
+
   /* Oblivion theme overrides */
   :global(.trackio.theme--oblivion .cell) {
     border: none !important;
     background: transparent !important;
   }
-  
+
   :global(.trackio.theme--classic .cell) {
     border: 1px solid var(--trackio-cell-border) !important;
     background: var(--trackio-cell-background) !important;
     border-radius: 10px !important;
   }
-  
+
   :global(.trackio.theme--oblivion .cell-title) {
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
     letter-spacing: 0.12em !important;
     text-transform: uppercase !important;
     font-weight: 800 !important;
@@ -317,7 +377,7 @@
     position: relative;
     padding-left: 14px;
   }
-  
+
   /* Oblivion theme: add indicator dot before title */
   :global(.trackio.theme--oblivion .cell-title)::before {
     content: "";
@@ -334,13 +394,12 @@
     opacity: 0.6;
   }
 
-
   /* Ghost hover effect */
   :global(.trackio.hovering .ghost) {
     opacity: 0.2;
     transition: opacity 0.15s ease;
   }
-  
+
   /* Specific ghost effect for raw lines when smoothing is active */
   :global(.trackio.hovering path.raw-line.ghost) {
     opacity: 0.1;
@@ -351,6 +410,13 @@
     grid-column: 1 / -1;
   }
 
+  /* Header buttons container */
+  .cell-header-buttons {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
   /* Fullscreen button */
   .cell-fullscreen-btn {
     display: inline-flex;
@@ -366,14 +432,38 @@
     border-radius: 6px;
     transition: opacity 0.15s ease;
   }
-  
+
   .cell-fullscreen-btn:hover {
     opacity: 1;
   }
-  
+
   .cell-fullscreen-btn svg {
     width: 18px;
     height: 18px;
     fill: var(--trackio-chart-axis-text);
   }
+
+  /* Reset zoom button */
+  .cell-reset-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    padding: 0 8px;
+    border: 1px solid var(--trackio-chart-axis-stroke);
+    background: transparent;
+    color: var(--trackio-chart-axis-text);
+    font-size: 11px;
+    font-weight: 500;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    font-family: var(--trackio-font-family);
+  }
+
+  .cell-reset-btn:hover {
+    opacity: 1;
+    background: var(--trackio-chart-grid-stroke);
+  }
 </style>

app/src/components/trackio/components/FullscreenModal.svelte

@@ -1,136 +1,136 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import ChartRenderer from '../renderers/ChartRendererRefactored.svelte';
-  import ChartTooltip from '../renderers/ChartTooltip.svelte';
-  import Legend from './Legend.svelte';
-  import { formatAbbrev } from '../core/chart-utils.js';
-  
+  import { createEventDispatcher } from "svelte";
+  import ChartRenderer from "../renderers/ChartRendererRefactored.svelte";
+  import ChartTooltip from "../renderers/ChartTooltip.svelte";
+  import Legend from "./Legend.svelte";
+  import { formatAbbrev } from "../core/chart-utils.js";
+
   // Props
   export let visible = false;
-  export let title = '';
+  export let title = "";
   export let metricData = {};
   export let rawMetricData = {};
-  export let colorForRun = (name) => '#999';
-  export let variant = 'classic';
+  export let colorForRun = (name) => "#999";
+  export let variant = "classic";
   export let logScaleX = false;
   export let smoothing = false;
   export let normalizeLoss = true;
-  export let metricKey = '';
-  export let titleText = '';
-  
+  export let metricKey = "";
+  export let titleText = "";
+
   // Navigation props
   export let currentIndex = 0;
   export let totalCharts = 1;
   export let onNavigate = null;
-  
+
   const dispatch = createEventDispatcher();
-  
+
   let modalElement;
-  
+
   // Tooltip state (same as Cell.svelte)
   let tooltipVisible = false;
   let tooltipX = -9999;
   let tooltipY = -9999;
-  let tooltipTitle = '';
-  let tooltipSubtitle = '';
+  let tooltipTitle = "";
+  let tooltipSubtitle = "";
   let tooltipEntries = [];
-  
+
   // Modal management
   $: if (visible && modalElement) {
     document.body.appendChild(modalElement);
-    
+
     // Copy CSS variables from the trackio parent to ensure theme inheritance
-    const trackioParent = document.querySelector('.trackio');
+    const trackioParent = document.querySelector(".trackio");
     if (trackioParent) {
       const computedStyle = getComputedStyle(trackioParent);
       const cssVars = [
-        '--trackio-chart-axis-stroke',
-        '--trackio-chart-axis-text', 
-        '--trackio-chart-grid-stroke',
-        '--trackio-chart-grid-opacity',
-        '--trackio-chart-grid-type',
-        '--trackio-font-family',
-        '--trackio-tooltip-background',
-        '--trackio-tooltip-border',
-        '--trackio-tooltip-shadow',
-        '--trackio-text-primary',
-        '--trackio-text-secondary'
+        "--trackio-chart-axis-stroke",
+        "--trackio-chart-axis-text",
+        "--trackio-chart-grid-stroke",
+        "--trackio-chart-grid-opacity",
+        "--trackio-chart-grid-type",
+        "--trackio-font-family",
+        "--trackio-tooltip-background",
+        "--trackio-tooltip-border",
+        "--trackio-tooltip-shadow",
+        "--trackio-text-primary",
+        "--trackio-text-secondary",
       ];
-      
-      cssVars.forEach(varName => {
+
+      cssVars.forEach((varName) => {
         const value = computedStyle.getPropertyValue(varName);
         if (value) {
           modalElement.style.setProperty(varName, value);
         }
       });
     }
-    
+
     requestAnimationFrame(() => {
-      modalElement.classList.add('show');
+      modalElement.classList.add("show");
     });
   }
-  
+
   function closeModal() {
     if (modalElement) {
-      modalElement.classList.remove('show');
+      modalElement.classList.remove("show");
       setTimeout(() => {
         if (modalElement && modalElement.parentNode) {
           modalElement.parentNode.removeChild(modalElement);
         }
-        dispatch('close');
+        dispatch("close");
       }, 300);
     }
   }
-  
+
   function handleKeydown(e) {
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       closeModal();
-    } else if (e.key === 'ArrowLeft') {
+    } else if (e.key === "ArrowLeft") {
       navigatePrevious();
-    } else if (e.key === 'ArrowRight') {
+    } else if (e.key === "ArrowRight") {
       navigateNext();
     }
   }
-  
+
   function navigatePrevious() {
     if (onNavigate && totalCharts > 1) {
       const newIndex = currentIndex === 0 ? totalCharts - 1 : currentIndex - 1;
       onNavigate(newIndex);
     }
   }
-  
+
   function navigateNext() {
     if (onNavigate && totalCharts > 1) {
       const newIndex = currentIndex === totalCharts - 1 ? 0 : currentIndex + 1;
       onNavigate(newIndex);
     }
   }
-  
+
   function handleOverlayClick(e) {
     if (e.target === e.currentTarget) {
       closeModal();
     }
   }
-  
+
   // Prepare legend data
   $: runs = Object.keys(metricData);
-  $: legendData = runs.map(run => ({
+  $: legendData = runs.map((run) => ({
     name: run,
-    color: colorForRun(run)
+    color: colorForRun(run),
   }));
-  
+
   // Tooltip handling (same logic as Cell.svelte)
   function handleChartHover(data) {
     const { step, entries, position } = data;
-    
+
     if (entries.length) {
       // Use global mouse coordinates for tooltip positioning
       const modalRect = modalElement.getBoundingClientRect();
-      
+
       // Position tooltip near global cursor with small offset
       const relativeX = (position.globalX || position.x) - modalRect.left + 15;
       const relativeY = (position.globalY || position.y) - modalRect.top + 15;
-      
+
       tooltipVisible = true;
       tooltipX = Math.round(relativeX);
       tooltipY = Math.round(relativeY);
@@ -139,53 +139,61 @@
       tooltipEntries = entries;
     }
   }
-  
+
   function handleChartLeave() {
     tooltipVisible = false;
     tooltipX = -9999;
     tooltipY = -9999;
   }
-  
+
   // Ghost legend functionality
   function handleLegendHover(idx) {
     legendData.forEach((otherItem, otherIdx) => {
       if (otherIdx !== idx) {
-        const legendItems = modalElement?.querySelectorAll('.item');
+        const legendItems = modalElement?.querySelectorAll(".item");
         if (legendItems && legendItems[otherIdx]) {
-          legendItems[otherIdx].classList.add('ghost');
+          legendItems[otherIdx].classList.add("ghost");
         }
-        
-        const chartElements = modalElement?.querySelectorAll(`[data-run="${otherItem.name}"]`);
-        chartElements?.forEach(el => el.classList.add('ghost'));
+
+        const chartElements = modalElement?.querySelectorAll(
+          `[data-run="${otherItem.name}"]`,
+        );
+        chartElements?.forEach((el) => el.classList.add("ghost"));
       }
     });
-    
+
     // Add hovering class to trigger the ghost styles
-    const modalChart = modalElement?.querySelector('.trackio-modal-chart-content');
-    modalChart?.classList.add('hovering');
+    const modalChart = modalElement?.querySelector(
+      ".trackio-modal-chart-content",
+    );
+    modalChart?.classList.add("hovering");
   }
-  
+
   function handleLegendLeave() {
-    const legendItems = modalElement?.querySelectorAll('.item');
-    legendItems?.forEach(item => item.classList.remove('ghost'));
-    
-    const chartElements = modalElement?.querySelectorAll('[data-run]');
-    chartElements?.forEach(el => el.classList.remove('ghost'));
-    
+    const legendItems = modalElement?.querySelectorAll(".item");
+    legendItems?.forEach((item) => item.classList.remove("ghost"));
+
+    const chartElements = modalElement?.querySelectorAll("[data-run]");
+    chartElements?.forEach((el) => el.classList.remove("ghost"));
+
     // Remove hovering class
-    const modalChart = modalElement?.querySelector('.trackio-modal-chart-content');
-    modalChart?.classList.remove('hovering');
+    const modalChart = modalElement?.querySelector(
+      ".trackio-modal-chart-content",
+    );
+    modalChart?.classList.remove("hovering");
   }
 </script>
 
 <!-- Modal overlay -->
 {#if visible}
-  <div 
+  <div
     bind:this={modalElement}
-    class="trackio-modal-overlay trackio {variant === 'oblivion' ? 'theme--oblivion' : 'theme--classic'}"
+    class="trackio-modal-overlay trackio {variant === 'oblivion'
+      ? 'theme--oblivion'
+      : 'theme--classic'}"
     on:click={handleOverlayClick}
     on:keydown={handleKeydown}
-    role="dialog" 
+    role="dialog"
     aria-modal="true"
     tabindex="-1"
   >
@@ -195,43 +203,43 @@
         <div class="trackio-modal-header-left">
           <h3>{title}</h3>
         </div>
-        
+
         <div class="trackio-modal-header-right">
           <!-- Navigation controls grouped with counter -->
           <div class="trackio-modal-nav-counter-group">
             {#if totalCharts > 1}
-              <button 
+              <button
                 class="trackio-modal-nav-inline trackio-modal-nav-inline-left"
                 on:click={navigatePrevious}
                 title="Previous chart (←)"
                 aria-label="Previous chart"
               >
                 <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                  <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                 </svg>
               </button>
             {/if}
-            
+
             <div class="trackio-modal-counter">
               {currentIndex + 1}/{totalCharts}
             </div>
-            
+
             {#if totalCharts > 1}
-              <button 
+              <button
                 class="trackio-modal-nav-inline trackio-modal-nav-inline-right"
                 on:click={navigateNext}
                 title="Next chart (→)"
                 aria-label="Next chart"
               >
                 <svg viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                 </svg>
               </button>
             {/if}
           </div>
-          
-          <button 
-            class="trackio-modal-close" 
+
+          <button
+            class="trackio-modal-close"
             on:click={closeModal}
             title="Close"
             aria-label="Close modal"
@@ -240,7 +248,7 @@
           </button>
         </div>
       </div>
-      
+
       <!-- Content -->
       <div class="trackio-modal-content">
         <!-- Legend -->
@@ -249,14 +257,21 @@
             <Legend
               items={legendData}
               alignment="left"
-              on:legend-hover={(e) => handleLegendHover(legendData.findIndex(item => item.name === e.detail.name))}
+              on:legend-hover={(e) =>
+                handleLegendHover(
+                  legendData.findIndex((item) => item.name === e.detail.name),
+                )}
               on:legend-leave={handleLegendLeave}
             />
           </div>
         {/if}
-        
+
         <!-- Chart -->
-        <div class="trackio-modal-chart-content trackio {variant === 'oblivion' ? 'theme--oblivion' : 'theme--classic'}">
+        <div
+          class="trackio-modal-chart-content trackio {variant === 'oblivion'
+            ? 'theme--oblivion'
+            : 'theme--classic'}"
+        >
           <ChartRenderer
             {metricData}
             {rawMetricData}
@@ -275,7 +290,7 @@
         </div>
       </div>
     </div>
-    
+
     <!-- Tooltip (same as Cell.svelte but with higher z-index) -->
     <ChartTooltip
       visible={tooltipVisible}
@@ -304,32 +319,33 @@
     pointer-events: none;
     transition: opacity 0.3s ease;
   }
-  
+
   /* Light mode overlay */
   :global([data-theme="light"]) :global(.trackio-modal-overlay) {
     background: rgba(255, 255, 255, 0.85);
   }
-  
+
   /* Dark mode overlay */
   :global([data-theme="dark"]) :global(.trackio-modal-overlay) {
     background: rgba(0, 0, 0, 0.8);
   }
-  
+
   /* Oblivion theme overlay - light mode */
-  :global([data-theme="light"]) :global(.trackio-modal-overlay.theme--oblivion) {
+  :global([data-theme="light"])
+    :global(.trackio-modal-overlay.theme--oblivion) {
     background: rgba(240, 245, 255, 0.9);
   }
-  
+
   /* Oblivion theme overlay - dark mode */
   :global([data-theme="dark"]) :global(.trackio-modal-overlay.theme--oblivion) {
     background: rgba(15, 20, 30, 0.85);
   }
-  
+
   :global(.trackio-modal-overlay.show) {
     opacity: 1;
     pointer-events: auto;
   }
-  
+
   :global(.trackio-modal) {
     position: relative;
     width: min(95vw, 1200px);
@@ -337,12 +353,13 @@
 
     background: var(--surface-bg);
     border-radius: 12px;
+    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
     overflow: hidden;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     display: flex;
     flex-direction: column;
   }
-  
+
   :global(.trackio-modal-header) {
     display: flex;
     justify-content: space-between;
@@ -350,38 +367,38 @@
     padding: 16px 20px 0px 20px;
     background: var(--surface-bg, white);
   }
-  
+
   :global(.trackio-modal-header-left) {
     display: flex;
     align-items: center;
     flex: 1;
   }
-  
+
   :global(.trackio-modal-header-right) {
     display: flex;
     align-items: center;
     gap: 12px;
   }
-  
+
   :global(.trackio-modal-nav-counter-group) {
     display: flex;
     align-items: center;
     gap: 4px;
   }
-  
+
   :global(.trackio-modal-counter) {
     font-size: 10px;
     color: var(--muted-color);
     font-family: var(--trackio-font-family);
     font-weight: 500;
-    background: none!important;
-    border: none!important;
+    background: none !important;
+    border: none !important;
     opacity: 0.6;
     padding: 2px 6px;
     border-radius: 4px;
     line-height: 1;
   }
-  
+
   :global(.trackio-modal-header h3) {
     margin: 0;
     font-size: 16px;
@@ -389,7 +406,7 @@
     color: var(--text-color, rgba(0, 0, 0, 0.9));
     flex: 1;
   }
-  
+
   :global(.trackio-modal-close) {
     width: 32px;
     height: 32px;
@@ -404,11 +421,11 @@
     font-size: 20px;
     transition: background-color 0.15s ease;
   }
-  
+
   :global(.trackio-modal-close:hover) {
     background: var(--border-color, rgba(0, 0, 0, 0.1));
   }
-  
+
   /* Inline navigation arrows in header */
   :global(.trackio-modal-nav-inline) {
     width: 24px;
@@ -425,23 +442,23 @@
     transition: all 0.15s ease;
     flex-shrink: 0;
   }
-  
+
   :global(.trackio-modal-nav-inline:hover) {
     background: var(--border-color, rgba(0, 0, 0, 0.1));
     color: var(--text-color, rgba(0, 0, 0, 0.9));
     transform: scale(1.1);
   }
-  
+
   :global(.trackio-modal-nav-inline:active) {
     transform: scale(0.9);
   }
-  
+
   :global(.trackio-modal-nav-inline svg) {
     width: 14px;
     height: 14px;
     fill: currentColor;
   }
-  
+
   :global(.trackio-modal-content) {
     flex: 1;
     padding: 20px;
@@ -450,39 +467,39 @@
     flex-direction: column;
     gap: 16px;
   }
-  
+
   :global(.trackio-modal-legend) {
     display: flex;
     justify-content: flex-start;
     align-items: center;
   }
-  
+
   :global(.trackio-modal-chart-content) {
     flex: 1;
     position: relative;
     min-height: 0;
   }
-  
+
   /* Ghost hover effect */
   :global(.trackio-modal .ghost) {
     opacity: 0.2;
     transition: opacity 0.15s ease;
   }
-  
+
   /* Specific ghost effect for raw lines when smoothing is active */
   :global(.trackio-modal.hovering path.raw-line.ghost) {
     opacity: 0.1;
   }
-  
+
   /* =========================
      OBLIVION THEME STYLES
      ========================= */
-  
+
   /* Oblivion modal overlay */
   :global(.trackio-modal-overlay.theme--oblivion) {
     background: rgba(15, 17, 21, 0.9);
   }
-  
+
   /* Oblivion modal box - styled like a cell with corners */
   :global(.theme--oblivion .trackio-modal) {
     position: relative;
@@ -492,7 +509,7 @@
     backdrop-filter: blur(8px);
     backdrop-filter: saturate(1.1) blur(15px);
   }
-  
+
   /* Modal background layer (like cell-bg) */
   :global(.theme--oblivion .trackio-modal)::before {
     content: "";
@@ -500,21 +517,36 @@
     pointer-events: none;
     z-index: 1;
     border-radius: 4px;
-    background: 
-      radial-gradient(1200px 200px at 20% -10%, rgba(0,0,0,.05), transparent 80%),
-      radial-gradient(900px 200px at 80% 110%, rgba(0,0,0,.05), transparent 80%);
+    background: radial-gradient(
+        1200px 200px at 20% -10%,
+        rgba(0, 0, 0, 0.05),
+        transparent 80%
+      ),
+      radial-gradient(
+        900px 200px at 80% 110%,
+        rgba(0, 0, 0, 0.05),
+        transparent 80%
+      );
     backdrop-filter: blur(10px);
   }
-  
+
   /* Dark mode oblivion modal */
-  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal)::before {
-    background:
-      radial-gradient(1400px 260px at 20% -10%, color-mix(in srgb, #ffffff 6.5%, transparent), transparent 80%),
-      radial-gradient(1100px 240px at 80% 110%, color-mix(in srgb, #ffffff 6%, transparent), transparent 80%);
-      /* linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%); */
-      backdrop-filter: blur(10px);
-    }
-  
+  :global([data-theme="dark"])
+    :global(.theme--oblivion .trackio-modal)::before {
+    background: radial-gradient(
+        1400px 260px at 20% -10%,
+        color-mix(in srgb, #ffffff 6.5%, transparent),
+        transparent 80%
+      ),
+      radial-gradient(
+        1100px 240px at 80% 110%,
+        color-mix(in srgb, #ffffff 6%, transparent),
+        transparent 80%
+      );
+    /* linear-gradient(180deg, color-mix(in srgb, #ffffff 3.5%, transparent), transparent 45%); */
+    backdrop-filter: blur(10px);
+  }
+
   /* Dark mode: bright corners */
   :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal)::after {
     background:
@@ -527,49 +559,52 @@
       linear-gradient(#ffffff, #ffffff) bottom right / 8px 1px no-repeat,
       linear-gradient(#ffffff, #ffffff) bottom right / 1px 8px no-repeat;
   }
-  
+
   /* Modal content above pseudo-elements */
   :global(.theme--oblivion .trackio-modal-header),
   :global(.theme--oblivion .trackio-modal-content) {
     position: relative;
     z-index: 5;
   }
-  
+
   /* Oblivion modal header */
   :global(.theme--oblivion .trackio-modal-header) {
     background: transparent;
   }
-  
+
   :global(.theme--oblivion .trackio-modal-header h3) {
     color: var(--trackio-oblivion-primary, #2a2a2a);
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
     font-weight: 800;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     font-size: 14px;
   }
-  
+
   :global(.theme--oblivion .trackio-modal-counter) {
     background: var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
     color: var(--trackio-oblivion-primary, #2a2a2a);
     border: 1px solid var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
     font-weight: 600;
     letter-spacing: 0.08em;
   }
-  
+
   :global(.theme--oblivion .trackio-modal-close) {
     color: var(--trackio-oblivion-primary, #2a2a2a);
     background: transparent;
     border: 1px solid transparent;
-    font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace !important;
+    font-family: "Roboto Mono", "Roboto Mono Fallback", ui-monospace,
+      SFMono-Regular, Menlo, monospace !important;
   }
-  
+
   :global(.theme--oblivion .trackio-modal-close:hover) {
     background: var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
     border: 1px solid var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
   }
-  
+
   /* Oblivion inline navigation arrows */
   :global(.theme--oblivion .trackio-modal-nav-inline) {
     background: transparent;
@@ -577,41 +612,46 @@
     color: var(--trackio-oblivion-primary, #2a2a2a);
     border-radius: 4px;
   }
-  
+
   :global(.theme--oblivion .trackio-modal-nav-inline:hover) {
     background: var(--trackio-oblivion-dim, rgba(42, 42, 42, 0.3));
     transform: scale(1.1);
   }
-  
+
   /* Dark mode overrides for modal content */
-  
-  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-header h3) {
+
+  :global([data-theme="dark"])
+    :global(.theme--oblivion .trackio-modal-header h3) {
     color: #ffffff;
   }
-  
-  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-counter) {
+
+  :global([data-theme="dark"])
+    :global(.theme--oblivion .trackio-modal-counter) {
     background: color-mix(in srgb, #ffffff 25%, transparent);
     color: #ffffff;
     border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
   }
-  
+
   :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-close) {
     color: #ffffff;
   }
-  
-  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-close:hover) {
+
+  :global([data-theme="dark"])
+    :global(.theme--oblivion .trackio-modal-close:hover) {
     background: color-mix(in srgb, #ffffff 25%, transparent);
     border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
   }
-  
+
   /* Dark mode inline navigation arrows */
-  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-nav-inline) {
+  :global([data-theme="dark"])
+    :global(.theme--oblivion .trackio-modal-nav-inline) {
     background: transparent;
     border: none;
     color: #ffffff;
   }
-  
-  :global([data-theme="dark"]) :global(.theme--oblivion .trackio-modal-nav-inline:hover) {
+
+  :global([data-theme="dark"])
+    :global(.theme--oblivion .trackio-modal-nav-inline:hover) {
     background: color-mix(in srgb, #ffffff 25%, transparent);
     transform: scale(1.1);
   }

app/src/components/trackio/core/adaptive-sampler.js

@@ -32,10 +32,10 @@ export class AdaptiveSampler {
     }
 
     const actualStrategy = strategy || this.options.adaptiveStrategy;
-    
+
     if (!this.needsSampling(data.length)) {
-      return { 
-        data: data.slice(), 
+      return {
+        data: data.slice(),
         sampledIndices: data.map((_, i) => i),
         compressionRatio: 1,
         strategy: 'none'
@@ -88,29 +88,29 @@ export class AdaptiveSampler {
   }
 
   /**
-   * Smart sampling - préserve les features importantes
-   * Inspiré de l'algorithme de Douglas-Peucker adapté pour les time series
+   * Smart sampling - preserves important features
+   * Inspired by Douglas-Peucker algorithm adapted for time series
    */
   smartSampling(data) {
     const targetPoints = this.options.targetPoints;
     const features = this.detectFeatures(data);
-    
-    // Étape 1: Points critiques (début, fin, features importantes)
+
+    // Step 1: Critical points (start, end, important features)
     const criticalPoints = new Set([0, data.length - 1]);
-    
-    // Ajouter les features détectés
+
+    // Add detected features
     features.peaks.forEach(idx => criticalPoints.add(idx));
     features.valleys.forEach(idx => criticalPoints.add(idx));
     features.inflectionPoints.forEach(idx => criticalPoints.add(idx));
 
-    // Étape 2: Répartition logarithmique pour préserver la densité
+    // Step 2: Logarithmic distribution to preserve density
     const remaining = targetPoints - criticalPoints.size;
     if (remaining > 0) {
       const logSamples = this.generateLogSpacing(data.length, remaining);
       logSamples.forEach(idx => criticalPoints.add(idx));
     }
 
-    // Étape 3: Densité adaptive dans les zones de changement
+    // Step 3: Adaptive density in zones of change
     if (criticalPoints.size < targetPoints) {
       const variationSamples = this.sampleByVariation(data, targetPoints - criticalPoints.size);
       variationSamples.forEach(idx => criticalPoints.add(idx));
@@ -129,30 +129,30 @@ export class AdaptiveSampler {
   }
 
   /**
-   * Level-of-Detail sampling - adaptatif selon le zoom/contexte
+   * Level-of-Detail sampling - adaptive based on zoom/context
    */
   lodSampling(data, viewportStart = 0, viewportEnd = 1, zoomLevel = 1) {
     const viewStart = Math.floor(viewportStart * data.length);
     const viewEnd = Math.ceil(viewportEnd * data.length);
     const viewData = data.slice(viewStart, viewEnd);
-    
-    // Plus de détails dans la zone visible
+
+    // More detail in the visible area
     const visibleTargetPoints = Math.floor(this.options.targetPoints * 0.7);
     const contextTargetPoints = this.options.targetPoints - visibleTargetPoints;
-    
-    // Sampling dense dans la zone visible
+
+    // Dense sampling in the visible area
     const visibleSample = this.smartSampling(viewData);
-    
-    // Sampling sparse dans le contexte
+
+    // Sparse sampling in the context
     const beforeContext = data.slice(0, viewStart);
     const afterContext = data.slice(viewEnd);
-    
-    const beforeSample = beforeContext.length > 0 ? 
+
+    const beforeSample = beforeContext.length > 0 ?
       this.uniformSampling(beforeContext) : { data: [], sampledIndices: [] };
-    const afterSample = afterContext.length > 0 ? 
+    const afterSample = afterContext.length > 0 ?
       this.uniformSampling(afterContext) : { data: [], sampledIndices: [] };
 
-    // Combiner les résultats
+    // Combine results
     const combinedData = [
       ...beforeSample.data,
       ...visibleSample.data,
@@ -174,7 +174,7 @@ export class AdaptiveSampler {
   }
 
   /**
-   * Détection des features importantes dans la série
+   * Detect important features in the series
    */
   detectFeatures(data) {
     const peaks = [];
@@ -186,10 +186,10 @@ export class AdaptiveSampler {
       const current = data[i].value;
       const prev = data[i - 1].value;
       const next = data[i + 1].value;
-      
-      // Détection des pics locaux
+
+      // Detect local peaks
       if (current > prev && current > next) {
-        // Vérifier si c'est un pic significatif
+        // Check if it's a significant peak
         const localMax = Math.max(
           ...data.slice(i - window, i + window + 1).map(d => d.value)
         );
@@ -197,8 +197,8 @@ export class AdaptiveSampler {
           peaks.push(i);
         }
       }
-      
-      // Détection des vallées locales
+
+      // Detect local valleys
       if (current < prev && current < next) {
         const localMin = Math.min(
           ...data.slice(i - window, i + window + 1).map(d => d.value)
@@ -207,12 +207,12 @@ export class AdaptiveSampler {
           valleys.push(i);
         }
       }
-      
-      // Détection des points d'inflection (changement de courbure)
+
+      // Detect inflection points (curvature change)
       if (i >= 2 && i < data.length - 2) {
         const trend1 = data[i].value - data[i - 2].value;
         const trend2 = data[i + 2].value - data[i].value;
-        
+
         if (Math.sign(trend1) !== Math.sign(trend2) && Math.abs(trend1) > 0.01 && Math.abs(trend2) > 0.01) {
           inflectionPoints.push(i);
         }
@@ -223,13 +223,13 @@ export class AdaptiveSampler {
   }
 
   /**
-   * Génère des indices avec espacement logarithmique
+   * Generate indices with logarithmic spacing
    */
   generateLogSpacing(totalLength, count) {
     const indices = [];
     for (let i = 1; i <= count; i++) {
       const progress = i / (count + 1);
-      // Fonction logarithmique pour plus de densité au début
+      // Logarithmic function for more density at the beginning
       const logProgress = Math.log(1 + progress * (Math.E - 1)) / Math.log(Math.E);
       const index = Math.floor(logProgress * (totalLength - 1));
       indices.push(Math.max(1, Math.min(totalLength - 2, index)));
@@ -242,28 +242,28 @@ export class AdaptiveSampler {
    */
   sampleByVariation(data, targetPoints) {
     const variations = [];
-    
-    // Calculer la variation locale pour chaque point
+
+    // Calculate local variation for each point
     for (let i = 1; i < data.length - 1; i++) {
       const prev = data[i - 1].value;
       const curr = data[i].value;
       const next = data[i + 1].value;
-      
-      // Variation = différence avec la moyenne des voisins
+
+      // Variation = difference from the average of neighbors
       const avgNeighbors = (prev + next) / 2;
       const variation = Math.abs(curr - avgNeighbors);
-      
+
       variations.push({ index: i, variation });
     }
-    
-    // Trier par variation décroissante et prendre les plus importantes
+
+    // Sort by decreasing variation and take the most important ones
     variations.sort((a, b) => b.variation - a.variation);
-    
+
     return variations.slice(0, targetPoints).map(v => v.index);
   }
 
   /**
-   * Applique le sampling sur un objet de données complètes (multi-run)
+   * Apply sampling on a complete data object (multi-run)
    */
   sampleMetricData(metricData, strategy = null) {
     const sampledData = {};
@@ -272,7 +272,7 @@ export class AdaptiveSampler {
     Object.keys(metricData).forEach(runName => {
       const runData = metricData[runName] || [];
       const result = this.sampleSeries(runData, strategy);
-      
+
       sampledData[runName] = result.data;
       samplingInfo[runName] = {
         originalLength: runData.length,
@@ -287,20 +287,20 @@ export class AdaptiveSampler {
   }
 
   /**
-   * Reconstruit les données complètes pour une zone spécifique (pour le zoom)
+   * Rebuild full data for a specific range (for zoom)
    */
   getFullDataForRange(originalData, samplingInfo, startStep, endStep) {
     // This method would allow recovering more details
-    // quand l'utilisateur zoom sur une zone spécifique
+    // when the user zooms on a specific area
     const startIdx = originalData.findIndex(d => d.step >= startStep);
     const endIdx = originalData.findIndex(d => d.step > endStep);
-    
+
     return originalData.slice(startIdx, endIdx === -1 ? undefined : endIdx);
   }
 }
 
 /**
- * Instance globale configurée pour TrackIO
+ * Global instance configured for TrackIO
  */
 export const trackioSampler = new AdaptiveSampler({
   maxPoints: 400,
@@ -310,7 +310,7 @@ export const trackioSampler = new AdaptiveSampler({
 });
 
 /**
- * Fonction utilitaire pour usage direct
+ * Utility function for direct usage
  */
 export function sampleLargeDataset(metricData, options = {}) {
   const sampler = new AdaptiveSampler(options);

app/src/components/trackio/core/data-generator.js

@@ -11,12 +11,12 @@ export const Random = {
   // Basic random generators
   between: (min, max) => min + Math.random() * (max - min),
   intBetween: (min, max) => Math.floor(Random.between(min, max + 1)),
-  
+
   // ML-specific generators
   learningRate: () => Random.between(0.02, 0.08),
-  noiseAmplitude: (baseValue, reduction = 0.8) => (factor) => 
+  noiseAmplitude: (baseValue, reduction = 0.8) => (factor) =>
     (Random.between(-1, 1) * baseValue * (1 - reduction * factor)),
-  
+
   // Training quality simulation
   trainingQuality: () => {
     const quality = Math.random();
@@ -27,7 +27,7 @@ export const Random = {
       score: quality
     };
   },
-  
+
   // Learning phases (plateau, improvements, etc.)
   learningPhases: (maxSteps) => {
     const phases = Random.intBetween(1, 3);
@@ -41,32 +41,32 @@ export const Random = {
   // Training steps count with realistic ML training ranges (with large dataset support)
   trainingSteps: () => {
     const rand = Math.random();
-    
-    // Distribution basée sur des patterns d'entraînement ML réels
-    // Inclut maintenant des datasets plus larges pour tester le sampling
+
+    // Distribution based on real ML training patterns
+    // Now includes larger datasets to test sampling
     if (rand < 0.05) {
-      // 5% - Très court : Tests rapides, prototypage
+      // 5% - Very short: Quick tests, prototyping
       return Random.intBetween(5, 50);
     } else if (rand < 0.15) {
-      // 10% - Court : Expérimentations rapides
+      // 10% - Short: Quick experiments
       return Random.intBetween(50, 200);
     } else if (rand < 0.35) {
-      // 20% - Moyen-court : Entraînements standards
+      // 20% - Medium-short: Standard training
       return Random.intBetween(200, 400);
     } else if (rand < 0.55) {
-      // 20% - Moyen : La plupart des entraînements
+      // 20% - Medium: Most training runs
       return Random.intBetween(400, 800);
     } else if (rand < 0.75) {
-      // 20% - Long : Entraînements approfondis (déclenche le sampling)
+      // 20% - Long: In-depth training (triggers sampling)
       return Random.intBetween(800, 1500);
     } else if (rand < 0.90) {
-      // 15% - Très long : Large-scale training
+      // 15% - Very long: Large-scale training
       return Random.intBetween(1500, 3000);
     } else if (rand < 0.98) {
-      // 8% - Extrêmement long : Research-scale
+      // 8% - Extremely long: Research-scale
       return Random.intBetween(3000, 5000);
     } else {
-      // 2% - Massive : LLMs, très gros datasets (pour tester les limites)
+      // 2% - Massive: LLMs, very large datasets (to test limits)
       return Random.intBetween(5000, 10000);
     }
   },
@@ -85,7 +85,7 @@ export const Random = {
       case 'llm':
         return Random.intBetween(2000, 5000);
       case 'massive':
-        // Nouveau scénario pour tester le sampling avec de très gros datasets
+        // New scenario to test sampling with very large datasets
         return Random.intBetween(5000, 15000);
       default:
         return Random.trainingSteps();
@@ -105,7 +105,7 @@ export const TrainingConfig = {
     SPIKE_AMPLITUDE: 0.15,
     DECAY_ACCELERATION: 1.6
   },
-  
+
   ACCURACY: {
     INITIAL_MIN: 0.1,
     INITIAL_MAX: 0.45,
@@ -115,7 +115,7 @@ export const TrainingConfig = {
     NOISE_AMPLITUDE: 0.04,
     PHASE_ACCELERATION: 1.4
   },
-  
+
   OVERFITTING: {
     START_RATIO_GOOD: 0.85,
     START_RATIO_POOR: 0.7,
@@ -123,7 +123,7 @@ export const TrainingConfig = {
     ACCURACY_DEGRADATION: 0.03,
     LOSS_INCREASE: 0.12
   },
-  
+
   VALIDATION_GAP: {
     ACCURACY_MIN: 0.02,
     ACCURACY_MAX: 0.06,
@@ -140,18 +140,18 @@ export const Performance = {
   // Smart sampling for large datasets to maintain performance
   smartSample: (totalSteps, maxPoints = 2000) => {
     if (totalSteps <= maxPoints) {
-      return Array.from({length: totalSteps}, (_, i) => i + 1);
+      return Array.from({ length: totalSteps }, (_, i) => i + 1);
     }
-    
+
     // For large datasets, sample intelligently:
     // - Always include start and end
     // - Keep more density at the beginning (where learning happens faster)
     // - Sample logarithmically for the middle section
     // - Always include some regular intervals
-    
+
     const samples = new Set([1, totalSteps]); // Always include first and last
     const targetSamples = Math.min(maxPoints, totalSteps);
-    
+
     // Add logarithmic sampling (more points early, fewer later)
     const logSamples = Math.floor(targetSamples * 0.6);
     for (let i = 0; i < logSamples; i++) {
@@ -160,7 +160,7 @@ export const Performance = {
       const step = Math.floor(1 + logProgress * (totalSteps - 1));
       samples.add(step);
     }
-    
+
     // Add regular intervals for the remaining points
     const remainingSamples = targetSamples - samples.size;
     const interval = Math.floor(totalSteps / remainingSamples);
@@ -168,7 +168,7 @@ export const Performance = {
       samples.add(i);
       if (samples.size >= targetSamples) break;
     }
-    
+
     return Array.from(samples).sort((a, b) => a - b);
   }
 };
@@ -209,35 +209,35 @@ function calculateTargetAccuracy(quality) {
 function generateLossCurve(steps, initialLoss, targetLoss, learningPhases, quality) {
   let learningRate = Random.learningRate();
   const loss = new Array(steps);
-  
+
   for (let phaseIndex = 0; phaseIndex < learningPhases.length - 1; phaseIndex++) {
     const phaseStart = learningPhases[phaseIndex];
     const phaseEnd = learningPhases[phaseIndex + 1] || phaseStart + 1;
-    
+
     for (let step = phaseStart; step <= phaseEnd; step++) {
       const phaseProgress = (step - phaseStart) / Math.max(1, phaseEnd - phaseStart);
       const phaseTarget = targetLoss * Math.pow(0.85, phaseIndex);
-      
+
       // Exponential decay with phase blending
       let value = initialLoss * Math.exp(-learningRate * (step + 1));
       value = 0.6 * value + 0.4 * (initialLoss + (phaseTarget - initialLoss) * (phaseIndex + phaseProgress) / Math.max(1, learningPhases.length - 1));
-      
+
       // Add realistic noise that decreases over time
       const noiseGen = Random.noiseAmplitude(TrainingConfig.LOSS.NOISE_FACTOR * initialLoss);
       value += noiseGen(step / (steps - 1));
-      
+
       // Occasional loss spikes (common in training)
       if (Math.random() < TrainingConfig.LOSS.SPIKE_PROBABILITY) {
         value += TrainingConfig.LOSS.SPIKE_AMPLITUDE * initialLoss;
       }
-      
+
       loss[step] = Math.max(0, value);
     }
-    
+
     // Learning rate changes between phases
     learningRate *= TrainingConfig.LOSS.DECAY_ACCELERATION;
   }
-  
+
   return loss;
 }
 
@@ -248,23 +248,23 @@ function generateAccuracyCurve(steps, targetAccuracy, learningPhases, quality) {
   const initialAccuracy = Random.between(TrainingConfig.ACCURACY.INITIAL_MIN, TrainingConfig.ACCURACY.INITIAL_MAX);
   let learningRate = Random.learningRate();
   const accuracy = new Array(steps);
-  
+
   for (let step = 0; step < steps; step++) {
     // Asymptotic growth towards target accuracy
     let value = targetAccuracy - (targetAccuracy - initialAccuracy) * Math.exp(-learningRate * (step + 1));
-    
+
     // Add realistic noise that decreases over time
     const noiseGen = Random.noiseAmplitude(TrainingConfig.ACCURACY.NOISE_AMPLITUDE);
     value += noiseGen(step / (steps - 1));
-    
+
     accuracy[step] = Math.max(0, Math.min(1, value));
-    
+
     // Accelerate learning at phase boundaries
     if (learningPhases.includes(step)) {
       learningRate *= TrainingConfig.ACCURACY.PHASE_ACCELERATION;
     }
   }
-  
+
   return accuracy;
 }
 
@@ -274,58 +274,58 @@ function generateAccuracyCurve(steps, targetAccuracy, learningPhases, quality) {
 function applyOverfitting(trainCurve, steps, quality) {
   const validationCurve = new Array(steps);
   const gapConfig = TrainingConfig.VALIDATION_GAP;
-  
+
   // Calculate when overfitting starts
   const overfittingStart = Math.floor(
-    (quality.isGood ? TrainingConfig.OVERFITTING.START_RATIO_GOOD : TrainingConfig.OVERFITTING.START_RATIO_POOR) 
+    (quality.isGood ? TrainingConfig.OVERFITTING.START_RATIO_GOOD : TrainingConfig.OVERFITTING.START_RATIO_POOR)
     * (steps - 1) + Random.between(-TrainingConfig.OVERFITTING.RANDOMNESS, TrainingConfig.OVERFITTING.RANDOMNESS) * steps
   );
-  
+
   const clampedStart = Math.max(Math.floor(0.5 * (steps - 1)), Math.min(Math.floor(0.95 * (steps - 1)), overfittingStart));
-  
+
   for (let step = 0; step < steps; step++) {
     const isAccuracy = trainCurve[step] <= 1; // Simple heuristic
-    const baseGap = isAccuracy 
+    const baseGap = isAccuracy
       ? Random.between(gapConfig.ACCURACY_MIN, gapConfig.ACCURACY_MAX)
       : Random.between(gapConfig.LOSS_MIN, gapConfig.LOSS_MAX);
-    
-    let validationValue = isAccuracy 
-      ? trainCurve[step] - baseGap + Random.between(-gapConfig.FLUCTUATION/2, gapConfig.FLUCTUATION/2)
+
+    let validationValue = isAccuracy
+      ? trainCurve[step] - baseGap + Random.between(-gapConfig.FLUCTUATION / 2, gapConfig.FLUCTUATION / 2)
       : trainCurve[step] * (1 + baseGap) + Random.between(-0.1, 0.1);
-    
+
     // Apply overfitting effects after the overfitting point
     if (step >= clampedStart && !quality.isPoor) {
       const overfittingProgress = (step - clampedStart) / Math.max(1, steps - 1 - clampedStart);
-      
+
       if (isAccuracy) {
         validationValue -= TrainingConfig.OVERFITTING.ACCURACY_DEGRADATION * overfittingProgress;
       } else {
         validationValue += TrainingConfig.OVERFITTING.LOSS_INCREASE * overfittingProgress * trainCurve[step];
       }
     }
-    
-    validationCurve[step] = isAccuracy 
+
+    validationCurve[step] = isAccuracy
       ? Math.max(0, Math.min(1, validationValue))
       : Math.max(0, validationValue);
   }
-  
+
   return validationCurve;
 }
 
 export function generateRunNames(count, stepsHint = null) {
   const adjectives = [
-    'ancient', 'brave', 'calm', 'clever', 'crimson', 'daring', 'eager', 'fearless', 
-    'gentle', 'glossy', 'golden', 'hidden', 'icy', 'jolly', 'lively', 'mighty', 
+    'ancient', 'brave', 'calm', 'clever', 'crimson', 'daring', 'eager', 'fearless',
+    'gentle', 'glossy', 'golden', 'hidden', 'icy', 'jolly', 'lively', 'mighty',
     'noble', 'proud', 'quick', 'silent', 'swift', 'tiny', 'vivid', 'wild'
   ];
-  
+
   const nouns = [
-    'river', 'mountain', 'harbor', 'forest', 'valley', 'ocean', 'meadow', 'desert', 
-    'island', 'canyon', 'harbor', 'trail', 'summit', 'delta', 'lagoon', 'ridge', 
+    'river', 'mountain', 'harbor', 'forest', 'valley', 'ocean', 'meadow', 'desert',
+    'island', 'canyon', 'harbor', 'trail', 'summit', 'delta', 'lagoon', 'ridge',
     'tundra', 'reef', 'plateau', 'prairie', 'grove', 'bay', 'dune', 'cliff'
   ];
-  
-  // Ajouter des préfixes selon la longueur de l'entraînement
+
+  // Add prefixes based on training length
   const getPrefix = (steps) => {
     if (!steps) return '';
     if (steps < 100) return 'rapid-';
@@ -334,18 +334,18 @@ export function generateRunNames(count, stepsHint = null) {
     if (steps < 50000) return 'ultra-';
     return 'mega-';
   };
-  
+
   const used = new Set();
   const names = [];
   const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
-  
+
   while (names.length < count) {
     const prefix = getPrefix(stepsHint);
     const adjective = pick(adjectives);
     const noun = pick(nouns);
     const suffix = Math.floor(1 + Math.random() * 99);
     const name = `${prefix}${adjective}-${noun}-${suffix}`;
-    
+
     if (!used.has(name)) {
       used.add(name);
       names.push(name);
@@ -378,23 +378,23 @@ export function generateMassiveTestDataset(steps = null, runs = 3) {
   const actualSteps = steps || Random.trainingStepsForScenario('massive');
   const runNames = generateRunNames(runs, actualSteps);
   const dataByMetric = new Map();
-  
+
   console.log(`🧪 Generating massive test dataset: ${actualSteps} steps × ${runs} runs = ${actualSteps * runs} total points`);
-  
+
   const TARGET_METRICS = ['epoch', 'train_accuracy', 'train_loss', 'val_accuracy', 'val_loss'];
-  
+
   // Initialize data structure
   TARGET_METRICS.forEach((metric) => {
     const map = {};
     runNames.forEach((r) => { map[r] = []; });
     dataByMetric.set(metric, map);
   });
-  
+
   // Generate curves for each run
   runNames.forEach((run, runIndex) => {
     console.log(`🔄 Generating curves for run ${runIndex + 1}/${runs}: ${run}`);
     const curves = genCurves(actualSteps);
-    
+
     for (let stepIndex = 0; stepIndex < actualSteps; stepIndex++) {
       const step = stepIndex + 1;
       dataByMetric.get('epoch')[run].push({ step, value: step });
@@ -404,9 +404,9 @@ export function generateMassiveTestDataset(steps = null, runs = 3) {
       dataByMetric.get('val_loss')[run].push({ step, value: curves.lossVal[stepIndex] });
     }
   });
-  
+
   console.log(`✅ Massive dataset generated successfully`);
-  
+
   return {
     dataByMetric,
     runNames,
@@ -426,47 +426,47 @@ export function genCurves(totalSteps, maxPoints = 2000) {
   // 1. Smart sampling for performance - get the actual steps we'll compute
   const sampledSteps = Performance.smartSample(totalSteps, maxPoints);
   const actualPointsCount = sampledSteps.length;
-  
+
   // 2. Determine overall training quality and characteristics
   const quality = Random.trainingQuality();
-  
+
   // 3. Generate target metrics based on quality
   const initialLoss = Random.between(TrainingConfig.LOSS.INITIAL_MIN, TrainingConfig.LOSS.INITIAL_MAX);
   const targetLoss = calculateTargetLoss(initialLoss, quality);
   const targetAccuracy = calculateTargetAccuracy(quality);
-  
+
   // 4. Generate learning phases (plateaus, rapid improvements, etc.)
   const learningPhases = Random.learningPhases(totalSteps);
-  
+
   // 5. Generate realistic training curves (using sampled steps for computation)
   const trainLoss = generateLossCurveOptimized(sampledSteps, totalSteps, initialLoss, targetLoss, learningPhases, quality);
   const trainAccuracy = generateAccuracyCurveOptimized(sampledSteps, totalSteps, targetAccuracy, learningPhases, quality);
-  
+
   // 6. Apply overfitting to create validation curves
   const validationLoss = applyOverfittingOptimized(trainLoss, sampledSteps, totalSteps, quality);
   const validationAccuracy = applyOverfittingOptimized(trainAccuracy, sampledSteps, totalSteps, quality);
-  
+
   // Convert back to simple arrays for backward compatibility
   // Create arrays indexed by step position for the original step sequence
   const stepToIndex = new Map();
   sampledSteps.forEach((step, index) => {
     stepToIndex.set(step, index);
   });
-  
+
   // Create full arrays with interpolation for missing steps
   const createCompatibleArray = (sampledData) => {
     const result = new Array(totalSteps);
     let lastValue = sampledData[0]?.value || 0;
-    
+
     // Ensure initial value is valid
     if (!Number.isFinite(lastValue)) {
       lastValue = 0;
     }
-    
+
     for (let i = 0; i < totalSteps; i++) {
       const step = i + 1;
       const sampledIndex = stepToIndex.get(step);
-      
+
       if (sampledIndex !== undefined) {
         // We have data for this step
         const newValue = sampledData[sampledIndex].value;
@@ -477,7 +477,7 @@ export function genCurves(totalSteps, maxPoints = 2000) {
         result[i] = lastValue;
       }
     }
-    
+
     return result;
   };
 
@@ -485,11 +485,11 @@ export function genCurves(totalSteps, maxPoints = 2000) {
     // Training curves (what the model sees during training) - compatible format
     accTrain: createCompatibleArray(trainAccuracy),
     lossTrain: createCompatibleArray(trainLoss),
-    
+
     // Validation curves (held-out data, shows generalization) - compatible format
     accVal: createCompatibleArray(validationAccuracy),
     lossVal: createCompatibleArray(validationLoss),
-    
+
     // Metadata for debugging
     _meta: {
       totalSteps,
@@ -498,7 +498,7 @@ export function genCurves(totalSteps, maxPoints = 2000) {
       quality: quality.score
     }
   };
-  
+
   // Debug: Check for NaN values
   const hasNaN = (arr, name) => {
     const nanCount = arr.filter(v => !Number.isFinite(v)).length;
@@ -506,14 +506,14 @@ export function genCurves(totalSteps, maxPoints = 2000) {
       console.warn(`⚠️ Found ${nanCount} NaN values in ${name}`);
     }
   };
-  
+
   if (totalSteps > 1000) { // Only debug large datasets
     hasNaN(result.accTrain, 'accTrain');
     hasNaN(result.lossTrain, 'lossTrain');
     hasNaN(result.accVal, 'accVal');
     hasNaN(result.lossVal, 'lossVal');
   }
-  
+
   return result;
 }
 
@@ -527,7 +527,7 @@ export function genCurves(totalSteps, maxPoints = 2000) {
 function generateLossCurveOptimized(sampledSteps, totalSteps, initialLoss, targetLoss, learningPhases, quality) {
   let learningRate = Random.learningRate();
   const loss = [];
-  
+
   // Create a mapping function from sampled steps to values
   sampledSteps.forEach((step, index) => {
     // Find which learning phase this step belongs to
@@ -538,30 +538,30 @@ function generateLossCurveOptimized(sampledSteps, totalSteps, initialLoss, targe
         break;
       }
     }
-    
+
     const phaseStart = learningPhases[phaseIndex];
     const phaseEnd = learningPhases[phaseIndex + 1] || totalSteps;
     const phaseProgress = (step - phaseStart) / Math.max(1, phaseEnd - phaseStart);
     const phaseTarget = targetLoss * Math.pow(0.85, phaseIndex);
-    
+
     // Exponential decay with phase blending
     let value = initialLoss * Math.exp(-learningRate * (step / totalSteps) * 100);
     value = 0.6 * value + 0.4 * (initialLoss + (phaseTarget - initialLoss) * (phaseIndex + phaseProgress) / Math.max(1, learningPhases.length - 1));
-    
+
     // Add realistic noise that decreases over time
     const noiseGen = Random.noiseAmplitude(TrainingConfig.LOSS.NOISE_FACTOR * initialLoss);
     value += noiseGen(step / totalSteps);
-    
+
     // Occasional loss spikes (common in training)
     if (Math.random() < TrainingConfig.LOSS.SPIKE_PROBABILITY) {
       value += TrainingConfig.LOSS.SPIKE_AMPLITUDE * initialLoss;
     }
-    
+
     // Ensure no NaN values
     const finalValue = Math.max(0, Number.isFinite(value) ? value : initialLoss * 0.1);
     loss.push({ step, value: finalValue });
   });
-  
+
   return loss;
 }
 
@@ -572,25 +572,25 @@ function generateAccuracyCurveOptimized(sampledSteps, totalSteps, targetAccuracy
   const initialAccuracy = Random.between(TrainingConfig.ACCURACY.INITIAL_MIN, TrainingConfig.ACCURACY.INITIAL_MAX);
   let learningRate = Random.learningRate();
   const accuracy = [];
-  
+
   sampledSteps.forEach((step, index) => {
     // Asymptotic growth towards target accuracy
     let value = targetAccuracy - (targetAccuracy - initialAccuracy) * Math.exp(-learningRate * (step / totalSteps) * 100);
-    
+
     // Add realistic noise that decreases over time
     const noiseGen = Random.noiseAmplitude(TrainingConfig.ACCURACY.NOISE_AMPLITUDE);
     value += noiseGen(step / totalSteps);
-    
+
     // Ensure no NaN values
     const finalValue = Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0.1;
     accuracy.push({ step, value: finalValue });
-    
+
     // Accelerate learning at phase boundaries
     if (learningPhases.includes(step)) {
       learningRate *= TrainingConfig.ACCURACY.PHASE_ACCELERATION;
     }
   });
-  
+
   return accuracy;
 }
 
@@ -600,47 +600,47 @@ function generateAccuracyCurveOptimized(sampledSteps, totalSteps, targetAccuracy
 function applyOverfittingOptimized(trainCurve, sampledSteps, totalSteps, quality) {
   const validationCurve = [];
   const gapConfig = TrainingConfig.VALIDATION_GAP;
-  
+
   // Calculate when overfitting starts
   const overfittingStart = Math.floor(
-    (quality.isGood ? TrainingConfig.OVERFITTING.START_RATIO_GOOD : TrainingConfig.OVERFITTING.START_RATIO_POOR) 
+    (quality.isGood ? TrainingConfig.OVERFITTING.START_RATIO_GOOD : TrainingConfig.OVERFITTING.START_RATIO_POOR)
     * totalSteps + Random.between(-TrainingConfig.OVERFITTING.RANDOMNESS, TrainingConfig.OVERFITTING.RANDOMNESS) * totalSteps
   );
-  
+
   const clampedStart = Math.max(Math.floor(0.5 * totalSteps), Math.min(Math.floor(0.95 * totalSteps), overfittingStart));
-  
+
   trainCurve.forEach((trainPoint, index) => {
     const step = trainPoint.step;
     const isAccuracy = trainPoint.value <= 1; // Simple heuristic
-    const baseGap = isAccuracy 
+    const baseGap = isAccuracy
       ? Random.between(gapConfig.ACCURACY_MIN, gapConfig.ACCURACY_MAX)
       : Random.between(gapConfig.LOSS_MIN, gapConfig.LOSS_MAX);
-    
-    let validationValue = isAccuracy 
-      ? trainPoint.value - baseGap + Random.between(-gapConfig.FLUCTUATION/2, gapConfig.FLUCTUATION/2)
+
+    let validationValue = isAccuracy
+      ? trainPoint.value - baseGap + Random.between(-gapConfig.FLUCTUATION / 2, gapConfig.FLUCTUATION / 2)
       : trainPoint.value * (1 + baseGap) + Random.between(-0.1, 0.1);
-    
+
     // Apply overfitting effects after the overfitting point
     if (step >= clampedStart && !quality.isPoor) {
       const overfittingProgress = (step - clampedStart) / Math.max(1, totalSteps - clampedStart);
-      
+
       if (isAccuracy) {
         validationValue -= TrainingConfig.OVERFITTING.ACCURACY_DEGRADATION * overfittingProgress;
       } else {
         validationValue += TrainingConfig.OVERFITTING.LOSS_INCREASE * overfittingProgress * trainPoint.value;
       }
     }
-    
+
     // Ensure no NaN values in validation curves
-    const finalValue = Number.isFinite(validationValue) 
+    const finalValue = Number.isFinite(validationValue)
       ? (isAccuracy ? Math.max(0, Math.min(1, validationValue)) : Math.max(0, validationValue))
       : (isAccuracy ? 0.1 : trainPoint.value);
-      
+
     validationCurve.push({
       step,
       value: finalValue
     });
   });
-  
+
   return validationCurve;
 }

app/src/components/trackio/renderers/ChartRendererRefactored.svelte

@@ -1,45 +1,50 @@
 <script>
-  import { onMount, onDestroy } from 'svelte';
-  import { SVGManager } from './core/svg-manager.js';
-  import { GridRenderer } from './core/grid-renderer.js';
-  import { PathRenderer } from './core/path-renderer.js';
-  import { InteractionManager } from './core/interaction-manager.js';
-  import { ChartTransforms } from './utils/chart-transforms.js';
-  import { trackioSampler } from '../core/adaptive-sampler.js';
-  
+  import { onMount, onDestroy } from "svelte";
+  import * as d3 from "d3";
+  import { SVGManager } from "./core/svg-manager.js";
+  import { GridRenderer } from "./core/grid-renderer.js";
+  import { PathRenderer } from "./core/path-renderer.js";
+  import { InteractionManager } from "./core/interaction-manager.js";
+  import { ZoomManager } from "./core/zoom-manager.js";
+  import { ChartTransforms } from "./utils/chart-transforms.js";
+  import { trackioSampler } from "../core/adaptive-sampler.js";
+
   // Props - same as original ChartRenderer
   export let metricData = {};
   export let rawMetricData = {};
-  export let colorForRun = (name) => '#999';
-  export let variant = 'classic';
+  export let colorForRun = (name) => "#999";
+  export let variant = "classic";
   export let logScaleX = false;
   export let smoothing = false;
   export let normalizeLoss = true;
-  export let metricKey = '';
-  export let titleText = '';
+  export let metricKey = "";
+  export let titleText = "";
   export let hostEl = null;
   export let width = 800;
   export let height = 150;
   export let margin = { top: 10, right: 12, bottom: 46, left: 44 };
   export let onHover = null;
   export let onLeave = null;
-  
+  export let enableZoom = true; // NEW: Enable zoom/pan
+  export let onZoomChange = null; // NEW: Callback when zoom state changes
+
   // Internal state
   let container;
   let svgManager;
   let gridRenderer;
   let pathRenderer;
   let interactionManager;
+  let zoomManager; // NEW
   let cleanup;
-  
+
   // Sampling state
   let sampledData = {};
   let samplingInfo = {};
   let needsSampling = false;
-  
+
   // Computed values
   $: innerHeight = height - margin.top - margin.bottom;
-  
+
   // Reactive rendering when data or props change
   $: {
     if (container && svgManager) {
@@ -53,45 +58,86 @@
       render();
     }
   }
-  
+
   /**
    * Initialize all managers and renderers
    */
   function initializeManagers() {
     if (!container) return;
-    
+
     // Create SVG manager with configuration
     svgManager = new SVGManager(container, { width, height, margin });
     svgManager.ensureSvg();
     svgManager.initializeScales(logScaleX);
-    
+
     // Create specialized renderers
     gridRenderer = new GridRenderer(svgManager);
     pathRenderer = new PathRenderer(svgManager);
     interactionManager = new InteractionManager(svgManager, pathRenderer);
-    
-    console.log('📊 Chart managers initialized');
+
+    // Create zoom manager
+    if (enableZoom) {
+      zoomManager = new ZoomManager(svgManager, {
+        zoomExtent: [1.0, 8.0],
+        enableX: true,
+        enableY: true,
+      });
+
+      zoomManager.initialize();
+
+      // Share zoom overlay with interaction manager
+      interactionManager.setExternalOverlay(zoomManager.getOverlay());
+
+      // Setup zoom callback
+      zoomManager.on("zoom", ({ xScale, yScale, hasMoved }) => {
+        renderWithZoomedScales(xScale, yScale);
+
+        if (onZoomChange) {
+          onZoomChange({ hasMoved, state: zoomManager.getState() });
+        }
+      });
+
+      // Hide tooltips during zoom start
+      zoomManager.on("zoomStart", () => {
+        if (interactionManager) {
+          interactionManager.hideHoverLine();
+        }
+        if (onLeave) {
+          onLeave();
+        }
+      });
+
+      console.log("🔍 ZoomManager initialized");
+    }
+
+    console.log("📊 Chart managers initialized");
   }
-  
+
   /**
    * Apply adaptive sampling to large datasets
    */
   function applySampling() {
     // Check if any run has more than 400 points
-    const runSizes = Object.keys(metricData).map(run => (metricData[run] || []).length);
+    const runSizes = Object.keys(metricData).map(
+      (run) => (metricData[run] || []).length,
+    );
     const maxSize = Math.max(0, ...runSizes);
     needsSampling = maxSize > 400;
-    
+
     if (needsSampling) {
-      console.log(`🎯 Large dataset detected (${maxSize} points), applying adaptive sampling`);
-      const result = trackioSampler.sampleMetricData(metricData, 'smart');
+      console.log(
+        `🎯 Large dataset detected (${maxSize} points), applying adaptive sampling`,
+      );
+      const result = trackioSampler.sampleMetricData(metricData, "smart");
       sampledData = result.sampledData;
       samplingInfo = result.samplingInfo;
-      
+
       // Log sampling stats
-      Object.keys(samplingInfo).forEach(run => {
+      Object.keys(samplingInfo).forEach((run) => {
         const info = samplingInfo[run];
-        console.log(`📊 ${run}: ${info.originalLength} → ${info.sampledLength} points (${(info.compressionRatio * 100).toFixed(1)}% retained)`);
+        console.log(
+          `📊 ${run}: ${info.originalLength} → ${info.sampledLength} points (${(info.compressionRatio * 100).toFixed(1)}% retained)`,
+        );
       });
     } else {
       sampledData = metricData;
@@ -99,93 +145,219 @@
     }
   }
 
+  /**
+   * Render with zoomed scales (called by ZoomManager)
+   */
+  function renderWithZoomedScales(zoomedXScale, zoomedYScale) {
+    if (!svgManager || !gridRenderer || !pathRenderer) return;
+
+    const dataToRender = needsSampling ? sampledData : metricData;
+    const cleanedData = ChartTransforms.validateData(dataToRender);
+    const processedData = ChartTransforms.processMetricData(
+      cleanedData,
+      metricKey,
+      normalizeLoss,
+    );
+
+    if (!processedData.hasData) return;
+
+    const { stepIndex } = ChartTransforms.setupScales(
+      svgManager,
+      processedData,
+      logScaleX,
+    );
+    const normalizeY = ChartTransforms.createNormalizeFunction(
+      processedData,
+      normalizeLoss,
+    );
+
+    // Get original scales for comparison
+    const { x: originalXScale, y: originalYScale } = svgManager.getScales();
+    const { innerWidth } = svgManager.calculateDimensions();
+
+    // Update axes with zoomed scales
+    const { axes: gAxes, grid: gGrid } = svgManager.getGroups();
+    const xTicksForced = zoomedXScale.ticks(Math.min(6, 10));
+    const yTicksForced = zoomedYScale.ticks(Math.min(6, 10));
+
+    // Redraw grid with zoomed Y scale
+    gGrid
+      .selectAll("line")
+      .data(yTicksForced)
+      .join("line")
+      .attr("x1", 0)
+      .attr("x2", innerWidth)
+      .attr("y1", (d) => zoomedYScale(d))
+      .attr("y2", (d) => zoomedYScale(d))
+      .attr("stroke", "var(--trackio-chart-grid-stroke)")
+      .attr("stroke-opacity", "var(--trackio-chart-grid-opacity)");
+
+    // Update axes
+    const formatAbbrev = (v) => {
+      if (Math.abs(v) >= 1e9) return (v / 1e9).toFixed(1) + "B";
+      if (Math.abs(v) >= 1e6) return (v / 1e6).toFixed(1) + "M";
+      if (Math.abs(v) >= 1e3) return (v / 1e3).toFixed(1) + "k";
+      return v.toFixed(2);
+    };
+
+    gAxes
+      .select(".x-axis")
+      .call(
+        d3
+          .axisBottom(zoomedXScale)
+          .tickValues(xTicksForced)
+          .tickFormat(formatAbbrev),
+      );
+
+    gAxes
+      .select(".y-axis")
+      .call(
+        d3
+          .axisLeft(zoomedYScale)
+          .tickValues(yTicksForced)
+          .tickFormat(formatAbbrev),
+      );
+
+    // Redraw paths with zoomed scales
+    pathRenderer.renderSeriesWithCustomScales(
+      processedData.runs,
+      cleanedData,
+      rawMetricData,
+      colorForRun,
+      smoothing,
+      logScaleX,
+      stepIndex,
+      normalizeY,
+      zoomedXScale,
+      zoomedYScale,
+    );
+  }
+
   /**
    * Main render function - orchestrates all rendering
    */
   function render() {
     if (!svgManager) return;
-    
+
     // Apply sampling if needed
     applySampling();
-    
+
     // Use sampled data for rendering
     const dataToRender = needsSampling ? sampledData : metricData;
-    
+
     // Validate and clean data
     const cleanedData = ChartTransforms.validateData(dataToRender);
-    const processedData = ChartTransforms.processMetricData(cleanedData, metricKey, normalizeLoss);
-    
+    const processedData = ChartTransforms.processMetricData(
+      cleanedData,
+      metricKey,
+      normalizeLoss,
+    );
+
     if (!processedData.hasData) {
       const { root } = svgManager.getGroups();
-      root.style('display', 'none');
+      root.style("display", "none");
       return;
     }
-    
+
     const { root } = svgManager.getGroups();
-    root.style('display', null);
-    
+    root.style("display", null);
+
     // Update scales based on log scale setting
     svgManager.initializeScales(logScaleX);
-    
+
     // Setup scales and domains
-    const { stepIndex } = ChartTransforms.setupScales(svgManager, processedData, logScaleX);
-    const normalizeY = ChartTransforms.createNormalizeFunction(processedData, normalizeLoss);
-    
+    const { stepIndex } = ChartTransforms.setupScales(
+      svgManager,
+      processedData,
+      logScaleX,
+    );
+    const normalizeY = ChartTransforms.createNormalizeFunction(
+      processedData,
+      normalizeLoss,
+    );
+
     // Update lineGen with normalization
     const { line: lineGen, y: yScale } = svgManager.getScales();
-    lineGen.y(d => yScale(normalizeY(d.value)));
-    
+    lineGen.y((d) => yScale(normalizeY(d.value)));
+
     // Update layout and render axes
-    const { innerWidth, xTicksForced, yTicksForced } = svgManager.updateLayout(processedData.hoverSteps, logScaleX);
-    
+    const { innerWidth, xTicksForced, yTicksForced } = svgManager.updateLayout(
+      processedData.hoverSteps,
+      logScaleX,
+    );
+
+    // Update zoom layout if enabled
+    if (zoomManager) {
+      const { innerHeight } = svgManager.calculateDimensions();
+      zoomManager.updateLayout(innerWidth, innerHeight);
+    }
+
     // Render grid
-    gridRenderer.renderGrid(xTicksForced, yTicksForced, processedData.hoverSteps, variant);
-    
+    gridRenderer.renderGrid(
+      xTicksForced,
+      yTicksForced,
+      processedData.hoverSteps,
+      variant,
+    );
+
     // Render data series
     pathRenderer.renderSeries(
-      processedData.runs, 
-      cleanedData, 
-      rawMetricData, 
-      colorForRun, 
-      smoothing, 
-      logScaleX, 
-      stepIndex, 
-      normalizeY
+      processedData.runs,
+      cleanedData,
+      rawMetricData,
+      colorForRun,
+      smoothing,
+      logScaleX,
+      stepIndex,
+      normalizeY,
     );
-    
+
     // Setup interactions
     interactionManager.setupHoverInteractions(
       processedData.hoverSteps,
       stepIndex,
-      processedData.runs.map(r => ({ 
-        run: r, 
-        color: colorForRun(r), 
-        values: (cleanedData[r] || []).slice().sort((a, b) => a.step - b.step) 
+      processedData.runs.map((r) => ({
+        run: r,
+        color: colorForRun(r),
+        values: (cleanedData[r] || []).slice().sort((a, b) => a.step - b.step),
       })),
       normalizeY,
       processedData.isAccuracy,
       innerWidth,
       logScaleX,
       onHover,
-      onLeave
+      onLeave,
     );
   }
-  
+
   /**
    * Public API: Show hover line at specific step
    */
   export function showHoverLine(step) {
     if (!interactionManager) return;
-    
+
     // Use sampled data for interactions as well
     const dataToRender = needsSampling ? sampledData : metricData;
     const cleanedData = ChartTransforms.validateData(dataToRender);
-    const processedData = ChartTransforms.processMetricData(cleanedData, metricKey, normalizeLoss);
-    const { stepIndex } = ChartTransforms.setupScales(svgManager, processedData, logScaleX);
-    
-    interactionManager.showHoverLine(step, processedData.hoverSteps, stepIndex, logScaleX);
+    const processedData = ChartTransforms.processMetricData(
+      cleanedData,
+      metricKey,
+      normalizeLoss,
+    );
+    const { stepIndex } = ChartTransforms.setupScales(
+      svgManager,
+      processedData,
+      logScaleX,
+    );
+
+    interactionManager.showHoverLine(
+      step,
+      processedData.hoverSteps,
+      stepIndex,
+      logScaleX,
+    );
   }
-  
+
   /**
    * Public API: Hide hover line
    */
@@ -194,14 +366,30 @@
       interactionManager.hideHoverLine();
     }
   }
-  
+
+  /**
+   * Public API: Reset zoom to initial state
+   */
+  export function resetZoom(animated = true) {
+    if (zoomManager) {
+      zoomManager.reset(animated);
+    }
+  }
+
+  /**
+   * Public API: Get zoom state
+   */
+  export function getZoomState() {
+    return zoomManager ? zoomManager.getState() : null;
+  }
+
   /**
    * Setup resize observer and lifecycle
    */
   onMount(() => {
     initializeManagers();
     render();
-    
+
     // Debounced resize handling for better mobile performance
     let resizeTimeout;
     const debouncedRender = () => {
@@ -210,33 +398,39 @@
         render();
       }, 100);
     };
-    
-    const ro = window.ResizeObserver ? new ResizeObserver(debouncedRender) : null;
+
+    const ro = window.ResizeObserver
+      ? new ResizeObserver(debouncedRender)
+      : null;
     if (ro && container) ro.observe(container);
-    
+
     // Listen for orientation changes on mobile
     const handleOrientationChange = () => {
       setTimeout(() => {
         render();
       }, 300);
     };
-    
-    window.addEventListener('orientationchange', handleOrientationChange);
-    window.addEventListener('resize', debouncedRender);
-    
-    cleanup = () => { 
+
+    window.addEventListener("orientationchange", handleOrientationChange);
+    window.addEventListener("resize", debouncedRender);
+
+    cleanup = () => {
       if (ro) ro.disconnect();
       if (resizeTimeout) clearTimeout(resizeTimeout);
-      window.removeEventListener('orientationchange', handleOrientationChange);
-      window.removeEventListener('resize', debouncedRender);
+      window.removeEventListener("orientationchange", handleOrientationChange);
+      window.removeEventListener("resize", debouncedRender);
       if (svgManager) svgManager.destroy();
       if (interactionManager) interactionManager.destroy();
+      if (zoomManager) zoomManager.destroy();
     };
   });
-  
+
   onDestroy(() => {
     cleanup && cleanup();
   });
 </script>
 
-<div bind:this={container} style="width: 100%; height: 100%; min-width: 200px; overflow: hidden;"></div>
+<div
+  bind:this={container}
+  style="width: 100%; height: 100%; min-width: 200px; overflow: hidden;"
+></div>

app/src/components/trackio/renderers/core/interaction-manager.js

@@ -10,39 +10,55 @@ export class InteractionManager {
     this.pathRenderer = pathRenderer;
     this.hoverLine = null;
     this.hideTipTimer = null;
-    
+    this.externalOverlay = null; // For using zoom overlay
+
     // Performance optimization for large datasets
     this.lastHoverTime = 0;
     this.hoverThrottleMs = 16; // ~60fps max hover rate
     this.lastNearestStep = null;
   }
 
+  /**
+   * Set an external overlay to use instead of creating our own
+   * This is used when zoom is enabled to share the same overlay
+   */
+  setExternalOverlay(overlay) {
+    this.externalOverlay = overlay;
+  }
+
   /**
    * Setup hover interactions for the chart
    */
   setupHoverInteractions(hoverSteps, stepIndex, series, normalizeY, isAccuracy, innerWidth, logScaleX, onHover, onLeave) {
     const { hover: gHover } = this.svgManager.getGroups();
     const { x: xScale, y: yScale } = this.svgManager.getScales();
-    
+
     if (!gHover || !this.svgManager.container) return;
-    
-    gHover.selectAll('*').remove(); 
-    
+
+    gHover.selectAll('*').remove();
+
     // Calculate dimensions
     const { innerWidth: currentInnerWidth, innerHeight: currentInnerHeight } = this.svgManager.calculateDimensions();
     const actualInnerWidth = innerWidth || currentInnerWidth;
     const actualInnerHeight = currentInnerHeight;
-    
-    // Create interaction overlay
-    const overlay = gHover.append('rect')
-      .attr('fill', 'transparent')
-      .style('cursor', 'crosshair')
-      .attr('x', 0)
-      .attr('y', 0)
-      .attr('width', actualInnerWidth)
-      .attr('height', actualInnerHeight)
-      .style('pointer-events', 'all'); 
-      
+
+    // Use external overlay if provided (zoom overlay), otherwise create our own
+    let overlay;
+    if (this.externalOverlay) {
+      overlay = this.externalOverlay;
+      // Keep cursor as grab when using zoom overlay
+    } else {
+      // Create interaction overlay
+      overlay = gHover.append('rect')
+        .attr('fill', 'transparent')
+        .style('cursor', 'crosshair')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', actualInnerWidth)
+        .attr('height', actualInnerHeight)
+        .style('pointer-events', 'all');
+    }
+
     // Create hover line
     this.hoverLine = gHover.append('line')
       .style('stroke', 'var(--text-color)')
@@ -51,44 +67,44 @@ export class InteractionManager {
       .attr('y1', 0)
       .attr('y2', actualInnerHeight)
       .style('display', 'none')
-      .style('pointer-events', 'none'); 
-    
+      .style('pointer-events', 'none');
+
     // Mouse move handler with throttling for performance
-    const onMove = (ev) => { 
+    const onMove = (ev) => {
       try {
         // Throttle hover events for large datasets
         const now = performance.now();
         const isLargeDataset = hoverSteps.length > 400;
-        
+
         if (isLargeDataset && (now - this.lastHoverTime) < this.hoverThrottleMs) {
           return; // Skip this hover event
         }
         this.lastHoverTime = now;
-        
-        if (this.hideTipTimer) { 
-          clearTimeout(this.hideTipTimer); 
-          this.hideTipTimer = null; 
-        } 
-        
+
+        if (this.hideTipTimer) {
+          clearTimeout(this.hideTipTimer);
+          this.hideTipTimer = null;
+        }
+
         const [mx, my] = d3.pointer(ev, overlay.node());
         const globalX = ev.clientX;
-        const globalY = ev.clientY; 
-      
+        const globalY = ev.clientY;
+
         // Find nearest step
         const { nearest, xpx } = this.findNearestStep(mx, hoverSteps, stepIndex, logScaleX, xScale);
-        
+
         // Skip if same step as last time (avoid redundant updates)
         if (this.lastNearestStep === nearest) {
           return;
         }
         this.lastNearestStep = nearest;
-        
+
         // Update hover line
-        this.hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null); 
-        
+        this.hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+
         // Prepare hover data
         const entries = this.prepareHoverData(series, nearest, normalizeY, isAccuracy);
-        
+
         // Call parent hover callback
         if (onHover && entries.length > 0) {
           onHover({
@@ -97,25 +113,25 @@ export class InteractionManager {
             position: { x: mx, y: my, globalX, globalY }
           });
         }
-        
+
         // Update point visibility
         this.pathRenderer.updatePointVisibility(nearest);
-        
-      } catch(error) {
+
+      } catch (error) {
         console.error('Error in hover interaction:', error);
       }
     };
-    
+
     // Mouse leave handler
-    const onMouseLeave = () => { 
+    const onMouseLeave = () => {
       this.lastNearestStep = null; // Reset cache
-      this.hideTipTimer = setTimeout(() => { 
-        this.hoverLine.style('display', 'none'); 
+      this.hideTipTimer = setTimeout(() => {
+        this.hoverLine.style('display', 'none');
         if (onLeave) onLeave();
         this.pathRenderer.hideAllPoints();
-      }, 0); 
+      }, 0);
     };
-    
+
     // Attach event listeners
     overlay.on('mousemove', onMove).on('mouseleave', onMouseLeave);
   }
@@ -125,17 +141,17 @@ export class InteractionManager {
    */
   findNearestStep(mx, hoverSteps, stepIndex, logScaleX, xScale) {
     let nearest, xpx;
-    
+
     if (logScaleX) {
       const mouseStepValue = xScale.invert(mx);
-      
+
       // For large datasets, use binary search instead of linear search
       if (hoverSteps.length > 400) {
         nearest = this.binarySearchClosest(hoverSteps, mouseStepValue);
       } else {
         let minDist = Infinity;
         let closestStep = hoverSteps[0];
-        
+
         hoverSteps.forEach(step => {
           const dist = Math.abs(Math.log(step) - Math.log(mouseStepValue));
           if (dist < minDist) {
@@ -143,17 +159,17 @@ export class InteractionManager {
             closestStep = step;
           }
         });
-        
+
         nearest = closestStep;
       }
-      
+
       xpx = xScale(nearest);
     } else {
-      const idx = Math.round(Math.max(0, Math.min(hoverSteps.length - 1, xScale.invert(mx)))); 
-      nearest = hoverSteps[idx]; 
+      const idx = Math.round(Math.max(0, Math.min(hoverSteps.length - 1, xScale.invert(mx))));
+      nearest = hoverSteps[idx];
       xpx = xScale(idx);
     }
-    
+
     return { nearest, xpx };
   }
 
@@ -163,48 +179,79 @@ export class InteractionManager {
   binarySearchClosest(sortedArray, target) {
     let left = 0;
     let right = sortedArray.length - 1;
-    
+
     if (target <= sortedArray[left]) return sortedArray[left];
     if (target >= sortedArray[right]) return sortedArray[right];
-    
+
     while (left <= right) {
       const mid = Math.floor((left + right) / 2);
       const midVal = sortedArray[mid];
-      
+
       if (midVal === target) return midVal;
-      
+
       if (midVal < target) {
         left = mid + 1;
       } else {
         right = mid - 1;
       }
     }
-    
+
     // At this point, left > right
     // sortedArray[right] < target < sortedArray[left]
     const leftDist = Math.abs(sortedArray[left] - target);
     const rightDist = Math.abs(sortedArray[right] - target);
-    
+
     return leftDist < rightDist ? sortedArray[left] : sortedArray[right];
   }
 
   /**
-   * Prepare data for hover tooltip
+   * Prepare data for hover tooltip with interpolation for missing points
    */
   prepareHoverData(series, nearestStep, normalizeY, isAccuracy) {
-    const entries = series.map(s => { 
-      const m = new Map(s.values.map(v => [v.step, v])); 
-      const pt = m.get(nearestStep); 
-      return { run: s.run, color: s.color, pt }; 
+    const entries = series.map(s => {
+      const values = s.values.sort((a, b) => a.step - b.step);
+      const m = new Map(values.map(v => [v.step, v]));
+      let pt = m.get(nearestStep);
+
+      // If no exact point, interpolate from surrounding points
+      if (!pt) {
+        // Find the two closest points (one before, one after)
+        let before = null;
+        let after = null;
+
+        for (let i = 0; i < values.length; i++) {
+          if (values[i].step < nearestStep) {
+            before = values[i];
+          } else if (values[i].step > nearestStep && !after) {
+            after = values[i];
+            break;
+          }
+        }
+
+        // Interpolate if we have both surrounding points
+        if (before && after) {
+          const ratio = (nearestStep - before.step) / (after.step - before.step);
+          const interpolatedValue = before.value + ratio * (after.value - before.value);
+          pt = { step: nearestStep, value: interpolatedValue };
+        } else if (before) {
+          // Use the last known value
+          pt = before;
+        } else if (after) {
+          // Use the first known value
+          pt = after;
+        }
+      }
+
+      return { run: s.run, color: s.color, pt, hasExactPoint: !!m.get(nearestStep) };
     }).filter(e => e.pt && e.pt.value != null)
-      .sort((a, b) => a.pt.value - b.pt.value); 
-    
-    const fmt = (vv) => (isAccuracy ? (+vv).toFixed(4) : (+vv).toFixed(4)); 
-    
-    return entries.map(e => ({ 
-      color: e.color, 
-      name: e.run, 
-      valueText: fmt(e.pt.value) 
+      .sort((a, b) => a.pt.value - b.pt.value);
+
+    const fmt = (vv) => (isAccuracy ? (+vv).toFixed(4) : (+vv).toFixed(4));
+
+    return entries.map(e => ({
+      color: e.color,
+      name: e.run,
+      valueText: fmt(e.pt.value)
     }));
   }
 
@@ -213,9 +260,9 @@ export class InteractionManager {
    */
   showHoverLine(step, hoverSteps, stepIndex, logScaleX) {
     if (!this.hoverLine || !this.svgManager.getScales().x) return;
-    
+
     const { x: xScale } = this.svgManager.getScales();
-    
+
     try {
       let xpx;
       if (logScaleX) {
@@ -226,7 +273,7 @@ export class InteractionManager {
           xpx = xScale(stepIndexValue);
         }
       }
-      
+
       if (xpx !== undefined) {
         this.hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
       }

app/src/components/trackio/renderers/core/path-renderer.js

@@ -15,12 +15,12 @@ export class PathRenderer {
   renderSeries(runs, metricData, rawMetricData, colorForRun, smoothing, logScaleX, stepIndex, normalizeY) {
     const { lines: gLines, points: gPoints } = this.svgManager.getGroups();
     const { line: lineGen } = this.svgManager.getScales();
-    
+
     // Prepare series data
-    const series = runs.map(r => ({ 
-      run: r, 
-      color: colorForRun(r), 
-      values: (metricData[r] || []).slice().sort((a, b) => a.step - b.step) 
+    const series = runs.map(r => ({
+      run: r,
+      color: colorForRun(r),
+      values: (metricData[r] || []).slice().sort((a, b) => a.step - b.step)
     }));
 
     // Render background lines for smoothing
@@ -41,15 +41,15 @@ export class PathRenderer {
    * Render raw data lines (background when smoothing is enabled)
    */
   renderRawLines(gLines, runs, rawMetricData, colorForRun, lineGen) {
-    const rawSeries = runs.map(r => ({ 
-      run: r, 
-      color: colorForRun(r), 
-      values: (rawMetricData[r] || []).slice().sort((a, b) => a.step - b.step) 
+    const rawSeries = runs.map(r => ({
+      run: r,
+      color: colorForRun(r),
+      values: (rawMetricData[r] || []).slice().sort((a, b) => a.step - b.step)
     }));
-    
+
     const rawPaths = gLines.selectAll('path.raw-line')
-      .data(rawSeries, d => d.run + '-raw'); 
-    
+      .data(rawSeries, d => d.run + '-raw');
+
     // Enter
     rawPaths.enter()
       .append('path')
@@ -60,14 +60,14 @@ export class PathRenderer {
       .attr('opacity', 0.2)
       .attr('stroke', d => d.color)
       .style('pointer-events', 'none')
-      .attr('d', d => lineGen(d.values)); 
-    
+      .attr('d', d => lineGen(d.values));
+
     // Update
     rawPaths
       .attr('stroke', d => d.color)
       .attr('opacity', 0.2)
       .attr('d', d => lineGen(d.values));
-    
+
     // Exit
     rawPaths.exit().remove();
   }
@@ -77,8 +77,8 @@ export class PathRenderer {
    */
   renderMainLines(gLines, series, lineGen) {
     const paths = gLines.selectAll('path.run-line')
-      .data(series, d => d.run); 
-    
+      .data(series, d => d.run);
+
     // Enter
     paths.enter()
       .append('path')
@@ -89,15 +89,15 @@ export class PathRenderer {
       .attr('opacity', 0.9)
       .attr('stroke', d => d.color)
       .style('pointer-events', 'none')
-      .attr('d', d => lineGen(d.values)); 
-    
+      .attr('d', d => lineGen(d.values));
+
     // Update with transition
     paths.transition()
       .duration(160)
       .attr('stroke', d => d.color)
       .attr('opacity', 0.9)
       .attr('d', d => lineGen(d.values));
-    
+
     // Exit
     paths.exit().remove();
   }
@@ -107,19 +107,19 @@ export class PathRenderer {
    */
   renderPoints(gPoints, series, logScaleX, stepIndex, normalizeY) {
     const { x: xScale, y: yScale } = this.svgManager.getScales();
-    
-    const allPoints = series.flatMap(s => 
-      s.values.map(v => ({ 
-        run: s.run, 
-        color: s.color, 
-        step: v.step, 
-        value: v.value 
+
+    const allPoints = series.flatMap(s =>
+      s.values.map(v => ({
+        run: s.run,
+        color: s.color,
+        step: v.step,
+        value: v.value
       }))
     );
-    
+
     const ptsSel = gPoints.selectAll('circle.pt')
-      .data(allPoints, d => `${d.run}-${d.step}`); 
-    
+      .data(allPoints, d => `${d.run}-${d.step}`);
+
     // Enter
     ptsSel.enter()
       .append('circle')
@@ -134,8 +134,8 @@ export class PathRenderer {
       .attr('cy', d => yScale(normalizeY(d.value)))
       .merge(ptsSel)
       .attr('cx', d => logScaleX ? xScale(d.step) : xScale(stepIndex.get(d.step)))
-      .attr('cy', d => yScale(normalizeY(d.value))); 
-    
+      .attr('cy', d => yScale(normalizeY(d.value)));
+
     // Exit
     ptsSel.exit().remove();
   }
@@ -145,11 +145,11 @@ export class PathRenderer {
    */
   updatePointVisibility(nearestStep) {
     const { points: gPoints } = this.svgManager.getGroups();
-    
-    try { 
+
+    try {
       gPoints.selectAll('circle.pt')
-        .attr('r', d => (d && d.step === nearestStep ? 4 : 0)); 
-    } catch(_) {} 
+        .attr('r', d => (d && d.step === nearestStep ? 4 : 0));
+    } catch (_) { }
   }
 
   /**
@@ -157,9 +157,74 @@ export class PathRenderer {
    */
   hideAllPoints() {
     const { points: gPoints } = this.svgManager.getGroups();
-    
-    try { 
-      gPoints.selectAll('circle.pt').attr('r', 0); 
-    } catch(_) {} 
+
+    try {
+      gPoints.selectAll('circle.pt').attr('r', 0);
+    } catch (_) { }
+  }
+
+  /**
+   * Render series with custom scales (for zoom)
+   * Similar to renderSeries but uses provided scales instead of svgManager's scales
+   */
+  renderSeriesWithCustomScales(runs, metricData, rawMetricData, colorForRun, smoothing, logScaleX, stepIndex, normalizeY, customXScale, customYScale) {
+    const { lines: gLines, points: gPoints } = this.svgManager.getGroups();
+
+    // Create custom line generator with zoomed scales
+    const customLineGen = d3.line()
+      .x(d => {
+        if (logScaleX) {
+          return customXScale(d.step);
+        } else {
+          const idx = stepIndex ? stepIndex.get(d.step) : 0;
+          return customXScale(idx);
+        }
+      })
+      .y(d => customYScale(normalizeY(d.value)));
+
+    // Prepare series data
+    const series = runs.map(r => ({
+      run: r,
+      color: colorForRun(r),
+      values: (metricData[r] || []).slice().sort((a, b) => a.step - b.step)
+    }));
+
+    // Update raw lines if smoothing is enabled
+    if (smoothing && rawMetricData && Object.keys(rawMetricData).length > 0) {
+      const rawSeries = runs.map(r => ({
+        run: r,
+        color: colorForRun(r),
+        values: (rawMetricData[r] || []).slice().sort((a, b) => a.step - b.step)
+      }));
+
+      gLines.selectAll('path.raw-line')
+        .data(rawSeries, d => d.run + '-raw')
+        .attr('d', d => customLineGen(d.values));
+    }
+
+    // Update main lines
+    gLines.selectAll('path.run-line')
+      .data(series, d => d.run)
+      .attr('d', d => customLineGen(d.values));
+
+    // Update points positions
+    const allPoints = [];
+    series.forEach(s => {
+      s.values.forEach(v => {
+        allPoints.push({ run: s.run, color: s.color, step: v.step, value: v.value });
+      });
+    });
+
+    gPoints.selectAll('circle.pt')
+      .data(allPoints, d => `${d.run}-${d.step}`)
+      .attr('cx', d => {
+        if (logScaleX) {
+          return customXScale(d.step);
+        } else {
+          const idx = stepIndex ? stepIndex.get(d.step) : 0;
+          return customXScale(idx);
+        }
+      })
+      .attr('cy', d => customYScale(normalizeY(d.value)));
   }
 }

app/src/components/trackio/renderers/core/zoom-manager.js

@@ -0,0 +1,288 @@
+// Zoom & Pan Manager for TrackIO Charts
+// Inspired by the d3-line-chart implementation
+
+import * as d3 from 'd3';
+
+/**
+ * ZoomManager - Handles zoom and pan interactions for charts
+ * 
+ * Key principles:
+ * - Uses rescaleX/rescaleY instead of transforming the group
+ * - Redraws paths with new scales instead of CSS transforms
+ * - Keeps axes and grid outside the zoomed content
+ * - Uses clip-path to constrain the plot area
+ */
+export class ZoomManager {
+    constructor(svgManager, options = {}) {
+        this.svgManager = svgManager;
+        this.options = {
+            zoomExtent: [1.0, 8.0],     // Min and max zoom levels
+            enableX: true,               // Enable X-axis zoom
+            enableY: true,               // Enable Y-axis zoom
+            transitionDuration: 750,     // Reset transition duration
+            ...options
+        };
+
+        // State
+        this.hasMoved = false;
+        this.currentTransform = d3.zoomIdentity;
+        this.zoom = null;
+        this.overlay = null;
+        this.clipPath = null;
+        this.clipRect = null;
+        this.callbacks = {
+            onZoom: null,
+            onReset: null,
+            onZoomStart: null,
+            onZoomEnd: null
+        };
+    }
+
+    /**
+     * Initialize zoom behavior and setup overlay
+     */
+    initialize() {
+        const { root } = this.svgManager.getGroups();
+        const svg = this.svgManager.svg;
+
+        if (!root || !svg) {
+            console.warn('⚠️ Cannot initialize zoom: SVG or root group not found');
+            return;
+        }
+
+        // Create unique clip path ID
+        const clipId = 'trackio-clip-' + Math.random().toString(36).slice(2, 11);
+
+        // Setup clip path in SVG defs
+        let defs = svg.select('defs');
+        if (defs.empty()) {
+            defs = svg.append('defs');
+        }
+
+        this.clipPath = defs.append('clipPath')
+            .attr('id', clipId);
+
+        this.clipRect = this.clipPath.append('rect');
+
+        // Apply clip-path to plot groups
+        const { lines: gLines, points: gPoints } = this.svgManager.getGroups();
+        if (gLines) gLines.attr('clip-path', `url(#${clipId})`);
+        if (gPoints) gPoints.attr('clip-path', `url(#${clipId})`);
+
+        // Create transparent overlay for capturing zoom events
+        this.overlay = root.append('rect')
+            .attr('class', 'zoom-overlay')
+            .attr('fill', 'none')
+            .attr('pointer-events', 'all')
+            .style('cursor', 'grab');
+
+        // Create zoom behavior
+        this.zoom = d3.zoom()
+            .scaleExtent(this.options.zoomExtent)
+            .on('start', (event) => this.onZoomStart(event))
+            .on('zoom', (event) => this.onZoom(event))
+            .on('end', (event) => this.onZoomEnd(event));
+
+        // Apply zoom to overlay
+        this.overlay.call(this.zoom);
+
+        // Handle cursor changes
+        this.overlay
+            .on('mousedown.cursor', () => {
+                this.overlay.style('cursor', 'grabbing');
+            })
+            .on('mouseup.cursor', () => {
+                this.overlay.style('cursor', 'grab');
+            });
+
+        console.log('✅ ZoomManager initialized with clip-path:', clipId);
+    }
+
+    /**
+     * Update layout (call this on resize or redraw)
+     */
+    updateLayout(innerWidth, innerHeight) {
+        if (!this.clipRect || !this.overlay || !this.zoom) return;
+
+        // Update clip rect dimensions
+        this.clipRect
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', innerWidth)
+            .attr('height', innerHeight);
+
+        // Update overlay dimensions
+        this.overlay
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', innerWidth)
+            .attr('height', innerHeight);
+
+        // Update zoom extent and translate extent
+        this.zoom
+            .extent([[0, 0], [innerWidth, innerHeight]])
+            .translateExtent([[0, 0], [innerWidth, innerHeight]]);
+    }
+
+    /**
+     * Zoom start handler
+     */
+    onZoomStart(event) {
+        if (this.callbacks.onZoomStart) {
+            this.callbacks.onZoomStart(event);
+        }
+    }
+
+    /**
+     * Main zoom handler - rescales axes and redraws
+     */
+    onZoom(event) {
+        const transform = event.transform;
+        this.currentTransform = transform;
+
+        // Update moved state
+        this.hasMoved = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;
+
+        // Get original scales
+        const { x: xScale, y: yScale } = this.svgManager.getScales();
+
+        // Rescale based on enabled axes
+        const newXScale = this.options.enableX ? transform.rescaleX(xScale) : xScale;
+        const newYScale = this.options.enableY ? transform.rescaleY(yScale) : yScale;
+
+        // Call external callback with new scales
+        if (this.callbacks.onZoom) {
+            this.callbacks.onZoom({
+                transform,
+                xScale: newXScale,
+                yScale: newYScale,
+                hasMoved: this.hasMoved
+            });
+        }
+    }
+
+    /**
+     * Zoom end handler
+     */
+    onZoomEnd(event) {
+        if (this.callbacks.onZoomEnd) {
+            this.callbacks.onZoomEnd(event);
+        }
+    }
+
+    /**
+     * Reset zoom to initial state
+     */
+    reset(animated = true) {
+        if (!this.overlay || !this.zoom) return;
+
+        if (animated) {
+            this.overlay.transition()
+                .duration(this.options.transitionDuration)
+                .call(this.zoom.transform, d3.zoomIdentity);
+        } else {
+            this.overlay.call(this.zoom.transform, d3.zoomIdentity);
+        }
+
+        if (this.callbacks.onReset) {
+            this.callbacks.onReset();
+        }
+    }
+
+    /**
+     * Set zoom level programmatically
+     */
+    setZoom(k, x = 0, y = 0, animated = true) {
+        if (!this.overlay || !this.zoom) return;
+
+        const transform = d3.zoomIdentity.translate(x, y).scale(k);
+
+        if (animated) {
+            this.overlay.transition()
+                .duration(this.options.transitionDuration)
+                .call(this.zoom.transform, transform);
+        } else {
+            this.overlay.call(this.zoom.transform, transform);
+        }
+    }
+
+    /**
+     * Enable/disable zoom
+     */
+    setEnabled(enabled) {
+        if (!this.overlay || !this.zoom) return;
+
+        if (enabled) {
+            this.overlay.call(this.zoom);
+            this.overlay.style('cursor', 'grab');
+        } else {
+            this.overlay.on('.zoom', null);
+            this.overlay.style('cursor', 'default');
+        }
+    }
+
+    /**
+     * Register callbacks
+     */
+    on(event, callback) {
+        if (this.callbacks.hasOwnProperty('on' + event.charAt(0).toUpperCase() + event.slice(1))) {
+            this.callbacks['on' + event.charAt(0).toUpperCase() + event.slice(1)] = callback;
+        } else {
+            console.warn(`⚠️ Unknown zoom event: ${event}`);
+        }
+        return this;
+    }
+
+    /**
+     * Get current zoom state
+     */
+    getState() {
+        return {
+            hasMoved: this.hasMoved,
+            transform: this.currentTransform,
+            scale: this.currentTransform.k,
+            translateX: this.currentTransform.x,
+            translateY: this.currentTransform.y
+        };
+    }
+
+    /**
+     * Get the overlay element (for attaching additional event handlers)
+     */
+    getOverlay() {
+        return this.overlay;
+    }
+
+    /**
+     * Attach additional event handlers to the overlay
+     * This allows other managers (like InteractionManager) to use the same overlay
+     */
+    attachEventHandlers(handlers) {
+        if (!this.overlay) return;
+
+        Object.keys(handlers).forEach(eventName => {
+            this.overlay.on(eventName, handlers[eventName]);
+        });
+    }
+
+    /**
+     * Cleanup
+     */
+    destroy() {
+        if (this.overlay) {
+            this.overlay.on('.zoom', null);
+            this.overlay.on('.cursor', null);
+            this.overlay.remove();
+        }
+
+        if (this.clipPath) {
+            this.clipPath.remove();
+        }
+
+        this.zoom = null;
+        this.overlay = null;
+        this.clipPath = null;
+        this.clipRect = null;
+    }
+}
+

app/src/content/article.mdx

@@ -1,57 +1,89 @@
 ---
-title: "Bringing paper to life:\n A modern template for\n scientific writing"
-subtitle: "Publish‑ready workflow that lets you focus on ideas, not infrastructure"
-description: "Publish‑ready workflow that lets you focus on ideas, not infrastructure"
+title: "Unfolding Robotics: Open-Source Shirt Folding from Data to Deployment"
+subtitle: "The complete open-source recipe for teaching robots to fold clothes"
+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: "Thibaud Frere"
-    url: "https://huggingface.co/tfrere"
+  - name: "Pepijn Kooijmans"
+    url: "https://huggingface.co/pepijn223"
+    affiliations: [1]
+  - name: "Michel Aractingi"
+    url: "https://huggingface.co/aractingi"
+    affiliations: [1]
+  - name: "Steven Palma"
+    url: "https://huggingface.co/imstevenpmwork"
+    affiliations: [1]
+  - name: "Caroline Pascal"
+    url: "https://huggingface.co/CarolinePascal"
+    affiliations: [1]
+  - name: "Jade Choghari"
+    url: "https://huggingface.co/jadechoghari"
+    affiliations: [1]
+  - name: "Khalil Meftah"
+    url: "https://huggingface.co/lilkm"
+    affiliations: [1]
+  - name: "Martino Russi"
+    url: "https://huggingface.co/nepyope"
+    affiliations: [1]
+  - name: "Nicolas Rabault"
+    url: "https://huggingface.co/Nico-robot"
+    affiliations: [1]
+  - name: "Virgile Batto"
+    url: "https://huggingface.co/VirgileBatto"
+    affiliations: [1]
+  - name: "Thomas Wolf"
+    url: "https://huggingface.co/thomwolf"
     affiliations: [1]
 affiliations:
   - name: "Hugging Face"
     url: "https://huggingface.co"
-published: "Sep. 01, 2025"
-doi: 10.1234/abcd.efgh
-licence: >
-  Diagrams and text are licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">CC‑BY 4.0</a> with the source available on <a href="https://huggingface.co/spaces/tfrere/research-article-template" target="_blank" rel="noopener noreferrer">Hugging Face</a>, unless noted otherwise.
-  Figures reused from other sources are excluded and marked in their captions (“Figure from …”).
+published: "2026"
 tags:
-  - research
-  - template
+  - robotics
+  - lerobot
+  - manipulation
+  - open-source
 tableOfContentsAutoCollapse: true
 pdfProOnly: false
 showPdf: true
 ---
 
+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 Evaluation from "./chapters/folding/07-evaluation.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 AvailableBlocks from "./chapters/demo/markdown.mdx";  
 import GettingStarted from "./chapters/demo/getting-started.mdx";
 import Markdown from "./chapters/demo/markdown.mdx";
 import Components from "./chapters/demo/components.mdx";
-import Greetings from "./chapters/demo/greetings.mdx";
 import VibeCodingCharts from "./chapters/demo/vibe-coding-charts.mdx";
-import ImportContent from "./chapters/demo/import-content.mdx";
-
-<Introduction />
 
-<BuiltWithThis />
+<Hero />
 
-<GettingStarted />
+<Results />
 
-<WritingYourContent />
+<Hardware />
 
-<Markdown />
+<DataCollection />
 
-<Components />
+<DataDiversity />
 
-<VibeCodingCharts />
+<Training />
 
-<ImportContent />
+<Evaluation />
 
-<BestPractices />
+<Experiments />
 
-<Greetings />
+<Learnings />
 
+<References />
 

app/src/content/assets/audio/audio-example.mp3

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

app/src/content/assets/image/Folding_V1.mp4

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

app/src/content/bibliography.bib

@@ -1,130 +1,110 @@
-@inproceedings{vaswani2017attention,
-  title     = {Attention Is All You Need},
-  author    = {Vaswani, Ashish and Shazeer, Noam and Parmar, Niki and Uszkoreit, Jakob and Jones, Llion and Gomez, Aidan N and Kaiser, {
-               }Lukasz and Polosukhin, Illia},
-  booktitle = {Advances in Neural Information Processing Systems},
-  year      = {2017}
+@article{black2024pi0,
+  title     = {$\pi_0$: A Vision-Language-Action Flow Model for General Robot Control},
+  author    = {Black, Kevin and Brown, Noah and Driess, Danny and Esmail, Adnan and Equi, Michael and Finn, Chelsea and Fusai, Niccolo and Groom, Lachy and Hausman, Karol and Ichter, Brian and others},
+  journal   = {arXiv preprint arXiv:2410.24164},
+  year      = {2024}
 }
 
-@book{mckinney2017python,
-  title     = {Python for Data Analysis},
-  author    = {McKinney, Wes},
-  publisher = {O'Reilly Media},
-  address   = {Sebastopol, CA},
-  year      = {2017},
-  edition   = {2},
-  isbn      = {978-1491957660}
+@inproceedings{black2025pi05,
+  title     = {$\pi_{0.5}$: A Vision-Language-Action Model with Open-World Generalization},
+  author    = {Black, Kevin and Brown, Noah and Darpinian, James and Dhabalia, Karan and Driess, Danny and Esmail, Adnan and Equi, Michael and Finn, Chelsea and others},
+  booktitle = {9th Annual Conference on Robot Learning},
+  year      = {2025},
+  url       = {https://arxiv.org/abs/2504.16054}
 }
 
-@inproceedings{he2016resnet,
-  title     = {Deep Residual Learning for Image Recognition},
-  author    = {He, Kaiming and Zhang, Xiangyu and Ren, Shaoqing and Sun, Jian},
-  booktitle = {Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition (CVPR)},
-  pages     = {770--778},
-  year      = {2016},
-  doi       = {10.1109/CVPR.2016.90},
-  url       = {https://doi.org/10.1109/CVPR.2016.90}
+@article{pi2025pistar06,
+  title     = {$\pi^*_{0.6}$: A VLA That Learns From Experience},
+  author    = {{Physical Intelligence}},
+  journal   = {arXiv preprint},
+  year      = {2025},
+  url       = {https://pi.website/blog/pistar06}
 }
 
-@article{silver2017mastering,
-  title   = {Mastering the game of Go without human knowledge},
-  author  = {Silver, David and Schrittwieser, Julian and Simonyan, Karen and Antonoglou, Ioannis and Huang, Aja and others},
-  journal = {Nature},
-  volume  = {550},
-  number  = {7676},
-  pages   = {354--359},
-  year    = {2017},
-  month   = {oct},
-  doi     = {10.1038/nature24270},
-  url     = {https://www.nature.com/articles/nature24270}
+@misc{cadene2024lerobot,
+  title        = {LeRobot: State-of-the-art Machine Learning for Real-World Robotics in PyTorch},
+  author       = {Cadene, Remi and Alibert, Simon and Soare, Alexander and others},
+  year         = {2024},
+  howpublished = {GitHub},
+  url          = {https://github.com/huggingface/lerobot}
 }
 
-@techreport{openai2023gpt4,
-  title         = {GPT-4 Technical Report},
-  author        = {{OpenAI}},
-  institution   = {OpenAI},
-  year          = {2023},
-  number        = {arXiv:2303.08774},
-  archiveprefix = {arXiv},
-  eprint        = {2303.08774},
-  primaryclass  = {cs.CL},
-  url           = {https://arxiv.org/abs/2303.08774}
+@inproceedings{black2025rtc,
+  title     = {Real-Time Execution of Action Chunking Flow Policies},
+  author    = {Black, Kevin and Galliker, Manuel Y. and Levine, Sergey},
+  booktitle = {NeurIPS},
+  year      = {2025},
+  url       = {https://arxiv.org/abs/2506.07339}
 }
 
-@phdthesis{doe2020thesis,
-  title   = {Learning Efficient Representations for Large-Scale Visual Recognition},
-  author  = {Doe, Jane},
-  school  = {Massachusetts Institute of Technology},
-  address = {Cambridge, MA},
-  year    = {2020},
-  doi     = {10.5555/mit-2020-xyz}
+@article{chen2025sarm,
+  title   = {SARM: Stage-Aware Reward Modeling for Long Horizon Robot Manipulation},
+  author  = {Chen, Qianzhong and Yu, Justin and Schwager, Mac and Abbeel, Pieter and Shentu, Yide and Wu, Philipp},
+  journal = {arXiv preprint arXiv:2509.25358},
+  year    = {2025},
+  url     = {https://arxiv.org/abs/2509.25358}
 }
 
-@incollection{cover2006entropy,
-  title     = {Entropy, Relative Entropy, and Mutual Information},
-  author    = {Cover, Thomas M. and Thomas, Joy A.},
-  booktitle = {Elements of Information Theory},
-  publisher = {Wiley},
-  address   = {Hoboken, NJ},
-  edition   = {2},
-  year      = {2006},
-  pages     = {13--55},
-  isbn      = {978-0471241959}
+@inproceedings{ross2011dagger,
+  title     = {A Reduction of Imitation Learning and Structured Prediction to No-Regret Online Learning},
+  author    = {Ross, St{\'e}phane and Gordon, Geoffrey and Bagnell, Drew},
+  booktitle = {AISTATS},
+  pages     = {627--635},
+  year      = {2011}
 }
 
-@misc{zenodo2021dataset,
-  title        = {ImageNet-21K Subset (Version 2.0)},
-  author       = {Smith, John and Lee, Alice and Kumar, Ravi},
-  year         = {2021},
-  howpublished = {Dataset on Zenodo},
-  doi          = {10.5281/zenodo.1234567},
-  url          = {https://doi.org/10.5281/zenodo.1234567},
-  note         = {Accessed 2025-09-01}
+@article{lipman2022flow,
+  title   = {Flow Matching for Generative Modeling},
+  author  = {Lipman, Yaron and Chen, Ricky TQ and Ben-Hamu, Heli and Nickel, Maximilian and Le, Matt},
+  journal = {arXiv preprint arXiv:2210.02747},
+  year    = {2022}
 }
 
-@misc{sklearn2024,
-  title        = {scikit-learn: Machine Learning in Python (Version 1.4)},
-  author       = {Pedregosa, Fabian and Varoquaux, Ga{"e}l and Gramfort, Alexandre and others},
-  year         = {2024},
-  howpublished = {Software},
-  doi          = {10.5281/zenodo.592264},
-  url          = {https://scikit-learn.org}
+@inproceedings{vaswani2017attention,
+  title     = {Attention Is All You Need},
+  author    = {Vaswani, Ashish and Shazeer, Noam and Parmer, Niki and Uszkoreit, Jakob and Jones, Llion and Gomez, Aidan N and Kaiser, Lukasz and Polosukhin, Illia},
+  booktitle = {Advances in Neural Information Processing Systems},
+  year      = {2017}
+}
+
+@article{chi2023diffusionpolicy,
+  title   = {Diffusion Policy: Visuomotor Policy Learning via Action Diffusion},
+  author  = {Chi, Cheng and Feng, Siyuan and Du, Yilun and Xu, Zhenjia and Cousineau, Eric and Burchfiel, Benjamin and Song, Shuran},
+  journal = {Robotics: Science and Systems},
+  year    = {2023}
+}
+
+@article{driess2025ki,
+  title   = {Knowledge Insulating Vision-Language-Action Models: Train Fast, Run Fast, Generalize Better},
+  author  = {Driess, Danny and Springenberg, Jost Tobias and Ichter, Brian and Yu, Lili and Li-Bell, Adrian and Pertsch, Karl and others},
+  journal = {NeurIPS},
+  year    = {2025}
+}
+
+@article{pertsch2025fast,
+  title   = {FAST: Efficient Action Tokenization for Vision-Language-Action Models},
+  author  = {Pertsch, Karl and Stachowicz, Kyle and Ichter, Brian and Driess, Danny and Nair, Suraj and Vuong, Quan and Mees, Oier and Finn, Chelsea and Levine, Sergey},
+  journal = {Robotics: Science and Systems},
+  year    = {2025}
 }
 
-@inproceedings{smith2024privacy,
-  title     = {Privacy-Preserving Training with Low-Precision Secure Aggregation},
-  author    = {Smith, Emily and Zhang, Wei and Rossi, Marco and Patel, Neha},
-  booktitle = {Proceedings of the 41st International Conference on Machine Learning},
-  editor    = {Smith, A. and Johnson, B.},
-  series    = {Proceedings of Machine Learning Research},
-  volume    = {235},
-  pages     = {12345--12367},
-  address   = {Vienna, Austria},
-  publisher = {PMLR},
-  month     = {jul},
-  year      = {2024},
-  url       = {https://proceedings.mlr.press/v235/}
+@article{frans2025cfgrl,
+  title   = {Diffusion Guidance is a Controllable Policy Improvement Operator},
+  author  = {Frans, Kevin and Park, Seohong and Abbeel, Pieter and Levine, Sergey},
+  journal = {arXiv preprint arXiv:2505.23458},
+  year    = {2025}
 }
 
-@article{kingma2015adam,
-  title         = {Adam: A Method for Stochastic Optimization},
-  author        = {Kingma, Diederik P. and Ba, Jimmy},
-  journal       = {International Conference on Learning Representations (ICLR)},
-  year          = {2015},
-  archiveprefix = {arXiv},
-  eprint        = {1412.6980},
-  primaryclass  = {cs.LG},
-  url           = {https://arxiv.org/abs/1412.6980}
+@article{shukor2025smolvla,
+  title   = {SmolVLA: A Small Vision-Language-Action Model for Robotics},
+  author  = {Shukor, Mustafa and others},
+  journal = {arXiv preprint},
+  year    = {2025}
 }
 
-@misc{raffel2020t5,
-  title         = {Exploring the Limits of Transfer Learning with a Unified Text-to-Text Transformer},
-  author        = {Raffel, Colin and Shazeer, Noam and Roberts, Adam and Lee, Katherine and Narang, Sharan and others},
-  year          = {2020},
-  howpublished  = {arXiv preprint},
-  archiveprefix = {arXiv},
-  eprint        = {1910.10683},
-  primaryclass  = {cs.LG},
-  doi           = {10.48550/arXiv.1910.10683},
-  url           = {https://arxiv.org/abs/1910.10683}
+@article{kelly2019hgdagger,
+  title   = {HG-DAgger: Interactive Imitation Learning with Human Experts},
+  author  = {Kelly, Michael and Sidrane, Chelsea and Driggs-Campbell, Katherine and Kochenderfer, Mykel J},
+  journal = {ICRA},
+  year    = {2019}
 }

app/src/content/chapters/demo/built-with-this.mdx

@@ -11,14 +11,18 @@ export const title = "Built with this";
 You can see how the template is used in the following examples.
 
 <Stack direction="horizontal" gap="medium" layout="2-column" >
-  <a href="https://huggingface.co/spaces/transformers-community/Transformers-tenets" target="_blank" rel="noopener noreferrer" class="card no-padding" style="flex: 1; min-width: 0; overflow: hidden;">
+
+
+  <a href="https://huggingface.co/spaces/HuggingFaceTB/smol-training-playbook" target="_blank" rel="noopener noreferrer" class="card no-padding" style="flex: 1; min-width: 0; overflow: hidden;">
     <Image 
-      src={maintainUnmaintainable} 
-      alt="Maintain the unmaintainable: 1M python loc, 400+ models"
+      src={smolTrainingGuide} 
+      alt="The Smol Training Playbook: The Secrets to Building World-Class LLMs"
+      zoomable={false}
+      downloadable={false}
     />
     <div class="card-title-container">
-      <h3 class="card-title">Maintain the unmaintainable: 1M python loc, 400+ models</h3>
-      <p class="card-subtitle">A peek into software engineering for the transformers library</p>
+      <h3 class="card-title">The Smol Training Playbook: The Secrets to Building World-Class LLMs</h3>
+      <p class="card-subtitle">A practical journey through the challenges, decisions, and messy reality behind training state-of-the-art language models</p>
     </div>
   </a>
   
@@ -26,6 +30,8 @@ You can see how the template is used in the following examples.
     <Image 
       src={finevision} 
       alt="FineVision: Open Data Is All You Need"
+      zoomable={false}
+      downloadable={false}
     />
     <div class="card-title-container">
       <h3 class="card-title">FineVision: Open Data Is All You Need</h3>
@@ -33,14 +39,17 @@ You can see how the template is used in the following examples.
     </div>
   </a>
   
-  <a href="https://placeholder-url.com" target="_blank" rel="noopener noreferrer" class="card no-padding" style="flex: 1; min-width: 0; overflow: hidden;">
+
+  <a href="https://huggingface.co/spaces/transformers-community/Transformers-tenets" target="_blank" rel="noopener noreferrer" class="card no-padding" style="flex: 1; min-width: 0; overflow: hidden;">
     <Image 
-      src={smolTrainingGuide} 
-      alt="The Smol Training Guide: The Secrets to Building World-Class LLMs"
+      src={maintainUnmaintainable} 
+      alt="Maintain the unmaintainable: 1M python loc, 400+ models"
+      zoomable={false}
+      downloadable={false}
     />
     <div class="card-title-container">
-      <h3 class="card-title">The Smol Training Guide: The Secrets to Building World-Class LLMs</h3>
-      <p class="card-subtitle">A practical journey through the challenges, decisions, and messy reality behind training state-of-the-art language models</p>
+      <h3 class="card-title">Maintain the unmaintainable: 1M python loc, 400+ models</h3>
+      <p class="card-subtitle">A peek into software engineering for the transformers library</p>
     </div>
   </a>
   

app/src/content/chapters/demo/components.mdx

@@ -1,6 +1,6 @@
 import { Image as AstroImage } from 'astro:assets';
 import placeholder from '../../assets/image/placeholder.png';
-import audioDemo from '../../assets/audio/audio-example.wav';
+import audioDemo from '../../assets/audio/audio-example.mp3';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
 import Sidenote from '../../../components/Sidenote.astro';
 import Wide from '../../../components/Wide.astro';

app/src/content/chapters/demo/import-content.mdx

@@ -41,34 +41,59 @@ Set `ENABLE_LATEX_CONVERSION=true` in your Hugging Face Space to enable automati
 
 Convert Notion pages into interactive web articles.
 
-### Quick Start
+### Prerequisites
+
+You need **2 things**:
+
+1. **NOTION_TOKEN** — Your Notion integration token
+   - Go to [notion.so/my-integrations](https://www.notion.so/my-integrations)
+   - Create a new integration → copy the token (starts with `secret_` or `ntn_`)
+   
+2. **NOTION_PAGE_ID** — The ID of your Notion page
+   - Open your page in browser: `https://www.notion.so/My-Page-abc123def456`
+   - The ID is the last part after the title: `abc123def456`
+
+### Share Your Page with the Integration
+
+<Note variant="warning">
+**This step is required!** Having a token is not enough — you must explicitly share the page with your integration.
+</Note>
+
+1. Open your Notion page
+2. Click **"..."** (top right corner)
+3. Click **"Connections"** or **"Add connections"**
+4. Select your integration from the list
+5. Confirm access
+
+If your page is nested inside another page or database, you can either share the parent page (the integration will have access to all sub-pages) or share each page individually.
+
+### Option A: Automatic on HF Space
+
+Add these to your Space settings (Settings → Variables and secrets):
+
+| Type | Name | Value |
+|------|------|-------|
+| Secret | `NOTION_TOKEN` | your token |
+| Variable | `NOTION_PAGE_ID` | your page ID |
+| Variable | `ENABLE_NOTION_CONVERSION` | `true` |
+
+Then restart the Space. Every rebuild will fetch the latest Notion content automatically.
+
+### Option B: Local Development
 
 ```bash
 cd app/scripts/notion-importer/
 npm install
 cp env.example .env
-# Edit .env with your Notion token
-# Edit input/pages.json with your page IDs
-node index.mjs
+# Edit .env with NOTION_TOKEN and NOTION_PAGE_ID
+npm run notion:import   # or: node index.mjs
 ```
 
+This rewrites `src/content/article.mdx` with your Notion content. Push to deploy.
+
 ### What Gets Converted
 
-- Images
-- Callouts → `<Sidenote>` components
+- Images (downloaded locally)
+- Callouts → `<Note>` components
 - Enhanced tables and code blocks
-- Smart link conversion
-
-### Prerequisites
-
-- **Node.js** with ESM support
-- **Notion Integration** with token
-- **Shared Pages** with your integration
-
-<Note variant="info">
-💡 **Hugging Face Spaces** — Add your `NOTION_TOKEN` to Space secrets for secure access.
-</Note>
-
-### Docker Deployment
-
-Set `ENABLE_NOTION_CONVERSION=true` in your Hugging Face Space to enable automatic conversion during build.
+- Smart link conversion

app/src/content/chapters/demo/markdown.mdx

@@ -1,5 +1,5 @@
 import placeholder from '../../assets/image/placeholder.png';
-import audioDemo from '../../assets/audio/audio-example.wav';
+import audioDemo from '../../assets/audio/audio-example.mp3';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
 import Sidenote from '../../../components/Sidenote.astro';
 import Wide from '../../../components/Wide.astro';
@@ -453,7 +453,7 @@ Embed audio using `<audio controls src={...} />`.
 <br/>
 <Accordion title="Code example">
 ```mdx
-import audioDemo from './assets/audio/audio-example.wav'
+import audioDemo from './assets/audio/audio-example.mp3'
 
 <audio controls src={audioDemo}/>
 ```

app/src/content/chapters/demo/writing-your-content.mdx

@@ -8,7 +8,7 @@ import FullWidth from '../../../components/FullWidth.astro';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
 import ColorPicker from '../../../components/demo/ColorPicker.astro';
 import Palettes from '../../../components/demo/Palettes.astro';
-import audioDemo from '../../assets/audio/audio-example.wav';
+import audioDemo from '../../assets/audio/audio-example.mp3';
 import Accordion from '../../../components/Accordion.astro';
 
 ## Writing your content

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

@@ -0,0 +1,35 @@
+import Sidenote from "../../../components/Sidenote.astro";
+import Note from "../../../components/Note.astro";
+import Wide from "../../../components/Wide.astro";
+import Stack from "../../../components/Stack.astro";
+
+We went from 0% to 90% success rate on autonomous t-shirt folding, and the biggest lever wasn't the model. It was the data.
+
+<Sidenote>
+  Read time: ~30 minutes. Each section stands on its own feel free to skip to what interests you most.
+</Sidenote>
+
+This isn't a model release. It's the full behind-the-scenes of training an open-source bimanual robot to fold t-shirts. Published demos share insights and show polished results, but the reality is messier, and more iterative.
+
+In this blog we will walk you through the complete journey, not just the final recipe that worked, but also the surprising lessons and the small details that turned out to matter more than we expected. You'll see why cheap 3D-printed leader arms helped more than the large ones, why early data collection is more wasteful than you'd think, and how a trained reward model helped us separate good demonstrations from bad ones.
+
+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, [Open Arms](https://huggingface.co/docs/lerobot/openarm), and Open Arms Mini is now merged into [LeRobot](https://github.com/huggingface/lerobot) and ready for the community to use.
+
+Let's jump in does it actually work?
+
+#### Links
+
+<Stack layout="4-column" gap="small">
+  <a href="https://huggingface.co/lerobot-data-collection/folding_final" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;">**Model** HF Hub</a>
+  <a href="https://huggingface.co/lerobot-data-collection/folding_sarm_reward" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;">**SARM Reward** 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;">**HQ Dataset** HF Hub</a>
+  <a href="https://huggingface.co/datasets/lerobot/full_folding" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;">**Full Dataset** HF Hub</a>
+  <a href="https://github.com/huggingface/lerobot" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;">**Code** LeRobot</a>
+  <a href="https://huggingface.co/docs/lerobot/openarm" className="card" style="padding: 12px 16px; text-align: center; text-decoration: none;">**Open Arms Mini** Repo</a>
+</Stack>
+
+<Sidenote>
+  If you have questions, join our <a href="https://discord.com/invite/q8Dzzpym3f" target="_blank">Discord</a>!
+</Sidenote>

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

@@ -0,0 +1,38 @@
+import Note from "../../../components/Note.astro";
+import Sidenote from "../../../components/Sidenote.astro";
+import Stack from "../../../components/Stack.astro";
+import Accordion from "../../../components/Accordion.astro";
+import Wide from "../../../components/Wide.astro";
+import Video from "../../../components/Video.astro";
+
+## Results
+
+Below are two **uncut, full-length** runs from our best model. No human intervention.
+
+**Level 1: Fold a laid-out t-shirt** (15 min continuous folding)
+
+<Wide>
+<Video src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/lerobot/level1.mp4" />
+</Wide>
+
+**Level 2: Untangle, spread, fold, and place aside** (5 shirts back-to-back)
+
+<Wide>
+<Video src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/lerobot/level2.mp4" />
+</Wide>
+
+### Key Metrics
+
+How well does it actually work? We evaluated our best model (Experiment 2.5) across 20 rollouts.
+
+| Task | Success Rate | Avg. Completion Time |
+|:---|:---:|:---:|
+| **Level 1** Laid-out to Fold | **100%** | **40.8 s** |
+| **Level 2** Messy to Spread to Fold to Place aside | **80%** | **95.9 s** |
+| **Combined** (Total SR) | **90%** | |
+
+<Sidenote>
+  All evaluations filmed and scored from video. 20 rollouts per experiment (10 per level). Full methodology in the Evaluation 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. Let's start from the beginning: the hardware.

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

@@ -0,0 +1,79 @@
+import Note from "../../../components/Note.astro";
+import Sidenote from "../../../components/Sidenote.astro";
+import Stack from "../../../components/Stack.astro";
+import Accordion from "../../../components/Accordion.astro";
+import Image from "../../../components/Image.astro";
+import openArmsImg from "../../assets/image/ogp.webp";
+import footpedalImg from "../../assets/image/footpedal.jpg";
+import openArmMini1 from "../../assets/image/openarm-mini1.jpg";
+import openArmMini2 from "../../assets/image/openarm-mini2.jpg";
+
+## Hardware
+
+First things first: you need a robot. And not just a robot you need a way to control it, a way to see what it's doing, and a way to record demonstrations. Luckily, that's where LeRobot comes in. In this section we walk through every piece of hardware we used. Some of these choices were obvious in advance. Others like the wrist strap and small details turned out to be surprisingly important.
+
+### The Robot: Bimanual Open Arms
+
+We use the **bimanual [Open Arms](https://huggingface.co/docs/lerobot/openarm)**, they are open-source, human-like robot arms developed by [Enetic](https://openarm.dev) and built by [WowRobot](https://shop.wowrobo.com). Three 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 less mental remapping, 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.
+
+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.
+
+<img src={openArmsImg.src} alt="Open Arms bimanual robot setup" style="width:100%; border-radius: 8px;" />
+
+### Teleop Arms: Open Arms Mini
+
+Next challenge: how do you actually control the robot? 
+
+We started with full-size Open Arms 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 something with less inertia so operators could move faster and with more precision and something that works regardless of arm length, since our operators varied significantly in height. This led us to develop the **Open Arms Mini**: small, Feetech-based, 3D-printed leader arms based on the [SO-101](https://github.com/TheRobotStudio/SO-ARM100) design. These gave us:
+- **Less inertia** operators could make quicker and more deliberate motions that cloth folding demands
+- **Arm-length agnostic** works for teleoperators of any size
+- **Incredibly cheap** ~120 EUR per arm, making it very cheap to set up multiple stations
+- **Still support DAgger** lightweight, but strong enough to move during human-in-the-loop correction data collection
+
+One detail turned out to be critical: the **wrist strap**. Without it, wrist rotations were imprecise. With the strap, operators get locked-in wrist control, which is essential for cloth manipulation.
+
+<Note variant="info" emoji="🔗">
+  Open Arms Mini repo (3D print files, BOM, LeRobot integration): <a href="#" target="_blank">github.com/.../opens-mini</a>
+</Note>
+
+<div style="display: flex; gap: 8px; max-width: 70%; margin: 0 auto;">
+  <img src={openArmMini1.src} alt="Open Arms Mini leader arm" style="width: 50%; border-radius: 8px; object-fit: cover;" />
+  <div style="width: 50%; display: flex; flex-direction: column; gap: 8px;">
+    <img src={openArmMini2.src} alt="Open Arms Mini leader arm with wrist strap" style="width: 100%; border-radius: 8px; flex: 1; object-fit: cover;" />
+    <img src={footpedalImg.src} alt="USB foot pedal for episode control" style="width: 100%; border-radius: 8px; flex: 1; object-fit: cover;" />
+  </div>
+</div>
+
+A small thing that makes a surprisingly big difference: when both your hands are on the leader arms, you need a hands-free way to **start and stop episodes**. USB foot pedals solved this elegantly.
+
+### Cameras
+
+We use **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 |
+
+<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>
+</Note>
+
+<Sidenote>
+  The base camera has a slight fisheye effect which is totally fine, as the model learns to handle it.
+</Sidenote>
+
+
+### LeRobot Integration
+
+Integrating Open Arms into LeRobot required adding **CAN-bus protocol** support for the arm's motors, which can be found in the [LeRobot repository](https://github.com/huggingface/lerobot). We also created a UI for the non-technical robot operators, so they don't have to use the CLI 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

@@ -0,0 +1,28 @@
+import Note from "../../../components/Note.astro";
+import Sidenote from "../../../components/Sidenote.astro";
+import Accordion from "../../../components/Accordion.astro";
+
+## 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.
+
+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 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, hesitations, fumbles, and all. Too late and you've wasted precious time.
+
+Another important part is aligning the strategy between operators. Since some parts of folding are very multi-modal (you can fold a t-shirt in many different ways), you need to make sure there is a common strategy. We held brief alignment sessions to standardize the fold sequence before each recording sprint, where we first experimented with different approaches, then shared our learnings and discussed to find the best or most efficient way.
+
+### Tips for Good Data Collection
+
+1. **Practice before you record.** Smooth, deliberate motions beat fast, sloppy 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 learning all these things and collecting data for multiple weeks we ended up with 5,688 episodes across 8 setups. 

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

@@ -0,0 +1,53 @@
+import Note from "../../../components/Note.astro";
+import Sidenote from "../../../components/Sidenote.astro";
+import Wide from "../../../components/Wide.astro";
+import Accordion from "../../../components/Accordion.astro";
+import diversityGridImg from "../../assets/image/lerobot-data-collection_level12_rac_2_2026-02-08_1_grid_15x10.jpg";
+
+## Data and Diversity
+
+Raw episodes are only the beginning. What you do with them before training determines whether your model learns to fold or learns to fumble.
+
+We collected two datasets: a larger dataset containing all episodes, and a curated high-quality dataset which is partly a subset of the larger one, with additional high-quality episodes.
+
+### Dataset Statistics
+
+| Metric | Large 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 almost **10x more compressed** compared to storing raw frames, making it practical to share and stream datasets of this scale.
+
+### Trajectory Diversity Grid
+
+The grid below shows one frame from each of 100 different episodes. Notice the variation in t-shirt color, background, camera viewpoint, and robot height.
+
+<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>
+
+### Data Augmentation and Curation
+
+#### Filtering
+
+We filtered episodes in two ways:
+
+1. **End-state image filtering** discard episodes where the final frame doesn't show a properly folded shirt. If the end result isn't good, the demonstration isn't useful.
+2. **Length-based filtering** using the LeRobot data visualizer to remove outliers. Episodes that are suspiciously short tend to be low quality.
+
+The [LeRobot Data Visualizer](https://huggingface.co/spaces/lerobot/visualize_dataset) was invaluable for inspecting the dataset, spotting outliers, and understanding distributions. If you're collecting robot data, use it you can try it right here with our dataset:
+
+<Wide>
+<div className="card" style="overflow: hidden; border-radius: 10px;">
+  <iframe src="https://lerobot-visualize-dataset.hf.space/?path=%2Flerobot%2Fhigh_quality_folding%2Fepisode_0" width="100%" height="800" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="border: none;"></iframe>
+</div>
+</Wide>
+
+#### SARM Annotation with RABC
+
+We also annotated every episode using our trained **[SARM](https://huggingface.co/docs/lerobot/sarm)** reward model. This gave us continuous scores we could weight during training. More details in [SARM: Our Reward Model](#sarm-our-reward-model).

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

@@ -0,0 +1,82 @@
+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 HtmlEmbed from "../../../components/HtmlEmbed.astro";
+
+## Training
+
+Before we can talk about hyperparameters, we need to understand what the model actually *is* what it takes in, what it produces, and why those choices matter for cloth folding.
+
+### Model Architecture
+
+At its core, the model is a **Vision-Language-Action (VLA)** model. It sees the world through cameras, understands a task description, and outputs motor commands 30 timesteps of joint angle targets and gripper commands, generated via flow matching at 30 Hz.
+
+<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."
+  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 joints 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.
+
+<Sidenote>
+  Flow matching is closely related to diffusion models but uses a simpler, more direct interpolation path between noise and data. 
+</Sidenote>
+
+#### [Real-Time Chunking (RTC)](https://huggingface.co/docs/lerobot/rtc)
+
+A crucial detail for real-world deployment: the model predicts action chunks of 30 steps, but instead of waiting for one chunk to finish before generating the next, RTC generates the next chunk while executing the current one. It "freezes" actions that are guaranteed to execute and "inpaints" the rest, enabling smooth asynchronous execution, speeding up our rollouts by at least a factor of 2.
+
+```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
+```
+
+### Models
+
+We initially trained multiple architectures supported in LeRobot, but we ended up training two VLA architectures on 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 some additional improvements to the flow matching denoising process
+
+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.
+
+### Training Setup
+
+| 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 steps | **200k** (Series 1) / **100k** (Series 2 fine-tune) |
+
+<Sidenote>
+  Multi-GPU training with 8x H100 and gradient accumulation was necessary to fit the large batch sizes needed for stable VLA training.
+</Sidenote>
+
+### Loss Curves
+
+<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>
+
+Our training followed two phases: **Series 1** trained from pretrained base checkpoints on the full dataset for 200k steps, then **Series 2** fine-tuned the best Series 1 checkpoint on curated high-quality data for 100k steps.

app/src/content/chapters/folding/07-evaluation.mdx

@@ -0,0 +1,65 @@
+import Note from "../../../components/Note.astro";
+import Sidenote from "../../../components/Sidenote.astro";
+import Accordion from "../../../components/Accordion.astro";
+import HtmlEmbed from "../../../components/HtmlEmbed.astro";
+
+## Evaluation
+
+**Evaluation is as hard as training.** In robotics on real hardware, no standardized benchmarks exist. If your evaluation protocol is inconsistent, every downstream decision will be wrong.
+
+### Protocol
+
+For every experiment we evaluate on:
+
+- **5 different t-shirts for Level 1** (laid-out to fold)
+- **5 different t-shirts for Level 2** (messy to spread to fold, then place aside)
+
+Each t-shirt 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 eval protocol t-shirts, attempt 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.
+
+<Accordion title="Scoring rubric Level 1 and Level 2">
+
+**Level 1** Laid-out shirt to fold (shirt starts flat):
+
+| Subtask | Points |
+|:---|:---:|
+| Do first horizontal fold | +10 |
+| Do second horizontal fold | +10 |
+| Do third vertical fold | +10 |
+| Do final fold | +10 |
+| Rotate | +10 |
+| **Maximum per rollout** | **50** |
+
+**Level 2** Messy shirt to spread, fold, and place aside:
+
+| Subtask | Points |
+|:---|:---:|
+| Unfold (spread the shirt) | +50 |
+| Fold 1 | +10 |
+| Fold 2 | +10 |
+| Fold 3 | +10 |
+| Fold 4 | +10 |
+| Rotation + Place aside | +10 |
+| **Maximum per rollout** | **100** |
+
+Scores are summed across all rollouts in an experiment. With 10 L1 rollouts (max 50 points each) and 10 L2 rollouts (max 100 points each), the **maximum total score per experiment is 1,500 points**.
+
+</Accordion>
+
+**3. Fold quality** A 1–5 rating of the final fold appearance, averaged across successful rollouts.
+
+**4. Completion time** Seconds to complete Level 1/Level 2, averaged across successful rollouts.
+
+### Statistical uncertainty
+
+With 20 rollouts per experiment, even large apparent differences can be statistically indistinguishable. We report **Wilson 90% confidence intervals** on all success rates and run formal pairwise significance tests. Running 50-100 rollouts per experiment would give tighter estimates but was not feasible for us across 11 experiments on real hardware.

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

@@ -0,0 +1,183 @@
+import Note from "../../../components/Note.astro";
+import Sidenote from "../../../components/Sidenote.astro";
+import Wide from "../../../components/Wide.astro";
+import Accordion from "../../../components/Accordion.astro";
+import HtmlEmbed from "../../../components/HtmlEmbed.astro";
+import sarmEp300 from "../../assets/image/lerobot-data-collection_level2_final_quality3_ep300_progress.gif";
+import sarmEp2500 from "../../assets/image/lerobot-data-collection_level12_rac_2_2026-02-08_1_ep2500_progress.gif";
+import sarmEp2200 from "../../assets/image/lerobot-data-collection_level12_rac_2_2026-02-08_1_ep2200_progress.gif";
+import Stack from "../../../components/Stack.astro";
+
+## Experiments
+
+We ran 11 experiments to understand what *actually* matters. **Series 1** trains from pretrained base checkpoints on the full dataset. **Series 2** finetunes Series 1 checkpoints on curated high-quality data (2.1–2.4 from 1.3, 2.5 from 1.7). One early lesson: **undertraining makes the policy shaky** make sure your model has converged before drawing conclusions.
+
+<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 | Δ (Delta) 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 | Δ (Delta) 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 + Δ (Delta) Action |
+| 2.3 | π0.5 | High-quality + mirrored | 100k | QUANTILES | Fine-tune from 1.3 + Δ (Delta) 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 + Δ (Delta) Action |
+
+</Wide>
+
+All experiments use **[RTC](https://huggingface.co/docs/lerobot/rtc)** (Real-Time Chunking) and **action interpolation** (upsampling from 30 Hz to 90 Hz). The RTC settings used across all experiments:
+
+```python
+policy_cfg.rtc_config = RTCConfig(
+    enabled=True,
+    execution_horizon=20,
+    max_guidance_weight=5.0,
+    prefix_attention_schedule=RTCAttentionSchedule.LINEAR,
+)
+```
+
+With an action queue size of 30 and max action horizon of 20. RTC gave us a ~2x speedup (sometimes even 2.5x), and action interpolation made the robot much quieter and smoother. Both are now available on [LeRobot main](https://github.com/huggingface/lerobot).
+
+### SARM: Our Reward Model
+
+Before diving into the experiments further, let's introduce a key ingredient: **[SARM](https://huggingface.co/docs/lerobot/sarm)** (Stage-Aware Reward Modeling). SARM is a trained reward model that scores trajectories based on how well the robot is progressing toward task completion, it acts as a learned "critic" that predicts whether things are going well or badly.
+
+SARM is trained on our demonstration data to predict 0-1 task progression. The key insight: it correctly identifies **mistakes** (drops in value) and **progress** (increases) in real time.
+
+<Wide>
+<Stack layout="3-column" gap="small">
+  <img src={sarmEp300.src} alt="SARM annotation on episode 300" style="width:100%; border-radius: 8px;" />
+  <img src={sarmEp2500.src} alt="SARM annotation on episode 2500" style="width:100%; border-radius: 8px;" />
+  <img src={sarmEp2200.src} alt="SARM annotation on episode 2200" style="width:100%; border-radius: 8px;" />
+</Stack>
+</Wide>
+
+We use SARM exclusively for **RABC** (Reward-Advantage-Based Conditioning): it scores every episode with a per-timestep quality signal, and during training we weight actions by their contribution to progress. High-reward actions contribute more to the loss, low-reward ones contribute less. Negative progress are clipped to 0. Unlike binary success/fail labels, SARM provides continuous signal on every timestep.
+
+---
+
+### Results Overview
+
+Now let's look at how each experiment actually performed. The charts below show success rates, scores, completion times, and failure modes across all 11 experiments. The pattern is consistent: **Series 2 dominates Series 1**, and within each series, RABC combined with delta actions produces the best results. Explore the charts, then we break down the key findings below.
+
+<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."
+/>
+
+The gap between Series 1 and Series 2 is immediately visible. Experiment 2.5 reaches 90% total success rate (100% L1, 80% L2), while the best Series 1 result tops out at 40%. No Series 1 experiment achieves a single Level 2 success.
+
+<HtmlEmbed
+  id="total-score"
+  src="folding/total-score.html"
+  title="Total Score by Experiment"
+  desc="Overall score (% of maximum 1500) per experiment. The 50% threshold line highlights which experiments achieve at least half the maximum score."
+/>
+
+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. Only two experiments break the 50% threshold, all from Series 2.
+
+<HtmlEmbed
+  id="l1-time-quality"
+  src="folding/l1-time-quality.html"
+  title="Level 1 Completion Time & Fold Quality"
+  desc="Average Level 1 completion time (bars) and fold quality score (dashed line, right axis) per experiment. Lower time and higher quality are better."
+/>
+
+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.
+
+<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."
+/>
+
+The heatmap shows where time is spent. Series 1 experiments are slow across the board, especially on Unfold. Series 2 compresses most subtasks to under 10 seconds, with the remaining time concentrated on Unfold for Level 2, which is inherently the most complex step.
+
+### Where the policies fail
+
+Before interpreting success rates, it helps to understand *how* each experiment fails not just whether it fails.
+
+<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 **Barnard's exact test** on all 55 pairs with **Bonferroni correction** (α = 0.10, per-pair p < 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). 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."
+/>
+
+---
+
+### Key Findings
+
+#### 1. Data quality matters most
+
+This is the finding we're most confident in it held regardless of which confidence level or correction method we used. The best Series 1 result (1.7) achieves 40% total SR. The best Series 2 result (2.5) achieves 90% using the *same architecture*. The pairwise tests cleanly separate these two groups, and no amount of algorithmic tuning within Series 1 came close to closing the gap.
+
+We hypothesise that the root cause is the difference in **multi-modality** between the high-quality and full dataset. The full dataset contains demonstrations with some inconsistent strategies: different grips, unfolding sequences, and timing, while the high-quality dataset enforces a more unified, consistent protocol.
+
+<Note variant="info" emoji="💡">
+  Define the exact task protocol before collecting data. Speed is secondary to consistency and clarity of intent at every step.
+</Note>
+
+#### 2. Delta actions improve performance consistently
+
+Comparing π0.5 without delta actions (1.2: 20% total SR, 40% L1) to π0.5 with delta actions and quantile normalization (1.3: 35% total SR, 70% L1), and then to the full combination in 1.7 (40% total SR, 80% L1), shows that training with delta actions consistently improves performance. The trend is clear and shows up in every comparison we made.
+
+The effect size doesn't separate cleanly at 20 rollouts, but the direction is consistent. **Caveat:** π0.5 is likely pretrained with delta actions, so 1.3 and 1.7 fine-tune in a regime consistent with pretraining, while 1.2 fine-tunes against it.
+
+#### 3. RABC helps especially on long tasks like level 2
+
+RABC on high-quality data produces the two best results overall: 2.2 and 2.5 clearly separate from experiments without it. The effect is strongest on **Level 2**, the longer and harder task — 2.2 reaches 50% L2 SR and 2.5 reaches 80%, while every experiment without RABC on clean data stays at 0%. 
+#### 4. Fine-tuning from a strong checkpoint is the winning recipe
+
+The best results share the same recipe: fine-tune a Series 1 checkpoint on curated high-quality data with RABC and delta actions.
+
+| Experiment | Total SR | L1 SR | L2 SR | Recipe |
+|:---:|:---:|:---:|:---:|:---|
+| 2.5 | **90%** | **100%** | **80%** | 1.7 → HQ + RABC, 100k steps |
+| 2.2 | 75% | 100% | 50% | 1.3 → HQ + RABC, 100k steps |
+| 1.7 | 40% | 80% | 0% | All data, ΔActions + RABC + QUANTILES |
+
+The jump from Series 1 to Series 2 is unambiguous in the statistical analysis — 2.5 and 2.2 clearly separate from the Series 1 group. The Series 1 checkpoint already knows how to fold shirts in general, the high-quality data teaches the correct protocol, and RABC emphasizes the best demonstrations within an already clean dataset.
+
+Both 2.2 and 2.5 were trained for 100k steps. 2.2 fine-tunes from 1.3 while 2.5 fine-tunes from 1.7 (the stronger base). The difference (75% → 90%) likely reflects this stronger starting point. They don't separate from each other in the pairwise tests, suggesting the recipe itself (HQ + RABC + ΔActions) is the key ingredient, with the base checkpoint providing an additional boost.
+
+#### 5. Level 2 requires everything to be right simultaneously
+
+Every Series 1 experiment achieves exactly **0% Level 2 success**. Level 2 only becomes tractable in Series 2, and only with RABC on high-quality data (2.2: 50% L2, 2.5: 80% L2). The 0% → 50–80% jump is as clean a signal as you'll find in a 20-rollout experiment. Level 2 is genuinely harder it requires the policy to have seen consistent, high-quality demonstrations of the full task, because without a reliable starting state after unfolding, the subsequent folds can't succeed.
+
+#### 6. Speed and fold quality both track data quality
+
+Series 1 completes Level 1 in **78–122s**; Series 2 does it in **41–73s**. Fold quality (1–5 scale) hits a ceiling around 2.8 in Series 1, breaking past 3.0 only with high-quality data.
+
+| Experiment | L1 Time | L1 SR | Quality |
+|:---:|:---:|:---:|:---:|
+| 1.1 (π0, all data) | 121.5s | 80% | 2.70 |
+| 1.7 (best S1) | 99.5s | 80% | 2.30 |
+| 2.1 (HQ finetune)* | 57.6s | 70% | 2.80 |
+| 2.2 (HQ + RABC) | 43.2s | 100% | 3.30 |
+| 2.5 (best overall) | **40.8s** | **100%** | **4.10** |
+
+Policies trained on the full dataset learned hesitant motions; the high-quality dataset enforces deliberate, progress oriented actions. Faster completion isn't a separate goal from quality it's a consequence of a clear, unambiguous strategy.
+
+#### 8. What did not work
+
+- **Mirroring augmentation** (2.3): only 5% total SR. It doubles multimodality, making convergence much harder even at 100k steps.

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

@@ -0,0 +1,42 @@
+import Note from "../../../components/Note.astro";
+import Sidenote from "../../../components/Sidenote.astro";
+
+## Learnings
+
+Running all these experiments taught us a lot some expected, some not. Here's what stuck.
+
+### What mattered most
+
+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.
+- **Invest in recording quality early.** More time upfront on clean, consistent recordings pays off more than extra volume.
+- **Record at higher frequency.** We'd record at 50 fps if we did it again. Folding is dynamic and higher record rates capture transitions better.
+- **DAgger is promising.** Targeted corrections for the model's actual failure modes should be very effective pushign the success rate higher. This infrastructure is ready and now also merged into LeRobot.
+
+### 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 based on what we learned:
+
+1. **Define your task protocol first.** Before collecting a single episode, agree on 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.
+3. **Train a reward model.** Use [SARM](https://huggingface.co/docs/lerobot/sarm) to score your episodes and enable RABC during training. This lets the policy focus on the best demonstrations, especially important for longer tasks.
+4. **Train a baseline and watch it fail.** Film the rollouts. Understanding *how* and *where* it breaks tells you exactly what data to collect next.
+5. **Use DAgger for targeted improvement.** Once you have a model that mostly works, collect correction data for its specific failure modes.
+6. **Enable action interpolation and RTC.** This smooths transitions and speeds up execution by blending overlapping predictions and doing asynchronous execution.
+7. **Film every evaluation.** Metrics alone won't tell the full story. Video reveals subtle failure modes that success rate misses, and lets you score quality.
+
+<Note variant="info">
+  All the innovations from this project [SARM](https://huggingface.co/docs/lerobot/sarm), [RTC](https://huggingface.co/docs/lerobot/rtc), DAgger, [Open Arms](https://huggingface.co/docs/lerobot/openarm), and Open Arms Mini are merged into [LeRobot main](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
+
+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:
+
+- **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.
+- **RL support.** Extending LeRobot with new reinforcement learning methods and all the infrastructure needed to train policies online, not just from offline demonstrations.
+- **Democratize robot learning.** Continue to lower the barrier to entry and share every insight, tool, and method with the community.
+
+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, reach out we're happy to run your models on our physical setups and share the results back.

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

@@ -0,0 +1,39 @@
+import HfUser from '../../../components/HfUser.astro';
+import Note from '../../../components/Note.astro';
+
+## Acknowledgments
+
+That's the full story from beginning to where we are now. We hope this guide helps you build on what we've done, and push open-source robotics even further.
+
+This project would not have been possible without the contributions and support of many people.
+
+<div className="hf-user-list">
+  <HfUser username="pepijn223" name="Pepijn Kooijmans" />
+  <HfUser username="aractingi" name="Michel Aractingi" />
+  <HfUser username="imstevenpmwork" name="Steven Palma" />
+  <HfUser username="CarolinePascal" name="Caroline Pascal" />
+  <HfUser username="jadechoghari" name="Jade Choghari" />
+  <HfUser username="lilkm" name="Khalil Meftah" />
+  <HfUser username="nepyope" name="Martino Russi" />
+  <HfUser username="Nico-robot" name="Nicolas Rabault" />
+  <HfUser username="VirgileBatto" name="Virgile Batto" />
+  <HfUser username="thomwolf" name="Thomas Wolf" />
+</div>
+
+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**
+
+### Models & Datasets
+
+- **Best model (Experiment 2.5)** [lerobot-data-collection/folding_final](https://huggingface.co/lerobot-data-collection/folding_final)
+- **SARM reward model** [lerobot-data-collection/folding_sarm_reward](https://huggingface.co/lerobot-data-collection/folding_sarm_reward)
+- **High-quality dataset** [lerobot/high_quality_folding](https://huggingface.co/datasets/lerobot/high_quality_folding)
+- **Full dataset** [lerobot/full_folding](https://huggingface.co/datasets/lerobot/full_folding)
+
+### 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)
+- **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)
+- **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)
+
+*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/chapters/your-first-chapter.mdx

@@ -1,2 +0,0 @@
-# this is an example chapter
-