Initial viewer for humanoid robots dataset

.gitattributes

@@ -33,3 +33,43 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+dataset_cache/plots/vid1_pitch_deg.png filter=lfs diff=lfs merge=lfs -text
+dataset_cache/plots/vid1_roll_deg.png filter=lfs diff=lfs merge=lfs -text
+dataset_cache/plots/vid1_x_cm.png filter=lfs diff=lfs merge=lfs -text
+dataset_cache/plots/vid1_y_cm.png filter=lfs diff=lfs merge=lfs -text
+dataset_cache/plots/vid1_yaw_deg.png filter=lfs diff=lfs merge=lfs -text
+dataset_cache/plots/vid1_z_cm.png filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/depth/episode_000000.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000000.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000001.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000002.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000003.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000004.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000005.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000006.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000007.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000008.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000009.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000011.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000012.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000013.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000014.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000015.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000016.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000017.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000019.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000020.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000021.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000022.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000023.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000024.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000025.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000026.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000028.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000029.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000030.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000031.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000032.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000033.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000034.mp4 filter=lfs diff=lfs merge=lfs -text
+dataset_cache/videos/chunk-000/rgb/episode_000035.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+/public
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,31 @@
+FROM node:18-slim
+
+# Install system deps required by hyparquet (Arrow) and ffmpeg for video metadata
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    git \
+    wget \
+    ca-certificates \
+    ffmpeg \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install dependencies first (better layer caching)
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Copy application source
+COPY . .
+
+# Environment configuration for our dataset + Hugging Face Space port
+ENV PORT=7860
+ENV REPO_ID="raffaelkultyshev/mini_tug_tape_to_bowl"
+
+# Build the Next.js app
+RUN npm run build
+
+EXPOSE 7860
+
+CMD ["npm", "start"]
+

GRADIO_NOTES.md

@@ -0,0 +1,8 @@
+# Gradio Deployment Notes
+
+- `app.py` defines `build_interface()` and **only** launches the demo when run as `__main__`. Hugging Face imports the module to build the config, so expensive work (dataset download) happens lazily via `lru_cache` helpers.
+- Dataset paths follow the LeRobot layout (`data/chunk-000/...`, `videos/chunk-000/rgb/...`). Files are cached inside `dataset_cache/` by `snapshot_download`.
+- Default episode data is preloaded when the Blocks tree is constructed, so all widgets render immediately without calling the API.
+- User interactions run through `episode_dropdown.change` → `load_episode_payload`, which returns `[instruction, video_path, fig_x, ...]`.
+- `demo.queue().launch(show_api=False)` disables the “Use via API” panel (Gradio 5.7.0 had a schema bug with Plot outputs that broke API info).
+- If you need to expose the API again, make sure to upgrade to a Gradio release where plot schema serialization works, then set `show_api=True`.

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,12 +1,66 @@
 ---
-title: Humanoid Robots Training Viewer V2
-emoji: 🌖
-colorFrom: green
-colorTo: red
-sdk: gradio
-sdk_version: 6.0.2
-app_file: app.py
+title: Mini-TUG Hand Pose Viewer
+emoji: 🎥
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+license: mit
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Mini-TUG Hand Pose Viewer (LeRobot UI)
+
+This Space embeds the official **LeRobot Dataset Visualizer** so we get the exact same UI/UX as the `lerobot/visualize_dataset` Space, but it is pre-configured to load our dataset `raffaelkultyshev/mini_tug_tape_to_bowl`. Videos, language instructions, and 6DoF plots all stream directly from the dataset repository—no local cache required.
+
+## Project Overview
+
+This tool is designed to help robotics researchers and practitioners quickly inspect and understand large, complex datasets. It fetches dataset metadata and episode data (including video and sensor/telemetry data), and provides a unified interface for:
+
+- Navigating between organizations, datasets, and episodes
+- Watching episode videos
+- Exploring synchronized time-series data with interactive charts
+- Paginating through large datasets efficiently
+
+## Key Features
+
+- **Dataset & Episode Navigation:** Quickly jump between organizations, datasets, and episodes using a sidebar and navigation controls.
+- **Synchronized Video & Data:** Video playback is synchronized with interactive data graphs for detailed inspection of sensor and control signals.
+- **Efficient Data Loading:** Uses parquet and JSON loading for large dataset support, with pagination and chunking.
+- **Responsive UI:** Built with React, Next.js, and Tailwind CSS for a fast, modern user experience.
+
+## Technologies Used
+
+- **Next.js** (App Router)
+- **React**
+- **Recharts** (for data visualization)
+- **hyparquet** (for reading Parquet files)
+- **Tailwind CSS** (styling)
+
+## Getting Started
+
+Install dependencies then run the dev server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+The local server will redirect straight to `/raffaelkultyshev/mini_tug_tape_to_bowl/episode_0`. To point the viewer at a different dataset, set the following env vars before running `npm run dev` or `npm run build`:
+
+```bash
+export REPO_ID=some_org/some_dataset
+# optional: space-separated subset of episode indices
+export EPISODES="0 1 2"
+```
+
+## Contributing
+
+Contributions, bug reports, and feature requests are welcome! Please open an issue or submit a pull request.
+
+### Acknowledgement 
+The app was orignally created by [@Mishig25](https://github.com/mishig25) and taken from this PR [#1055](https://github.com/huggingface/lerobot/pull/1055)

Requirements.md

@@ -0,0 +1,37 @@
+## hf_space_mini_tug Requirements
+
+This directory contains the Streamlit application that runs on Hugging Face Spaces and visualizes each episode.
+
+### Files
+
+- `app.py` – Streamlit entrypoint. Downloads the dataset via `snapshot_download`, exposes an episode selector, video player, and Plotly charts.
+- `requirements.txt` – Python dependencies (`streamlit`, `plotly`, `pandas`, `huggingface_hub`).
+- `README.md` – Hub metadata (SDK = Streamlit).
+
+### Data Contract
+
+`app.py` expects the dataset `raffaelkultyshev/mini_tug_tape_to_bowl` to have:
+
+- `meta/info.json` describing `episodes`, `data_path`, and `video_path`.
+- Parquet files with either:
+  1. LeRobot-style `observation.state` columns (`list<float>`) **or**
+  2. Long-form `frame_idx`, `joint_name`, `x_cm`, etc. produced by `hand_pose_pipeline.py`.
+- RGB MP4s encoded as H.264 / yuv420p / faststart (`videos/chunk-000/rgb/...`).
+
+### Internal Logic
+
+1. `get_dataset_revision()` uses `HfApi.repo_info` so Streamlit caches auto-invalidate when the dataset updates.
+2. `load_episode()` reads the Parquet file and, via `build_state_dataframe`, pivots the long table back into the `[wrist_x_cm, ...]` format used by the charts.  
+   - This function enforces accuracy bounds by reindexing frames and rejecting missing joint rows.
+3. Plots are generated with Plotly (`build_plot`) and share the same axis scaling as the offline PNGs.
+
+### Accuracy Guarantees
+
+- Streamlit charts display the exact values computed by `hand_pose_pipeline.py`. No down-sampling is performed.
+- If gaps exist, the app surfaces `NaN` segments directly, ensuring transparency about measurement uncertainty (<3 mm XYZ, <5° angles as validated in `scripts/Requirements.md`).
+
+### Deployment
+
+- Use `huggingface_hub.HfApi.upload_folder(folder_path='hf_space_mini_tug', repo_type='space')`.
+- Before deploying, regenerate the `dataset_cache/` by running the app locally or deleting the cache to avoid shipping stale data.***
+

app.py

@@ -0,0 +1,460 @@
+import json
+import os
+import logging
+import sys
+import html
+from pathlib import Path
+from typing import Dict, List, Optional
+from functools import lru_cache
+
+import gradio as gr
+import pandas as pd
+import plotly.graph_objects as go
+import plotly.io as pio
+from huggingface_hub import snapshot_download, HfApi
+
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s - %(name)s - %(levelname)s - %(message)s",
+    handlers=[logging.StreamHandler(sys.stdout)],
+)
+logger = logging.getLogger(__name__)
+
+DEFAULT_DATASET_ID = os.getenv(
+    "DATASET_ID", "raffaelkultyshev/humanoid-robots-training-dataset"
+)
+LOCAL_DATASET_DIR = Path("dataset_cache")
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+JOINT_ALIASES = {
+    "wrist": "Wrist",
+    "thumb_tip": "Thumb Tip",
+    "index_mcp": "Index MCP",
+    "index_tip": "Index Tip",
+}
+
+JOINT_NAME_MAP = {
+    "wrist": "WRIST",
+    "thumb_tip": "THUMB_TIP",
+    "index_mcp": "INDEX_FINGER_MCP",
+    "index_tip": "INDEX_FINGER_TIP",
+}
+
+METRIC_LABELS = {
+    "x_cm": "X (cm)",
+    "y_cm": "Y (cm)",
+    "z_cm": "Z (cm)",
+    "yaw_deg": "Yaw (°)",
+    "pitch_deg": "Pitch (°)",
+    "roll_deg": "Roll (°)",
+}
+
+PLOT_GRID = [
+    ["x_cm", "y_cm", "z_cm"],
+    ["yaw_deg", "pitch_deg", "roll_deg"],
+]
+
+PLOT_ORDER = [metric for row in PLOT_GRID for metric in row]
+
+CUSTOM_CSS = """
+:root, .gradio-container, body {
+    background-color: #050a18 !important;
+    color: #f8fafc !important;
+    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
+}
+.side-panel {
+    background: #0f172a;
+    padding: 20px;
+    border-radius: 18px;
+    border: 1px solid #1f2b47;
+    min-height: 100%;
+}
+.stats-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 0.92rem;
+}
+.stats-card li {
+    margin-bottom: 10px;
+    color: #e2e8f0;
+}
+.stats-card span {
+    display: inline-block;
+    margin-right: 6px;
+    color: #7dd3fc;
+}
+.episodes-title {
+    margin: 18px 0 8px;
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #94a3b8;
+}
+.episode-list .gr-form {
+    padding: 0;
+}
+.episode-list .gr-form > div {
+    gap: 0;
+}
+.episode-list input[type="radio"] {
+    display: none;
+}
+.episode-list label {
+    background: transparent !important;
+    border: none !important;
+    color: #cbd5f5 !important;
+    padding: 3px 0 !important;
+    justify-content: flex-start;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 0.9rem;
+    text-decoration: underline;
+}
+.episode-list label:hover {
+    color: #67e8f9 !important;
+    cursor: pointer;
+}
+.episode-list input[type="radio"]:checked + label {
+    color: #facc15 !important;
+    font-weight: 700;
+    margin-left: -2px;
+}
+.main-panel {
+    padding-top: 8px;
+}
+.instruction-card {
+    background: #0f172a;
+    padding: 18px 20px;
+    border-radius: 18px;
+    border: 1px solid #1f2b47;
+}
+.instruction-label {
+    font-size: 0.75rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #94a3b8;
+    margin-bottom: 10px;
+}
+.instruction-text {
+    font-size: 1.1rem;
+    line-height: 1.5;
+}
+.video-card {
+    background: #0f172a;
+    border: 1px solid #1f2b47;
+    border-radius: 18px;
+    padding: 18px 20px;
+    margin-top: 18px;
+}
+.video-title {
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: #94a3b8;
+    margin-bottom: 8px;
+}
+.video-panel video {
+    border-radius: 12px;
+    border: 1px solid #1f2b47;
+    background: #030712;
+}
+.download-button button {
+    border-radius: 999px;
+    border: 1px solid #334155;
+    background: #1e293b;
+    color: #f8fafc;
+    font-size: 0.85rem;
+    padding: 8px 24px;
+}
+.download-button button:hover {
+    border-color: #67e8f9;
+    color: #67e8f9;
+}
+.plots-wrap {
+    margin-top: 18px;
+}
+.plots-wrap .gr-row {
+    gap: 16px;
+}
+.plot-html {
+    background: #111a2c;
+    border-radius: 12px;
+    padding: 10px;
+    border: 1px solid #1f2b47;
+    min-height: 320px;
+}
+.plot-html iframe {
+    width: 100%;
+    height: 300px;
+    border: none;
+}
+"""
+
+
+@lru_cache(maxsize=1)
+def get_dataset_revision(repo_id: str) -> Optional[str]:
+    try:
+        info = HfApi(token=HF_TOKEN).repo_info(repo_id=repo_id, repo_type="dataset")
+        return info.sha
+    except Exception as exc:
+        logger.warning(f"Could not fetch dataset revision for {repo_id}: {exc}")
+        return None
+
+
+@lru_cache(maxsize=2)
+def get_dataset_root(repo_id: str, revision: Optional[str]) -> Path:
+    local_path = snapshot_download(
+        repo_id=repo_id,
+        repo_type="dataset",
+        local_dir=LOCAL_DATASET_DIR,
+        local_dir_use_symlinks=False,
+        revision=revision,
+        token=HF_TOKEN,
+    )
+    return Path(local_path)
+
+
+@lru_cache(maxsize=2)
+def load_info(repo_id: str, revision: Optional[str]) -> Dict:
+    root = get_dataset_root(repo_id, revision)
+    info_path = root / "meta" / "info.json"
+    with open(info_path, "r", encoding="utf-8") as f:
+        return json.load(f)
+
+
+def resolve_path(root: Path, template: str, episode_chunk: int, episode_index: int) -> Path:
+    if isinstance(template, dict):
+        rgb_template = template.get("rgb")
+        if rgb_template is None:
+            raise ValueError("RGB template missing from metadata")
+        return root / rgb_template.format(episode_chunk=episode_chunk, episode_index=episode_index)
+    return root / template.format(episode_chunk=episode_chunk, episode_index=episode_index)
+
+
+@lru_cache(maxsize=64)
+def load_episode(repo_id: str, episode_index: int, revision: Optional[str]) -> Dict:
+    info = load_info(repo_id, revision)
+    root = get_dataset_root(repo_id, revision)
+    episode_meta = next((ep for ep in info["episodes"] if ep["episode_index"] == episode_index), None)
+    if not episode_meta:
+        raise ValueError(f"Episode {episode_index} not found in metadata")
+
+    chunk = episode_meta["episode_chunk"]
+    parquet_path = resolve_path(root, info["data_path"], chunk, episode_index)
+    if not parquet_path.exists():
+        raise FileNotFoundError(f"Parquet file not found: {parquet_path}")
+
+    df = pd.read_parquet(parquet_path)
+    timestamps, state_df = build_state_dataframe(df)
+
+    rgb_path = resolve_path(root, info["video_path"], chunk, episode_index)
+
+    instruction = (
+        episode_meta.get("language_instruction")
+        or (
+            df["language_instruction"].dropna().iloc[0]
+            if "language_instruction" in df.columns and not df["language_instruction"].isna().all()
+            else info.get("task", "Tape roll to bowl")
+        )
+    )
+
+    return {
+        "timestamps": timestamps,
+        "state_df": state_df,
+        "rgb_path": rgb_path,
+        "instruction": instruction,
+    }
+
+
+def build_state_dataframe(df: pd.DataFrame) -> (List[float], pd.DataFrame):
+    if "frame_idx" not in df.columns or "timestamp_s" not in df.columns:
+        raise ValueError("Episode parquet missing frame timing information.")
+
+    frame_times = (
+        df[["frame_idx", "timestamp_s"]]
+        .drop_duplicates("frame_idx")
+        .set_index("frame_idx")
+        .sort_index()
+    )
+    frame_indices = frame_times.index.to_list()
+
+    state_df = pd.DataFrame(index=frame_indices)
+    for alias, joint_name in JOINT_NAME_MAP.items():
+        joint_df = (
+            df[df["joint_name"] == joint_name]
+            .set_index("frame_idx")
+            .sort_index()
+            .reindex(frame_indices)
+        )
+        for metric in METRIC_LABELS.keys():
+            if metric in joint_df.columns:
+                state_df[f"{alias}_{metric}"] = joint_df[metric].astype(float)
+
+    state_df.reset_index(drop=True, inplace=True)
+    timestamps = frame_times["timestamp_s"].to_list()
+    return timestamps, state_df
+
+
+def build_plot_fig(data: Dict, metric: str) -> go.Figure:
+    timestamps = data["timestamps"]
+    state_df = data["state_df"]
+    fig = go.Figure()
+    for alias, label in JOINT_ALIASES.items():
+        col_name = f"{alias}_{metric}"
+        if col_name not in state_df.columns:
+            continue
+        fig.add_trace(
+            go.Scatter(
+                x=timestamps,
+                y=state_df[col_name],
+                mode="lines",
+                name=label,
+            )
+        )
+    fig.update_layout(
+        margin=dict(l=20, r=20, t=30, b=20),
+        height=250,
+        template="plotly_dark",
+        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
+        xaxis_title="Time (s)",
+        yaxis_title=METRIC_LABELS[metric],
+    )
+    fig.update_xaxes(showgrid=True, gridwidth=0.5, gridcolor="rgba(255,255,255,0.1)")
+    fig.update_yaxes(showgrid=True, gridwidth=0.5, gridcolor="rgba(255,255,255,0.1)")
+    return fig
+
+
+def build_plot_html(data: Dict, metric: str) -> str:
+    fig = build_plot_fig(data, metric)
+    return pio.to_html(fig, include_plotlyjs="cdn", full_html=False)
+
+
+def format_episode_label(idx: int) -> str:
+    return f"Episode {idx:02d}"
+
+
+def parse_episode_label(label: str) -> int:
+    return int(label.replace("Episode", "").strip())
+
+
+def format_instruction_html(text: str) -> str:
+    safe_text = html.escape(text)
+    return (
+        '<div class="instruction-card">'
+        '<p class="instruction-label">Language Instruction</p>'
+        f'<p class="instruction-text">{safe_text}</p>'
+        "</div>"
+    )
+
+
+def build_interface():
+    revision = get_dataset_revision(DEFAULT_DATASET_ID)
+    info = load_info(DEFAULT_DATASET_ID, revision)
+    episode_indices = sorted(ep["episode_index"] for ep in info["episodes"])
+    if not episode_indices:
+        raise RuntimeError("No episodes found in dataset metadata.")
+
+    default_idx = episode_indices[0]
+    default_label = format_episode_label(default_idx)
+    default_data = load_episode(DEFAULT_DATASET_ID, default_idx, revision)
+    default_video = str(default_data["rgb_path"])
+    default_instruction = default_data["instruction"]
+    default_figs = {metric: build_plot_html(default_data, metric) for metric in METRIC_LABELS.keys()}
+
+    total_frames = sum(ep.get("num_frames", 0) for ep in info["episodes"])
+    fps = info.get("fps", 30.0)
+    stats_html = f"""
+<div class="stats-card">
+  <ul>
+    <li><span>Number of samples/frames:</span> {total_frames:,}</li>
+    <li><span>Number of episodes:</span> {len(episode_indices)}</li>
+    <li><span>Frames per second:</span> {fps:.1f}</li>
+  </ul>
+</div>
+"""
+
+    theme = gr.themes.Soft(
+        primary_hue="cyan", secondary_hue="blue", neutral_hue="slate"
+    ).set(
+        body_background_fill="#0c1424",
+        body_text_color="#f8fafc",
+        block_background_fill="#111a2c",
+        block_title_text_color="#f8fafc",
+        input_background_fill="#151f33",
+        border_color_primary="#1f2b47",
+        shadow_drop="none",
+    )
+
+    with gr.Blocks(theme=theme, css=CUSTOM_CSS) as demo:
+        gr.Markdown("# Humanoid Robots Hand Pose Viewer")
+        gr.Markdown(
+            "Visualize RGB + 6DoF hand trajectories for all Moving_Mini tasks "
+            "(humanoid-robots-training-dataset)."
+        )
+
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=1, min_width=260, elem_classes=["side-panel"]):
+                gr.HTML(stats_html)
+                gr.HTML('<div class="episodes-title">Episodes</div>')
+                episode_radio = gr.Radio(
+                    choices=[format_episode_label(i) for i in episode_indices],
+                    value=default_label,
+                    label="Episodes",
+                    elem_classes=["episode-list"],
+                )
+            with gr.Column(scale=2, min_width=640, elem_classes=["main-panel"]):
+                instruction_box = gr.HTML(
+                    format_instruction_html(default_instruction),
+                    label="Language Instruction",
+                )
+                with gr.Column(elem_classes=["video-card"]):
+                    gr.HTML('<div class="video-title">RGB</div>')
+                    video = gr.Video(
+                        height=360,
+                        value=default_video,
+                        elem_classes=["video-panel"],
+                        show_label=False,
+                        show_download_button=False,
+                    )
+                    download_button = gr.DownloadButton(
+                        label="Download",
+                        value=default_video,
+                        elem_classes=["download-button"],
+                    )
+
+        plot_outputs = []
+        gr.Markdown("### Joint trajectories", elem_classes=["plots-title"])
+        with gr.Column(elem_classes=["plots-wrap"]):
+            for row in PLOT_GRID:
+                with gr.Row():
+                    for metric in row:
+                        plot = gr.HTML(value=default_figs[metric], elem_classes=["plot-html"])
+                        plot_outputs.append(plot)
+
+        outputs = [instruction_box, video, download_button] + plot_outputs
+
+        def load_episode_payload(label: str):
+            idx = parse_episode_label(label)
+            data = load_episode(DEFAULT_DATASET_ID, idx, revision)
+            video_path = str(data["rgb_path"])
+            figs = [build_plot_html(data, metric) for metric in PLOT_ORDER]
+            return [
+                format_instruction_html(data["instruction"]),
+                video_path,
+                gr.DownloadButton.update(value=video_path),
+                *figs,
+            ]
+
+        episode_radio.change(fn=load_episode_payload, inputs=episode_radio, outputs=outputs)
+
+    return demo
+
+
+
+def main():
+    demo = build_interface()
+    demo.queue().launch(show_api=False)
+
+
+if __name__ == "__main__":
+    main()

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,18 @@
+import type { NextConfig } from "next";
+import packageJson from './package.json';
+
+const nextConfig: NextConfig = {
+  env: {
+    REPO_ID: process.env.REPO_ID,
+    EPISODES: process.env.EPISODES,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  generateBuildId: () => packageJson.version,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "lerobot-viewer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "hyparquet": "^1.12.1",
+    "next": "15.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "recharts": "^2.15.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.1",
+    "prettier": "^3.5.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

requirements.txt

@@ -0,0 +1,5 @@
+gradio==5.7.0
+pandas
+pyarrow
+plotly
+huggingface_hub==0.25.2

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

@@ -0,0 +1,260 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { postParentMessageWithParams } from "@/utils/postParentMessage";
+import { SimpleVideosPlayer } from "@/components/simple-videos-player";
+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 Loading from "@/components/loading-component";
+import { getAdjacentEpisodesVideoInfo } from "./fetch-data";
+
+export default function EpisodeViewer({
+  data,
+  error,
+  org,
+  dataset,
+}: {
+  data?: any;
+  error?: string;
+  org?: string;
+  dataset?: string;
+}) {
+  if (error) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-slate-950 text-red-400">
+        <div className="max-w-xl p-8 rounded bg-slate-900 border border-red-500 shadow-lg">
+          <h2 className="text-2xl font-bold mb-4">Something went wrong</h2>
+          <p className="text-lg font-mono whitespace-pre-wrap mb-4">{error}</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <TimeProvider duration={data.duration}>
+      <EpisodeViewerInner data={data} org={org} dataset={dataset} />
+    </TimeProvider>
+  );
+}
+
+function EpisodeViewerInner({ data, org, dataset }: { data: any; org?: string; dataset?: string; }) {
+  const {
+    datasetInfo,
+    episodeId,
+    videosInfo,
+    chartDataGroups,
+    episodes,
+    task,
+  } = data;
+
+  const [videosReady, setVideosReady] = useState(!videosInfo.length);
+  const [chartsReady, setChartsReady] = useState(false);
+  const isLoading = !videosReady || !chartsReady;
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // State
+  // Use context for time sync
+  const { currentTime, setCurrentTime, setIsPlaying, isPlaying } = useTime();
+
+  // Pagination state
+  const pageSize = 100;
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(episodes.length / pageSize);
+  const paginatedEpisodes = episodes.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
+  );
+  
+  // Preload adjacent episodes' videos
+  useEffect(() => {
+    if (!org || !dataset) return;
+    
+    const preloadAdjacent = async () => {
+      try {
+        await getAdjacentEpisodesVideoInfo(org, dataset, episodeId, 2);
+        // Preload adjacent episodes for smoother navigation
+      } catch {
+        // Skip preloading on error
+      }
+    };
+    
+    preloadAdjacent();
+  }, [org, dataset, episodeId]);
+
+  // Initialize based on URL time parameter
+  useEffect(() => {
+    const timeParam = searchParams.get("t");
+    if (timeParam) {
+      const timeValue = parseFloat(timeParam);
+      if (!isNaN(timeValue)) {
+        setCurrentTime(timeValue);
+      }
+    }
+  }, []);
+
+  // sync with parent window hf.co/spaces
+  useEffect(() => {
+    postParentMessageWithParams((params: URLSearchParams) => {
+      params.set("path", window.location.pathname + window.location.search);
+    });
+  }, []);
+
+  // Initialize based on URL time parameter
+  useEffect(() => {
+    // Initialize page based on current episode
+    const episodeIndex = episodes.indexOf(episodeId);
+    if (episodeIndex !== -1) {
+      setCurrentPage(Math.floor(episodeIndex / pageSize) + 1);
+    }
+
+    // Add keyboard event listener
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [episodes, episodeId, pageSize, searchParams]);
+
+  // Only update URL ?t= param when the integer second changes
+  const lastUrlSecondRef = useRef<number>(-1);
+  useEffect(() => {
+    if (isPlaying) return;
+    const currentSec = Math.floor(currentTime);
+    if (currentTime > 0 && lastUrlSecondRef.current !== currentSec) {
+      lastUrlSecondRef.current = currentSec;
+      const newParams = new URLSearchParams(searchParams.toString());
+      newParams.set("t", currentSec.toString());
+      // Replace state instead of pushing to avoid navigation stack bloat
+      window.history.replaceState(
+        {},
+        "",
+        `${window.location.pathname}?${newParams.toString()}`,
+      );
+      postParentMessageWithParams((params: URLSearchParams) => {
+        params.set("path", window.location.pathname + window.location.search);
+      });
+    }
+  }, [isPlaying, currentTime, searchParams]);
+
+  // Handle keyboard shortcuts
+  const handleKeyDown = (e: KeyboardEvent) => {
+    const { key } = e;
+
+    if (key === " ") {
+      e.preventDefault();
+      setIsPlaying((prev: boolean) => !prev);
+    } else if (key === "ArrowDown" || key === "ArrowUp") {
+      e.preventDefault();
+      const nextEpisodeId = key === "ArrowDown" ? episodeId + 1 : episodeId - 1;
+      const lowestEpisodeId = episodes[0];
+      const highestEpisodeId = episodes[episodes.length - 1];
+
+      if (
+        nextEpisodeId >= lowestEpisodeId &&
+        nextEpisodeId <= highestEpisodeId
+      ) {
+        router.push(`./episode_${nextEpisodeId}`);
+      }
+    }
+  };
+
+  // Pagination functions
+  const nextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  };
+
+  const prevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  };
+
+  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"
+          >
+            <img
+              src="https://github.com/huggingface/lerobot/raw/main/media/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>
+
+        {/* Videos */}
+        {videosInfo.length && (
+          <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, index) => (
+                <p key={index} className="mb-1">
+                  {instruction}
+                </p>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Graph */}
+        <div className="mb-4">
+          <DataRecharts
+            data={chartDataGroups}
+            onChartsReady={() => setChartsReady(true)}
+          />
+
+        </div>
+
+        <PlaybackBar />
+      </div>
+    </div>
+  );
+}

