Sync from GitHub via hub-sync

CLAUDE.md

@@ -58,6 +58,9 @@ Three versions are supported. Version is detected from `meta/info.json` → `cod
 - Integer columns from parquet come out as **BigInt** — always use `bigIntToNumber()` from `src/utils/typeGuards.ts`
 - Row-range selection: `dataset_from_index` / `dataset_to_index` allow reading only the episode's rows from a shared parquet file
 - Fallback format uses numeric keys `"0"`.."9"` when column names are unavailable
+- Episode metadata can span **multiple chunks** (when episode count exceeds `chunks_size`). Always walk via the `iterateEpisodeMetadataFilesV3(repoId, version)` async generator in `fetch-data.ts` — it advances chunk-000 → chunk-001 → … and stops on the first missing `file-000`. Never hardcode `chunk-000`.
+- Multi-task episodes: episode-metadata rows carry a `tasks` field (`list[str]`) — prefer it over the legacy single `task_index` lookup. `EpisodeMetadataV3.tasks?: string[]` exposes it.
+- `meta/tasks.parquet` lookup: rows are **not** ordered by `task_index`, and the task string lives in a named pandas index (`__index_level_0__`). Always filter by the `task_index` **column** (`row.task_index === taskIndexNum`), never by row position.
 
 ### v2.x path construction
 
@@ -112,5 +115,26 @@ Built by `buildVersionedUrl(repoId, version, path)`. The `version` param is acce
 
 ## Excluded columns (not shown in charts)
 
-- v2.x: `timestamp`, `frame_index`, `episode_index`, `index`, `task_index`
-- v3.0: `index`, `task_index`, `episode_index`, `frame_index`, `next.done`
+Reserved/bookkeeping columns from lerobot — see `EXCLUDED_COLUMNS` in `src/utils/constants.ts`:
+
+- v2.x: `timestamp`, `frame_index`, `episode_index`, `index`, `task_index`, `next.reward`, `next.done`, `next.truncated`
+- v3.0: `index`, `task_index`, `episode_index`, `frame_index`, `next.reward`, `next.done`, `next.truncated`, `subtask_index`
+
+## 3D URDF viewer (`src/components/urdf-viewer.tsx`)
+
+- URDFs and meshes are hosted in the HF bucket `lerobot/robot-urdfs` — base URL `https://huggingface.co/buckets/lerobot/robot-urdfs/resolve` (no `/main` segment; buckets are unbranched). Override with `NEXT_PUBLIC_URDF_BASE_URL` for local development.
+- Asset layout under the bucket: `g1/`, `openarm/`, `so101/` (both SO-100 and SO-101 live here).
+- **URDFLoader gotcha**: after our `loadMeshCb` returns, `URDFLoader.js` does `if (obj instanceof THREE.Mesh) obj.material = <urdf-material>`, overwriting any material we set. Workaround: wrap the loaded mesh in a `THREE.Group` so the `instanceof Mesh` check fails. DAE returns a Group already; STL must be wrapped explicitly.
+- **STLLoader event ordering**: `manager.itemEnd(url)` fires _before_ the user `onLoad` callback, so `manager.onLoad` can fire before meshes are attached to the robot tree. Defer post-load work (auto-fit camera, shadow flags) with `setTimeout(..., 0)`. Don't try to rebuild materials in `manager.onLoad` — pick the archetype color directly inside `loadMeshCb`.
+- **OpenArm DAE files ship 23 stray `PointLight`s** that drown out scene lighting. Strip non-`AmbientLight` lights from `collada.scene` before adding it to the robot.
+- Scene setup: `<Canvas shadows>` with `ACESFilmicToneMapping` (exposure 0.9), 3-point directional + ambient lights, `<Environment preset="studio" background={false} />`, `<color attach="background" args={["#1a2433"]} />`. `<OrbitControls makeDefault />` is required so `useThree().controls` exposes the controls for auto-fit.
+
+## Design system
+
+CSS tokens in `src/app/globals.css` (Tailwind v4 `@theme inline`):
+
+- Surfaces: `--bg #0a0e17`, `--surface-0`, `--surface-1`, `--surface-2`
+- Text: `--text-primary`, `--text-muted`, `--text-faint`
+- Accent: `--accent #38bdf8` (cyan) — primary interactive color across UI
+- Helpers: `.panel`, `.panel-raised`, `.tabular` (tabular-nums)
+- **Color semantics**: cyan = primary/active, orange (`orange-400/500`) is reserved for **flagged-episode** UI only — don't reuse it for generic accents.

README.md

