increase text size, remove unneeded stats

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

@@ -7,6 +7,7 @@ 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 { FlaggedEpisodesProvider } from "@/context/flagged-episodes-context";
 import Sidebar from "@/components/side-nav";
 import StatsPanel from "@/components/stats-panel";
 import OverviewPanel from "@/components/overview-panel";
@@ -25,8 +26,9 @@ import { fetchEpisodeLengthStats, fetchEpisodeFrames, fetchCrossEpisodeVariance
 
 const URDFViewer = lazy(() => import("@/components/urdf-viewer"));
 const ActionInsightsPanel = lazy(() => import("@/components/action-insights-panel"));
+const FilteringPanel = lazy(() => import("@/components/filtering-panel"));
 
-type ActiveTab = "episodes" | "statistics" | "frames" | "insights" | "urdf";
+type ActiveTab = "episodes" | "statistics" | "frames" | "insights" | "filtering" | "urdf";
 
 export default function EpisodeViewer({
   data,
@@ -51,7 +53,9 @@ export default function EpisodeViewer({
   }
   return (
     <TimeProvider duration={data!.duration}>
-      <EpisodeViewerInner data={data!} org={org} dataset={dataset} />
+      <FlaggedEpisodesProvider>
+        <EpisodeViewerInner data={data!} org={org} dataset={dataset} />
+      </FlaggedEpisodesProvider>
     </TimeProvider>
   );
 }
@@ -81,7 +85,15 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
   const searchParams = useSearchParams();
 
   // Tab state & lazy stats
-  const [activeTab, setActiveTab] = useState<ActiveTab>("episodes");
+  const [activeTab, setActiveTab] = useState<ActiveTab>(() => {
+    if (typeof window !== "undefined") {
+      const stored = sessionStorage.getItem("activeTab");
+      if (stored && ["episodes", "statistics", "frames", "insights", "filtering", "urdf"].includes(stored)) {
+        return stored as ActiveTab;
+      }
+    }
+    return "episodes";
+  });
   const [columnMinMax, setColumnMinMax] = useState<ColumnMinMax[] | null>(null);
   const [episodeLengthStats, setEpisodeLengthStats] = useState<EpisodeLengthStats | null>(null);
   const [statsLoading, setStatsLoading] = useState(false);
@@ -89,10 +101,23 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
   const [episodeFramesData, setEpisodeFramesData] = useState<EpisodeFramesData | null>(null);
   const [framesLoading, setFramesLoading] = useState(false);
   const framesLoadedRef = useRef(false);
+  const [framesFlaggedOnly, setFramesFlaggedOnly] = useState(() => {
+    if (typeof window !== "undefined") return sessionStorage.getItem("framesFlaggedOnly") === "true";
+    return false;
+  });
+  const [sidebarFlaggedOnly, setSidebarFlaggedOnly] = useState(() => {
+    if (typeof window !== "undefined") return sessionStorage.getItem("sidebarFlaggedOnly") === "true";
+    return false;
+  });
   const [crossEpData, setCrossEpData] = useState<CrossEpisodeVarianceData | null>(null);
   const [insightsLoading, setInsightsLoading] = useState(false);
   const insightsLoadedRef = useRef(false);
 
+  // Persist UI state across episode navigations
+  useEffect(() => { sessionStorage.setItem("activeTab", activeTab); }, [activeTab]);
+  useEffect(() => { sessionStorage.setItem("sidebarFlaggedOnly", String(sidebarFlaggedOnly)); }, [sidebarFlaggedOnly]);
+  useEffect(() => { sessionStorage.setItem("framesFlaggedOnly", String(framesFlaggedOnly)); }, [framesFlaggedOnly]);
+
   const loadStats = () => {
     if (statsLoadedRef.current) return;
     statsLoadedRef.current = true;
@@ -128,11 +153,21 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
       .finally(() => setInsightsLoading(false));
   };
 
+  // Re-trigger data loading for the restored tab on mount
+  useEffect(() => {
+    if (activeTab === "statistics") loadStats();
+    if (activeTab === "frames") loadFrames();
+    if (activeTab === "insights") loadInsights();
+    if (activeTab === "filtering") { loadStats(); loadInsights(); }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleTabChange = (tab: ActiveTab) => {
     setActiveTab(tab);
     if (tab === "statistics") loadStats();
     if (tab === "frames") loadFrames();
     if (tab === "insights") loadInsights();
+    if (tab === "filtering") { loadStats(); loadInsights(); }
   };
 
   // Use context for time sync
@@ -291,6 +326,19 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
             <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
           )}
         </button>
+        <button
+          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
+            activeTab === "filtering"
+              ? "text-orange-400"
+              : "text-slate-400 hover:text-slate-200"
+          }`}
+          onClick={() => handleTabChange("filtering")}
+        >
+          Filtering
+          {activeTab === "filtering" && (
+            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
+          )}
+        </button>
         <button
           className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
             activeTab === "frames"
@@ -346,6 +394,8 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
             currentPage={currentPage}
             prevPage={prevPage}
             nextPage={nextPage}
+            showFlaggedOnly={sidebarFlaggedOnly}
+            onShowFlaggedOnlyChange={setSidebarFlaggedOnly}
           />
         )}
 
@@ -431,7 +481,7 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
           )}
 
           {activeTab === "frames" && (
-            <OverviewPanel data={episodeFramesData} loading={framesLoading} />
+            <OverviewPanel data={episodeFramesData} loading={framesLoading} flaggedOnly={framesFlaggedOnly} onFlaggedOnlyChange={setFramesFlaggedOnly} />
           )}
 
           {activeTab === "insights" && (
@@ -445,6 +495,23 @@ function EpisodeViewerInner({ data, org, dataset }: { data: EpisodeData; org?: s
             </Suspense>
           )}
 
+          {activeTab === "filtering" && (
+            <Suspense fallback={<Loading />}>
+              <FilteringPanel
+                repoId={datasetInfo.repoId}
+                crossEpisodeData={crossEpData}
+                crossEpisodeLoading={insightsLoading}
+                episodeLengthStats={episodeLengthStats}
+                flatChartData={data.flatChartData}
+                fps={datasetInfo.fps || 30}
+                onViewFlaggedEpisodes={() => {
+                  setSidebarFlaggedOnly(true);
+                  handleTabChange("episodes");
+                }}
+              />
+            </Suspense>
+          )}
+
           {activeTab === "urdf" && (
             <Suspense fallback={<Loading />}>
               <URDFViewer data={data} org={org} dataset={dataset} />

src/app/globals.css

@@ -19,6 +19,11 @@
   }
 }
 
+html {
+  /* Scale all rem-based sizes (text, padding, buttons) up ~12% */
+  font-size: 18px;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);

src/components/action-insights-panel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useCallback, useEffect, useRef } from "react";
+import { useRouter, usePathname } from "next/navigation";
 import {
   LineChart,
   Line,
@@ -10,9 +11,98 @@ import {
   ResponsiveContainer,
   Tooltip,
 } from "recharts";
-import type { CrossEpisodeVarianceData, LowMovementEpisode, AggVelocityStat, AggAutocorrelation, SpeedDistEntry, JerkyEpisode, TrajectoryClustering, AggAlignment } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import type { CrossEpisodeVarianceData, AggVelocityStat, AggAutocorrelation, SpeedDistEntry, JerkyEpisode, TrajectoryClustering, AggAlignment } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
 
 const DELIMITER = " | ";
+
+const FullscreenCtx = React.createContext(false);
+const useIsFullscreen = () => React.useContext(FullscreenCtx);
+
+function InfoToggle({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(v => !v)} className="p-0.5 rounded-full text-slate-500 hover:text-slate-300 transition-colors shrink-0" title="Toggle description">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
+      </button>
+      {open && <div className="mt-1">{children}</div>}
+    </>
+  );
+}
+
+function FullscreenWrapper({ children }: { children: React.ReactNode }) {
+  const [fs, setFs] = useState(false);
+
+  useEffect(() => {
+    if (!fs) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setFs(false); };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [fs]);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setFs(v => !v)}
+        className="absolute top-3 right-3 z-10 p-1.5 rounded bg-slate-700/60 hover:bg-slate-600 text-slate-400 hover:text-slate-200 transition-colors backdrop-blur-sm"
+        title={fs ? "Exit fullscreen" : "Fullscreen"}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          {fs ? (
+            <><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></>
+          ) : (
+            <><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></>
+          )}
+        </svg>
+      </button>
+      {fs ? (
+        <div className="fixed inset-0 z-50 bg-slate-950/95 overflow-auto p-6">
+          <button
+            onClick={() => setFs(false)}
+            className="fixed top-4 right-4 z-50 p-2 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-300 hover:text-white transition-colors"
+            title="Exit fullscreen (Esc)"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/>
+            </svg>
+          </button>
+          <div className="max-w-7xl mx-auto"><FullscreenCtx.Provider value={true}>{children}</FullscreenCtx.Provider></div>
+        </div>
+      ) : children}
+    </div>
+  );
+}
+
+function FlagBtn({ id }: { id: number }) {
+  const { has, toggle } = useFlaggedEpisodes();
+  const flagged = has(id);
+  return (
+    <button onClick={() => toggle(id)} title={flagged ? "Unflag episode" : "Flag for review"}
+      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill={flagged ? "currentColor" : "none"}
+        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+      </svg>
+    </button>
+  );
+}
+
+function FlagAllBtn({ ids, label }: { ids: number[]; label?: string }) {
+  const { addMany } = useFlaggedEpisodes();
+  return (
+    <button onClick={() => addMany(ids)}
+      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+      </svg>
+      {label ?? "Flag all"}
+    </button>
+  );
+}
 const COLORS = [
   "#f97316", "#3b82f6", "#22c55e", "#ef4444", "#a855f7",
   "#eab308", "#06b6d4", "#ec4899", "#14b8a6", "#f59e0b",
@@ -60,6 +150,7 @@ function findDecorrelationLag(acf: number[], threshold = 0.5): number | null {
 }
 
 function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<string, number>[]; fps: number; agg?: AggAutocorrelation | null; numEpisodes?: number }) {
+  const isFs = useIsFullscreen();
   const actionKeys = useMemo(() => (data.length > 0 ? getActionKeys(data[0]) : []), [data]);
   const maxLag = useMemo(() => Math.min(Math.floor(data.length / 2), 100), [data]);
 
@@ -85,15 +176,29 @@ function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<
   }, [data, actionKeys, maxLag, fps, agg]);
 
   const { chartData, suggestedChunk, shortKeys } = agg ?? fallback ?? { chartData: [], suggestedChunk: null, shortKeys: [] };
-  const numEpisodesLabel = agg ? ` (${numEpisodes} episodes sampled)` : " (current episode)";
+  const isAgg = !!agg;
+  const numEpisodesLabel = isAgg ? ` (${numEpisodes} episodes sampled)` : " (current episode)";
+
+  const yDomain = useMemo(() => {
+    if (chartData.length === 0 || shortKeys.length === 0) return [-0.2, 1] as [number, number];
+    let min = Infinity;
+    for (const row of chartData) for (const k of shortKeys) {
+      const v = row[k];
+      if (typeof v === "number" && v < min) min = v;
+    }
+    const lo = Math.floor(Math.min(min, 0) * 10) / 10;
+    return [lo, 1] as [number, number];
+  }, [chartData, shortKeys]);
 
   if (shortKeys.length === 0) return <p className="text-slate-500 italic">No action columns found.</p>;
 
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
+        <div className="flex items-center gap-2">
         <h3 className="text-sm font-semibold text-slate-200">Action Autocorrelation<span className="text-xs text-slate-500 ml-2 font-normal">{numEpisodesLabel}</span></h3>
-        <p className="text-xs text-slate-400 mt-1">
+          <InfoToggle>
+            <p className="text-xs text-slate-400">
           Shows how correlated each action dimension is with itself over increasing time lags.
           Where autocorrelation drops below 0.5 suggests a <span className="text-orange-400 font-medium">natural action chunk boundary</span> — actions
           beyond this lag are essentially independent, so executing them open-loop offers diminishing returns.
@@ -103,6 +208,8 @@ function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<
             (Zhang et al., 2025 — arXiv:2507.09061, Theorem 1).
           </span>
         </p>
+          </InfoToggle>
+        </div>
       </div>
 
       {suggestedChunk && (
@@ -117,16 +224,16 @@ function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<
         </div>
       )}
 
-      <div className="h-64">
+      <div className={isFs ? "h-[500px]" : "h-64"}>
         <ResponsiveContainer width="100%" height="100%">
-          <LineChart data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 16 }}>
+          <LineChart key={isAgg ? "agg" : "ep"} data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 16 }}>
             <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
             <XAxis
               dataKey="lag"
               stroke="#94a3b8"
-              label={{ value: "Lag (steps)", position: "insideBottom", offset: -8, fill: "#94a3b8", fontSize: 11 }}
+              label={{ value: "Lag (steps)", position: "insideBottom", offset: -8, fill: "#94a3b8", fontSize: 13 }}
             />
-            <YAxis stroke="#94a3b8" domain={[-0.2, 1]} />
+            <YAxis stroke="#94a3b8" domain={yDomain} />
             <Tooltip
               contentStyle={{ background: "#1e293b", border: "1px solid #475569", borderRadius: 6 }}
               labelFormatter={(v) => `Lag ${v} (${(Number(v) / fps).toFixed(2)}s)`}
@@ -161,7 +268,7 @@ function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<
         {shortKeys.map((name, i) => (
           <div key={name} className="flex items-center gap-1.5">
             <span className="w-3 h-[3px] rounded-full shrink-0" style={{ background: COLORS[i % COLORS.length] }} />
-            <span className="text-[11px] text-slate-400">{name}</span>
+            <span className="text-xs text-slate-400">{name}</span>
           </div>
         ))}
       </div>
@@ -244,8 +351,10 @@ function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
+        <div className="flex items-center gap-2">
         <h3 className="text-sm font-semibold text-slate-200">Action Velocity (Δa) — Smoothness Proxy<span className="text-xs text-slate-500 ml-2 font-normal">{isAgg ? `(${numEpisodes} episodes sampled)` : "(current episode)"}</span></h3>
-        <p className="text-xs text-slate-400 mt-1">
+          <InfoToggle>
+            <p className="text-xs text-slate-400">
           Shows the distribution of frame-to-frame action changes (Δa = a<sub>t+1</sub> − a<sub>t</sub>) for each dimension.
           A <span className="text-green-400">tight distribution around zero</span> means smooth, predictable control — the system
           is likely stable and benefits from longer action chunks.
@@ -257,6 +366,8 @@ function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data
             compounding error bounds (Assumptions 3.1, 4.1).
           </span>
         </p>
+          </InfoToggle>
+        </div>
       </div>
 
       {/* Per-dimension mini histograms + stats */}
@@ -265,8 +376,8 @@ function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data
           const barH = 28;
           return (
             <div key={s.name} className="bg-slate-900/50 rounded-md px-2.5 py-2 space-y-1">
-              <p className="text-[11px] font-medium text-slate-200 truncate" title={s.name}>{s.name}</p>
-              <div className="flex gap-2 text-[9px] text-slate-400 tabular-nums">
+              <p className="text-xs font-medium text-slate-200 truncate" title={s.name}>{s.name}</p>
+              <div className="flex gap-2 text-xs text-slate-400 tabular-nums">
                 <span>σ={s.std.toFixed(4)}</span>
                 <span>|Δ|<sub>max</sub>={s.maxAbs.toFixed(4)}</span>
               </div>
@@ -315,16 +426,20 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
         <p className="text-sm font-medium text-slate-200">
           Most Jerky Episodes <span className="text-xs text-slate-500 font-normal">sorted by mean |Δa|</span>
         </p>
-        {episodes.length > 15 && (
-          <button onClick={() => setShowAll(v => !v)} className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
-            {showAll ? "Show top 15" : `Show all ${episodes.length}`}
-          </button>
-        )}
+        <div className="flex items-center gap-3">
+          <FlagAllBtn ids={display.map(e => e.episodeIndex)} />
+          {episodes.length > 15 && (
+            <button onClick={() => setShowAll(v => !v)} className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
+              {showAll ? "Show top 15" : `Show all ${episodes.length}`}
+            </button>
+          )}
+        </div>
       </div>
       <div className="max-h-48 overflow-y-auto">
         <table className="w-full text-xs">
           <thead>
             <tr className="text-slate-500 border-b border-slate-700">
+              <th className="w-5 py-1" />
               <th className="text-left py-1 pr-3">Episode</th>
               <th className="text-right py-1">Mean |Δa|</th>
             </tr>
@@ -332,6 +447,7 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
           <tbody>
             {display.map(e => (
               <tr key={e.episodeIndex} className="border-b border-slate-800/40 text-slate-300">
+                <td className="py-1"><FlagBtn id={e.episodeIndex} /></td>
                 <td className="py-1 pr-3">ep {e.episodeIndex}</td>
                 <td className="py-1 text-right tabular-nums">{e.meanAbsDelta.toFixed(4)}</td>
               </tr>
@@ -370,19 +486,20 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
     );
   }
 
+  const isFs = useIsFullscreen();
   const { actionNames, timeBins, variance, numEpisodes } = data;
   const numDims = actionNames.length;
   const numBins = timeBins.length;
 
-  // Find global max variance for color scale
   const maxVar = Math.max(...variance.flat(), 1e-10);
 
-  // Heatmap dimensions
-  const cellW = Math.max(6, Math.min(14, Math.floor(560 / numBins)));
-  const cellH = Math.max(20, Math.min(36, Math.floor(300 / numDims)));
+  const baseW = isFs ? 1000 : 560;
+  const baseH = isFs ? 500 : 300;
+  const cellW = Math.max(6, Math.min(isFs ? 24 : 14, Math.floor(baseW / numBins)));
+  const cellH = Math.max(20, Math.min(isFs ? 56 : 36, Math.floor(baseH / numDims)));
   const labelW = 100;
-  const svgW = labelW + numBins * cellW + 60; // 60 for color bar
-  const svgH = numDims * cellH + 40; // 40 for x-axis label
+  const svgW = labelW + numBins * cellW + 60;
+  const svgH = numDims * cellH + 40;
 
   function varColor(v: number): string {
     const t = Math.sqrt(v / maxVar); // sqrt for better visual spread
@@ -396,11 +513,13 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
+        <div className="flex items-center gap-2">
         <h3 className="text-sm font-semibold text-slate-200">
           Cross-Episode Action Variance
           <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes sampled)</span>
         </h3>
-        <p className="text-xs text-slate-400 mt-1">
+          <InfoToggle>
+            <p className="text-xs text-slate-400">
           Shows how much each action dimension varies across episodes at each point in time (normalized 0–100%).
           <span className="text-orange-400"> High-variance regions</span> indicate multi-modal or inconsistent demonstrations —
           generative policies (diffusion, flow-matching) and action chunking help here by modeling multiple modes.
@@ -411,6 +530,8 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
             exploratory coverage needed to prevent compounding errors (Section 4).
           </span>
         </p>
+          </InfoToggle>
+        </div>
       </div>
 
       <div className="overflow-x-auto">
@@ -514,48 +635,10 @@ function VarianceHeatmap({ data, loading }: { data: CrossEpisodeVarianceData | n
   );
 }
 
-// ─── Low-Movement Episodes ──────────────────────────────────────
-
-function LowMovementSection({ episodes }: { episodes: LowMovementEpisode[] }) {
-  if (episodes.length === 0) return null;
-
-  const maxMovement = Math.max(...episodes.map(e => e.totalMovement), 1e-10);
-
-  return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-3">
-      <div>
-        <h3 className="text-sm font-semibold text-slate-200">Lowest-Movement Episodes</h3>
-        <p className="text-xs text-slate-400 mt-1">
-          Episodes with the lowest average action change per frame (mean ‖Δa<sub>t</sub>‖). Very low values may indicate the robot
-          was <span className="text-yellow-400">standing still</span> or the episode was recorded incorrectly.
-        </p>
-      </div>
-      <div className="grid gap-2" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
-        {episodes.map(ep => (
-          <div key={ep.episodeIndex} className="bg-slate-900/50 rounded-md px-3 py-2 flex items-center gap-3">
-            <span className="text-xs text-slate-300 font-medium shrink-0">ep {ep.episodeIndex}</span>
-            <div className="flex-1 min-w-0">
-              <div className="h-1.5 bg-slate-700 rounded-full overflow-hidden">
-                <div
-                  className="h-full rounded-full"
-                  style={{
-                    width: `${Math.max(2, (ep.totalMovement / maxMovement) * 100)}%`,
-                    background: ep.totalMovement / maxMovement < 0.15 ? "#ef4444" : ep.totalMovement / maxMovement < 0.4 ? "#eab308" : "#22c55e",
-                  }}
-                />
-              </div>
-            </div>
-            <span className="text-[10px] text-slate-500 tabular-nums shrink-0">{ep.totalMovement.toFixed(2)}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 // ─── Demonstrator Speed Variance ────────────────────────────────
 
 function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: SpeedDistEntry[]; numEpisodes: number }) {
+  const isFs = useIsFullscreen();
   const { speeds, mean, std, cv, median, bins, lo, binW, maxBin, verdict } = useMemo(() => {
     const sp = distribution.map(d => d.speed).sort((a, b) => a - b);
     const m = sp.reduce((a, b) => a + b, 0) / sp.length;
@@ -579,27 +662,31 @@ function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: Spe
 
   if (speeds.length < 3) return null;
 
-  const barH = 100;
-  const barW = Math.max(8, Math.floor(500 / bins.length));
+  const barH = isFs ? 250 : 100;
+  const barW = Math.max(8, Math.floor((isFs ? 900 : 500) / bins.length));
 
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
-        <h3 className="text-sm font-semibold text-slate-200">
-          Demonstrator Speed Variance
-          <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes)</span>
-        </h3>
-        <p className="text-xs text-slate-400 mt-1">
-          Distribution of average execution speed (mean ‖Δa<sub>t</sub>‖ per frame) across all episodes.
-          Different human demonstrators often execute at <span className="text-orange-400">different speeds</span>, creating
-          artificial multimodality in the action distribution that confuses the policy. A coefficient of variation (CV) above 0.3
-          strongly suggests normalizing trajectory speed before training.
-          <br />
-          <span className="text-slate-500">
-            Based on &quot;Is Diversity All You Need&quot; (AGI-Bot, 2025) which shows velocity normalization dramatically improves
-            fine-tuning success rate. Also relates to ACT (Zhao et al., 2023) and Pi0.5 (Physical Intelligence, 2025).
-          </span>
-        </p>
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-slate-200">
+            Demonstrator Speed Variance
+            <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes)</span>
+          </h3>
+          <InfoToggle>
+            <p className="text-xs text-slate-400">
+              Distribution of average execution speed (mean ‖Δa<sub>t</sub>‖ per frame) across all episodes.
+              Different human demonstrators often execute at <span className="text-orange-400">different speeds</span>, creating
+              artificial multimodality in the action distribution that confuses the policy. A coefficient of variation (CV) above 0.3
+              strongly suggests normalizing trajectory speed before training.
+              <br />
+              <span className="text-slate-500">
+                Based on &quot;Is Diversity All You Need&quot; (AGI-Bot, 2025) which shows velocity normalization dramatically improves
+                fine-tuning success rate. Also relates to ACT (Zhao et al., 2023) and Pi0.5 (Physical Intelligence, 2025).
+              </span>
+            </p>
+          </InfoToggle>
+      </div>
       </div>
 
       <div className="flex gap-4">
@@ -651,6 +738,7 @@ function SpeedVarianceSection({ distribution, numEpisodes }: { distribution: Spe
 // ─── State–Action Temporal Alignment ────────────────────────────
 
 function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Record<string, number>[]; fps: number; agg?: AggAlignment | null; numEpisodes?: number }) {
+  const isFs = useIsFullscreen();
   const result = useMemo(() => {
     if (agg) return { ...agg, fromAgg: true };
     if (data.length < 10) return null;
@@ -739,23 +827,27 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
-        <h3 className="text-sm font-semibold text-slate-200">
-          State–Action Temporal Alignment
-          <span className="text-xs text-slate-500 ml-2 font-normal">({scopeLabel}, {numPairs} matched pair{numPairs !== 1 ? "s" : ""})</span>
-        </h3>
-        <p className="text-xs text-slate-400 mt-1">
-          Per-dimension cross-correlation between action<sub>d</sub>(t) and Δstate<sub>d</sub>(t+lag), aggregated as
-          <span className="text-orange-400"> max</span>, <span className="text-slate-200">mean</span>, and
-          <span className="text-blue-400"> min</span> across all matched action–state pairs.
-          The <span className="text-orange-400">peak lag</span> reveals the effective control delay — the time between
-          when an action is commanded and when the corresponding state changes.
-          <br />
-          <span className="text-slate-500">
-            Central to ACT (Zhao et al., 2023 — action chunking compensates for delay),
-            Real-Time Chunking (RTC, 2024), and Training-Time RTC (Biza et al., 2025) — all address
-            the timing mismatch between commanded actions and observed state changes.
-          </span>
-        </p>
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-slate-200">
+            State–Action Temporal Alignment
+            <span className="text-xs text-slate-500 ml-2 font-normal">({scopeLabel}, {numPairs} matched pair{numPairs !== 1 ? "s" : ""})</span>
+          </h3>
+          <InfoToggle>
+            <p className="text-xs text-slate-400">
+              Per-dimension cross-correlation between action<sub>d</sub>(t) and Δstate<sub>d</sub>(t+lag), aggregated as
+              <span className="text-orange-400"> max</span>, <span className="text-slate-200">mean</span>, and
+              <span className="text-blue-400"> min</span> across all matched action–state pairs.
+              The <span className="text-orange-400">peak lag</span> reveals the effective control delay — the time between
+              when an action is commanded and when the corresponding state changes.
+              <br />
+              <span className="text-slate-500">
+                Central to ACT (Zhao et al., 2023 — action chunking compensates for delay),
+                Real-Time Chunking (RTC, 2024), and Training-Time RTC (Biza et al., 2025) — all address
+                the timing mismatch between commanded actions and observed state changes.
+              </span>
+            </p>
+          </InfoToggle>
+        </div>
       </div>
 
       {meanPeakLag !== 0 && (
@@ -775,12 +867,12 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
         </div>
       )}
 
-      <div className="h-56">
+      <div className={isFs ? "h-[500px]" : "h-56"}>
         <ResponsiveContainer width="100%" height="100%">
           <LineChart data={ccData} margin={{ top: 8, right: 16, left: 0, bottom: 16 }}>
             <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
             <XAxis dataKey="lag" stroke="#94a3b8"
-              label={{ value: "Lag (steps)", position: "insideBottom", offset: -8, fill: "#94a3b8", fontSize: 11 }} />
+              label={{ value: "Lag (steps)", position: "insideBottom", offset: -8, fill: "#94a3b8", fontSize: 13 }} />
             <YAxis stroke="#94a3b8" domain={[-0.5, 1]} />
             <Tooltip
               contentStyle={{ background: "#1e293b", border: "1px solid #475569", borderRadius: 6 }}
@@ -793,20 +885,20 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
             <Line dataKey={() => 0} stroke="#64748b" strokeDasharray="6 4" dot={false} name="zero" legendType="none" isAnimationActive={false} />
           </LineChart>
         </ResponsiveContainer>
-      </div>
+              </div>
 
       <div className="flex flex-wrap gap-x-4 gap-y-1 px-1">
         <div className="flex items-center gap-1.5">
           <span className="w-3 h-[3px] rounded-full shrink-0 bg-orange-500" />
-          <span className="text-[11px] text-slate-400">max (peak: lag {maxPeakLag}, r={maxPeakCorr.toFixed(3)})</span>
-        </div>
+          <span className="text-xs text-slate-400">max (peak: lag {maxPeakLag}, r={maxPeakCorr.toFixed(3)})</span>
+            </div>
         <div className="flex items-center gap-1.5">
           <span className="w-3 h-[3px] rounded-full shrink-0 bg-slate-400" />
-          <span className="text-[11px] text-slate-400">mean (peak: lag {meanPeakLag}, r={meanPeakCorr.toFixed(3)})</span>
-        </div>
+          <span className="text-xs text-slate-400">mean (peak: lag {meanPeakLag}, r={meanPeakCorr.toFixed(3)})</span>
+          </div>
         <div className="flex items-center gap-1.5">
           <span className="w-3 h-[3px] rounded-full shrink-0 bg-blue-500" />
-          <span className="text-[11px] text-slate-400">min (peak: lag {minPeakLag}, r={minPeakCorr.toFixed(3)})</span>
+          <span className="text-xs text-slate-400">min (peak: lag {minPeakLag}, r={minPeakCorr.toFixed(3)})</span>
         </div>
       </div>
 
@@ -824,6 +916,7 @@ function StateActionAlignmentSection({ data, fps, agg, numEpisodes }: { data: Re
 const BC_THRESHOLD = 5 / 9;
 
 function MultimodalitySection({ data }: { data: CrossEpisodeVarianceData }) {
+  const isFs = useIsFullscreen();
   const { actionNames, timeBins, multimodality, numEpisodes } = data;
   if (!multimodality || multimodality.length === 0) return null;
 
@@ -843,8 +936,10 @@ function MultimodalitySection({ data }: { data: CrossEpisodeVarianceData }) {
     return { bimodalPct: pct, verdict: v };
   }, [multimodality]);
 
-  const cellW = Math.max(6, Math.min(14, Math.floor(560 / numBins)));
-  const cellH = Math.max(20, Math.min(36, Math.floor(300 / numDims)));
+  const mBaseW = isFs ? 1000 : 560;
+  const mBaseH = isFs ? 500 : 300;
+  const cellW = Math.max(6, Math.min(isFs ? 24 : 14, Math.floor(mBaseW / numBins)));
+  const cellH = Math.max(20, Math.min(isFs ? 56 : 36, Math.floor(mBaseH / numDims)));
   const labelW = 100;
   const svgW = labelW + numBins * cellW + 60;
   const svgH = numDims * cellH + 40;
@@ -861,22 +956,26 @@ function MultimodalitySection({ data }: { data: CrossEpisodeVarianceData }) {
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
-        <h3 className="text-sm font-semibold text-slate-200">
-          Multimodality Detection
-          <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes sampled)</span>
-        </h3>
-        <p className="text-xs text-slate-400 mt-1">
-          Bimodality coefficient (BC) per action dimension over episode progress.
-          BC values above <span className="text-red-400">5/9 ≈ 0.556</span> suggest the action distribution at that point is bimodal —
-          meaning demonstrators use <span className="text-red-400">multiple distinct strategies</span>. This directly answers:
-          &quot;Do I need a generative policy (diffusion, flow-matching) or would MSE regression work?&quot;
-          <br />
-          <span className="text-slate-500">
-            Grounded in Diffusion Policy (Chi et al., 2023 — diffusion handles multimodality natively),
-            ACT (Zhao et al., 2023 — CVAE captures multiple modes). Extends the cross-episode variance heatmap above
-            by distinguishing true multimodality from mere noise.
-          </span>
-        </p>
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-slate-200">
+            Multimodality Detection
+            <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes sampled)</span>
+          </h3>
+          <InfoToggle>
+            <p className="text-xs text-slate-400">
+              Bimodality coefficient (BC) per action dimension over episode progress.
+              BC values above <span className="text-red-400">5/9 ≈ 0.556</span> suggest the action distribution at that point is bimodal —
+              meaning demonstrators use <span className="text-red-400">multiple distinct strategies</span>. This directly answers:
+              &quot;Do I need a generative policy (diffusion, flow-matching) or would MSE regression work?&quot;
+              <br />
+              <span className="text-slate-500">
+                Grounded in Diffusion Policy (Chi et al., 2023 — diffusion handles multimodality natively),
+                ACT (Zhao et al., 2023 — CVAE captures multiple modes). Extends the cross-episode variance heatmap above
+                by distinguishing true multimodality from mere noise.
+              </span>
+            </p>
+          </InfoToggle>
+        </div>
       </div>
 
       <div className="overflow-x-auto">
@@ -936,17 +1035,23 @@ const CLUSTER_COLORS = ["#f97316", "#3b82f6", "#22c55e", "#a855f7", "#eab308"];
 
 function TrajectoryClusteringSection({ data, numEpisodes }: { data: TrajectoryClustering; numEpisodes: number }) {
   const { entries, numClusters, clusterSizes, outlierCount } = data;
+  const isFs = useIsFullscreen();
+  const router = useRouter();
+  const pathname = usePathname();
 
   const [showAll, setShowAll] = useState(false);
+  const [showLabels, setShowLabels] = useState(false);
+  const [hoveredEp, setHoveredEp] = useState<number | null>(null);
   const [rotX, setRotX] = useState(-0.4);
   const [rotY, setRotY] = useState(0.6);
   const dragRef = React.useRef<{ x: number; y: number; rx: number; ry: number } | null>(null);
+  const didDrag = useRef(false);
 
   const sorted = useMemo(() =>
     [...entries].sort((a, b) => b.distFromCenter - a.distFromCenter),
   [entries]);
 
-  const plotW = 500, plotH = 400;
+  const plotW = isFs ? 900 : 500, plotH = isFs ? 700 : 400;
   const cx = plotW / 2, cy = plotH / 2;
   const scale = Math.min(plotW, plotH) * 0.35;
 
@@ -984,14 +1089,23 @@ function TrajectoryClusteringSection({ data, numEpisodes }: { data: TrajectoryCl
 
   const onMouseDown = (ev: React.MouseEvent) => {
     dragRef.current = { x: ev.clientX, y: ev.clientY, rx: rotX, ry: rotY };
+    didDrag.current = false;
   };
   const onMouseMove = (ev: React.MouseEvent) => {
     if (!dragRef.current) return;
-    setRotY(dragRef.current.ry + (ev.clientX - dragRef.current.x) * 0.005);
-    setRotX(dragRef.current.rx + (ev.clientY - dragRef.current.y) * 0.005);
+    const dx = ev.clientX - dragRef.current.x;
+    const dy = ev.clientY - dragRef.current.y;
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) didDrag.current = true;
+    setRotY(dragRef.current.ry + dx * 0.005);
+    setRotX(dragRef.current.rx + dy * 0.005);
   };
   const onMouseUp = () => { dragRef.current = null; };
 
+  const navigateToEpisode = useCallback((epIdx: number) => {
+    const base = pathname.replace(/\/episode_\d+$/, "");
+    router.push(`${base}/episode_${epIdx}`);
+  }, [pathname, router]);
+
   // Axis lines
   const axisLines = useMemo(() => {
     const cosX = Math.cos(rotX), sinX = Math.sin(rotX);
@@ -1018,55 +1132,93 @@ function TrajectoryClusteringSection({ data, numEpisodes }: { data: TrajectoryCl
   return (
     <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
       <div>
-        <h3 className="text-sm font-semibold text-slate-200">
-          Trajectory Clustering & Outlier Detection
-          <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes sampled)</span>
-        </h3>
-        <p className="text-xs text-slate-400 mt-1">
-          Episodes clustered by trajectory similarity: each episode&apos;s action trajectory is time-normalized, standardized,
-          and projected to 3D via PCA. K-means clustering (k selected by silhouette score) groups similar demonstrations.
-          <span className="text-red-400"> Outlier episodes</span> ({">"} 2σ from cluster center) may indicate recording errors,
-          failed demonstrations, or fundamentally different strategies worth reviewing.
-          <span className="text-yellow-400"> Imbalanced clusters</span> suggest multimodal demonstrations.
-          Drag to rotate.
-          <br />
-          <span className="text-slate-500">
-            Grounded in FAST-UMI-100K (Zhao et al., 2025 — automatic quality tools at scale),
-            &quot;Curating Demonstrations using Online Experience&quot; (Burns et al., 2025),
-            GVL (Mazzaglia et al., 2024), and SARM (Li et al., 2025).
-          </span>
-        </p>
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-slate-200">
+            Trajectory Clustering & Outlier Detection
+            <span className="text-xs text-slate-500 ml-2 font-normal">({numEpisodes} episodes sampled)</span>
+          </h3>
+          <InfoToggle>
+            <p className="text-xs text-slate-400">
+              Episodes clustered by trajectory similarity: each episode&apos;s action trajectory is time-normalized, standardized,
+              and projected to 3D via PCA. K-means clustering (k selected by silhouette score) groups similar demonstrations.
+              <span className="text-red-400"> Outlier episodes</span> ({">"} 2σ from cluster center) may indicate recording errors,
+              failed demonstrations, or fundamentally different strategies worth reviewing.
+              <span className="text-yellow-400"> Imbalanced clusters</span> suggest multimodal demonstrations.
+              Drag to rotate.
+              <br />
+              <span className="text-slate-500">
+                Grounded in FAST-UMI-100K (Zhao et al., 2025 — automatic quality tools at scale),
+                &quot;Curating Demonstrations using Online Experience&quot; (Burns et al., 2025),
+                GVL (Mazzaglia et al., 2024), and SARM (Li et al., 2025).
+              </span>
+            </p>
+          </InfoToggle>
+        </div>
       </div>
 
       <div className="flex gap-4 flex-wrap">
         <div className="flex-1 min-w-[340px]">
+          <div className="flex justify-end mb-1">
+            <button onClick={() => setShowLabels(v => !v)}
+              className={`text-xs px-2 py-0.5 rounded transition-colors ${showLabels ? "bg-orange-500/20 text-orange-400 border border-orange-500/40" : "text-slate-500 hover:text-slate-300 border border-slate-700"}`}>
+              {showLabels ? "Hide episodes" : "Show episodes"}
+            </button>
+          </div>
           <svg
             width={plotW} height={plotH}
             className="block bg-slate-900/50 rounded cursor-grab active:cursor-grabbing select-none"
-            onMouseDown={onMouseDown} onMouseMove={onMouseMove} onMouseUp={onMouseUp} onMouseLeave={onMouseUp}
+            onMouseDown={onMouseDown} onMouseMove={onMouseMove} onMouseUp={onMouseUp}
+            onMouseLeave={(ev) => { onMouseUp(); setHoveredEp(null); }}
           >
-            {/* Axis lines */}
             {axisLines.map(a => (
               <React.Fragment key={a.label}>
                 <line x1={a.ox} y1={a.oy} x2={a.px} y2={a.py} stroke={a.color} strokeWidth={0.5} strokeDasharray="4 3" opacity={0.4} />
                 <text x={a.px} y={a.py} className="fill-slate-600" fontSize={9} textAnchor="middle" dominantBaseline="central">{a.label}</text>
               </React.Fragment>
             ))}
-            {/* Points sorted back→front */}
             {sortedByDepth.map(({ sx, sy, depth, entry: e }, i) => {
               const color = CLUSTER_COLORS[e.cluster % CLUSTER_COLORS.length];
               const depthFade = 0.3 + 0.7 * ((depth + 1) / 2);
-              const r = e.isOutlier ? 5 : 2.5 + depthFade * 2;
+              const isHovered = hoveredEp === e.episodeIndex;
+              const r = isHovered ? 7 : e.isOutlier ? 5 : 2.5 + depthFade * 2;
               return (
-                <circle key={i} cx={sx} cy={sy} r={r}
-                  fill={e.isOutlier ? "transparent" : color}
-                  stroke={e.isOutlier ? "#ef4444" : color}
-                  strokeWidth={e.isOutlier ? 2 : 0}
-                  opacity={e.isOutlier ? 1 : depthFade * 0.8}>
-                  <title>{`ep ${e.episodeIndex} — cluster ${e.cluster}${e.isOutlier ? " (outlier)" : ""}, dist=${e.distFromCenter.toFixed(2)}`}</title>
-                </circle>
+                <g key={i}
+                  onMouseEnter={() => setHoveredEp(e.episodeIndex)}
+                  onMouseLeave={() => setHoveredEp(null)}
+                  onClick={() => { if (!didDrag.current) navigateToEpisode(e.episodeIndex); }}
+                  className="cursor-pointer"
+                >
+                  <circle cx={sx} cy={sy} r={r}
+                    fill={e.isOutlier ? "transparent" : color}
+                    stroke={isHovered ? "#fff" : e.isOutlier ? "#ef4444" : color}
+                    strokeWidth={isHovered ? 2 : e.isOutlier ? 2 : 0}
+                    opacity={e.isOutlier ? 1 : isHovered ? 1 : depthFade * 0.8}
+                  />
+                  {(showLabels || isHovered) && (
+                    <text x={sx} y={sy - r - 3} textAnchor="middle" fontSize={isHovered ? 11 : 8}
+                      className={isHovered ? "fill-white font-semibold" : "fill-slate-400"} pointerEvents="none">
+                      {e.episodeIndex}
+                    </text>
+                  )}
+                </g>
               );
             })}
+            {hoveredEp !== null && (() => {
+              const p = sortedByDepth.find(p => p.entry.episodeIndex === hoveredEp);
+              if (!p) return null;
+              const e = p.entry;
+              return (
+                <g pointerEvents="none">
+                  <rect x={p.sx + 10} y={p.sy - 30} width={130} height={40} rx={4} fill="#0f172a" stroke="#334155" strokeWidth={1} opacity={0.95} />
+                  <text x={p.sx + 16} y={p.sy - 16} fontSize={10} className="fill-slate-200 font-medium">
+                    Episode {e.episodeIndex}
+                  </text>
+                  <text x={p.sx + 16} y={p.sy - 2} fontSize={9} className="fill-slate-400">
+                    cluster {e.cluster} · dist {e.distFromCenter.toFixed(2)}{e.isOutlier ? " · outlier" : ""}
+                  </text>
+                </g>
+              );
+            })()}
           </svg>
         </div>
 
@@ -1088,7 +1240,7 @@ function TrajectoryClusteringSection({ data, numEpisodes }: { data: TrajectoryCl
             </div>
           )}
           {imbalance > 0.5 && (
-            <p className="text-yellow-400 text-[11px]">
+            <p className="text-yellow-400 text-xs">
               Clusters are imbalanced ({(imbalance * 100).toFixed(0)}% size ratio) — the dataset may contain multiple distinct strategies.
             </p>
           )}
@@ -1100,14 +1252,18 @@ function TrajectoryClusteringSection({ data, numEpisodes }: { data: TrajectoryCl
           <p className="text-sm font-medium text-slate-200">
             {showAll ? "All Episodes" : "Most Anomalous Episodes"} <span className="text-xs text-slate-500 font-normal">sorted by distance from cluster center</span>
           </p>
-          <button onClick={() => setShowAll(v => !v)} className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
-            {showAll ? "Show top 15" : `Show all ${entries.length}`}
-          </button>
+          <div className="flex items-center gap-3">
+            <FlagAllBtn ids={entries.filter(e => e.isOutlier).map(e => e.episodeIndex)} label="Flag outliers" />
+            <button onClick={() => setShowAll(v => !v)} className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
+              {showAll ? "Show top 15" : `Show all ${entries.length}`}
+            </button>
+          </div>
         </div>
         <div className="max-h-48 overflow-y-auto">
           <table className="w-full text-xs">
             <thead>
               <tr className="text-slate-500 border-b border-slate-700">
+                <th className="w-5 py-1" />
                 <th className="text-left py-1 pr-3">Episode</th>
                 <th className="text-left py-1 pr-3">Cluster</th>
                 <th className="text-right py-1">Distance</th>
@@ -1116,6 +1272,7 @@ function TrajectoryClusteringSection({ data, numEpisodes }: { data: TrajectoryCl
             <tbody>
               {(showAll ? sorted : sorted.slice(0, 15)).map(e => (
                 <tr key={e.episodeIndex} className={`border-b border-slate-800/40 ${e.isOutlier ? "text-red-400" : "text-slate-300"}`}>
+                  <td className="py-1"><FlagBtn id={e.episodeIndex} /></td>
                   <td className="py-1 pr-3">ep {e.episodeIndex}{e.isOutlier ? " ⚠" : ""}</td>
                   <td className="py-1 pr-3">
                     <span className="inline-block w-2 h-2 rounded-full mr-1.5" style={{ background: CLUSTER_COLORS[e.cluster % CLUSTER_COLORS.length] }} />
@@ -1153,11 +1310,11 @@ const ActionInsightsPanel: React.FC<ActionInsightsPanelProps> = ({
   return (
     <div className="max-w-5xl mx-auto py-6 space-y-8">
       <div className="flex items-center justify-between flex-wrap gap-4">
-        <div>
-          <h2 className="text-xl font-bold text-slate-100">Action Insights</h2>
-          <p className="text-sm text-slate-400 mt-1">
-            Data-driven analysis to guide action chunking, data quality assessment, and training configuration.
-          </p>
+      <div>
+        <h2 className="text-xl font-bold text-slate-100">Action Insights</h2>
+        <p className="text-sm text-slate-400 mt-1">
+          Data-driven analysis to guide action chunking, data quality assessment, and training configuration.
+        </p>
         </div>
         <div className="flex items-center gap-3 shrink-0">
           <span className={`text-sm ${mode === "episode" ? "text-slate-100 font-medium" : "text-slate-500"}`}>Current Episode</span>
@@ -1174,24 +1331,18 @@ const ActionInsightsPanel: React.FC<ActionInsightsPanelProps> = ({
         </div>
       </div>
 
-      <AutocorrelationSection data={flatChartData} fps={fps} agg={showAgg ? crossEpisodeData?.aggAutocorrelation : null} numEpisodes={crossEpisodeData?.numEpisodes} />
-      <ActionVelocitySection data={flatChartData} agg={showAgg ? crossEpisodeData?.aggVelocity : undefined} numEpisodes={crossEpisodeData?.numEpisodes} jerkyEpisodes={showAgg ? crossEpisodeData?.jerkyEpisodes : undefined} />
+      <FullscreenWrapper><AutocorrelationSection data={flatChartData} fps={fps} agg={showAgg ? crossEpisodeData?.aggAutocorrelation : null} numEpisodes={crossEpisodeData?.numEpisodes} /></FullscreenWrapper>
+      <FullscreenWrapper><StateActionAlignmentSection data={flatChartData} fps={fps} agg={showAgg ? crossEpisodeData?.aggAlignment : null} numEpisodes={crossEpisodeData?.numEpisodes} /></FullscreenWrapper>
 
       {crossEpisodeData?.speedDistribution && crossEpisodeData.speedDistribution.length > 2 && (
-        <SpeedVarianceSection distribution={crossEpisodeData.speedDistribution} numEpisodes={crossEpisodeData.numEpisodes} />
-      )}
-      <StateActionAlignmentSection data={flatChartData} fps={fps} agg={showAgg ? crossEpisodeData?.aggAlignment : null} numEpisodes={crossEpisodeData?.numEpisodes} />
-      <VarianceHeatmap data={crossEpisodeData} loading={crossEpisodeLoading} />
-      {crossEpisodeData && <MultimodalitySection data={crossEpisodeData} />}
-      {crossEpisodeData?.trajectoryClustering && (
-        <TrajectoryClusteringSection data={crossEpisodeData.trajectoryClustering} numEpisodes={crossEpisodeData.numEpisodes} />
-      )}
-      {crossEpisodeData?.lowMovementEpisodes && (
-        <LowMovementSection episodes={crossEpisodeData.lowMovementEpisodes} />
+        <FullscreenWrapper><SpeedVarianceSection distribution={crossEpisodeData.speedDistribution} numEpisodes={crossEpisodeData.numEpisodes} /></FullscreenWrapper>
       )}
+      <FullscreenWrapper><VarianceHeatmap data={crossEpisodeData} loading={crossEpisodeLoading} /></FullscreenWrapper>
+      {crossEpisodeData && <FullscreenWrapper><MultimodalitySection data={crossEpisodeData} /></FullscreenWrapper>}
     </div>
   );
 };
 
 export default ActionInsightsPanel;
+export { ActionVelocitySection, TrajectoryClusteringSection, FullscreenWrapper };
 

src/components/data-recharts.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useTime } from "../context/time-context";
 import {
   LineChart,
@@ -30,29 +30,72 @@ const CHART_COLORS = [
   "#6366f1", "#84cc16",
 ];
 
+function mergeGroups(data: ChartRow[][]): ChartRow[] {
+  if (data.length <= 1) return data[0] ?? [];
+  const maxLen = Math.max(...data.map(g => g.length));
+  const merged: ChartRow[] = [];
+  for (let i = 0; i < maxLen; i++) {
+    const row: ChartRow = {};
+    for (const group of data) {
+      const src = group[i];
+      if (!src) continue;
+      for (const [k, v] of Object.entries(src)) {
+        if (k === "timestamp") { row[k] = v; continue; }
+        row[k] = v;
+      }
+    }
+    merged.push(row);
+  }
+  return merged;
+}
+
 export const DataRecharts = React.memo(
   ({ data, onChartsReady }: DataGraphProps) => {
-    // Shared hoveredTime for all graphs
     const [hoveredTime, setHoveredTime] = useState<number | null>(null);
+    const [expanded, setExpanded] = useState(false);
 
     if (!Array.isArray(data) || data.length === 0) return null;
 
     useEffect(() => {
-      if (typeof onChartsReady === "function") {
-        onChartsReady();
-      }
+      if (typeof onChartsReady === "function") onChartsReady();
     }, [onChartsReady]);
 
+    const combinedData = useMemo(() => expanded ? mergeGroups(data) : [], [data, expanded]);
+
     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>
+        {data.length > 1 && (
+          <div className="flex justify-end mb-2">
+            <button
+              onClick={() => setExpanded(v => !v)}
+              className={`text-xs px-2.5 py-1 rounded transition-colors flex items-center gap-1.5 ${
+                expanded
+                  ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
+                  : "bg-slate-800/60 text-slate-400 hover:text-slate-200 border border-slate-700/50"
+              }`}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                {expanded ? (
+                  <><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></>
+                ) : (
+                  <><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></>
+                )}
+              </svg>
+              {expanded ? "Split charts" : "Combine all"}
+            </button>
+          </div>
+        )}
+
+        {expanded ? (
+          <SingleDataGraph data={combinedData} hoveredTime={hoveredTime} setHoveredTime={setHoveredTime} tall />
+        ) : (
+          <div className="grid md:grid-cols-2 grid-cols-1 gap-4">
+            {data.map((group, idx) => (
+              <SingleDataGraph key={idx} data={group} hoveredTime={hoveredTime} setHoveredTime={setHoveredTime} />
+            ))}
+          </div>
+        )}
       </div>
     );
   },
@@ -64,10 +107,12 @@ const SingleDataGraph = React.memo(
     data,
     hoveredTime,
     setHoveredTime,
+    tall,
   }: {
     data: ChartRow[];
     hoveredTime: number | null;
     setHoveredTime: (t: number | null) => void;
+    tall?: boolean;
   }) => {
     const { currentTime, setCurrentTime } = useTime();
     function flattenRow(row: Record<string, number | Record<string, number>>, prefix = ""): Record<string, number> {
@@ -205,7 +250,7 @@ const SingleDataGraph = React.memo(
                     className="size-3"
                     style={{ accentColor: color }}
                   />
-                  <span className="text-[11px] font-semibold text-slate-200">{group}</span>
+                  <span className="text-xs font-semibold text-slate-200">{group}</span>
                 </label>
                 <div className="pl-5 flex flex-col gap-0.5 mt-0.5">
                   {children.map((key) => {
@@ -219,8 +264,8 @@ const SingleDataGraph = React.memo(
                           className="size-2.5"
                           style={{ accentColor: color }}
                         />
-                        <span className={`text-[10px] ${visibleKeys.includes(key) ? "text-slate-300" : "text-slate-500"}`}>{label}</span>
-                        <span className={`text-[10px] font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}>
+                        <span className={`text-xs ${visibleKeys.includes(key) ? "text-slate-300" : "text-slate-500"}`}>{label}</span>
+                        <span className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}>
                           {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "–"}
                         </span>
                       </label>
