Add stats, 3d viewer, begin/end image visualization

package.json

@@ -10,12 +10,16 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
+    "@types/three": "^0.182.0",
     "hyparquet": "^1.12.1",
     "next": "15.3.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
-    "recharts": "^2.15.3"
+    "recharts": "^2.15.3",
+    "three": "^0.182.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

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

@@ -0,0 +1,30 @@
+"use server";
+
+import { getDatasetVersionAndInfo } from "@/utils/versionUtils";
+import type { DatasetMetadata } from "@/utils/parquetUtils";
+import {
+  loadAllEpisodeLengthsV3,
+  loadAllEpisodeFrameInfo,
+  type EpisodeLengthStats,
+  type EpisodeFramesData,
+} from "./fetch-data";
+
+export async function fetchEpisodeLengthStats(
+  org: string,
+  dataset: string,
+): Promise<EpisodeLengthStats | null> {
+  const repoId = `${org}/${dataset}`;
+  const { version, info } = await getDatasetVersionAndInfo(repoId);
+  if (version !== "v3.0") return null;
+  return loadAllEpisodeLengthsV3(repoId, version, info.fps);
+}
+
+export async function fetchEpisodeFrames(
+  org: string,
+  dataset: string,
+): Promise<EpisodeFramesData> {
+  const repoId = `${org}/${dataset}`;
+  const { version, info } = await getDatasetVersionAndInfo(repoId);
+  return loadAllEpisodeFrameInfo(repoId, version, info as unknown as DatasetMetadata);
+}
+

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, lazy, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { postParentMessageWithParams } from "@/utils/postParentMessage";
 import { SimpleVideosPlayer } from "@/components/simple-videos-player";
@@ -8,8 +8,23 @@ import DataRecharts from "@/components/data-recharts";
 import PlaybackBar from "@/components/playback-bar";
 import { TimeProvider, useTime } from "@/context/time-context";
 import Sidebar from "@/components/side-nav";
+import StatsPanel from "@/components/stats-panel";
+import OverviewPanel from "@/components/overview-panel";
 import Loading from "@/components/loading-component";
-import { getAdjacentEpisodesVideoInfo, type EpisodeData } from "./fetch-data";
+import { isSO101Robot } from "@/lib/so101-robot";
+import {
+  getAdjacentEpisodesVideoInfo,
+  computeColumnMinMax,
+  type EpisodeData,
+  type ColumnMinMax,
+  type EpisodeLengthStats,
+  type EpisodeFramesData,
+} from "./fetch-data";
+import { fetchEpisodeLengthStats, fetchEpisodeFrames } from "./actions";
+
+const URDFViewer = lazy(() => import("@/components/urdf-viewer"));
+
+type ActiveTab = "episodes" | "statistics" | "frames" | "urdf";
 
 export default function EpisodeViewer({
   data,
@@ -63,7 +78,47 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  // State
+  // Tab state & lazy stats
+  const [activeTab, setActiveTab] = useState<ActiveTab>("episodes");
+  const [columnMinMax, setColumnMinMax] = useState<ColumnMinMax[] | 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 [framesLoading, setFramesLoading] = useState(false);
+  const framesLoadedRef = useRef(false);
+
+  const loadStats = () => {
+    if (statsLoadedRef.current) return;
+    statsLoadedRef.current = true;
+    setStatsLoading(true);
+    setColumnMinMax(computeColumnMinMax(data.chartDataGroups));
+    if (org && dataset) {
+      fetchEpisodeLengthStats(org, dataset)
+        .then((result) => setEpisodeLengthStats(result))
+        .catch(() => {})
+        .finally(() => setStatsLoading(false));
+    } else {
+      setStatsLoading(false);
+    }
+  };
+
+  const loadFrames = () => {
+    if (framesLoadedRef.current || !org || !dataset) return;
+    framesLoadedRef.current = true;
+    setFramesLoading(true);
+    fetchEpisodeFrames(org, dataset)
+      .then(setEpisodeFramesData)
+      .catch(() => setEpisodeFramesData({ cameras: [], framesByCamera: {} }))
+      .finally(() => setFramesLoading(false));
+  };
+
+  const handleTabChange = (tab: ActiveTab) => {
+    setActiveTab(tab);
+    if (tab === "statistics") loadStats();
+    if (tab === "frames") loadFrames();
+  };
+
   // Use context for time sync
   const { currentTime, setCurrentTime, setIsPlaying, isPlaying } = useTime();
 
@@ -191,85 +246,171 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
   };
 
   return (
-    <div className="flex h-screen max-h-screen bg-slate-950 text-gray-200">
-      {/* Sidebar */}
-      <Sidebar
-        datasetInfo={datasetInfo}
-        paginatedEpisodes={paginatedEpisodes}
-        episodeId={episodeId}
-        totalPages={totalPages}
-        currentPage={currentPage}
-        prevPage={prevPage}
-        nextPage={nextPage}
-      />
-
-      {/* Content */}
-      <div
-        className={`flex max-h-screen flex-col gap-4 p-4 md:flex-1 relative ${isLoading ? "overflow-hidden" : "overflow-y-auto"}`}
-      >
-        {isLoading && <Loading />}
-
-        <div className="flex items-center justify-start my-4">
-          <a
-            href="https://github.com/huggingface/lerobot"
-            target="_blank"
-            className="block"
+    <div className="flex flex-col h-screen max-h-screen bg-slate-950 text-gray-200">
+      {/* Top tab bar */}
+      <div className="flex items-center border-b border-slate-700 bg-slate-900 shrink-0">
+        <button
+          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
+            activeTab === "episodes"
+              ? "text-orange-400"
+              : "text-slate-400 hover:text-slate-200"
+          }`}
+          onClick={() => handleTabChange("episodes")}
+        >
+          Episodes
+          {activeTab === "episodes" && (
+            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
+          )}
+        </button>
+        <button
+          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
+            activeTab === "statistics"
+              ? "text-orange-400"
+              : "text-slate-400 hover:text-slate-200"
+          }`}
+          onClick={() => handleTabChange("statistics")}
+        >
+          Statistics
+          {activeTab === "statistics" && (
+            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
+          )}
+        </button>
+        <button
+          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
+            activeTab === "frames"
+              ? "text-orange-400"
+              : "text-slate-400 hover:text-slate-200"
+          }`}
+          onClick={() => handleTabChange("frames")}
+        >
+          Frames
+          {activeTab === "frames" && (
+            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
+          )}
+        </button>
+        {isSO101Robot(datasetInfo.robot_type) && (
+          <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")}
           >
-            <img
-              src="https://github.com/huggingface/lerobot/raw/main/media/readme/lerobot-logo-thumbnail.png"
-              alt="LeRobot Logo"
-              className="w-32"
-            />
-          </a>
-
-          <div>
-            <a
-              href={`https://huggingface.co/datasets/${datasetInfo.repoId}`}
-              target="_blank"
-            >
-              <p className="text-lg font-semibold">{datasetInfo.repoId}</p>
-            </a>
-
-            <p className="font-mono text-lg font-semibold">
-              episode {episodeId}
-            </p>
-          </div>
-        </div>
+            3D Replay
+            {activeTab === "urdf" && (
+              <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
+            )}
+          </button>
+        )}
+      </div>
 