src/app/[org]/[dataset]/[episode]/error.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="flex h-screen items-center justify-center bg-slate-950 text-red-400">
+      <div className="max-w-xl p-8 rounded bg-slate-900 border border-red-500 shadow-lg">
+        <h2 className="text-2xl font-bold mb-4">Something went wrong</h2>
+        <p className="text-lg font-mono whitespace-pre-wrap mb-4">
+          {error.message}
+        </p>
+        <button
+          className="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          onClick={() => reset()}
+        >
+          Try Again
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,1088 @@
+import {
+  DatasetMetadata,
+  fetchJson,
+  fetchParquetFile,
+  formatStringWithVars,
+  readParquetColumn,
+  readParquetAsObjects,
+} from "@/utils/parquetUtils";
+import { pick } from "@/utils/pick";
+import { getDatasetVersion, buildVersionedUrl } from "@/utils/versionUtils";
+
+const SERIES_NAME_DELIMITER = " | ";
+
+export async function getEpisodeData(
+  org: string,
+  dataset: string,
+  episodeId: number,
+) {
+  const repoId = `${org}/${dataset}`;
+  try {
+    // Check for compatible dataset version (v3.0, v2.1, or v2.0)
+    const version = await getDatasetVersion(repoId);
+    const jsonUrl = buildVersionedUrl(repoId, version, "meta/info.json");
+    const info = await fetchJson<DatasetMetadata>(jsonUrl);
+
+    if (info.video_path === null) {
+      throw new Error("Only videos datasets are supported in this visualizer.\nPlease use Rerun visualizer for images datasets.");
+    }
+
+    // Handle different versions
+    if (version === "v3.0") {
+      return await getEpisodeDataV3(repoId, version, info, episodeId);
+    } else {
+      return await getEpisodeDataV2(repoId, version, info, episodeId);
+    }
+  } catch (err) {
+    console.error("Error loading episode data:", err);
+    throw err;
+  }
+}
+
+// Get video info for adjacent episodes (for preloading)
+export async function getAdjacentEpisodesVideoInfo(
+  org: string,
+  dataset: string,
+  currentEpisodeId: number,
+  radius: number = 2,
+) {
+  const repoId = `${org}/${dataset}`;
+  try {
+    const version = await getDatasetVersion(repoId);
+    const jsonUrl = buildVersionedUrl(repoId, version, "meta/info.json");
+    const info = await fetchJson<DatasetMetadata>(jsonUrl);
+    
+    const totalEpisodes = info.total_episodes;
+    const adjacentVideos: Array<{episodeId: number; videosInfo: any[]}> = [];
+    
+    // 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: any[] = [];
+          
+          if (version === "v3.0") {
+            const episodeMetadata = await loadEpisodeMetadataV3Simple(repoId, version, episodeId);
+            videosInfo = extractVideoInfoV3WithSegmentation(repoId, version, info, episodeMetadata);
+          } else {
+            // For v2.x, use simpler video info extraction
+            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,
+                  episode_chunk: episode_chunk.toString().padStart(3, "0"),
+                  episode_index: episodeId.toString().padStart(6, "0"),
+                });
+                return {
+                  filename: key,
+                  url: buildVersionedUrl(repoId, version, videoPath),
+                };
+              });
+          }
+          
+          adjacentVideos.push({ episodeId, videosInfo });
+                  } catch {
+            // Skip failed episodes silently
+          }
+      }
+    }
+    
+    return adjacentVideos;
+  } catch {
+    // Return empty array on error
+    return [];
+  }
+}
+
+// Legacy v2.x data loading
+async function getEpisodeDataV2(
+  repoId: string,
+  version: string,
+  info: DatasetMetadata,
+  episodeId: number,
+) {
+  const episode_chunk = Math.floor(0 / 1000);
+
+  // Dataset information
+  const datasetInfo = {
+    repoId,
+    total_frames: info.total_frames,
+    total_episodes: info.total_episodes,
+    fps: info.fps,
+  };
+
+  // Generate list of episodes
+  const episodes =
+    process.env.EPISODES === undefined
+      ? Array.from(
+          { length: datasetInfo.total_episodes },
+          // episode id starts from 0
+          (_, i) => i,
+        )
+      : process.env.EPISODES
+          .split(/\s+/)
+          .map((x) => parseInt(x.trim(), 10))
+          .filter((x) => !isNaN(x));
+
+      // Videos information
+    const videosInfo = Object.entries(info.features)
+      .filter(([, value]) => value.dtype === "video")
+      .map(([key]) => {
+      const videoPath = formatStringWithVars(info.video_path, {
+        video_key: key,
+        episode_chunk: episode_chunk.toString().padStart(3, "0"),
+        episode_index: episodeId.toString().padStart(6, "0"),
+      });
+      return {
+        filename: key,
+        url: buildVersionedUrl(repoId, version, videoPath),
+      };
+    });
+
+  // Column data
+  const columnNames = Object.entries(info.features)
+    .filter(
+      ([, value]) =>
+        ["float32", "int32"].includes(value.dtype) &&
+        value.shape.length === 1,
+    )
+    .map(([key, { shape }]) => ({ key, length: shape[0] }));
+
+  // Exclude specific columns
+  const excludedColumns = [
+    "timestamp",
+    "frame_index",
+    "episode_index",
+    "index",
+    "task_index",
+  ];
+  const filteredColumns = columnNames.filter(
+    (column) => !excludedColumns.includes(column.key),
+  );
+  const filteredColumnNames = [
+    "timestamp",
+    ...filteredColumns.map((column) => column.key),
+  ];
+
+  const columns = filteredColumns.map(({ key }) => {
+    let column_names = info.features[key].names;
+    while (typeof column_names === "object") {
+      if (Array.isArray(column_names)) break;
+      column_names = Object.values(column_names ?? {})[0];
+    }
+    return {
+      key,
+      value: Array.isArray(column_names)
+        ? column_names.map((name) => `${key}${SERIES_NAME_DELIMITER}${name}`)
+        : Array.from(
+            { length: columnNames.find((c) => c.key === key)?.length ?? 1 },
+            (_, i) => `${key}${SERIES_NAME_DELIMITER}${i}`,
+          ),
+    };
+  });
+
+  const parquetUrl = buildVersionedUrl(
+    repoId,
+    version,
+    formatStringWithVars(info.data_path, {
+      episode_chunk: episode_chunk.toString().padStart(3, "0"),
+      episode_index: episodeId.toString().padStart(6, "0"),
+    })
+  );
+
+  const arrayBuffer = await fetchParquetFile(parquetUrl);
+  
+  // Extract task - first check for language instructions (preferred), then fallback to task field or tasks.jsonl
+  let task: string | undefined;
+  let allData: any[] = [];
+  
+  // Load data first
+  try {
+    allData = await readParquetAsObjects(arrayBuffer, []);
+  } catch (error) {
+    // Could not read parquet data
+  }
+  
+  // First check for language_instruction fields in the data (preferred)
+  if (allData.length > 0) {
+    const firstRow = allData[0];
+    const languageInstructions: string[] = [];
+    
+    // Check for language_instruction field
+    if (firstRow.language_instruction) {
+      languageInstructions.push(firstRow.language_instruction);
+    }
+    
+    // Check for numbered language_instruction fields
+    let instructionNum = 2;
+    while (firstRow[`language_instruction_${instructionNum}`]) {
+      languageInstructions.push(firstRow[`language_instruction_${instructionNum}`]);
+      instructionNum++;
+    }
+    
+    // Join all instructions with line breaks
+    if (languageInstructions.length > 0) {
+      task = languageInstructions.join('\n');
+    }
+  }
+  
+  // If no language instructions found, try direct task field
+  if (!task && allData.length > 0 && allData[0].task) {
+    task = allData[0].task;
+  }
+  
+  // If still no task found, try loading from tasks.jsonl metadata file (v2.x format)
+  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();
+        // Parse JSONL format (one JSON object per line)
+        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;
+          
+          // Convert BigInt to number for comparison
+          const taskIndexNum = typeof taskIndex === 'bigint' ? Number(taskIndex) : taskIndex;
+          
+          // Find task by task_index
+          const taskData = tasksData.find(t => t.task_index === taskIndexNum);
+          if (taskData) {
+            task = taskData.task;
+          }
+        }
+      }
+    } catch (error) {
+      // No tasks metadata file for this v2.x dataset
+    }
+  }
+  
+  const data = await readParquetColumn(arrayBuffer, filteredColumnNames);
+  // Flatten and map to array of objects for chartData
+  const seriesNames = [
+    "timestamp",
+    ...columns.map(({ value }) => value).flat(),
+  ];
+
+  const chartData = data.map((row) => {
+    const flatRow = row.flat();
+    const obj: Record<string, number> = {};
+    seriesNames.forEach((key, idx) => {
+      obj[key] = flatRow[idx];
+    });
+    return obj;
+  });
+
+  // List of columns that are ignored (e.g., 2D or 3D data)
+  const ignoredColumns = Object.entries(info.features)
+    .filter(
+      ([, value]) =>
+        ["float32", "int32"].includes(value.dtype) && value.shape.length > 1,
+    )
+    .map(([key]) => key);
+
+  // 1. Group all numeric keys by suffix (excluding 'timestamp')
+  const numericKeys = seriesNames.filter((k) => k !== "timestamp");
+  const suffixGroupsMap: Record<string, string[]> = {};
+  for (const key of numericKeys) {
+    const parts = key.split(SERIES_NAME_DELIMITER);
+    const suffix = parts[1] || parts[0]; // fallback to key if no delimiter
+    if (!suffixGroupsMap[suffix]) suffixGroupsMap[suffix] = [];
+    suffixGroupsMap[suffix].push(key);
+  }
+  const suffixGroups = Object.values(suffixGroupsMap);
+
+  // 2. Compute min/max for each suffix group as a whole
+  const groupStats: Record<string, { min: number; max: number }> = {};
+  suffixGroups.forEach((group) => {
+    let min = Infinity,
+      max = -Infinity;
+    for (const row of chartData) {
+      for (const key of group) {
+        const v = row[key];
+        if (typeof v === "number" && !isNaN(v)) {
+          if (v < min) min = v;
+          if (v > max) max = v;
+        }
+      }
+    }
+    // Use the first key in the group as the group id
+    groupStats[group[0]] = { min, max };
+  });
+
+  // 3. Group suffix groups by similar scale (treat each suffix group as a unit)
+  const scaleGroups: Record<string, string[][]> = {};
+  const used = new Set<string>();
+  const SCALE_THRESHOLD = 2;
+  for (const group of suffixGroups) {
+    const groupId = group[0];
+    if (used.has(groupId)) continue;
+    const { min, max } = groupStats[groupId];
+    if (!isFinite(min) || !isFinite(max)) continue;
+    const logMin = Math.log10(Math.abs(min) + 1e-9);
+    const logMax = Math.log10(Math.abs(max) + 1e-9);
+    const unit: string[][] = [group];
+    used.add(groupId);
+    for (const other of suffixGroups) {
+      const otherId = other[0];
+      if (used.has(otherId) || otherId === groupId) continue;
+      const { min: omin, max: omax } = groupStats[otherId];
+      if (!isFinite(omin) || !isFinite(omax) || omin === omax) continue;
+      const ologMin = Math.log10(Math.abs(omin) + 1e-9);
+      const ologMax = Math.log10(Math.abs(omax) + 1e-9);
+      if (
+        Math.abs(logMin - ologMin) <= SCALE_THRESHOLD &&
+        Math.abs(logMax - ologMax) <= SCALE_THRESHOLD
+      ) {
+        unit.push(other);
+        used.add(otherId);
+      }
+    }
+    scaleGroups[groupId] = unit;
+  }
+
+  // 4. Flatten scaleGroups into chartGroups (array of arrays of keys)
+  const chartGroups: string[][] = Object.values(scaleGroups)
+    .sort((a, b) => b.length - a.length)
+    .flatMap((suffixGroupArr) => {
+      // suffixGroupArr is array of suffix groups (each is array of keys)
+      const merged = suffixGroupArr.flat();
+      if (merged.length > 6) {
+        const subgroups: string[][] = [];
+        for (let i = 0; i < merged.length; i += 6) {
+          subgroups.push(merged.slice(i, i + 6));
+        }
+        return subgroups;
+      }
+      return [merged];
+    });
+
+  const duration = chartData[chartData.length - 1].timestamp;
+
+  // Utility: group row keys by suffix
+  function groupRowBySuffix(row: Record<string, number>): Record<string, any> {
+    const result: Record<string, any> = {};
+    const suffixGroups: Record<string, Record<string, number>> = {};
+    for (const [key, value] of Object.entries(row)) {
+      if (key === "timestamp") {
+        result["timestamp"] = value;
+        continue;
+      }
+      const parts = key.split(SERIES_NAME_DELIMITER);
+      if (parts.length === 2) {
+        const [prefix, suffix] = parts;
+        if (!suffixGroups[suffix]) suffixGroups[suffix] = {};
+        suffixGroups[suffix][prefix] = value;
+      } else {
+        result[key] = value;
+      }
+    }
+    for (const [suffix, group] of Object.entries(suffixGroups)) {
+      const keys = Object.keys(group);
+      if (keys.length === 1) {
+        // Use the full original name as the key
+        const fullName = `${keys[0]}${SERIES_NAME_DELIMITER}${suffix}`;
+        result[fullName] = group[keys[0]];
+      } else {
+        result[suffix] = group;
+      }
+    }
+    return result;
+  }
+
+  const chartDataGroups = chartGroups.map((group) =>
+    chartData.map((row) => groupRowBySuffix(pick(row, [...group, "timestamp"])))
+  );
+
+  return {
+    datasetInfo,
+    episodeId,
+    videosInfo,
+    chartDataGroups,
+    episodes,
+    ignoredColumns,
+    duration,
+    task,
+  };
+}
+
+// v3.0 implementation with segmentation support for all episodes
+async function getEpisodeDataV3(
+  repoId: string,
+  version: string,
+  info: DatasetMetadata,
+  episodeId: number,
+) {
+  // Create dataset info structure (like v2.x)
+  const datasetInfo = {
+    repoId,
+    total_frames: info.total_frames,
+    total_episodes: info.total_episodes,
+    fps: info.fps,
+  };
+
+  // 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
+  const episodeMetadata = await loadEpisodeMetadataV3Simple(repoId, version, episodeId);
+  
+  // Create video info with segmentation using the metadata
+  const videosInfo = extractVideoInfoV3WithSegmentation(repoId, version, info, episodeMetadata);
+
+  // Load episode data for charts
+  const { chartDataGroups, 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,
+    episodes,
+    ignoredColumns,
+    duration,
+    task,
+  };
+}
+
+// Load episode data for v3.0 charts
+async function loadEpisodeDataV3(
+  repoId: string,
+  version: string,
+  info: DatasetMetadata,
+  episodeMetadata: any,
+): Promise<{ chartDataGroups: any[]; 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;
+  const dataPath = `data/chunk-${dataChunkIndex.toString().padStart(3, "0")}/file-${dataFileIndex.toString().padStart(3, "0")}.parquet`;
+  
+  try {
+    const dataUrl = buildVersionedUrl(repoId, version, dataPath);
+    const arrayBuffer = await fetchParquetFile(dataUrl);
+    const fullData = await readParquetAsObjects(arrayBuffer, []);
+    
+    // Extract the episode-specific data slice
+    // Convert BigInt to number if needed
+    const fromIndex = Number(episodeMetadata.dataset_from_index || 0);
+    const toIndex = Number(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: [], ignoredColumns: [], task: undefined };
+    }
+    
+    // Convert to the same format as v2.x for compatibility with existing chart code
+    const { chartDataGroups, ignoredColumns } = processEpisodeDataForCharts(episodeData, info, episodeMetadata);
+    
+    // First check for language_instruction fields in the data (preferred)
+    let task: string | undefined;
+    if (episodeData.length > 0) {
+      const firstRow = episodeData[0];
+      const languageInstructions: string[] = [];
+      
+      // Check for language_instruction field
+      if (firstRow.language_instruction) {
+        languageInstructions.push(firstRow.language_instruction);
+      }
+      
+      // Check for numbered language_instruction fields
+      let instructionNum = 2;
+      while (firstRow[`language_instruction_${instructionNum}`]) {
+        languageInstructions.push(firstRow[`language_instruction_${instructionNum}`]);
+        instructionNum++;
+      }
+      
+      // If no instructions found in first row, check a few more rows
+      if (languageInstructions.length === 0 && episodeData.length > 1) {
+        const middleIndex = Math.floor(episodeData.length / 2);
+        const lastIndex = episodeData.length - 1;
+        
+        [middleIndex, lastIndex].forEach((idx) => {
+          const row = episodeData[idx];
+          
+          if (row.language_instruction && languageInstructions.length === 0) {
+            // Use this row's instructions
+            if (row.language_instruction) {
+              languageInstructions.push(row.language_instruction);
+            }
+            let num = 2;
+            while (row[`language_instruction_${num}`]) {
+              languageInstructions.push(row[`language_instruction_${num}`]);
+              num++;
+            }
+          }
+        });
+      }
+      
+      // Join all instructions with line breaks
+      if (languageInstructions.length > 0) {
+        task = languageInstructions.join('\n');
+      }
+    }
+    
+    // If no language instructions found, fall back to tasks metadata
+    if (!task) {
+      try {
+        // Load tasks metadata
+        const tasksUrl = buildVersionedUrl(repoId, version, "meta/tasks.parquet");
+        const tasksArrayBuffer = await fetchParquetFile(tasksUrl);
+        const tasksData = await readParquetAsObjects(tasksArrayBuffer, []);
+        
+        if (episodeData.length > 0 && tasksData && tasksData.length > 0) {
+          const taskIndex = episodeData[0].task_index;
+          
+          // Convert BigInt to number for comparison
+          const taskIndexNum = typeof taskIndex === 'bigint' ? Number(taskIndex) : taskIndex;
+          
+          // Look up task by index
+          if (taskIndexNum !== undefined && taskIndexNum < tasksData.length) {
+            const taskData = tasksData[taskIndexNum];
+            // Extract task from __index_level_0__ field
+            task = taskData.__index_level_0__ || taskData.task || taskData['task'] || taskData[0];
+          }
+        }
+      } catch (error) {
+        // Could not load tasks metadata - dataset might not have language tasks
+      }
+    }
+    
+    return { chartDataGroups, ignoredColumns, task };
+  } catch {
+    return { chartDataGroups: [], ignoredColumns: [], task: undefined };
+  }
+}
+
+// Process episode data for charts (v3.0 compatible)
+function processEpisodeDataForCharts(
+  episodeData: any[],
+  info: DatasetMetadata,
+  episodeMetadata?: any,
+): { chartDataGroups: any[]; ignoredColumns: string[] } {
+  
+  // Get numeric column features
+  const columnNames = Object.entries(info.features)
+    .filter(
+      ([, value]) =>
+        ["float32", "int32"].includes(value.dtype) &&
+        value.shape.length === 1,
+    )
+    .map(([key, value]) => ({ key, value }));
+
+  // 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',
+    'action', 
+    'timestamp',
+    'episode_index',
+    'frame_index',
+    'next.reward',
+    'next.done',
+    'index',
+    'task_index'
+  ];
+  
+  // Map indices to features that actually exist
+  let currentIndex = 0;
+  expectedFeatureOrder.forEach(feature => {
+    if (featureKeys.includes(feature)) {
+      v3IndexToFeatureMap[currentIndex.toString()] = feature;
+      currentIndex++;
+    }
+  });
+  
+  // Columns to exclude from charts (note: 'task' is intentionally not excluded as we want to access it)
+  const excludedColumns = ['index', 'task_index', 'episode_index', 'frame_index', 'next.done'];
+
+  // Create columns structure similar to V2.1 for proper hierarchical naming
+  const columns = Object.entries(info.features)
+    .filter(([key, value]) => 
+      ["float32", "int32"].includes(value.dtype) && 
+      value.shape.length === 1 && 
+      !excludedColumns.includes(key)
+    )
+    .map(([key, feature]) => {
+      let column_names = feature.names;
+      while (typeof column_names === "object") {
+        if (Array.isArray(column_names)) break;
+        column_names = Object.values(column_names ?? {})[0];
+      }
+      return {
+        key,
+        value: Array.isArray(column_names)
+          ? column_names.map((name) => `${key}${SERIES_NAME_DELIMITER}${name}`)
+          : Array.from(
+              { length: feature.shape[0] || 1 },
+              (_, i) => `${key}${SERIES_NAME_DELIMITER}${i}`,
+            ),
+      };
+    });
+
+  // First, extract all series from the first data row to understand the structure
+  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) {
+        // Use the proper hierarchical naming from column definition
+        columnDef.value.forEach((seriesName, idx) => {
+          if (idx < value.length) {
+            allKeys.push(seriesName);
+          }
+        });
+      } else if (typeof value === 'number' && !isNaN(value)) {
+        // For scalar numeric values
+        allKeys.push(featureName);
+      } else if (typeof value === 'bigint') {
+        // For BigInt values
+        allKeys.push(featureName);
+      }
+    });
+    
+    seriesNames = ["timestamp", ...allKeys];
+  } else {
+    // Fallback to column-based approach like V2.1
+    seriesNames = [
+      "timestamp",
+      ...columns.map(({ value }) => value).flat(),
+    ];
+  }
+
+  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
+    if (episodeMetadata) {
+      // Use actual video segment duration if available
+      videoDuration = (episodeMetadata.video_to_timestamp || 30) - (episodeMetadata.video_from_timestamp || 0);
+    }
+    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]) => {
+        if (key === 'timestamp') {
+          // 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) => {
+            if (idx < columnDef.value.length) {
+              const seriesName = columnDef.value[idx];
+              obj[seriesName] = typeof val === 'number' ? val : Number(val);
+            }
+          });
+        } else if (typeof value === 'number' && !isNaN(value)) {
+          obj[featureName] = value;
+        } else if (typeof value === 'bigint') {
+          obj[featureName] = Number(value);
+        } else if (typeof value === 'boolean') {
+          // Convert boolean to number for charts
+          obj[featureName] = value ? 1 : 0;
+        }
+      });
+    }
+    
+    return obj;
+  });
+
+  // List of columns that are ignored (now we handle 2D data by flattening)
+  const ignoredColumns = [
+    ...Object.entries(info.features)
+      .filter(
+        ([, value]) =>
+          ["float32", "int32"].includes(value.dtype) && value.shape.length > 2, // Only ignore 3D+ data
+      )
+      .map(([key]) => key),
+    ...excludedColumns // Also include the manually excluded columns
+  ];
+
+  // Group processing logic (using SERIES_NAME_DELIMITER like v2.1)
+  const numericKeys = seriesNames.filter((k) => k !== "timestamp");
+  const suffixGroupsMap: Record<string, string[]> = {};
+  
+  for (const key of numericKeys) {
+    const parts = key.split(SERIES_NAME_DELIMITER);
+    const suffix = parts[1] || parts[0]; // fallback to key if no delimiter
+    if (!suffixGroupsMap[suffix]) suffixGroupsMap[suffix] = [];
+    suffixGroupsMap[suffix].push(key);
+  }
+  const suffixGroups = Object.values(suffixGroupsMap);
+  
+
+  // Compute min/max for each suffix group
+  const groupStats: Record<string, { min: number; max: number }> = {};
+  suffixGroups.forEach((group) => {
+    let min = Infinity, max = -Infinity;
+    for (const row of chartData) {
+      for (const key of group) {
+        const v = row[key];
+        if (typeof v === "number" && !isNaN(v)) {
+          if (v < min) min = v;
+          if (v > max) max = v;
+        }
+      }
+    }
+    groupStats[group[0]] = { min, max };
+  });
+
+  // Group by similar scale
+  const scaleGroups: Record<string, string[][]> = {};
+  const used = new Set<string>();
+  const SCALE_THRESHOLD = 2;
+  for (const group of suffixGroups) {
+    const groupId = group[0];
+    if (used.has(groupId)) continue;
+    const { min, max } = groupStats[groupId];
+    if (!isFinite(min) || !isFinite(max)) continue;
+    const logMin = Math.log10(Math.abs(min) + 1e-9);
+    const logMax = Math.log10(Math.abs(max) + 1e-9);
+    const unit: string[][] = [group];
+    used.add(groupId);
+    for (const other of suffixGroups) {
+      const otherId = other[0];
+      if (used.has(otherId) || otherId === groupId) continue;
+      const { min: omin, max: omax } = groupStats[otherId];
+      if (!isFinite(omin) || !isFinite(omax) || omin === omax) continue;
+      const ologMin = Math.log10(Math.abs(omin) + 1e-9);
+      const ologMax = Math.log10(Math.abs(omax) + 1e-9);
+      if (
+        Math.abs(logMin - ologMin) <= SCALE_THRESHOLD &&
+        Math.abs(logMax - ologMax) <= SCALE_THRESHOLD
+      ) {
+        unit.push(other);
+        used.add(otherId);
+      }
+    }
+    scaleGroups[groupId] = unit;
+  }
+
+  // Flatten into chartGroups
+  const chartGroups: string[][] = Object.values(scaleGroups)
+    .sort((a, b) => b.length - a.length)
+    .flatMap((suffixGroupArr) => {
+      const merged = suffixGroupArr.flat();
+      if (merged.length > 6) {
+        const subgroups = [];
+        for (let i = 0; i < merged.length; i += 6) {
+          subgroups.push(merged.slice(i, i + 6));
+        }
+        return subgroups;
+      }
+      return [merged];
+    });
+
+  // Utility function to group row keys by suffix (same as V2.1)
+  function groupRowBySuffix(row: Record<string, number>): Record<string, any> {
+    const result: Record<string, any> = {};
+    const suffixGroups: Record<string, Record<string, number>> = {};
+    for (const [key, value] of Object.entries(row)) {
+      if (key === "timestamp") {
+        result["timestamp"] = value;
+        continue;
+      }
+      const parts = key.split(SERIES_NAME_DELIMITER);
+      if (parts.length === 2) {
+        const [prefix, suffix] = parts;
+        if (!suffixGroups[suffix]) suffixGroups[suffix] = {};
+        suffixGroups[suffix][prefix] = value;
+      } else {
+        result[key] = value;
+      }
+    }
+    for (const [suffix, group] of Object.entries(suffixGroups)) {
+      const keys = Object.keys(group);
+      if (keys.length === 1) {
+        // Use the full original name as the key
+        const fullName = `${keys[0]}${SERIES_NAME_DELIMITER}${suffix}`;
+        result[fullName] = group[keys[0]];
+      } else {
+        result[suffix] = group;
+      }
+    }
+    return result;
+  }
+
+  const chartDataGroups = chartGroups.map((group) =>
+    chartData.map((row) => groupRowBySuffix(pick(row, [...group, "timestamp"])))
+  );
+
+
+  return { chartDataGroups, ignoredColumns };
+}
+
+
+// Video info extraction with segmentation for v3.0
+function extractVideoInfoV3WithSegmentation(
+  repoId: string,
+  version: string,
+  info: DatasetMetadata,
+  episodeMetadata: any,
+): any[] {
+  // Get video features from dataset info
+  const videoFeatures = Object.entries(info.features)
+    .filter(([, value]) => value.dtype === "video");
+
+  const videosInfo = videoFeatures.map(([videoKey]) => {
+    // Check if we have per-camera metadata in the episode row
+    const cameraSpecificKeys = Object.keys(episodeMetadata).filter(key => 
+      key.startsWith(`videos/${videoKey}/`)
+    );
+    
+    let chunkIndex, fileIndex, segmentStart, segmentEnd;
+    
+    if (cameraSpecificKeys.length > 0) {
+      // Use camera-specific metadata
+      const chunkValue = episodeMetadata[`videos/${videoKey}/chunk_index`];
+      const fileValue = episodeMetadata[`videos/${videoKey}/file_index`];
+      chunkIndex = typeof chunkValue === 'bigint' ? Number(chunkValue) : (chunkValue || 0);
+      fileIndex = typeof fileValue === 'bigint' ? Number(fileValue) : (fileValue || 0);
+      segmentStart = episodeMetadata[`videos/${videoKey}/from_timestamp`] || 0;
+      segmentEnd = episodeMetadata[`videos/${videoKey}/to_timestamp`] || 30;
+    } else {
+      // Fallback to generic video metadata
+      chunkIndex = episodeMetadata.video_chunk_index || 0;
+      fileIndex = episodeMetadata.video_file_index || 0;
+      segmentStart = episodeMetadata.video_from_timestamp || 0;
+      segmentEnd = episodeMetadata.video_to_timestamp || 30;
+    }
+    
+    const videoPath = `videos/${videoKey}/chunk-${chunkIndex.toString().padStart(3, "0")}/file-${fileIndex.toString().padStart(3, "0")}.mp4`;
+    const fullUrl = buildVersionedUrl(repoId, version, videoPath);
+    
+    return {
+      filename: videoKey,
+      url: fullUrl,
+      // Enable segmentation with timestamps from metadata
+      isSegmented: true,
+      segmentStart: segmentStart,
+      segmentEnd: segmentEnd,
+      segmentDuration: segmentEnd - segmentStart,
+    };
+  });
+
+  return videosInfo;
+}
+
+// Metadata loading for v3.0 episodes
+async function loadEpisodeMetadataV3Simple(
+  repoId: string,
+  version: string,
+  episodeId: number,
+): Promise<any> {
+  // 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 = `meta/episodes/chunk-${chunkIndex.toString().padStart(3, "0")}/file-${fileIndex.toString().padStart(3, "0")}.parquet`;
+    const episodesMetadataUrl = buildVersionedUrl(repoId, version, episodesMetadataPath);
+
+    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++;
+      }
+    } catch (error) {
+      // File doesn't exist - episode not found
+      throw new Error(`Episode ${episodeId} not found in metadata (searched up to file-${fileIndex.toString().padStart(3, "0")}.parquet)`);
+    }
+  }
+  
+  // Convert the row to a usable format
+  return parseEpisodeRowSimple(episodeRow);
+}
+
+// Simple parser for episode row - focuses on key fields for episodes
+function parseEpisodeRowSimple(row: any): any {
+  // v3.0 uses named keys in the episode metadata
+  if (row && typeof row === 'object') {
+    // Check if this is v3.0 format with named keys
+    if ('episode_index' in row) {
+      // v3.0 format - use named keys
+      // Convert BigInt values to numbers
+      const toBigIntSafe = (value: any) => {
+        if (typeof value === 'bigint') return Number(value);
+        if (typeof value === 'number') return value;
+        return parseInt(value) || 0;
+      };
+      
+      const episodeData: any = {
+        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']),
+      };
+      
+      // Handle video metadata - look for video-specific keys
+      const videoKeys = Object.keys(row).filter(key => key.includes('videos/') && key.includes('/chunk_index'));
+      if (videoKeys.length > 0) {
+        // Use the first video stream for basic info
+        const firstVideoKey = videoKeys[0];
+        const videoBaseName = firstVideoKey.replace('/chunk_index', '');
+        
+        episodeData.video_chunk_index = toBigIntSafe(row[`${videoBaseName}/chunk_index`]);
+        episodeData.video_file_index = toBigIntSafe(row[`${videoBaseName}/file_index`]);
+        episodeData.video_from_timestamp = row[`${videoBaseName}/from_timestamp`] || 0;
+        episodeData.video_to_timestamp = row[`${videoBaseName}/to_timestamp`] || 0;
+      } else {
+        // Fallback video values
+        episodeData.video_chunk_index = 0;
+        episodeData.video_file_index = 0;
+        episodeData.video_from_timestamp = 0;
+        episodeData.video_to_timestamp = 30;
+      }
+      
+      // Store the raw row data to preserve per-camera metadata
+      // This allows extractVideoInfoV3WithSegmentation to access camera-specific timestamps
+      Object.keys(row).forEach(key => {
+        if (key.startsWith('videos/')) {
+          episodeData[key] = row[key];
+        }
+      });
+      
+      return episodeData;
+    } else {
+      // Fallback to numeric keys for compatibility
+      const episodeData = {
+        episode_index: row['0'] || 0,
+        data_chunk_index: row['1'] || 0,
+        data_file_index: row['2'] || 0,
+        dataset_from_index: row['3'] || 0,
+        dataset_to_index: row['4'] || 0,
+        video_chunk_index: row['5'] || 0,
+        video_file_index: row['6'] || 0,
+        video_from_timestamp: row['7'] || 0,
+        video_to_timestamp: row['8'] || 30,
+        length: row['9'] || 30,
+      };
+      
+      return episodeData;
+    }
+  }
+  
+  // Fallback if parsing fails
+  const fallback = {
+    episode_index: 0,
+    data_chunk_index: 0,
+    data_file_index: 0,
+    dataset_from_index: 0,
+    dataset_to_index: 0,
+    video_chunk_index: 0,
+    video_file_index: 0,
+    video_from_timestamp: 0,
+    video_to_timestamp: 30,
+    length: 30,
+  };
+  
+  return fallback;
+}
+
+
+
+
+// Safe wrapper for UI error display
+export async function getEpisodeDataSafe(
+  org: string,
+  dataset: string,
+  episodeId: number,
+): Promise<{ data?: any; error?: string }> {
+  try {
+    const data = await getEpisodeData(org, dataset, episodeId);
+    return { data };
+  } catch (err: any) {
+    // Only expose the error message, not stack or sensitive info
+    return { error: err?.message || String(err) || "Unknown error" };
+  }
+}