@@ -7,6 +7,10 @@ sdk: docker
 app_port: 7860
 pinned: false
 license: apache-2.0
+hf_oauth: true
+hf_oauth_scopes:
+  - read-repos
+hf_oauth_expiration_minutes: 480
 ---
 
 # LeRobot Dataset Visualizer

bun.lock

@@ -5,6 +5,7 @@
     "": {
       "name": "lerobot-viewer",
       "dependencies": {
+        "@huggingface/hub": "^2.11.0",
         "@react-three/drei": "^10.7.7",
         "@react-three/fiber": "^9.5.0",
         "hyparquet": "^1.12.1",
@@ -63,6 +64,10 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
+    "@huggingface/hub": ["@huggingface/hub@2.11.0", "", { "dependencies": { "@huggingface/tasks": "^0.19.90" }, "optionalDependencies": { "cli-progress": "^3.12.0" }, "bin": { "hfjs": "dist/cli.js" } }, "sha512-WS6QGaXYeBVFlaB4SOn6z4LGUpLB5kRZNL08uUni4izX353KxiwwZMK5+/AWX86MJh8SMZNa/JFcvFCcQsbszQ=="],
+
+    "@huggingface/tasks": ["@huggingface/tasks@0.19.90", "", {}, "sha512-nfV9luJbvwGQ/5oKXkKhCV9h4X7mwh1YaGG3ORd6UMLDSwr1OFSSatcBX0O9OtBtmNK19aGSjbLFqqgcIR6+IA=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
@@ -325,6 +330,8 @@
 
     "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
 
+    "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
@@ -387,6 +394,8 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "cli-progress": ["cli-progress@3.12.0", "", { "dependencies": { "string-width": "^4.2.3" } }, "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A=="],
+
     "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
@@ -621,6 +630,8 @@
 
     "is-finalizationregistry": ["is-finalizationregistry@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3" } }, "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg=="],
 
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
     "is-generator-function": ["is-generator-function@1.1.2", "", { "dependencies": { "call-bound": "^1.0.4", "generator-function": "^2.0.0", "get-proto": "^1.0.1", "has-tostringtag": "^1.0.2", "safe-regex-test": "^1.1.0" } }, "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
@@ -877,6 +888,8 @@
 
     "streamsearch": ["streamsearch@1.1.0", "", {}, "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="],
 
+    "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
     "string.prototype.includes": ["string.prototype.includes@2.0.1", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-abstract": "^1.23.3" } }, "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg=="],
 
     "string.prototype.matchall": ["string.prototype.matchall@4.0.12", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-abstract": "^1.23.6", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.6", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "internal-slot": "^1.1.0", "regexp.prototype.flags": "^1.5.3", "set-function-name": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA=="],
@@ -889,6 +902,8 @@
 
     "string.prototype.trimstart": ["string.prototype.trimstart@1.0.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg=="],
 
+    "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
     "strip-bom": ["strip-bom@3.0.0", "", {}, "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="],
 
     "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
@@ -1021,6 +1036,8 @@
 
     "stats-gl/three": ["three@0.170.0", "", {}, "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ=="],
 
+    "string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
     "three-stdlib/fflate": ["fflate@0.6.10", "", {}, "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg=="],
 
     "tunnel-rat/zustand": ["zustand@4.5.7", "", { "dependencies": { "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "@types/react": ">=16.8", "immer": ">=9.0.6", "react": ">=16.8" }, "optionalPeers": ["@types/react", "immer", "react"] }, "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw=="],

package.json

@@ -15,6 +15,7 @@
     "validate": "bun run type-check && bun run lint && bun run format:check && bun test"
   },
   "dependencies": {
+    "@huggingface/hub": "^2.11.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "hyparquet": "^1.12.1",

src/app/api/auth/session/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+
+// Mirror of Hugging Face's default OAuth token lifetime so the cookie expires
+// alongside the upstream token. README sets hf_oauth_expiration_minutes: 480.
+const COOKIE_NAME = "hf_access_token";
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 8;
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+// POST sets the auth cookie from the Authorization header sent by the client
+// after a successful OAuth flow. The cookie is HttpOnly so the access token
+// is never exposed to JS — only the proxy route reads it.
+export async function POST(req: NextRequest) {
+  const auth = req.headers.get("authorization");
+  if (!auth?.toLowerCase().startsWith("bearer ")) {
+    return new NextResponse("Missing bearer token", { status: 400 });
+  }
+  const token = auth.slice("bearer ".length).trim();
+  if (!token) {
+    return new NextResponse("Empty token", { status: 400 });
+  }
+
+  const res = new NextResponse(null, { status: 204 });
+  res.cookies.set(COOKIE_NAME, token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    path: "/",
+    maxAge: COOKIE_MAX_AGE_SECONDS,
+  });
+  return res;
+}
+
+export async function DELETE() {
+  const res = new NextResponse(null, { status: 204 });
+  res.cookies.delete(COOKIE_NAME);
+  return res;
+}

src/app/api/proxy/[...path]/route.ts

@@ -0,0 +1,120 @@
+import { NextRequest } from "next/server";
+
+// Same-origin streaming proxy for huggingface.co. The native <video> element
+// can't carry an Authorization header, so we proxy through this route, which
+// pulls the user's HF access token from the HttpOnly `hf_access_token` cookie
+// (set by /api/auth/session after OAuth) and forwards Range requests upstream.
+//
+// Public datasets work too — the upstream simply ignores the bearer token.
+//
+// Allowed path prefixes are constrained so this can't be turned into an open
+// proxy for arbitrary huggingface.co URLs (e.g. user profile, billing pages).
+
+const HF_HOST = "https://huggingface.co";
+const COOKIE_NAME = "hf_access_token";
+const ALLOWED_PREFIXES = ["datasets/", "buckets/"];
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const FORWARD_REQUEST_HEADERS = [
+  "range",
+  "if-modified-since",
+  "if-none-match",
+  "accept",
+  "accept-encoding",
+];
+
+const FORWARD_RESPONSE_HEADERS = [
+  "content-type",
+  "content-length",
+  "content-range",
+  "accept-ranges",
+  "etag",
+  "last-modified",
+  "cache-control",
+];
+
+export async function GET(
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) {
+  const { path } = await ctx.params;
+  const subPath = path.join("/");
+
+  if (!ALLOWED_PREFIXES.some((p) => subPath.startsWith(p))) {
+    return new Response("Forbidden", { status: 403 });
+  }
+
+  const upstreamUrl = new URL(`${HF_HOST}/${subPath}`);
+  for (const [k, v] of req.nextUrl.searchParams) {
+    upstreamUrl.searchParams.set(k, v);
+  }
+
+  const headers = new Headers();
+  const token = req.cookies.get(COOKIE_NAME)?.value;
+  if (token) headers.set("authorization", `Bearer ${token}`);
+  for (const h of FORWARD_REQUEST_HEADERS) {
+    const v = req.headers.get(h);
+    if (v) headers.set(h, v);
+  }
+
+  const upstream = await fetch(upstreamUrl, {
+    method: "GET",
+    headers,
+    redirect: "follow",
+    cache: "no-store",
+  });
+
+  const respHeaders = new Headers();
+  for (const h of FORWARD_RESPONSE_HEADERS) {
+    const v = upstream.headers.get(h);
+    if (v) respHeaders.set(h, v);
+  }
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    statusText: upstream.statusText,
+    headers: respHeaders,
+  });
+}
+
+export async function HEAD(
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) {
+  const { path } = await ctx.params;
+  const subPath = path.join("/");
+
+  if (!ALLOWED_PREFIXES.some((p) => subPath.startsWith(p))) {
+    return new Response(null, { status: 403 });
+  }
+
+  const upstreamUrl = new URL(`${HF_HOST}/${subPath}`);
+  for (const [k, v] of req.nextUrl.searchParams) {
+    upstreamUrl.searchParams.set(k, v);
+  }
+
+  const headers = new Headers();
+  const token = req.cookies.get(COOKIE_NAME)?.value;
+  if (token) headers.set("authorization", `Bearer ${token}`);
+
+  const upstream = await fetch(upstreamUrl, {
+    method: "HEAD",
+    headers,
+    redirect: "follow",
+    cache: "no-store",
+  });
+
+  const respHeaders = new Headers();
+  for (const h of FORWARD_RESPONSE_HEADERS) {
+    const v = upstream.headers.get(h);
+    if (v) respHeaders.set(h, v);
+  }
+
+  return new Response(null, {
+    status: upstream.status,
+    statusText: upstream.statusText,
+    headers: respHeaders,
+  });
+}

src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { AuthProvider } from "@/context/auth-context";
+import HfAuthButton from "@/components/hf-auth-button";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +18,14 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <AuthProvider>
+          <div className="fixed top-3 right-3 z-50">
+            <HfAuthButton />
+          </div>
+          {children}
+        </AuthProvider>
+      </body>
     </html>
   );
 }

src/components/hf-auth-button.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@/context/auth-context";
+
+const SIGNIN_BADGE_URL =
+  "https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-md-dark.svg";
+
+export default function HfAuthButton() {
+  const { oauth, isAuthAvailable, signIn, signOut } = useAuth();
+
+  if (!isAuthAvailable) return null;
+
+  if (oauth) {
+    const name =
+      oauth.userInfo?.preferred_username ?? oauth.userInfo?.name ?? "signed in";
+    const avatar = oauth.userInfo?.picture;
+    return (
+      <div className="flex items-center gap-2 panel-raised bg-[var(--surface-0)]/85 backdrop-blur px-2 py-1 text-xs text-slate-300">
+        {avatar && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={avatar}
+            alt=""
+            width={18}
+            height={18}
+            className="rounded-full"
+          />
+        )}
+        <span className="tabular max-w-[10rem] truncate">{name}</span>
+        <button
+          onClick={signOut}
+          className="rounded-md px-2 py-0.5 text-[10px] uppercase tracking-wide text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-colors"
+          title="Sign out of Hugging Face"
+        >
+          Sign out
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={signIn}
+      title="Sign in to access your private datasets"
+      className="flex items-center gap-2 rounded-md transition-opacity hover:opacity-90"
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={SIGNIN_BADGE_URL}
+        alt="Sign in with Hugging Face"
+        height={32}
+        className="h-8 w-auto"
+      />
+      <span className="text-xs text-slate-300">to access private datasets</span>
+    </button>
+  );
+}

src/components/simple-videos-player.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useCallback } from "react";
 import { useTime } from "../context/time-context";
 import { FaExpand, FaCompress, FaTimes, FaEye } from "react-icons/fa";
 import type { VideoInfo } from "@/types";
+import { proxyHfUrl } from "@/utils/auth";
 
 const THRESHOLDS = {
   VIDEO_SYNC_TOLERANCE: 0.2,
@@ -316,7 +317,7 @@ export const SimpleVideosPlayer = ({
                   isFirstVisible ? makeTimeUpdateHandler(idx) : undefined
                 }
               >
-                <source src={info.url} type="video/mp4" />
+                <source src={proxyHfUrl(info.url)} type="video/mp4" />
                 Your browser does not support the video tag.
               </video>
             </div>

src/context/auth-context.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
+import {
+  oauthLoginUrl,
+  oauthHandleRedirectIfPresent,
+  type OAuthResult,
+} from "@huggingface/hub";
+import { AUTH_STORAGE_KEY } from "@/utils/auth";
+
+interface HfSpaceVariables {
+  OAUTH_CLIENT_ID?: string;
+  OAUTH_SCOPES?: string;
+}
+
+interface HfWindow extends Window {
+  huggingface?: { variables?: HfSpaceVariables };
+}
+
+interface AuthContextValue {
+  oauth: OAuthResult | null;
+  // Whether OAuth is configured for this deployment (i.e. running on an HF
+  // Space with hf_oauth enabled). When false, the button hides itself.
+  isAuthAvailable: boolean;
+  signIn: () => Promise<void>;
+  signOut: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue>({
+  oauth: null,
+  isAuthAvailable: false,
+  signIn: async () => {},
+  signOut: () => {},
+});
+
+// Mirror the access token into an HttpOnly cookie so the same-origin
+// /api/proxy route can attach it to <video> requests, which can't carry an
+// Authorization header from JS.
+async function setSessionCookie(accessToken: string): Promise<void> {
+  try {
+    await fetch("/api/auth/session", {
+      method: "POST",
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+  } catch (err) {
+    console.error("Failed to set session cookie", err);
+  }
+}
+
+async function clearSessionCookie(): Promise<void> {
+  try {
+    await fetch("/api/auth/session", { method: "DELETE" });
+  } catch (err) {
+    console.error("Failed to clear session cookie", err);
+  }
+}
+
+function isExpired(result: OAuthResult): boolean {
+  const exp = result.accessTokenExpiresAt;
+  if (!exp) return false;
+  const expDate = exp instanceof Date ? exp : new Date(exp);
+  return expDate.getTime() <= Date.now();
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [oauth, setOauth] = useState<OAuthResult | null>(null);
+  const [isAuthAvailable, setIsAuthAvailable] = useState(false);
+
+  useEffect(() => {
+    const w = window as HfWindow;
+    const available = !!w.huggingface?.variables?.OAUTH_CLIENT_ID;
+    setIsAuthAvailable(available);
+    if (!available) return;
+
+    const stored = window.localStorage.getItem(AUTH_STORAGE_KEY);
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored) as OAuthResult;
+        if (isExpired(parsed)) {
+          window.localStorage.removeItem(AUTH_STORAGE_KEY);
+          clearSessionCookie();
+        } else {
+          setOauth(parsed);
+          setSessionCookie(parsed.accessToken);
+          return;
+        }
+      } catch {
+        window.localStorage.removeItem(AUTH_STORAGE_KEY);
+      }
+    }
+
+    oauthHandleRedirectIfPresent()
+      .then((result) => {
+        if (result) {
+          window.localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(result));
+          setOauth(result);
+          setSessionCookie(result.accessToken);
+        }
+      })
+      .catch((err) => {
+        console.error("OAuth redirect handling failed", err);
+      });
+  }, []);
+
+  const signIn = useCallback(async () => {
+    const w = window as HfWindow;
+    const scopes = w.huggingface?.variables?.OAUTH_SCOPES;
+    const url = await oauthLoginUrl(scopes ? { scopes } : {});
+    window.location.href = url + "&prompt=consent";
+  }, []);
+
+  const signOut = useCallback(() => {
+    window.localStorage.removeItem(AUTH_STORAGE_KEY);
+    setOauth(null);
+    clearSessionCookie();
+    // Strip ?code=... left in the URL by the OAuth redirect, if any.
+    const cleanUrl = window.location.href.replace(/\?.*$/, "");
+    if (cleanUrl !== window.location.href) {
+      window.history.replaceState(null, "", cleanUrl);
+    }
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ oauth, isAuthAvailable, signIn, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

src/utils/auth.ts

@@ -0,0 +1,42 @@
+// Client-side helpers for the HF OAuth flow. The token is owned by
+// AuthProvider (src/context/auth-context.tsx); these read-only helpers exist
+// so non-React fetch utilities can attach `Authorization: Bearer <token>`
+// without going through React.
+
+const STORAGE_KEY = "lerobot-viz-oauth";
+
+export function getAuthToken(): string | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (!stored) return null;
+    const parsed = JSON.parse(stored) as { accessToken?: string };
+    return parsed.accessToken ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function authHeaders(): Record<string, string> {
+  const token = getAuthToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+export const AUTH_STORAGE_KEY = STORAGE_KEY;
+
+// Native <video> elements can't carry an Authorization header. To play videos
+// from private datasets, we route them through our same-origin /api/proxy
+// endpoint, which reads the access token from an HttpOnly cookie set during
+// sign-in and forwards the request to huggingface.co. Returns the original
+// URL when running server-side or when the user is not signed in.
+export function proxyHfUrl(url: string): string {
+  if (typeof window === "undefined") return url;
+  if (!getAuthToken()) return url;
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname !== "huggingface.co") return url;
+    return `/api/proxy${parsed.pathname}${parsed.search}`;
+  } catch {
+    return url;
+  }
+}

src/utils/parquetUtils.ts

@@ -5,6 +5,7 @@ import {
   parquetReadObjects,
   type AsyncBuffer,
 } from "hyparquet";
+import { authHeaders } from "./auth";
 
 export interface DatasetMetadata {
   codebase_version: string;
@@ -31,7 +32,10 @@ export interface DatasetMetadata {
 }
 
 export async function fetchJson<T>(url: string): Promise<T> {
-  const res = await fetch(url, { cache: "no-store" });
+  const res = await fetch(url, {
+    cache: "no-store",
+    headers: authHeaders(),
+  });
   if (!res.ok) {
     throw new Error(
       `Failed to fetch JSON ${url}: ${res.status} ${res.statusText}`,
@@ -58,7 +62,7 @@ export async function fetchParquetFile(url: string): Promise<ParquetFile> {
 
   const file = await asyncBufferFromUrl({
     url,
-    requestInit: { cache: "no-store" },
+    requestInit: { cache: "no-store", headers: authHeaders() },
   });
   const wrapped = cachedAsyncBuffer(file);
   parquetFileCache.set(url, wrapped);

src/utils/versionUtils.ts

@@ -2,6 +2,8 @@
  * Utility functions for checking dataset version compatibility
  */
 
+import { authHeaders } from "./auth";
+
 const DATASET_URL =
   process.env.DATASET_URL || "https://huggingface.co/datasets";
 
@@ -82,6 +84,7 @@ export async function getDatasetInfo(repoId: string): Promise<DatasetInfo> {
       method: "GET",
       cache: "no-store",
       signal: controller.signal,
+      headers: authHeaders(),
     });
 
     clearTimeout(timeoutId);