@@ -241,8 +286,8 @@ const SingleDataGraph = React.memo(
                   className="size-3"
                   style={{ accentColor: color }}
                 />
-                <span className={`text-[11px] ${visibleKeys.includes(key) ? "text-slate-200" : "text-slate-500"}`}>{key}</span>
-                <span className={`text-[10px] font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}>
+                <span className={`text-xs ${visibleKeys.includes(key) ? "text-slate-200" : "text-slate-500"}`}>{key}</span>
+                <span className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}>
                   {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "–"}
                 </span>
               </label>
@@ -270,7 +315,7 @@ const SingleDataGraph = React.memo(
         {chartTitle && (
           <p className="text-xs font-medium text-slate-300 mb-1 px-1 truncate" title={chartTitle}>{chartTitle}</p>
         )}
-        <div className="w-full h-72" onMouseLeave={handleMouseLeave}>
+        <div className={`w-full ${tall ? "h-[500px]" : "h-72"}`} onMouseLeave={handleMouseLeave}>
           <ResponsiveContainer width="100%" height="100%">
             <LineChart
               data={chartData}
@@ -292,14 +337,14 @@ const SingleDataGraph = React.memo(
                 ]}
                 tickFormatter={(v: number) => `${v.toFixed(1)}s`}
                 stroke="#64748b"
-                tick={{ fontSize: 10, fill: "#94a3b8" }}
+                tick={{ fontSize: 12, fill: "#94a3b8" }}
                 minTickGap={30}
                 allowDataOverflow={true}
               />
               <YAxis
                 domain={["auto", "auto"]}
                 stroke="#64748b"
-                tick={{ fontSize: 10, fill: "#94a3b8" }}
+                tick={{ fontSize: 12, fill: "#94a3b8" }}
                 width={45}
                 allowDataOverflow={true}
               />

src/components/filtering-panel.tsx

@@ -0,0 +1,373 @@
+"use client";
+
+import React, { useState, useMemo, useCallback } from "react";
+import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
+import type {
+  CrossEpisodeVarianceData,
+  LowMovementEpisode,
+  EpisodeLengthStats,
+  EpisodeLengthInfo,
+} from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import { ActionVelocitySection, TrajectoryClusteringSection, FullscreenWrapper } from "@/components/action-insights-panel";
+
+// ─── Shared small components ─────────────────────────────────────
+
+function FlagBtn({ id }: { id: number }) {
+  const { has, toggle } = useFlaggedEpisodes();
+  const flagged = has(id);
+  return (
+    <button onClick={() => toggle(id)} title={flagged ? "Unflag episode" : "Flag for review"}
+      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill={flagged ? "currentColor" : "none"}
+        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+      </svg>
+    </button>
+  );
+}
+
+function FlagAllBtn({ ids, label }: { ids: number[]; label?: string }) {
+  const { addMany } = useFlaggedEpisodes();
+  return (
+    <button onClick={() => addMany(ids)}
+      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+      </svg>
+      {label ?? "Flag all"}
+    </button>
+  );
+}
+
+// ─── Auto-Prune ──────────────────────────────────────────────────
+
+function AutoPruneSection({ data }: { data: CrossEpisodeVarianceData }) {
+  const { addMany } = useFlaggedEpisodes();
+  const [pct, setPct] = useState(5);
+  const [copied, setCopied] = useState(false);
+
+  const result = useMemo(() => {
+    const allIds = new Set<number>();
+    const movementMap = new Map<number, number>();
+    const jerkyMap = new Map<number, number>();
+    const clusterMap = new Map<number, number>();
+
+    for (const e of data.lowMovementEpisodes) { allIds.add(e.episodeIndex); movementMap.set(e.episodeIndex, e.totalMovement); }
+    for (const e of data.jerkyEpisodes) { allIds.add(e.episodeIndex); jerkyMap.set(e.episodeIndex, e.meanAbsDelta); }
+    if (data.trajectoryClustering) {
+      for (const e of data.trajectoryClustering.entries) { allIds.add(e.episodeIndex); clusterMap.set(e.episodeIndex, e.distFromCenter); }
+    }
+    if (allIds.size === 0) return null;
+
+    const normalize = (map: Map<number, number>, invert: boolean) => {
+      const vals = [...map.values()];
+      if (vals.length === 0) return map;
+      const min = Math.min(...vals), max = Math.max(...vals);
+      const range = max - min || 1;
+      const out = new Map<number, number>();
+      for (const [k, v] of map) out.set(k, invert ? 1 - (v - min) / range : (v - min) / range);
+      return out;
+    };
+
+    const movNorm = normalize(movementMap, true);
+    const jerkNorm = normalize(jerkyMap, false);
+    const clustNorm = normalize(clusterMap, false);
+
+    const scored = [...allIds].map(id => {
+      let score = 0, weights = 0;
+      if (movNorm.has(id)) { score += movNorm.get(id)!; weights++; }
+      if (jerkNorm.has(id)) { score += jerkNorm.get(id)!; weights++; }
+      if (clustNorm.has(id)) { score += clustNorm.get(id)!; weights++; }
+      return { id, score: weights > 0 ? score / weights : 0 };
+    }).sort((a, b) => b.score - a.score);
+
+    const n = Math.max(1, Math.round(scored.length * pct / 100));
+    return { scored, pruneIds: scored.slice(0, n).map(s => s.id), total: scored.length };
+  }, [data, pct]);
+
+  if (!result) return null;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(result.pruneIds.join(", "));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="bg-slate-800/60 rounded-lg p-5 border border-orange-500/30 space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold text-orange-400">Auto-Prune</h3>
+        <p className="text-xs text-slate-400 mt-1">
+          Automatically identify the worst episodes based on a composite score combining:
+          low movement (⅓), jerkiness (⅓), and cluster outlier distance (⅓).
+          Each metric is min-max normalized to [0,1] and averaged.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <label className="text-xs text-slate-400 shrink-0">Prune worst</label>
+        <input type="range" min={1} max={50} value={pct} onChange={e => setPct(Number(e.target.value))}
+          className="flex-1 h-1.5 rounded appearance-none bg-slate-700 accent-orange-500" />
+        <span className="text-sm font-bold text-orange-400 tabular-nums w-10 text-right">{pct}%</span>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <p className="text-xs text-slate-400">
+          {result.pruneIds.length} episode{result.pruneIds.length !== 1 ? "s" : ""} out of {result.total} scored
+        </p>
+        <div className="flex items-center gap-2">
+          <button onClick={handleCopy}
+            className="text-xs text-slate-400 hover:text-slate-200 transition-colors flex items-center gap-1">
+            {copied ? (
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-green-400"><polyline points="20 6 9 17 4 12" /></svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+            )}
+            Copy IDs
+          </button>
+          <button onClick={() => addMany(result.pruneIds)}
+            className="text-xs bg-orange-500/20 text-orange-400 border border-orange-500/40 rounded px-2 py-1 hover:bg-orange-500/30 transition-colors">
+            Flag all {result.pruneIds.length}
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-slate-900/70 rounded-md border border-slate-700 p-3 max-h-32 overflow-y-auto">
+        <p className="text-xs text-slate-300 tabular-nums leading-relaxed">
+          {result.pruneIds.sort((a, b) => a - b).join(", ")}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Lowest-Movement Episodes ────────────────────────────────────
+
+function LowMovementSection({ episodes }: { episodes: LowMovementEpisode[] }) {
+  if (episodes.length === 0) return null;
+  const maxMovement = Math.max(...episodes.map(e => e.totalMovement), 1e-10);
+
+  return (
+    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-slate-200">Lowest-Movement Episodes</h3>
+        <FlagAllBtn ids={episodes.map(e => e.episodeIndex)} />
+      </div>
+      <p className="text-xs text-slate-400">
+        Episodes with the lowest average action change per frame. Very low values may indicate the robot was standing still or the episode was recorded incorrectly.
+      </p>
+      <div className="grid gap-2" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
+        {episodes.map(ep => (
+          <div key={ep.episodeIndex} className="bg-slate-900/50 rounded-md px-3 py-2 flex items-center gap-3">
+            <FlagBtn id={ep.episodeIndex} />
+            <span className="text-xs text-slate-300 font-medium shrink-0">ep {ep.episodeIndex}</span>
+            <div className="flex-1 min-w-0">
+              <div className="h-1.5 bg-slate-700 rounded-full overflow-hidden">
+                <div className="h-full rounded-full"
+                  style={{
+                    width: `${Math.max(2, (ep.totalMovement / maxMovement) * 100)}%`,
+                    background: ep.totalMovement / maxMovement < 0.15 ? "#ef4444" : ep.totalMovement / maxMovement < 0.4 ? "#eab308" : "#22c55e",
+                  }} />
+              </div>
+            </div>
+            <span className="text-xs text-slate-500 tabular-nums shrink-0">{ep.totalMovement.toFixed(2)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Episode Length Filter ────────────────────────────────────────
+
+function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
+  const { addMany } = useFlaggedEpisodes();
+  const globalMin = useMemo(() => Math.min(...episodes.map((e) => e.lengthSeconds)), [episodes]);
+  const globalMax = useMemo(() => Math.max(...episodes.map((e) => e.lengthSeconds)), [episodes]);
+
+  const [rangeMin, setRangeMin] = useState(globalMin);
+  const [rangeMax, setRangeMax] = useState(globalMax);
+
+  const outsideIds = useMemo(() =>
+    episodes.filter((e) => e.lengthSeconds < rangeMin || e.lengthSeconds > rangeMax)
+      .map((e) => e.episodeIndex).sort((a, b) => a - b),
+    [episodes, rangeMin, rangeMax]);
+
+  const rangeChanged = rangeMin > globalMin || rangeMax < globalMax;
+  const step = Math.max(0.01, Math.round((globalMax - globalMin) * 0.001 * 100) / 100) || 0.01;
+
+  return (
+    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
+      <h3 className="text-sm font-semibold text-slate-200">Episode Length Filter</h3>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between text-xs text-slate-400">
+          <span className="tabular-nums">{rangeMin.toFixed(1)}s</span>
+          <span className="tabular-nums">{rangeMax.toFixed(1)}s</span>
+        </div>
+        <div className="relative h-5">
+          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1 rounded bg-slate-700" />
+          <div className="absolute top-1/2 -translate-y-1/2 h-1 rounded bg-orange-500"
+            style={{
+              left: `${((rangeMin - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
+              right: `${100 - ((rangeMax - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
+            }} />
+          <input type="range" min={globalMin} max={globalMax} step={step} value={rangeMin}
+            onChange={(e) => setRangeMin(Math.min(Number(e.target.value), rangeMax))}
+            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer" />
+          <input type="range" min={globalMin} max={globalMax} step={step} value={rangeMax}
+            onChange={(e) => setRangeMax(Math.max(Number(e.target.value), rangeMin))}
+            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer" />
+        </div>
+      </div>
+
+      {rangeChanged && (
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-slate-400">
+            {outsideIds.length} episode{outsideIds.length !== 1 ? "s" : ""} outside range
+          </span>
+          {outsideIds.length > 0 && (
+            <button onClick={() => addMany(outsideIds)}
+              className="text-xs bg-orange-500/20 text-orange-400 border border-orange-500/40 rounded px-2 py-1 hover:bg-orange-500/30 transition-colors">
+              Flag {outsideIds.length} outside range
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main Filtering Panel ────────────────────────────────────────
+
+interface FilteringPanelProps {
+  repoId: string;
+  crossEpisodeData: CrossEpisodeVarianceData | null;
+  crossEpisodeLoading: boolean;
+  episodeLengthStats: EpisodeLengthStats | null;
+  flatChartData: Record<string, number>[];
+  fps: number;
+  onViewFlaggedEpisodes?: () => void;
+}
+
+function FlaggedIdsCopyBar({ repoId, onViewEpisodes }: { repoId: string; onViewEpisodes?: () => void }) {
+  const { flagged, count, clear } = useFlaggedEpisodes();
+  const [copied, setCopied] = useState(false);
+
+  const ids = useMemo(() => [...flagged].sort((a, b) => a - b), [flagged]);
+  const idStr = ids.join(", ");
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(idStr);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [idStr]);
+
+  if (count === 0) return null;
+
+  return (
+    <div className="bg-slate-800/60 rounded-lg p-4 border border-orange-500/30 space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-orange-400">
+          Flagged Episodes
+          <span className="text-xs text-slate-500 ml-2 font-normal">({count})</span>
+        </h3>
+        <div className="flex items-center gap-2">
+          <button onClick={handleCopy}
+            className="text-xs text-slate-400 hover:text-slate-200 transition-colors flex items-center gap-1"
+            title="Copy IDs">
+            {copied ? (
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-green-400"><polyline points="20 6 9 17 4 12" /></svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+            )}
+            Copy
+          </button>
+          <button onClick={clear} className="text-xs text-slate-500 hover:text-red-400 transition-colors">Clear</button>
+        </div>
+      </div>
+      <p className="text-xs text-slate-300 tabular-nums leading-relaxed max-h-20 overflow-y-auto">{idStr}</p>
+      {onViewEpisodes && (
+        <button onClick={onViewEpisodes}
+          className="w-full text-xs py-1.5 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-300 hover:text-white transition-colors flex items-center justify-center gap-1.5">
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+          </svg>
+          View flagged episodes
+        </button>
+      )}
+      <div className="bg-slate-900/60 rounded-md px-3 py-2 border border-slate-700/60 space-y-2.5">
+        <p className="text-xs text-slate-400">
+          <a href="https://github.com/huggingface/lerobot" target="_blank" rel="noopener noreferrer" className="text-orange-400 underline">LeRobot CLI</a> — delete flagged episodes:
+        </p>
+        <pre className="text-xs text-slate-300 bg-slate-950/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes (modifies original dataset)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
+        <pre className="text-xs text-slate-300 bg-slate-950/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes and save to a new dataset (preserves original)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --new_repo_id ${repoId}_filtered \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
+      </div>
+    </div>
+  );
+}
+
+const FilteringPanel: React.FC<FilteringPanelProps> = ({
+  repoId,
+  crossEpisodeData,
+  crossEpisodeLoading,
+  episodeLengthStats,
+  flatChartData,
+  fps,
+  onViewFlaggedEpisodes,
+}) => {
+  return (
+    <div className="max-w-5xl mx-auto py-6 space-y-8">
+      <div>
+        <h2 className="text-xl font-bold text-slate-100">Filtering</h2>
+        <p className="text-sm text-slate-400 mt-1">
+          Identify and flag problematic episodes for removal. Flagged episodes appear in the sidebar and can be exported as a CLI command.
+        </p>
+      </div>
+
+      <FlaggedIdsCopyBar repoId={repoId} onViewEpisodes={onViewFlaggedEpisodes} />
+
+      {crossEpisodeData && <AutoPruneSection data={crossEpisodeData} />}
+
+      {episodeLengthStats?.allEpisodeLengths && (
+        <EpisodeLengthFilter episodes={episodeLengthStats.allEpisodeLengths} />
+      )}
+
+      {crossEpisodeLoading && (
+        <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
+          <div className="flex items-center gap-2 text-slate-400 text-sm py-4 justify-center">
+            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            Loading cross-episode data…
+          </div>
+        </div>
+      )}
+
+      {crossEpisodeData?.lowMovementEpisodes && (
+        <LowMovementSection episodes={crossEpisodeData.lowMovementEpisodes} />
+      )}
+
+      {crossEpisodeData?.trajectoryClustering && (
+        <FullscreenWrapper>
+          <TrajectoryClusteringSection data={crossEpisodeData.trajectoryClustering} numEpisodes={crossEpisodeData.numEpisodes} />
+        </FullscreenWrapper>
+      )}
+
+      <FullscreenWrapper>
+        <ActionVelocitySection
+          data={flatChartData}
+          agg={crossEpisodeData?.aggVelocity}
+          numEpisodes={crossEpisodeData?.numEpisodes}
+          jerkyEpisodes={crossEpisodeData?.jerkyEpisodes}
+        />
+      </FullscreenWrapper>
+    </div>
+  );
+};
+
+export default FilteringPanel;
+

src/components/overview-panel.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import type { EpisodeFrameInfo, EpisodeFramesData } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
 
 const PAGE_SIZE = 48;
 
@@ -41,9 +42,12 @@ function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast:
     }
   }, [inView, showLast, info]);
 
+  const { has, toggle } = useFlaggedEpisodes();
+  const isFlagged = has(info.episodeIndex);
+
   return (
     <div ref={containerRef} className="flex flex-col items-center">
-      <div className="w-full aspect-video bg-slate-800 rounded overflow-hidden">
+      <div className="w-full aspect-video bg-slate-800 rounded overflow-hidden relative group">
         {inView ? (
           <video
             ref={videoRef}
@@ -55,8 +59,22 @@ function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast:
         ) : (
           <div className="w-full h-full animate-pulse bg-slate-700" />
         )}
+        <button
+          onClick={() => toggle(info.episodeIndex)}
+          className={`absolute top-1 right-1 p-1 rounded transition-opacity ${
+            isFlagged ? "opacity-100 text-orange-400" : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-orange-400"
+          }`}
+          title={isFlagged ? "Unflag episode" : "Flag episode"}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill={isFlagged ? "currentColor" : "none"}
+            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+          </svg>
+        </button>
       </div>
-      <p className="text-xs text-slate-400 mt-1 tabular-nums">ep {info.episodeIndex}</p>
+      <p className={`text-xs mt-1 tabular-nums ${isFlagged ? "text-orange-400" : "text-slate-400"}`}>
+        ep {info.episodeIndex}{isFlagged ? " ⚑" : ""}
+      </p>
     </div>
   );
 }
@@ -64,9 +82,12 @@ function FrameThumbnail({ info, showLast }: { info: EpisodeFrameInfo; showLast:
 interface OverviewPanelProps {
   data: EpisodeFramesData | null;
   loading: boolean;
+  flaggedOnly?: boolean;
+  onFlaggedOnlyChange?: (v: boolean) => void;
 }
 
-export default function OverviewPanel({ data, loading }: OverviewPanelProps) {
+export default function OverviewPanel({ data, loading, flaggedOnly = false, onFlaggedOnlyChange }: OverviewPanelProps) {
+  const { flagged, count: flagCount } = useFlaggedEpisodes();
   const [selectedCamera, setSelectedCamera] = useState<string>("");
   const [showLast, setShowLast] = useState(false);
   const [page, setPage] = useState(0);
@@ -95,10 +116,18 @@ export default function OverviewPanel({ data, loading }: OverviewPanelProps) {
     );
   }
 
-  const frames = data.framesByCamera[selectedCamera] ?? [];
+  const allFrames = data.framesByCamera[selectedCamera] ?? [];
+  const frames = flaggedOnly ? allFrames.filter(f => flagged.has(f.episodeIndex)) : allFrames;
 
   if (frames.length === 0) {
-    return <p className="text-slate-500 italic py-8 text-center">No episode frames available.</p>;
+    return (
+      <div className="text-center py-8 space-y-2">
+        <p className="text-slate-500 italic">{flaggedOnly ? "No flagged episodes to show." : "No episode frames available."}</p>
+        {flaggedOnly && onFlaggedOnlyChange && (
+          <button onClick={() => onFlaggedOnlyChange(false)} className="text-xs text-orange-400 hover:text-orange-300 underline">Show all episodes</button>
+        )}
+      </div>
+    );
   }
 
   const totalPages = Math.ceil(frames.length / PAGE_SIZE);
@@ -107,7 +136,7 @@ export default function OverviewPanel({ data, loading }: OverviewPanelProps) {
   return (
     <div className="max-w-7xl mx-auto py-6 space-y-5">
       <p className="text-sm text-slate-500">
-        Use first/last frame views to spot episodes with bad end states, or other anomalies — and to visualize diversity across the dataset.
+        Use first/last frame views to spot episodes with bad end states or other anomalies. Hover over a thumbnail and click the flag icon to mark episodes with wrong outcomes for review.
       </p>
 
       {/* Controls row */}
@@ -126,6 +155,24 @@ export default function OverviewPanel({ data, loading }: OverviewPanelProps) {
             </select>
           )}
 
+          {/* Flagged only toggle */}
+          {flagCount > 0 && onFlaggedOnlyChange && (
+            <button
+              onClick={() => { onFlaggedOnlyChange(!flaggedOnly); setPage(0); }}
+              className={`text-xs px-2.5 py-1 rounded transition-colors flex items-center gap-1.5 ${
+                flaggedOnly
+                  ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
+                  : "text-slate-400 hover:text-slate-200 border border-slate-700"
+              }`}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill={flaggedOnly ? "currentColor" : "none"}
+                stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" /><line x1="4" y1="22" x2="4" y2="15" />
+              </svg>
+              Flagged only ({flagCount})
+            </button>
+          )}
+
           {/* First / Last toggle */}
           <div className="flex items-center gap-3">
             <span className={`text-sm ${!showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}>

src/components/side-nav.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import React from "react";
+import React, { useMemo, useState } from "react";
+import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
 
 import type { DatasetDisplayInfo } from "@/app/[org]/[dataset]/[episode]/fetch-data";
 
@@ -13,6 +14,8 @@ interface SidebarProps {
   currentPage: number;
   prevPage: () => void;
   nextPage: () => void;
+  showFlaggedOnly: boolean;
+  onShowFlaggedOnlyChange: (v: boolean) => void;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -23,44 +26,73 @@ const Sidebar: React.FC<SidebarProps> = ({
   currentPage,
   prevPage,
   nextPage,
+  showFlaggedOnly,
+  onShowFlaggedOnlyChange,
 }) => {
-  // On mobile, allow toggling; on desktop the sidebar is always visible
-  const [mobileVisible, setMobileVisible] = React.useState(false);
+  const [mobileVisible, setMobileVisible] = useState(false);
+  const { flagged, count, toggle } = useFlaggedEpisodes();
+
+  const displayEpisodes = useMemo(() => {
+    if (!showFlaggedOnly || count === 0) return paginatedEpisodes;
+    return [...flagged].sort((a, b) => a - b);
+  }, [paginatedEpisodes, showFlaggedOnly, flagged, count]);
 
   return (
     <div className="flex z-10 shrink-0">
-      {/* Sidebar panel — always visible on md+, togglable on mobile */}
       <nav
         className={`shrink-0 overflow-y-auto bg-slate-900 p-5 break-words w-60 ${
           mobileVisible ? "block" : "hidden"
         } md:block`}
         aria-label="Sidebar navigation"
       >
-        {/* Basic dataset info */}
         <ul className="text-sm text-slate-300 space-y-0.5">
           <li>Frames: {datasetInfo.total_frames.toLocaleString()}</li>
           <li>Episodes: {datasetInfo.total_episodes.toLocaleString()}</li>
           <li>FPS: {datasetInfo.fps}</li>
         </ul>
 
-        <p className="mt-4 text-sm font-semibold text-slate-200">Episodes:</p>
+        <div className="mt-4 flex items-center justify-between">
+          <p className="text-sm font-semibold text-slate-200">Episodes:</p>
+          {count > 0 && (
+            <button
+              onClick={() => onShowFlaggedOnlyChange(!showFlaggedOnly)}
+              className={`text-xs px-1.5 py-0.5 rounded transition-colors ${
+                showFlaggedOnly
+                  ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
+                  : "text-slate-500 hover:text-slate-300 border border-slate-700"
+              }`}
+            >
+              Flagged ({count})
+            </button>
+          )}
+        </div>
 
-        {/* Episodes list */}
         <div className="ml-2 mt-1">
           <ul>
-            {paginatedEpisodes.map((episode) => (
-              <li key={episode} className="mt-0.5 font-mono text-sm">
+            {displayEpisodes.map((episode) => (
+              <li key={episode} className="mt-0.5 font-mono text-sm flex items-center gap-1">
                 <Link
                   href={`./episode_${episode}`}
                   className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}
                 >
                   Episode {episode}
                 </Link>
+                <button
+                  onClick={() => toggle(episode)}
+                  className={`text-xs leading-none px-0.5 rounded transition-colors ${
+                    flagged.has(episode)
+                      ? "text-orange-400 hover:text-orange-300"
+                      : "text-slate-600 hover:text-slate-400"
+                  }`}
+                  title={flagged.has(episode) ? "Unflag" : "Flag"}
+                >
+                  ⚑
+                </button>
               </li>
             ))}
           </ul>
 
-          {totalPages > 1 && (
+          {!showFlaggedOnly && totalPages > 1 && (
             <div className="mt-3 flex items-center text-xs">
               <button
                 onClick={prevPage}
@@ -90,7 +122,6 @@ const Sidebar: React.FC<SidebarProps> = ({
         </div>
       </nav>
 
-      {/* Mobile toggle button */}
       <button
         className="mx-1 flex items-center opacity-50 hover:opacity-100 focus:outline-none focus:ring-0 md:hidden"
         onClick={() => setMobileVisible((prev) => !prev)}

src/components/stats-panel.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import React, { useState, useMemo, useCallback } from "react";
+import React, { useState } from "react";
 import type {
   DatasetDisplayInfo,
   ColumnMinMax,
   EpisodeLengthStats,
-  EpisodeLengthInfo,
   CameraInfo,
 } from "@/app/[org]/[dataset]/[episode]/fetch-data";
 
@@ -82,108 +81,6 @@ const Card: React.FC<{ label: string; value: string | number }> = ({ label, valu
   </div>
 );
 
-function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
-  const globalMin = useMemo(() => Math.min(...episodes.map((e) => e.lengthSeconds)), [episodes]);
-  const globalMax = useMemo(() => Math.max(...episodes.map((e) => e.lengthSeconds)), [episodes]);
-
-  const [rangeMin, setRangeMin] = useState(globalMin);
-  const [rangeMax, setRangeMax] = useState(globalMax);
-  const [showOutside, setShowOutside] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const filtered = useMemo(() => {
-    const inRange = episodes.filter((e) => e.lengthSeconds >= rangeMin && e.lengthSeconds <= rangeMax);
-    const outRange = episodes.filter((e) => e.lengthSeconds < rangeMin || e.lengthSeconds > rangeMax);
-    return showOutside ? outRange : inRange;
-  }, [episodes, rangeMin, rangeMax, showOutside]);
-
-  const ids = useMemo(() => filtered.map((e) => e.episodeIndex).sort((a, b) => a - b), [filtered]);
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(ids.join(", "));
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }, [ids]);
-
-  const step = Math.max(0.01, Math.round((globalMax - globalMin) * 0.001 * 100) / 100) || 0.01;
-
-  return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
-      <h3 className="text-sm font-semibold text-slate-200">Episode Length Filter</h3>
-
-      {/* Range slider row */}
-      <div className="space-y-2">
-        <div className="flex items-center justify-between text-xs text-slate-400">
-          <span className="tabular-nums">{rangeMin.toFixed(1)}s</span>
-          <span className="tabular-nums">{rangeMax.toFixed(1)}s</span>
-        </div>
-        <div className="relative h-5">
-          {/* track background */}
-          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1 rounded bg-slate-700" />
-          {/* active range highlight */}
-          <div
-            className="absolute top-1/2 -translate-y-1/2 h-1 rounded bg-orange-500"
-            style={{
-              left: `${((rangeMin - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
-              right: `${100 - ((rangeMax - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
-            }}
-          />
-          <input
-            type="range"
-            min={globalMin}
-            max={globalMax}
-            step={step}
-            value={rangeMin}
-            onChange={(e) => setRangeMin(Math.min(Number(e.target.value), rangeMax))}
-            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer"
-          />
-          <input
-            type="range"
-            min={globalMin}
-            max={globalMax}
-            step={step}
-            value={rangeMax}
-            onChange={(e) => setRangeMax(Math.max(Number(e.target.value), rangeMin))}
-            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer"
-          />
-        </div>
-      </div>
-
-      {/* Mode selector */}
-      <div className="flex items-center gap-3">
-        <span className="text-xs text-slate-400">Show:</span>
-        <select
-          value={showOutside ? "outside" : "inside"}
-          onChange={(e) => setShowOutside(e.target.value === "outside")}
-          className="bg-slate-900 text-slate-200 text-xs rounded px-2 py-1 border border-slate-600 focus:outline-none focus:border-orange-500"
-        >
-          <option value="inside">Episodes in range</option>
-          <option value="outside">Episodes outside range</option>
-        </select>
-        <span className="text-xs text-slate-500 tabular-nums ml-auto">{ids.length} episode{ids.length !== 1 ? "s" : ""}</span>
-      </div>
-
-      {/* Results box */}
-      <div className="relative bg-slate-900/70 rounded-md border border-slate-700 p-3 max-h-40 overflow-y-auto">
-        <button
-          onClick={handleCopy}
-          className="sticky top-0 float-right ml-2 p-1.5 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-400 hover:text-slate-200 transition-colors backdrop-blur-sm"
-          title="Copy to clipboard"
-        >
-          {copied ? (
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-green-400"><polyline points="20 6 9 17 4 12" /></svg>
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
-          )}
-        </button>
-        <p className="text-sm text-slate-300 tabular-nums leading-relaxed">
-          {ids.length > 0 ? ids.join(", ") : <span className="text-slate-500 italic">No episodes match</span>}
-        </p>
-      </div>
-    </div>
-  );
-}
-
 const StatsPanel: React.FC<StatsPanelProps> = ({
   datasetInfo,
   episodeId,
@@ -251,36 +148,6 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
               <Card label="Median" value={`${els.medianEpisodeLength}s`} />
               <Card label="Std Dev" value={`${els.stdEpisodeLength}s`} />
             </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <p className="text-xs text-slate-400 uppercase tracking-wide mb-2">Top 5 Shortest</p>
-                <table className="w-full text-sm">
-                  <tbody>
-                    {els.shortestEpisodes.map((ep) => (
-                      <tr key={ep.episodeIndex} className="border-b border-slate-800/60">
-                        <td className="py-1 text-slate-300">ep {ep.episodeIndex}</td>
-                        <td className="py-1 text-right tabular-nums font-semibold">{ep.lengthSeconds}s</td>
-                        <td className="py-1 text-right tabular-nums text-slate-500 text-xs">{ep.frames} fr</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              <div>
-                <p className="text-xs text-slate-400 uppercase tracking-wide mb-2">Top 5 Longest</p>
-                <table className="w-full text-sm">
-                  <tbody>
-                    {els.longestEpisodes.map((ep) => (
-                      <tr key={ep.episodeIndex} className="border-b border-slate-800/60">
-                        <td className="py-1 text-slate-300">ep {ep.episodeIndex}</td>
-                        <td className="py-1 text-right tabular-nums font-semibold">{ep.lengthSeconds}s</td>
-                        <td className="py-1 text-right tabular-nums text-slate-500 text-xs">{ep.frames} fr</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
           </div>
 
           {els.episodeLengthHistogram.length > 0 && (
@@ -295,39 +162,8 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
             </div>
           )}
 
-          <EpisodeLengthFilter episodes={els.allEpisodeLengths} />
         </>
       )}
-
-      {/* Column min/max table */}
-      {columnMinMax && columnMinMax.length > 0 && (
-        <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
-          <h3 className="text-sm font-semibold text-slate-200 mb-4">
-            Column Min / Max
-            <span className="text-xs text-slate-500 ml-2 font-normal">(episode {episodeId})</span>
-          </h3>
-          <div className="overflow-x-auto max-h-96 overflow-y-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="text-slate-400 border-b border-slate-700 sticky top-0 bg-slate-800">
-                  <th className="text-left py-2 pr-4 font-medium">Column</th>
-                  <th className="text-right py-2 px-4 font-medium">Min</th>
-                  <th className="text-right py-2 pl-4 font-medium">Max</th>
-                </tr>
-              </thead>
-              <tbody>
-                {columnMinMax.map((col) => (
-                  <tr key={col.column} className="border-b border-slate-800/60 hover:bg-slate-700/20">
-                    <td className="py-1.5 pr-4 text-slate-300 truncate max-w-xs" title={col.column}>{col.column}</td>
-                    <td className="py-1.5 px-4 text-right tabular-nums text-slate-300">{col.min}</td>
-                    <td className="py-1.5 pl-4 text-right tabular-nums text-slate-300">{col.max}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

src/context/flagged-episodes-context.tsx

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