-        {/* Videos */}
-        {videosInfo.length && (
-          <SimpleVideosPlayer
-            videosInfo={videosInfo}
-            onVideosReady={() => setVideosReady(true)}
+      {/* Body: sidebar + content */}
+      <div className="flex flex-1 min-h-0">
+        {/* Sidebar — only on Episodes tab */}
+        {activeTab === "episodes" && (
+          <Sidebar
+            datasetInfo={datasetInfo}
+            paginatedEpisodes={paginatedEpisodes}
+            episodeId={episodeId}
+            totalPages={totalPages}
+            currentPage={currentPage}
+            prevPage={prevPage}
+            nextPage={nextPage}
           />
         )}
 
-        {/* Language Instruction */}
-        {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>
-            </p>
-            <div className="mt-2 text-slate-300">
-              {task.split('\n').map((instruction: string, index: number) => (
-                <p key={index} className="mb-1">
-                  {instruction}
-                </p>
-              ))}
-            </div>
-          </div>
-        )}
+        {/* Main content */}
+        <div
+          className={`flex flex-col gap-4 p-4 flex-1 relative ${isLoading ? "overflow-hidden" : "overflow-y-auto"}`}
+        >
+          {isLoading && <Loading />}
 
-        {/* Graph */}
-        <div className="mb-4">
-          <DataRecharts
-            data={chartDataGroups}
-            onChartsReady={() => setChartsReady(true)}
-          />
+          {activeTab === "episodes" && (
+            <>
+              <div className="flex items-center justify-start my-4">
+                <a
+                  href="https://github.com/huggingface/lerobot"
+                  target="_blank"
+                  className="block"
+                >
+                  <img
+                    src="https://github.com/huggingface/lerobot/raw/main/media/readme/lerobot-logo-thumbnail.png"
+                    alt="LeRobot Logo"
+                    className="w-32"
+                  />
+                </a>
 
-        </div>
+                <div>
+                  <a
+                    href={`https://huggingface.co/datasets/${datasetInfo.repoId}`}
+                    target="_blank"
+                  >
+                    <p className="text-lg font-semibold">{datasetInfo.repoId}</p>
+                  </a>
+
+                  <p className="font-mono text-lg font-semibold">
+                    episode {episodeId}
+                  </p>
+                </div>
+              </div>
+
+              {/* Videos */}
+              {videosInfo.length > 0 && (
+                <SimpleVideosPlayer
+                  videosInfo={videosInfo}
+                  onVideosReady={() => setVideosReady(true)}
+                />
+              )}
+
+              {/* Language Instruction */}
+              {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>
+                  </p>
+                  <div className="mt-2 text-slate-300">
+                    {task.split('\n').map((instruction: string, index: number) => (
+                      <p key={index} className="mb-1">
+                        {instruction}
+                      </p>
+                    ))}
+                  </div>
+                </div>
+              )}
 
-        <PlaybackBar />
+              {/* Graph */}
+              <div className="mb-4">
+                <DataRecharts
+                  data={chartDataGroups}
+                  onChartsReady={() => setChartsReady(true)}
+                />
+              </div>
+
+              <PlaybackBar />
+            </>
+          )}
+
+          {activeTab === "statistics" && (
+            <StatsPanel
+              datasetInfo={datasetInfo}
+              episodeId={episodeId}
+              columnMinMax={columnMinMax}
+              episodeLengthStats={episodeLengthStats}
+              loading={statsLoading}
+            />
+          )}
+
+          {activeTab === "frames" && (
+            <OverviewPanel data={episodeFramesData} loading={framesLoading} />
+          )}
+
+          {activeTab === "urdf" && (
+            <Suspense fallback={<Loading />}>
+              <URDFViewer data={data} />
+            </Suspense>
+          )}
+        </div>
       </div>
     </div>
   );

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

@@ -18,20 +18,62 @@ export type VideoInfo = {
   segmentDuration?: number;
 };
 
+export type CameraInfo = { name: string; width: number; height: number };
+
 export type DatasetDisplayInfo = {
   repoId: string;
   total_frames: number;
   total_episodes: number;
   fps: number;
+  robot_type: string | null;
+  codebase_version: string;
+  total_tasks: number;
+  dataset_size_mb: number;
+  cameras: CameraInfo[];
 };
 
 export type ChartRow = Record<string, number | Record<string, number>>;
 