src/app/[org]/[dataset]/[episode]/page.tsx

@@ -0,0 +1,33 @@
+import EpisodeViewer from "./episode-viewer";
+import { getEpisodeDataSafe } from "./fetch-data";
+import { Suspense } from "react";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ org: string; dataset: string; episode: string }>;
+}) {
+  const { org, dataset, episode } = await params;
+  return {
+    title: `${org}/${dataset} | episode ${episode}`,
+  };
+}
+
+export default async function EpisodePage({
+  params,
+}: {
+  params: Promise<{ org: string; dataset: string; episode: string }>;
+}) {
+  // episode is like 'episode_1'
+  const { org, dataset, episode } = await params;
+  // fetchData should be updated if needed to support this path pattern
+  const episodeNumber = Number(episode.replace(/^episode_/, ""));
+  const { data, error } = await getEpisodeDataSafe(org, dataset, episodeNumber);
+  return (
+    <Suspense fallback={null}>
+      <EpisodeViewer data={data} error={error} />
+    </Suspense>
+  );
+}

src/app/[org]/[dataset]/page.tsx

@@ -0,0 +1,15 @@
+import { redirect } from "next/navigation";
+
+export default async function DatasetRootPage({
+  params,
+}: {
+  params: Promise<{ org: string; dataset: string }>;
+}) {
+  const { org, dataset } = await params;
+  const episodeN = process.env.EPISODES
+    ?.split(/\s+/)
+    .map((x) => parseInt(x.trim(), 10))
+    .filter((x) => !isNaN(x))[0] ?? 0;
+
+  redirect(`/${org}/${dataset}/episode_${episodeN}`);
+}

