style: run prettier formatting

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/[org]/[dataset]/[episode]/actions.ts

@@ -28,7 +28,11 @@ export async function fetchEpisodeFrames(
 ): Promise<EpisodeFramesData> {
   const repoId = `${org}/${dataset}`;
   const { version, info } = await getDatasetVersionAndInfo(repoId);
-  return loadAllEpisodeFrameInfo(repoId, version, info as unknown as DatasetMetadata);
+  return loadAllEpisodeFrameInfo(
+    repoId,
+    version,
+    info as unknown as DatasetMetadata,
+  );
 }
 
 export async function fetchCrossEpisodeVariance(
@@ -37,7 +41,12 @@ export async function fetchCrossEpisodeVariance(
 ): Promise<CrossEpisodeVarianceData | null> {
   const repoId = `${org}/${dataset}`;
   const { version, info } = await getDatasetVersionAndInfo(repoId);
-  return loadCrossEpisodeActionVariance(repoId, version, info as unknown as DatasetMetadata, info.fps);
+  return loadCrossEpisodeActionVariance(
+    repoId,
+    version,
+    info as unknown as DatasetMetadata,
+    info.fps,
+  );
 }
 
 export async function fetchEpisodeChartData(
@@ -47,6 +56,10 @@ export async function fetchEpisodeChartData(
 ): Promise<Record<string, number>[]> {
   const repoId = `${org}/${dataset}`;
   const { version, info } = await getDatasetVersionAndInfo(repoId);
-  return loadEpisodeFlatChartData(repoId, version, info as unknown as DatasetMetadata, episodeId);
+  return loadEpisodeFlatChartData(
+    repoId,
+    version,
+    info as unknown as DatasetMetadata,
+    episodeId,
+  );
 }
-

src/app/[org]/[dataset]/[episode]/episode-viewer.tsx

@@ -22,13 +22,25 @@ import {
   type EpisodeFramesData,
   type CrossEpisodeVarianceData,
 } from "./fetch-data";
-import { fetchEpisodeLengthStats, fetchEpisodeFrames, fetchCrossEpisodeVariance } from "./actions";
+import {
+  fetchEpisodeLengthStats,
+  fetchEpisodeFrames,
+  fetchCrossEpisodeVariance,
+} from "./actions";
 
 const URDFViewer = lazy(() => import("@/components/urdf-viewer"));
-const ActionInsightsPanel = lazy(() => import("@/components/action-insights-panel"));
+const ActionInsightsPanel = lazy(
+  () => import("@/components/action-insights-panel"),
+);
 const FilteringPanel = lazy(() => import("@/components/filtering-panel"));
 
-type ActiveTab = "episodes" | "statistics" | "frames" | "insights" | "filtering" | "urdf";
+type ActiveTab =
+  | "episodes"
+  | "statistics"
+  | "frames"
+  | "insights"
+  | "filtering"
+  | "urdf";
 
 export default function EpisodeViewer({
   data,
@@ -65,7 +77,15 @@ export default function EpisodeViewer({
   );
 }
 
-function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: string; dataset?: string }) {
+function EpisodeViewerInner({
+  data,
+  org,
+  dataset,
+}: {
+  data: EpisodeData;
+  org?: string;
+  dataset?: string;
+}) {
   const {
     datasetInfo,
     episodeId,
@@ -82,7 +102,9 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
   const loadStartRef = useRef(performance.now());
   useEffect(() => {
     if (!isLoading) {
-      console.log(`[perf] Loading complete in ${(performance.now() - loadStartRef.current).toFixed(0)}ms (videos: ${videosReady ? '✓' : '…'}, charts: ${chartsReady ? '✓' : '…'})`);
+      console.log(
+        `[perf] Loading complete in ${(performance.now() - loadStartRef.current).toFixed(0)}ms (videos: ${videosReady ? "✓" : "…"}, charts: ${chartsReady ? "✓" : "…"})`,
+      );
     }
   }, [isLoading]);
 
@@ -93,35 +115,56 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
   const [activeTab, setActiveTab] = useState<ActiveTab>(() => {
     if (typeof window !== "undefined") {
       const stored = sessionStorage.getItem("activeTab");
-      if (stored && ["episodes", "statistics", "frames", "insights", "filtering", "urdf"].includes(stored)) {
+      if (
+        stored &&
+        [
+          "episodes",
+          "statistics",
+          "frames",
+          "insights",
+          "filtering",
+          "urdf",
+        ].includes(stored)
+      ) {
         return stored as ActiveTab;
       }
     }
     return "episodes";
   });
   const [, setColumnMinMax] = useState<ColumnMinMax[] | null>(null);
-  const [episodeLengthStats, setEpisodeLengthStats] = useState<EpisodeLengthStats | null>(null);
+  const [episodeLengthStats, setEpisodeLengthStats] =
+    useState<EpisodeLengthStats | null>(null);
   const [statsLoading, setStatsLoading] = useState(false);
   const statsLoadedRef = useRef(false);
-  const [episodeFramesData, setEpisodeFramesData] = useState<EpisodeFramesData | null>(null);
+  const [episodeFramesData, setEpisodeFramesData] =
+    useState<EpisodeFramesData | null>(null);
   const [framesLoading, setFramesLoading] = useState(false);
   const framesLoadedRef = useRef(false);
   const [framesFlaggedOnly, setFramesFlaggedOnly] = useState(() => {
-    if (typeof window !== "undefined") return sessionStorage.getItem("framesFlaggedOnly") === "true";
+    if (typeof window !== "undefined")
+      return sessionStorage.getItem("framesFlaggedOnly") === "true";
     return false;
   });
   const [sidebarFlaggedOnly, setSidebarFlaggedOnly] = useState(() => {
-    if (typeof window !== "undefined") return sessionStorage.getItem("sidebarFlaggedOnly") === "true";
+    if (typeof window !== "undefined")
+      return sessionStorage.getItem("sidebarFlaggedOnly") === "true";
     return false;
   });
-  const [crossEpData, setCrossEpData] = useState<CrossEpisodeVarianceData | null>(null);
+  const [crossEpData, setCrossEpData] =
+    useState<CrossEpisodeVarianceData | null>(null);
   const [insightsLoading, setInsightsLoading] = useState(false);
   const insightsLoadedRef = useRef(false);
 
   // Persist UI state across episode navigations
-  useEffect(() => { sessionStorage.setItem("activeTab", activeTab); }, [activeTab]);
-  useEffect(() => { sessionStorage.setItem("sidebarFlaggedOnly", String(sidebarFlaggedOnly)); }, [sidebarFlaggedOnly]);
-  useEffect(() => { sessionStorage.setItem("framesFlaggedOnly", String(framesFlaggedOnly)); }, [framesFlaggedOnly]);
+  useEffect(() => {
+    sessionStorage.setItem("activeTab", activeTab);
+  }, [activeTab]);
+  useEffect(() => {
+    sessionStorage.setItem("sidebarFlaggedOnly", String(sidebarFlaggedOnly));
+  }, [sidebarFlaggedOnly]);
+  useEffect(() => {
+    sessionStorage.setItem("framesFlaggedOnly", String(framesFlaggedOnly));
+  }, [framesFlaggedOnly]);
 
   const loadStats = () => {
     if (statsLoadedRef.current) return;
@@ -163,7 +206,10 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
     if (activeTab === "statistics") loadStats();
     if (activeTab === "frames") loadFrames();
     if (activeTab === "insights") loadInsights();
-    if (activeTab === "filtering") { loadStats(); loadInsights(); }
+    if (activeTab === "filtering") {
+      loadStats();
+      loadInsights();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -172,7 +218,10 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
     if (tab === "statistics") loadStats();
     if (tab === "frames") loadFrames();
     if (tab === "insights") loadInsights();
-    if (tab === "filtering") { loadStats(); loadInsights(); }
+    if (tab === "filtering") {
+      loadStats();
+      loadInsights();
+    }
   };
 
   // Use context for time sync
@@ -186,7 +235,7 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
     (currentPage - 1) * pageSize,
     currentPage * pageSize,
   );
-  
+
   // Preload adjacent episodes' videos via <link rel="preload"> tags
   useEffect(() => {
     if (!org || !dataset) return;
@@ -370,21 +419,22 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
             <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
           )}
         </button>
-        {hasURDFSupport(datasetInfo.robot_type) && datasetInfo.codebase_version >= "v3.0" && (
-          <button
-            className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-              activeTab === "urdf"
-                ? "text-orange-400"
-                : "text-slate-400 hover:text-slate-200"
-            }`}
-            onClick={() => handleTabChange("urdf")}
-          >
-            3D Replay
-            {activeTab === "urdf" && (
-              <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
-            )}
-          </button>
-        )}
+        {hasURDFSupport(datasetInfo.robot_type) &&
+          datasetInfo.codebase_version >= "v3.0" && (
+            <button
+              className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
+                activeTab === "urdf"
+                  ? "text-orange-400"
+                  : "text-slate-400 hover:text-slate-200"
+              }`}
+              onClick={() => handleTabChange("urdf")}
+            >
+              3D Replay
+              {activeTab === "urdf" && (
+                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
+              )}
+            </button>
+          )}
       </div>
 
       {/* Body: sidebar + content */}
@@ -430,7 +480,9 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
                     href={`https://huggingface.co/datasets/${datasetInfo.repoId}`}
                     target="_blank"
                   >
-                    <p className="text-lg font-semibold">{datasetInfo.repoId}</p>
+                    <p className="text-lg font-semibold">
+                      {datasetInfo.repoId}
+                    </p>
                   </a>
 
                   <p className="font-mono text-lg font-semibold">
@@ -451,14 +503,18 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
               {task && (
                 <div className="mb-6 p-4 bg-slate-800 rounded-lg border border-slate-600">
                   <p className="text-slate-300">
-                    <span className="font-semibold text-slate-100">Language Instruction:</span>
+                    <span className="font-semibold text-slate-100">
+                      Language Instruction:
+                    </span>
                   </p>
                   <div className="mt-2 text-slate-300">
-                    {task.split('\n').map((instruction: string, index: number) => (
-                      <p key={index} className="mb-1">
-                        {instruction}
-                      </p>
-                    ))}
+                    {task
+                      .split("\n")
+                      .map((instruction: string, index: number) => (
+                        <p key={index} className="mb-1">
+                          {instruction}
+                        </p>
+                      ))}
                   </div>
                 </div>
               )}
@@ -484,7 +540,12 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
           )}
 
           {activeTab === "frames" && (
-            <OverviewPanel data={episodeFramesData} loading={framesLoading} flaggedOnly={framesFlaggedOnly} onFlaggedOnlyChange={setFramesFlaggedOnly} />
+            <OverviewPanel
+              data={episodeFramesData}
+              loading={framesLoading}
+              flaggedOnly={framesFlaggedOnly}
+              onFlaggedOnlyChange={setFramesFlaggedOnly}
+            />
           )}
 
           {activeTab === "insights" && (

src/app/[org]/[dataset]/[episode]/fetch-data.ts

@@ -5,7 +5,10 @@ import {
   readParquetAsObjects,
 } from "@/utils/parquetUtils";
 import { pick } from "@/utils/pick";
-import { getDatasetVersionAndInfo, buildVersionedUrl } from "@/utils/versionUtils";
+import {
+  getDatasetVersionAndInfo,
+  buildVersionedUrl,
+} from "@/utils/versionUtils";
 import { PADDING, CHART_CONFIG, EXCLUDED_COLUMNS } from "@/utils/constants";
 import {
   processChartDataGroups,
@@ -121,9 +124,10 @@ export async function getEpisodeData(
     }
 
     console.time(`[perf] getEpisodeData (${version})`);
-    const result = version === "v3.0"
-      ? await getEpisodeDataV3(repoId, version, info, episodeId)
-      : await getEpisodeDataV2(repoId, version, info, episodeId);
+    const result =
+      version === "v3.0"
+        ? await getEpisodeDataV3(repoId, version, info, episodeId)
+        : await getEpisodeDataV2(repoId, version, info, episodeId);
     console.timeEnd(`[perf] getEpisodeData (${version})`);
 
     // Extract camera resolutions from features
@@ -136,7 +140,12 @@ export async function getEpisodeData(
       robot_type: rawInfo.robot_type ?? null,
       codebase_version: rawInfo.codebase_version,
       total_tasks: rawInfo.total_tasks ?? 0,
-      dataset_size_mb: Math.round(((rawInfo.data_files_size_in_mb ?? 0) + (rawInfo.video_files_size_in_mb ?? 0)) * 10) / 10,
+      dataset_size_mb:
+        Math.round(
+          ((rawInfo.data_files_size_in_mb ?? 0) +
+            (rawInfo.video_files_size_in_mb ?? 0)) *
+            10,
+        ) / 10,
       cameras,
     };
 
@@ -157,19 +166,19 @@ export async function getAdjacentEpisodesVideoInfo(
   try {
     const { version, info: rawInfo } = await getDatasetVersionAndInfo(repoId);
     const info = rawInfo as unknown as DatasetMetadata;
-    
+
     const totalEpisodes = info.total_episodes;
     const adjacentVideos: AdjacentEpisodeVideos[] = [];
-    
+
     // Calculate adjacent episode IDs
     for (let offset = -radius; offset <= radius; offset++) {
       if (offset === 0) continue; // Skip current episode
-      
+
       const episodeId = currentEpisodeId + offset;
       if (episodeId >= 0 && episodeId < totalEpisodes) {
         try {
           let videosInfo: VideoInfo[] = [];
-          
+
           if (version === "v3.0") {
             const episodeMetadata = await loadEpisodeMetadataV3Simple(
               repoId,
@@ -185,34 +194,34 @@ export async function getAdjacentEpisodesVideoInfo(
           } else {
             // For v2.x, use simpler video info extraction
             if (info.video_path) {
-            const episode_chunk = Math.floor(0 / 1000);
-            videosInfo = Object.entries(info.features)
-              .filter(([, value]) => value.dtype === "video")
-              .map(([key]) => {
+              const episode_chunk = Math.floor(0 / 1000);
+              videosInfo = Object.entries(info.features)
+                .filter(([, value]) => value.dtype === "video")
+                .map(([key]) => {
                   const videoPath = formatStringWithVars(info.video_path!, {
-                  video_key: key,
+                    video_key: key,
                     episode_chunk: episode_chunk
                       .toString()
                       .padStart(PADDING.CHUNK_INDEX, "0"),
                     episode_index: episodeId
                       .toString()
                       .padStart(PADDING.EPISODE_INDEX, "0"),
+                  });
+                  return {
+                    filename: key,
+                    url: buildVersionedUrl(repoId, version, videoPath),
+                  };
                 });
-                return {
-                  filename: key,
-                  url: buildVersionedUrl(repoId, version, videoPath),
-                };
-              });
             }
           }
-          
+
           adjacentVideos.push({ episodeId, videosInfo });
-                  } catch {
-            // Skip failed episodes silently
-          }
+        } catch {
+          // Skip failed episodes silently
+        }
       }
     }
-    
+
     return adjacentVideos;
   } catch {
     // Return empty array on error
@@ -253,25 +262,25 @@ async function getEpisodeDataV2(
           .map((x) => parseInt(x.trim(), 10))
           .filter((x) => !isNaN(x));
 
-      // Videos information
+  // Videos information
   const videosInfo =
     info.video_path !== null
       ? Object.entries(info.features)
-      .filter(([, value]) => value.dtype === "video")
-      .map(([key]) => {
+          .filter(([, value]) => value.dtype === "video")
+          .map(([key]) => {
             const videoPath = formatStringWithVars(info.video_path!, {
-        video_key: key,
+              video_key: key,
               episode_chunk: episode_chunk
                 .toString()
                 .padStart(PADDING.CHUNK_INDEX, "0"),
               episode_index: episodeId
                 .toString()
                 .padStart(PADDING.EPISODE_INDEX, "0"),
-      });
-      return {
-        filename: key,
-        url: buildVersionedUrl(repoId, version, videoPath),
-      };
+            });
+            return {
+              filename: key,
+              url: buildVersionedUrl(repoId, version, videoPath),
+            };
           })
       : [];
 
@@ -297,7 +306,9 @@ async function getEpisodeDataV2(
     return {
       key,
       value: Array.isArray(column_names)
-        ? column_names.map((name: string) => `${key}${SERIES_NAME_DELIMITER}${name}`)
+        ? column_names.map(
+            (name: string) => `${key}${SERIES_NAME_DELIMITER}${name}`,
+          )
         : Array.from(
             { length: columnNames.find((c) => c.key === key)?.length ?? 1 },
             (_, i) => `${key}${CHART_CONFIG.SERIES_NAME_DELIMITER}${i}`,
@@ -318,49 +329,56 @@ async function getEpisodeDataV2(
 
   const arrayBuffer = await fetchParquetFile(parquetUrl);
   const allData = await readParquetAsObjects(arrayBuffer, []);
-  
+
   // Extract task from language_instruction fields, task field, or tasks.jsonl
   let task: string | undefined;
-  
+
   if (allData.length > 0) {
     const firstRow = allData[0];
     const languageInstructions: string[] = [];
-    
-    if (typeof firstRow.language_instruction === 'string') {
+
+    if (typeof firstRow.language_instruction === "string") {
       languageInstructions.push(firstRow.language_instruction);
     }
-    
+
     let instructionNum = 2;
-    while (typeof firstRow[`language_instruction_${instructionNum}`] === 'string') {
-      languageInstructions.push(firstRow[`language_instruction_${instructionNum}`] as string);
+    while (
+      typeof firstRow[`language_instruction_${instructionNum}`] === "string"
+    ) {
+      languageInstructions.push(
+        firstRow[`language_instruction_${instructionNum}`] as string,
+      );
       instructionNum++;
     }
-    
+
     if (languageInstructions.length > 0) {
-      task = languageInstructions.join('\n');
+      task = languageInstructions.join("\n");
     }
   }
-  
-  if (!task && allData.length > 0 && typeof allData[0].task === 'string') {
+
+  if (!task && allData.length > 0 && typeof allData[0].task === "string") {
     task = allData[0].task;
   }
-  
+
   if (!task && allData.length > 0) {
     try {
       const tasksUrl = buildVersionedUrl(repoId, version, "meta/tasks.jsonl");
       const tasksResponse = await fetch(tasksUrl);
-      
+
       if (tasksResponse.ok) {
         const tasksText = await tasksResponse.text();
         const tasksData = tasksText
           .split("\n")
           .filter((line) => line.trim())
           .map((line) => JSON.parse(line));
-        
+
         if (tasksData && tasksData.length > 0) {
           const taskIndex = allData[0].task_index;
-          const taskIndexNum = typeof taskIndex === 'bigint' ? Number(taskIndex) : taskIndex;
-          const taskData = tasksData.find((t: Record<string, unknown>) => t.task_index === taskIndexNum);
+          const taskIndexNum =
+            typeof taskIndex === "bigint" ? Number(taskIndex) : taskIndex;
+          const taskData = tasksData.find(
+            (t: Record<string, unknown>) => t.task_index === taskIndexNum,
+          );
           if (taskData) {
             task = taskData.task;
           }
@@ -370,7 +388,7 @@ async function getEpisodeDataV2(
       // No tasks metadata file for this v2.x dataset
     }
   }
-  
+
   // Build chart data from already-parsed allData (no second parquet parse)
   const seriesNames = [
     "timestamp",
@@ -385,7 +403,7 @@ async function getEpisodeDataV2(
       if (Array.isArray(rawVal)) {
         rawVal.forEach((v: unknown, i: number) => {
           if (i < col.value.length) obj[col.value[i]] = Number(v);
-    });
+        });
       } else if (rawVal !== undefined) {
         obj[col.value[0]] = Number(rawVal);
       }
@@ -458,7 +476,7 @@ async function getEpisodeDataV3(
     version,
     episodeId,
   );
-  
+
   // Create video info with segmentation using the metadata
   const videosInfo = extractVideoInfoV3WithSegmentation(
     repoId,
@@ -468,10 +486,12 @@ async function getEpisodeDataV3(
   );
 
   // Load episode data for charts
-  const { chartDataGroups, flatChartData, ignoredColumns, task } = await loadEpisodeDataV3(repoId, version, info, episodeMetadata);
+  const { chartDataGroups, flatChartData, ignoredColumns, task } =
+    await loadEpisodeDataV3(repoId, version, info, episodeMetadata);
 
-  const duration = episodeMetadata.length ? episodeMetadata.length / info.fps : 
-                   (episodeMetadata.video_to_timestamp - episodeMetadata.video_from_timestamp);
+  const duration = episodeMetadata.length
+    ? episodeMetadata.length / info.fps
+    : episodeMetadata.video_to_timestamp - episodeMetadata.video_from_timestamp;
 
   return {
     datasetInfo,
@@ -492,96 +512,124 @@ async function loadEpisodeDataV3(
   version: string,
   info: DatasetMetadata,
   episodeMetadata: EpisodeMetadataV3,
-): Promise<{ chartDataGroups: ChartRow[][]; flatChartData: Record<string, number>[]; ignoredColumns: string[]; task?: string }> {
+): Promise<{
+  chartDataGroups: ChartRow[][];
+  flatChartData: Record<string, number>[];
+  ignoredColumns: string[];
+  task?: string;
+}> {
   // Build data file path using chunk and file indices
   const dataChunkIndex = bigIntToNumber(episodeMetadata.data_chunk_index, 0);
   const dataFileIndex = bigIntToNumber(episodeMetadata.data_file_index, 0);
   const dataPath = buildV3DataPath(dataChunkIndex, dataFileIndex);
-  
+
   try {
     const dataUrl = buildVersionedUrl(repoId, version, dataPath);
     const arrayBuffer = await fetchParquetFile(dataUrl);
     const fullData = await readParquetAsObjects(arrayBuffer, []);
-    
+
     // Extract the episode-specific data slice
     const fromIndex = bigIntToNumber(episodeMetadata.dataset_from_index, 0);
-    const toIndex = bigIntToNumber(episodeMetadata.dataset_to_index, fullData.length);
-    
+    const toIndex = bigIntToNumber(
+      episodeMetadata.dataset_to_index,
+      fullData.length,
+    );
+
     // Find the starting index of this parquet file by checking the first row's index
     // This handles the case where episodes are split across multiple parquet files
     let fileStartIndex = 0;
     if (fullData.length > 0 && fullData[0].index !== undefined) {
       fileStartIndex = Number(fullData[0].index);
     }
-    
+
     // Adjust indices to be relative to this file's starting position
     const localFromIndex = Math.max(0, fromIndex - fileStartIndex);
     const localToIndex = Math.min(fullData.length, toIndex - fileStartIndex);
-    
+
     const episodeData = fullData.slice(localFromIndex, localToIndex);
-    
+
     if (episodeData.length === 0) {
-      return { chartDataGroups: [], flatChartData: [], ignoredColumns: [], task: undefined };
+      return {
+        chartDataGroups: [],
+        flatChartData: [],
+        ignoredColumns: [],
+        task: undefined,
+      };
     }
-    
+
     // Convert to the same format as v2.x for compatibility with existing chart code
-    const { chartDataGroups, flatChartData, ignoredColumns } = processEpisodeDataForCharts(episodeData, info, episodeMetadata);
-    
+    const { chartDataGroups, flatChartData, ignoredColumns } =
+      processEpisodeDataForCharts(episodeData, info, episodeMetadata);
+
     // First check for language_instruction fields in the data (preferred)
     let task: string | undefined;
     if (episodeData.length > 0) {
       const languageInstructions: string[] = [];
-      
+
       const extractInstructions = (row: Record<string, unknown>) => {
-        if (typeof row.language_instruction === 'string') {
+        if (typeof row.language_instruction === "string") {
           languageInstructions.push(row.language_instruction);
         }
         let num = 2;
-        while (typeof row[`language_instruction_${num}`] === 'string') {
-          languageInstructions.push(row[`language_instruction_${num}`] as string);
+        while (typeof row[`language_instruction_${num}`] === "string") {
+          languageInstructions.push(
+            row[`language_instruction_${num}`] as string,
+          );
           num++;
         }
       };
 
       extractInstructions(episodeData[0]);
-      
+
       // If no instructions in first row, check middle and last rows
       if (languageInstructions.length === 0 && episodeData.length > 1) {
-        for (const idx of [Math.floor(episodeData.length / 2), episodeData.length - 1]) {
+        for (const idx of [
+          Math.floor(episodeData.length / 2),
+          episodeData.length - 1,
+        ]) {
           extractInstructions(episodeData[idx]);
           if (languageInstructions.length > 0) break;
         }
       }
-      
+
       if (languageInstructions.length > 0) {
-        task = languageInstructions.join('\n');
+        task = languageInstructions.join("\n");
       }
     }
-    
+
     // Fall back to tasks metadata parquet
     if (!task && episodeData.length > 0) {
       try {
-        const tasksUrl = buildVersionedUrl(repoId, version, "meta/tasks.parquet");
+        const tasksUrl = buildVersionedUrl(
+          repoId,
+          version,
+          "meta/tasks.parquet",
+        );
         const tasksArrayBuffer = await fetchParquetFile(tasksUrl);
         const tasksData = await readParquetAsObjects(tasksArrayBuffer, []);
-        
+
         if (tasksData.length > 0) {
           const taskIndexNum = bigIntToNumber(episodeData[0].task_index, -1);
 
           if (taskIndexNum >= 0 && taskIndexNum < tasksData.length) {
             const taskData = tasksData[taskIndexNum];
             const rawTask = taskData.__index_level_0__ ?? taskData.task;
-            task = typeof rawTask === 'string' ? rawTask : undefined;
+            task = typeof rawTask === "string" ? rawTask : undefined;
           }
         }
       } catch {
         // Could not load tasks metadata
       }
     }
-    
+
     return { chartDataGroups, flatChartData, ignoredColumns, task };
   } catch {
-    return { chartDataGroups: [], flatChartData: [], ignoredColumns: [], task: undefined };
+    return {
+      chartDataGroups: [],
+      flatChartData: [],
+      ignoredColumns: [],
+      task: undefined,
+    };
   }
 }
 
@@ -590,17 +638,20 @@ function processEpisodeDataForCharts(
   episodeData: Record<string, unknown>[],
   info: DatasetMetadata,
   episodeMetadata?: EpisodeMetadataV3,
-): { chartDataGroups: ChartRow[][]; flatChartData: Record<string, number>[]; ignoredColumns: string[] } {
-  
+): {
+  chartDataGroups: ChartRow[][];
+  flatChartData: Record<string, number>[];
+  ignoredColumns: string[];
+} {
   // Convert parquet data to chart format
   let seriesNames: string[] = [];
-  
+
   // Dynamically create a mapping from numeric indices to feature names based on actual dataset features
   const v3IndexToFeatureMap: Record<string, string> = {};
-  
+
   // Build mapping based on what features actually exist in the dataset
   const featureKeys = Object.keys(info.features);
-  
+
   // Common feature order for v3.0 datasets (but only include if they exist)
   const expectedFeatureOrder = [
     "observation.state",
@@ -613,7 +664,7 @@ function processEpisodeDataForCharts(
     "index",
     "task_index",
   ];
-  
+
   // Map indices to features that actually exist
   let currentIndex = 0;
   expectedFeatureOrder.forEach((feature) => {
@@ -622,16 +673,17 @@ function processEpisodeDataForCharts(
       currentIndex++;
     }
   });
-  
+
   // Columns to exclude from charts (note: 'task' is intentionally not excluded as we want to access it)
   const excludedColumns = EXCLUDED_COLUMNS.V3 as readonly string[];
 
   // Create columns structure similar to V2.1 for proper hierarchical naming
   const columns: ColumnDef[] = Object.entries(info.features)
-    .filter(([key, value]) => 
-      ["float32", "int32"].includes(value.dtype) && 
-      value.shape.length === 1 && 
-      !excludedColumns.includes(key)
+    .filter(
+      ([key, value]) =>
+        ["float32", "int32"].includes(value.dtype) &&
+        value.shape.length === 1 &&
+        !excludedColumns.includes(key),
     )
     .map(([key, feature]) => {
       let column_names: unknown = feature.names;
@@ -642,7 +694,9 @@ function processEpisodeDataForCharts(
       return {
         key,
         value: Array.isArray(column_names)
-          ? column_names.map((name: string) => `${key}${SERIES_NAME_DELIMITER}${name}`)
+          ? column_names.map(
+              (name: string) => `${key}${SERIES_NAME_DELIMITER}${name}`,
+            )
           : Array.from(
               { length: feature.shape[0] || 1 },
               (_, i) => `${key}${CHART_CONFIG.SERIES_NAME_DELIMITER}${i}`,
@@ -654,19 +708,19 @@ function processEpisodeDataForCharts(
   if (episodeData.length > 0) {
     const firstRow = episodeData[0];
     const allKeys: string[] = [];
-    
+
     Object.entries(firstRow || {}).forEach(([key, value]) => {
       if (key === "timestamp") return; // Skip timestamp, we'll add it separately
-      
+
       // Map numeric key to feature name if available
       const featureName = v3IndexToFeatureMap[key] || key;
-      
+
       // Skip if feature doesn't exist in dataset
       if (!info.features[featureName]) return;
-      
+
       // Skip excluded columns
       if (excludedColumns.includes(featureName)) return;
-      
+
       // Find the matching column definition to get proper names
       const columnDef = columns.find((col) => col.key === featureName);
       if (columnDef && Array.isArray(value) && value.length > 0) {
@@ -684,7 +738,7 @@ function processEpisodeDataForCharts(
         allKeys.push(featureName);
       }
     });
-    
+
     seriesNames = ["timestamp", ...allKeys];
   } else {
     // Fallback to column-based approach like V2.1
@@ -693,7 +747,7 @@ function processEpisodeDataForCharts(
 
   const chartData = episodeData.map((row, index) => {
     const obj: Record<string, number> = {};
-    
+
     // Add timestamp aligned with video timing
     // For v3.0, we need to map the episode data index to the actual video duration
     let videoDuration = episodeData.length; // Fallback to data length
@@ -705,7 +759,7 @@ function processEpisodeDataForCharts(
     }
     obj["timestamp"] =
       (index / Math.max(episodeData.length - 1, 1)) * videoDuration;
-    
+
     // Add all data columns using hierarchical naming
     if (row && typeof row === "object") {
       Object.entries(row).forEach(([key, value]) => {
@@ -713,19 +767,19 @@ function processEpisodeDataForCharts(
           // Timestamp is already handled above
           return;
         }
-        
+
         // Map numeric key to feature name if available
         const featureName = v3IndexToFeatureMap[key] || key;
-        
+
         // Skip if feature doesn't exist in dataset
         if (!info.features[featureName]) return;
-        
+
         // Skip excluded columns
         if (excludedColumns.includes(featureName)) return;
-        
+
         // Find the matching column definition to get proper series names
         const columnDef = columns.find((col) => col.key === featureName);
-        
+
         if (Array.isArray(value) && columnDef) {
           // For array values like observation.state and action, use proper hierarchical naming
           value.forEach((val, idx) => {
@@ -744,7 +798,7 @@ function processEpisodeDataForCharts(
         }
       });
     }
-    
+
     return obj;
   });
 
@@ -794,23 +848,29 @@ function extractVideoInfoV3WithSegmentation(
     const cameraSpecificKeys = Object.keys(episodeMetadata).filter((key) =>
       key.startsWith(`videos/${videoKey}/`),
     );
-    
-    let chunkIndex: number, fileIndex: number, segmentStart: number, segmentEnd: number;
-    
-    const toNum = (v: string | number): number => typeof v === 'string' ? parseFloat(v) || 0 : v;
+
+    let chunkIndex: number,
+      fileIndex: number,
+      segmentStart: number,
+      segmentEnd: number;
+
+    const toNum = (v: string | number): number =>
+      typeof v === "string" ? parseFloat(v) || 0 : v;
 
     if (cameraSpecificKeys.length > 0) {
       chunkIndex = toNum(episodeMetadata[`videos/${videoKey}/chunk_index`]);
       fileIndex = toNum(episodeMetadata[`videos/${videoKey}/file_index`]);
-      segmentStart = toNum(episodeMetadata[`videos/${videoKey}/from_timestamp`]) || 0;
-      segmentEnd = toNum(episodeMetadata[`videos/${videoKey}/to_timestamp`]) || 30;
+      segmentStart =
+        toNum(episodeMetadata[`videos/${videoKey}/from_timestamp`]) || 0;
+      segmentEnd =
+        toNum(episodeMetadata[`videos/${videoKey}/to_timestamp`]) || 30;
     } else {
       chunkIndex = episodeMetadata.video_chunk_index || 0;
       fileIndex = episodeMetadata.video_file_index || 0;
       segmentStart = episodeMetadata.video_from_timestamp || 0;
       segmentEnd = episodeMetadata.video_to_timestamp || 30;
     }
-    
+
     // Convert BigInt to number for timestamps
     const startNum = bigIntToNumber(segmentStart);
     const endNum = bigIntToNumber(segmentEnd);
@@ -821,7 +881,7 @@ function extractVideoInfoV3WithSegmentation(
       bigIntToNumber(fileIndex, 0),
     );
     const fullUrl = buildVersionedUrl(repoId, version, videoPath);
-    
+
     return {
       filename: videoKey,
       url: fullUrl,
@@ -844,11 +904,11 @@ async function loadEpisodeMetadataV3Simple(
 ): Promise<EpisodeMetadataV3> {
   // Pattern: meta/episodes/chunk-{chunk_index:03d}/file-{file_index:03d}.parquet
   // Most datasets have all episodes in chunk-000/file-000, but episodes can be split across files
-  
+
   let episodeRow = null;
   let fileIndex = 0;
   const chunkIndex = 0; // Episodes are typically in chunk-000
-  
+
   // Try loading episode metadata files until we find the episode
   while (!episodeRow) {
     const episodesMetadataPath = buildV3EpisodesMetadataPath(
@@ -864,23 +924,23 @@ async function loadEpisodeMetadataV3Simple(
     try {
       const arrayBuffer = await fetchParquetFile(episodesMetadataUrl);
       const episodesData = await readParquetAsObjects(arrayBuffer, []);
-      
+
       if (episodesData.length === 0) {
         // Empty file, try next one
         fileIndex++;
         continue;
       }
-      
+
       // Find the row for the requested episode by episode_index
       for (const row of episodesData) {
         const parsedRow = parseEpisodeRowSimple(row);
-        
+
         if (parsedRow.episode_index === episodeId) {
           episodeRow = row;
           break;
         }
       }
-      
+
       if (!episodeRow) {
         // Not in this file, try the next one
         fileIndex++;
@@ -892,13 +952,15 @@ async function loadEpisodeMetadataV3Simple(
       );
     }
   }
-  
+
   // Convert the row to a usable format
   return parseEpisodeRowSimple(episodeRow);
 }
 
 // Simple parser for episode row - focuses on key fields for episodes
-function parseEpisodeRowSimple(row: Record<string, unknown>): EpisodeMetadataV3 {
+function parseEpisodeRowSimple(
+  row: Record<string, unknown>,
+): EpisodeMetadataV3 {
   // v3.0 uses named keys in the episode metadata
   if (row && typeof row === "object") {
     // Check if this is v3.0 format with named keys
@@ -906,24 +968,29 @@ function parseEpisodeRowSimple(row: Record<string, unknown>): EpisodeMetadataV3
       // v3.0 format - use named keys
       // Convert BigInt values to numbers
       const toBigIntSafe = (value: unknown): number => {
-        if (typeof value === 'bigint') return Number(value);
-        if (typeof value === 'number') return value;
-        if (typeof value === 'string') return parseInt(value) || 0;
+        if (typeof value === "bigint") return Number(value);
+        if (typeof value === "number") return value;
+        if (typeof value === "string") return parseInt(value) || 0;
         return 0;
       };
-      
+
       const toNumSafe = (value: unknown): number => {
-        if (typeof value === 'number') return value;
-        if (typeof value === 'bigint') return Number(value);
-        if (typeof value === 'string') return parseFloat(value) || 0;
+        if (typeof value === "number") return value;
+        if (typeof value === "bigint") return Number(value);
+        if (typeof value === "string") return parseFloat(value) || 0;
         return 0;
       };
 
       // Handle video metadata - look for video-specific keys
-      const videoKeys = Object.keys(row).filter(key => key.includes('videos/') && key.includes('/chunk_index'));
-      let videoChunkIndex = 0, videoFileIndex = 0, videoFromTs = 0, videoToTs = 30;
+      const videoKeys = Object.keys(row).filter(
+        (key) => key.includes("videos/") && key.includes("/chunk_index"),
+      );
+      let videoChunkIndex = 0,
+        videoFileIndex = 0,
+        videoFromTs = 0,
+        videoToTs = 30;
       if (videoKeys.length > 0) {
-        const videoBaseName = videoKeys[0].replace('/chunk_index', '');
+        const videoBaseName = videoKeys[0].replace("/chunk_index", "");
         videoChunkIndex = toBigIntSafe(row[`${videoBaseName}/chunk_index`]);
         videoFileIndex = toBigIntSafe(row[`${videoBaseName}/file_index`]);
         videoFromTs = toNumSafe(row[`${videoBaseName}/from_timestamp`]);
@@ -931,46 +998,55 @@ function parseEpisodeRowSimple(row: Record<string, unknown>): EpisodeMetadataV3
       }
 
       const episodeData: EpisodeMetadataV3 = {
-        episode_index: toBigIntSafe(row['episode_index']),
-        data_chunk_index: toBigIntSafe(row['data/chunk_index']),
-        data_file_index: toBigIntSafe(row['data/file_index']),
-        dataset_from_index: toBigIntSafe(row['dataset_from_index']),
-        dataset_to_index: toBigIntSafe(row['dataset_to_index']),
-        length: toBigIntSafe(row['length']),
+        episode_index: toBigIntSafe(row["episode_index"]),
+        data_chunk_index: toBigIntSafe(row["data/chunk_index"]),
+        data_file_index: toBigIntSafe(row["data/file_index"]),
+        dataset_from_index: toBigIntSafe(row["dataset_from_index"]),
+        dataset_to_index: toBigIntSafe(row["dataset_to_index"]),
+        length: toBigIntSafe(row["length"]),
         video_chunk_index: videoChunkIndex,
         video_file_index: videoFileIndex,
         video_from_timestamp: videoFromTs,
         video_to_timestamp: videoToTs,
       };
-      
+
       // Store per-camera metadata for extractVideoInfoV3WithSegmentation
-      Object.keys(row).forEach(key => {
-        if (key.startsWith('videos/')) {
+      Object.keys(row).forEach((key) => {
+        if (key.startsWith("videos/")) {
           const val = row[key];
-          episodeData[key] = typeof val === 'bigint' ? Number(val) : (typeof val === 'number' || typeof val === 'string' ? val : 0);
+          episodeData[key] =
+            typeof val === "bigint"
+              ? Number(val)
+              : typeof val === "number" || typeof val === "string"
+                ? val
+                : 0;
         }
       });
-      
+
       return episodeData as EpisodeMetadataV3;
     } else {
       // Fallback to numeric keys for compatibility
       const toNum = (v: unknown, fallback = 0): number =>
-        typeof v === 'number' ? v : typeof v === 'bigint' ? Number(v) : fallback;
+        typeof v === "number"
+          ? v
+          : typeof v === "bigint"
+            ? Number(v)
+            : fallback;
       return {
-        episode_index: toNum(row['0']),
-        data_chunk_index: toNum(row['1']),
-        data_file_index: toNum(row['2']),
-        dataset_from_index: toNum(row['3']),
-        dataset_to_index: toNum(row['4']),
-        video_chunk_index: toNum(row['5']),
-        video_file_index: toNum(row['6']),
-        video_from_timestamp: toNum(row['7']),
-        video_to_timestamp: toNum(row['8'], 30),
-        length: toNum(row['9'], 30),
+        episode_index: toNum(row["0"]),
+        data_chunk_index: toNum(row["1"]),
+        data_file_index: toNum(row["2"]),
+        dataset_from_index: toNum(row["3"]),
+        dataset_to_index: toNum(row["4"]),
+        video_chunk_index: toNum(row["5"]),
+        video_file_index: toNum(row["6"]),
+        video_from_timestamp: toNum(row["7"]),
+        video_to_timestamp: toNum(row["8"], 30),
+        length: toNum(row["9"], 30),
       };
     }
   }
-  
+
   // Fallback if parsing fails
   const fallback = {
     episode_index: 0,
@@ -984,18 +1060,18 @@ function parseEpisodeRowSimple(row: Record<string, unknown>): EpisodeMetadataV3
     video_to_timestamp: 30,
     length: 30,
   };
-  
+
   return fallback;
 }
 
-
-
 // ─── Stats computation ───────────────────────────────────────────
 
 /**
  * Compute per-column min/max values from the current episode's chart data.
  */
-export function computeColumnMinMax(chartDataGroups: ChartRow[][]): ColumnMinMax[] {
+export function computeColumnMinMax(
+  chartDataGroups: ChartRow[][],
+): ColumnMinMax[] {
   const stats: Record<string, { min: number; max: number }> = {};
 
   for (const group of chartDataGroups) {
@@ -1057,7 +1133,10 @@ export async function loadAllEpisodeLengthsV3(
         if (rows.length === 0 && fileIndex > 0) break;
         for (const row of rows) {
           const parsed = parseEpisodeRowSimple(row);
-          allEpisodes.push({ index: parsed.episode_index, length: parsed.length });
+          allEpisodes.push({
+            index: parsed.episode_index,
+            length: parsed.length,
+          });
         }
         fileIndex++;
       } catch {
@@ -1073,7 +1152,9 @@ export async function loadAllEpisodeLengthsV3(
       lengthSeconds: Math.round((ep.length / fps) * 100) / 100,
     }));
 
-    const sortedByLength = [...withSeconds].sort((a, b) => a.lengthSeconds - b.lengthSeconds);
+    const sortedByLength = [...withSeconds].sort(
+      (a, b) => a.lengthSeconds - b.lengthSeconds,
+    );
     const shortestEpisodes = sortedByLength.slice(0, 5);
     const longestEpisodes = sortedByLength.slice(-5).reverse();
 
@@ -1083,11 +1164,13 @@ export async function loadAllEpisodeLengthsV3(
 
     const sorted = [...lengths].sort((a, b) => a - b);
     const mid = Math.floor(sorted.length / 2);
-    const median = sorted.length % 2 === 0
-      ? Math.round(((sorted[mid - 1] + sorted[mid]) / 2) * 100) / 100
-      : sorted[mid];
+    const median =
+      sorted.length % 2 === 0
+        ? Math.round(((sorted[mid - 1] + sorted[mid]) / 2) * 100) / 100
+        : sorted[mid];
 
-    const variance = lengths.reduce((acc, l) => acc + (l - mean) ** 2, 0) / lengths.length;
+    const variance =
+      lengths.reduce((acc, l) => acc + (l - mean) ** 2, 0) / lengths.length;
     const std = Math.round(Math.sqrt(variance) * 100) / 100;
 
     // Build histogram
@@ -1096,25 +1179,39 @@ export async function loadAllEpisodeLengthsV3(
 
     if (histMax === histMin) {
       return {
-        shortestEpisodes, longestEpisodes, allEpisodeLengths: withSeconds,
-        meanEpisodeLength: mean, medianEpisodeLength: median, stdEpisodeLength: std,
-        episodeLengthHistogram: [{ binLabel: `${histMin.toFixed(1)}s`, count: lengths.length }],
+        shortestEpisodes,
+        longestEpisodes,
+        allEpisodeLengths: withSeconds,
+        meanEpisodeLength: mean,
+        medianEpisodeLength: median,
+        stdEpisodeLength: std,
+        episodeLengthHistogram: [
+          { binLabel: `${histMin.toFixed(1)}s`, count: lengths.length },
+        ],
       };
     }
 
     const p1 = sorted[Math.floor(sorted.length * 0.01)];
     const p99 = sorted[Math.ceil(sorted.length * 0.99) - 1];
-    const range = (p99 - p1) || 1;
+    const range = p99 - p1 || 1;
 
-    const targetBins = Math.max(10, Math.min(50, Math.ceil(Math.log2(lengths.length) + 1)));
+    const targetBins = Math.max(
+      10,
+      Math.min(50, Math.ceil(Math.log2(lengths.length) + 1)),
+    );
     const rawBinWidth = range / targetBins;
     const magnitude = Math.pow(10, Math.floor(Math.log10(rawBinWidth)));
     const niceSteps = [1, 2, 2.5, 5, 10];
-    const niceBinWidth = niceSteps.map((s) => s * magnitude).find((w) => w >= rawBinWidth) ?? rawBinWidth;
+    const niceBinWidth =
+      niceSteps.map((s) => s * magnitude).find((w) => w >= rawBinWidth) ??
+      rawBinWidth;
 
     const niceMin = Math.floor(p1 / niceBinWidth) * niceBinWidth;
     const niceMax = Math.ceil(p99 / niceBinWidth) * niceBinWidth;
-    const actualBinCount = Math.max(1, Math.round((niceMax - niceMin) / niceBinWidth));
+    const actualBinCount = Math.max(
+      1,
+      Math.round((niceMax - niceMin) / niceBinWidth),
+    );
     const bins = Array.from({ length: actualBinCount }, () => 0);
 
     for (const len of lengths) {
@@ -1131,8 +1228,12 @@ export async function loadAllEpisodeLengthsV3(
     });
 
     return {
-      shortestEpisodes, longestEpisodes, allEpisodeLengths: withSeconds,
-      meanEpisodeLength: mean, medianEpisodeLength: median, stdEpisodeLength: std,
+      shortestEpisodes,
+      longestEpisodes,
+      allEpisodeLengths: withSeconds,
+      meanEpisodeLength: mean,
+      medianEpisodeLength: median,
+      stdEpisodeLength: std,
       episodeLengthHistogram: histogram,
     };
   } catch {
@@ -1149,7 +1250,9 @@ export async function loadAllEpisodeFrameInfo(
   version: string,
   info: DatasetMetadata,
 ): Promise<EpisodeFramesData> {
-  const videoFeatures = Object.entries(info.features).filter(([, f]) => f.dtype === "video");
+  const videoFeatures = Object.entries(info.features).filter(
+    ([, f]) => f.dtype === "video",
+  );
   if (videoFeatures.length === 0) return { cameras: [], framesByCamera: {} };
 
   const cameras = videoFeatures.map(([key]) => key);
@@ -1161,16 +1264,30 @@ export async function loadAllEpisodeFrameInfo(
     while (true) {
       const path = `meta/episodes/chunk-000/file-${fileIndex.toString().padStart(3, "0")}.parquet`;
       try {
-        const buf = await fetchParquetFile(buildVersionedUrl(repoId, version, path));
+        const buf = await fetchParquetFile(
+          buildVersionedUrl(repoId, version, path),
+        );
         const rows = await readParquetAsObjects(buf, []);
         if (rows.length === 0 && fileIndex > 0) break;
         for (const row of rows) {
           const epIdx = Number(row["episode_index"] ?? 0);
           for (const cam of cameras) {
-            const cIdx = Number(row[`videos/${cam}/chunk_index`] ?? row["video_chunk_index"] ?? 0);
-            const fIdx = Number(row[`videos/${cam}/file_index`] ?? row["video_file_index"] ?? 0);
-            const fromTs = Number(row[`videos/${cam}/from_timestamp`] ?? row["video_from_timestamp"] ?? 0);
-            const toTs = Number(row[`videos/${cam}/to_timestamp`] ?? row["video_to_timestamp"] ?? 30);
+            const cIdx = Number(
+              row[`videos/${cam}/chunk_index`] ?? row["video_chunk_index"] ?? 0,
+            );
+            const fIdx = Number(
+              row[`videos/${cam}/file_index`] ?? row["video_file_index"] ?? 0,
+            );
+            const fromTs = Number(
+              row[`videos/${cam}/from_timestamp`] ??
+                row["video_from_timestamp"] ??
+                0,
+            );
+            const toTs = Number(
+              row[`videos/${cam}/to_timestamp`] ??
+                row["video_to_timestamp"] ??
+                30,
+            );
             const videoPath = `videos/${cam}/chunk-${cIdx.toString().padStart(3, "0")}/file-${fIdx.toString().padStart(3, "0")}.mp4`;
             framesByCamera[cam].push({
               episodeIndex: epIdx,
@@ -1210,7 +1327,10 @@ export async function loadAllEpisodeFrameInfo(
 
 // ─── Cross-episode action variance ──────────────────────────────
 
-export type LowMovementEpisode = { episodeIndex: number; totalMovement: number };
+export type LowMovementEpisode = {
+  episodeIndex: number;
+  totalMovement: number;
+};
 
 export type AggVelocityStat = {
   name: string;
@@ -1271,10 +1391,16 @@ export async function loadCrossEpisodeActionVariance(
   maxEpisodes = 500,
   numTimeBins = 50,
 ): Promise<CrossEpisodeVarianceData | null> {
-  const actionEntry = Object.entries(info.features)
-    .find(([key, f]) => key === "action" && f.shape.length === 1);
+  const actionEntry = Object.entries(info.features).find(
+    ([key, f]) => key === "action" && f.shape.length === 1,
+  );
   if (!actionEntry) {
-    console.warn("[cross-ep] No action feature found. Available features:", Object.entries(info.features).map(([k, f]) => `${k}(${f.dtype}, shape=${JSON.stringify(f.shape)})`).join(", "));
+    console.warn(
+      "[cross-ep] No action feature found. Available features:",
+      Object.entries(info.features)
+        .map(([k, f]) => `${k}(${f.dtype}, shape=${JSON.stringify(f.shape)})`)
+        .join(", "),
+    );
     return null;
   }
 
@@ -1286,17 +1412,27 @@ export async function loadCrossEpisodeActionVariance(
     names = Object.values(names)[0];
   }
   const actionNames = Array.isArray(names)
-    ? (names as string[]).map(n => `${actionKey}${SERIES_NAME_DELIMITER}${n}`)
-    : Array.from({ length: actionDim }, (_, i) => `${actionKey}${SERIES_NAME_DELIMITER}${i}`);
+    ? (names as string[]).map((n) => `${actionKey}${SERIES_NAME_DELIMITER}${n}`)
+    : Array.from(
+        { length: actionDim },
+        (_, i) => `${actionKey}${SERIES_NAME_DELIMITER}${i}`,
+      );
 
   // State feature for alignment computation
-  const stateEntry = Object.entries(info.features)
-    .find(([key, f]) => key === "observation.state" && f.shape.length === 1);
+  const stateEntry = Object.entries(info.features).find(
+    ([key, f]) => key === "observation.state" && f.shape.length === 1,
+  );
   const stateKey = stateEntry?.[0] ?? null;
   const stateDim = stateEntry?.[1].shape[0] ?? 0;
 
   // Collect episode metadata
-  type EpMeta = { index: number; chunkIdx: number; fileIdx: number; from: number; to: number };
+  type EpMeta = {
+    index: number;
+    chunkIdx: number;
+    fileIdx: number;
+    from: number;
+    to: number;
+  };
   const allEps: EpMeta[] = [];
 
   if (version === "v3.0") {
@@ -1304,7 +1440,9 @@ export async function loadCrossEpisodeActionVariance(
     while (true) {
       const path = `meta/episodes/chunk-000/file-${fileIndex.toString().padStart(3, "0")}.parquet`;
       try {
-        const buf = await fetchParquetFile(buildVersionedUrl(repoId, version, path));
+        const buf = await fetchParquetFile(
+          buildVersionedUrl(repoId, version, path),
+        );
         const rows = await readParquetAsObjects(buf, []);
         if (rows.length === 0 && fileIndex > 0) break;
         for (const row of rows) {
@@ -1318,7 +1456,9 @@ export async function loadCrossEpisodeActionVariance(
           });
         }
         fileIndex++;
-      } catch { break; }
+      } catch {
+        break;
+      }
     }
   } else {
     for (let i = 0; i < info.total_episodes; i++) {
@@ -1327,17 +1467,24 @@ export async function loadCrossEpisodeActionVariance(
   }
 
   if (allEps.length < 2) {
-    console.warn(`[cross-ep] Only ${allEps.length} episode(s) found in metadata, need ≥2`);
+    console.warn(
+      `[cross-ep] Only ${allEps.length} episode(s) found in metadata, need ≥2`,
+    );
     return null;
   }
-  console.log(`[cross-ep] Found ${allEps.length} episodes in metadata, sampling up to ${maxEpisodes}`);
+  console.log(
+    `[cross-ep] Found ${allEps.length} episodes in metadata, sampling up to ${maxEpisodes}`,
+  );
 
   // Sample episodes evenly
-  const sampled = allEps.length <= maxEpisodes
-    ? allEps
-    : Array.from({ length: maxEpisodes }, (_, i) =>
-        allEps[Math.round((i * (allEps.length - 1)) / (maxEpisodes - 1))]
-      );
+  const sampled =
+    allEps.length <= maxEpisodes
+      ? allEps
+      : Array.from(
+          { length: maxEpisodes },
+          (_, i) =>
+            allEps[Math.round((i * (allEps.length - 1)) / (maxEpisodes - 1))],
+        );
 
   // Load action (and state) data per episode
   const episodeActions: { index: number; actions: number[][] }[] = [];
@@ -1355,9 +1502,14 @@ export async function loadCrossEpisodeActionVariance(
       const ep0 = eps[0];
       const dataPath = `data/chunk-${ep0.chunkIdx.toString().padStart(3, "0")}/file-${ep0.fileIdx.toString().padStart(3, "0")}.parquet`;
       try {
-        const buf = await fetchParquetFile(buildVersionedUrl(repoId, version, dataPath));
+        const buf = await fetchParquetFile(
+          buildVersionedUrl(repoId, version, dataPath),
+        );
         const rows = await readParquetAsObjects(buf, []);
-        const fileStart = rows.length > 0 && rows[0].index !== undefined ? Number(rows[0].index) : 0;
+        const fileStart =
+          rows.length > 0 && rows[0].index !== undefined
+            ? Number(rows[0].index)
+            : 0;
 
         for (const ep of eps) {
           const localFrom = Math.max(0, ep.from - fileStart);
@@ -1374,10 +1526,14 @@ export async function loadCrossEpisodeActionVariance(
           }
           if (actions.length > 0) {
             episodeActions.push({ index: ep.index, actions });
-            episodeStates.push(stateKey && states.length === actions.length ? states : null);
+            episodeStates.push(
+              stateKey && states.length === actions.length ? states : null,
+            );
           }
         }
-      } catch { /* skip file */ }
+      } catch {
+        /* skip file */
+      }
     }
   } else {
     const chunkSize = info.chunks_size || 1000;
@@ -1388,7 +1544,9 @@ export async function loadCrossEpisodeActionVariance(
         episode_index: ep.index.toString().padStart(6, "0"),
       });
       try {
-        const buf = await fetchParquetFile(buildVersionedUrl(repoId, version, dataPath));
+        const buf = await fetchParquetFile(
+          buildVersionedUrl(repoId, version, dataPath),
+        );
         const rows = await readParquetAsObjects(buf, []);
         const actions: number[][] = [];
         const states: number[][] = [];
@@ -1411,22 +1569,39 @@ export async function loadCrossEpisodeActionVariance(
         }
         if (actions.length > 0) {
           episodeActions.push({ index: ep.index, actions });
-          episodeStates.push(stateKey && states.length === actions.length ? states : null);
+          episodeStates.push(
+            stateKey && states.length === actions.length ? states : null,
+          );
         }
-      } catch { /* skip */ }
+      } catch {
+        /* skip */
+      }
     }
   }
 
   if (episodeActions.length < 2) {
-    console.warn(`[cross-ep] Only ${episodeActions.length} episode(s) had loadable action data out of ${sampled.length} sampled`);
+    console.warn(
+      `[cross-ep] Only ${episodeActions.length} episode(s) had loadable action data out of ${sampled.length} sampled`,
+    );
     return null;
   }
-  console.log(`[cross-ep] Loaded action data for ${episodeActions.length}/${sampled.length} episodes`);
+  console.log(
+    `[cross-ep] Loaded action data for ${episodeActions.length}/${sampled.length} episodes`,
+  );
 
   // Resample each episode to numTimeBins and compute variance
-  const timeBins = Array.from({ length: numTimeBins }, (_, i) => i / (numTimeBins - 1));
-  const sums = Array.from({ length: numTimeBins }, () => new Float64Array(actionDim));
-  const sumsSq = Array.from({ length: numTimeBins }, () => new Float64Array(actionDim));
+  const timeBins = Array.from(
+    { length: numTimeBins },
+    (_, i) => i / (numTimeBins - 1),
+  );
+  const sums = Array.from(
+    { length: numTimeBins },
+    () => new Float64Array(actionDim),
+  );
+  const sumsSq = Array.from(
+    { length: numTimeBins },
+    () => new Float64Array(actionDim),
+  );
   const counts = new Uint32Array(numTimeBins);
 
   for (const { actions: epActions } of episodeActions) {
@@ -1448,7 +1623,10 @@ export async function loadCrossEpisodeActionVariance(
     const row: number[] = [];
     const n = counts[b];
     for (let d = 0; d < actionDim; d++) {
-      if (n < 2) { row.push(0); continue; }
+      if (n < 2) {
+        row.push(0);
+        continue;
+      }
       const mean = sums[b][d] / n;
       row.push(sumsSq[b][d] / n - mean * mean);
     }
@@ -1456,26 +1634,34 @@ export async function loadCrossEpisodeActionVariance(
   }
 
   // Per-episode average movement per frame: mean L2 norm of frame-to-frame action deltas
-  const movementScores: LowMovementEpisode[] = episodeActions.map(({ index, actions: ep }) => {
-    if (ep.length < 2) return { episodeIndex: index, totalMovement: 0 };
-    let total = 0;
-    for (let t = 1; t < ep.length; t++) {
-      let sumSq = 0;
-      for (let d = 0; d < actionDim; d++) {
-        const delta = (ep[t][d] ?? 0) - (ep[t - 1][d] ?? 0);
-        sumSq += delta * delta;
+  const movementScores: LowMovementEpisode[] = episodeActions.map(
+    ({ index, actions: ep }) => {
+      if (ep.length < 2) return { episodeIndex: index, totalMovement: 0 };
+      let total = 0;
+      for (let t = 1; t < ep.length; t++) {
+        let sumSq = 0;
+        for (let d = 0; d < actionDim; d++) {
+          const delta = (ep[t][d] ?? 0) - (ep[t - 1][d] ?? 0);
+          sumSq += delta * delta;
+        }
+        total += Math.sqrt(sumSq);
       }
-      total += Math.sqrt(sumSq);
-    }
-    const avgPerFrame = total / (ep.length - 1);
-    return { episodeIndex: index, totalMovement: Math.round(avgPerFrame * 10000) / 10000 };
-  });
+      const avgPerFrame = total / (ep.length - 1);
+      return {
+        episodeIndex: index,
+        totalMovement: Math.round(avgPerFrame * 10000) / 10000,
+      };
+    },
+  );
 
   movementScores.sort((a, b) => a.totalMovement - b.totalMovement);
   const lowMovementEpisodes = movementScores.slice(0, 10);
 
   // Aggregated velocity stats: pool deltas from all episodes
-  const shortName = (k: string) => { const p = k.split(SERIES_NAME_DELIMITER); return p.length > 1 ? p[p.length - 1] : k; };
+  const shortName = (k: string) => {
+    const p = k.split(SERIES_NAME_DELIMITER);
+    return p.length > 1 ? p[p.length - 1] : k;
+  };
 
   const aggVelocity: AggVelocityStat[] = (() => {
     const binCount = 30;
@@ -1486,79 +1672,127 @@ export async function loadCrossEpisodeActionVariance(
           deltas.push((ep[t][d] ?? 0) - (ep[t - 1][d] ?? 0));
         }
       }
-      if (deltas.length === 0) return { name: shortName(actionNames[d]), std: 0, maxAbs: 0, bins: [], lo: 0, hi: 0 };
-      let sum = 0, maxAbs = 0, lo = Infinity, hi = -Infinity;
-      for (const v of deltas) { sum += v; const a = Math.abs(v); if (a > maxAbs) maxAbs = a; if (v < lo) lo = v; if (v > hi) hi = v; }
+      if (deltas.length === 0)
+        return {
+          name: shortName(actionNames[d]),
+          std: 0,
+          maxAbs: 0,
+          bins: [],
+          lo: 0,
+          hi: 0,
+        };
+      let sum = 0,
+        maxAbs = 0,
+        lo = Infinity,
+        hi = -Infinity;
+      for (const v of deltas) {
+        sum += v;
+        const a = Math.abs(v);
+        if (a > maxAbs) maxAbs = a;
+        if (v < lo) lo = v;
+        if (v > hi) hi = v;
+      }
       const mean = sum / deltas.length;
-      let varSum = 0; for (const v of deltas) varSum += (v - mean) ** 2;
+      let varSum = 0;
+      for (const v of deltas) varSum += (v - mean) ** 2;
       const std = Math.sqrt(varSum / deltas.length);
       const range = hi - lo || 1;
       const binW = range / binCount;
       const bins = new Array(binCount).fill(0);
-      for (const v of deltas) { let b = Math.floor((v - lo) / binW); if (b >= binCount) b = binCount - 1; bins[b]++; }
+      for (const v of deltas) {
+        let b = Math.floor((v - lo) / binW);
+        if (b >= binCount) b = binCount - 1;
+        bins[b]++;
+      }
       return { name: shortName(actionNames[d]), std, maxAbs, bins, lo, hi };
     });
   })();
 
   // Aggregated autocorrelation: average per-episode ACFs
   const aggAutocorrelation: AggAutocorrelation | null = (() => {
-    const maxLag = Math.min(100, Math.floor(
-      episodeActions.reduce((min, e) => Math.min(min, e.actions.length), Infinity) / 2
-    ));
+    const maxLag = Math.min(
+      100,
+      Math.floor(
+        episodeActions.reduce(
+          (min, e) => Math.min(min, e.actions.length),
+          Infinity,
+        ) / 2,
+      ),
+    );
     if (maxLag < 2) return null;
 
-    const avgAcf: number[][] = Array.from({ length: actionDim }, () => new Array(maxLag).fill(0));
+    const avgAcf: number[][] = Array.from({ length: actionDim }, () =>
+      new Array(maxLag).fill(0),
+    );
     let epCount = 0;
 
     for (const { actions: ep } of episodeActions) {
       if (ep.length < maxLag * 2) continue;
       epCount++;
       for (let d = 0; d < actionDim; d++) {
-        const vals = ep.map(row => row[d] ?? 0);
+        const vals = ep.map((row) => row[d] ?? 0);
         const n = vals.length;
         const m = vals.reduce((a, b) => a + b, 0) / n;
-        const centered = vals.map(v => v - m);
+        const centered = vals.map((v) => v - m);
         const vari = centered.reduce((a, v) => a + v * v, 0);
         if (vari === 0) continue;
         for (let lag = 1; lag <= maxLag; lag++) {
           let s = 0;
-          for (let t = 0; t < n - lag; t++) s += centered[t] * centered[t + lag];
+          for (let t = 0; t < n - lag; t++)
+            s += centered[t] * centered[t + lag];
           avgAcf[d][lag - 1] += s / vari;
         }
       }
     }
 
     if (epCount === 0) return null;
-    for (let d = 0; d < actionDim; d++) for (let l = 0; l < maxLag; l++) avgAcf[d][l] /= epCount;
+    for (let d = 0; d < actionDim; d++)
+      for (let l = 0; l < maxLag; l++) avgAcf[d][l] /= epCount;
 
     const shortKeys = actionNames.map(shortName);
     const chartData = Array.from({ length: maxLag }, (_, lag) => {
-      const row: Record<string, number> = { lag: lag + 1, time: (lag + 1) / fps };
-      shortKeys.forEach((k, d) => { row[k] = avgAcf[d][lag]; });
+      const row: Record<string, number> = {
+        lag: lag + 1,
+        time: (lag + 1) / fps,
+      };
+      shortKeys.forEach((k, d) => {
+        row[k] = avgAcf[d][lag];
+      });
       return row;
     });
 
     // Suggested chunk: median lag where ACF drops below 0.5
-    const lags = avgAcf.map(acf => { const i = acf.findIndex(v => v < 0.5); return i >= 0 ? i + 1 : null; }).filter(Boolean) as number[];
-    const suggestedChunk = lags.length > 0 ? lags.sort((a, b) => a - b)[Math.floor(lags.length / 2)] : null;
+    const lags = avgAcf
+      .map((acf) => {
+        const i = acf.findIndex((v) => v < 0.5);
+        return i >= 0 ? i + 1 : null;
+      })
+      .filter(Boolean) as number[];
+    const suggestedChunk =
+      lags.length > 0
+        ? lags.sort((a, b) => a - b)[Math.floor(lags.length / 2)]
+        : null;
 
     return { chartData, suggestedChunk, shortKeys };
   })();
 
   // Per-episode jerkiness: mean |Δa| across all dimensions
-  const jerkyEpisodes: JerkyEpisode[] = episodeActions.map(({ index, actions: ep }) => {
-    let sum = 0, count = 0;
-    for (let t = 1; t < ep.length; t++) {
-      for (let d = 0; d < actionDim; d++) {
-        sum += Math.abs((ep[t][d] ?? 0) - (ep[t - 1][d] ?? 0));
-        count++;
+  const jerkyEpisodes: JerkyEpisode[] = episodeActions
+    .map(({ index, actions: ep }) => {
+      let sum = 0,
+        count = 0;
+      for (let t = 1; t < ep.length; t++) {
+        for (let d = 0; d < actionDim; d++) {
+          sum += Math.abs((ep[t][d] ?? 0) - (ep[t - 1][d] ?? 0));
+          count++;
+        }
       }
-    }
-    return { episodeIndex: index, meanAbsDelta: count > 0 ? sum / count : 0 };
-  }).sort((a, b) => b.meanAbsDelta - a.meanAbsDelta);
+      return { episodeIndex: index, meanAbsDelta: count > 0 ? sum / count : 0 };
+    })
+    .sort((a, b) => b.meanAbsDelta - a.meanAbsDelta);
 
   // Speed distribution: all episode movement scores (not just lowest 10)
-  const speedDistribution: SpeedDistEntry[] = movementScores.map(s => ({
+  const speedDistribution: SpeedDistEntry[] = movementScores.map((s) => ({
     episodeIndex: s.episodeIndex,
     speed: s.totalMovement,
   }));
@@ -1568,16 +1802,20 @@ export async function loadCrossEpisodeActionVariance(
     if (!stateKey || stateDim === 0) return null;
 
     let sNms: unknown = stateEntry![1].names;
-    while (typeof sNms === "object" && sNms !== null && !Array.isArray(sNms)) sNms = Object.values(sNms)[0];
+    while (typeof sNms === "object" && sNms !== null && !Array.isArray(sNms))
+      sNms = Object.values(sNms)[0];
     const stateNames = Array.isArray(sNms)
       ? (sNms as string[])
       : Array.from({ length: stateDim }, (_, i) => `${i}`);
-    const actionSuffixes = actionNames.map(n => { const p = n.split(SERIES_NAME_DELIMITER); return p[p.length - 1]; });
+    const actionSuffixes = actionNames.map((n) => {
+      const p = n.split(SERIES_NAME_DELIMITER);
+      return p[p.length - 1];
+    });
 
     // Match pairs by suffix, fall back to index
     const pairs: [number, number][] = [];
     for (let ai = 0; ai < actionDim; ai++) {
-      const si = stateNames.findIndex(s => s === actionSuffixes[ai]);
+      const si = stateNames.findIndex((s) => s === actionSuffixes[ai]);
       if (si >= 0) pairs.push([ai, si]);
     }
     if (pairs.length === 0) {
@@ -1600,64 +1838,113 @@ export async function loadCrossEpisodeActionVariance(
 
       for (let pi = 0; pi < pairs.length; pi++) {
         const [ai, si] = pairs[pi];
-        const aVals = actions.slice(0, n).map(r => r[ai] ?? 0);
-        const sDeltas = Array.from({ length: n - 1 }, (_, t) => (states[t + 1][si] ?? 0) - (states[t][si] ?? 0));
+        const aVals = actions.slice(0, n).map((r) => r[ai] ?? 0);
+        const sDeltas = Array.from(
+          { length: n - 1 },
+          (_, t) => (states[t + 1][si] ?? 0) - (states[t][si] ?? 0),
+        );
         const effN = Math.min(aVals.length, sDeltas.length);
         const aM = aVals.slice(0, effN).reduce((a, b) => a + b, 0) / effN;
         const sM = sDeltas.slice(0, effN).reduce((a, b) => a + b, 0) / effN;
 
         for (let li = 0; li < numLags; li++) {
           const lag = -maxLag + li;
-          let sum = 0, aV = 0, sV = 0;
+          let sum = 0,
+            aV = 0,
+            sV = 0;
           for (let t = 0; t < effN; t++) {
             const sIdx = t + lag;
             if (sIdx < 0 || sIdx >= sDeltas.length) continue;
-            const a = aVals[t] - aM, s = sDeltas[sIdx] - sM;
-            sum += a * s; aV += a * a; sV += s * s;
+            const a = aVals[t] - aM,
+              s = sDeltas[sIdx] - sM;
+            sum += a * s;
+            aV += a * a;
+            sV += s * s;
           }
           const d = Math.sqrt(aV * sV);
-          if (d > 0) { corrSums[pi][li] += sum / d; corrCounts[pi][li]++; }
+          if (d > 0) {
+            corrSums[pi][li] += sum / d;
+            corrCounts[pi][li]++;
+          }
         }
       }
     }
 
     const avgCorrs = pairs.map((_, pi) =>
       Array.from({ length: numLags }, (_, li) =>
-        corrCounts[pi][li] > 0 ? corrSums[pi][li] / corrCounts[pi][li] : 0
-      )
+        corrCounts[pi][li] > 0 ? corrSums[pi][li] / corrCounts[pi][li] : 0,
+      ),
     );
 
     const ccData = Array.from({ length: numLags }, (_, li) => {
       const lag = -maxLag + li;
-      const vals = avgCorrs.map(pc => pc[li]);
-      return { lag, max: Math.max(...vals), mean: vals.reduce((a, b) => a + b, 0) / vals.length, min: Math.min(...vals) };
+      const vals = avgCorrs.map((pc) => pc[li]);
+      return {
+        lag,
+        max: Math.max(...vals),
+        mean: vals.reduce((a, b) => a + b, 0) / vals.length,
+        min: Math.min(...vals),
+      };
     });
 
-    let meanPeakLag = 0, meanPeakCorr = -Infinity;
-    let maxPeakLag = 0, maxPeakCorr = -Infinity;
-    let minPeakLag = 0, minPeakCorr = -Infinity;
+    let meanPeakLag = 0,
+      meanPeakCorr = -Infinity;
+    let maxPeakLag = 0,
+      maxPeakCorr = -Infinity;
+    let minPeakLag = 0,
+      minPeakCorr = -Infinity;
     for (const row of ccData) {
-      if (row.max > maxPeakCorr) { maxPeakCorr = row.max; maxPeakLag = row.lag; }
-      if (row.mean > meanPeakCorr) { meanPeakCorr = row.mean; meanPeakLag = row.lag; }
-      if (row.min > minPeakCorr) { minPeakCorr = row.min; minPeakLag = row.lag; }
+      if (row.max > maxPeakCorr) {
+        maxPeakCorr = row.max;
+        maxPeakLag = row.lag;
+      }
+      if (row.mean > meanPeakCorr) {
+        meanPeakCorr = row.mean;
+        meanPeakLag = row.lag;
+      }
+      if (row.min > minPeakCorr) {
+        minPeakCorr = row.min;
+        minPeakLag = row.lag;
+      }
     }
 
-    const perPairPeakLags = avgCorrs.map(pc => {
-      let best = -Infinity, bestLag = 0;
-      for (let li = 0; li < pc.length; li++) { if (pc[li] > best) { best = pc[li]; bestLag = -maxLag + li; } }
+    const perPairPeakLags = avgCorrs.map((pc) => {
+      let best = -Infinity,
+        bestLag = 0;
+      for (let li = 0; li < pc.length; li++) {
+        if (pc[li] > best) {
+          best = pc[li];
+          bestLag = -maxLag + li;
+        }
+      }
       return bestLag;
     });
 
     return {
-      ccData, meanPeakLag, meanPeakCorr, maxPeakLag, maxPeakCorr, minPeakLag, minPeakCorr,
-      lagRangeMin: Math.min(...perPairPeakLags), lagRangeMax: Math.max(...perPairPeakLags), numPairs: pairs.length,
+      ccData,
+      meanPeakLag,
+      meanPeakCorr,
+      maxPeakLag,
+      maxPeakCorr,
+      minPeakLag,
+      minPeakCorr,
+      lagRangeMin: Math.min(...perPairPeakLags),
+      lagRangeMax: Math.max(...perPairPeakLags),
+      numPairs: pairs.length,
     };
   })();
 
   return {
-    actionNames, timeBins, variance, numEpisodes: episodeActions.length,
-    lowMovementEpisodes, aggVelocity, aggAutocorrelation,
-    speedDistribution, jerkyEpisodes, aggAlignment,
+    actionNames,
+    timeBins,
+    variance,
+    numEpisodes: episodeActions.length,
+    lowMovementEpisodes,
+    aggVelocity,
+    aggAutocorrelation,
+    speedDistribution,
+    jerkyEpisodes,
+    aggAlignment,
   };
 }
 
@@ -1668,8 +1955,17 @@ export async function loadEpisodeFlatChartData(
   info: DatasetMetadata,
   episodeId: number,
 ): Promise<Record<string, number>[]> {
-  const episodeMetadata = await loadEpisodeMetadataV3Simple(repoId, version, episodeId);
-  const { flatChartData } = await loadEpisodeDataV3(repoId, version, info, episodeMetadata);
+  const episodeMetadata = await loadEpisodeMetadataV3Simple(
+    repoId,
+    version,
+    episodeId,
+  );
+  const { flatChartData } = await loadEpisodeDataV3(
+    repoId,
+    version,
+    info,
+    episodeMetadata,
+  );
   return flatChartData;
 }
 

src/app/page.tsx

@@ -6,7 +6,12 @@ import { useSearchParams } from "next/navigation";
 
 declare global {
   interface Window {
-    YT?: { Player: new (id: string, config: Record<string, unknown>) => { destroy?: () => void } };
+    YT?: {
+      Player: new (
+        id: string,
+        config: Record<string, unknown>,
+      ) => { destroy?: () => void };
+    };
     onYouTubeIframeAPIReady?: () => void;
   }
 }
@@ -87,7 +92,14 @@ function HomeInner() {
           start: 0,
         },
         events: {
-          onReady: (event: { target: { playVideo: () => void; mute: () => void; seekTo: (t: number) => void; getCurrentTime: () => number } }) => {
+          onReady: (event: {
+            target: {
+              playVideo: () => void;
+              mute: () => void;
+              seekTo: (t: number) => void;
+              getCurrentTime: () => number;
+            };
+          }) => {
             event.target.playVideo();
             event.target.mute();
             interval = setInterval(() => {

src/components/action-insights-panel.tsx

@@ -10,7 +10,14 @@ import {
   ResponsiveContainer,
   Tooltip,
 } from "recharts";
-import type { CrossEpisodeVarianceData, AggVelocityStat, AggAutocorrelation, SpeedDistEntry, JerkyEpisode, AggAlignment } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import type {
+  CrossEpisodeVarianceData,
+  AggVelocityStat,
+  AggAutocorrelation,
+  SpeedDistEntry,
+  JerkyEpisode,
+  AggAlignment,
+} from "@/app/[org]/[dataset]/[episode]/fetch-data";
 import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
 
 const DELIMITER = " | ";
@@ -22,8 +29,26 @@ function InfoToggle({ children }: { children: React.ReactNode }) {
   const [open, setOpen] = useState(false);
   return (
     <>
-      <button onClick={() => setOpen(v => !v)} className="p-0.5 rounded-full text-slate-500 hover:text-slate-300 transition-colors shrink-0" title="Toggle description">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="p-0.5 rounded-full text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+        title="Toggle description"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </svg>
       </button>
       {open && <div className="mt-1">{children}</div>}
     </>
@@ -35,7 +60,9 @@ function FullscreenWrapper({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     if (!fs) return;
-    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setFs(false); };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setFs(false);
+    };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [fs]);
@@ -43,16 +70,35 @@ function FullscreenWrapper({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative">
       <button
-        onClick={() => setFs(v => !v)}
+        onClick={() => setFs((v) => !v)}
         className="absolute top-3 right-3 z-10 p-1.5 rounded bg-slate-700/60 hover:bg-slate-600 text-slate-400 hover:text-slate-200 transition-colors backdrop-blur-sm"
         title={fs ? "Exit fullscreen" : "Fullscreen"}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
           {fs ? (
-            <><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></>
+            <>
+              <polyline points="4 14 10 14 10 20" />
+              <polyline points="20 10 14 10 14 4" />
+              <line x1="14" y1="10" x2="21" y2="3" />
+              <line x1="3" y1="21" x2="10" y2="14" />
+            </>
           ) : (
-            <><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></>
+            <>
+              <polyline points="15 3 21 3 21 9" />
+              <polyline points="9 21 3 21 3 15" />
+              <line x1="21" y1="3" x2="14" y2="10" />
+              <line x1="3" y1="21" x2="10" y2="14" />
+            </>
           )}
         </svg>
       </button>
@@ -63,14 +109,32 @@ function FullscreenWrapper({ children }: { children: React.ReactNode }) {
             className="fixed top-4 right-4 z-50 p-2 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-300 hover:text-white transition-colors"
             title="Exit fullscreen (Esc)"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="4 14 10 14 10 20" />
+              <polyline points="20 10 14 10 14 4" />
+              <line x1="14" y1="10" x2="21" y2="3" />
+              <line x1="3" y1="21" x2="10" y2="14" />
             </svg>
           </button>
-          <div className="max-w-7xl mx-auto"><FullscreenCtx.Provider value={true}>{children}</FullscreenCtx.Provider></div>
+          <div className="max-w-7xl mx-auto">
+            <FullscreenCtx.Provider value={true}>
+              {children}
+            </FullscreenCtx.Provider>
+          </div>
         </div>
-      ) : children}
+      ) : (
+        children
+      )}
     </div>
   );
 }
@@ -79,11 +143,24 @@ function FlagBtn({ id }: { id: number }) {
   const { has, toggle } = useFlaggedEpisodes();
   const flagged = has(id);
   return (
-    <button onClick={() => toggle(id)} title={flagged ? "Unflag episode" : "Flag for review"}
-      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill={flagged ? "currentColor" : "none"}
-        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+    <button
+      onClick={() => toggle(id)}
+      title={flagged ? "Unflag episode" : "Flag for review"}
+      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill={flagged ? "currentColor" : "none"}
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+        <line x1="4" y1="22" x2="4" y2="15" />
       </svg>
     </button>
   );
@@ -92,20 +169,41 @@ function FlagBtn({ id }: { id: number }) {
 function FlagAllBtn({ ids, label }: { ids: number[]; label?: string }) {
   const { addMany } = useFlaggedEpisodes();
   return (
-    <button onClick={() => addMany(ids)}
-      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1">
-      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+    <button
+      onClick={() => addMany(ids)}
+      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="10"
+        height="10"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+        <line x1="4" y1="22" x2="4" y2="15" />
       </svg>
       {label ?? "Flag all"}
     </button>
   );
 }
 const COLORS = [
-  "#f97316", "#3b82f6", "#22c55e", "#ef4444", "#a855f7",
-  "#eab308", "#06b6d4", "#ec4899", "#14b8a6", "#f59e0b",
-  "#6366f1", "#84cc16",
+  "#f97316",
+  "#3b82f6",
+  "#22c55e",
+  "#ef4444",
+  "#a855f7",
+  "#eab308",
+  "#06b6d4",
+  "#ec4899",
+  "#14b8a6",
+  "#f59e0b",
+  "#6366f1",
+  "#84cc16",
 ];
 
 function shortName(key: string): string {
@@ -115,13 +213,16 @@ function shortName(key: string): string {
 
 function getActionKeys(row: Record<string, number>): string[] {
   return Object.keys(row)
-    .filter(k => k.startsWith("action") && k !== "timestamp")
+    .filter((k) => k.startsWith("action") && k !== "timestamp")
     .sort();
 }
 
 function getStateKeys(row: Record<string, number>): string[] {
   return Object.keys(row)
-    .filter(k => k.includes("state") && k !== "timestamp" && !k.startsWith("action"))
+    .filter(
+      (k) =>
+        k.includes("state") && k !== "timestamp" && !k.startsWith("action"),
+    )
     .sort();
 }
 
@@ -130,7 +231,7 @@ function getStateKeys(row: Record<string, number>): string[] {
 function computeAutocorrelation(values: number[], maxLag: number): number[] {
   const n = values.length;
   const mean = values.reduce((a, b) => a + b, 0) / n;
-  const centered = values.map(v => v - mean);
+  const centered = values.map((v) => v - mean);
   const variance = centered.reduce((a, v) => a + v * v, 0);
   if (variance === 0) return Array(maxLag).fill(0);
 
@@ -144,98 +245,168 @@ function computeAutocorrelation(values: number[], maxLag: number): number[] {
 }
 
 function findDecorrelationLag(acf: number[], threshold = 0.5): number | null {
-  const idx = acf.findIndex(v => v < threshold);
+  const idx = acf.findIndex((v) => v < threshold);
   return idx >= 0 ? idx + 1 : null;
 }
 
-function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<string, number>[]; fps: number; agg?: AggAutocorrelation | null; numEpisodes?: number }) {
+function AutocorrelationSection({
+  data,
+  fps,
+  agg,
+  numEpisodes,
+}: {
+  data: Record<string, number>[];
+  fps: number;
+  agg?: AggAutocorrelation | null;
+  numEpisodes?: number;
+}) {
   const isFs = useIsFullscreen();
-  const actionKeys = useMemo(() => (data.length > 0 ? getActionKeys(data[0]) : []), [data]);
-  const maxLag = useMemo(() => Math.min(Math.floor(data.length / 2), 100), [data]);
+  const actionKeys = useMemo(
+    () => (data.length > 0 ? getActionKeys(data[0]) : []),
+    [data],
+  );
+  const maxLag = useMemo(
+    () => Math.min(Math.floor(data.length / 2), 100),
+    [data],
+  );
 
   const fallback = useMemo(() => {
     if (agg) return null;
-    if (actionKeys.length === 0 || maxLag < 2) return { chartData: [], suggestedChunk: null, shortKeys: [] as string[] };
+    if (actionKeys.length === 0 || maxLag < 2)
+      return { chartData: [], suggestedChunk: null, shortKeys: [] as string[] };
 
-    const acfs = actionKeys.map(key => {
-      const values = data.map(row => row[key] ?? 0);
+    const acfs = actionKeys.map((key) => {
+      const values = data.map((row) => row[key] ?? 0);
       return computeAutocorrelation(values, maxLag);
     });
 
     const rows = Array.from({ length: maxLag }, (_, lag) => {
-      const row: Record<string, number> = { lag: lag + 1, time: (lag + 1) / fps };
-      actionKeys.forEach((key, ki) => { row[shortName(key)] = acfs[ki][lag]; });
+      const row: Record<string, number> = {
+        lag: lag + 1,
+        time: (lag + 1) / fps,
+      };
+      actionKeys.forEach((key, ki) => {
+        row[shortName(key)] = acfs[ki][lag];
+      });
       return row;
     });
 
-    const lags = acfs.map(acf => findDecorrelationLag(acf, 0.5)).filter(Boolean) as number[];
-    const suggested = lags.length > 0 ? lags.sort((a, b) => a - b)[Math.floor(lags.length / 2)] : null;
-
-    return { chartData: rows, suggestedChunk: suggested, shortKeys: actionKeys.map(shortName) };
+    const lags = acfs
+      .map((acf) => findDecorrelationLag(acf, 0.5))
+      .filter(Boolean) as number[];
+    const suggested =
+      lags.length > 0
+        ? lags.sort((a, b) => a - b)[Math.floor(lags.length / 2)]
+        : null;
+
+    return {
+      chartData: rows,
+      suggestedChunk: suggested,
+      shortKeys: actionKeys.map(shortName),
+    };
   }, [data, actionKeys, maxLag, fps, agg]);
 
-  const { chartData, suggestedChunk, shortKeys } = agg ?? fallback ?? { chartData: [], suggestedChunk: null, shortKeys: [] };
+  const { chartData, suggestedChunk, shortKeys } = agg ??
+    fallback ?? { chartData: [], suggestedChunk: null, shortKeys: [] };
   const isAgg = !!agg;
-  const numEpisodesLabel = isAgg ? ` (${numEpisodes} episodes sampled)` : " (current episode)";
+  const numEpisodesLabel = isAgg
+    ? ` (${numEpisodes} episodes sampled)`
+    : " (current episode)";
 
   const yDomain = useMemo(() => {
-    if (chartData.length === 0 || shortKeys.length === 0) return [-0.2, 1] as [number, number];
+    if (chartData.length === 0 || shortKeys.length === 0)
+      return [-0.2, 1] as [number, number];
     let min = Infinity;
-    for (const row of chartData) for (const k of shortKeys) {
-      const v = row[k];
-      if (typeof v === "number" && v < min) min = v;
-    }
+    for (const row of chartData)
+      for (const k of shortKeys) {
+        const v = row[k];
+        if (typeof v === "number" && v < min) min = v;
+      }
     const lo = Math.floor(Math.min(min, 0) * 10) / 10;
     return [lo, 1] as [number, number];
   }, [chartData, shortKeys]);
 
-  if (shortKeys.length === 0) return <p className="text-slate-500 italic">No action columns found.</p>;
+  if (shortKeys.length === 0)
+    return <p className="text-slate-500 italic">No action columns found.</p>;
 
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
         <div className="flex items-center gap-2">
-        <h3 className="text-sm font-semibold text-slate-200">Action Autocorrelation<span className="text-xs text-slate-500 ml-2 font-normal">{numEpisodesLabel}</span></h3>
+          <h3 className="text-sm font-semibold text-slate-200">
+            Action Autocorrelation
+            <span className="text-xs text-slate-500 ml-2 font-normal">
+              {numEpisodesLabel}
+            </span>
+          </h3>
           <InfoToggle>
             <p className="text-xs text-slate-400">
-          Shows how correlated each action dimension is with itself over increasing time lags.
-          Where autocorrelation drops below 0.5 suggests a <span className="text-orange-400 font-medium">natural action chunk boundary</span> — actions
-          beyond this lag are essentially independent, so executing them open-loop offers diminishing returns.
-          <br />
-          <span className="text-slate-500">
-            Grounded in the theoretical result that chunk length should scale logarithmically with system stability constants
-            (Zhang et al., 2025 — arXiv:2507.09061, Theorem 1).
-          </span>
-        </p>
+              Shows how correlated each action dimension is with itself over
+              increasing time lags. Where autocorrelation drops below 0.5
+              suggests a{" "}
+              <span className="text-orange-400 font-medium">
+                natural action chunk boundary
+              </span>{" "}
+              — actions beyond this lag are essentially independent, so
+              executing them open-loop offers diminishing returns.
+              <br />
+              <span className="text-slate-500">
+                Grounded in the theoretical result that chunk length should
+                scale logarithmically with system stability constants (Zhang et
+                al., 2025 — arXiv:2507.09061, Theorem 1).
+              </span>
+            </p>
           </InfoToggle>
         </div>
       </div>
 
       {suggestedChunk && (
         <div className="flex items-center gap-3 bg-orange-500/10 border border-orange-500/30 rounded-md px-4 py-2.5">
-          <span className="text-orange-400 font-bold text-lg tabular-nums">{suggestedChunk}</span>
+          <span className="text-orange-400 font-bold text-lg tabular-nums">
+            {suggestedChunk}
+          </span>
           <div>
             <p className="text-sm text-orange-300 font-medium">
-              Suggested chunk length: {suggestedChunk} steps ({(suggestedChunk / fps).toFixed(2)}s)
+              Suggested chunk length: {suggestedChunk} steps (
+              {(suggestedChunk / fps).toFixed(2)}s)
+            </p>
+            <p className="text-xs text-slate-400">
+              Median lag where autocorrelation drops below 0.5 across action
+              dimensions
             </p>
-            <p className="text-xs text-slate-400">Median lag where autocorrelation drops below 0.5 across action dimensions</p>
           </div>
         </div>
       )}
 
       <div className={isFs ? "h-[500px]" : "h-64"}>
         <ResponsiveContainer width="100%" height="100%">
-          <LineChart key={isAgg ? "agg" : "ep"} data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 16 }}>
+          <LineChart
+            key={isAgg ? "agg" : "ep"}
+            data={chartData}
+            margin={{ top: 8, right: 16, left: 0, bottom: 16 }}
+          >
             <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
             <XAxis
               dataKey="lag"
               stroke="#94a3b8"
-              label={{ value: "Lag (steps)", position: "insideBottom", offset: -8, fill: "#94a3b8", fontSize: 13 }}
+              label={{
+                value: "Lag (steps)",
+                position: "insideBottom",
+                offset: -8,
+                fill: "#94a3b8",
+                fontSize: 13,
+              }}
             />
             <YAxis stroke="#94a3b8" domain={yDomain} />
             <Tooltip
-              contentStyle={{ background: "#1e293b", border: "1px solid #475569", borderRadius: 6 }}
-              labelFormatter={(v) => `Lag ${v} (${(Number(v) / fps).toFixed(2)}s)`}
+              contentStyle={{
+                background: "#1e293b",
+                border: "1px solid #475569",
+                borderRadius: 6,
+              }}
+              labelFormatter={(v) =>
+                `Lag ${v} (${(Number(v) / fps).toFixed(2)}s)`
+              }
               formatter={(v: number) => v.toFixed(3)}
             />
             <Line
@@ -266,7 +437,10 @@ function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<
       <div className="flex flex-wrap gap-x-4 gap-y-1 px-1">
         {shortKeys.map((name, i) => (
           <div key={name} className="flex items-center gap-1.5">
-            <span className="w-3 h-[3px] rounded-full shrink-0" style={{ background: COLORS[i % COLORS.length] }} />
+            <span
+              className="w-3 h-[3px] rounded-full shrink-0"
+              style={{ background: COLORS[i % COLORS.length] }}
+            />
             <span className="text-xs text-slate-400">{name}</span>
           </div>
         ))}
@@ -277,18 +451,33 @@ function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<
 
 // ─── Action Velocity ─────────────────────────────────────────────
 
-function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data: Record<string, number>[]; agg?: AggVelocityStat[]; numEpisodes?: number; jerkyEpisodes?: JerkyEpisode[] }) {
-  const actionKeys = useMemo(() => (data.length > 0 ? getActionKeys(data[0]) : []), [data]);
+function ActionVelocitySection({
+  data,
+  agg,
+  numEpisodes,
+  jerkyEpisodes,
+}: {
+  data: Record<string, number>[];
+  agg?: AggVelocityStat[];
+  numEpisodes?: number;
+  jerkyEpisodes?: JerkyEpisode[];
+}) {
+  const actionKeys = useMemo(
+    () => (data.length > 0 ? getActionKeys(data[0]) : []),
+    [data],
+  );
 
   const fallbackStats = useMemo(() => {
     if (agg && agg.length > 0) return null;
     if (actionKeys.length === 0 || data.length < 2) return [];
 
-    return actionKeys.map(key => {
-      const values = data.map(row => row[key] ?? 0);
+    return actionKeys.map((key) => {
+      const values = data.map((row) => row[key] ?? 0);
       const deltas = values.slice(1).map((v, i) => v - values[i]);
       const mean = deltas.reduce((a, b) => a + b, 0) / deltas.length;
-      const std = Math.sqrt(deltas.reduce((a, d) => a + (d - mean) ** 2, 0) / deltas.length);
+      const std = Math.sqrt(
+        deltas.reduce((a, d) => a + (d - mean) ** 2, 0) / deltas.length,
+      );
       const maxAbs = Math.max(...deltas.map(Math.abs));
       const binCount = 30;
       const lo = Math.min(...deltas);
@@ -296,25 +485,40 @@ function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data
       const range = hi - lo || 1;
       const binW = range / binCount;
       const bins: number[] = new Array(binCount).fill(0);
-      for (const d of deltas) { let b = Math.floor((d - lo) / binW); if (b >= binCount) b = binCount - 1; bins[b]++; }
+      for (const d of deltas) {
+        let b = Math.floor((d - lo) / binW);
+        if (b >= binCount) b = binCount - 1;
+        bins[b]++;
+      }
       return { name: shortName(key), std, maxAbs, bins, lo, hi };
     });
   }, [data, actionKeys, agg]);
 
-  const stats = useMemo(() => (agg && agg.length > 0) ? agg : fallbackStats ?? [], [agg, fallbackStats]);
+  const stats = useMemo(
+    () => (agg && agg.length > 0 ? agg : (fallbackStats ?? [])),
+    [agg, fallbackStats],
+  );
   const isAgg = agg && agg.length > 0;
 
-  const maxBinCount = useMemo(() => stats.length > 0 ? Math.max(...stats.flatMap(s => s.bins)) : 0, [stats]);
-  const maxStd = useMemo(() => stats.length > 0 ? Math.max(...stats.map(s => s.std)) : 1, [stats]);
+  const maxBinCount = useMemo(
+    () => (stats.length > 0 ? Math.max(...stats.flatMap((s) => s.bins)) : 0),
+    [stats],
+  );
+  const maxStd = useMemo(
+    () => (stats.length > 0 ? Math.max(...stats.map((s) => s.std)) : 1),
+    [stats],
+  );
 
   const insight = useMemo(() => {
     if (stats.length === 0) return null;
-    const smooth = stats.filter(s => s.std / maxStd < 0.4);
-    const moderate = stats.filter(s => s.std / maxStd >= 0.4 && s.std / maxStd < 0.7);
-    const jerky = stats.filter(s => s.std / maxStd >= 0.7);
+    const smooth = stats.filter((s) => s.std / maxStd < 0.4);
+    const moderate = stats.filter(
+      (s) => s.std / maxStd >= 0.4 && s.std / maxStd < 0.7,
+    );
+    const jerky = stats.filter((s) => s.std / maxStd >= 0.7);
     const isGripper = (n: string) => /grip/i.test(n);
-    const jerkyNonGripper = jerky.filter(s => !isGripper(s.name));
-    const jerkyGripper = jerky.filter(s => isGripper(s.name));
+    const jerkyNonGripper = jerky.filter((s) => !isGripper(s.name));
+    const jerkyGripper = jerky.filter((s) => isGripper(s.name));
     const smoothRatio = smooth.length / stats.length;
 
     let verdict: { label: string; color: string };
@@ -322,69 +526,125 @@ function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data
       verdict = { label: "Smooth", color: "text-green-400" };
     else if (jerkyNonGripper.length <= 2 && smoothRatio >= 0.3)
       verdict = { label: "Moderate", color: "text-yellow-400" };
-    else
-      verdict = { label: "Jerky", color: "text-red-400" };
+    else verdict = { label: "Jerky", color: "text-red-400" };
 
     const lines: string[] = [];
     if (smooth.length > 0)
-      lines.push(`${smooth.length} smooth (${smooth.map(s => s.name).join(", ")})`);
+      lines.push(
+        `${smooth.length} smooth (${smooth.map((s) => s.name).join(", ")})`,
+      );
     if (moderate.length > 0)
-      lines.push(`${moderate.length} moderate (${moderate.map(s => s.name).join(", ")})`);
+      lines.push(
+        `${moderate.length} moderate (${moderate.map((s) => s.name).join(", ")})`,
+      );
     if (jerkyNonGripper.length > 0)
-      lines.push(`${jerkyNonGripper.length} jerky (${jerkyNonGripper.map(s => s.name).join(", ")})`);
+      lines.push(
+        `${jerkyNonGripper.length} jerky (${jerkyNonGripper.map((s) => s.name).join(", ")})`,
+      );
     if (jerkyGripper.length > 0)
-      lines.push(`${jerkyGripper.length} gripper${jerkyGripper.length > 1 ? "s" : ""} jerky — expected for binary open/close`);
+      lines.push(
+        `${jerkyGripper.length} gripper${jerkyGripper.length > 1 ? "s" : ""} jerky — expected for binary open/close`,
+      );
 
     let tip: string;
     if (verdict.label === "Smooth")
       tip = "Actions are consistent — longer action chunks should work well.";
     else if (verdict.label === "Moderate")
-      tip = "Some dimensions show abrupt changes. Consider moderate chunk sizes.";
+      tip =
+        "Some dimensions show abrupt changes. Consider moderate chunk sizes.";
     else
-      tip = "Many dimensions are jerky. Use shorter action chunks and consider filtering outlier episodes.";
+      tip =
+        "Many dimensions are jerky. Use shorter action chunks and consider filtering outlier episodes.";
 
     return { verdict, lines, tip };
   }, [stats, maxStd]);
 
-  if (stats.length === 0) return <p className="text-slate-500 italic">No action data for velocity analysis.</p>;
+  if (stats.length === 0)
+    return (
+      <p className="text-slate-500 italic">
+        No action data for velocity analysis.
+      </p>
+    );
 
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
         <div className="flex items-center gap-2">
-        <h3 className="text-sm font-semibold text-slate-200">Action Velocity (Δa) — Smoothness Proxy<span className="text-xs text-slate-500 ml-2 font-normal">{isAgg ? `(${numEpisodes} episodes sampled)` : "(current episode)"}</span></h3>
+          <h3 className="text-sm font-semibold text-slate-200">
+            Action Velocity (Δa) — Smoothness Proxy
+            <span className="text-xs text-slate-500 ml-2 font-normal">
+              {isAgg
+                ? `(${numEpisodes} episodes sampled)`
+                : "(current episode)"}
+            </span>
+          </h3>
           <InfoToggle>
             <p className="text-xs text-slate-400">
-          Shows the distribution of frame-to-frame action changes (Δa = a<sub>t+1</sub> − a<sub>t</sub>) for each dimension.
-          A <span className="text-green-400">tight distribution around zero</span> means smooth, predictable control — the system
-          is likely stable and benefits from longer action chunks.
-          <span className="text-red-400"> Fat tails or high std</span> indicate jerky demonstrations, suggesting shorter chunks
-          and potentially beneficial noise injection.
-          <br />
-          <span className="text-slate-500">
-            Relates to the Lipschitz constant L<sub>π</sub> and smoothness C<sub>π</sub> in Zhang et al. (2025), which govern
-            compounding error bounds (Assumptions 3.1, 4.1).
-          </span>
-        </p>
+              Shows the distribution of frame-to-frame action changes (Δa = a
+              <sub>t+1</sub> − a<sub>t</sub>) for each dimension. A{" "}
+              <span className="text-green-400">
+                tight distribution around zero
+              </span>{" "}
+              means smooth, predictable control — the system is likely stable
+              and benefits from longer action chunks.
+              <span className="text-red-400"> Fat tails or high std</span>{" "}
+              indicate jerky demonstrations, suggesting shorter chunks and
+              potentially beneficial noise injection.
+              <br />
+              <span className="text-slate-500">
+                Relates to the Lipschitz constant L<sub>π</sub> and smoothness C
+                <sub>π</sub> in Zhang et al. (2025), which govern compounding
+                error bounds (Assumptions 3.1, 4.1).
+              </span>
+            </p>
           </InfoToggle>
         </div>
       </div>
 
       {/* Per-dimension mini histograms + stats */}
-      <div className="grid gap-2" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))" }}>
+      <div
+        className="grid gap-2"
+        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))" }}
+      >
         {stats.map((s, si) => {
           const barH = 28;
           return (
-            <div key={s.name} className="bg-slate-900/50 rounded-md px-2.5 py-2 space-y-1">
-              <p className="text-xs font-medium text-slate-200 truncate" title={s.name}>{s.name}</p>
+            <div
+              key={s.name}
+              className="bg-slate-900/50 rounded-md px-2.5 py-2 space-y-1"
+            >
+              <p
+                className="text-xs font-medium text-slate-200 truncate"
+                title={s.name}
+              >
+                {s.name}
+              </p>
               <div className="flex gap-2 text-xs text-slate-400 tabular-nums">
                 <span>σ={s.std.toFixed(4)}</span>
-                <span>|Δ|<sub>max</sub>={s.maxAbs.toFixed(4)}</span>
+                <span>
+                  |Δ|<sub>max</sub>={s.maxAbs.toFixed(4)}
+                </span>
               </div>
-              <svg width="100%" viewBox={`0 0 ${s.bins.length} ${barH}`} preserveAspectRatio="none" className="h-7 rounded" aria-label={`Δa distribution for ${s.name}`}>
+              <svg
+                width="100%"
+                viewBox={`0 0 ${s.bins.length} ${barH}`}
+                preserveAspectRatio="none"
+                className="h-7 rounded"
+                aria-label={`Δa distribution for ${s.name}`}
+              >
                 {[...s.bins].map((count, bi) => {
                   const h = maxBinCount > 0 ? (count / maxBinCount) * barH : 0;
-                  return <rect key={bi} x={bi} y={barH - h} width={0.85} height={h} fill={COLORS[si % COLORS.length]} opacity={0.7} />;
+                  return (
+                    <rect
+                      key={bi}
+                      x={bi}
+                      y={barH - h}
+                      width={0.85}
+                      height={h}
+                      fill={COLORS[si % COLORS.length]}
+                      opacity={0.7}
+                    />
+                  );
                 })}
               </svg>
               <div className="h-1 w-full bg-slate-700 rounded-full overflow-hidden">
@@ -392,7 +652,12 @@ function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data
                   className="h-full rounded-full"
                   style={{
                     width: `${Math.min(100, (s.std / maxStd) * 100)}%`,
-                    background: s.std / maxStd < 0.4 ? "#22c55e" : s.std / maxStd < 0.7 ? "#eab308" : "#ef4444",
+                    background:
+                      s.std / maxStd < 0.4
+                        ? "#22c55e"
+                        : s.std / maxStd < 0.7
+                          ? "#eab308"
+                          : "#ef4444",
                   }}
                 />
               </div>
@@ -404,16 +669,23 @@ function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data
       {insight && (
         <div className="bg-slate-900/60 rounded-md px-4 py-3 border border-slate-700/60 space-y-1.5">
           <p className="text-sm font-medium text-slate-200">
-            Overall: <span className={insight.verdict.color}>{insight.verdict.label}</span>
+            Overall:{" "}
+            <span className={insight.verdict.color}>
+              {insight.verdict.label}
+            </span>
           </p>
           <ul className="text-xs text-slate-400 space-y-0.5 list-disc list-inside">
-            {insight.lines.map((l, i) => <li key={i}>{l}</li>)}
+            {insight.lines.map((l, i) => (
+              <li key={i}>{l}</li>
+            ))}
           </ul>
           <p className="text-xs text-slate-500 pt-1">{insight.tip}</p>
         </div>
       )}
 
-      {jerkyEpisodes && jerkyEpisodes.length > 0 && <JerkyEpisodesList episodes={jerkyEpisodes} />}
+      {jerkyEpisodes && jerkyEpisodes.length > 0 && (
+        <JerkyEpisodesList episodes={jerkyEpisodes} />
+      )}
     </div>
   );
 }
@@ -426,12 +698,18 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
     <div className="bg-slate-900/60 rounded-md px-4 py-3 border border-slate-700/60 space-y-2">
       <div className="flex items-center justify-between">
         <p className="text-sm font-medium text-slate-200">
-          Most Jerky Episodes <span className="text-xs text-slate-500 font-normal">sorted by mean |Δa|</span>
+          Most Jerky Episodes{" "}
+          <span className="text-xs text-slate-500 font-normal">
+            sorted by mean |Δa|
+          </span>
         </p>
         <div className="flex items-center gap-3">
-          <FlagAllBtn ids={display.map(e => e.episodeIndex)} />
+          <FlagAllBtn ids={display.map((e) => e.episodeIndex)} />
           {episodes.length > 15 && (
-            <button onClick={() => setShowAll(v => !v)} className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
+            <button
+              onClick={() => setShowAll((v) => !v)}
+              className="text-xs text-slate-400 hover:text-slate-200 transition-colors"
+            >
               {showAll ? "Show top 15" : `Show all ${episodes.length}`}
             </button>
           )}
@@ -447,11 +725,18 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
             </tr>
           </thead>
           <tbody>
-            {display.map(e => (
-              <tr key={e.episodeIndex} className="border-b border-slate-800/40 text-slate-300">
-                <td className="py-1"><FlagBtn id={e.episodeIndex} /></td>
+            {display.map((e) => (
+              <tr
+                key={e.episodeIndex}
+                className="border-b border-slate-800/40 text-slate-300"
+              >
+                <td className="py-1">
+                  <FlagBtn id={e.episodeIndex} />
+                </td>
                 <td className="py-1 pr-3">ep {e.episodeIndex}</td>
-                <td className="py-1 text-right tabular-nums">{e.meanAbsDelta.toFixed(4)}</td>
+                <td className="py-1 text-right tabular-nums">
+                  {e.meanAbsDelta.toFixed(4)}
+                </td>
               </tr>
             ))}
           </tbody>
@@ -463,17 +748,36 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
 
 // ─── Cross-Episode Variance Heatmap ──────────────────────────────
 
-function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | null; loading: boolean }) {
+function VarianceHeatmap({
+  data,
+  loading,
+}: {
+  data: CrossEpisodeVarianceData | null;
+  loading: boolean;
+}) {
   const isFs = useIsFullscreen();
 
   if (loading) {
     return (
       <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
-        <h3 className="text-sm font-semibold text-slate-200 mb-2">Cross-Episode Action Variance</h3>
+        <h3 className="text-sm font-semibold text-slate-200 mb-2">
+          Cross-Episode Action Variance
+        </h3>
         <div className="flex items-center gap-2 text-slate-400 text-sm py-8 justify-center">
           <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
           </svg>
           Loading cross-episode data (sampled up to 500 episodes)…
         </div>
@@ -484,8 +788,12 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
   if (!data) {
     return (
       <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
-        <h3 className="text-sm font-semibold text-slate-200 mb-2">Cross-Episode Action Variance</h3>
-        <p className="text-slate-500 italic text-sm">Not enough episodes or no action data to compute variance.</p>
+        <h3 className="text-sm font-semibold text-slate-200 mb-2">
+          Cross-Episode Action Variance
+        </h3>
+        <p className="text-slate-500 italic text-sm">
+          Not enough episodes or no action data to compute variance.
+        </p>
       </div>
     );
   }
@@ -497,8 +805,14 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
 
   const baseW = isFs ? 1000 : 560;
   const baseH = isFs ? 500 : 300;
-  const cellW = Math.max(6, Math.min(isFs ? 24 : 14, Math.floor(baseW / numBins)));
-  const cellH = Math.max(20, Math.min(isFs ? 56 : 36, Math.floor(baseH / numDims)));
+  const cellW = Math.max(
+    6,
+    Math.min(isFs ? 24 : 14, Math.floor(baseW / numBins)),
+  );
+  const cellH = Math.max(
+    20,
+    Math.min(isFs ? 56 : 36, Math.floor(baseH / numDims)),
+  );
   const labelW = 100;
   const svgW = labelW + numBins * cellW + 60;
   const svgH = numDims * cellH + 40;
@@ -516,22 +830,32 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
         <div className="flex items-center gap-2">
-        <h3 className="text-sm font-semibold text-slate-200">
-          Cross-Episode Action Variance
-          <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes sampled)</span>
-        </h3>
+          <h3 className="text-sm font-semibold text-slate-200">
+            Cross-Episode Action Variance
+            <span className="text-xs text-slate-500 ml-2 font-normal">
+              ({numEpisodes} episodes sampled)
+            </span>
+          </h3>
           <InfoToggle>
             <p className="text-xs text-slate-400">
-          Shows how much each action dimension varies across episodes at each point in time (normalized 0–100%).
-          <span className="text-orange-400"> High-variance regions</span> indicate multi-modal or inconsistent demonstrations —
-          generative policies (diffusion, flow-matching) and action chunking help here by modeling multiple modes.
-          <span className="text-blue-400"> Low-variance regions</span> indicate consistent behavior across demonstrations.
-          <br />
-          <span className="text-slate-500">
-            Relates to the &quot;coverage&quot; discussion in Zhang et al. (2025) — regions with low variance may lack the
-            exploratory coverage needed to prevent compounding errors (Section 4).
-          </span>
-        </p>
+              Shows how much each action dimension varies across episodes at
+              each point in time (normalized 0–100%).
+              <span className="text-orange-400">
+                {" "}
+                High-variance regions
+              </span>{" "}
+              indicate multi-modal or inconsistent demonstrations — generative
+              policies (diffusion, flow-matching) and action chunking help here
+              by modeling multiple modes.
+              <span className="text-blue-400"> Low-variance regions</span>{" "}
+              indicate consistent behavior across demonstrations.
+              <br />
+              <span className="text-slate-500">
+                Relates to the &quot;coverage&quot; discussion in Zhang et al.
+                (2025) — regions with low variance may lack the exploratory
+                coverage needed to prevent compounding errors (Section 4).
+              </span>
+            </p>
           </InfoToggle>
         </div>
       </div>
@@ -553,7 +877,7 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
               >
                 <title>{`${shortName(actionNames[di])} @ ${(timeBins[bi] * 100).toFixed(0)}%: var=${v.toFixed(5)}`}</title>
               </rect>
-            ))
+            )),
           )}
 
           {/* Y-axis: action names */}
@@ -572,7 +896,7 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
           ))}
 
           {/* X-axis labels */}
-          {[0, 0.25, 0.5, 0.75, 1].map(frac => {
+          {[0, 0.25, 0.5, 0.75, 1].map((frac) => {
             const binIdx = Math.round(frac * (numBins - 1));
             return (
               <text
@@ -639,28 +963,66 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
 
 // ─── Demonstrator Speed Variance ────────────────────────────────
 
-function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: SpeedDistEntry[]; numEpisodes: number }) {
+function SpeedVarianceSection({
+  distribution,
+  numEpisodes,
+}: {
+  distribution: SpeedDistEntry[];
+  numEpisodes: number;
+}) {
   const isFs = useIsFullscreen();
-  const { speeds, mean, std, cv, median, bins, lo, binW, maxBin, verdict } = useMemo(() => {
-    const sp = distribution.map(d => d.speed).sort((a, b) => a - b);
-    const m = sp.reduce((a, b) => a + b, 0) / sp.length;
-    const s = Math.sqrt(sp.reduce((a, v) => a + (v - m) ** 2, 0) / sp.length);
-    const c = m > 0 ? s / m : 0;
-    const med = sp[Math.floor(sp.length / 2)];
-
-    const binCount = Math.min(30, Math.ceil(Math.sqrt(sp.length)));
-    const lo = sp[0], hi = sp[sp.length - 1];
-    const bw = (hi - lo || 1) / binCount;
-    const b = new Array(binCount).fill(0);
-    for (const v of sp) { let i = Math.floor((v - lo) / bw); if (i >= binCount) i = binCount - 1; b[i]++; }
-
-    let v: { label: string; color: string; tip: string };
-    if (c < 0.2) v = { label: "Consistent", color: "text-green-400", tip: "Demonstrators execute at similar speeds — no velocity normalization needed." };
-    else if (c < 0.4) v = { label: "Moderate variance", color: "text-yellow-400", tip: "Some speed variation across demonstrators. Consider velocity normalization for best results." };
-    else v = { label: "High variance", color: "text-red-400", tip: "Large speed differences between demonstrations. Velocity normalization before training is strongly recommended." };
-
-    return { speeds: sp, mean: m, std: s, cv: c, median: med, bins: b, lo, binW: bw, maxBin: Math.max(...b), verdict: v };
-  }, [distribution]);
+  const { speeds, mean, std, cv, median, bins, lo, binW, maxBin, verdict } =
+    useMemo(() => {
+      const sp = distribution.map((d) => d.speed).sort((a, b) => a - b);
+      const m = sp.reduce((a, b) => a + b, 0) / sp.length;
+      const s = Math.sqrt(sp.reduce((a, v) => a + (v - m) ** 2, 0) / sp.length);
+      const c = m > 0 ? s / m : 0;
+      const med = sp[Math.floor(sp.length / 2)];
+
+      const binCount = Math.min(30, Math.ceil(Math.sqrt(sp.length)));
+      const lo = sp[0],
+        hi = sp[sp.length - 1];
+      const bw = (hi - lo || 1) / binCount;
+      const b = new Array(binCount).fill(0);
+      for (const v of sp) {
+        let i = Math.floor((v - lo) / bw);
+        if (i >= binCount) i = binCount - 1;
+        b[i]++;
+      }
+
+      let v: { label: string; color: string; tip: string };
+      if (c < 0.2)
+        v = {
+          label: "Consistent",
+          color: "text-green-400",
+          tip: "Demonstrators execute at similar speeds — no velocity normalization needed.",
+        };
+      else if (c < 0.4)
+        v = {
+          label: "Moderate variance",
+          color: "text-yellow-400",
+          tip: "Some speed variation across demonstrators. Consider velocity normalization for best results.",
+        };
+      else
+        v = {
+          label: "High variance",
+          color: "text-red-400",
+          tip: "Large speed differences between demonstrations. Velocity normalization before training is strongly recommended.",
+        };
+
+      return {
+        speeds: sp,
+        mean: m,
+        std: s,
+        cv: c,
+        median: med,
+        bins: b,
+        lo,
+        binW: bw,
+        maxBin: Math.max(...b),
+        verdict: v,
+      };
+    }, [distribution]);
 
   if (speeds.length < 3) return null;
 
@@ -673,22 +1035,28 @@ function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: Spe
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-slate-200">
             Demonstrator Speed Variance
-            <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes)</span>
+            <span className="text-xs text-slate-500 ml-2 font-normal">
+              ({numEpisodes} episodes)
+            </span>
           </h3>
           <InfoToggle>
             <p className="text-xs text-slate-400">
-              Distribution of average execution speed (mean ‖Δa<sub>t</sub>‖ per frame) across all episodes.
-              Different human demonstrators often execute at <span className="text-orange-400">different speeds</span>, creating
-              artificial multimodality in the action distribution that confuses the policy. A coefficient of variation (CV) above 0.3
+              Distribution of average execution speed (mean ‖Δa<sub>t</sub>‖ per
+              frame) across all episodes. Different human demonstrators often
+              execute at{" "}
+              <span className="text-orange-400">different speeds</span>,
+              creating artificial multimodality in the action distribution that
+              confuses the policy. A coefficient of variation (CV) above 0.3
               strongly suggests normalizing trajectory speed before training.
               <br />
               <span className="text-slate-500">
-                Based on &quot;Is Diversity All You Need&quot; (AGI-Bot, 2025) which shows velocity normalization dramatically improves
+                Based on &quot;Is Diversity All You Need&quot; (AGI-Bot, 2025)
+                which shows velocity normalization dramatically improves
                 fine-tuning success rate.
               </span>
             </p>
           </InfoToggle>
-      </div>
+        </div>
       </div>
 
       <div className="flex gap-4">
@@ -699,17 +1067,34 @@ function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: Spe
               const speed = lo + (i + 0.5) * binW;
               const ratio = median > 0 ? speed / median : 1;
               const dev = Math.abs(ratio - 1);
-              const color = dev < 0.2 ? "#22c55e" : dev < 0.5 ? "#eab308" : "#ef4444";
+              const color =
+                dev < 0.2 ? "#22c55e" : dev < 0.5 ? "#eab308" : "#ef4444";
               return (
-                <rect key={i} x={i * barW} y={barH - h} width={barW - 1} height={Math.max(1, h)} fill={color} opacity={0.7} rx={1}>
+                <rect
+                  key={i}
+                  x={i * barW}
+                  y={barH - h}
+                  width={barW - 1}
+                  height={Math.max(1, h)}
+                  fill={color}
+                  opacity={0.7}
+                  rx={1}
+                >
                   <title>{`Speed ${(lo + i * binW).toFixed(3)}–${(lo + (i + 1) * binW).toFixed(3)}: ${count} ep (${ratio.toFixed(2)}× median)`}</title>
                 </rect>
               );
             })}
-            {[0, 0.25, 0.5, 0.75, 1].map(frac => {
+            {[0, 0.25, 0.5, 0.75, 1].map((frac) => {
               const idx = Math.round(frac * (bins.length - 1));
               return (
-                <text key={frac} x={idx * barW + barW / 2} y={barH + 14} textAnchor="middle" className="fill-slate-400" fontSize={9}>
+                <text
+                  key={frac}
+                  x={idx * barW + barW / 2}
+                  y={barH + 14}
+                  textAnchor="middle"
+                  className="fill-slate-400"
+                  fontSize={9}
+                >
                   {(lo + idx * binW).toFixed(2)}
                 </text>
               );
@@ -717,12 +1102,29 @@ function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: Spe
           </svg>
         </div>
         <div className="flex flex-col gap-2 text-xs shrink-0 min-w-[120px]">
-          <div><span className="text-slate-500">Mean</span> <span className="text-slate-200 tabular-nums ml-1">{mean.toFixed(4)}</span></div>
-          <div><span className="text-slate-500">Median</span> <span className="text-slate-200 tabular-nums ml-1">{median.toFixed(4)}</span></div>
-          <div><span className="text-slate-500">Std</span> <span className="text-slate-200 tabular-nums ml-1">{std.toFixed(4)}</span></div>
+          <div>
+            <span className="text-slate-500">Mean</span>{" "}
+            <span className="text-slate-200 tabular-nums ml-1">
+              {mean.toFixed(4)}
+            </span>
+          </div>
+          <div>
+            <span className="text-slate-500">Median</span>{" "}
+            <span className="text-slate-200 tabular-nums ml-1">
+              {median.toFixed(4)}
+            </span>
+          </div>
+          <div>
+            <span className="text-slate-500">Std</span>{" "}
+            <span className="text-slate-200 tabular-nums ml-1">
+              {std.toFixed(4)}
+            </span>
+          </div>
           <div>
             <span className="text-slate-500">CV</span>
-            <span className={`tabular-nums ml-1 font-bold ${verdict.color}`}>{cv.toFixed(3)}</span>
+            <span className={`tabular-nums ml-1 font-bold ${verdict.color}`}>
+              {cv.toFixed(3)}
+            </span>
           </div>
         </div>
       </div>
@@ -739,7 +1141,17 @@ function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: Spe
 
 // ─── State–Action Temporal Alignment ────────────────────────────
 
-function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Record<string, number>[]; fps: number; agg?: AggAlignment | null; numEpisodes?: number }) {
+function StateActionAlignmentSection({
+  data,
+  fps,
+  agg,
+  numEpisodes,
+}: {
+  data: Record<string, number>[];
+  fps: number;
+  agg?: AggAlignment | null;
+  numEpisodes?: number;
+}) {
   const isFs = useIsFullscreen();
   const result = useMemo(() => {
     if (agg) return { ...agg, fromAgg: true };
@@ -753,7 +1165,9 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
     // Match action↔state by suffix, fall back to index matching
     const pairs: [string, string][] = [];
     for (const aKey of actionKeys) {
-      const match = stateKeys.find(sKey => shortName(sKey) === shortName(aKey));
+      const match = stateKeys.find(
+        (sKey) => shortName(sKey) === shortName(aKey),
+      );
       if (match) pairs.push([aKey, match]);
     }
     if (pairs.length === 0) {
@@ -765,20 +1179,27 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
     // Per-pair cross-correlation
     const pairCorrs: number[][] = [];
     for (const [aKey, sKey] of pairs) {
-      const aVals = data.map(row => row[aKey] ?? 0);
-      const sDeltas = data.slice(1).map((row, i) => (row[sKey] ?? 0) - (data[i][sKey] ?? 0));
+      const aVals = data.map((row) => row[aKey] ?? 0);
+      const sDeltas = data
+        .slice(1)
+        .map((row, i) => (row[sKey] ?? 0) - (data[i][sKey] ?? 0));
       const n = Math.min(aVals.length, sDeltas.length);
       const aM = aVals.slice(0, n).reduce((a, b) => a + b, 0) / n;
       const sM = sDeltas.slice(0, n).reduce((a, b) => a + b, 0) / n;
 
       const corrs: number[] = [];
       for (let lag = -maxLag; lag <= maxLag; lag++) {
-        let sum = 0, aV = 0, sV = 0;
+        let sum = 0,
+          aV = 0,
+          sV = 0;
         for (let t = 0; t < n; t++) {
           const sIdx = t + lag;
           if (sIdx < 0 || sIdx >= sDeltas.length) continue;
-          const a = aVals[t] - aM, s = sDeltas[sIdx] - sM;
-          sum += a * s; aV += a * a; sV += s * s;
+          const a = aVals[t] - aM,
+            s = sDeltas[sIdx] - sM;
+          sum += a * s;
+          aV += a * a;
+          sV += s * s;
         }
         const d = Math.sqrt(aV * sV);
         corrs.push(d > 0 ? sum / d : 0);
@@ -789,9 +1210,10 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
     // Aggregate min/mean/max per lag
     const ccData = Array.from({ length: 2 * maxLag + 1 }, (_, li) => {
       const lag = -maxLag + li;
-      const vals = pairCorrs.map(pc => pc[li]);
+      const vals = pairCorrs.map((pc) => pc[li]);
       return {
-        lag, time: lag / fps,
+        lag,
+        time: lag / fps,
         max: Math.max(...vals),
         mean: vals.reduce((a, b) => a + b, 0) / vals.length,
         min: Math.min(...vals),
@@ -799,32 +1221,74 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
     });
 
     // Peaks of the envelope curves
-    let meanPeakLag = 0, meanPeakCorr = -Infinity;
-    let maxPeakLag = 0, maxPeakCorr = -Infinity;
-    let minPeakLag = 0, minPeakCorr = -Infinity;
+    let meanPeakLag = 0,
+      meanPeakCorr = -Infinity;
+    let maxPeakLag = 0,
+      maxPeakCorr = -Infinity;
+    let minPeakLag = 0,
+      minPeakCorr = -Infinity;
     for (const row of ccData) {
-      if (row.max > maxPeakCorr) { maxPeakCorr = row.max; maxPeakLag = row.lag; }
-      if (row.mean > meanPeakCorr) { meanPeakCorr = row.mean; meanPeakLag = row.lag; }
-      if (row.min > minPeakCorr) { minPeakCorr = row.min; minPeakLag = row.lag; }
+      if (row.max > maxPeakCorr) {
+        maxPeakCorr = row.max;
+        maxPeakLag = row.lag;
+      }
+      if (row.mean > meanPeakCorr) {
+        meanPeakCorr = row.mean;
+        meanPeakLag = row.lag;
+      }
+      if (row.min > minPeakCorr) {
+        minPeakCorr = row.min;
+        minPeakLag = row.lag;
+      }
     }
 
     // Per-pair individual peak lags (for showing the true range across dimensions)
-    const perPairPeakLags = pairCorrs.map(pc => {
-      let best = -Infinity, bestLag = 0;
+    const perPairPeakLags = pairCorrs.map((pc) => {
+      let best = -Infinity,
+        bestLag = 0;
       for (let li = 0; li < pc.length; li++) {
-        if (pc[li] > best) { best = pc[li]; bestLag = -maxLag + li; }
+        if (pc[li] > best) {
+          best = pc[li];
+          bestLag = -maxLag + li;
+        }
       }
       return bestLag;
     });
     const lagRangeMin = Math.min(...perPairPeakLags);
     const lagRangeMax = Math.max(...perPairPeakLags);
 
-    return { ccData, meanPeakLag, meanPeakCorr, maxPeakLag, maxPeakCorr, minPeakLag, minPeakCorr, lagRangeMin, lagRangeMax, numPairs: pairs.length, fromAgg: false };
+    return {
+      ccData,
+      meanPeakLag,
+      meanPeakCorr,
+      maxPeakLag,
+      maxPeakCorr,
+      minPeakLag,
+      minPeakCorr,
+      lagRangeMin,
+      lagRangeMax,
+      numPairs: pairs.length,
+      fromAgg: false,
+    };
   }, [data, fps, agg]);
 
   if (!result) return null;
-  const { ccData, meanPeakLag, meanPeakCorr, maxPeakLag, maxPeakCorr, minPeakLag, minPeakCorr, lagRangeMin, lagRangeMax, numPairs, fromAgg } = result;
-  const scopeLabel = fromAgg ? `${numEpisodes} episodes sampled` : "current episode";
+  const {
+    ccData,
+    meanPeakLag,
+    meanPeakCorr,
+    maxPeakLag,
+    maxPeakCorr,
+    minPeakLag,
+    minPeakCorr,
+    lagRangeMin,
+    lagRangeMax,
+    numPairs,
+    fromAgg,
+  } = result;
+  const scopeLabel = fromAgg
+    ? `${numEpisodes} episodes sampled`
+    : "current episode";
 
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
@@ -832,20 +1296,27 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-slate-200">
             State–Action Temporal Alignment
-            <span className="text-xs text-slate-500 ml-2 font-normal">({scopeLabel}, {numPairs} matched pair{numPairs !== 1 ? "s" : ""})</span>
+            <span className="text-xs text-slate-500 ml-2 font-normal">
+              ({scopeLabel}, {numPairs} matched pair{numPairs !== 1 ? "s" : ""})
+            </span>
           </h3>
           <InfoToggle>
             <p className="text-xs text-slate-400">
-              Per-dimension cross-correlation between action<sub>d</sub>(t) and Δstate<sub>d</sub>(t+lag), aggregated as
-              <span className="text-orange-400"> max</span>, <span className="text-slate-200">mean</span>, and
-              <span className="text-blue-400"> min</span> across all matched action–state pairs.
-              The <span className="text-orange-400">peak lag</span> reveals the effective control delay — the time between
-              when an action is commanded and when the corresponding state changes.
+              Per-dimension cross-correlation between action<sub>d</sub>(t) and
+              Δstate<sub>d</sub>(t+lag), aggregated as
+              <span className="text-orange-400"> max</span>,{" "}
+              <span className="text-slate-200">mean</span>, and
+              <span className="text-blue-400"> min</span> across all matched
+              action–state pairs. The{" "}
+              <span className="text-orange-400">peak lag</span> reveals the
+              effective control delay — the time between when an action is
+              commanded and when the corresponding state changes.
               <br />
               <span className="text-slate-500">
-                Central to ACT (Zhao et al., 2023 — action chunking compensates for delay),
-                Real-Time Chunking (RTC, 2024), and Training-Time RTC (Biza et al., 2025) — all address
-                the timing mismatch between commanded actions and observed state changes.
+                Central to ACT (Zhao et al., 2023 — action chunking compensates
+                for delay), Real-Time Chunking (RTC, 2024), and Training-Time
+                RTC (Biza et al., 2025) — all address the timing mismatch
+                between commanded actions and observed state changes.
               </span>
             </p>
           </InfoToggle>
@@ -854,16 +1325,21 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
 
       {meanPeakLag !== 0 && (
         <div className="flex items-center gap-3 bg-orange-500/10 border border-orange-500/30 rounded-md px-4 py-2.5">
-          <span className="text-orange-400 font-bold text-lg tabular-nums">{meanPeakLag}</span>
+          <span className="text-orange-400 font-bold text-lg tabular-nums">
+            {meanPeakLag}
+          </span>
           <div>
             <p className="text-sm text-orange-300 font-medium">
-              Mean control delay: {meanPeakLag} step{Math.abs(meanPeakLag) !== 1 ? "s" : ""} ({(meanPeakLag / fps).toFixed(3)}s)
+              Mean control delay: {meanPeakLag} step
+              {Math.abs(meanPeakLag) !== 1 ? "s" : ""} (
+              {(meanPeakLag / fps).toFixed(3)}s)
             </p>
             <p className="text-xs text-slate-400">
               {meanPeakLag > 0
                 ? `State changes lag behind actions by ~${meanPeakLag} frames on average. Consider aligning action[t] with state[t+${meanPeakLag}].`
                 : `Actions lag behind state changes by ~${-meanPeakLag} frames on average (predictive actions).`}
-              {lagRangeMin !== lagRangeMax && ` Individual dimension peaks range from ${lagRangeMin} to ${lagRangeMax} steps.`}
+              {lagRangeMin !== lagRangeMax &&
+                ` Individual dimension peaks range from ${lagRangeMin} to ${lagRangeMax} steps.`}
             </p>
           </div>
         </div>
@@ -871,49 +1347,102 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
 
       <div className={isFs ? "h-[500px]" : "h-56"}>
         <ResponsiveContainer width="100%" height="100%">
-          <LineChart data={ccData} margin={{ top: 8, right: 16, left: 0, bottom: 16 }}>
+          <LineChart
+            data={ccData}
+            margin={{ top: 8, right: 16, left: 0, bottom: 16 }}
+          >
             <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
-            <XAxis dataKey="lag" stroke="#94a3b8"
-              label={{ value: "Lag (steps)", position: "insideBottom", offset: -8, fill: "#94a3b8", fontSize: 13 }} />
+            <XAxis
+              dataKey="lag"
+              stroke="#94a3b8"
+              label={{
+                value: "Lag (steps)",
+                position: "insideBottom",
+                offset: -8,
+                fill: "#94a3b8",
+                fontSize: 13,
+              }}
+            />
             <YAxis stroke="#94a3b8" domain={[-0.5, 1]} />
             <Tooltip
-              contentStyle={{ background: "#1e293b", border: "1px solid #475569", borderRadius: 6 }}
-              labelFormatter={(v) => `Lag ${v} (${(Number(v) / fps).toFixed(3)}s)`}
+              contentStyle={{
+                background: "#1e293b",
+                border: "1px solid #475569",
+                borderRadius: 6,
+              }}
+              labelFormatter={(v) =>
+                `Lag ${v} (${(Number(v) / fps).toFixed(3)}s)`
+              }
               formatter={(v: number) => v.toFixed(3)}
             />
-            <Line dataKey="max" stroke="#f97316" dot={false} strokeWidth={2} isAnimationActive={false} name="max" />
-            <Line dataKey="mean" stroke="#94a3b8" dot={false} strokeWidth={2} isAnimationActive={false} name="mean" />
-            <Line dataKey="min" stroke="#3b82f6" dot={false} strokeWidth={2} isAnimationActive={false} name="min" />
-            <Line dataKey={() => 0} stroke="#64748b" strokeDasharray="6 4" dot={false} name="zero" legendType="none" isAnimationActive={false} />
+            <Line
+              dataKey="max"
+              stroke="#f97316"
+              dot={false}
+              strokeWidth={2}
+              isAnimationActive={false}
+              name="max"
+            />
+            <Line
+              dataKey="mean"
+              stroke="#94a3b8"
+              dot={false}
+              strokeWidth={2}
+              isAnimationActive={false}
+              name="mean"
+            />
+            <Line
+              dataKey="min"
+              stroke="#3b82f6"
+              dot={false}
+              strokeWidth={2}
+              isAnimationActive={false}
+              name="min"
+            />
+            <Line
+              dataKey={() => 0}
+              stroke="#64748b"
+              strokeDasharray="6 4"
+              dot={false}
+              name="zero"
+              legendType="none"
+              isAnimationActive={false}
+            />
           </LineChart>
         </ResponsiveContainer>
-              </div>
+      </div>
 
       <div className="flex flex-wrap gap-x-4 gap-y-1 px-1">
         <div className="flex items-center gap-1.5">
           <span className="w-3 h-[3px] rounded-full shrink-0 bg-orange-500" />
-          <span className="text-xs text-slate-400">max (peak: lag {maxPeakLag}, r={maxPeakCorr.toFixed(3)})</span>
-            </div>
+          <span className="text-xs text-slate-400">
+            max (peak: lag {maxPeakLag}, r={maxPeakCorr.toFixed(3)})
+          </span>
+        </div>
         <div className="flex items-center gap-1.5">
           <span className="w-3 h-[3px] rounded-full shrink-0 bg-slate-400" />
-          <span className="text-xs text-slate-400">mean (peak: lag {meanPeakLag}, r={meanPeakCorr.toFixed(3)})</span>
-          </div>
+          <span className="text-xs text-slate-400">
+            mean (peak: lag {meanPeakLag}, r={meanPeakCorr.toFixed(3)})
+          </span>
+        </div>
         <div className="flex items-center gap-1.5">
           <span className="w-3 h-[3px] rounded-full shrink-0 bg-blue-500" />
-          <span className="text-xs text-slate-400">min (peak: lag {minPeakLag}, r={minPeakCorr.toFixed(3)})</span>
+          <span className="text-xs text-slate-400">
+            min (peak: lag {minPeakLag}, r={minPeakCorr.toFixed(3)})
+          </span>
         </div>
       </div>
 
       {meanPeakLag === 0 && (
         <p className="text-xs text-green-400">
-          Mean peak correlation at lag 0 (r={meanPeakCorr.toFixed(3)}) — actions and state changes are well-aligned in this episode.
+          Mean peak correlation at lag 0 (r={meanPeakCorr.toFixed(3)}) — actions
+          and state changes are well-aligned in this episode.
         </p>
       )}
     </div>
   );
 }
 
-
 // ─── Main Panel ──────────────────────────────────────────────────
 
 interface ActionInsightsPanelProps {
@@ -935,38 +1464,74 @@ const ActionInsightsPanel: React.FC<ActionInsightsPanelProps> = ({
   return (
     <div className="max-w-5xl mx-auto py-6 space-y-8">
       <div className="flex items-center justify-between flex-wrap gap-4">
-      <div>
-        <h2 className="text-xl font-bold text-slate-100">Action Insights</h2>
-        <p className="text-sm text-slate-400 mt-1">
-          Data-driven analysis to guide action chunking, data quality assessment, and training configuration.
-        </p>
+        <div>
+          <h2 className="text-xl font-bold text-slate-100">Action Insights</h2>
+          <p className="text-sm text-slate-400 mt-1">
+            Data-driven analysis to guide action chunking, data quality
+            assessment, and training configuration.
+          </p>
         </div>
         <div className="flex items-center gap-3 shrink-0">
-          <span className={`text-sm ${mode === "episode" ? "text-slate-100 font-medium" : "text-slate-500"}`}>Current Episode</span>
+          <span
+            className={`text-sm ${mode === "episode" ? "text-slate-100 font-medium" : "text-slate-500"}`}
+          >
+            Current Episode
+          </span>
           <button
-            onClick={() => setMode(m => m === "episode" ? "dataset" : "episode")}
+            onClick={() =>
+              setMode((m) => (m === "episode" ? "dataset" : "episode"))
+            }
             className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${mode === "dataset" ? "bg-orange-500" : "bg-slate-600"}`}
             aria-label="Toggle episode/dataset scope"
           >
-            <span className={`inline-block w-3.5 h-3.5 bg-white rounded-full transition-transform ${mode === "dataset" ? "translate-x-[18px]" : "translate-x-[3px]"}`} />
+            <span
+              className={`inline-block w-3.5 h-3.5 bg-white rounded-full transition-transform ${mode === "dataset" ? "translate-x-[18px]" : "translate-x-[3px]"}`}
+            />
           </button>
-          <span className={`text-sm ${mode === "dataset" ? "text-slate-100 font-medium" : "text-slate-500"}`}>
-            All Episodes{crossEpisodeData ? ` (${crossEpisodeData.numEpisodes})` : ""}
+          <span
+            className={`text-sm ${mode === "dataset" ? "text-slate-100 font-medium" : "text-slate-500"}`}
+          >
+            All Episodes
+            {crossEpisodeData ? ` (${crossEpisodeData.numEpisodes})` : ""}
           </span>
         </div>
       </div>
 
-      <FullscreenWrapper><AutocorrelationSection data={flatChartData} fps={fps} agg={showAgg ? crossEpisodeData?.aggAutocorrelation : null} numEpisodes={crossEpisodeData?.numEpisodes} /></FullscreenWrapper>
-      <FullscreenWrapper><StateActionAlignmentSection data={flatChartData} fps={fps} agg={showAgg ? crossEpisodeData?.aggAlignment : null} numEpisodes={crossEpisodeData?.numEpisodes} /></FullscreenWrapper>
-
-      {crossEpisodeData?.speedDistribution && crossEpisodeData.speedDistribution.length > 2 && (
-        <FullscreenWrapper><SpeedVarianceSection distribution={crossEpisodeData.speedDistribution} numEpisodes={crossEpisodeData.numEpisodes} /></FullscreenWrapper>
-      )}
-      <FullscreenWrapper><VarianceHeatmap data={crossEpisodeData} loading={crossEpisodeLoading} /></FullscreenWrapper>
+      <FullscreenWrapper>
+        <AutocorrelationSection
+          data={flatChartData}
+          fps={fps}
+          agg={showAgg ? crossEpisodeData?.aggAutocorrelation : null}
+          numEpisodes={crossEpisodeData?.numEpisodes}
+        />
+      </FullscreenWrapper>
+      <FullscreenWrapper>
+        <StateActionAlignmentSection
+          data={flatChartData}
+          fps={fps}
+          agg={showAgg ? crossEpisodeData?.aggAlignment : null}
+          numEpisodes={crossEpisodeData?.numEpisodes}
+        />
+      </FullscreenWrapper>
+
+      {crossEpisodeData?.speedDistribution &&
+        crossEpisodeData.speedDistribution.length > 2 && (
+          <FullscreenWrapper>
+            <SpeedVarianceSection
+              distribution={crossEpisodeData.speedDistribution}
+              numEpisodes={crossEpisodeData.numEpisodes}
+            />
+          </FullscreenWrapper>
+        )}
+      <FullscreenWrapper>
+        <VarianceHeatmap
+          data={crossEpisodeData}
+          loading={crossEpisodeLoading}
+        />
+      </FullscreenWrapper>
     </div>
   );
 };
 
 export default ActionInsightsPanel;
 export { ActionVelocitySection, FullscreenWrapper };
-

src/components/data-recharts.tsx

@@ -25,14 +25,23 @@ import React, { useMemo } from "react";
 const SERIES_NAME_DELIMITER = " | ";
 
 const CHART_COLORS = [
-  "#f97316", "#3b82f6", "#22c55e", "#ef4444", "#a855f7",
-  "#eab308", "#06b6d4", "#ec4899", "#14b8a6", "#f59e0b",
-  "#6366f1", "#84cc16",
+  "#f97316",
+  "#3b82f6",
+  "#22c55e",
+  "#ef4444",
+  "#a855f7",
+  "#eab308",
+  "#06b6d4",
+  "#ec4899",
+  "#14b8a6",
+  "#f59e0b",
+  "#6366f1",
+  "#84cc16",
 ];
 
 function mergeGroups(data: ChartRow[][]): ChartRow[] {
   if (data.length <= 1) return data[0] ?? [];
-  const maxLen = Math.max(...data.map(g => g.length));
+  const maxLen = Math.max(...data.map((g) => g.length));
   const merged: ChartRow[] = [];
   for (let i = 0; i < maxLen; i++) {
     const row: ChartRow = {};
@@ -40,7 +49,10 @@ function mergeGroups(data: ChartRow[][]): ChartRow[] {
       const src = group[i];
       if (!src) continue;
       for (const [k, v] of Object.entries(src)) {
-        if (k === "timestamp") { row[k] = v; continue; }
+        if (k === "timestamp") {
+          row[k] = v;
+          continue;
+        }
         row[k] = v;
       }
     }
@@ -58,7 +70,10 @@ export const DataRecharts = React.memo(
       if (typeof onChartsReady === "function") onChartsReady();
     }, [onChartsReady]);
 
-    const combinedData = useMemo(() => expanded ? mergeGroups(data) : [], [data, expanded]);
+    const combinedData = useMemo(
+      () => (expanded ? mergeGroups(data) : []),
+      [data, expanded],
+    );
 
     if (!Array.isArray(data) || data.length === 0) return null;
 
@@ -67,19 +82,38 @@ export const DataRecharts = React.memo(
         {data.length > 1 && (
           <div className="flex justify-end mb-2">
             <button
-              onClick={() => setExpanded(v => !v)}
+              onClick={() => setExpanded((v) => !v)}
               className={`text-xs px-2.5 py-1 rounded transition-colors flex items-center gap-1.5 ${
                 expanded
                   ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
                   : "bg-slate-800/60 text-slate-400 hover:text-slate-200 border border-slate-700/50"
               }`}
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 {expanded ? (
-                  <><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></>
+                  <>
+                    <polyline points="4 14 10 14 10 20" />
+                    <polyline points="20 10 14 10 14 4" />
+                    <line x1="14" y1="10" x2="21" y2="3" />
+                    <line x1="3" y1="21" x2="10" y2="14" />
+                  </>
                 ) : (
-                  <><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></>
+                  <>
+                    <polyline points="15 3 21 3 21 9" />
+                    <polyline points="9 21 3 21 3 15" />
+                    <line x1="21" y1="3" x2="14" y2="10" />
+                    <line x1="3" y1="21" x2="10" y2="14" />
+                  </>
                 )}
               </svg>
               {expanded ? "Split charts" : "Combine all"}
@@ -88,11 +122,21 @@ export const DataRecharts = React.memo(
         )}
 
         {expanded ? (
-          <SingleDataGraph data={combinedData} hoveredTime={hoveredTime} setHoveredTime={setHoveredTime} tall />
+          <SingleDataGraph
+            data={combinedData}
+            hoveredTime={hoveredTime}
+            setHoveredTime={setHoveredTime}
+            tall
+          />
         ) : (
           <div className="grid md:grid-cols-2 grid-cols-1 gap-4">
             {data.map((group, idx) => (
-              <SingleDataGraph key={idx} data={group} hoveredTime={hoveredTime} setHoveredTime={setHoveredTime} />
+              <SingleDataGraph
+                key={idx}
+                data={group}
+                hoveredTime={hoveredTime}
+                setHoveredTime={setHoveredTime}
+              />
             ))}
           </div>
         )}
@@ -114,7 +158,10 @@ const SingleDataGraph = React.memo(
     tall?: boolean;
   }) => {
     const { currentTime, setCurrentTime } = useTime();
-    function flattenRow(row: Record<string, number | Record<string, number>>, prefix = ""): Record<string, number> {
+    function flattenRow(
+      row: Record<string, number | Record<string, number>>,
+      prefix = "",
+    ): Record<string, number> {
       const result: Record<string, number> = {};
       for (const [key, value] of Object.entries(row)) {
         // Special case: if this is a group value that is a primitive, assign to prefix.key
@@ -192,7 +239,9 @@ const SingleDataGraph = React.memo(
       setHoveredTime(null);
     };
 
-    const handleClick = (data: { activePayload?: { payload: { timestamp: number } }[] } | null) => {
+    const handleClick = (
+      data: { activePayload?: { payload: { timestamp: number } }[] } | null,
+    ) => {
       if (data?.activePayload?.length) {
         setCurrentTime(data.activePayload[0].payload.timestamp);
       }
@@ -268,13 +317,18 @@ const SingleDataGraph = React.memo(
                     className="size-3"
                     style={{ accentColor: color }}
                   />
-                  <span className="text-xs font-semibold text-slate-200">{group}</span>
+                  <span className="text-xs font-semibold text-slate-200">
+                    {group}
+                  </span>
                 </label>
                 <div className="pl-5 flex flex-col gap-0.5 mt-0.5">
                   {children.map((key) => {
                     const label = key.split(SERIES_NAME_DELIMITER).pop() ?? key;
                     return (
-                      <label key={key} className="flex items-center gap-1.5 cursor-pointer select-none">
+                      <label
+                        key={key}
+                        className="flex items-center gap-1.5 cursor-pointer select-none"
+                      >
                         <input
                           type="checkbox"
                           checked={visibleKeys.includes(key)}
@@ -282,9 +336,17 @@ const SingleDataGraph = React.memo(
                           className="size-2.5"
                           style={{ accentColor: color }}
                         />
-                        <span className={`text-xs ${visibleKeys.includes(key) ? "text-slate-300" : "text-slate-500"}`}>{label}</span>
-                        <span className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}>
-                          {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "–"}
+                        <span
+                          className={`text-xs ${visibleKeys.includes(key) ? "text-slate-300" : "text-slate-500"}`}
+                        >
+                          {label}
+                        </span>
+                        <span
+                          className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}
+                        >
+                          {typeof currentData[key] === "number"
+                            ? currentData[key].toFixed(2)
+                            : "–"}
                         </span>
                       </label>
                     );
@@ -296,7 +358,10 @@ const SingleDataGraph = React.memo(
           {singles.map((key) => {
             const color = groupColorMap[key];
             return (
-              <label key={key} className="flex items-center gap-1.5 cursor-pointer select-none">
+              <label
+                key={key}
+                className="flex items-center gap-1.5 cursor-pointer select-none"
+              >
                 <input
                   type="checkbox"
                   checked={visibleKeys.includes(key)}
@@ -304,9 +369,17 @@ const SingleDataGraph = React.memo(
                   className="size-3"
                   style={{ accentColor: color }}
                 />
-                <span className={`text-xs ${visibleKeys.includes(key) ? "text-slate-200" : "text-slate-500"}`}>{key}</span>
-                <span className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}>
-                  {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "–"}
+                <span
+                  className={`text-xs ${visibleKeys.includes(key) ? "text-slate-200" : "text-slate-500"}`}
+                >
+                  {key}
+                </span>
+                <span
+                  className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}
+                >
+                  {typeof currentData[key] === "number"
+                    ? currentData[key].toFixed(2)
+                    : "–"}
                 </span>
               </label>
             );
@@ -319,7 +392,7 @@ const SingleDataGraph = React.memo(
     const chartTitle = useMemo(() => {
       const featureNames = Object.keys(groups);
       if (featureNames.length > 0) {
-        const suffixes = featureNames.map(g => {
+        const suffixes = featureNames.map((g) => {
           const parts = g.split(SERIES_NAME_DELIMITER);
           return parts[parts.length - 1];
         });
@@ -331,9 +404,17 @@ const SingleDataGraph = React.memo(
     return (
       <div className="w-full bg-slate-800/40 rounded-lg border border-slate-700/50 p-3">
         {chartTitle && (
-          <p className="text-xs font-medium text-slate-300 mb-1 px-1 truncate" title={chartTitle}>{chartTitle}</p>
+          <p
+            className="text-xs font-medium text-slate-300 mb-1 px-1 truncate"
+            title={chartTitle}
+          >
+            {chartTitle}
+          </p>
         )}
-        <div className={`w-full ${tall ? "h-[500px]" : "h-72"}`} onMouseLeave={handleMouseLeave}>
+        <div
+          className={`w-full ${tall ? "h-[500px]" : "h-72"}`}
+          onMouseLeave={handleMouseLeave}
+        >
           <ResponsiveContainer width="100%" height="100%">
             <LineChart
               data={chartData}
@@ -341,12 +422,18 @@ const SingleDataGraph = React.memo(
               margin={{ top: 12, right: 12, left: -8, bottom: 8 }}
               onClick={handleClick}
               onMouseMove={(state) => {
-                const payload = state?.activePayload?.[0]?.payload as { timestamp?: number } | undefined;
+                const payload = state?.activePayload?.[0]?.payload as
+                  | { timestamp?: number }
+                  | undefined;
                 setHoveredTime(payload?.timestamp ?? null);
               }}
               onMouseLeave={handleMouseLeave}
             >
-              <CartesianGrid strokeDasharray="3 3" stroke="#334155" strokeOpacity={0.6} />
+              <CartesianGrid
+                strokeDasharray="3 3"
+                stroke="#334155"
+                strokeOpacity={0.6}
+              />
               <XAxis
                 dataKey="timestamp"
                 domain={[
@@ -384,7 +471,9 @@ const SingleDataGraph = React.memo(
               />
 
               {dataKeys.map((key) => {
-                const group = key.includes(SERIES_NAME_DELIMITER) ? key.split(SERIES_NAME_DELIMITER)[0] : key;
+                const group = key.includes(SERIES_NAME_DELIMITER)
+                  ? key.split(SERIES_NAME_DELIMITER)[0]
+                  : key;
                 const color = groupColorMap[group];
                 let strokeDasharray: string | undefined = undefined;
                 if (groups[group] && groups[group].length > 1) {

src/components/filtering-panel.tsx

@@ -8,7 +8,10 @@ import type {
   EpisodeLengthStats,
   EpisodeLengthInfo,
 } from "@/app/[org]/[dataset]/[episode]/fetch-data";
-import { ActionVelocitySection, FullscreenWrapper } from "@/components/action-insights-panel";
+import {
+  ActionVelocitySection,
+  FullscreenWrapper,
+} from "@/components/action-insights-panel";
 
 // ─── Shared small components ─────────────────────────────────────
 
@@ -16,11 +19,24 @@ function FlagBtn({ id }: { id: number }) {
   const { has, toggle } = useFlaggedEpisodes();
   const flagged = has(id);
   return (
-    <button onClick={() => toggle(id)} title={flagged ? "Unflag episode" : "Flag for review"}
-      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill={flagged ? "currentColor" : "none"}
-        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+    <button
+      onClick={() => toggle(id)}
+      title={flagged ? "Unflag episode" : "Flag for review"}
+      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill={flagged ? "currentColor" : "none"}
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+        <line x1="4" y1="22" x2="4" y2="15" />
       </svg>
     </button>
   );
@@ -29,11 +45,23 @@ function FlagBtn({ id }: { id: number }) {
 function FlagAllBtn({ ids, label }: { ids: number[]; label?: string }) {
   const { addMany } = useFlaggedEpisodes();
   return (
-    <button onClick={() => addMany(ids)}
-      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1">
-      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+    <button
+      onClick={() => addMany(ids)}
+      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="10"
+        height="10"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+        <line x1="4" y1="22" x2="4" y2="15" />
       </svg>
       {label ?? "Flag all"}
     </button>
@@ -44,32 +72,53 @@ function FlagAllBtn({ ids, label }: { ids: number[]; label?: string }) {
 
 function LowMovementSection({ episodes }: { episodes: LowMovementEpisode[] }) {
   if (episodes.length === 0) return null;
-  const maxMovement = Math.max(...episodes.map(e => e.totalMovement), 1e-10);
+  const maxMovement = Math.max(...episodes.map((e) => e.totalMovement), 1e-10);
 
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-3">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-slate-200">Lowest-Movement Episodes</h3>
-        <FlagAllBtn ids={episodes.map(e => e.episodeIndex)} />
+        <h3 className="text-sm font-semibold text-slate-200">
+          Lowest-Movement Episodes
+        </h3>
+        <FlagAllBtn ids={episodes.map((e) => e.episodeIndex)} />
       </div>
       <p className="text-xs text-slate-400">
-        Episodes with the lowest average action change per frame. Very low values may indicate the robot was standing still or the episode was recorded incorrectly.
+        Episodes with the lowest average action change per frame. Very low
+        values may indicate the robot was standing still or the episode was
+        recorded incorrectly.
       </p>
-      <div className="grid gap-2" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
-        {episodes.map(ep => (
-          <div key={ep.episodeIndex} className="bg-slate-900/50 rounded-md px-3 py-2 flex items-center gap-3">
+      <div
+        className="grid gap-2"
+        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}
+      >
+        {episodes.map((ep) => (
+          <div
+            key={ep.episodeIndex}
+            className="bg-slate-900/50 rounded-md px-3 py-2 flex items-center gap-3"
+          >
             <FlagBtn id={ep.episodeIndex} />
-            <span className="text-xs text-slate-300 font-medium shrink-0">ep {ep.episodeIndex}</span>
+            <span className="text-xs text-slate-300 font-medium shrink-0">
+              ep {ep.episodeIndex}
+            </span>
             <div className="flex-1 min-w-0">
               <div className="h-1.5 bg-slate-700 rounded-full overflow-hidden">
-                <div className="h-full rounded-full"
+                <div
+                  className="h-full rounded-full"
                   style={{
                     width: `${Math.max(2, (ep.totalMovement / maxMovement) * 100)}%`,
-                    background: ep.totalMovement / maxMovement < 0.15 ? "#ef4444" : ep.totalMovement / maxMovement < 0.4 ? "#eab308" : "#22c55e",
-                  }} />
+                    background:
+                      ep.totalMovement / maxMovement < 0.15
+                        ? "#ef4444"
+                        : ep.totalMovement / maxMovement < 0.4
+                          ? "#eab308"
+                          : "#22c55e",
+                  }}
+                />
               </div>
             </div>
-            <span className="text-xs text-slate-500 tabular-nums shrink-0">{ep.totalMovement.toFixed(2)}</span>
+            <span className="text-xs text-slate-500 tabular-nums shrink-0">
+              {ep.totalMovement.toFixed(2)}
+            </span>
           </div>
         ))}
       </div>
@@ -81,23 +130,37 @@ function LowMovementSection({ episodes }: { episodes: LowMovementEpisode[] }) {
 
 function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
   const { addMany } = useFlaggedEpisodes();
-  const globalMin = useMemo(() => Math.min(...episodes.map((e) => e.lengthSeconds)), [episodes]);
-  const globalMax = useMemo(() => Math.max(...episodes.map((e) => e.lengthSeconds)), [episodes]);
+  const globalMin = useMemo(
+    () => Math.min(...episodes.map((e) => e.lengthSeconds)),
+    [episodes],
+  );
+  const globalMax = useMemo(
+    () => Math.max(...episodes.map((e) => e.lengthSeconds)),
+    [episodes],
+  );
 
   const [rangeMin, setRangeMin] = useState(globalMin);
   const [rangeMax, setRangeMax] = useState(globalMax);
 
-  const outsideIds = useMemo(() =>
-    episodes.filter((e) => e.lengthSeconds < rangeMin || e.lengthSeconds > rangeMax)
-      .map((e) => e.episodeIndex).sort((a, b) => a - b),
-    [episodes, rangeMin, rangeMax]);
+  const outsideIds = useMemo(
+    () =>
+      episodes
+        .filter((e) => e.lengthSeconds < rangeMin || e.lengthSeconds > rangeMax)
+        .map((e) => e.episodeIndex)
+        .sort((a, b) => a - b),
+    [episodes, rangeMin, rangeMax],
+  );
 
   const rangeChanged = rangeMin > globalMin || rangeMax < globalMax;
-  const step = Math.max(0.01, Math.round((globalMax - globalMin) * 0.001 * 100) / 100) || 0.01;
+  const step =
+    Math.max(0.01, Math.round((globalMax - globalMin) * 0.001 * 100) / 100) ||
+    0.01;
 
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
-      <h3 className="text-sm font-semibold text-slate-200">Episode Length Filter</h3>
+      <h3 className="text-sm font-semibold text-slate-200">
+        Episode Length Filter
+      </h3>
 
       <div className="space-y-2">
         <div className="flex items-center justify-between text-xs text-slate-400">
@@ -106,28 +169,49 @@ function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
         </div>
         <div className="relative h-5">
           <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1 rounded bg-slate-700" />
-          <div className="absolute top-1/2 -translate-y-1/2 h-1 rounded bg-orange-500"
+          <div
+            className="absolute top-1/2 -translate-y-1/2 h-1 rounded bg-orange-500"
             style={{
               left: `${((rangeMin - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
               right: `${100 - ((rangeMax - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
-            }} />
-          <input type="range" min={globalMin} max={globalMax} step={step} value={rangeMin}
-            onChange={(e) => setRangeMin(Math.min(Number(e.target.value), rangeMax))}
-            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer" />
-          <input type="range" min={globalMin} max={globalMax} step={step} value={rangeMax}
-            onChange={(e) => setRangeMax(Math.max(Number(e.target.value), rangeMin))}
-            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer" />
+            }}
+          />
+          <input
+            type="range"
+            min={globalMin}
+            max={globalMax}
+            step={step}
+            value={rangeMin}
+            onChange={(e) =>
+              setRangeMin(Math.min(Number(e.target.value), rangeMax))
+            }
+            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer"
+          />
+          <input
+            type="range"
+            min={globalMin}
+            max={globalMax}
+            step={step}
+            value={rangeMax}
+            onChange={(e) =>
+              setRangeMax(Math.max(Number(e.target.value), rangeMin))
+            }
+            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer"
+          />
         </div>
       </div>
 
       {rangeChanged && (
         <div className="flex items-center justify-between">
           <span className="text-xs text-slate-400">
-            {outsideIds.length} episode{outsideIds.length !== 1 ? "s" : ""} outside range
+            {outsideIds.length} episode{outsideIds.length !== 1 ? "s" : ""}{" "}
+            outside range
           </span>
           {outsideIds.length > 0 && (
-            <button onClick={() => addMany(outsideIds)}
-              className="text-xs bg-orange-500/20 text-orange-400 border border-orange-500/40 rounded px-2 py-1 hover:bg-orange-500/30 transition-colors">
+            <button
+              onClick={() => addMany(outsideIds)}
+              className="text-xs bg-orange-500/20 text-orange-400 border border-orange-500/40 rounded px-2 py-1 hover:bg-orange-500/30 transition-colors"
+            >
               Flag {outsideIds.length} outside range
             </button>
           )}
@@ -148,7 +232,13 @@ interface FilteringPanelProps {
   onViewFlaggedEpisodes?: () => void;
 }
 
-function FlaggedIdsCopyBar({ repoId, onViewEpisodes }: { repoId: string; onViewEpisodes?: () => void }) {
+function FlaggedIdsCopyBar({
+  repoId,
+  onViewEpisodes,
+}: {
+  repoId: string;
+  onViewEpisodes?: () => void;
+}) {
   const { flagged, count, clear } = useFlaggedEpisodes();
   const [copied, setCopied] = useState(false);
 
@@ -168,36 +258,89 @@ function FlaggedIdsCopyBar({ repoId, onViewEpisodes }: { repoId: string; onViewE
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-semibold text-orange-400">
           Flagged Episodes
-          <span className="text-xs text-slate-500 ml-2 font-normal">({count})</span>
+          <span className="text-xs text-slate-500 ml-2 font-normal">
+            ({count})
+          </span>
         </h3>
         <div className="flex items-center gap-2">
-          <button onClick={handleCopy}
+          <button
+            onClick={handleCopy}
             className="text-xs text-slate-400 hover:text-slate-200 transition-colors flex items-center gap-1"
-            title="Copy IDs">
+            title="Copy IDs"
+          >
             {copied ? (
-              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-green-400"><polyline points="20 6 9 17 4 12" /></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                className="text-green-400"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
             ) : (
-              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <rect x="9" y="9" width="13" height="13" rx="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
             )}
             Copy
           </button>
-          <button onClick={clear} className="text-xs text-slate-500 hover:text-red-400 transition-colors">Clear</button>
+          <button
+            onClick={clear}
+            className="text-xs text-slate-500 hover:text-red-400 transition-colors"
+          >
+            Clear
+          </button>
         </div>
       </div>
-      <p className="text-xs text-slate-300 tabular-nums leading-relaxed max-h-20 overflow-y-auto">{idStr}</p>
+      <p className="text-xs text-slate-300 tabular-nums leading-relaxed max-h-20 overflow-y-auto">
+        {idStr}
+      </p>
       {onViewEpisodes && (
-        <button onClick={onViewEpisodes}
-          className="w-full text-xs py-1.5 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-300 hover:text-white transition-colors flex items-center justify-center gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+        <button
+          onClick={onViewEpisodes}
+          className="w-full text-xs py-1.5 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-300 hover:text-white transition-colors flex items-center justify-center gap-1.5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+            <line x1="4" y1="22" x2="4" y2="15" />
           </svg>
           View flagged episodes
         </button>
       )}
       <div className="bg-slate-900/60 rounded-md px-3 py-2 border border-slate-700/60 space-y-2.5">
         <p className="text-xs text-slate-400">
-          <a href="https://github.com/huggingface/lerobot" target="_blank" rel="noopener noreferrer" className="text-orange-400 underline">LeRobot CLI</a> — delete flagged episodes:
+          <a
+            href="https://github.com/huggingface/lerobot"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-orange-400 underline"
+          >
+            LeRobot CLI
+          </a>{" "}
+          — delete flagged episodes:
         </p>
         <pre className="text-xs text-slate-300 bg-slate-950/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes (modifies original dataset)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
         <pre className="text-xs text-slate-300 bg-slate-950/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes and save to a new dataset (preserves original)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --new_repo_id ${repoId}_filtered \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
@@ -219,11 +362,15 @@ const FilteringPanel: React.FC<FilteringPanelProps> = ({
       <div>
         <h2 className="text-xl font-bold text-slate-100">Filtering</h2>
         <p className="text-sm text-slate-400 mt-1">
-          Identify and flag problematic episodes for removal. Flagged episodes appear in the sidebar and can be exported as a CLI command.
+          Identify and flag problematic episodes for removal. Flagged episodes
+          appear in the sidebar and can be exported as a CLI command.
         </p>
       </div>
 
-      <FlaggedIdsCopyBar repoId={repoId} onViewEpisodes={onViewFlaggedEpisodes} />
+      <FlaggedIdsCopyBar
+        repoId={repoId}
+        onViewEpisodes={onViewFlaggedEpisodes}
+      />
 
       {episodeLengthStats?.allEpisodeLengths && (
         <EpisodeLengthFilter episodes={episodeLengthStats.allEpisodeLengths} />
@@ -232,9 +379,24 @@ const FilteringPanel: React.FC<FilteringPanelProps> = ({
       {crossEpisodeLoading && (
         <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
           <div className="flex items-center gap-2 text-slate-400 text-sm py-4 justify-center">
-            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            <svg
+              className="animate-spin h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              />
             </svg>
             Loading cross-episode data…
           </div>
@@ -258,4 +420,3 @@ const FilteringPanel: React.FC<FilteringPanelProps> = ({
 };
 
 export default FilteringPanel;
-

src/components/overview-panel.tsx

@@ -1,12 +1,21 @@
 "use client";
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import type { EpisodeFrameInfo, EpisodeFramesData } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import type {
+  EpisodeFrameInfo,
+  EpisodeFramesData,
+} from "@/app/[org]/[dataset]/[episode]/fetch-data";
 import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
 
 const PAGE_SIZE = 48;
 
-function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast: boolean }) {
+function FrameThumbnail({
+  info,
+  showLast,
+}: {
+  info: EpisodeFrameInfo;
+  showLast: boolean;
+}) {
   const containerRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
   const [inView, setInView] = useState(false);
@@ -15,7 +24,12 @@ function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast:
     const el = containerRef.current;
     if (!el) return;
     const obs = new IntersectionObserver(
-      ([e]) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } },
+      ([e]) => {
+        if (e.isIntersecting) {
+          setInView(true);
+          obs.disconnect();
+        }
+      },
       { rootMargin: "200px" },
     );
     obs.observe(el);
@@ -28,7 +42,8 @@ function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast:
 
     const seek = () => {
       if (showLast) {
-        video.currentTime = info.lastFrameTime ?? Math.max(0, video.duration - 0.05);
+        video.currentTime =
+          info.lastFrameTime ?? Math.max(0, video.duration - 0.05);
       } else {
         video.currentTime = info.firstFrameTime;
       }
@@ -62,18 +77,33 @@ function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast:
         <button
           onClick={() => toggle(info.episodeIndex)}
           className={`absolute top-1 right-1 p-1 rounded transition-opacity ${
-            isFlagged ? "opacity-100 text-orange-400" : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-orange-400"
+            isFlagged
+              ? "opacity-100 text-orange-400"
+              : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-orange-400"
           }`}
           title={isFlagged ? "Unflag episode" : "Flag episode"}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill={isFlagged ? "currentColor" : "none"}
-            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill={isFlagged ? "currentColor" : "none"}
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+            <line x1="4" y1="22" x2="4" y2="15" />
           </svg>
         </button>
       </div>
-      <p className={`text-xs mt-1 tabular-nums ${isFlagged ? "text-orange-400" : "text-slate-400"}`}>
-        ep {info.episodeIndex}{isFlagged ? " ⚑" : ""}
+      <p
+        className={`text-xs mt-1 tabular-nums ${isFlagged ? "text-orange-400" : "text-slate-400"}`}
+      >
+        ep {info.episodeIndex}
+        {isFlagged ? " ⚑" : ""}
       </p>
     </div>
   );
@@ -86,7 +116,12 @@ interface OverviewPanelProps {
   onFlaggedOnlyChange?: (v: boolean) => void;
 }
 
-export default function OverviewPanel({ data, loading, flaggedOnly = false, onFlaggedOnlyChange }: OverviewPanelProps) {
+export default function OverviewPanel({
+  data,
+  loading,
+  flaggedOnly = false,
+  onFlaggedOnlyChange,
+}: OverviewPanelProps) {
   const { flagged, count: flagCount } = useFlaggedEpisodes();
   const [selectedCamera, setSelectedCamera] = useState<string>("");
   const [showLast, setShowLast] = useState(false);
@@ -99,17 +134,31 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
     }
   }, [data, selectedCamera]);
 
-  const handleCameraChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedCamera(e.target.value);
-    setPage(0);
-  }, []);
+  const handleCameraChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      setSelectedCamera(e.target.value);
+      setPage(0);
+    },
+    [],
+  );
 
   if (loading || !data) {
     return (
       <div className="flex items-center gap-2 text-slate-400 text-sm py-12 justify-center">
         <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          />
         </svg>
         Loading episode frames…
       </div>
@@ -117,14 +166,25 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
   }
 
   const allFrames = data.framesByCamera[selectedCamera] ?? [];
-  const frames = flaggedOnly ? allFrames.filter(f => flagged.has(f.episodeIndex)) : allFrames;
+  const frames = flaggedOnly
+    ? allFrames.filter((f) => flagged.has(f.episodeIndex))
+    : allFrames;
 
   if (frames.length === 0) {
     return (
       <div className="text-center py-8 space-y-2">
-        <p className="text-slate-500 italic">{flaggedOnly ? "No flagged episodes to show." : "No episode frames available."}</p>
+        <p className="text-slate-500 italic">
+          {flaggedOnly
+            ? "No flagged episodes to show."
+            : "No episode frames available."}
+        </p>
         {flaggedOnly && onFlaggedOnlyChange && (
-          <button onClick={() => onFlaggedOnlyChange(false)} className="text-xs text-orange-400 hover:text-orange-300 underline">Show all episodes</button>
+          <button
+            onClick={() => onFlaggedOnlyChange(false)}
+            className="text-xs text-orange-400 hover:text-orange-300 underline"
+          >
+            Show all episodes
+          </button>
         )}
       </div>
     );
@@ -136,7 +196,9 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
   return (
     <div className="max-w-7xl mx-auto py-6 space-y-5">
       <p className="text-sm text-slate-500">
-        Use first/last frame views to spot episodes with bad end states or other anomalies. Hover over a thumbnail and click the flag icon to mark episodes with wrong outcomes for review.
+        Use first/last frame views to spot episodes with bad end states or other
+        anomalies. Hover over a thumbnail and click the flag icon to mark
+        episodes with wrong outcomes for review.
       </p>
 
       {/* Controls row */}
@@ -150,7 +212,9 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
               className="bg-slate-800 text-slate-200 text-sm rounded px-3 py-1.5 border border-slate-600 focus:outline-none focus:border-orange-500"
             >
               {data.cameras.map((cam) => (
-                <option key={cam} value={cam}>{cam}</option>
+                <option key={cam} value={cam}>
+                  {cam}
+                </option>
               ))}
             </select>
           )}
@@ -158,16 +222,29 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
           {/* Flagged only toggle */}
           {flagCount > 0 && onFlaggedOnlyChange && (
             <button
-              onClick={() => { onFlaggedOnlyChange(!flaggedOnly); setPage(0); }}
+              onClick={() => {
+                onFlaggedOnlyChange(!flaggedOnly);
+                setPage(0);
+              }}
               className={`text-xs px-2.5 py-1 rounded transition-colors flex items-center gap-1.5 ${
                 flaggedOnly
                   ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
                   : "text-slate-400 hover:text-slate-200 border border-slate-700"
               }`}
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill={flaggedOnly ? "currentColor" : "none"}
-                stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill={flaggedOnly ? "currentColor" : "none"}
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
+                <line x1="4" y1="22" x2="4" y2="15" />
               </svg>
               Flagged only ({flagCount})
             </button>
@@ -175,7 +252,9 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
 
           {/* First / Last toggle */}
           <div className="flex items-center gap-3">
-            <span className={`text-sm ${!showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}>
+            <span
+              className={`text-sm ${!showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}
+            >
               First Frame
             </span>
             <button
@@ -187,7 +266,9 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
                 className={`inline-block w-3.5 h-3.5 bg-white rounded-full transition-transform ${showLast ? "translate-x-[18px]" : "translate-x-[3px]"}`}
               />
             </button>
-            <span className={`text-sm ${showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}>
+            <span
+              className={`text-sm ${showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}
+            >
               Last Frame
             </span>
           </div>
@@ -218,9 +299,16 @@ export default function OverviewPanel({ data, loading, flaggedOnly = false, onFl
       </div>
 
       {/* Adaptive grid — only current page's thumbnails are mounted */}
-      <div className="grid gap-3" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))" }}>
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))" }}
+      >
         {pageFrames.map((info) => (
-          <FrameThumbnail key={`${selectedCamera}-${info.episodeIndex}`} info={info} showLast={showLast} />
+          <FrameThumbnail
+            key={`${selectedCamera}-${info.episodeIndex}`}
+            info={info}
+            showLast={showLast}
+          />
         ))}
       </div>
     </div>

src/components/side-nav.tsx

@@ -70,7 +70,10 @@ const Sidebar: React.FC<SidebarProps> = ({
         <div className="ml-2 mt-1">
           <ul>
             {displayEpisodes.map((episode) => (
-              <li key={episode} className="mt-0.5 font-mono text-sm flex items-center gap-1">
+              <li
+                key={episode}
+                className="mt-0.5 font-mono text-sm flex items-center gap-1"
+              >
                 <Link
                   href={`./episode_${episode}`}
                   className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}

src/components/simple-videos-player.tsx

@@ -80,13 +80,13 @@ export const SimpleVideosPlayer = ({
             video.currentTime = info.segmentStart || 0;
             checkReady();
           };
-          
-          video.addEventListener('timeupdate', handleTimeUpdate);
-          video.addEventListener('loadeddata', handleLoadedData);
-          
+
+          video.addEventListener("timeupdate", handleTimeUpdate);
+          video.addEventListener("loadeddata", handleLoadedData);
+
           videoEventCleanup.set(video, () => {
-            video.removeEventListener('timeupdate', handleTimeUpdate);
-            video.removeEventListener('loadeddata', handleLoadedData);
+            video.removeEventListener("timeupdate", handleTimeUpdate);
+            video.removeEventListener("loadeddata", handleLoadedData);
           });
         } else {
           // For non-segmented videos, handle end of video
@@ -96,12 +96,12 @@ export const SimpleVideosPlayer = ({
               setCurrentTime(0);
             }
           };
-          
-          video.addEventListener('ended', handleEnded);
-          video.addEventListener('canplaythrough', checkReady, { once: true });
-          
+
+          video.addEventListener("ended", handleEnded);
+          video.addEventListener("canplaythrough", checkReady, { once: true });
+
           videoEventCleanup.set(video, () => {
-            video.removeEventListener('ended', handleEnded);
+            video.removeEventListener("ended", handleEnded);
           });
         }
       }
@@ -150,8 +150,9 @@ export const SimpleVideosPlayer = ({
   useEffect(() => {
     if (!videosReady) return;
 
-    const isExternalSeek = Math.abs(currentTime - lastVideoTimeRef.current) > 0.3;
-    
+    const isExternalSeek =
+      Math.abs(currentTime - lastVideoTimeRef.current) > 0.3;
+
     videoRefs.current.forEach((video, index) => {
       if (!video) return;
       if (hiddenVideos.includes(videosInfo[index].filename)) return;
@@ -164,7 +165,7 @@ export const SimpleVideosPlayer = ({
       if (info.isSegmented) {
         targetTime = (info.segmentStart || 0) + currentTime;
       }
-      
+
       if (Math.abs(video.currentTime - targetTime) > 0.2) {
         video.currentTime = targetTime;
       }
@@ -280,7 +281,9 @@ export const SimpleVideosPlayer = ({
                 </span>
               </p>
               <video
-                ref={(el: HTMLVideoElement | null) => { videoRefs.current[idx] = el; }}
+                ref={(el: HTMLVideoElement | null) => {
+                  videoRefs.current[idx] = el;
+                }}
                 className={`w-full object-contain ${
                   isEnlarged ? "max-h-[90vh] max-w-[90vw]" : ""
                 }`}

src/components/stats-panel.tsx

@@ -22,14 +22,19 @@ function formatTotalTime(totalFrames: number, fps: number): string {
 }
 
 /** SVG bar chart for the episode-length histogram */
-const EpisodeLengthHistogram: React.FC<{ data: { binLabel: string; count: number }[] }> = ({ data }) => {
+const EpisodeLengthHistogram: React.FC<{
+  data: { binLabel: string; count: number }[];
+}> = ({ data }) => {
   if (data.length === 0) return null;
   const maxCount = Math.max(...data.map((d) => d.count));
   if (maxCount === 0) return null;
 
   const totalWidth = 560;
   const gap = Math.max(1, Math.min(3, Math.floor(60 / data.length)));
-  const barWidth = Math.max(4, Math.floor((totalWidth - gap * data.length) / data.length));
+  const barWidth = Math.max(
+    4,
+    Math.floor((totalWidth - gap * data.length) / data.length),
+  );
   const chartHeight = 150;
   const labelHeight = 30;
   const topPad = 16;
@@ -38,7 +43,12 @@ const EpisodeLengthHistogram: React.FC<{ data: { binLabel: string; count: number
 
   return (
     <div className="overflow-x-auto">
-      <svg width={svgWidth} height={topPad + chartHeight + labelHeight} className="block" aria-label="Episode length distribution histogram">
+      <svg
+        width={svgWidth}
+        height={topPad + chartHeight + labelHeight}
+        className="block"
+        aria-label="Episode length distribution histogram"
+      >
         {data.map((bin, i) => {
           const barH = Math.max(1, (bin.count / maxCount) * chartHeight);
           const x = i * (barWidth + gap);
@@ -46,9 +56,22 @@ const EpisodeLengthHistogram: React.FC<{ data: { binLabel: string; count: number
           return (
             <g key={i}>
               <title>{`${bin.binLabel}: ${bin.count} episode${bin.count !== 1 ? "s" : ""}`}</title>
-              <rect x={x} y={y} width={barWidth} height={barH} className="fill-orange-500/80 hover:fill-orange-400 transition-colors" rx={Math.min(2, barWidth / 4)} />
+              <rect
+                x={x}
+                y={y}
+                width={barWidth}
+                height={barH}
+                className="fill-orange-500/80 hover:fill-orange-400 transition-colors"
+                rx={Math.min(2, barWidth / 4)}
+              />
               {bin.count > 0 && barWidth >= 8 && (
-                <text x={x + barWidth / 2} y={y - 3} textAnchor="middle" className="fill-slate-400" fontSize={Math.min(10, barWidth - 1)}>
+                <text
+                  x={x + barWidth / 2}
+                  y={y - 3}
+                  textAnchor="middle"
+                  className="fill-slate-400"
+                  fontSize={Math.min(10, barWidth - 1)}
+                >
                   {bin.count}
                 </text>
               )}
@@ -61,7 +84,14 @@ const EpisodeLengthHistogram: React.FC<{ data: { binLabel: string; count: number
           if (!isFirst && !isLast && idx % labelStep !== 0) return null;
           const label = bin.binLabel.split("–")[0];
           return (
-            <text key={idx} x={idx * (barWidth + gap) + barWidth / 2} y={topPad + chartHeight + 14} textAnchor="middle" className="fill-slate-400" fontSize={9}>
+            <text
+              key={idx}
+              x={idx * (barWidth + gap) + barWidth / 2}
+              y={topPad + chartHeight + 14}
+              textAnchor="middle"
+              className="fill-slate-400"
+              fontSize={9}
+            >
               {label}s
             </text>
           );
@@ -71,7 +101,10 @@ const EpisodeLengthHistogram: React.FC<{ data: { binLabel: string; count: number
   );
 };
 
-const Card: React.FC<{ label: string; value: string | number }> = ({ label, value }) => (
+const Card: React.FC<{ label: string; value: string | number }> = ({
+  label,
+  value,
+}) => (
   <div className="bg-slate-800/60 rounded-lg p-4 border border-slate-700">
     <p className="text-xs text-slate-400 uppercase tracking-wide">{label}</p>
     <p className="text-xl font-bold tabular-nums mt-1">{value}</p>
@@ -88,7 +121,12 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
   return (
     <div className="max-w-4xl mx-auto py-6 space-y-8">
       <div>
-        <h2 className="text-xl text-slate-100"><span className="font-bold">Dataset Statistics:</span> <span className="font-normal text-slate-400">{datasetInfo.repoId}</span></h2>
+        <h2 className="text-xl text-slate-100">
+          <span className="font-bold">Dataset Statistics:</span>{" "}
+          <span className="font-normal text-slate-400">
+            {datasetInfo.repoId}
+          </span>
+        </h2>
       </div>
 
       {/* Overview cards */}
@@ -99,21 +137,39 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
       </div>
 
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <Card label="Total Frames" value={datasetInfo.total_frames.toLocaleString()} />
-        <Card label="Total Episodes" value={datasetInfo.total_episodes.toLocaleString()} />
+        <Card
+          label="Total Frames"
+          value={datasetInfo.total_frames.toLocaleString()}
+        />
+        <Card
+          label="Total Episodes"
+          value={datasetInfo.total_episodes.toLocaleString()}
+        />
         <Card label="FPS" value={datasetInfo.fps} />
-        <Card label="Total Recording Time" value={formatTotalTime(datasetInfo.total_frames, datasetInfo.fps)} />
+        <Card
+          label="Total Recording Time"
+          value={formatTotalTime(datasetInfo.total_frames, datasetInfo.fps)}
+        />
       </div>
 
       {/* Camera resolutions */}
       {datasetInfo.cameras.length > 0 && (
         <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
-          <h3 className="text-sm font-semibold text-slate-200 mb-3">Camera Resolutions</h3>
+          <h3 className="text-sm font-semibold text-slate-200 mb-3">
+            Camera Resolutions
+          </h3>
           <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
             {datasetInfo.cameras.map((cam: CameraInfo) => (
               <div key={cam.name} className="bg-slate-900/50 rounded-md p-3">
-                <p className="text-xs text-slate-400 mb-1 truncate" title={cam.name}>{cam.name}</p>
-                <p className="text-base font-bold tabular-nums">{cam.width}×{cam.height}</p>
+                <p
+                  className="text-xs text-slate-400 mb-1 truncate"
+                  title={cam.name}
+                >
+                  {cam.name}
+                </p>
+                <p className="text-base font-bold tabular-nums">
+                  {cam.width}×{cam.height}
+                </p>
               </div>
             ))}
           </div>
@@ -124,8 +180,19 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
       {loading && (
         <div className="flex items-center gap-2 text-slate-400 text-sm py-4">
           <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
           </svg>
           Computing episode statistics…
         </div>
@@ -135,10 +202,18 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
       {els && (
         <>
           <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
-            <h3 className="text-sm font-semibold text-slate-200 mb-4">Episode Lengths</h3>
+            <h3 className="text-sm font-semibold text-slate-200 mb-4">
+              Episode Lengths
+            </h3>
             <div className="grid grid-cols-3 md:grid-cols-5 gap-4 mb-4">
-              <Card label="Shortest" value={`${els.shortestEpisodes[0]?.lengthSeconds ?? "–"}s`} />
-              <Card label="Longest" value={`${els.longestEpisodes[els.longestEpisodes.length - 1]?.lengthSeconds ?? "–"}s`} />
+              <Card
+                label="Shortest"
+                value={`${els.shortestEpisodes[0]?.lengthSeconds ?? "–"}s`}
+              />
+              <Card
+                label="Longest"
+                value={`${els.longestEpisodes[els.longestEpisodes.length - 1]?.lengthSeconds ?? "–"}s`}
+              />
               <Card label="Mean" value={`${els.meanEpisodeLength}s`} />
               <Card label="Median" value={`${els.medianEpisodeLength}s`} />
               <Card label="Std Dev" value={`${els.stdEpisodeLength}s`} />
@@ -150,13 +225,13 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
               <h3 className="text-sm font-semibold text-slate-200 mb-4">
                 Episode Length Distribution
                 <span className="text-xs text-slate-500 ml-2 font-normal">
-                  {els.episodeLengthHistogram.length} bin{els.episodeLengthHistogram.length !== 1 ? "s" : ""}
+                  {els.episodeLengthHistogram.length} bin
+                  {els.episodeLengthHistogram.length !== 1 ? "s" : ""}
                 </span>
               </h3>
               <EpisodeLengthHistogram data={els.episodeLengthHistogram} />
             </div>
           )}
-
         </>
       )}
     </div>

src/components/urdf-viewer.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useCallback,
+} from "react";
 import { Canvas, useThree, useFrame } from "@react-three/fiber";
 import { OrbitControls, Grid, Html } from "@react-three/drei";
 import * as THREE from "three";
@@ -50,23 +56,34 @@ function groupColumnsByPrefix(keys: string[]): Record<string, string[]> {
   return groups;
 }
 
-function autoMatchJoints(urdfJointNames: string[], columnKeys: string[]): Record<string, string> {
+function autoMatchJoints(
+  urdfJointNames: string[],
+  columnKeys: string[],
+): Record<string, string> {
   const mapping: Record<string, string> = {};
-  const suffixes = columnKeys.map((k) => (k.split(SERIES_DELIM).pop()?.trim() ?? k).toLowerCase());
+  const suffixes = columnKeys.map((k) =>
+    (k.split(SERIES_DELIM).pop()?.trim() ?? k).toLowerCase(),
+  );
 
   for (const jointName of urdfJointNames) {
     const lower = jointName.toLowerCase();
 
     // Exact match on column suffix
     const exactIdx = suffixes.findIndex((s) => s === lower);
-    if (exactIdx >= 0) { mapping[jointName] = columnKeys[exactIdx]; continue; }
+    if (exactIdx >= 0) {
+      mapping[jointName] = columnKeys[exactIdx];
+      continue;
+    }
 
     // OpenArm: openarm_(left|right)_joint(\d+) → (left|right)_joint_(\d+)
     const armMatch = lower.match(/^openarm_(left|right)_joint(\d+)$/);
     if (armMatch) {
       const pattern = `${armMatch[1]}_joint_${armMatch[2]}`;
       const idx = suffixes.findIndex((s) => s.includes(pattern));
-      if (idx >= 0) { mapping[jointName] = columnKeys[idx]; continue; }
+      if (idx >= 0) {
+        mapping[jointName] = columnKeys[idx];
+        continue;
+      }
     }
 
     // OpenArm: openarm_(left|right)_finger_joint1 → (left|right)_gripper
@@ -74,7 +91,10 @@ function autoMatchJoints(urdfJointNames: string[], columnKeys: string[]): Record
     if (fingerMatch) {
       const pattern = `${fingerMatch[1]}_gripper`;
       const idx = suffixes.findIndex((s) => s.includes(pattern));
-      if (idx >= 0) { mapping[jointName] = columnKeys[idx]; continue; }
+      if (idx >= 0) {
+        mapping[jointName] = columnKeys[idx];
+        continue;
+      }
     }
 
     // finger_joint2 is a mimic joint — skip
@@ -87,7 +107,12 @@ function autoMatchJoints(urdfJointNames: string[], columnKeys: string[]): Record
   return mapping;
 }
 
-const SINGLE_ARM_TIP_NAMES = ["gripper_frame_link", "gripperframe", "gripper_link", "gripper"];
+const SINGLE_ARM_TIP_NAMES = [
+  "gripper_frame_link",
+  "gripperframe",
+  "gripper_link",
+  "gripper",
+];
 const DUAL_ARM_TIP_NAMES = ["openarm_left_hand_tcp", "openarm_right_hand_tcp"];
 const TRAIL_DURATION = 1.0;
 const TRAIL_COLORS = [new THREE.Color("#ff6600"), new THREE.Color("#00aaff")];
@@ -95,7 +120,12 @@ const MAX_TRAIL_POINTS = 300;
 
 // ─── Robot scene (imperative, inside Canvas) ───
 function RobotScene({
-  urdfUrl, jointValues, onJointsLoaded, trailEnabled, trailResetKey, scale,
+  urdfUrl,
+  jointValues,
+  onJointsLoaded,
+  trailEnabled,
+  trailResetKey,
+  scale,
 }: {
   urdfUrl: string;
   jointValues: Record<string, number>;
@@ -110,7 +140,12 @@ function RobotScene({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  type TrailState = { positions: Float32Array; colors: Float32Array; times: number[]; count: number };
+  type TrailState = {
+    positions: Float32Array;
+    colors: Float32Array;
+    times: number[];
+    count: number;
+  };
   const trailsRef = useRef<TrailState[]>([]);
   const linesRef = useRef<Line2[]>([]);
   const trailMatsRef = useRef<LineMaterial[]>([]);
@@ -118,36 +153,56 @@ function RobotScene({
 
   // Reset trails when episode changes
   useEffect(() => {
-    for (const t of trailsRef.current) { t.count = 0; t.times = []; }
+    for (const t of trailsRef.current) {
+      t.count = 0;
+      t.times = [];
+    }
     for (const l of linesRef.current) l.visible = false;
   }, [trailResetKey]);
 
   // Create/destroy trail Line2 objects when tip count changes
-  const ensureTrails = useCallback((count: number) => {
-    if (trailCountRef.current === count) return;
-    // Remove old
-    for (const l of linesRef.current) { scene.remove(l); l.geometry.dispose(); }
-    for (const m of trailMatsRef.current) m.dispose();
-    // Create new
-    const trails: TrailState[] = [];
-    const lines: Line2[] = [];
-    const mats: LineMaterial[] = [];
-    for (let i = 0; i < count; i++) {
-      trails.push({ positions: new Float32Array(MAX_TRAIL_POINTS * 3), colors: new Float32Array(MAX_TRAIL_POINTS * 3), times: [], count: 0 });
-      const mat = new LineMaterial({ color: 0xffffff, linewidth: 4, vertexColors: true, transparent: true, worldUnits: false });
-      mat.resolution.set(window.innerWidth, window.innerHeight);
-      mats.push(mat);
-      const line = new Line2(new LineGeometry(), mat);
-      line.frustumCulled = false;
-      line.visible = false;
-      lines.push(line);
-      scene.add(line);
-    }
-    trailsRef.current = trails;
-    linesRef.current = lines;
-    trailMatsRef.current = mats;
-    trailCountRef.current = count;
-  }, [scene]);
+  const ensureTrails = useCallback(
+    (count: number) => {
+      if (trailCountRef.current === count) return;
+      // Remove old
+      for (const l of linesRef.current) {
+        scene.remove(l);
+        l.geometry.dispose();
+      }
+      for (const m of trailMatsRef.current) m.dispose();
+      // Create new
+      const trails: TrailState[] = [];
+      const lines: Line2[] = [];
+      const mats: LineMaterial[] = [];
+      for (let i = 0; i < count; i++) {
+        trails.push({
+          positions: new Float32Array(MAX_TRAIL_POINTS * 3),
+          colors: new Float32Array(MAX_TRAIL_POINTS * 3),
+          times: [],
+          count: 0,
+        });
+        const mat = new LineMaterial({
+          color: 0xffffff,
+          linewidth: 4,
+          vertexColors: true,
+          transparent: true,
+          worldUnits: false,
+        });
+        mat.resolution.set(window.innerWidth, window.innerHeight);
+        mats.push(mat);
+        const line = new Line2(new LineGeometry(), mat);
+        line.frustumCulled = false;
+        line.visible = false;
+        lines.push(line);
+        scene.add(line);
+      }
+      trailsRef.current = trails;
+      linesRef.current = lines;
+      trailMatsRef.current = mats;
+      trailCountRef.current = count;
+    },
+    [scene],
+  );
 
   useEffect(() => {
     setLoading(true);
@@ -159,22 +214,27 @@ function RobotScene({
       // DAE (Collada) files — load with embedded materials
       if (url.endsWith(".dae")) {
         const colladaLoader = new ColladaLoader(mgr);
-        colladaLoader.load(url, (collada) => {
-          if (isOpenArm) {
-            collada.scene.traverse((child) => {
-              if (child instanceof THREE.Mesh && child.material) {
-                const mat = child.material as THREE.MeshStandardMaterial;
-                if (mat.side !== undefined) mat.side = THREE.DoubleSide;
-                if (mat.color) {
-                  const hsl = { h: 0, s: 0, l: 0 };
-                  mat.color.getHSL(hsl);
-                  if (hsl.l > 0.7) mat.color.setHSL(hsl.h, hsl.s, 0.55);
+        colladaLoader.load(
+          url,
+          (collada) => {
+            if (isOpenArm) {
+              collada.scene.traverse((child) => {
+                if (child instanceof THREE.Mesh && child.material) {
+                  const mat = child.material as THREE.MeshStandardMaterial;
+                  if (mat.side !== undefined) mat.side = THREE.DoubleSide;
+                  if (mat.color) {
+                    const hsl = { h: 0, s: 0, l: 0 };
+                    mat.color.getHSL(hsl);
+                    if (hsl.l > 0.7) mat.color.setHSL(hsl.h, hsl.s, 0.55);
+                  }
                 }
-              }
-            });
-          }
-          onLoad(collada.scene);
-        }, undefined, (err) => onLoad(new THREE.Object3D(), err as Error));
+              });
+            }
+            onLoad(collada.scene);
+          },
+          undefined,
+          (err) => onLoad(new THREE.Object3D(), err as Error),
+        );
         return;
       }
       // STL files — apply custom materials
@@ -186,12 +246,20 @@ function RobotScene({
           let metalness = 0.1;
           let roughness = 0.6;
           if (url.includes("sts3215")) {
-            color = "#1a1a1a"; metalness = 0.7; roughness = 0.3;
+            color = "#1a1a1a";
+            metalness = 0.7;
+            roughness = 0.3;
           } else if (isOpenArm) {
             color = url.includes("body_link0") ? "#3a3a4a" : "#f5f5f5";
-            metalness = 0.15; roughness = 0.6;
+            metalness = 0.15;
+            roughness = 0.6;
           }
-          const material = new THREE.MeshStandardMaterial({ color, metalness, roughness, side: isOpenArm ? THREE.DoubleSide : THREE.FrontSide });
+          const material = new THREE.MeshStandardMaterial({
+            color,
+            metalness,
+            roughness,
+            side: isOpenArm ? THREE.DoubleSide : THREE.FrontSide,
+          });
           onLoad(new THREE.Mesh(geometry, material));
         },
         undefined,
@@ -203,7 +271,9 @@ function RobotScene({
       (robot) => {
         robotRef.current = robot;
         robot.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
-        robot.traverse((c) => { c.castShadow = true; });
+        robot.traverse((c) => {
+          c.castShadow = true;
+        });
         robot.updateMatrixWorld(true);
         robot.scale.set(scale, scale, scale);
         scene.add(robot);
@@ -218,16 +288,28 @@ function RobotScene({
         ensureTrails(tips.length);
 
         const movable = Object.values(robot.joints)
-          .filter((j) => j.jointType === "revolute" || j.jointType === "continuous" || j.jointType === "prismatic")
+          .filter(
+            (j) =>
+              j.jointType === "revolute" ||
+              j.jointType === "continuous" ||
+              j.jointType === "prismatic",
+          )
           .map((j) => j.name);
         onJointsLoaded(movable);
         setLoading(false);
       },
       undefined,
-      (err) => { console.error("Error loading URDF:", err); setError(String(err)); setLoading(false); },
+      (err) => {
+        console.error("Error loading URDF:", err);
+        setError(String(err));
+        setLoading(false);
+      },
     );
     return () => {
-      if (robotRef.current) { scene.remove(robotRef.current); robotRef.current = null; }
+      if (robotRef.current) {
+        scene.remove(robotRef.current);
+        robotRef.current = null;
+      }
       tipLinksRef.current = [];
     };
   }, [urdfUrl, scale, scene, onJointsLoaded, ensureTrails]);
@@ -281,9 +363,14 @@ function RobotScene({
         trail.colors[i * 3 + 2] = trailColor.b * t;
       }
 
-      if (trail.count < 2) { line.visible = false; continue; }
+      if (trail.count < 2) {
+        line.visible = false;
+        continue;
+      }
       const geo = new LineGeometry();
-      geo.setPositions(Array.from(trail.positions.subarray(0, trail.count * 3)));
+      geo.setPositions(
+        Array.from(trail.positions.subarray(0, trail.count * 3)),
+      );
       geo.setColors(Array.from(trail.colors.subarray(0, trail.count * 3)));
       line.geometry.dispose();
       line.geometry = geo;
@@ -292,16 +379,32 @@ function RobotScene({
     }
   });
 
-  if (loading) return <Html center><span className="text-white text-lg">Loading robot…</span></Html>;
-  if (error) return <Html center><span className="text-red-400">Failed to load URDF</span></Html>;
+  if (loading)
+    return (
+      <Html center>
+        <span className="text-white text-lg">Loading robot…</span>
+      </Html>
+    );
+  if (error)
+    return (
+      <Html center>
+        <span className="text-red-400">Failed to load URDF</span>
+      </Html>
+    );
   return null;
 }
 
 // ─── Playback ticker ───
 function PlaybackDriver({
-  playing, fps, totalFrames, frameRef, setFrame,
+  playing,
+  fps,
+  totalFrames,
+  frameRef,
+  setFrame,
 }: {
-  playing: boolean; fps: number; totalFrames: number;
+  playing: boolean;
+  fps: number;
+  totalFrames: number;
   frameRef: React.MutableRefObject<number>;
   setFrame: React.Dispatch<React.SetStateAction<number>>;
 }) {
@@ -347,7 +450,10 @@ export default function URDFViewer({
 }) {
   const { datasetInfo, episodes } = data;
   const fps = datasetInfo.fps || 30;
-  const robotConfig = useMemo(() => getRobotConfig(datasetInfo.robot_type), [datasetInfo.robot_type]);
+  const robotConfig = useMemo(
+    () => getRobotConfig(datasetInfo.robot_type),
+    [datasetInfo.robot_type],
+  );
   const { urdfUrl, scale } = robotConfig;
 
   // Episode selection & chart data
@@ -358,33 +464,39 @@ export default function URDFViewer({
     [data.episodeId]: data.flatChartData,
   });
 
-  const handleEpisodeChange = useCallback((epId: number) => {
-    setSelectedEpisode(epId);
-    setFrame(0);
-    frameRef.current = 0;
-    setPlaying(false);
+  const handleEpisodeChange = useCallback(
+    (epId: number) => {
+      setSelectedEpisode(epId);
+      setFrame(0);
+      frameRef.current = 0;
+      setPlaying(false);
 
-    if (chartDataCache.current[epId]) {
-      setChartData(chartDataCache.current[epId]);
-      return;
-    }
+      if (chartDataCache.current[epId]) {
+        setChartData(chartDataCache.current[epId]);
+        return;
+      }
 
-    if (!org || !dataset) return;
-    setEpisodeLoading(true);
-    fetchEpisodeChartData(org, dataset, epId)
-      .then((result) => {
-        chartDataCache.current[epId] = result;
-        setChartData(result);
-      })
-      .catch((err) => console.error("Failed to load episode:", err))
-      .finally(() => setEpisodeLoading(false));
-  }, [org, dataset]);
+      if (!org || !dataset) return;
+      setEpisodeLoading(true);
+      fetchEpisodeChartData(org, dataset, epId)
+        .then((result) => {
+          chartDataCache.current[epId] = result;
+          setChartData(result);
+        })
+        .catch((err) => console.error("Failed to load episode:", err))
+        .finally(() => setEpisodeLoading(false));
+    },
+    [org, dataset],
+  );
 
   const totalFrames = chartData.length;
 
   // URDF joint names
   const [urdfJointNames, setUrdfJointNames] = useState<string[]>([]);
-  const onJointsLoaded = useCallback((names: string[]) => setUrdfJointNames(names), []);
+  const onJointsLoaded = useCallback(
+    (names: string[]) => setUrdfJointNames(names),
+    [],
+  );
 
   // Feature groups
   const columnGroups = useMemo(() => {
@@ -397,7 +509,8 @@ export default function URDFViewer({
     () =>
       groupNames.find((g) => g.toLowerCase().includes("state")) ??
       groupNames.find((g) => g.toLowerCase().includes("action")) ??
-      groupNames[0] ?? "",
+      groupNames[0] ??
+      "",
     [groupNames],
   );
 
@@ -422,15 +535,19 @@ export default function URDFViewer({
   const [playing, setPlaying] = useState(false);
   const frameRef = useRef(0);
 
-  const handleFrameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const f = parseInt(e.target.value);
-    setFrame(f);
-    frameRef.current = f;
-  }, []);
+  const handleFrameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const f = parseInt(e.target.value);
+      setFrame(f);
+      frameRef.current = f;
+    },
+    [],
+  );
 
   // Filter out mimic joints (finger_joint2) from the UI list
   const displayJointNames = useMemo(
-    () => urdfJointNames.filter((n) => !n.toLowerCase().includes("finger_joint2")),
+    () =>
+      urdfJointNames.filter((n) => !n.toLowerCase().includes("finger_joint2")),
     [urdfJointNames],
   );
 
@@ -441,10 +558,14 @@ export default function URDFViewer({
       if (!jn.toLowerCase().includes("finger_joint1")) continue;
       const col = mapping[jn];
       if (!col) continue;
-      let min = Infinity, max = -Infinity;
+      let min = Infinity,
+        max = -Infinity;
       for (const row of chartData) {
         const v = row[col];
-        if (typeof v === "number") { if (v < min) min = v; if (v > max) max = v; }
+        if (typeof v === "number") {
+          if (v < min) min = v;
+          if (v > max) max = v;
+        }
       }
       if (min < max) ranges[jn] = { min, max };
     }
@@ -481,7 +602,9 @@ export default function URDFViewer({
     }
 
     const converted = detectAndConvert(revoluteValues);
-    revoluteNames.forEach((n, i) => { values[n] = converted[i]; });
+    revoluteNames.forEach((n, i) => {
+      values[n] = converted[i];
+    });
 
     // Copy finger_joint1 → finger_joint2 (mimic joints)
     for (const jn of urdfJointNames) {
@@ -497,7 +620,11 @@ export default function URDFViewer({
   const totalTime = (totalFrames / fps).toFixed(2);
 
   if (data.flatChartData.length === 0) {
-    return <div className="text-slate-400 p-8 text-center">No trajectory data available.</div>;
+    return (
+      <div className="text-slate-400 p-8 text-center">
+        No trajectory data available.
+      </div>
+    );
   }
 
   return (
@@ -506,22 +633,50 @@ export default function URDFViewer({
       <div className="flex-1 min-h-0 bg-slate-950 rounded-lg overflow-hidden border border-slate-700 relative">
         {episodeLoading && (
           <div className="absolute inset-0 z-10 flex items-center justify-center bg-slate-950/70">
-            <span className="text-white text-lg animate-pulse">Loading episode {selectedEpisode}…</span>
+            <span className="text-white text-lg animate-pulse">
+              Loading episode {selectedEpisode}…
+            </span>
           </div>
         )}
-        <Canvas camera={{ position: [0.3 * scale, 0.25 * scale, 0.3 * scale], fov: 45, near: 0.01, far: 100 }}>
+        <Canvas
+          camera={{
+            position: [0.3 * scale, 0.25 * scale, 0.3 * scale],
+            fov: 45,
+            near: 0.01,
+            far: 100,
+          }}
+        >
           <ambientLight intensity={0.7} />
           <directionalLight position={[3, 5, 4]} intensity={1.5} />
           <directionalLight position={[-2, 3, -2]} intensity={0.6} />
           <hemisphereLight args={["#b1e1ff", "#666666", 0.5]} />
-          <RobotScene urdfUrl={urdfUrl} jointValues={jointValues} onJointsLoaded={onJointsLoaded} trailEnabled={trailEnabled} trailResetKey={selectedEpisode} scale={scale} />
+          <RobotScene
+            urdfUrl={urdfUrl}
+            jointValues={jointValues}
+            onJointsLoaded={onJointsLoaded}
+            trailEnabled={trailEnabled}
+            trailResetKey={selectedEpisode}
+            scale={scale}
+          />
           <Grid
-            args={[10, 10]} cellSize={0.2} cellThickness={0.5} cellColor="#334155"
-            sectionSize={1} sectionThickness={1} sectionColor="#475569"
-            fadeDistance={10} position={[0, 0, 0]}
+            args={[10, 10]}
+            cellSize={0.2}
+            cellThickness={0.5}
+            cellColor="#334155"
+            sectionSize={1}
+            sectionThickness={1}
+            sectionColor="#475569"
+            fadeDistance={10}
+            position={[0, 0, 0]}
           />
           <OrbitControls target={[0, 0.8, 0]} />
-          <PlaybackDriver playing={playing} fps={fps} totalFrames={totalFrames} frameRef={frameRef} setFrame={setFrame} />
+          <PlaybackDriver
+            playing={playing}
+            fps={fps}
+            totalFrames={totalFrames}
+            frameRef={frameRef}
+            setFrame={setFrame}
+          />
         </Canvas>
       </div>
 
@@ -532,35 +687,55 @@ export default function URDFViewer({
           {/* Episode selector */}
           <div className="flex items-center gap-1.5 shrink-0">
             <button
-              onClick={() => { if (selectedEpisode > episodes[0]) handleEpisodeChange(selectedEpisode - 1); }}
+              onClick={() => {
+                if (selectedEpisode > episodes[0])
+                  handleEpisodeChange(selectedEpisode - 1);
+              }}
               disabled={selectedEpisode <= episodes[0]}
               className="w-6 h-6 flex items-center justify-center rounded bg-slate-700 hover:bg-slate-600 text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed text-xs"
-            >◀</button>
+            >
+              ◀
+            </button>
             <select
               value={selectedEpisode}
               onChange={(e) => handleEpisodeChange(Number(e.target.value))}
               className="bg-slate-900 text-slate-200 text-xs rounded px-1.5 py-1 border border-slate-600 w-28"
             >
               {episodes.map((ep) => (
-                <option key={ep} value={ep}>Episode {ep}</option>
+                <option key={ep} value={ep}>
+                  Episode {ep}
+                </option>
               ))}
             </select>
             <button
-              onClick={() => { if (selectedEpisode < episodes[episodes.length - 1]) handleEpisodeChange(selectedEpisode + 1); }}
+              onClick={() => {
+                if (selectedEpisode < episodes[episodes.length - 1])
+                  handleEpisodeChange(selectedEpisode + 1);
+              }}
               disabled={selectedEpisode >= episodes[episodes.length - 1]}
               className="w-6 h-6 flex items-center justify-center rounded bg-slate-700 hover:bg-slate-600 text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed text-xs"
-            >▶</button>
+            >
+              ▶
+            </button>
           </div>
 
           {/* Play/Pause */}
           <button
-            onClick={() => { setPlaying(!playing); if (!playing) frameRef.current = frame; }}
+            onClick={() => {
+              setPlaying(!playing);
+              if (!playing) frameRef.current = frame;
+            }}
             className="w-8 h-8 flex items-center justify-center rounded bg-orange-600 hover:bg-orange-500 text-white transition-colors shrink-0"
           >
             {playing ? (
-              <svg width="12" height="14" viewBox="0 0 12 14"><rect x="1" y="1" width="3" height="12" fill="white" /><rect x="8" y="1" width="3" height="12" fill="white" /></svg>
+              <svg width="12" height="14" viewBox="0 0 12 14">
+                <rect x="1" y="1" width="3" height="12" fill="white" />
+                <rect x="8" y="1" width="3" height="12" fill="white" />
+              </svg>
             ) : (
-              <svg width="12" height="14" viewBox="0 0 12 14"><polygon points="2,1 11,7 2,13" fill="white" /></svg>
+              <svg width="12" height="14" viewBox="0 0 12 14">
+                <polygon points="2,1 11,7 2,13" fill="white" />
+              </svg>
             )}
           </button>
 
@@ -568,16 +743,30 @@ export default function URDFViewer({
           <button
             onClick={() => setTrailEnabled((v) => !v)}
             className={`px-2 h-8 text-xs rounded transition-colors shrink-0 ${
-              trailEnabled ? "bg-orange-600/30 text-orange-400 border border-orange-500" : "bg-slate-700 text-slate-400 border border-slate-600"
+              trailEnabled
+                ? "bg-orange-600/30 text-orange-400 border border-orange-500"
+                : "bg-slate-700 text-slate-400 border border-slate-600"
             }`}
             title={trailEnabled ? "Hide trail" : "Show trail"}
-          >Trail</button>
+          >
+            Trail
+          </button>
 
           {/* Scrubber */}
-          <input type="range" min={0} max={Math.max(totalFrames - 1, 0)} value={frame}
-            onChange={handleFrameChange} className="flex-1 h-1.5 accent-orange-500 cursor-pointer" />
-          <span className="text-xs text-slate-400 tabular-nums w-28 text-right shrink-0">{currentTime}s / {totalTime}s</span>
-          <span className="text-xs text-slate-500 tabular-nums w-20 text-right shrink-0">F {frame}/{Math.max(totalFrames - 1, 0)}</span>
+          <input
+            type="range"
+            min={0}
+            max={Math.max(totalFrames - 1, 0)}
+            value={frame}
+            onChange={handleFrameChange}
+            className="flex-1 h-1.5 accent-orange-500 cursor-pointer"
+          />
+          <span className="text-xs text-slate-400 tabular-nums w-28 text-right shrink-0">
+            {currentTime}s / {totalTime}s
+          </span>
+          <span className="text-xs text-slate-500 tabular-nums w-20 text-right shrink-0">
+            F {frame}/{Math.max(totalFrames - 1, 0)}
+          </span>
         </div>
 
         {/* Collapsible joint mapping */}
@@ -585,9 +774,16 @@ export default function URDFViewer({
           onClick={() => setShowMapping((v) => !v)}
           className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 transition-colors"
         >
-          <span className={`transition-transform ${showMapping ? "rotate-90" : ""}`}>▶</span>
+          <span
+            className={`transition-transform ${showMapping ? "rotate-90" : ""}`}
+          >
+            ▶
+          </span>
           Joint Mapping
-          <span className="text-slate-600">({Object.keys(mapping).filter((k) => mapping[k]).length}/{displayJointNames.length} mapped)</span>
+          <span className="text-slate-600">
+            ({Object.keys(mapping).filter((k) => mapping[k]).length}/
+            {displayJointNames.length} mapped)
+          </span>
         </button>
 
         {showMapping && (
@@ -596,10 +792,17 @@ export default function URDFViewer({
               <label className="text-xs text-slate-400">Data source</label>
               <div className="flex gap-1 flex-wrap">
                 {groupNames.map((name) => (
-                  <button key={name} onClick={() => setSelectedGroup(name)}
+                  <button
+                    key={name}
+                    onClick={() => setSelectedGroup(name)}
                     className={`px-2 py-1 text-xs rounded transition-colors ${
-                      selectedGroup === name ? "bg-orange-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"
-                    }`}>{name}</button>
+                      selectedGroup === name
+                        ? "bg-orange-600 text-white"
+                        : "bg-slate-700 text-slate-300 hover:bg-slate-600"
+                    }`}
+                  >
+                    {name}
+                  </button>
                 ))}
               </div>
             </div>
@@ -610,28 +813,48 @@ export default function URDFViewer({
                   <tr className="text-slate-500">
                     <th className="text-left font-normal px-1">URDF Joint</th>
                     <th className="text-left font-normal px-1">→</th>
-                    <th className="text-left font-normal px-1">Dataset Column</th>
+                    <th className="text-left font-normal px-1">
+                      Dataset Column
+                    </th>
                     <th className="text-right font-normal px-1">Value</th>
                   </tr>
                 </thead>
                 <tbody>
                   {displayJointNames.map((jointName) => (
-                    <tr key={jointName} className="border-t border-slate-700/50">
-                      <td className="px-1 py-0.5 text-slate-300 font-mono">{jointName}</td>
+                    <tr
+                      key={jointName}
+                      className="border-t border-slate-700/50"
+                    >
+                      <td className="px-1 py-0.5 text-slate-300 font-mono">
+                        {jointName}
+                      </td>
                       <td className="px-1 text-slate-600">→</td>
                       <td className="px-1 py-0.5">
-                        <select value={mapping[jointName] ?? ""}
-                          onChange={(e) => setMapping((m) => ({ ...m, [jointName]: e.target.value }))}
-                          className="bg-slate-900 text-slate-200 text-xs rounded px-1 py-0.5 border border-slate-600 w-full max-w-[200px]">
+                        <select
+                          value={mapping[jointName] ?? ""}
+                          onChange={(e) =>
+                            setMapping((m) => ({
+                              ...m,
+                              [jointName]: e.target.value,
+                            }))
+                          }
+                          className="bg-slate-900 text-slate-200 text-xs rounded px-1 py-0.5 border border-slate-600 w-full max-w-[200px]"
+                        >
                           <option value="">-- unmapped --</option>
                           {selectedColumns.map((col) => {
                             const label = col.split(SERIES_DELIM).pop() ?? col;
-                            return <option key={col} value={col}>{label}</option>;
+                            return (
+                              <option key={col} value={col}>
+                                {label}
+                              </option>
+                            );
                           })}
                         </select>
                       </td>
                       <td className="px-1 py-0.5 text-right tabular-nums text-slate-400 font-mono">
-                        {jointValues[jointName] !== undefined ? jointValues[jointName].toFixed(3) : "—"}
+                        {jointValues[jointName] !== undefined
+                          ? jointValues[jointName].toFixed(3)
+                          : "—"}
                       </td>
                     </tr>
                   ))}

src/components/videos-player.tsx

@@ -149,7 +149,8 @@ export const VideosPlayer = ({
   // For the primary video, only seek when the change came from an external source
   // (slider drag, chart click, etc.) — detected by comparing against lastVideoTimeRef.
   useEffect(() => {
-    const isExternalSeek = Math.abs(currentTime - lastVideoTimeRef.current) > 0.3;
+    const isExternalSeek =
+      Math.abs(currentTime - lastVideoTimeRef.current) > 0.3;
 
     videoRefs.current.forEach((video, index) => {
       if (!video) return;
@@ -176,7 +177,7 @@ export const VideosPlayer = ({
   const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
     const video = e.target as HTMLVideoElement;
     if (video && video.duration) {
-      const videoIndex = videoRefs.current.findIndex(ref => ref === video);
+      const videoIndex = videoRefs.current.findIndex((ref) => ref === video);
       const videoInfo = videosInfo[videoIndex];
 
       if (videoInfo?.isSegmented) {
@@ -220,11 +221,11 @@ export const VideosPlayer = ({
             }
           }
         };
-        
-        video.addEventListener('timeupdate', handleTimeUpdate);
-        
+
+        video.addEventListener("timeupdate", handleTimeUpdate);
+
         videoCleanupHandlers.set(video, () => {
-          video.removeEventListener('timeupdate', handleTimeUpdate);
+          video.removeEventListener("timeupdate", handleTimeUpdate);
         });
       }
 

src/context/flagged-episodes-context.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import React, { createContext, useContext, useState, useCallback, useMemo, useEffect } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+} from "react";
 
 const STORAGE_KEY = "flagged-episodes";
 
@@ -9,12 +16,18 @@ function loadFromStorage(): Set<number> {
   try {
     const raw = sessionStorage.getItem(STORAGE_KEY);
     if (raw) return new Set(JSON.parse(raw) as number[]);
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
   return new Set();
 }
 
 function saveToStorage(s: Set<number>) {
-  try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify([...s])); } catch { /* ignore */ }
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify([...s]));
+  } catch {
+    /* ignore */
+  }
 }
 
 type FlaggedEpisodesContextType = {
@@ -26,29 +39,39 @@ type FlaggedEpisodesContextType = {
   clear: () => void;
 };
 
-const FlaggedEpisodesContext = createContext<FlaggedEpisodesContextType | undefined>(undefined);
+const FlaggedEpisodesContext = createContext<
+  FlaggedEpisodesContextType | undefined
+>(undefined);
 
 export function useFlaggedEpisodes() {
   const ctx = useContext(FlaggedEpisodesContext);
-  if (!ctx) throw new Error("useFlaggedEpisodes must be used within FlaggedEpisodesProvider");
+  if (!ctx)
+    throw new Error(
+      "useFlaggedEpisodes must be used within FlaggedEpisodesProvider",
+    );
   return ctx;
 }
 
-export const FlaggedEpisodesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const FlaggedEpisodesProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
   const [flagged, setFlagged] = useState<Set<number>>(() => loadFromStorage());
 
-  useEffect(() => { saveToStorage(flagged); }, [flagged]);
+  useEffect(() => {
+    saveToStorage(flagged);
+  }, [flagged]);
 
   const toggle = useCallback((id: number) => {
-    setFlagged(prev => {
+    setFlagged((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) next.delete(id); else next.add(id);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       return next;
     });
   }, []);
 
   const addMany = useCallback((ids: number[]) => {
-    setFlagged(prev => {
+    setFlagged((prev) => {
       const next = new Set(prev);
       for (const id of ids) next.add(id);
       return next;
@@ -59,9 +82,17 @@ export const FlaggedEpisodesProvider: React.FC<{ children: React.ReactNode }> =
 
   const has = useCallback((id: number) => flagged.has(id), [flagged]);
 
-  const value = useMemo(() => ({
-    flagged, count: flagged.size, has, toggle, addMany, clear,
-  }), [flagged, has, toggle, addMany, clear]);
+  const value = useMemo(
+    () => ({
+      flagged,
+      count: flagged.size,
+      has,
+      toggle,
+      addMany,
+      clear,
+    }),
+    [flagged, has, toggle, addMany, clear],
+  );
 
   return (
     <FlaggedEpisodesContext.Provider value={value}>

src/lib/so101-robot.ts

@@ -1,7 +1,11 @@
 export function isSO101Robot(robotType: string | null): boolean {
   if (!robotType) return false;
   const lower = robotType.toLowerCase();
-  return lower.includes("so100") || lower.includes("so101") || lower === "so_follower";
+  return (
+    lower.includes("so100") ||
+    lower.includes("so101") ||
+    lower === "so_follower"
+  );
 }
 
 export function isOpenArmRobot(robotType: string | null): boolean {

src/utils/versionUtils.ts

@@ -32,7 +32,10 @@ export interface DatasetInfo {
 }
 
 // In-memory cache for dataset info (5 min TTL)
-const datasetInfoCache = new Map<string, { data: DatasetInfo; expiry: number }>();
+const datasetInfoCache = new Map<
+  string,
+  { data: DatasetInfo; expiry: number }
+>();
 const CACHE_TTL_MS = 5 * 60 * 1000;
 
 export async function getDatasetInfo(repoId: string): Promise<DatasetInfo> {
@@ -48,8 +51,8 @@ export async function getDatasetInfo(repoId: string): Promise<DatasetInfo> {
 
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), 10000);
-    
-    const response = await fetch(testUrl, { 
+
+    const response = await fetch(testUrl, {
       method: "GET",
       cache: "no-store",
       signal: controller.signal,
@@ -62,14 +65,17 @@ export async function getDatasetInfo(repoId: string): Promise<DatasetInfo> {
     }
 
     const data = await response.json();
-    
+
     if (!data.features) {
       throw new Error(
         "Dataset info.json does not have the expected features structure",
       );
     }
-    
-    datasetInfoCache.set(repoId, { data: data as DatasetInfo, expiry: Date.now() + CACHE_TTL_MS });
+
+    datasetInfoCache.set(repoId, {
+      data: data as DatasetInfo,
+      expiry: Date.now() + CACHE_TTL_MS,
+    });
     return data as DatasetInfo;
   } catch (error) {
     if (error instanceof Error) {
@@ -88,7 +94,9 @@ const SUPPORTED_VERSIONS = ["v3.0", "v2.1", "v2.0"];
  * Returns both the validated version string and the dataset info in one call,
  * avoiding a duplicate info.json fetch.
  */
-export async function getDatasetVersionAndInfo(repoId: string): Promise<{ version: string; info: DatasetInfo }> {
+export async function getDatasetVersionAndInfo(
+  repoId: string,
+): Promise<{ version: string; info: DatasetInfo }> {
   const info = await getDatasetInfo(repoId);
   const version = info.codebase_version;
   if (!version) {
@@ -97,8 +105,8 @@ export async function getDatasetVersionAndInfo(repoId: string): Promise<{ versio
   if (!SUPPORTED_VERSIONS.includes(version)) {
     throw new Error(
       `Dataset ${repoId} has codebase version ${version}, which is not supported. ` +
-      "This tool only works with dataset versions 3.0, 2.1, or 2.0. " +
-      "Please use a compatible dataset version."
+        "This tool only works with dataset versions 3.0, 2.1, or 2.0. " +
+        "Please use a compatible dataset version.",
     );
   }
   return { version, info };