+export type ColumnMinMax = {
+  column: string;
+  min: number;
+  max: number;
+};
+
+export type EpisodeLengthInfo = {
+  episodeIndex: number;
+  lengthSeconds: number;
+  frames: number;
+};
+
+export type EpisodeLengthStats = {
+  shortestEpisodes: EpisodeLengthInfo[];
+  longestEpisodes: EpisodeLengthInfo[];
+  allEpisodeLengths: EpisodeLengthInfo[];
+  meanEpisodeLength: number;
+  medianEpisodeLength: number;
+  stdEpisodeLength: number;
+  episodeLengthHistogram: { binLabel: string; count: number }[];
+};
+
+export type EpisodeFrameInfo = {
+  episodeIndex: number;
+  videoUrl: string;
+  firstFrameTime: number;
+  lastFrameTime: number | null; // null = seek to video.duration on client
+};
+
+export type EpisodeFramesData = {
+  cameras: string[];
+  framesByCamera: Record<string, EpisodeFrameInfo[]>;
+};
+
 export type EpisodeData = {
   datasetInfo: DatasetDisplayInfo;
   episodeId: number;
   videosInfo: VideoInfo[];
   chartDataGroups: ChartRow[][];
+  flatChartData: Record<string, number>[];
   episodes: number[];
   ignoredColumns: string[];
   duration: number;
@@ -107,6 +149,21 @@ export async function getEpisodeData(
       ? await getEpisodeDataV3(repoId, version, info, episodeId)
       : await getEpisodeDataV2(repoId, version, info, episodeId);
     console.timeEnd(`[perf] getEpisodeData (${version})`);
+
+    // Extract camera resolutions from features
+    const cameras: CameraInfo[] = Object.entries(rawInfo.features)
+      .filter(([, f]) => f.dtype === "video" && f.shape.length >= 2)
+      .map(([name, f]) => ({ name, height: f.shape[0], width: f.shape[1] }));
+
+    result.datasetInfo = {
+      ...result.datasetInfo,
+      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,
+      cameras,
+    };
+
     return result;
   } catch (err) {
     console.error("Error loading episode data:", err);
@@ -181,12 +238,16 @@ async function getEpisodeDataV2(
 ): Promise<EpisodeData> {
   const episode_chunk = Math.floor(0 / 1000);
 
-  // Dataset information
-  const datasetInfo = {
+  const datasetInfo: DatasetDisplayInfo = {
     repoId,
     total_frames: info.total_frames,
     total_episodes: info.total_episodes,
     fps: info.fps,
+    robot_type: null,
+    codebase_version: version,
+    total_tasks: 0,
+    dataset_size_mb: 0,
+    cameras: [],
   };
 
   // Generate list of episodes
@@ -440,6 +501,7 @@ async function getEpisodeDataV2(
     episodeId,
     videosInfo,
     chartDataGroups,
+    flatChartData: chartData,
     episodes,
     ignoredColumns,
     duration,
@@ -454,15 +516,18 @@ async function getEpisodeDataV3(
   info: DatasetMetadata,
   episodeId: number,
 ): Promise<EpisodeData> {
-  // Create dataset info structure (like v2.x)
-  const datasetInfo = {
+  const datasetInfo: DatasetDisplayInfo = {
     repoId,
     total_frames: info.total_frames,
     total_episodes: info.total_episodes,
     fps: info.fps,
+    robot_type: null,
+    codebase_version: version,
+    total_tasks: 0,
+    dataset_size_mb: 0,
+    cameras: [],
   };
 
-  // Generate episodes list based on total_episodes from dataset info
   const episodes = Array.from({ length: info.total_episodes }, (_, i) => i);
 
   // Load episode metadata to get timestamps for episode 0
@@ -472,17 +537,17 @@ async function getEpisodeDataV3(
   const videosInfo = extractVideoInfoV3WithSegmentation(repoId, version, info, episodeMetadata);
 
   // Load episode data for charts
-  const { chartDataGroups, ignoredColumns, task } = await loadEpisodeDataV3(repoId, version, info, episodeMetadata);
+  const { chartDataGroups, flatChartData, ignoredColumns, task } = await loadEpisodeDataV3(repoId, version, info, episodeMetadata);
 
-  // Calculate duration from episode length and FPS if available
   const duration = episodeMetadata.length ? episodeMetadata.length / info.fps : 
                    (episodeMetadata.video_to_timestamp - episodeMetadata.video_from_timestamp);
-  
+
   return {
     datasetInfo,
     episodeId,
     videosInfo,
     chartDataGroups,
+    flatChartData,
     episodes,
     ignoredColumns,
     duration,
@@ -496,7 +561,7 @@ async function loadEpisodeDataV3(
   version: string,
   info: DatasetMetadata,
   episodeMetadata: EpisodeMetadataV3,
-): Promise<{ chartDataGroups: ChartRow[][]; 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 = episodeMetadata.data_chunk_index || 0;
   const dataFileIndex = episodeMetadata.data_file_index || 0;
@@ -526,11 +591,11 @@ async function loadEpisodeDataV3(
     const episodeData = fullData.slice(localFromIndex, localToIndex);
     
     if (episodeData.length === 0) {
-      return { chartDataGroups: [], 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, 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;
@@ -586,9 +651,9 @@ async function loadEpisodeDataV3(
       }
     }
     
-    return { chartDataGroups, ignoredColumns, task };
+    return { chartDataGroups, flatChartData, ignoredColumns, task };
   } catch {
-    return { chartDataGroups: [], ignoredColumns: [], task: undefined };
+    return { chartDataGroups: [], flatChartData: [], ignoredColumns: [], task: undefined };
   }
 }
 
@@ -597,7 +662,7 @@ function processEpisodeDataForCharts(
   episodeData: Record<string, unknown>[],
   info: DatasetMetadata,
   episodeMetadata?: EpisodeMetadataV3,
-): { chartDataGroups: ChartRow[][]; ignoredColumns: string[] } {
+): { chartDataGroups: ChartRow[][]; flatChartData: Record<string, number>[]; ignoredColumns: string[] } {
   
   // Get numeric column features
   const columnNames = Object.entries(info.features)
@@ -854,7 +919,7 @@ function processEpisodeDataForCharts(
     chartData.map((row) => groupRowBySuffix(pick(row, [...group, "timestamp"])))
   );
 
-  return { chartDataGroups, ignoredColumns };
+  return { chartDataGroups, flatChartData: chartData, ignoredColumns };
 }
 
 
@@ -1054,6 +1119,224 @@ function parseEpisodeRowSimple(row: Record<string, unknown>): EpisodeMetadataV3
 
 
 
+// ─── Stats computation ───────────────────────────────────────────
+
+/**
+ * Compute per-column min/max values from the current episode's chart data.
+ */
+export function computeColumnMinMax(chartDataGroups: ChartRow[][]): ColumnMinMax[] {
+  const stats: Record<string, { min: number; max: number }> = {};
+
+  for (const group of chartDataGroups) {
+    for (const row of group) {
+      for (const [key, value] of Object.entries(row)) {
+        if (key === "timestamp") continue;
+        if (typeof value === "number" && isFinite(value)) {
+          if (!stats[key]) {
+            stats[key] = { min: value, max: value };
+          } else {
+            if (value < stats[key].min) stats[key].min = value;
+            if (value > stats[key].max) stats[key].max = value;
+          }
+        } else if (typeof value === "object" && value !== null) {
+          // Nested group like { joint_0: 1.2, joint_1: 3.4 }
+          for (const [subKey, subVal] of Object.entries(value)) {
+            const fullKey = `${key} | ${subKey}`;
+            if (typeof subVal === "number" && isFinite(subVal)) {
+              if (!stats[fullKey]) {
+                stats[fullKey] = { min: subVal, max: subVal };
+              } else {
+                if (subVal < stats[fullKey].min) stats[fullKey].min = subVal;
+                if (subVal > stats[fullKey].max) stats[fullKey].max = subVal;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return Object.entries(stats).map(([column, { min, max }]) => ({
+    column,
+    min: Math.round(min * 1000) / 1000,
+    max: Math.round(max * 1000) / 1000,
+  }));
+}
+
+/**
+ * Load all episode lengths from the episodes metadata parquet files (v3.0).
+ * Returns min/max/mean/median/std and a histogram, or null if unavailable.
+ */
+export async function loadAllEpisodeLengthsV3(
+  repoId: string,
+  version: string,
+  fps: number,
+): Promise<EpisodeLengthStats | null> {
+  try {
+    const allEpisodes: { index: number; length: number }[] = [];
+    let fileIndex = 0;
+    const chunkIndex = 0;
+
+    while (true) {
+      const path = `meta/episodes/chunk-${chunkIndex.toString().padStart(3, "0")}/file-${fileIndex.toString().padStart(3, "0")}.parquet`;
+      const url = buildVersionedUrl(repoId, version, path);
+      try {
+        const buf = await fetchParquetFile(url);
+        const rows = await readParquetAsObjects(buf, []);
+        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 });
+        }
+        fileIndex++;
+      } catch {
+        break;
+      }
+    }
+
+    if (allEpisodes.length === 0) return null;
+
+    const withSeconds = allEpisodes.map((ep) => ({
+      episodeIndex: ep.index,
+      frames: ep.length,
+      lengthSeconds: Math.round((ep.length / fps) * 100) / 100,
+    }));
+
+    const sortedByLength = [...withSeconds].sort((a, b) => a.lengthSeconds - b.lengthSeconds);
+    const shortestEpisodes = sortedByLength.slice(0, 5);
+    const longestEpisodes = sortedByLength.slice(-5).reverse();
+
+    const lengths = withSeconds.map((e) => e.lengthSeconds);
+    const sum = lengths.reduce((a, b) => a + b, 0);
+    const mean = Math.round((sum / lengths.length) * 100) / 100;
+
+    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 variance = lengths.reduce((acc, l) => acc + (l - mean) ** 2, 0) / lengths.length;
+    const std = Math.round(Math.sqrt(variance) * 100) / 100;
+
+    // Build histogram
+    const histMin = Math.min(...lengths);
+    const histMax = Math.max(...lengths);
+
+    if (histMax === histMin) {
+      return {
+        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 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 niceMin = Math.floor(p1 / niceBinWidth) * niceBinWidth;
+    const niceMax = Math.ceil(p99 / niceBinWidth) * niceBinWidth;
+    const actualBinCount = Math.max(1, Math.round((niceMax - niceMin) / niceBinWidth));
+    const bins = Array.from({ length: actualBinCount }, () => 0);
+
+    for (const len of lengths) {
+      let binIdx = Math.floor((len - niceMin) / niceBinWidth);
+      if (binIdx < 0) binIdx = 0;
+      if (binIdx >= actualBinCount) binIdx = actualBinCount - 1;
+      bins[binIdx]++;
+    }
+
+    const histogram = bins.map((count, i) => {
+      const lo = niceMin + i * niceBinWidth;
+      const hi = lo + niceBinWidth;
+      return { binLabel: `${lo.toFixed(1)}–${hi.toFixed(1)}s`, count };
+    });
+
+    return {
+      shortestEpisodes, longestEpisodes, allEpisodeLengths: withSeconds,
+      meanEpisodeLength: mean, medianEpisodeLength: median, stdEpisodeLength: std,
+      episodeLengthHistogram: histogram,
+    };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Load video frame info for all episodes across all cameras.
+ * Returns camera names + a map of camera → EpisodeFrameInfo[].
+ */
+export async function loadAllEpisodeFrameInfo(
+  repoId: string,
+  version: string,
+  info: DatasetMetadata,
+): Promise<EpisodeFramesData> {
+  const videoFeatures = Object.entries(info.features).filter(([, f]) => f.dtype === "video");
+  if (videoFeatures.length === 0) return { cameras: [], framesByCamera: {} };
+
+  const cameras = videoFeatures.map(([key]) => key);
+  const framesByCamera: Record<string, EpisodeFrameInfo[]> = {};
+  for (const cam of cameras) framesByCamera[cam] = [];
+
+  if (version === "v3.0") {
+    let fileIndex = 0;
+    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 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 videoPath = `videos/${cam}/chunk-${cIdx.toString().padStart(3, "0")}/file-${fIdx.toString().padStart(3, "0")}.mp4`;
+            framesByCamera[cam].push({
+              episodeIndex: epIdx,
+              videoUrl: buildVersionedUrl(repoId, version, videoPath),
+              firstFrameTime: fromTs,
+              lastFrameTime: Math.max(0, toTs - 0.05),
+            });
+          }
+        }
+        fileIndex++;
+      } catch {
+        break;
+      }
+    }
+    return { cameras, framesByCamera };
+  }
+
+  // v2.x — construct URLs from template
+  for (let i = 0; i < info.total_episodes; i++) {
+    const chunk = Math.floor(i / (info.chunks_size || 1000));
+    for (const cam of cameras) {
+      const videoPath = formatStringWithVars(info.video_path, {
+        video_key: cam,
+        episode_chunk: chunk.toString().padStart(3, "0"),
+        episode_index: i.toString().padStart(6, "0"),
+      });
+      framesByCamera[cam].push({
+        episodeIndex: i,
+        videoUrl: buildVersionedUrl(repoId, version, videoPath),
+        firstFrameTime: 0,
+        lastFrameTime: null,
+      });
+    }
+  }
+  return { cameras, framesByCamera };
+}
+
 // Safe wrapper for UI error display
 export async function getEpisodeDataSafe(
   org: string,

src/components/overview-panel.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import type { EpisodeFrameInfo, EpisodeFramesData } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+
+const PAGE_SIZE = 48;
+
+function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast: boolean }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const obs = new IntersectionObserver(
+      ([e]) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } },
+      { rootMargin: "200px" },
+    );
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !inView) return;
+
+    const seek = () => {
+      if (showLast) {
+        video.currentTime = info.lastFrameTime ?? Math.max(0, video.duration - 0.05);
+      } else {
+        video.currentTime = info.firstFrameTime;
+      }
+    };
+
+    if (video.readyState >= 1) {
+      seek();
+    } else {
+      video.addEventListener("loadedmetadata", seek, { once: true });
+      return () => video.removeEventListener("loadedmetadata", seek);
+    }
+  }, [inView, showLast, info]);
+
+  return (
+    <div ref={containerRef} className="flex flex-col items-center">
+      <div className="w-full aspect-video bg-slate-800 rounded overflow-hidden">
+        {inView ? (
+          <video
+            ref={videoRef}
+            src={info.videoUrl}
+            preload="metadata"
+            muted
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full animate-pulse bg-slate-700" />
+        )}
+      </div>
+      <p className="text-xs text-slate-400 mt-1 tabular-nums">ep {info.episodeIndex}</p>
+    </div>
+  );
+}
+
+interface OverviewPanelProps {
+  data: EpisodeFramesData | null;
+  loading: boolean;
+}
+
+export default function OverviewPanel({ data, loading }: OverviewPanelProps) {
+  const [selectedCamera, setSelectedCamera] = useState<string>("");
+  const [showLast, setShowLast] = useState(false);
+  const [page, setPage] = useState(0);
+
+  // Auto-select first camera when data arrives
+  useEffect(() => {
+    if (data && data.cameras.length > 0 && !selectedCamera) {
+      setSelectedCamera(data.cameras[0]);
+    }
+  }, [data, selectedCamera]);
+
+  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" />
+        </svg>
+        Loading episode frames…
+      </div>
+    );
+  }
+
+  const frames = data.framesByCamera[selectedCamera] ?? [];
+
+  if (frames.length === 0) {
+    return <p className="text-slate-500 italic py-8 text-center">No episode frames available.</p>;
+  }
+
+  const totalPages = Math.ceil(frames.length / PAGE_SIZE);
+  const pageFrames = frames.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+
+  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 — and to visualize diversity across the dataset.
+      </p>
+
+      {/* Controls row */}
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <div className="flex items-center gap-5">
+          {/* Camera selector */}
+          {data.cameras.length > 1 && (
+            <select
+              value={selectedCamera}
+              onChange={handleCameraChange}
+              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>
+              ))}
+            </select>
+          )}
+
+          {/* First / Last toggle */}
+          <div className="flex items-center gap-3">
+            <span className={`text-sm ${!showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}>
+              First Frame
+            </span>
+            <button
+              onClick={() => setShowLast((v) => !v)}
+              className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${showLast ? "bg-orange-500" : "bg-slate-600"}`}
+              aria-label="Toggle first/last frame"
+            >
+              <span
+                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"}`}>
+              Last Frame
+            </span>
+          </div>
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center gap-2 text-sm text-slate-300">
+            <button
+              disabled={page === 0}
+              onClick={() => setPage((p) => p - 1)}
+              className="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:cursor-not-allowed"
+            >
+              ← Prev
+            </button>
+            <span className="tabular-nums">
+              {page + 1} / {totalPages}
+            </span>
+            <button
+              disabled={page === totalPages - 1}
+              onClick={() => setPage((p) => p + 1)}
+              className="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:cursor-not-allowed"
+            >
+              Next →
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Adaptive grid — only current page's thumbnails are mounted */}
+      <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} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/side-nav.tsx

@@ -24,46 +24,29 @@ const Sidebar: React.FC<SidebarProps> = ({
   prevPage,
   nextPage,
 }) => {
-  const [sidebarVisible, setSidebarVisible] = React.useState(true);
-  const toggleSidebar = () => setSidebarVisible((prev) => !prev);
-
-  const sidebarRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (!sidebarVisible) return;
-    function handleClickOutside(event: MouseEvent) {
-      // If click is outside the sidebar nav
-      if (
-        sidebarRef.current &&
-        !sidebarRef.current.contains(event.target as Node)
-      ) {
-        setTimeout(() => setSidebarVisible(false), 500);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [sidebarVisible]);
+  // On mobile, allow toggling; on desktop the sidebar is always visible
+  const [mobileVisible, setMobileVisible] = React.useState(false);
 
   return (
-    <div className="flex z-10 min-h-screen absolute md:static" ref={sidebarRef}>
+    <div className="flex z-10 shrink-0">
+      {/* Sidebar panel — always visible on md+, togglable on mobile */}
       <nav
-        className={`shrink-0 overflow-y-auto bg-slate-900 p-5 break-words md:max-h-screen w-60 md:shrink ${
-          !sidebarVisible ? "hidden" : ""
-        }`}
+        className={`shrink-0 overflow-y-auto bg-slate-900 p-5 break-words w-60 ${
+          mobileVisible ? "block" : "hidden"
+        } md:block`}
         aria-label="Sidebar navigation"
       >
-        <ul>
-          <li>Number of frames: {datasetInfo.total_frames}</li>
-          <li>Number of episodes: {datasetInfo.total_episodes}</li>
-          <li>Frames per second: {datasetInfo.fps}</li>
+        {/* Basic dataset info */}
+        <ul className="text-sm text-slate-300 space-y-0.5">
+          <li>Frames: {datasetInfo.total_frames.toLocaleString()}</li>
+          <li>Episodes: {datasetInfo.total_episodes.toLocaleString()}</li>
+          <li>FPS: {datasetInfo.fps}</li>
         </ul>
 
-        <p>Episodes:</p>
+        <p className="mt-4 text-sm font-semibold text-slate-200">Episodes:</p>
 
-        {/* episodes menu for medium & large screens */}
-        <div className="ml-2 block">
+        {/* Episodes list */}
+        <div className="ml-2 mt-1">
           <ul>
             {paginatedEpisodes.map((episode) => (
               <li key={episode} className="mt-0.5 font-mono text-sm">
@@ -106,13 +89,14 @@ const Sidebar: React.FC<SidebarProps> = ({
           )}
         </div>
       </nav>
-      {/* Toggle sidebar button */}
+
+      {/* Mobile toggle button */}
       <button
-        className="mx-1 flex items-center opacity-50 hover:opacity-100 focus:outline-none focus:ring-0"
-        onClick={toggleSidebar}
+        className="mx-1 flex items-center opacity-50 hover:opacity-100 focus:outline-none focus:ring-0 md:hidden"
+        onClick={() => setMobileVisible((prev) => !prev)}
         title="Toggle sidebar"
       >
-        <div className="h-10 w-2 rounded-full bg-slate-500"></div>
+        <div className="h-10 w-2 rounded-full bg-slate-500" />
       </button>
     </div>
   );

src/components/stats-panel.tsx

@@ -0,0 +1,335 @@
+"use client";
+
+import React, { useState, useMemo, useCallback } from "react";
+import type {
+  DatasetDisplayInfo,
+  ColumnMinMax,
+  EpisodeLengthStats,
+  EpisodeLengthInfo,
+  CameraInfo,
+} from "@/app/[org]/[dataset]/[episode]/fetch-data";
+
+interface StatsPanelProps {
+  datasetInfo: DatasetDisplayInfo;
+  episodeId: number;
+  columnMinMax: ColumnMinMax[] | null;
+  episodeLengthStats: EpisodeLengthStats | null;
+  loading: boolean;
+}
+
+function formatTotalTime(totalFrames: number, fps: number): string {
+  const totalSec = totalFrames / fps;
+  const hours = Math.floor(totalSec / 3600);
+  const minutes = Math.floor((totalSec % 3600) / 60);
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  return `${minutes}m`;
+}
+
+/** SVG bar chart for the episode-length histogram */
+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 chartHeight = 150;
+  const labelHeight = 30;
+  const topPad = 16;
+  const svgWidth = data.length * (barWidth + gap);
+  const labelStep = Math.max(1, Math.ceil(data.length / 10));
+
+  return (
+    <div className="overflow-x-auto">
+      <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);
+          const y = topPad + chartHeight - barH;
+          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)} />
+              {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)}>
+                  {bin.count}
+                </text>
+              )}
+            </g>
+          );
+        })}
+        {data.map((bin, idx) => {
+          const isFirst = idx === 0;
+          const isLast = idx === data.length - 1;
+          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}>
+              {label}s
+            </text>
+          );
+        })}
+      </svg>
+    </div>
+  );
+};
+
+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>
+  </div>
+);
+
+function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
+  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 [showOutside, setShowOutside] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const filtered = useMemo(() => {
+    const inRange = episodes.filter((e) => e.lengthSeconds >= rangeMin && e.lengthSeconds <= rangeMax);
+    const outRange = episodes.filter((e) => e.lengthSeconds < rangeMin || e.lengthSeconds > rangeMax);
+    return showOutside ? outRange : inRange;
+  }, [episodes, rangeMin, rangeMax, showOutside]);
+
+  const ids = useMemo(() => filtered.map((e) => e.episodeIndex).sort((a, b) => a - b), [filtered]);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(ids.join(", "));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [ids]);
+
+  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>
+
+      {/* Range slider row */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between text-xs text-slate-400">
+          <span className="tabular-nums">{rangeMin.toFixed(1)}s</span>
+          <span className="tabular-nums">{rangeMax.toFixed(1)}s</span>
+        </div>
+        <div className="relative h-5">
+          {/* track background */}
+          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1 rounded bg-slate-700" />
+          {/* active range highlight */}
+          <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"
+          />
+        </div>
+      </div>
+
+      {/* Mode selector */}
+      <div className="flex items-center gap-3">
+        <span className="text-xs text-slate-400">Show:</span>
+        <select
+          value={showOutside ? "outside" : "inside"}
+          onChange={(e) => setShowOutside(e.target.value === "outside")}
+          className="bg-slate-900 text-slate-200 text-xs rounded px-2 py-1 border border-slate-600 focus:outline-none focus:border-orange-500"
+        >
+          <option value="inside">Episodes in range</option>
+          <option value="outside">Episodes outside range</option>
+        </select>
+        <span className="text-xs text-slate-500 tabular-nums ml-auto">{ids.length} episode{ids.length !== 1 ? "s" : ""}</span>
+      </div>
+
+      {/* Results box */}
+      <div className="relative bg-slate-900/70 rounded-md border border-slate-700 p-3 max-h-40 overflow-y-auto">
+        <button
+          onClick={handleCopy}
+          className="sticky top-0 float-right ml-2 p-1.5 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-400 hover:text-slate-200 transition-colors backdrop-blur-sm"
+          title="Copy to clipboard"
+        >
+          {copied ? (
+            <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" className="text-green-400"><polyline points="20 6 9 17 4 12" /></svg>
+          ) : (
+            <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"><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>
+          )}
+        </button>
+        <p className="text-sm text-slate-300 tabular-nums leading-relaxed">
+          {ids.length > 0 ? ids.join(", ") : <span className="text-slate-500 italic">No episodes match</span>}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+const StatsPanel: React.FC<StatsPanelProps> = ({
+  datasetInfo,
+  episodeId,
+  columnMinMax,
+  episodeLengthStats,
+  loading,
+}) => {
+  const els = episodeLengthStats;
+
+  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>
+      </div>
+
+      {/* Overview cards */}
+      <div className="grid grid-cols-3 gap-4">
+        <Card label="Robot Type" value={datasetInfo.robot_type ?? "unknown"} />
+        <Card label="Dataset Version" value={datasetInfo.codebase_version} />
+        <Card label="Tasks" value={datasetInfo.total_tasks} />
+      </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="FPS" value={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>
+          <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>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Loading spinner for async stats */}
+      {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" />
+          </svg>
+          Computing episode statistics…
+        </div>
+      )}
+
+      {/* Episode length section */}
+      {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>
+            <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="Mean" value={`${els.meanEpisodeLength}s`} />
+              <Card label="Median" value={`${els.medianEpisodeLength}s`} />
+              <Card label="Std Dev" value={`${els.stdEpisodeLength}s`} />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <p className="text-xs text-slate-400 uppercase tracking-wide mb-2">Top 5 Shortest</p>
+                <table className="w-full text-sm">
+                  <tbody>
+                    {els.shortestEpisodes.map((ep) => (
+                      <tr key={ep.episodeIndex} className="border-b border-slate-800/60">
+                        <td className="py-1 text-slate-300">ep {ep.episodeIndex}</td>
+                        <td className="py-1 text-right tabular-nums font-semibold">{ep.lengthSeconds}s</td>
+                        <td className="py-1 text-right tabular-nums text-slate-500 text-xs">{ep.frames} fr</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <div>
+                <p className="text-xs text-slate-400 uppercase tracking-wide mb-2">Top 5 Longest</p>
+                <table className="w-full text-sm">
+                  <tbody>
+                    {els.longestEpisodes.map((ep) => (
+                      <tr key={ep.episodeIndex} className="border-b border-slate-800/60">
+                        <td className="py-1 text-slate-300">ep {ep.episodeIndex}</td>
+                        <td className="py-1 text-right tabular-nums font-semibold">{ep.lengthSeconds}s</td>
+                        <td className="py-1 text-right tabular-nums text-slate-500 text-xs">{ep.frames} fr</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          {els.episodeLengthHistogram.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-4">
+                Episode Length Distribution
+                <span className="text-xs text-slate-500 ml-2 font-normal">
+                  {els.episodeLengthHistogram.length} bin{els.episodeLengthHistogram.length !== 1 ? "s" : ""}
+                </span>
+              </h3>
+              <EpisodeLengthHistogram data={els.episodeLengthHistogram} />
+            </div>
+          )}
+
+          <EpisodeLengthFilter episodes={els.allEpisodeLengths} />
+        </>
+      )}
+
+      {/* Column min/max table */}
+      {columnMinMax && columnMinMax.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-4">
+            Column Min / Max
+            <span className="text-xs text-slate-500 ml-2 font-normal">(episode {episodeId})</span>
+          </h3>
+          <div className="overflow-x-auto max-h-96 overflow-y-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-slate-400 border-b border-slate-700 sticky top-0 bg-slate-800">
+                  <th className="text-left py-2 pr-4 font-medium">Column</th>
+                  <th className="text-right py-2 px-4 font-medium">Min</th>
+                  <th className="text-right py-2 pl-4 font-medium">Max</th>
+                </tr>
+              </thead>
+              <tbody>
+                {columnMinMax.map((col) => (
+                  <tr key={col.column} className="border-b border-slate-800/60 hover:bg-slate-700/20">
+                    <td className="py-1.5 pr-4 text-slate-300 truncate max-w-xs" title={col.column}>{col.column}</td>
+                    <td className="py-1.5 px-4 text-right tabular-nums text-slate-300">{col.min}</td>
+                    <td className="py-1.5 pl-4 text-right tabular-nums text-slate-300">{col.max}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StatsPanel;

src/components/urdf-viewer.tsx

@@ -0,0 +1,366 @@
+"use client";
+
+import React, { useState, useEffect, useRef, useMemo, useCallback, Suspense } from "react";
+import { Canvas, useFrame, useLoader } from "@react-three/fiber";
+import { OrbitControls, Grid, Environment } from "@react-three/drei";
+import * as THREE from "three";
+import { STLLoader } from "three/addons/loaders/STLLoader.js";
+import {
+  SO101_JOINTS,
+  SO101_LINKS,
+  MATERIAL_COLORS,
+  autoMatchJoints,
+  type JointDef,
+  type MeshDef,
+} from "@/lib/so101-robot";
+import type { EpisodeData } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+
+const SERIES_DELIM = " | ";
+
+// ─── STL Mesh component ───
+function STLMesh({ mesh }: { mesh: MeshDef }) {
+  const geometry = useLoader(STLLoader, mesh.file);
+  const color = MATERIAL_COLORS[mesh.material];
+  return (
+    <mesh
+      geometry={geometry}
+      position={mesh.origin.xyz}
+      rotation={new THREE.Euler(...mesh.origin.rpy, "XYZ")}
+    >
+      <meshStandardMaterial
+        color={color}
+        metalness={mesh.material === "motor" ? 0.7 : 0.1}
+        roughness={mesh.material === "motor" ? 0.3 : 0.6}
+      />
+    </mesh>
+  );
+}
+
+// ─── Link visual: renders all meshes for a link ───
+function LinkVisual({ linkIndex }: { linkIndex: number }) {
+  const link = SO101_LINKS[linkIndex];
+  if (!link) return null;
+  return (
+    <>
+      {link.meshes.map((mesh, i) => (
+        <STLMesh key={i} mesh={mesh} />
+      ))}
+    </>
+  );
+}
+
+// ─── Joint group: applies origin transform + joint rotation ───
+function JointGroup({
+  joint,
+  angle,
+  linkIndex,
+  children,
+}: {
+  joint: JointDef;
+  angle: number;
+  linkIndex: number;
+  children?: React.ReactNode;
+}) {
+  const rotRef = useRef<THREE.Group>(null);
+
+  useEffect(() => {
+    if (rotRef.current) {
+      rotRef.current.quaternion.setFromAxisAngle(new THREE.Vector3(...joint.axis), angle);
+    }
+  }, [angle, joint.axis]);
+
+  return (
+    <group position={joint.origin.xyz} rotation={new THREE.Euler(...joint.origin.rpy, "XYZ")}>
+      <group ref={rotRef}>
+        <LinkVisual linkIndex={linkIndex} />
+        {children}
+      </group>
+    </group>
+  );
+}
+
+// ─── Full robot arm ───
+function RobotArm({ angles }: { angles: Record<string, number> }) {
+  return (
+    <group>
+      {/* Base link (no parent joint) */}
+      <LinkVisual linkIndex={0} />
+
+      {/* shoulder_pan → shoulder_link (1) */}
+      <JointGroup joint={SO101_JOINTS[0]} angle={angles.shoulder_pan ?? 0} linkIndex={1}>
+        {/* shoulder_lift → upper_arm_link (2) */}
+        <JointGroup joint={SO101_JOINTS[1]} angle={angles.shoulder_lift ?? 0} linkIndex={2}>
+          {/* elbow_flex → lower_arm_link (3) */}
+          <JointGroup joint={SO101_JOINTS[2]} angle={angles.elbow_flex ?? 0} linkIndex={3}>
+            {/* wrist_flex → wrist_link (4) */}
+            <JointGroup joint={SO101_JOINTS[3]} angle={angles.wrist_flex ?? 0} linkIndex={4}>
+              {/* wrist_roll → gripper_link (5) */}
+              <JointGroup joint={SO101_JOINTS[4]} angle={angles.wrist_roll ?? 0} linkIndex={5}>
+                {/* gripper → moving_jaw (6) */}
+                <JointGroup joint={SO101_JOINTS[5]} angle={angles.gripper ?? 0} linkIndex={6} />
+              </JointGroup>
+            </JointGroup>
+          </JointGroup>
+        </JointGroup>
+      </JointGroup>
+    </group>
+  );
+}
+
+// ─── Playback driver (advances frame inside Canvas render loop) ───
+function PlaybackDriver({
+  playing,
+  fps,
+  totalFrames,
+  frameRef,
+}: {
+  playing: boolean;
+  fps: number;
+  totalFrames: number;
+  frameRef: React.MutableRefObject<number>;
+}) {
+  const elapsed = useRef(0);
+  useFrame((_, delta) => {
+    if (!playing) {
+      elapsed.current = 0;
+      return;
+    }
+    elapsed.current += delta;
+    const frameDelta = Math.floor(elapsed.current * fps);
+    if (frameDelta > 0) {
+      elapsed.current -= frameDelta / fps;
+      frameRef.current = (frameRef.current + frameDelta) % totalFrames;
+    }
+  });
+  return null;
+}
+
+// ─── Detect raw servo values (0-4096) vs radians ───
+function detectAndConvert(values: number[]): number[] {
+  if (values.length === 0) return values;
+  const max = Math.max(...values.map(Math.abs));
+  if (max > 10) return values.map((v) => ((v - 2048) / 2048) * Math.PI);
+  return values;
+}
+
+// ─── Group columns by feature prefix ───
+function groupColumnsByPrefix(keys: string[]): Record<string, string[]> {
+  const groups: Record<string, string[]> = {};
+  for (const key of keys) {
+    if (key === "timestamp") continue;
+    const parts = key.split(SERIES_DELIM);
+    const prefix = parts.length > 1 ? parts[0].trim() : "other";
+    if (!groups[prefix]) groups[prefix] = [];
+    groups[prefix].push(key);
+  }
+  return groups;
+}
+
+// ═══════════════════════════════════════
+// ─── Main URDF Viewer ───
+// ═══════════���═══════════════════════════
+export default function URDFViewer({ data }: { data: EpisodeData }) {
+  const { flatChartData, datasetInfo } = data;
+  const totalFrames = flatChartData.length;
+  const fps = datasetInfo.fps || 30;
+
+  const columnGroups = useMemo(() => {
+    if (totalFrames === 0) return {};
+    return groupColumnsByPrefix(Object.keys(flatChartData[0]));
+  }, [flatChartData, totalFrames]);
+
+  const groupNames = useMemo(() => Object.keys(columnGroups), [columnGroups]);
+
+  const defaultGroup = useMemo(
+    () =>
+      groupNames.find((g) => g.toLowerCase().includes("state")) ??
+      groupNames.find((g) => g.toLowerCase().includes("action")) ??
+      groupNames[0] ?? "",
+    [groupNames],
+  );
+
+  const [selectedGroup, setSelectedGroup] = useState(defaultGroup);
+  useEffect(() => setSelectedGroup(defaultGroup), [defaultGroup]);
+
+  const selectedColumns = columnGroups[selectedGroup] ?? [];
+  const autoMapping = useMemo(() => autoMatchJoints(selectedColumns), [selectedColumns]);
+  const [mapping, setMapping] = useState<Record<string, string>>(autoMapping);
+  useEffect(() => setMapping(autoMapping), [autoMapping]);
+
+  const [frame, setFrame] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const frameRef = useRef(0);
+
+  useEffect(() => {
+    if (!playing) return;
+    const interval = setInterval(() => setFrame(frameRef.current), 33);
+    return () => clearInterval(interval);
+  }, [playing]);
+
+  const handleFrameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = parseInt(e.target.value);
+    setFrame(f);
+    frameRef.current = f;
+  }, []);
+
+  const jointAngles = useMemo(() => {
+    if (totalFrames === 0) return {};
+    const row = flatChartData[Math.min(frame, totalFrames - 1)];
+    const rawValues: number[] = [];
+    const jointNames: string[] = [];
+
+    for (const joint of SO101_JOINTS) {
+      const col = mapping[joint.name];
+      if (col && typeof row[col] === "number") {
+        rawValues.push(row[col]);
+        jointNames.push(joint.name);
+      }
+    }
+
+    const converted = detectAndConvert(rawValues);
+    const angles: Record<string, number> = {};
+    jointNames.forEach((name, i) => {
+      angles[name] = converted[i];
+    });
+    return angles;
+  }, [flatChartData, frame, mapping, totalFrames]);
+
+  const currentTime = totalFrames > 0 ? (frame / fps).toFixed(2) : "0.00";
+  const totalTime = (totalFrames / fps).toFixed(2);
+
+  if (totalFrames === 0) {
+    return <div className="text-slate-400 p-8 text-center">No trajectory data available for this episode.</div>;
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* 3D Viewport */}
+      <div className="flex-1 min-h-0 bg-slate-950 rounded-lg overflow-hidden border border-slate-700">
+        <Canvas camera={{ position: [0.35, 0.25, 0.3], fov: 45, near: 0.001, far: 10 }}>
+          <ambientLight intensity={0.5} />
+          <directionalLight position={[3, 5, 4]} intensity={1.2} castShadow />
+          <directionalLight position={[-2, 3, -2]} intensity={0.4} />
+          <hemisphereLight args={["#b1e1ff", "#444444", 0.4]} />
+          <Suspense fallback={null}>
+            <RobotArm angles={jointAngles} />
+          </Suspense>
+          <Grid
+            args={[1, 1]}
+            cellSize={0.02}
+            cellThickness={0.5}
+            cellColor="#334155"
+            sectionSize={0.1}
+            sectionThickness={1}
+            sectionColor="#475569"
+            fadeDistance={1}
+            position={[0, 0, 0]}
+          />
+          <OrbitControls target={[0, 0.1, 0]} />
+          <PlaybackDriver playing={playing} fps={fps} totalFrames={totalFrames} frameRef={frameRef} />
+        </Canvas>
+      </div>
+
+      {/* Controls Panel */}
+      <div className="bg-slate-800/90 border-t border-slate-700 p-3 space-y-3 shrink-0">
+        {/* Playback bar */}
+        <div className="flex items-center gap-3">
+          <button
+            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">
+                <polygon points="2,1 11,7 2,13" fill="white" />
+              </svg>
+            )}
+          </button>
+          <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}/{totalFrames - 1}
+          </span>
+        </div>
+
+        {/* Data source + joint mapping */}
+        <div className="flex gap-4 items-start">
+          <div className="space-y-1 shrink-0">
+            <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)}
+                  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>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-x-auto">
+            <table className="w-full text-xs">
+              <thead>
+                <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-right font-normal px-1">Value (rad)</th>
+                </tr>
+              </thead>
+              <tbody>
+                {SO101_JOINTS.map((joint) => (
+                  <tr key={joint.name} className="border-t border-slate-700/50">
+                    <td className="px-1 py-0.5 text-slate-300 font-mono">{joint.name}</td>
+                    <td className="px-1 text-slate-600">→</td>
+                    <td className="px-1 py-0.5">
+                      <select
+                        value={mapping[joint.name] ?? ""}
+                        onChange={(e) => setMapping((m) => ({ ...m, [joint.name]: 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>
+                          );
+                        })}
+                      </select>
+                    </td>
+                    <td className="px-1 py-0.5 text-right tabular-nums text-slate-400 font-mono">
+                      {jointAngles[joint.name] !== undefined ? jointAngles[joint.name].toFixed(3) : "—"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/so101-robot.ts

@@ -0,0 +1,154 @@
+export type JointDef = {
+  name: string;
+  origin: { xyz: [number, number, number]; rpy: [number, number, number] };
+  axis: [number, number, number];
+  limits: [number, number];
+};
+
+export type MeshDef = {
+  file: string;
+  origin: { xyz: [number, number, number]; rpy: [number, number, number] };
+  material: "3d_printed" | "motor";
+};
+
+export type LinkDef = {
+  name: string;
+  meshes: MeshDef[];
+};
+
+const ASSET_BASE = "/urdf/so101/assets";
+const P = Math.PI;
+
+// ─── Visual meshes per link (from URDF) ───
+export const SO101_LINKS: LinkDef[] = [
+  {
+    name: "base_link",
+    meshes: [
+      { file: `${ASSET_BASE}/base_motor_holder_so101_v1.stl`, origin: { xyz: [-0.00636471, -9.94414e-05, -0.0024], rpy: [P / 2, 0, P / 2] }, material: "3d_printed" },
+      { file: `${ASSET_BASE}/base_so101_v2.stl`, origin: { xyz: [-0.00636471, 0, -0.0024], rpy: [P / 2, 0, P / 2] }, material: "3d_printed" },
+      { file: `${ASSET_BASE}/sts3215_03a_v1.stl`, origin: { xyz: [0.0263353, 0, 0.0437], rpy: [0, 0, 0] }, material: "motor" },
+      { file: `${ASSET_BASE}/waveshare_mounting_plate_so101_v2.stl`, origin: { xyz: [-0.0309827, -0.000199441, 0.0474], rpy: [P / 2, 0, P / 2] }, material: "3d_printed" },
+    ],
+  },
+  {
+    name: "shoulder_link",
+    meshes: [
+      { file: `${ASSET_BASE}/sts3215_03a_v1.stl`, origin: { xyz: [-0.0303992, 0.000422241, -0.0417], rpy: [P / 2, P / 2, 0] }, material: "motor" },
+      { file: `${ASSET_BASE}/motor_holder_so101_base_v1.stl`, origin: { xyz: [-0.0675992, -0.000177759, 0.0158499], rpy: [P / 2, -P / 2, 0] }, material: "3d_printed" },
+      { file: `${ASSET_BASE}/rotation_pitch_so101_v1.stl`, origin: { xyz: [0.0122008, 2.22413e-05, 0.0464], rpy: [-P / 2, 0, 0] }, material: "3d_printed" },
+    ],
+  },
+  {
+    name: "upper_arm_link",
+    meshes: [
+      { file: `${ASSET_BASE}/sts3215_03a_v1.stl`, origin: { xyz: [-0.11257, -0.0155, 0.0187], rpy: [-P, 0, -P / 2] }, material: "motor" },
+      { file: `${ASSET_BASE}/upper_arm_so101_v1.stl`, origin: { xyz: [-0.065085, 0.012, 0.0182], rpy: [P, 0, 0] }, material: "3d_printed" },
+    ],
+  },
+  {
+    name: "lower_arm_link",
+    meshes: [
+      { file: `${ASSET_BASE}/under_arm_so101_v1.stl`, origin: { xyz: [-0.0648499, -0.032, 0.0182], rpy: [P, 0, 0] }, material: "3d_printed" },
+      { file: `${ASSET_BASE}/motor_holder_so101_wrist_v1.stl`, origin: { xyz: [-0.0648499, -0.032, 0.018], rpy: [-P, 0, 0] }, material: "3d_printed" },
+      { file: `${ASSET_BASE}/sts3215_03a_v1.stl`, origin: { xyz: [-0.1224, 0.0052, 0.0187], rpy: [-P, 0, -P] }, material: "motor" },
+    ],
+  },
+  {
+    name: "wrist_link",
+    meshes: [
+      { file: `${ASSET_BASE}/sts3215_03a_no_horn_v1.stl`, origin: { xyz: [0, -0.0424, 0.0306], rpy: [P / 2, P / 2, 0] }, material: "motor" },
+      { file: `${ASSET_BASE}/wrist_roll_pitch_so101_v2.stl`, origin: { xyz: [0, -0.028, 0.0181], rpy: [-P / 2, -P / 2, 0] }, material: "3d_printed" },
+    ],
+  },
+  {
+    name: "gripper_link",
+    meshes: [
+      { file: `${ASSET_BASE}/sts3215_03a_v1.stl`, origin: { xyz: [0.0077, 0.0001, -0.0234], rpy: [-P / 2, 0, 0] }, material: "motor" },
+      { file: `${ASSET_BASE}/wrist_roll_follower_so101_v1.stl`, origin: { xyz: [0, -0.000218214, 0.000949706], rpy: [-P, 0, 0] }, material: "3d_printed" },
+    ],
+  },
+  {
+    name: "moving_jaw_link",
+    meshes: [
+      { file: `${ASSET_BASE}/moving_jaw_so101_v1.stl`, origin: { xyz: [0, 0, 0.0189], rpy: [0, 0, 0] }, material: "3d_printed" },
+    ],
+  },
+];
+
+// Kinematic chain: each joint connects a parent link to a child link
+// Index in SO101_LINKS: base=0, shoulder=1, upper_arm=2, lower_arm=3, wrist=4, gripper=5, jaw=6
+export const SO101_JOINTS: JointDef[] = [
+  {
+    name: "shoulder_pan",
+    origin: { xyz: [0.0388353, -8.97657e-09, 0.0624], rpy: [P, 4.18253e-17, -P] },
+    axis: [0, 0, 1],
+    limits: [-1.91986, 1.91986],
+  },
+  {
+    name: "shoulder_lift",
+    origin: { xyz: [-0.0303992, -0.0182778, -0.0542], rpy: [-P / 2, -P / 2, 0] },
+    axis: [0, 0, 1],
+    limits: [-1.74533, 1.74533],
+  },
+  {
+    name: "elbow_flex",
+    origin: { xyz: [-0.11257, -0.028, 1.73763e-16], rpy: [0, 0, P / 2] },
+    axis: [0, 0, 1],
+    limits: [-1.69, 1.69],
+  },
+  {
+    name: "wrist_flex",
+    origin: { xyz: [-0.1349, 0.0052, 0], rpy: [0, 0, -P / 2] },
+    axis: [0, 0, 1],
+    limits: [-1.65806, 1.65806],
+  },
+  {
+    name: "wrist_roll",
+    origin: { xyz: [0, -0.0611, 0.0181], rpy: [P / 2, 0.0486795, P] },
+    axis: [0, 0, 1],
+    limits: [-2.74385, 2.84121],
+  },
+  {
+    name: "gripper",
+    origin: { xyz: [0.0202, 0.0188, -0.0234], rpy: [P / 2, 0, 0] },
+    axis: [0, 0, 1],
+    limits: [-0.174533, 1.74533],
+  },
+];
+
+export const MATERIAL_COLORS = {
+  "3d_printed": "#FFD700",
+  motor: "#1a1a1a",
+} as const;
+
+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";
+}
+
+// Collect all unique STL file paths for preloading
+export function getAllSTLPaths(): string[] {
+  const paths = new Set<string>();
+  for (const link of SO101_LINKS) {
+    for (const mesh of link.meshes) {
+      paths.add(mesh.file);
+    }
+  }
+  return [...paths];
+}
+
+// Auto-match dataset columns to URDF joint names
+export function autoMatchJoints(columnKeys: string[]): Record<string, string> {
+  const mapping: Record<string, string> = {};
+  for (const joint of SO101_JOINTS) {
+    const exactMatch = columnKeys.find((k) => {
+      const suffix = k.split(" | ").pop()?.trim() ?? k;
+      return suffix === joint.name;
+    });
+    if (exactMatch) { mapping[joint.name] = exactMatch; continue; }
+    const fuzzy = columnKeys.find((k) => k.toLowerCase().includes(joint.name));
+    if (fuzzy) mapping[joint.name] = fuzzy;
+  }
+  return mapping;
+}