src/app/explore/explore-grid.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import Link from "next/link";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { postParentMessageWithParams } from "@/utils/postParentMessage";
+
+type ExploreGridProps = {
+  datasets: Array<{ id: string; videoUrl: string | null }>;
+  currentPage: number;
+  totalPages: number;
+};
+
+export default function ExploreGrid({
+  datasets,
+  currentPage,
+  totalPages,
+}: ExploreGridProps) {
+  // sync with parent window hf.co/spaces
+  useEffect(() => {
+    postParentMessageWithParams((params: URLSearchParams) => {
+      params.set("path", window.location.pathname + window.location.search);
+    });
+  }, []);
+
+  // Create an array of refs for each video
+  const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
+
+  return (
+    <main className="p-8">
+      <h1 className="text-2xl font-bold mb-6">Explore LeRobot Datasets</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        {datasets.map((ds, idx) => (
+          <Link
+            key={ds.id}
+            href={`/${ds.id}`}
+            className="relative border rounded-lg p-4 bg-white shadow hover:shadow-lg transition overflow-hidden h-48 flex items-end group"
+            onMouseEnter={() => {
+              const vid = videoRefs.current[idx];
+              if (vid) vid.play();
+            }}
+            onMouseLeave={() => {
+              const vid = videoRefs.current[idx];
+              if (vid) {
+                vid.pause();
+                vid.currentTime = 0;
+              }
+            }}
+          >
+            <video
+              ref={(el) => {
+                videoRefs.current[idx] = el;
+              }}
+              src={ds.videoUrl || undefined}
+              className="absolute top-0 left-0 w-full h-full object-cover object-center z-0"
+              loop
+              muted
+              playsInline
+              preload="metadata"
+              onTimeUpdate={(e) => {
+                const vid = e.currentTarget;
+                if (vid.currentTime >= 15) {
+                  vid.pause();
+                  vid.currentTime = 0;
+                }
+              }}
+            />
+            <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-10 pointer-events-none" />
+            <div className="relative z-20 font-mono text-blue-100 break-all text-sm bg-black/60 backdrop-blur px-2 py-1 rounded shadow">
+              {ds.id}
+            </div>
+          </Link>
+        ))}
+      </div>
+      <div className="flex justify-center mt-8 gap-4">
+        {currentPage > 1 && (
+          <button
+            className="px-6 py-2 bg-gray-600 text-white rounded shadow hover:bg-gray-700 transition"
+            onClick={() => {
+              const params = new URLSearchParams(window.location.search);
+              params.set("p", (currentPage - 1).toString());
+              window.location.search = params.toString();
+            }}
+          >
+            Previous
+          </button>
+        )}
+        {currentPage < totalPages && (
+          <button
+            className="px-6 py-2 bg-blue-600 text-white rounded shadow hover:bg-blue-700 transition"
+            onClick={() => {
+              const params = new URLSearchParams(window.location.search);
+              params.set("p", (currentPage + 1).toString());
+              window.location.search = params.toString();
+            }}
+          >
+            Next
+          </button>
+        )}
+      </div>
+    </main>
+  );
+}

