Sync from GitHub via hub-sync

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

@@ -138,9 +138,16 @@ function EpisodeViewerInner({
 
   const [videosReady, setVideosReady] = useState(!videosInfo.length);
   const [chartsReady, setChartsReady] = useState(false);
-  const isLoading = !videosReady || !chartsReady;
 
   const loadStartRef = useRef(performance.now());
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Tab state & lazy stats
+  const [activeTab, setActiveTab] = useState<ActiveTab>("episodes");
+  const isLoading = activeTab === "episodes" && (!videosReady || !chartsReady);
+
   useEffect(() => {
     if (!isLoading) {
       console.log(
@@ -148,12 +155,6 @@ function EpisodeViewerInner({
       );
     }
   }, [isLoading, videosReady, chartsReady]);
-
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  // Tab state & lazy stats
-  const [activeTab, setActiveTab] = useState<ActiveTab>("episodes");
   const [, setColumnMinMax] = useState<ColumnMinMax[] | null>(null);
   const [episodeLengthStats, setEpisodeLengthStats] =
     useState<EpisodeLengthStats | null>(null);
@@ -321,6 +322,11 @@ function EpisodeViewerInner({
   // Use context for time sync
   const { currentTime, setCurrentTime, setIsPlaying, isPlaying } = useTime();
 
+  // URDFViewer episode changer — populated by URDFViewer on mount
+  const urdfChangerRef = useRef<((ep: number) => void) | undefined>(undefined);
+  const [urdfEpisode, setUrdfEpisode] = useState(episodeId);
+  useEffect(() => setUrdfEpisode(episodeId), [episodeId]);
+
   // Pagination state
   const pageSize = 100;
   const [currentPage, setCurrentPage] = useState(1);
@@ -536,18 +542,26 @@ function EpisodeViewerInner({
 
       {/* Body: sidebar + content */}
       <div className="flex flex-1 min-h-0">
-        {/* Sidebar — only on Episodes tab */}
-        {activeTab === "episodes" && (
+        {/* Sidebar — on Episodes and 3D Replay tabs */}
+        {(activeTab === "episodes" || activeTab === "urdf") && (
           <Sidebar
             datasetInfo={datasetInfo}
             paginatedEpisodes={paginatedEpisodes}
-            episodeId={episodeId}
+            episodeId={activeTab === "urdf" ? urdfEpisode : episodeId}
             totalPages={totalPages}
             currentPage={currentPage}
             prevPage={prevPage}
             nextPage={nextPage}
             showFlaggedOnly={sidebarFlaggedOnly}
             onShowFlaggedOnlyChange={setSidebarFlaggedOnly}
+            onEpisodeSelect={
+              activeTab === "urdf"
+                ? (ep) => {
+                    setUrdfEpisode(ep);
+                    urdfChangerRef.current?.(ep);
+                  }
+                : undefined
+            }
           />
         )}
 
@@ -675,7 +689,12 @@ function EpisodeViewerInner({
 
           {activeTab === "urdf" && (
             <Suspense fallback={<Loading />}>
-              <URDFViewer data={data} org={org} dataset={dataset} />
+              <URDFViewer
+                data={data}
+                org={org}
+                dataset={dataset}
+                episodeChangerRef={urdfChangerRef}
+              />
             </Suspense>
           )}
         </div>

src/components/side-nav.tsx

@@ -16,6 +16,7 @@ interface SidebarProps {
   nextPage: () => void;
   showFlaggedOnly: boolean;
   onShowFlaggedOnlyChange: (v: boolean) => void;
+  onEpisodeSelect?: (ep: number) => void;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -28,6 +29,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   nextPage,
   showFlaggedOnly,
   onShowFlaggedOnlyChange,
+  onEpisodeSelect,
 }) => {
   const [mobileVisible, setMobileVisible] = useState(false);
   const { flagged, count, toggle } = useFlaggedEpisodes();
@@ -74,12 +76,21 @@ const Sidebar: React.FC<SidebarProps> = ({
                 key={episode}
                 className="mt-0.5 font-mono text-sm flex items-center gap-1"
               >
-                <Link
-                  href={`./episode_${episode}`}
-                  className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}
-                >
-                  Episode {episode}
-                </Link>
+                {onEpisodeSelect ? (
+                  <button
+                    onClick={() => onEpisodeSelect(episode)}
+                    className={`underline text-left cursor-pointer ${episode === episodeId ? "-ml-1 font-bold text-orange-400" : ""}`}
+                  >
+                    Episode {episode}
+                  </button>
+                ) : (
+                  <Link
+                    href={`./episode_${episode}`}
+                    className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}
+                  >
+                    Episode {episode}
+                  </Link>
+                )}
                 <button
                   onClick={() => toggle(episode)}
                   className={`text-xs leading-none px-0.5 rounded transition-colors ${

src/components/urdf-viewer.tsx

@@ -445,12 +445,16 @@ export default function URDFViewer({
   data,
   org,
   dataset,
+  episodeChangerRef,
 }: {
   data: EpisodeData;
   org?: string;
   dataset?: string;
+  episodeChangerRef?: React.MutableRefObject<
+    ((ep: number) => void) | undefined
+  >;
 }) {
-  const { datasetInfo, episodes } = data;
+  const { datasetInfo } = data;
   const fps = datasetInfo.fps || 30;
   const robotConfig = useMemo(
     () => getRobotConfig(datasetInfo.robot_type),
@@ -515,6 +519,10 @@ export default function URDFViewer({
     [ensureDatasetInfo, repoId],
   );
 
+  useEffect(() => {
+    if (episodeChangerRef) episodeChangerRef.current = handleEpisodeChange;
+  }, [episodeChangerRef, handleEpisodeChange]);
+
   const totalFrames = chartData.length;
 
   // URDF joint names
@@ -711,43 +719,8 @@ export default function URDFViewer({
 
       {/* Controls */}
       <div className="bg-slate-800/90 border-t border-slate-700 p-3 space-y-3 shrink-0">
-        {/* Episode selector + Timeline */}
+        {/* Timeline */}
         <div className="flex items-center gap-3">
-          {/* Episode selector */}
-          <div className="flex items-center gap-1.5 shrink-0">
-            <button
-              onClick={() => {
-                if (selectedEpisode > episodes[0])
-                  handleEpisodeChange(selectedEpisode - 1);
-              }}
-              disabled={selectedEpisode <= episodes[0]}
-              className="w-6 h-6 flex items-center justify-center rounded bg-slate-700 hover:bg-slate-600 text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed text-xs"
-            >
-              ◀
-            </button>
-            <select
-              value={selectedEpisode}
-              onChange={(e) => handleEpisodeChange(Number(e.target.value))}
-              className="bg-slate-900 text-slate-200 text-xs rounded px-1.5 py-1 border border-slate-600 w-28"
-            >
-              {episodes.map((ep) => (
-                <option key={ep} value={ep}>
-                  Episode {ep}
-                </option>
-              ))}
-            </select>
-            <button
-              onClick={() => {
-                if (selectedEpisode < episodes[episodes.length - 1])
-                  handleEpisodeChange(selectedEpisode + 1);
-              }}
-              disabled={selectedEpisode >= episodes[episodes.length - 1]}
-              className="w-6 h-6 flex items-center justify-center rounded bg-slate-700 hover:bg-slate-600 text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed text-xs"
-            >
-              ▶
-            </button>
-          </div>
-
           {/* Play/Pause */}
           <button
             onClick={() => {