src/app/explore/page.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import ExploreGrid from "./explore-grid";
+import {
+  DatasetMetadata,
+  fetchJson,
+  formatStringWithVars,
+} from "@/utils/parquetUtils";
+import { getDatasetVersion, buildVersionedUrl } from "@/utils/versionUtils";
+
+export default async function ExplorePage({
+  searchParams,
+}: {
+  searchParams: { p?: string };
+}) {
+  let datasets: any[] = [];
+  let currentPage = 1;
+  let totalPages = 1;
+  try {
+    const res = await fetch(
+      "https://huggingface.co/api/datasets?sort=lastModified&filter=LeRobot",
+      {
+        cache: "no-store",
+      },
+    );
+    if (!res.ok) throw new Error("Failed to fetch datasets");
+    const data = await res.json();
+    const allDatasets = data.datasets || data;
+    // Use searchParams from props
+    const page = parseInt(searchParams?.p || "1", 10);
+    const perPage = 30;
+
+    currentPage = page;
+    totalPages = Math.ceil(allDatasets.length / perPage);
+
+    const startIdx = (currentPage - 1) * perPage;
+    const endIdx = startIdx + perPage;
+    datasets = allDatasets.slice(startIdx, endIdx);
+  } catch {
+    return <div className="p-8 text-red-600">Failed to load datasets.</div>;
+  }
+
+  // Fetch episode 0 data for each dataset
+  const datasetWithVideos = (
+    await Promise.all(
+      datasets.map(async (ds: any) => {
+        try {
+          const [org, dataset] = ds.id.split("/");
+          const repoId = `${org}/${dataset}`;
+          
+          // Try to get compatible version, but don't fail the entire page if incompatible
+          let version: string;
+          try {
+            version = await getDatasetVersion(repoId);
+          } catch (err) {
+            // Dataset is not compatible, skip it silently
+            console.warn(`Skipping incompatible dataset ${repoId}: ${err instanceof Error ? err.message : err}`);
+            return null;
+          }
+          
+          const jsonUrl = buildVersionedUrl(repoId, version, "meta/info.json");
+          const info = await fetchJson<DatasetMetadata>(jsonUrl);
+          const videoEntry = Object.entries(info.features).find(
+            ([, value]) => value.dtype === "video",
+          );
+          let videoUrl: string | null = null;
+          if (videoEntry) {
+            const [key] = videoEntry;
+            const videoPath = formatStringWithVars(info.video_path, {
+              video_key: key,
+              episode_chunk: "0".padStart(3, "0"),
+              episode_index: "0".padStart(6, "0"),
+            });
+            const url = buildVersionedUrl(repoId, version, videoPath);
+            // Check if videoUrl exists (status 200)
+            try {
+              const headRes = await fetch(url, { method: "HEAD" });
+              if (headRes.ok) {
+                videoUrl = url;
+              }
+            } catch {
+              // If fetch fails, videoUrl remains null
+            }
+          }
+          return videoUrl ? { id: repoId, videoUrl } : null;
+        } catch (err) {
+          console.error(
+            `Failed to fetch or parse dataset info for ${ds.id}:`,
+            err,
+          );
+          return null;
+        }
+      }),
+    )
+  ).filter(Boolean) as { id: string; videoUrl: string | null }[];
+
+  return (
+    <ExploreGrid
+      datasets={datasetWithVideos}
+      currentPage={currentPage}
+      totalPages={totalPages}
+    />
+  );
+}

src/app/globals.css

@@ -0,0 +1,46 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.video-background {
+  @apply fixed top-0 right-0 bottom-0 left-0 -z-10 overflow-hidden w-screen h-screen;
+}
+.video-background iframe {
+  @apply absolute top-1/2 left-1/2 border-0 pointer-events-none bg-black;
+  width: 100vw;
+  height: 100vh;
+  transform: translate(-50%, -50%);
+}
+@media (min-aspect-ratio: 16/9) {
+  .video-background iframe {
+    height: 56.25vw;
+  }
+}
+@media (max-aspect-ratio: 16/9) {
+  .video-background iframe {
+    width: 177.78vh;
+  }
+}

src/app/home-client.tsx

@@ -0,0 +1,179 @@
+"use client";
+import { useEffect, useRef, Suspense } from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+
+export default function HomeClient() {
+  return (
+    <Suspense fallback={null}>
+      <HomeInner />
+    </Suspense>
+  );
+}
+
+function HomeInner() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  useEffect(() => {
+    // sync with hf.co/spaces URL params
+    if (searchParams.get("path")) {
+      router.push(searchParams.get("path")!);
+      return;
+    }
+
+    // legacy sync with hf.co/spaces URL params
+    let redirectUrl: string | null = null;
+    if (searchParams.get("dataset") && searchParams.get("episode")) {
+      redirectUrl = `/${searchParams.get("dataset")}/episode_${searchParams.get(
+        "episode",
+      )}`;
+    } else if (searchParams.get("dataset")) {
+      redirectUrl = `/${searchParams.get("dataset")}`;
+    }
+
+    if (redirectUrl && searchParams.get("t")) {
+      redirectUrl += `?t=${searchParams.get("t")}`;
+    }
+
+    if (redirectUrl) {
+      router.push(redirectUrl);
+    }
+  }, [searchParams, router]);
+
+  const playerRef = useRef<any>(null);
+
+  useEffect(() => {
+    // Load YouTube IFrame API if not already present
+    if (!(window as any).YT) {
+      const tag = document.createElement("script");
+      tag.src = "https://www.youtube.com/iframe_api";
+      document.body.appendChild(tag);
+    }
+    let interval: NodeJS.Timeout;
+    (window as any).onYouTubeIframeAPIReady = () => {
+      playerRef.current = new (window as any).YT.Player("yt-bg-player", {
+        videoId: "Er8SPJsIYr0",
+        playerVars: {
+          autoplay: 1,
+          mute: 1,
+          controls: 0,
+          showinfo: 0,
+          modestbranding: 1,
+          rel: 0,
+          loop: 1,
+          fs: 0,
+          playlist: "Er8SPJsIYr0",
+          start: 0,
+        },
+        events: {
+          onReady: (event: any) => {
+            event.target.playVideo();
+            event.target.mute();
+            interval = setInterval(() => {
+              const t = event.target.getCurrentTime();
+              if (t >= 60) {
+                event.target.seekTo(0);
+              }
+            }, 500);
+          },
+        },
+      });
+    };
+    return () => {
+      if (interval) clearInterval(interval);
+      if (playerRef.current && playerRef.current.destroy)
+        playerRef.current.destroy();
+    };
+  }, []);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleGo = (e: React.FormEvent) => {
+    e.preventDefault();
+    const value = inputRef.current?.value.trim();
+    if (value) {
+      router.push(value);
+    }
+  };
+
+  return (
+    <div className="relative h-screen w-screen overflow-hidden">
+      {/* YouTube Video Background */}
+      <div className="video-background">
+        <div id="yt-bg-player" />
+      </div>
+      {/* Overlay */}
+      <div className="fixed top-0 right-0 bottom-0 left-0 bg-black/60 -z-0" />
+      {/* Centered Content */}
+      <div className="relative z-10 h-screen flex flex-col items-center justify-center text-white text-center">
+        <h1 className="text-4xl md:text-5xl font-bold mb-6 drop-shadow-lg">
+          LeRobot Dataset Visualizer
+        </h1>
+        <a
+          href="https://x.com/RemiCadene/status/1825455895561859185"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sky-400 font-medium text-lg underline mb-8 inline-block hover:text-sky-300 transition-colors"
+        >
+          create & train your own robots
+        </a>
+        <form onSubmit={handleGo} className="flex gap-2 justify-center mt-6">
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Enter dataset id (e.g. lerobot/visualize_dataset)"
+            className="px-4 py-2 rounded-md text-base text-white border-white border-1 focus:outline-none min-w-[220px] shadow-md"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                // Prevent double submission if form onSubmit also fires
+                e.preventDefault();
+                handleGo(e as any);
+              }
+            }}
+          />
+          <button
+            type="submit"
+            className="px-5 py-2 rounded-md bg-sky-400 text-black font-semibold text-base hover:bg-sky-300 transition-colors shadow-md"
+          >
+            Go
+          </button>
+        </form>
+        {/* Example Datasets */}
+        <div className="mt-8">
+          <div className="font-semibold mb-2 text-lg">Example Datasets:</div>
+          <div className="flex flex-col gap-2 items-center">
+            {[
+              "lerobot/aloha_static_cups_open",
+              "lerobot/columbia_cairlab_pusht_real",
+              "lerobot/taco_play",
+            ].map((ds) => (
+              <button
+                key={ds}
+                type="button"
+                className="px-4 py-2 rounded bg-slate-700 text-sky-200 hover:bg-sky-700 hover:text-white transition-colors shadow"
+                onClick={() => {
+                  if (inputRef.current) {
+                    inputRef.current.value = ds;
+                    inputRef.current.focus();
+                  }
+                  router.push(ds);
+                }}
+              >
+                {ds}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <Link
+          href="/explore"
+          className="inline-block px-6 py-3 mt-8 rounded-md bg-sky-500 text-white font-semibold text-lg shadow-lg hover:bg-sky-400 transition-colors"
+        >
+          Explore Open Datasets
+        </Link>
+      </div>
+    </div>
+  );
+}
+

src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "LeRobot Dataset Visualizer",
+  description: "Visualization of LeRobot Datasets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,177 @@
+"use client";
+import { useEffect, useRef, Suspense } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+
+export default function Home() {
+  return (
+    <Suspense fallback={null}>
+      <HomeInner />
+    </Suspense>
+  );
+}
+
+function HomeInner() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  // Handle redirects with useEffect instead of direct redirect
+  useEffect(() => {
+    // Redirect to our dataset directly
+    const REPO_ID = "raffaelkultyshev/mini_tug_tape_to_bowl";
+    router.push(`/${REPO_ID}/episode_0`);
+
+    // legacy sync with hf.co/spaces URL params
+    let redirectUrl: string | null = null;
+    if (searchParams.get('dataset') && searchParams.get('episode')) {
+      redirectUrl = `/${searchParams.get('dataset')}/episode_${searchParams.get('episode')}`;
+    } else if (searchParams.get('dataset')) {
+      redirectUrl = `/${searchParams.get('dataset')}`;
+    }
+
+    if (redirectUrl && searchParams.get('t')) {
+      redirectUrl += `?t=${searchParams.get('t')}`;
+    }
+
+    if (redirectUrl) {
+      router.push(redirectUrl);
+      return;
+    }
+  }, [searchParams, router]);
+
+  const playerRef = useRef<any>(null);
+
+  useEffect(() => {
+    // Load YouTube IFrame API if not already present
+    if (!(window as any).YT) {
+      const tag = document.createElement("script");
+      tag.src = "https://www.youtube.com/iframe_api";
+      document.body.appendChild(tag);
+    }
+    let interval: NodeJS.Timeout;
+    (window as any).onYouTubeIframeAPIReady = () => {
+      playerRef.current = new (window as any).YT.Player("yt-bg-player", {
+        videoId: "Er8SPJsIYr0",
+        playerVars: {
+          autoplay: 1,
+          mute: 1,
+          controls: 0,
+          showinfo: 0,
+          modestbranding: 1,
+          rel: 0,
+          loop: 1,
+          fs: 0,
+          playlist: "Er8SPJsIYr0",
+          start: 0,
+        },
+        events: {
+          onReady: (event: any) => {
+            event.target.playVideo();
+            event.target.mute();
+            interval = setInterval(() => {
+              const t = event.target.getCurrentTime();
+              if (t >= 60) {
+                event.target.seekTo(0);
+              }
+            }, 500);
+          },
+        },
+      });
+    };
+    return () => {
+      if (interval) clearInterval(interval);
+      if (playerRef.current && playerRef.current.destroy)
+        playerRef.current.destroy();
+    };
+  }, []);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleGo = (e: React.FormEvent) => {
+    e.preventDefault();
+    const value = inputRef.current?.value.trim();
+    if (value) {
+      router.push(value);
+    }
+  };
+
+  return (
+    <div className="relative h-screen w-screen overflow-hidden">
+      {/* YouTube Video Background */}
+      <div className="video-background">
+        <div id="yt-bg-player" />
+      </div>
+      {/* Overlay */}
+      <div className="fixed top-0 right-0 bottom-0 left-0 bg-black/60 -z-0" />
+      {/* Centered Content */}
+      <div className="relative z-10 h-screen flex flex-col items-center justify-center text-white text-center">
+        <h1 className="text-4xl md:text-5xl font-bold mb-6 drop-shadow-lg">
+          LeRobot Dataset Visualizer
+        </h1>
+        <a
+          href="https://x.com/RemiCadene/status/1825455895561859185"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sky-400 font-medium text-lg underline mb-8 inline-block hover:text-sky-300 transition-colors"
+        >
+          create & train your own robots
+        </a>
+        <form onSubmit={handleGo} className="flex gap-2 justify-center mt-6">
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Enter dataset id (e.g. lerobot/visualize_dataset)"
+            className="px-4 py-2 rounded-md text-base text-white border-white border-1 focus:outline-none min-w-[220px] shadow-md"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                // Prevent double submission if form onSubmit also fires
+                e.preventDefault();
+                handleGo(e as any);
+              }
+            }}
+          />
+          <button
+            type="submit"
+            className="px-5 py-2 rounded-md bg-sky-400 text-black font-semibold text-base hover:bg-sky-300 transition-colors shadow-md"
+          >
+            Go
+          </button>
+        </form>
+        {/* Example Datasets */}
+        <div className="mt-8">
+          <div className="font-semibold mb-2 text-lg">Example Datasets:</div>
+          <div className="flex flex-col gap-2 items-center">
+            {[
+              "lerobot/aloha_static_cups_open",
+              "lerobot/columbia_cairlab_pusht_real",
+              "lerobot/taco_play",
+            ].map((ds) => (
+              <button
+                key={ds}
+                type="button"
+                className="px-4 py-2 rounded bg-slate-700 text-sky-200 hover:bg-sky-700 hover:text-white transition-colors shadow"
+                onClick={() => {
+                  if (inputRef.current) {
+                    inputRef.current.value = ds;
+                    inputRef.current.focus();
+                  }
+                  router.push(ds);
+                }}
+              >
+                {ds}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <Link
+          href="/explore"
+          className="inline-block px-6 py-3 mt-8 rounded-md bg-sky-500 text-white font-semibold text-lg shadow-lg hover:bg-sky-400 transition-colors"
+        >
+          Explore Open Datasets
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/data-recharts.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTime } from "../context/time-context";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
+
+type DataGraphProps = {
+  data: Array<Array<Record<string, number>>>;
+  onChartsReady?: () => void;
+};
+
+import React, { useMemo } from "react";
+
+// Use the same delimiter as the data processing
+const SERIES_NAME_DELIMITER = " | ";
+
+export const DataRecharts = React.memo(
+  ({ data, onChartsReady }: DataGraphProps) => {
+    // Shared hoveredTime for all graphs
+    const [hoveredTime, setHoveredTime] = useState<number | null>(null);
+
+    if (!Array.isArray(data) || data.length === 0) return null;
+
+    useEffect(() => {
+      if (typeof onChartsReady === "function") {
+        onChartsReady();
+      }
+    }, [onChartsReady]);
+
+    return (
+      <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}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+
+const SingleDataGraph = React.memo(
+  ({
+    data,
+    hoveredTime,
+    setHoveredTime,
+  }: {
+    data: Array<Record<string, number>>;
+    hoveredTime: number | null;
+    setHoveredTime: (t: number | null) => void;
+  }) => {
+    const { currentTime, setCurrentTime } = useTime();
+    function flattenRow(row: Record<string, any>, 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
+        if (typeof value === "number") {
+          if (prefix) {
+            result[`${prefix}${SERIES_NAME_DELIMITER}${key}`] = value;
+          } else {
+            result[key] = value;
+          }
+        } else if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          // If it's an object, recurse
+          Object.assign(result, flattenRow(value, prefix ? `${prefix}${SERIES_NAME_DELIMITER}${key}` : key));
+        }
+      }
+      // Always keep timestamp at top level if present
+      if ("timestamp" in row) {
+        result["timestamp"] = row["timestamp"];
+      }
+      return result;
+    }
+
+    // Flatten all rows for recharts
+    const chartData = useMemo(() => data.map(row => flattenRow(row)), [data]);
+    const [dataKeys, setDataKeys] = useState<string[]>([]);
+    const [visibleKeys, setVisibleKeys] = useState<string[]>([]);
+
+    useEffect(() => {
+      if (!chartData || chartData.length === 0) return;
+      // Get all keys except timestamp from the first row
+      const keys = Object.keys(chartData[0]).filter((k) => k !== "timestamp");
+      setDataKeys(keys);
+      setVisibleKeys(keys);
+    }, [chartData]);
+
+    // Parse dataKeys into groups (dot notation)
+    const groups: Record<string, string[]> = {};
+    const singles: string[] = [];
+    dataKeys.forEach((key) => {
+      const parts = key.split(SERIES_NAME_DELIMITER);
+      if (parts.length > 1) {
+        const group = parts[0];
+        if (!groups[group]) groups[group] = [];
+        groups[group].push(key);
+      } else {
+        singles.push(key);
+      }
+    });
+
+    // Assign a color per group (and for singles)
+    const allGroups = [...Object.keys(groups), ...singles];
+    const groupColorMap: Record<string, string> = {};
+    allGroups.forEach((group, idx) => {
+      groupColorMap[group] = `hsl(${idx * (360 / allGroups.length)}, 100%, 50%)`;
+    });
+
+    // Find the closest data point to the current time for highlighting
+    const findClosestDataIndex = (time: number) => {
+      if (!chartData.length) return 0;
+      // Find the index of the first data point whose timestamp is >= time (ceiling)
+      const idx = chartData.findIndex((point) => point.timestamp >= time);
+      if (idx !== -1) return idx;
+      // If all timestamps are less than time, return the last index
+      return chartData.length - 1;
+    };
+
+    const handleMouseLeave = () => {
+      setHoveredTime(null);
+    };
+
+    const handleClick = (data: any) => {
+      if (data && data.activePayload && data.activePayload.length) {
+        const timeValue = data.activePayload[0].payload.timestamp;
+        setCurrentTime(timeValue);
+      }
+    };
+
+    // Custom legend to show current value next to each series
+    const CustomLegend = () => {
+      const closestIndex = findClosestDataIndex(
+        hoveredTime != null ? hoveredTime : currentTime,
+      );
+      const currentData = chartData[closestIndex] || {};
+
+      // Parse dataKeys into groups (dot notation)
+      const groups: Record<string, string[]> = {};
+      const singles: string[] = [];
+      dataKeys.forEach((key) => {
+        const parts = key.split(SERIES_NAME_DELIMITER);
+        if (parts.length > 1) {
+          const group = parts[0];
+          if (!groups[group]) groups[group] = [];
+          groups[group].push(key);
+        } else {
+          singles.push(key);
+        }
+      });
+
+      // Assign a color per group (and for singles)
+      const allGroups = [...Object.keys(groups), ...singles];
+      const groupColorMap: Record<string, string> = {};
+      allGroups.forEach((group, idx) => {
+        groupColorMap[group] = `hsl(${idx * (360 / allGroups.length)}, 100%, 50%)`;
+      });
+
+      const isGroupChecked = (group: string) => groups[group].every(k => visibleKeys.includes(k));
+      const isGroupIndeterminate = (group: string) => groups[group].some(k => visibleKeys.includes(k)) && !isGroupChecked(group);
+
+      const handleGroupCheckboxChange = (group: string) => {
+        if (isGroupChecked(group)) {
+          // Uncheck all children
+          setVisibleKeys((prev) => prev.filter(k => !groups[group].includes(k)));
+        } else {
+          // Check all children
+          setVisibleKeys((prev) => Array.from(new Set([...prev, ...groups[group]])));
+        }
+      };
+
+      const handleCheckboxChange = (key: string) => {
+        setVisibleKeys((prev) =>
+          prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
+        );
+      };
+
+      return (
+        <div className="grid grid-cols-[repeat(auto-fit,250px)] gap-4 mx-8">
+          {/* Grouped keys */}
+          {Object.entries(groups).map(([group, children]) => {
+            const color = groupColorMap[group];
+            return (
+              <div key={group} className="mb-2">
+                <label className="flex gap-2 cursor-pointer select-none font-semibold">
+                  <input
+                    type="checkbox"
+                    checked={isGroupChecked(group)}
+                    ref={el => { if (el) el.indeterminate = isGroupIndeterminate(group); }}
+                    onChange={() => handleGroupCheckboxChange(group)}
+                    className="size-3.5 mt-1"
+                    style={{ accentColor: color }}
+                  />
+                  <span className="text-sm w-40 text-white">{group}</span>
+                </label>
+                <div className="pl-7 flex flex-col gap-1 mt-1">
+                  {children.map((key) => (
+                    <label key={key} className="flex gap-2 cursor-pointer select-none">
+                      <input
+                        type="checkbox"
+                        checked={visibleKeys.includes(key)}
+                        onChange={() => handleCheckboxChange(key)}
+                        className="size-3.5 mt-1"
+                        style={{ accentColor: color }}
+                      />
+                      <span className={`text-xs break-all w-36 ${visibleKeys.includes(key) ? "text-white" : "text-gray-400"}`}>{key.slice(group.length + 1)}</span>
+                      <span className={`text-xs font-mono ml-auto ${visibleKeys.includes(key) ? "text-orange-300" : "text-gray-500"}`}>
+                        {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "--"}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+          {/* Singles (non-grouped) */}
+          {singles.map((key) => {
+            const color = groupColorMap[key];
+            return (
+              <label key={key} className="flex gap-2 cursor-pointer select-none">
+                <input
+                  type="checkbox"
+                  checked={visibleKeys.includes(key)}
+                  onChange={() => handleCheckboxChange(key)}
+                  className="size-3.5 mt-1"
+                  style={{ accentColor: color }}
+                />
+                <span className={`text-sm break-all w-40 ${visibleKeys.includes(key) ? "text-white" : "text-gray-400"}`}>{key}</span>
+                <span className={`text-sm font-mono ml-auto ${visibleKeys.includes(key) ? "text-orange-300" : "text-gray-500"}`}>
+                  {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "--"}
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      );
+    };
+
+    return (
+      <div className="w-full">
+        <div className="w-full h-80" onMouseLeave={handleMouseLeave}>
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={chartData}
+              syncId="episode-sync"
+              margin={{ top: 24, right: 16, left: 0, bottom: 16 }}
+              onClick={handleClick}
+              onMouseMove={(state: any) => {
+                setHoveredTime(
+                  state?.activePayload?.[0]?.payload?.timestamp ??
+                    state?.activeLabel ??
+                    null,
+                );
+              }}
+              onMouseLeave={handleMouseLeave}
+            >
+              <CartesianGrid strokeDasharray="3 3" stroke="#444" />
+              <XAxis
+                dataKey="timestamp"
+                label={{
+                  value: "time",
+                  position: "insideBottomLeft",
+                  fill: "#cbd5e1",
+                }}
+                domain={[
+                  chartData.at(0)?.timestamp ?? 0,
+                  chartData.at(-1)?.timestamp ?? 0,
+                ]}
+                ticks={useMemo(
+                  () =>
+                    Array.from(
+                      new Set(chartData.map((d) => Math.ceil(d.timestamp))),
+                    ),
+                  [chartData],
+                )}
+                stroke="#cbd5e1"
+                minTickGap={20} // Increased for fewer ticks
+                allowDataOverflow={true}
+              />
+              <YAxis
+                domain={["auto", "auto"]}
+                stroke="#cbd5e1"
+                interval={0}
+                allowDataOverflow={true}
+              />
+
+              <Tooltip
+                content={() => null}
+                active={true}
+                isAnimationActive={false}
+                defaultIndex={
+                  !hoveredTime ? findClosestDataIndex(currentTime) : undefined
+                }
+              />
+
+              {/* Render lines for visible dataKeys only */}
+              {dataKeys.map((key) => {
+                // Use group color for all keys in a group
+                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) {
+                  const idxInGroup = groups[group].indexOf(key);
+                  if (idxInGroup > 0) strokeDasharray = "5 5";
+                }
+                return (
+                  visibleKeys.includes(key) && (
+                    <Line
+                      key={key}
+                      type="monotone"
+                      dataKey={key}
+                      name={key}
+                      stroke={color}
+                      strokeDasharray={strokeDasharray}
+                      dot={false}
+                      activeDot={false}
+                      strokeWidth={1.5}
+                      isAnimationActive={false}
+                    />
+                  )
+                );
+              })}
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+        <CustomLegend />
+      </div>
+    );
+  },
+); // End React.memo
+
+SingleDataGraph.displayName = "SingleDataGraph";
+DataRecharts.displayName = "DataGraph";
+export default DataRecharts;

src/components/loading-component.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+export default function Loading() {
+  return (
+    <div
+      className="absolute inset-0 flex flex-col items-center justify-center bg-slate-950/70 z-10 text-slate-100 animate-fade-in"
+      tabIndex={-1}
+      aria-modal="true"
+      role="dialog"
+    >
+      <svg
+        className="animate-spin mb-8"
+        width="64"
+        height="64"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <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>
+      <h1 className="text-2xl font-bold mb-2">Loading...</h1>
+      <p className="text-slate-400">preparing data & videos</p>
+    </div>
+  );
+}

src/components/playback-bar.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { useTime } from "../context/time-context";
+import {
+  FaPlay,
+  FaPause,
+  FaBackward,
+  FaForward,
+  FaUndoAlt,
+  FaArrowDown,
+  FaArrowUp,
+} from "react-icons/fa";
+
+import { debounce } from "@/utils/debounce";
+
+const PlaybackBar: React.FC = () => {
+  const { duration, isPlaying, setIsPlaying, currentTime, setCurrentTime } =
+    useTime();
+
+  const sliderActiveRef = React.useRef(false);
+  const wasPlayingRef = React.useRef(false);
+  const [sliderValue, setSliderValue] = React.useState(currentTime);
+
+  // Only update sliderValue from context if not dragging
+  React.useEffect(() => {
+    if (!sliderActiveRef.current) {
+      setSliderValue(currentTime);
+    }
+  }, [currentTime]);
+
+  const updateTime = debounce((t: number) => {
+    setCurrentTime(t);
+  }, 200);
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const t = Number(e.target.value);
+    setSliderValue(t);
+    updateTime(t);
+  };
+
+  const handleSliderMouseDown = () => {
+    sliderActiveRef.current = true;
+    wasPlayingRef.current = isPlaying;
+    setIsPlaying(false);
+  };
+
+  const handleSliderMouseUp = () => {
+    sliderActiveRef.current = false;
+    setCurrentTime(sliderValue); // Snap to final value
+    if (wasPlayingRef.current) {
+      setIsPlaying(true);
+    }
+    // If it was paused before, keep it paused
+  };
+
+  return (
+    <div className="flex items-center gap-4 w-full max-w-4xl mx-auto sticky bottom-0 bg-slate-900/95 px-4 py-3 rounded-3xl mt-auto">
+      <button
+        title="Jump backward 5 seconds"
+        onClick={() => setCurrentTime(Math.max(0, currentTime - 5))}
+        className="text-2xl hidden md:block"
+      >
+        <FaBackward size={24} />
+      </button>
+      <button
+        className={`text-3xl transition-transform ${isPlaying ? "scale-90 opacity-60" : "scale-110"}`}
+        title="Play. Toggle with Space"
+        onClick={() => setIsPlaying(true)}
+        style={{ display: isPlaying ? "none" : "inline-block" }}
+      >
+        <FaPlay size={24} />
+      </button>
+      <button
+        className={`text-3xl transition-transform ${!isPlaying ? "scale-90 opacity-60" : "scale-110"}`}
+        title="Pause. Toggle with Space"
+        onClick={() => setIsPlaying(false)}
+        style={{ display: !isPlaying ? "none" : "inline-block" }}
+      >
+        <FaPause size={24} />
+      </button>
+      <button
+        title="Jump forward 5 seconds"
+        onClick={() => setCurrentTime(Math.min(duration, currentTime + 5))}
+        className="text-2xl hidden md:block"
+      >
+        <FaForward size={24} />
+      </button>
+      <button
+        title="Rewind from start"
+        onClick={() => setCurrentTime(0)}
+        className="text-2xl hidden md:block"
+      >
+        <FaUndoAlt size={24} />
+      </button>
+      <input
+        type="range"
+        min={0}
+        max={duration}
+        step={0.01}
+        value={sliderValue}
+        onChange={handleSliderChange}
+        onMouseDown={handleSliderMouseDown}
+        onMouseUp={handleSliderMouseUp}
+        onTouchStart={handleSliderMouseDown}
+        onTouchEnd={handleSliderMouseUp}
+        className="flex-1 mx-2 accent-orange-500 focus:outline-none focus:ring-0"
+        aria-label="Seek video"
+      />
+      <span className="w-16 text-right tabular-nums text-xs text-slate-200 shrink-0">
+        {Math.floor(sliderValue)} / {Math.floor(duration)}
+      </span>
+
+      <div className="text-xs text-slate-300 select-none ml-8 flex-col gap-y-0.5 hidden md:flex">
+        <p>
+          <span className="inline-flex items-center gap-1 font-mono align-middle">
+            <span className="px-2 py-0.5 rounded border border-slate-400 bg-slate-800 text-slate-200 text-xs shadow-inner">
+              Space
+            </span>
+          </span>{" "}
+          to pause/unpause
+        </p>
+        <p>
+          <span className="inline-flex items-center gap-1 font-mono align-middle">
+            <FaArrowUp size={14} />/<FaArrowDown size={14} />
+          </span>{" "}
+          to previous/next episode
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PlaybackBar;

src/components/side-nav.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+
+interface SidebarProps {
+  datasetInfo: any;
+  paginatedEpisodes: any[];
+  episodeId: any;
+  totalPages: number;
+  currentPage: number;
+  prevPage: () => void;
+  nextPage: () => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  datasetInfo,
+  paginatedEpisodes,
+  episodeId,
+  totalPages,
+  currentPage,
+  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]);
+
+  return (
+    <div className="flex z-10 min-h-screen absolute md:static" ref={sidebarRef}>
+      <nav
+        className={`shrink-0 overflow-y-auto bg-slate-900 p-5 break-words md:max-h-screen w-60 md:shrink ${
+          !sidebarVisible ? "hidden" : ""
+        }`}
+        aria-label="Sidebar navigation"
+      >
+        <ul>
+          <li>Number of samples/frames: {datasetInfo.total_frames}</li>
+          <li>Number of episodes: {datasetInfo.total_episodes}</li>
+          <li>Frames per second: {datasetInfo.fps}</li>
+        </ul>
+
+        <p>Episodes:</p>
+
+        {/* episodes menu for medium & large screens */}
+        <div className="ml-2 block">
+          <ul>
+            {paginatedEpisodes.map((episode) => (
+              <li key={episode} className="mt-0.5 font-mono text-sm">
+                <Link
+                  href={`./episode_${episode}`}
+                  className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}
+                >
+                  Episode {episode}
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          {totalPages > 1 && (
+            <div className="mt-3 flex items-center text-xs">
+              <button
+                onClick={prevPage}
+                className={`mr-2 rounded bg-slate-800 px-2 py-1 ${
+                  currentPage === 1 ? "cursor-not-allowed opacity-50" : ""
+                }`}
+                disabled={currentPage === 1}
+              >
+                « Prev
+              </button>
+              <span className="mr-2 font-mono">
+                {currentPage} / {totalPages}
+              </span>
+              <button
+                onClick={nextPage}
+                className={`rounded bg-slate-800 px-2 py-1 ${
+                  currentPage === totalPages
+                    ? "cursor-not-allowed opacity-50"
+                    : ""
+                }`}
+                disabled={currentPage === totalPages}
+              >
+                Next »
+              </button>
+            </div>
+          )}
+        </div>
+      </nav>
+      {/* Toggle sidebar button */}
+      <button
+        className="mx-1 flex items-center opacity-50 hover:opacity-100 focus:outline-none focus:ring-0"
+        onClick={toggleSidebar}
+        title="Toggle sidebar"
+      >
+        <div className="h-10 w-2 rounded-full bg-slate-500"></div>
+      </button>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/simple-videos-player.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { useTime } from "../context/time-context";
+import { FaExpand, FaCompress, FaTimes, FaEye } from "react-icons/fa";
+
+type VideoInfo = {
+  filename: string;
+  url: string;
+  isSegmented?: boolean;
+  segmentStart?: number;
+  segmentEnd?: number;
+  segmentDuration?: number;
+};
+
+type VideoPlayerProps = {
+  videosInfo: VideoInfo[];
+  onVideosReady?: () => void;
+};
+
+export const SimpleVideosPlayer = ({
+  videosInfo,
+  onVideosReady,
+}: VideoPlayerProps) => {
+  const { currentTime, setCurrentTime, isPlaying, setIsPlaying } = useTime();
+  const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
+  const [hiddenVideos, setHiddenVideos] = React.useState<string[]>([]);
+  const [enlargedVideo, setEnlargedVideo] = React.useState<string | null>(null);
+  const [showHiddenMenu, setShowHiddenMenu] = React.useState(false);
+  const [videosReady, setVideosReady] = React.useState(false);
+  
+  const firstVisibleIdx = videosInfo.findIndex(
+    (video) => !hiddenVideos.includes(video.filename)
+  );
+
+  // Initialize video refs array
+  useEffect(() => {
+    videoRefs.current = videoRefs.current.slice(0, videosInfo.length);
+  }, [videosInfo.length]);
+
+  // Handle videos ready
+  useEffect(() => {
+    let readyCount = 0;
+    
+    const checkReady = () => {
+      readyCount++;
+      if (readyCount === videosInfo.length && onVideosReady) {
+        setVideosReady(true);
+        onVideosReady();
+        setIsPlaying(true);
+      }
+    };
+
+    videoRefs.current.forEach((video, index) => {
+      if (video) {
+        const info = videosInfo[index];
+        
+        // Setup segment boundaries
+        if (info.isSegmented) {
+          const handleTimeUpdate = () => {
+            const segmentEnd = info.segmentEnd || video.duration;
+            const segmentStart = info.segmentStart || 0;
+            
+            if (video.currentTime >= segmentEnd - 0.05) {
+              video.currentTime = segmentStart;
+              // Also update the global time to reset to start
+              if (index === firstVisibleIdx) {
+                setCurrentTime(0);
+              }
+            }
+          };
+          
+          const handleLoadedData = () => {
+            video.currentTime = info.segmentStart || 0;
+            checkReady();
+          };
+          
+          video.addEventListener('timeupdate', handleTimeUpdate);
+          video.addEventListener('loadeddata', handleLoadedData);
+          
+          // Store cleanup
+          (video as any)._segmentHandlers = () => {
+            video.removeEventListener('timeupdate', handleTimeUpdate);
+            video.removeEventListener('loadeddata', handleLoadedData);
+          };
+        } else {
+          // For non-segmented videos, handle end of video
+          const handleEnded = () => {
+            video.currentTime = 0;
+            if (index === firstVisibleIdx) {
+              setCurrentTime(0);
+            }
+          };
+          
+          video.addEventListener('ended', handleEnded);
+          video.addEventListener('canplaythrough', checkReady, { once: true });
+          
+          // Store cleanup
+          (video as any)._segmentHandlers = () => {
+            video.removeEventListener('ended', handleEnded);
+          };
+        }
+      }
+    });
+
+    return () => {
+      videoRefs.current.forEach((video) => {
+        if (video && (video as any)._segmentHandlers) {
+          (video as any)._segmentHandlers();
+        }
+      });
+    };
+  }, [videosInfo, onVideosReady, setIsPlaying, firstVisibleIdx, setCurrentTime]);
+
+  // Handle play/pause
+  useEffect(() => {
+    if (!videosReady) return;
+    
+    videoRefs.current.forEach((video, idx) => {
+      if (video && !hiddenVideos.includes(videosInfo[idx].filename)) {
+        if (isPlaying) {
+          video.play().catch(e => {
+            if (e.name !== 'AbortError') {
+              console.error("Error playing video");
+            }
+          });
+        } else {
+          video.pause();
+        }
+      }
+    });
+  }, [isPlaying, videosReady, hiddenVideos, videosInfo]);
+
+  // Sync video times
+  useEffect(() => {
+    if (!videosReady) return;
+    
+    videoRefs.current.forEach((video, index) => {
+      if (video && !hiddenVideos.includes(videosInfo[index].filename)) {
+        const info = videosInfo[index];
+        let targetTime = currentTime;
+        
+        if (info.isSegmented) {
+          targetTime = (info.segmentStart || 0) + currentTime;
+        }
+        
+        if (Math.abs(video.currentTime - targetTime) > 0.2) {
+          video.currentTime = targetTime;
+        }
+      }
+    });
+  }, [currentTime, videosInfo, videosReady, hiddenVideos]);
+
+  // Handle time update from first visible video
+  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
+    const video = e.target as HTMLVideoElement;
+    const videoIndex = videoRefs.current.findIndex(ref => ref === video);
+    const info = videosInfo[videoIndex];
+    
+    if (info) {
+      let globalTime = video.currentTime;
+      if (info.isSegmented) {
+        globalTime = video.currentTime - (info.segmentStart || 0);
+      }
+      setCurrentTime(globalTime);
+    }
+  };
+
+  // Handle play click for segmented videos
+  const handlePlay = (video: HTMLVideoElement, info: VideoInfo) => {
+    if (info.isSegmented) {
+      const segmentStart = info.segmentStart || 0;
+      const segmentEnd = info.segmentEnd || video.duration;
+      
+      if (video.currentTime < segmentStart || video.currentTime >= segmentEnd) {
+        video.currentTime = segmentStart;
+      }
+    }
+    video.play();
+  };
+
+  return (
+    <>
+      {/* Hidden videos menu */}
+      {hiddenVideos.length > 0 && (
+        <div className="relative mb-4">
+          <button
+            className="flex items-center gap-2 rounded bg-slate-800 px-3 py-2 text-sm text-slate-100 hover:bg-slate-700 border border-slate-500"
+            onClick={() => setShowHiddenMenu(!showHiddenMenu)}
+          >
+            <FaEye /> Show Hidden Videos ({hiddenVideos.length})
+          </button>
+          {showHiddenMenu && (
+            <div className="absolute left-0 mt-2 w-max rounded border border-slate-500 bg-slate-900 shadow-lg p-2 z-50">
+              <div className="mb-2 text-xs text-slate-300">
+                Restore hidden videos:
+              </div>
+              {hiddenVideos.map((filename) => (
+                <button
+                  key={filename}
+                  className="block w-full text-left px-2 py-1 rounded hover:bg-slate-700 text-slate-100"
+                  onClick={() => setHiddenVideos(prev => prev.filter(v => v !== filename))}
+                >
+                  {filename}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Videos */}
+      <div className="flex flex-wrap gap-x-2 gap-y-6">
+        {videosInfo.map((info, idx) => {
+          if (hiddenVideos.includes(info.filename)) return null;
+          
+          const isEnlarged = enlargedVideo === info.filename;
+          const isFirstVisible = idx === firstVisibleIdx;
+          
+          return (
+            <div
+              key={info.filename}
+              className={`${
+                isEnlarged
+                  ? "z-40 fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center"
+                  : "max-w-96"
+              }`}
+            >
+              <p className="truncate w-full rounded-t-xl bg-gray-800 px-2 text-sm text-gray-300 flex items-center justify-between">
+                <span>{info.filename}</span>
+                <span className="flex gap-1">
+                  <button
+                    title={isEnlarged ? "Minimize" : "Enlarge"}
+                    className="ml-2 p-1 hover:bg-slate-700 rounded"
+                    onClick={() => setEnlargedVideo(isEnlarged ? null : info.filename)}
+                  >
+                    {isEnlarged ? <FaCompress /> : <FaExpand />}
+                  </button>
+                  <button
+                    title="Hide Video"
+                    className="ml-1 p-1 hover:bg-slate-700 rounded"
+                    onClick={() => setHiddenVideos(prev => [...prev, info.filename])}
+                    disabled={videosInfo.filter(v => !hiddenVideos.includes(v.filename)).length === 1}
+                  >
+                    <FaTimes />
+                  </button>
+                </span>
+              </p>
+              <video
+                ref={el => videoRefs.current[idx] = el}
+                className={`w-full object-contain ${
+                  isEnlarged ? "max-h-[90vh] max-w-[90vw]" : ""
+                }`}
+                muted
+                preload="auto"
+                onPlay={(e) => handlePlay(e.currentTarget, info)}
+                onTimeUpdate={isFirstVisible ? handleTimeUpdate : undefined}
+              >
+                <source src={info.url} type="video/mp4" />
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default SimpleVideosPlayer;

src/components/videos-player.tsx

@@ -0,0 +1,416 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useTime } from "../context/time-context";
+import { FaExpand, FaCompress, FaTimes, FaEye } from "react-icons/fa";
+
+type VideoInfo = {
+  filename: string;
+  url: string;
+  isSegmented?: boolean;
+  segmentStart?: number;
+  segmentEnd?: number;
+  segmentDuration?: number;
+};
+
+type VideoPlayerProps = {
+  videosInfo: VideoInfo[];
+  onVideosReady?: () => void;
+};
+
+export const VideosPlayer = ({
+  videosInfo,
+  onVideosReady,
+}: VideoPlayerProps) => {
+  const { currentTime, setCurrentTime, isPlaying, setIsPlaying } = useTime();
+  const videoRefs = useRef<HTMLVideoElement[]>([]);
+  // Hidden/enlarged state and hidden menu
+  const [hiddenVideos, setHiddenVideos] = useState<string[]>([]);
+  // Find the index of the first visible (not hidden) video
+  const firstVisibleIdx = videosInfo.findIndex(
+    (video) => !hiddenVideos.includes(video.filename),
+  );
+  // Count of visible videos
+  const visibleCount = videosInfo.filter(
+    (video) => !hiddenVideos.includes(video.filename),
+  ).length;
+  const [enlargedVideo, setEnlargedVideo] = useState<string | null>(null);
+  // Track previous hiddenVideos for comparison
+  const prevHiddenVideosRef = useRef<string[]>([]);
+  const videoContainerRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const [showHiddenMenu, setShowHiddenMenu] = useState(false);
+  const hiddenMenuRef = useRef<HTMLDivElement | null>(null);
+  const showHiddenBtnRef = useRef<HTMLButtonElement | null>(null);
+  const [videoCodecError, setVideoCodecError] = useState(false);
+
+  // Initialize video refs
+  useEffect(() => {
+    videoRefs.current = videoRefs.current.slice(0, videosInfo.length);
+  }, [videosInfo]);
+
+  // When videos get unhidden, start playing them if it was playing
+  useEffect(() => {
+    // Find which videos were just unhidden
+    const prevHidden = prevHiddenVideosRef.current;
+    const newlyUnhidden = prevHidden.filter(
+      (filename) => !hiddenVideos.includes(filename),
+    );
+    if (newlyUnhidden.length > 0) {
+      videosInfo.forEach((video, idx) => {
+        if (newlyUnhidden.includes(video.filename)) {
+          const ref = videoRefs.current[idx];
+          if (ref) {
+            ref.currentTime = currentTime;
+            if (isPlaying) {
+              ref.play().catch(() => {});
+            }
+          }
+        }
+      });
+    }
+    prevHiddenVideosRef.current = hiddenVideos;
+  }, [hiddenVideos, isPlaying, videosInfo, currentTime]);
+
+  // Check video codec support
+  useEffect(() => {
+    const checkCodecSupport = () => {
+      const dummyVideo = document.createElement("video");
+      const canPlayVideos = dummyVideo.canPlayType(
+        'video/mp4; codecs="av01.0.05M.08"',
+      );
+      setVideoCodecError(!canPlayVideos);
+    };
+
+    checkCodecSupport();
+  }, []);
+
+  // Handle play/pause
+  useEffect(() => {
+    videoRefs.current.forEach((video) => {
+      if (video) {
+        if (isPlaying) {
+          video.play().catch(() => console.error("Error playing video"));
+        } else {
+          video.pause();
+        }
+      }
+    });
+  }, [isPlaying]);
+
+  // Minimize enlarged video on Escape key
+  useEffect(() => {
+    if (!enlargedVideo) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setEnlargedVideo(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    // Scroll enlarged video into view
+    const ref = videoContainerRefs.current[enlargedVideo];
+    if (ref) {
+      ref.scrollIntoView();
+    }
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enlargedVideo]);
+
+  // Close hidden videos dropdown on outside click
+  useEffect(() => {
+    if (!showHiddenMenu) return;
+    function handleClick(e: MouseEvent) {
+      const menu = hiddenMenuRef.current;
+      const btn = showHiddenBtnRef.current;
+      if (
+        menu &&
+        !menu.contains(e.target as Node) &&
+        btn &&
+        !btn.contains(e.target as Node)
+      ) {
+        setShowHiddenMenu(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [showHiddenMenu]);
+
+  // Close dropdown if no hidden videos
+  useEffect(() => {
+    if (hiddenVideos.length === 0 && showHiddenMenu) {
+      setShowHiddenMenu(false);
+    }
+    // Minimize if enlarged video is hidden
+    if (enlargedVideo && hiddenVideos.includes(enlargedVideo)) {
+      setEnlargedVideo(null);
+    }
+  }, [hiddenVideos, showHiddenMenu, enlargedVideo]);
+
+  // Sync video times (with segment awareness)
+  useEffect(() => {
+    videoRefs.current.forEach((video, index) => {
+      if (video && Math.abs(video.currentTime - currentTime) > 0.2) {
+        const videoInfo = videosInfo[index];
+        
+        if (videoInfo?.isSegmented) {
+          // For segmented videos, map the global time to segment time
+          const segmentStart = videoInfo.segmentStart || 0;
+          const segmentDuration = videoInfo.segmentDuration || 0;
+          
+          if (segmentDuration > 0) {
+            // Map currentTime (0 to segmentDuration) to video time (segmentStart to segmentEnd)
+            const segmentTime = segmentStart + currentTime;
+            video.currentTime = segmentTime;
+          }
+        } else {
+          // For non-segmented videos, use direct time mapping
+          video.currentTime = currentTime;
+        }
+      }
+    });
+  }, [currentTime, videosInfo]);
+
+  // Handle time update
+  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
+    const video = e.target as HTMLVideoElement;
+    if (video && video.duration) {
+      // Find the video info for this video element
+      const videoIndex = videoRefs.current.findIndex(ref => ref === video);
+      const videoInfo = videosInfo[videoIndex];
+      
+      if (videoInfo?.isSegmented) {
+        // For segmented videos, map the video time back to global time (0 to segmentDuration)
+        const segmentStart = videoInfo.segmentStart || 0;
+        const globalTime = Math.max(0, video.currentTime - segmentStart);
+        setCurrentTime(globalTime);
+      } else {
+        // For non-segmented videos, use direct time mapping
+        setCurrentTime(video.currentTime);
+      }
+    }
+  };
+
+  // Handle video ready and setup segmentation
+  useEffect(() => {
+    let videosReadyCount = 0;
+    const onCanPlayThrough = (videoIndex: number) => {
+      const video = videoRefs.current[videoIndex];
+      const videoInfo = videosInfo[videoIndex];
+      
+      // Setup video segmentation for v3.0 chunked videos
+      if (video && videoInfo?.isSegmented) {
+        const segmentStart = videoInfo.segmentStart || 0;
+        const segmentEnd = videoInfo.segmentEnd || video.duration || 0;
+        
+        
+        // Set initial time to segment start if not already set
+        if (video.currentTime < segmentStart || video.currentTime > segmentEnd) {
+          video.currentTime = segmentStart;
+        }
+        
+        // Add event listener to handle segment boundaries
+        const handleTimeUpdate = () => {
+          if (video.currentTime > segmentEnd) {
+            video.currentTime = segmentStart;
+            if (!video.loop) {
+              video.pause();
+            }
+          }
+        };
+        
+        video.addEventListener('timeupdate', handleTimeUpdate);
+        
+        // Store cleanup function
+        (video as any)._segmentCleanup = () => {
+          video.removeEventListener('timeupdate', handleTimeUpdate);
+        };
+      }
+      
+      videosReadyCount += 1;
+      if (videosReadyCount === videosInfo.length) {
+        if (typeof onVideosReady === "function") {
+          onVideosReady();
+          setIsPlaying(true);
+        }
+      }
+    };
+
+    videoRefs.current.forEach((video, index) => {
+      if (video) {
+        // If already ready, call the handler immediately
+        if (video.readyState >= 4) {
+          onCanPlayThrough(index);
+        } else {
+          const readyHandler = () => onCanPlayThrough(index);
+          video.addEventListener("canplaythrough", readyHandler);
+          (video as any)._readyHandler = readyHandler;
+        }
+      }
+    });
+
+    return () => {
+      videoRefs.current.forEach((video) => {
+        if (video) {
+          // Remove ready handler
+          if ((video as any)._readyHandler) {
+            video.removeEventListener("canplaythrough", (video as any)._readyHandler);
+          }
+          // Remove segment handler
+          if ((video as any)._segmentCleanup) {
+            (video as any)._segmentCleanup();
+          }
+        }
+      });
+    };
+  }, [videosInfo, onVideosReady, setIsPlaying]);
+
+  return (
+    <>
+      {/* Error message */}
+      {videoCodecError && (
+        <div className="font-medium text-orange-700">
+          <p>
+            Videos could NOT play because{" "}
+            <a
+              href="https://en.wikipedia.org/wiki/AV1"
+              target="_blank"
+              className="underline"
+            >
+              AV1
+            </a>{" "}
+            decoding is not available on your browser.
+          </p>
+          <ul className="list-inside list-decimal">
+            <li>
+              If iPhone:{" "}
+              <span className="italic">
+                It is supported with A17 chip or higher.
+              </span>
+            </li>
+            <li>
+              If Mac with Safari:{" "}
+              <span className="italic">
+                It is supported on most browsers except Safari with M1 chip or
+                higher and on Safari with M3 chip or higher.
+              </span>
+            </li>
+            <li>
+              Other:{" "}
+              <span className="italic">
+                Contact the maintainers on LeRobot discord channel:
+              </span>
+              <a
+                href="https://discord.com/invite/s3KuuzsPFb"
+                target="_blank"
+                className="underline"
+              >
+                https://discord.com/invite/s3KuuzsPFb
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
+
+      {/* Show Hidden Videos Button */}
+      {hiddenVideos.length > 0 && (
+        <div className="relative">
+          <button
+            ref={showHiddenBtnRef}
+            className="flex items-center gap-2 rounded bg-slate-800 px-3 py-2 text-sm text-slate-100 hover:bg-slate-700 border border-slate-500"
+            onClick={() => setShowHiddenMenu((prev) => !prev)}
+          >
+            <FaEye /> Show Hidden Videos ({hiddenVideos.length})
+          </button>
+          {showHiddenMenu && (
+            <div
+              ref={hiddenMenuRef}
+              className="absolute left-0 mt-2 w-max rounded border border-slate-500 bg-slate-900 shadow-lg p-2 z-50"
+            >
+              <div className="mb-2 text-xs text-slate-300">
+                Restore hidden videos:
+              </div>
+              {hiddenVideos.map((filename) => (
+                <button
+                  key={filename}
+                  className="block w-full text-left px-2 py-1 rounded hover:bg-slate-700 text-slate-100"
+                  onClick={() =>
+                    setHiddenVideos((prev: string[]) =>
+                      prev.filter((v: string) => v !== filename),
+                    )
+                  }
+                >
+                  {filename}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Videos */}
+      <div className="flex flex-wrap gap-x-2 gap-y-6">
+        {videosInfo.map((video, idx) => {
+          if (hiddenVideos.includes(video.filename) || videoCodecError)
+            return null;
+          const isEnlarged = enlargedVideo === video.filename;
+          return (
+            <div
+              key={video.filename}
+              ref={(el) => {
+                videoContainerRefs.current[video.filename] = el;
+              }}
+              className={`${isEnlarged ? "z-40 fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center" : "max-w-96"}`}
+              style={isEnlarged ? { height: "100vh", width: "100vw" } : {}}
+            >
+              <p className="truncate w-full rounded-t-xl bg-gray-800 px-2 text-sm text-gray-300 flex items-center justify-between">
+                <span>{video.filename}</span>
+                <span className="flex gap-1">
+                  <button
+                    title={isEnlarged ? "Minimize" : "Enlarge"}
+                    className="ml-2 p-1 hover:bg-slate-700 rounded focus:outline-none focus:ring-0"
+                    onClick={() =>
+                      setEnlargedVideo(isEnlarged ? null : video.filename)
+                    }
+                  >
+                    {isEnlarged ? <FaCompress /> : <FaExpand />}
+                  </button>
+                  <button
+                    title="Hide Video"
+                    className="ml-1 p-1 hover:bg-slate-700 rounded focus:outline-none focus:ring-0"
+                    onClick={() =>
+                      setHiddenVideos((prev: string[]) => [
+                        ...prev,
+                        video.filename,
+                      ])
+                    }
+                    disabled={visibleCount === 1}
+                  >
+                    <FaTimes />
+                  </button>
+                </span>
+              </p>
+              <video
+                ref={(el) => {
+                  if (el) videoRefs.current[idx] = el;
+                }}
+                muted
+                loop
+                preload="auto"
+                className={`w-full object-contain ${isEnlarged ? "max-h-[90vh] max-w-[90vw]" : ""}`}
+                onTimeUpdate={
+                  idx === firstVisibleIdx ? handleTimeUpdate : undefined
+                }
+                style={isEnlarged ? { zIndex: 41 } : {}}
+              >
+                <source src={video.url} type="video/mp4" />
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default VideosPlayer;

src/context/time-context.tsx

@@ -0,0 +1,64 @@
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
+
+// The shape of our context
+type TimeContextType = {
+  currentTime: number;
+  setCurrentTime: (t: number) => void;
+  subscribe: (cb: (t: number) => void) => () => void;
+  isPlaying: boolean;
+  setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
+  duration: number;
+  setDuration: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const TimeContext = createContext<TimeContextType | undefined>(undefined);
+
+export const useTime = () => {
+  const ctx = useContext(TimeContext);
+  if (!ctx) throw new Error("useTime must be used within a TimeProvider");
+  return ctx;
+};
+
+export const TimeProvider: React.FC<{
+  children: React.ReactNode;
+  duration: number;
+}> = ({ children, duration: initialDuration }) => {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [duration, setDuration] = useState(initialDuration);
+  const listeners = useRef<Set<(t: number) => void>>(new Set());
+
+  // Call this to update time and notify all listeners
+  const updateTime = useCallback((t: number) => {
+    setCurrentTime(t);
+    listeners.current.forEach((fn) => fn(t));
+  }, []);
+
+  // Components can subscribe to time changes (for imperative updates)
+  const subscribe = useCallback((cb: (t: number) => void) => {
+    listeners.current.add(cb);
+    return () => listeners.current.delete(cb);
+  }, []);
+
+  return (
+    <TimeContext.Provider
+      value={{
+        currentTime,
+        setCurrentTime: updateTime,
+        subscribe,
+        isPlaying,
+        setIsPlaying,
+        duration,
+        setDuration,
+      }}
+    >
+      {children}
+    </TimeContext.Provider>
+  );
+};

src/utils/debounce.ts

@@ -0,0 +1,10 @@
+export function debounce<F extends (...args: any[]) => any>(
+  func: F,
+  waitFor: number,
+): (...args: Parameters<F>) => void {
+  let timeoutId: number;
+  return (...args: Parameters<F>) => {
+    clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => func(...args), waitFor);
+  };
+}

src/utils/parquetUtils.ts

@@ -0,0 +1,119 @@
+import { parquetRead, parquetReadObjects } from "hyparquet";
+
+export interface DatasetMetadata {
+  codebase_version: string;
+  robot_type: string;
+  total_episodes: number;
+  total_frames: number;
+  total_tasks: number;
+  total_videos: number;
+  total_chunks: number;
+  chunks_size: number;
+  fps: number;
+  splits: Record<string, string>;
+  data_path: string;
+  video_path: string;
+  features: Record<
+    string,
+    {
+      dtype: string;
+      shape: any[];
+      names: any[] | Record<string, any> | null;
+      info?: Record<string, any>;
+    }
+  >;
+}
+
+export async function fetchJson<T>(url: string): Promise<T> {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(
+      `Failed to fetch JSON ${url}: ${res.status} ${res.statusText}`,
+    );
+  }
+  return res.json() as Promise<T>;
+}
+
+export function formatStringWithVars(
+  format: string,
+  vars: Record<string, any>,
+): string {
+  return format.replace(/{(\w+)(?::\d+d)?}/g, (_, key) => vars[key]);
+}
+
+// Fetch and parse the Parquet file
+export async function fetchParquetFile(url: string): Promise<ArrayBuffer> {
+  const res = await fetch(url);
+  
+  if (!res.ok) {
+    throw new Error(`Failed to fetch ${url}: ${res.status} ${res.statusText}`);
+  }
+  
+  return res.arrayBuffer();
+}
+
+// Read specific columns from the Parquet file
+export async function readParquetColumn(
+  fileBuffer: ArrayBuffer,
+  columns: string[],
+): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    try {
+      parquetRead({
+        file: fileBuffer,
+        columns: columns.length > 0 ? columns : undefined, // Let hyparquet read all columns if empty array
+        onComplete: (data: any[]) => {
+          resolve(data);
+        }
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+
+// Read parquet file and return objects with column names as keys
+export async function readParquetAsObjects(
+  fileBuffer: ArrayBuffer,
+  columns: string[] = [],
+): Promise<Record<string, any>[]> {
+  return parquetReadObjects({
+    file: fileBuffer,
+    columns: columns.length > 0 ? columns : undefined,
+  });
+}
+
+// Convert a 2D array to a CSV string
+export function arrayToCSV(data: (number | string)[][]): string {
+  return data.map((row) => row.join(",")).join("\n");
+}
+
+// Get rows from the current frame data
+export function getRows(currentFrameData: any[], columns: any[]) {
+  if (!currentFrameData || currentFrameData.length === 0) {
+    return [];
+  }
+
+  const rows = [];
+  const nRows = Math.max(...columns.map((column) => column.value.length));
+  let rowIndex = 0;
+
+  while (rowIndex < nRows) {
+    const row = [];
+    // number of states may NOT match number of actions. In this case, we null-pad the 2D array
+    const nullCell = { isNull: true };
+    // row consists of [state value, action value]
+    let idx = rowIndex;
+
+    for (const column of columns) {
+      const nColumn = column.value.length;
+      row.push(rowIndex < nColumn ? currentFrameData[idx] : nullCell);
+      idx += nColumn; // because currentFrameData = [state0, state1, ..., stateN, action0, action1, ..., actionN]
+    }
+
+    rowIndex += 1;
+    rows.push(row);
+  }
+
+  return rows;
+}

src/utils/pick.ts

@@ -0,0 +1,19 @@
+/**
+ * Return copy of object, only keeping whitelisted properties.
+ *
+ * This doesn't add {p: undefined} anymore, for props not in the o object.
+ */
+export function pick<T, K extends keyof T>(
+  o: T,
+  props: K[] | ReadonlyArray<K>,
+): Pick<T, K> {
+  // inspired by stackoverflow.com/questions/25553910/one-liner-to-take-some-properties-from-object-in-es-6
+  return Object.assign(
+    {},
+    ...props.map((prop) => {
+      if (o[prop] !== undefined) {
+        return { [prop]: o[prop] };
+      }
+    }),
+  );
+}

src/utils/postParentMessage.ts

@@ -0,0 +1,12 @@
+// Utility to post a message to the parent window with custom URLSearchParams
+export function postParentMessageWithParams(
+  setParams: (params: URLSearchParams) => void,
+) {
+  const parentOrigin = "https://huggingface.co";
+  const searchParams = new URLSearchParams();
+  setParams(searchParams);
+  window.parent.postMessage(
+    { queryString: searchParams.toString() },
+    parentOrigin,
+  );
+}

src/utils/versionUtils.ts

@@ -0,0 +1,103 @@
+/**
+ * Utility functions for checking dataset version compatibility
+ */
+
+const DATASET_URL = process.env.DATASET_URL || "https://huggingface.co/datasets";
+
+/**
+ * Dataset information structure from info.json
+ */
+interface DatasetInfo {
+  codebase_version?: string;
+  robot_type?: string | null;
+  total_episodes: number;
+  total_frames: number;
+  total_tasks?: number;
+  chunks_size?: number;
+  data_files_size_in_mb?: number;
+  video_files_size_in_mb?: number;
+  fps: number;
+  splits?: Record<string, string>;
+  data_path: string;
+  video_path: string;
+  features: Record<string, any>;
+}
+
+/**
+ * Fetches dataset information from the main revision
+ */
+export async function getDatasetInfo(repoId: string): Promise<DatasetInfo> {
+  try {
+    const testUrl = `${DATASET_URL}/${repoId}/resolve/main/meta/info.json`;
+    
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+    
+    const response = await fetch(testUrl, { 
+      method: "GET",
+      cache: "no-store",
+      signal: controller.signal
+    });
+    
+    clearTimeout(timeoutId);
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch dataset info: ${response.status}`);
+    }
+
+    const data = await response.json();
+    
+    // Check if it has the required structure
+    if (!data.features) {
+      throw new Error("Dataset info.json does not have the expected features structure");
+    }
+    
+    return data as DatasetInfo;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error(
+      `Dataset ${repoId} is not compatible with this visualizer. ` +
+      "Failed to read dataset information from the main revision."
+    );
+  }
+}
+
+
+/**
+ * Gets the dataset version by reading the codebase_version from the main revision's info.json
+ */
+export async function getDatasetVersion(repoId: string): Promise<string> {
+  try {
+    const datasetInfo = await getDatasetInfo(repoId);
+    
+    // Extract codebase_version
+    const codebaseVersion = datasetInfo.codebase_version ?? "v2.0";
+    
+    // Validate that it's a supported version
+    const supportedVersions = ["v3.0", "v2.1", "v2.0"];
+    if (!supportedVersions.includes(codebaseVersion)) {
+      throw new Error(
+        `Dataset ${repoId} has codebase version ${codebaseVersion}, which is not supported. ` +
+        "This tool only works with dataset versions 3.0, 2.1, or 2.0. " +
+        "Please use a compatible dataset version."
+      );
+    }
+    
+    return codebaseVersion;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error(
+      `Dataset ${repoId} is not compatible with this visualizer. ` +
+      "Failed to read dataset information from the main revision."
+    );
+  }
+}
+
+export function buildVersionedUrl(repoId: string, version: string, path: string): string {
+  return `${DATASET_URL}/${repoId}/resolve/main/${path}`;
+}
+

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}