Upload folder using huggingface_hub

docs/managing_presets.md

@@ -0,0 +1,194 @@
+# Managing RACA-VIS-PRESETS Programmatically
+
+## Overview
+
+The agg_visualizer stores presets in the HuggingFace dataset repo `your-org/RACA-VIS-PRESETS`. Each visualizer type has its own JSON file:
+
+| Type | File | Extra Fields |
+|------|------|-------------|
+| `model` | `model_presets.json` | `column` (default: `"model_responses"`) |
+| `arena` | `arena_presets.json` | none |
+| `rlm` | `rlm_presets.json` | `config` (default: `"rlm_call_traces"`) |
+| `harbor` | `harbor_presets.json` | none |
+
+## Preset Schema
+
+Every preset has these base fields:
+
+```json
+{
+  "id": "8-char hex",
+  "name": "Human-readable name",
+  "repo": "org/dataset-name",
+  "split": "train"
+}
+```
+
+Plus type-specific fields listed above.
+
+## How to Add Presets from Experiment Markdown Files
+
+### Step 1: Identify repos and their visualizer type
+
+Read the experiment markdown file(s) and extract all HuggingFace repo links. Categorize each:
+
+- **Countdown / MuSR datasets** (model response traces) → `model` type, set `column: "response"`
+- **FrozenLake / arena datasets** (game episodes) → `arena` type
+- **Harbor / SWE-bench datasets** → `harbor` type
+- **RLM call traces** → `rlm` type, set `config: "rlm_call_traces"`
+
+### Step 2: Download existing presets from HF
+
+```python
+from huggingface_hub import hf_hub_download
+import json
+
+PRESETS_REPO = "your-org/RACA-VIS-PRESETS"
+
+def load_hf_presets(vis_type):
+    try:
+        path = hf_hub_download(PRESETS_REPO, f"{vis_type}_presets.json", repo_type="dataset")
+        with open(path) as f:
+            return json.load(f)
+    except Exception:
+        return []
+
+existing_model = load_hf_presets("model")
+existing_arena = load_hf_presets("arena")
+# ... etc for rlm, harbor
+
+# Build set of repos already present
+existing_repos = set()
+for presets_list in [existing_model, existing_arena]:
+    for p in presets_list:
+        existing_repos.add(p["repo"])
+```
+
+### Step 3: Build new presets, skipping duplicates
+
+```python
+import uuid
+
+new_presets = []  # list of (vis_type, name, repo)
+
+# Example: adding strategy compliance countdown presets
+new_presets.append(("model", "SC Countdown K2-Inst TreeSearch",
+    "your-org/t1-strategy-countdown-treesearch-kimi-k2-instruct-kimi-inst"))
+
+# ... add all repos from the markdown ...
+
+# Filter out existing
+to_add = {"model": [], "arena": [], "rlm": [], "harbor": []}
+for vis_type, name, repo in new_presets:
+    if repo in existing_repos:
+        continue  # skip duplicates
+    preset = {
+        "id": uuid.uuid4().hex[:8],
+        "name": name,
+        "repo": repo,
+        "split": "train",
+    }
+    if vis_type == "model":
+        preset["column"] = "response"
+    elif vis_type == "rlm":
+        preset["config"] = "rlm_call_traces"
+    to_add[vis_type].append(preset)
+```
+
+### Step 4: Merge and upload to HF
+
+```python
+import tempfile, os
+from huggingface_hub import HfApi
+
+api = HfApi()
+
+# Merge new presets with existing
+final_model = existing_model + to_add["model"]
+final_arena = existing_arena + to_add["arena"]
+
+for vis_type, presets in [("model", final_model), ("arena", final_arena)]:
+    if not presets:
+        continue
+    with tempfile.NamedTemporaryFile("w", suffix=".json", delete=False) as f:
+        json.dump(presets, f, indent=2)
+        tmp = f.name
+    api.upload_file(
+        path_or_fileobj=tmp,
+        path_in_repo=f"{vis_type}_presets.json",
+        repo_id=PRESETS_REPO,
+        repo_type="dataset",
+    )
+    os.unlink(tmp)
+```
+
+### Step 5: Sync the deployed HF Space
+
+After uploading to the HF dataset, tell the running Space to re-download presets:
+
+```bash
+curl -X POST "https://your-org-agg-trace-visualizer.hf.space/api/presets/sync"
+```
+
+This forces the Space to re-download all preset files from `RACA-VIS-PRESETS` without needing a restart or redeployment.
+
+### Step 6: Sync local preset files
+
+```python
+import shutil
+from huggingface_hub import hf_hub_download
+
+local_dir = Path(__file__).parent.parent / "backend" / "presets"
+for vis_type in ["model", "arena", "rlm", "harbor"]:
+    try:
+        path = hf_hub_download(PRESETS_REPO, f"{vis_type}_presets.json", repo_type="dataset")
+        shutil.copy2(path, f"{local_dir}/{vis_type}_presets.json")
+    except Exception:
+        pass
+```
+
+## Naming Convention
+
+Preset names follow this pattern to be descriptive and avoid future conflicts:
+
+```
+{Experiment} {Task} {Model} {Variant}
+```
+
+### Experiment prefixes
+- `SC` — Strategy Compliance
+- `Wing` — Wingdings Compliance
+
+### Model abbreviations
+- `K2-Inst` — Kimi-K2-Instruct (RLHF)
+- `K2-Think` — Kimi-K2-Thinking (RLVR)
+- `Q3-Inst` — Qwen3-Next-80B Instruct (RLHF)
+- `Q3-Think` — Qwen3-Next-80B Thinking (RLVR)
+
+### Task names
+- `Countdown` — 8-arg arithmetic countdown
+- `MuSR` — MuSR murder mysteries
+- `FrozenLake` — FrozenLake grid navigation
+
+### Variant names (strategy compliance only)
+- `TreeSearch` / `Baseline` / `Anti` — countdown tree search experiment
+- `CritFirst` / `Anti-CritFirst` — criterion-first cross-cutting analysis
+- `Counterfactual` / `Anti-Counterfactual` — counterfactual hypothesis testing
+- `BackChain` — backward chaining (FrozenLake)
+
+### Examples
+
+```
+SC Countdown K2-Inst TreeSearch       # Strategy compliance, countdown, Kimi instruct, tree search variant
+SC MuSR Q3-Think Counterfactual       # Strategy compliance, MuSR, Qwen thinking, counterfactual variant
+SC FrozenLake K2-Think BackChain      # Strategy compliance, FrozenLake, Kimi thinking, backward chaining
+Wing Countdown Q3-Inst                # Wingdings, countdown, Qwen instruct (no variant — wingdings has one condition)
+Wing MuSR K2-Think                    # Wingdings, MuSR, Kimi thinking
+```
+
+## Important Notes
+
+- **Always check for existing repos** before adding. The script above uses `existing_repos` set to skip duplicates.
+- **The `column` field matters for model presets.** Strategy compliance and wingdings datasets use `"response"` as the response column, not the default `"model_responses"`.
+- **Local files are fallback cache.** The agg_visualizer downloads from HF on startup and caches locally. After uploading to HF, sync the local files so the running app picks up changes without restart (or hit the `/api/presets/sync` endpoint).
+- **Don't modify rlm or harbor presets** unless adding datasets of those types. The script above only touches model and arena.

docs/plans/2026-03-07-research-dashboard-design.md

@@ -0,0 +1,86 @@
+# Research Dashboard Design
+
+**Date:** 2026-03-07
+**Status:** Approved
+
+## Overview
+
+Extend the existing agg_visualizer into a parent "Research Dashboard" website with a top-level navigation bar. The current visualizer becomes one page; a new Experiments page provides a control pane for tracking experiments, hypotheses, runs, and artifacts.
+
+Deployed on HuggingFace Spaces (same Space as the current visualizer).
+
+## Audience
+
+Primarily the researcher + advisor. May expand to a small team later.
+
+## Architecture
+
+### Navigation
+- Top-level nav bar: `Experiments | Visualizer` (future: Research Map, Knowledge Base)
+- State-driven view switching (useState), not URL routing (HF Spaces doesn't support deep-linking)
+- Current visualizer tabs (Model Trace, Arena, RLM, etc.) nest inside the Visualizer page unchanged
+
+### Data Storage
+- JSON files in HF dataset repo `your-org/RACA_DASHBOARD`
+- Three files: `experiments.json`, `runs.json`, `sub_experiments.json`
+- In-memory cache with async HF upload (same pattern as presets.py)
+- Local JSON fallback in `backend/data/`
+
+### Backend API
+Blueprint at `/api/experiments/`:
+
+| Method | Path | Purpose |
+|--------|------|---------|
+| GET | `/` | List all experiments |
+| POST | `/` | Create experiment |
+| GET | `/:id` | Full detail (includes runs + subs) |
+| PUT | `/:id` | Update experiment |
+| DELETE | `/:id` | Delete experiment |
+| POST | `/:id/runs` | Add run record |
+| PUT | `/:id/runs/:run_id` | Update run |
+| DELETE | `/:id/runs/:run_id` | Delete run |
+| POST | `/:id/subs` | Add sub-experiment |
+| PUT | `/:id/subs/:sub_id` | Update sub-experiment |
+| DELETE | `/:id/subs/:sub_id` | Delete sub-experiment |
+| POST | `/sync` | Force re-download from HF |
+| POST | `/import` | Bulk import (experiment.yaml format) |
+
+### Data Model
+
+**Experiment:**
+- id, name, research_project, hypothesis (statement, type, status, success_criteria)
+- stage, completeness (0-5), models[], tasks[], tags[]
+- hf_repos[] (repo, description, date), wandb_url, notes (markdown)
+- created, updated timestamps
+
+**Run Record:**
+- id, experiment_id, condition, model, cluster, status
+- hf_dataset, metrics (dict), timestamp, notes
+
+**Sub-experiment:**
+- id, experiment_id, name, hypothesis, status
+- content_md (full markdown report), hf_repos[]
+- created, updated timestamps
+
+### Frontend
+
+Three drill-down levels:
+
+1. **Experiment List** — Cards with name, hypothesis, status badge, completeness, tags, last updated. Sort/filter controls.
+2. **Experiment Detail** — Hypothesis header, tabbed views (Overview, Runs, Datasets, Sub-experiments). Inline editing.
+3. **Sub-experiment View** — Breadcrumb, header, markdown-rendered body, HF repos, edit toggle.
+
+### Integration Points
+- exp-runner v2 pushes data via `/api/experiments/import`
+- Flexible ingestion — API accepts data from any source
+- No local filesystem dependency at runtime
+
+## Future Pages (Phase 2+)
+- **Research Map** — Graph/board view of research directions and experiment relationships
+- **Knowledge Base** — Searchable wiki of findings, notes, HF repos
+
+## Tech Stack
+- Backend: Flask (existing)
+- Frontend: React + Vite + Tailwind + Zustand (existing)
+- Deployment: Docker on HuggingFace Spaces (existing)
+- Storage: HF dataset repo as JSON store

frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RACA Dashboard</title>
+  </head>
+  <body class="bg-gray-950 text-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "agg-visualizer",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "apache-arrow": "^21.1.0",
+    "hyparquet": "^1.25.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.3"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/src/App.tsx

@@ -0,0 +1,67 @@
+import { lazy, Suspense } from "react";
+import { useHashRoute, navigateTo, useCopyLink } from "./hashRouter";
+import ThemeToggle, { useTheme } from "./ThemeToggle";
+
+const VisualizerApp = lazy(() => import("./visualizer/VisualizerApp"));
+const ExperimentsApp = lazy(() => import("./experiments/ExperimentsApp"));
+
+type PageId = "experiments" | "visualizer";
+
+const PAGES: { id: PageId; label: string }[] = [
+  { id: "experiments", label: "Experiments" },
+  { id: "visualizer", label: "Visualizer" },
+];
+
+export default function App() {
+  const route = useHashRoute();
+  const activePage: PageId = route.page === "viz" ? "visualizer" : "experiments";
+  const { copyLink, copied } = useCopyLink();
+  const { dark, toggle } = useTheme();
+
+  return (
+    <div className="h-screen flex flex-col bg-gray-950 text-gray-100">
+      {/* Top navigation bar */}
+      <div className="flex items-center border-b border-gray-700 bg-gray-900 px-4 shrink-0">
+        <span className="text-sm font-semibold text-gray-300 mr-6 py-2.5">
+          Research Dashboard
+        </span>
+        {PAGES.map((page) => (
+          <button
+            key={page.id}
+            onClick={() => navigateTo({ page: page.id === "visualizer" ? "viz" : "experiments" })}
+            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
+              activePage === page.id
+                ? "border-cyan-500 text-cyan-400"
+                : "border-transparent text-gray-500 hover:text-gray-300"
+            }`}
+          >
+            {page.label}
+          </button>
+        ))}
+        <div className="ml-auto flex items-center gap-3">
+          <ThemeToggle dark={dark} toggle={toggle} />
+          <button
+            onClick={copyLink}
+            className="px-2.5 py-1 text-xs font-medium rounded border border-gray-600 text-gray-400 hover:text-gray-200 hover:border-gray-400 transition-colors"
+          >
+            {copied ? "Copied!" : "Copy Link"}
+          </button>
+        </div>
+      </div>
+
+      {/* Active page */}
+      <div className="flex-1 overflow-hidden">
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center h-full text-gray-500">
+              Loading...
+            </div>
+          }
+        >
+          {activePage === "experiments" && <ExperimentsApp />}
+          {activePage === "visualizer" && <VisualizerApp />}
+        </Suspense>
+      </div>
+    </div>
+  );
+}

frontend/src/ThemeToggle.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+export function useTheme() {
+  const [dark, setDark] = useState(() => {
+    if (typeof window === "undefined") return true;
+    const stored = localStorage.getItem("raca-theme");
+    return stored ? stored === "dark" : true; // dark by default
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (dark) {
+      root.classList.add("dark");
+      root.classList.remove("light");
+    } else {
+      root.classList.add("light");
+      root.classList.remove("dark");
+    }
+    localStorage.setItem("raca-theme", dark ? "dark" : "light");
+  }, [dark]);
+
+  return { dark, toggle: () => setDark((d) => !d) };
+}
+
+export default function ThemeToggle({ dark, toggle }: { dark: boolean; toggle: () => void }) {
+  return (
+    <button
+      onClick={toggle}
+      className="px-2 py-1 text-xs rounded border border-gray-600 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
+      title={dark ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {dark ? "☀️" : "🌙"}
+    </button>
+  );
+}

frontend/src/config.ts

@@ -0,0 +1,10 @@
+/**
+ * Global configuration for the visualizer.
+ * Set HF_ORG via environment variable (VITE_HF_ORG) at build time,
+ * or override at runtime by setting window.__HF_ORG__.
+ */
+
+export const HF_ORG: string =
+  (typeof window !== "undefined" && (window as any).__HF_ORG__) ||
+  import.meta.env.VITE_HF_ORG ||
+  "your-org";

frontend/src/experiments/ExperimentsApp.tsx

@@ -0,0 +1,71 @@
+import { useExperimentsState } from "./store";
+import ExperimentList from "./components/ExperimentList";
+import ExperimentDetail from "./components/ExperimentDetail";
+import SubExperimentView from "./components/SubExperimentView";
+import NoteView from "./components/NoteView";
+
+export default function ExperimentsApp() {
+  const state = useExperimentsState();
+
+  if (state.loading && state.experiments.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-500">
+        Loading experiments...
+      </div>
+    );
+  }
+
+  if (state.error && state.experiments.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-gray-500">
+        <p className="text-red-400 mb-2">{state.error}</p>
+        <button
+          onClick={state.loadExperiments}
+          className="text-cyan-400 hover:text-cyan-300 text-sm"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (state.view.kind === "note" && state.currentNote && state.currentDetail) {
+    return (
+      <NoteView
+        note={state.currentNote}
+        experimentName={state.currentDetail.name}
+        onBack={() => state.navigateToDetail(state.view.kind === "note" ? state.view.expId : "")}
+      />
+    );
+  }
+
+  if (state.view.kind === "sub" && state.currentSub && state.currentDetail) {
+    return (
+      <SubExperimentView
+        sub={state.currentSub}
+        experimentName={state.currentDetail.name}
+        onBack={() => state.navigateToDetail(state.view.kind === "sub" ? state.view.expId : "")}
+        onRefresh={state.refreshDetail}
+      />
+    );
+  }
+
+  if (state.view.kind === "detail" && state.currentDetail) {
+    return (
+      <ExperimentDetail
+        experiment={state.currentDetail}
+        onBack={state.navigateToList}
+        onSelectNote={(noteId) => state.navigateToNote(state.view.kind === "detail" ? state.view.expId : "", noteId)}
+        onRefresh={state.refreshDetail}
+      />
+    );
+  }
+
+  return (
+    <ExperimentList
+      experiments={state.experiments}
+      onSelect={state.navigateToDetail}
+      onRefresh={state.loadExperiments}
+    />
+  );
+}

frontend/src/experiments/api.ts

@@ -0,0 +1,100 @@
+import type { Experiment, ExperimentDetail, SubExperiment, ExperimentNote, ActivityLogEntry, Artifact } from "./types";
+
+const BASE = "/api/experiments";
+
+async function fetchJSON<T>(url: string, opts?: RequestInit): Promise<T> {
+  const res = await fetch(url, {
+    headers: { "Content-Type": "application/json" },
+    ...opts,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error || res.statusText);
+  }
+  return res.json();
+}
+
+export const experimentsApi = {
+  list() {
+    return fetchJSON<Experiment[]>(`${BASE}/`);
+  },
+
+  get(id: string) {
+    return fetchJSON<ExperimentDetail>(`${BASE}/${id}`);
+  },
+
+  create(data: Partial<Experiment>) {
+    return fetchJSON<Experiment>(`${BASE}/`, {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+  },
+
+  update(id: string, data: Partial<Experiment>) {
+    return fetchJSON<Experiment>(`${BASE}/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+    });
+  },
+
+  delete(id: string) {
+    return fetchJSON<{ status: string }>(`${BASE}/${id}`, { method: "DELETE" });
+  },
+
+  createSub(expId: string, data: Partial<SubExperiment>) {
+    return fetchJSON<SubExperiment>(`${BASE}/${expId}/subs`, {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+  },
+
+  updateSub(expId: string, subId: string, data: Partial<SubExperiment>) {
+    return fetchJSON<SubExperiment>(`${BASE}/${expId}/subs/${subId}`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+    });
+  },
+
+  deleteSub(expId: string, subId: string) {
+    return fetchJSON<{ status: string }>(`${BASE}/${expId}/subs/${subId}`, { method: "DELETE" });
+  },
+
+  // Notes
+  createNote(expId: string, data: Partial<ExperimentNote>) {
+    return fetchJSON<ExperimentNote>(`${BASE}/${expId}/notes`, {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+  },
+
+  updateNote(expId: string, noteId: string, data: Partial<ExperimentNote>) {
+    return fetchJSON<ExperimentNote>(`${BASE}/${expId}/notes/${noteId}`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+    });
+  },
+
+  deleteNote(expId: string, noteId: string) {
+    return fetchJSON<{ status: string }>(`${BASE}/${expId}/notes/${noteId}`, { method: "DELETE" });
+  },
+
+  sync() {
+    return fetchJSON<{ status: string }>(`${BASE}/sync`, { method: "POST" });
+  },
+
+  getSummary() {
+    return fetchJSON<{ content_md: string; updated: string }>(`${BASE}/summary`);
+  },
+
+  getActivityLog(expId: string, filters?: { scope?: string; type?: string }) {
+    const params = new URLSearchParams();
+    if (filters?.scope) params.set("scope", filters.scope);
+    if (filters?.type) params.set("type", filters.type);
+    const qs = params.toString();
+    return fetchJSON<ActivityLogEntry[]>(`${BASE}/${expId}/activity-log${qs ? `?${qs}` : ""}`);
+  },
+
+  getArtifacts(expId: string) {
+    return fetchJSON<Artifact[]>(`${BASE}/${expId}/artifacts`);
+  },
+};

frontend/src/experiments/components/ArtifactsTab.tsx

@@ -0,0 +1,343 @@
+import { useState, useEffect, useCallback } from "react";
+import type { Artifact, ArtifactType, HfRepo, RunRecord } from "../types";
+import { HF_ORG } from "../../config";
+import TableViewer from "./viewers/TableViewer";
+import PlotlyViewer from "./viewers/PlotlyViewer";
+import ImageViewer from "./viewers/ImageViewer";
+import YamlViewer from "./viewers/YamlViewer";
+import HeatmapViewer from "./viewers/HeatmapViewer";
+
+const ARTIFACT_TYPE_COLORS: Record<ArtifactType, string> = {
+  input_data: "bg-cyan-900/50 text-cyan-300 border border-cyan-700/50",
+  inference_output: "bg-blue-900/50 text-blue-300 border border-blue-700/50",
+  training_config: "bg-amber-900/50 text-amber-300 border border-amber-700/50",
+  canary_output: "bg-yellow-900/50 text-yellow-300 border border-yellow-700/50",
+  eval_result: "bg-emerald-900/50 text-emerald-300 border border-emerald-700/50",
+  processed_data: "bg-purple-900/50 text-purple-300 border border-purple-700/50",
+};
+
+const ARTIFACT_TYPE_LABELS: Record<ArtifactType, string> = {
+  input_data: "input data",
+  inference_output: "inference output",
+  training_config: "training config",
+  canary_output: "canary output",
+  eval_result: "eval result",
+  processed_data: "processed data",
+};
+
+interface ArtifactsTabProps {
+  artifacts: Artifact[];
+  hfRepos: HfRepo[];
+  runs: RunRecord[];
+  onOpenArtifact: (artifact: Artifact) => void;
+}
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-3.5 w-3.5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+      />
+    </svg>
+  );
+}
+
+function ArtifactCard({
+  artifact,
+  onOpen,
+}: {
+  artifact: Artifact;
+  onOpen: (a: Artifact) => void;
+}) {
+  const typeColorClass =
+    artifact.artifact_type
+      ? ARTIFACT_TYPE_COLORS[artifact.artifact_type]
+      : "bg-gray-800 text-gray-400 border border-gray-700";
+  const typeLabel =
+    artifact.artifact_type
+      ? ARTIFACT_TYPE_LABELS[artifact.artifact_type]
+      : "unknown";
+
+  const fullName = artifact.dataset_name.includes("/") ? artifact.dataset_name : `${HF_ORG}/${artifact.dataset_name}`;
+  const hfUrl = `https://huggingface.co/datasets/${fullName}`;
+  const shortName = artifact.dataset_name.split("/").pop() ?? artifact.dataset_name;
+  const createdDate = artifact.created
+    ? new Date(artifact.created).toLocaleDateString()
+    : null;
+
+  return (
+    <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col gap-2 hover:border-gray-700 transition-colors">
+      {/* Top row: name + badges */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <span className="text-sm text-gray-200 font-medium truncate block" title={artifact.dataset_name}>
+            {shortName}
+          </span>
+          {artifact.dataset_name.includes("/") && (
+            <span className="text-xs text-gray-600 truncate block" title={artifact.dataset_name}>
+              {artifact.dataset_name.split("/")[0]}/
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5 flex-shrink-0">
+          <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${typeColorClass}`}>
+            {typeLabel}
+          </span>
+        </div>
+      </div>
+
+      {/* Visualizer type */}
+      {artifact.visualizer_type && (
+        <div>
+          <span className="text-xs text-gray-500">
+            viewer: <span className="text-gray-400">{artifact.visualizer_type.replace(/_/g, " ")}</span>
+          </span>
+        </div>
+      )}
+
+      {/* Description */}
+      {artifact.description && (
+        <p className="text-xs text-gray-400 leading-relaxed line-clamp-2">{artifact.description}</p>
+      )}
+
+      {/* Bottom row: date + actions */}
+      <div className="flex items-center justify-between mt-1">
+        <span className="text-xs text-gray-600">{createdDate ?? ""}</span>
+        <div className="flex items-center gap-2">
+          <a
+            href={hfUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-500 hover:text-cyan-400 transition-colors"
+            title="Open on HuggingFace"
+          >
+            <ExternalLinkIcon />
+          </a>
+          <button
+            onClick={() => onOpen(artifact)}
+            className="text-xs bg-cyan-700/40 hover:bg-cyan-600/50 text-cyan-300 px-2 py-0.5 rounded transition-colors border border-cyan-700/30"
+          >
+            Open
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface RunGroupProps {
+  label: string;
+  artifacts: Artifact[];
+  defaultOpen?: boolean;
+  onOpenArtifact: (a: Artifact) => void;
+}
+
+function RunGroup({ label, artifacts, defaultOpen = true, onOpenArtifact }: RunGroupProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="mb-4">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-2 w-full text-left mb-2 group"
+      >
+        <span className={`text-xs transition-transform ${open ? "rotate-90" : ""} text-gray-500`}>▶</span>
+        <span className="text-sm font-medium text-gray-300 group-hover:text-gray-200 transition-colors">
+          {label}
+        </span>
+        <span className="text-xs text-gray-600">({artifacts.length})</span>
+      </button>
+      {open && (
+        <div className="grid gap-2 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 pl-4">
+          {artifacts.map((artifact) => (
+            <ArtifactCard
+              key={artifact.dataset_name}
+              artifact={artifact}
+              onOpen={onOpenArtifact}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const INLINE_VIEWER_TYPES = new Set(["table", "yaml_config", "plotly", "image", "heatmap"]);
+
+export default function ArtifactsTab({
+  artifacts,
+  hfRepos,
+  runs,
+  onOpenArtifact,
+}: ArtifactsTabProps) {
+  const [activeViewer, setActiveViewer] = useState<{
+    type: string;
+    repo: string;
+  } | null>(null);
+
+  // Close inline viewer on browser back
+  useEffect(() => {
+    const handler = (e: PopStateEvent) => {
+      if (activeViewer && !e.state?.artifactViewer) {
+        setActiveViewer(null);
+      }
+    };
+    window.addEventListener("popstate", handler);
+    return () => window.removeEventListener("popstate", handler);
+  }, [activeViewer]);
+
+  // Build a run label lookup: run_id → human label
+  const runLabelMap = new Map<string, string>(
+    runs.map((r) => [r.id, r.condition ? `${r.condition} (${r.id.slice(0, 6)})` : r.id.slice(0, 8)])
+  );
+
+  const handleOpenArtifact = useCallback((artifact: Artifact) => {
+    const vtype = artifact.visualizer_type ?? "table";
+    if (INLINE_VIEWER_TYPES.has(vtype)) {
+      window.history.pushState({ artifactViewer: true }, "");
+      setActiveViewer({ type: vtype, repo: artifact.dataset_name });
+    } else {
+      onOpenArtifact(artifact);
+    }
+  }, [onOpenArtifact]);
+
+  const closeViewer = useCallback(() => {
+    setActiveViewer(null);
+    window.history.back();
+  }, []);
+
+  const renderContent = () => {
+    // ---- Case 1: artifacts array non-empty — grouped view ----
+    if (artifacts.length > 0) {
+      // Group by run_id
+      const grouped = new Map<string | null, Artifact[]>();
+      for (const artifact of artifacts) {
+        const key = artifact.run_id ?? null;
+        if (!grouped.has(key)) grouped.set(key, []);
+        grouped.get(key)!.push(artifact);
+      }
+
+      // Collect groups (run_id non-null first, null/"Ungrouped" last)
+      const groupedEntries: { key: string | null; label: string; artifacts: Artifact[] }[] = [];
+      for (const [key, arts] of grouped.entries()) {
+        if (key !== null) {
+          const label = runLabelMap.get(key) ?? `Run ${key.slice(0, 8)}`;
+          groupedEntries.push({ key, label, artifacts: arts });
+        }
+      }
+      // Sort run groups by first artifact created date (newest first)
+      groupedEntries.sort((a, b) => {
+        const aDate = a.artifacts[0]?.created ?? "";
+        const bDate = b.artifacts[0]?.created ?? "";
+        return bDate.localeCompare(aDate);
+      });
+
+      const ungrouped = grouped.get(null) ?? [];
+
+      return (
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-sm font-medium text-gray-300">Artifacts</h2>
+            <span className="text-xs text-gray-500">{artifacts.length} total</span>
+          </div>
+
+          {groupedEntries.map(({ key, label, artifacts: arts }) => (
+            <RunGroup
+              key={key}
+              label={label}
+              artifacts={arts}
+              onOpenArtifact={handleOpenArtifact}
+            />
+          ))}
+
+          {ungrouped.length > 0 && (
+            <RunGroup
+              key="__ungrouped__"
+              label="Ungrouped"
+              artifacts={ungrouped}
+              defaultOpen={groupedEntries.length === 0}
+              onOpenArtifact={handleOpenArtifact}
+            />
+          )}
+        </div>
+      );
+    }
+
+    // ---- Case 2: no artifacts but hfRepos present — legacy fallback ----
+    if (hfRepos.length > 0) {
+      return (
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-sm font-medium text-gray-300">HuggingFace Datasets</h2>
+            <span className="text-xs text-gray-500 italic">legacy — no manifest entries</span>
+          </div>
+          <div className="grid gap-2">
+            {hfRepos.map((repo, i) => (
+              <div
+                key={`${repo.repo}-${i}`}
+                className="flex items-center justify-between bg-gray-900 rounded p-3 border border-gray-800"
+              >
+                <div>
+                  <a
+                    href={`https://huggingface.co/datasets/${repo.repo}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-cyan-400 hover:text-cyan-300 text-sm"
+                  >
+                    {repo.repo}
+                  </a>
+                  {repo.description && (
+                    <p className="text-xs text-gray-500 mt-0.5">{repo.description}</p>
+                  )}
+                </div>
+                <span className="text-xs text-gray-600">{repo.date || ""}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    }
+
+    // ---- Case 3: both empty ----
+    return (
+      <div className="flex items-center justify-center h-32">
+        <p className="text-sm text-gray-500 italic">No artifacts recorded yet.</p>
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative">
+      {renderContent()}
+
+      {activeViewer && (
+        <div className="absolute inset-0 z-10 bg-gray-900">
+          {activeViewer.type === "table" && (
+            <TableViewer datasetRepo={activeViewer.repo} onClose={closeViewer} />
+          )}
+          {activeViewer.type === "plotly" && (
+            <PlotlyViewer datasetRepo={activeViewer.repo} onClose={closeViewer} />
+          )}
+          {activeViewer.type === "image" && (
+            <ImageViewer datasetRepo={activeViewer.repo} onClose={closeViewer} />
+          )}
+          {activeViewer.type === "yaml_config" && (
+            <YamlViewer datasetRepo={activeViewer.repo} onClose={closeViewer} />
+          )}
+          {activeViewer.type === "heatmap" && (
+            <HeatmapViewer datasetRepo={activeViewer.repo} onClose={closeViewer} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/experiments/components/ExperimentDetail.tsx

@@ -0,0 +1,464 @@
+import { useState, useCallback } from "react";
+import type { Artifact, ExperimentDetail as ExperimentDetailType, ExperimentNote } from "../types";
+import { HF_ORG } from "../../config";
+import { deriveDisplayStatus, statusBadgeColor } from "../types";
+import { navigateTo, replaceRoute, parseHash } from "../../hashRouter";
+import Markdown from "./Markdown";
+import TimelineTab from "./TimelineTab";
+import ArtifactsTab from "./ArtifactsTab";
+
+type Tab = "overview" | "artifacts" | "notes" | "live" | "timeline" | "red_team_brief";
+
+const LIVE_JOB_STATUS_COLORS: Record<string, string> = {
+  pending: "text-gray-400",
+  running: "text-yellow-400",
+  completed: "text-green-400",
+  failed: "text-red-400",
+  blocked: "text-red-400",
+};
+
+const TIMELINE_DOT_COLORS: Record<string, string> = {
+  blocked: "bg-red-500",
+  failed: "bg-red-500",
+  error: "bg-red-500",
+  completed: "bg-green-500",
+  started: "bg-yellow-500",
+  submitted: "bg-blue-500",
+};
+
+interface Props {
+  experiment: ExperimentDetailType;
+  onBack: () => void;
+  onSelectNote: (noteId: string) => void;
+  onRefresh: () => void;
+}
+
+/** Group notes by their directory path */
+function groupNotesByDir(notes: ExperimentNote[]): Map<string, ExperimentNote[]> {
+  const groups = new Map<string, ExperimentNote[]>();
+  for (const note of notes) {
+    const relPath = note.relative_path || note.filename || "";
+    const dir = relPath.includes("/") ? relPath.substring(0, relPath.lastIndexOf("/")) : "(root)";
+    if (!groups.has(dir)) groups.set(dir, []);
+    groups.get(dir)!.push(note);
+  }
+  // Sort directories
+  return new Map([...groups.entries()].sort(([a], [b]) => a.localeCompare(b)));
+}
+
+const VALID_TABS = new Set<Tab>(["overview", "artifacts", "notes", "live", "timeline", "red_team_brief"]);
+
+function getInitialTab(): Tab {
+  const route = parseHash();
+  const t = route.params.get("tab");
+  if (t && VALID_TABS.has(t as Tab)) return t as Tab;
+  return "overview";
+}
+
+export default function ExperimentDetail({ experiment, onBack, onSelectNote, onRefresh }: Props) {
+  const [tab, _setTab] = useState<Tab>(getInitialTab);
+
+  const setTab = useCallback((t: Tab) => {
+    _setTab(t);
+    const route = parseHash();
+    const params = new URLSearchParams(route.params);
+    if (t === "overview") {
+      params.delete("tab");
+    } else {
+      params.set("tab", t);
+    }
+    replaceRoute({ params });
+  }, []);
+
+  const liveJobCount = Object.keys(experiment.live_jobs || {}).length;
+  const isFinished = !!experiment.zayne_findings;
+
+  const TABS: { id: Tab; label: string; count?: number }[] = [
+    { id: "overview", label: "Overview" },
+    ...(experiment.red_team_brief
+      ? [{ id: "red_team_brief" as Tab, label: "Red Team Brief" }]
+      : []),
+    ...(experiment.live_status || liveJobCount > 0
+      ? [{ id: "live" as Tab, label: "Live Jobs", count: liveJobCount }]
+      : []),
+    { id: "timeline", label: "Timeline", count: experiment.activity_log?.length || 0 },
+    { id: "artifacts", label: "Artifacts", count: experiment.artifacts?.length || experiment.hf_repos?.length || 0 },
+    { id: "notes", label: "Files", count: experiment.experiment_notes?.length || 0 },
+  ];
+
+  return (
+    <div className={tab === "overview" ? "h-full overflow-y-auto" : "h-full flex flex-col"}>
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-800">
+        <div className="flex items-center gap-2 mb-3">
+          <button
+            onClick={onBack}
+            className="text-gray-400 hover:text-gray-200 text-sm transition-colors"
+          >
+            &larr; Experiments
+          </button>
+        </div>
+        <div className="flex items-start justify-between">
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-lg font-semibold text-gray-200">{experiment.name}</h1>
+              {isFinished && (
+                <span className="text-xs px-2 py-0.5 rounded-full font-medium bg-emerald-900 text-emerald-300 border border-emerald-700">
+                  Finished
+                </span>
+              )}
+              {experiment.live_status && !isFinished && (
+                <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${statusBadgeColor(deriveDisplayStatus(experiment))}`}>
+                  {deriveDisplayStatus(experiment).replace("_", " ")}
+                </span>
+              )}
+            </div>
+            {experiment.live_message && (
+              <p className="text-xs text-cyan-400/80 mt-0.5">{experiment.live_message}</p>
+            )}
+            {experiment.zayne_summary ? (
+              <div className="mt-1 max-w-2xl">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-amber-400/80">Researcher's Summary</span>
+                <div className="text-sm text-gray-300 mt-0.5">
+                  <Markdown content={experiment.zayne_summary} />
+                </div>
+              </div>
+            ) : experiment.hypothesis?.statement ? (
+              <p className="text-sm text-gray-400 mt-1 max-w-2xl italic">
+                {experiment.hypothesis.statement}
+              </p>
+            ) : null}
+          </div>
+        </div>
+
+        {/* Detail tabs */}
+        <div className="flex gap-1 mt-4">
+          {TABS.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`px-3 py-1.5 text-sm rounded-t transition-colors ${
+                tab === t.id
+                  ? "bg-gray-800 text-gray-200 border border-gray-700 border-b-gray-800"
+                  : "text-gray-500 hover:text-gray-300"
+              }`}
+            >
+              {t.label}
+              {t.count !== undefined && (
+                <span className="ml-1 text-xs text-gray-500">({t.count})</span>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Tab content */}
+      <div className={tab === "overview" ? "p-6" : "flex-1 overflow-y-auto p-6"}>
+        {tab === "overview" && (
+          <div className="space-y-4">
+            {/* FINDINGS (above readme, only when filled) */}
+            {experiment.zayne_findings && (
+              <div className="border-l-4 border-emerald-500 bg-emerald-950/30 rounded-r p-4">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-emerald-400">Findings</span>
+                <div className="mt-2">
+                  <Markdown content={experiment.zayne_findings} />
+                </div>
+              </div>
+            )}
+
+            {/* Researcher's README */}
+            {experiment.zayne_readme && (
+              <div className="border-l-4 border-amber-500 bg-gray-900/80 rounded-r p-4">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-amber-400">Researcher's README</span>
+                <div className="mt-2">
+                  <Markdown content={experiment.zayne_readme} />
+                </div>
+              </div>
+            )}
+
+            {/* DECISIONS (below readme, only when filled) */}
+            {experiment.zayne_decisions && (
+              <div className="border-l-4 border-violet-500 bg-violet-950/30 rounded-r p-4">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-violet-400">Decisions</span>
+                <div className="mt-2">
+                  <Markdown content={experiment.zayne_decisions} />
+                </div>
+              </div>
+            )}
+
+            {/* Agent Notes (EXPERIMENT_README) - always shown */}
+            {experiment.notes && (
+              <div className="border-l-4 border-cyan-500 bg-gray-900/80 rounded-r p-4">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-cyan-400">Experiment Notes</span>
+                <div className="mt-2">
+                  <Markdown content={experiment.notes} />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {tab === "artifacts" && (
+          <ArtifactsTab
+            artifacts={experiment.artifacts || []}
+            hfRepos={experiment.hf_repos || []}
+            runs={experiment.runs || []}
+            onOpenArtifact={(artifact: Artifact) => {
+              const INLINE_TYPES = new Set(["table", "yaml_config", "plotly", "image"]);
+              if (!artifact.visualizer_type || INLINE_TYPES.has(artifact.visualizer_type)) {
+                return;
+              }
+              const vizTabMap: Record<string, string> = {
+                model_trace: "model",
+              };
+              const vizTab = vizTabMap[artifact.visualizer_type];
+              if (vizTab) {
+                const fullName = artifact.dataset_name.includes("/")
+                  ? artifact.dataset_name
+                  : `${HF_ORG}/${artifact.dataset_name}`;
+                navigateTo({
+                  page: "viz",
+                  tab: vizTab,
+                  params: new URLSearchParams({
+                    repos: fullName,
+                    from_exp: experiment.id,
+                  }),
+                });
+              }
+            }}
+          />
+        )}
+
+        {tab === "red_team_brief" && experiment.red_team_brief && (
+          <div>
+            <div className="border-l-4 border-cyan-500 bg-gray-900/80 rounded-r p-6">
+              <div className="flex items-center gap-2 mb-4">
+                <span className="text-red-400 text-lg">&#9888;</span>
+                <span className="text-[10px] font-bold uppercase tracking-wider text-cyan-400">Claude Code: Red Team Brief</span>
+              </div>
+              <Markdown content={experiment.red_team_brief} />
+            </div>
+          </div>
+        )}
+
+        {tab === "notes" && (
+          <div>
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-sm font-medium text-gray-300">Project Files</h2>
+              <span className="text-xs text-gray-500">
+                {experiment.experiment_notes?.length || 0} files
+              </span>
+            </div>
+
+            {(experiment.experiment_notes || []).length === 0 ? (
+              <p className="text-sm text-gray-500">No project files found.</p>
+            ) : (
+              <div className="space-y-4">
+                {[...groupNotesByDir(experiment.experiment_notes)].map(([dir, files]) => (
+                  <div key={dir}>
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-xs text-cyan-400/70 font-mono">{dir}/</span>
+                      <span className="text-xs text-gray-600">({files.length})</span>
+                    </div>
+                    <div className="grid gap-1 ml-3">
+                      {files.map((note) => (
+                        <button
+                          key={note.id}
+                          onClick={() => onSelectNote(note.id)}
+                          className="w-full text-left bg-gray-900 hover:bg-gray-800 border border-gray-800 hover:border-gray-700 rounded px-3 py-2 transition-colors group"
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <span className="text-xs text-gray-500">
+                                {note.filename.endsWith(".yaml") || note.filename.endsWith(".yml") ? "&#9881;" : "&#9776;"}
+                              </span>
+                              <span className="text-sm text-gray-300 group-hover:text-gray-200 font-mono">
+                                {note.filename}
+                              </span>
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {tab === "timeline" && (
+          <TimelineTab
+            entries={experiment.activity_log || []}
+            onArtifactClick={(datasetName) => console.log("artifact clicked:", datasetName)}
+          />
+        )}
+
+        {tab === "live" && (
+          <div className="space-y-6">
+            {/* Unreachable clusters warning */}
+            {experiment.unreachable_clusters && Object.keys(experiment.unreachable_clusters).length > 0 && (
+              <div className="bg-orange-900/20 border border-orange-800/50 rounded-lg p-3">
+                <h3 className="text-xs font-medium text-orange-400 uppercase tracking-wide mb-2">Unreachable Clusters</h3>
+                <div className="space-y-1">
+                  {Object.entries(experiment.unreachable_clusters).map(([cluster, info]) => (
+                    <div key={cluster} className="flex items-center justify-between text-sm">
+                      <span className="text-orange-300 font-medium">{cluster}</span>
+                      <span className="text-orange-400/70 text-xs">
+                        {info.reason} (since {new Date(info.since).toLocaleString()})
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Jobs table */}
+            <div>
+              <h2 className="text-sm font-medium text-gray-300 mb-3">Active Jobs</h2>
+              {liveJobCount === 0 ? (
+                <p className="text-sm text-gray-500">No live jobs tracked.</p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="text-xs text-gray-500 uppercase tracking-wide border-b border-gray-800">
+                        <th className="text-left py-2 px-2">ID</th>
+                        <th className="text-left py-2 px-2">Cluster</th>
+                        <th className="text-left py-2 px-2">GPUs</th>
+                        <th className="text-left py-2 px-2">Status</th>
+                        <th className="text-left py-2 px-2">Message</th>
+                        <th className="text-left py-2 px-2">ETA</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {Object.entries(experiment.live_jobs || {}).map(([jobId, job]) => (
+                        <tr
+                          key={jobId}
+                          className={`border-b border-gray-800/50 ${
+                            job.status === "blocked" ? "bg-red-900/10" :
+                            job.status === "failed" ? "bg-red-900/10" :
+                            "hover:bg-gray-900/50"
+                          }`}
+                        >
+                          <td className="py-2 px-2 text-gray-300 font-mono text-xs">
+                            {jobId}
+                            {job.slurm_job_id && (
+                              <span className="text-gray-600 ml-1">({job.slurm_job_id})</span>
+                            )}
+                          </td>
+                          <td className="py-2 px-2 text-gray-400">
+                            {job.cluster}
+                            {job.partition && (
+                              <span className="text-gray-600 text-xs ml-1">/{job.partition}</span>
+                            )}
+                          </td>
+                          <td className="py-2 px-2 text-gray-400">{job.gpus}</td>
+                          <td className={`py-2 px-2 font-medium ${LIVE_JOB_STATUS_COLORS[job.status] || "text-gray-400"}`}>
+                            {job.status}
+                            {job.blocker && (
+                              <span className="text-red-400/70 text-xs ml-1">
+                                ({job.blocker.reason})
+                              </span>
+                            )}
+                          </td>
+                          <td className="py-2 px-2 text-gray-400 text-xs max-w-xs truncate">
+                            {job.message || "-"}
+                          </td>
+                          <td className="py-2 px-2 text-gray-500 text-xs">
+                            {job.estimated_completion
+                              ? new Date(job.estimated_completion).toLocaleString()
+                              : "-"}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+
+            {/* Job metrics summary */}
+            {liveJobCount > 0 && (
+              <div>
+                <h2 className="text-sm font-medium text-gray-300 mb-3">Job Metrics</h2>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+                  {Object.entries(experiment.live_jobs || {}).map(([jobId, job]) =>
+                    Object.keys(job.metrics || {}).length > 0 ? (
+                      <div key={jobId} className="bg-gray-900 rounded p-3 border border-gray-800">
+                        <span className="text-xs text-gray-500 font-mono">{jobId}</span>
+                        <div className="mt-1 space-y-0.5">
+                          {Object.entries(job.metrics).map(([k, v]) => (
+                            <div key={k} className="flex justify-between text-xs">
+                              <span className="text-gray-400">{k}</span>
+                              <span className="text-gray-300 font-mono">
+                                {typeof v === "number" ? v.toFixed(3) : v}
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : null
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Timeline */}
+            <div>
+              <h2 className="text-sm font-medium text-gray-300 mb-3">Event Timeline</h2>
+              {(!experiment.live_history || experiment.live_history.length === 0) ? (
+                <p className="text-sm text-gray-500">No timeline events recorded.</p>
+              ) : (
+                <div className="space-y-0">
+                  {experiment.live_history.slice(-10).reverse().map((entry, i) => {
+                    const eventLower = entry.event.toLowerCase();
+                    const dotColor =
+                      TIMELINE_DOT_COLORS[eventLower] ||
+                      (eventLower.includes("block") || eventLower.includes("fail") || eventLower.includes("error")
+                        ? "bg-red-500"
+                        : "bg-gray-500");
+                    return (
+                      <div key={i} className="flex items-start gap-3 py-2 border-l-2 border-gray-800 pl-4 relative">
+                        <div className={`absolute -left-[5px] top-3 w-2 h-2 rounded-full ${dotColor}`} />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs font-medium text-gray-300">{entry.event}</span>
+                            {entry.cluster && (
+                              <span className="text-xs text-gray-500">{entry.cluster}</span>
+                            )}
+                            {entry.job_id && (
+                              <span className="text-xs text-gray-600 font-mono">{entry.job_id}</span>
+                            )}
+                          </div>
+                          {entry.message && (
+                            <p className="text-xs text-gray-400 mt-0.5 truncate">{entry.message}</p>
+                          )}
+                          <span className="text-xs text-gray-600">
+                            {new Date(entry.timestamp).toLocaleString()}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            {/* Timestamps */}
+            {(experiment.live_started_at || experiment.live_updated_at) && (
+              <div className="flex gap-6 text-xs text-gray-600 border-t border-gray-800 pt-3">
+                {experiment.live_started_at && (
+                  <span>Started: {new Date(experiment.live_started_at).toLocaleString()}</span>
+                )}
+                {experiment.live_updated_at && (
+                  <span>Last update: {new Date(experiment.live_updated_at).toLocaleString()}</span>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/experiments/components/ExperimentList.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import type { Experiment, LiveJobState } from "../types";
+import { deriveDisplayStatus, statusBadgeColor } from "../types";
+
+function jobSummaryText(jobs: Record<string, LiveJobState>): string {
+  const all = Object.values(jobs);
+  if (all.length === 0) return "";
+  const running = all.filter((j) => j.status === "running").length;
+  const blocked = all.filter((j) => j.status === "blocked").length;
+  const completed = all.filter((j) => j.status === "completed").length;
+  const parts: string[] = [];
+  if (running > 0) parts.push(`${running}/${all.length} running`);
+  if (blocked > 0) parts.push(`${blocked} blocked`);
+  if (completed > 0 && running === 0 && blocked === 0) parts.push(`${completed} completed`);
+  return parts.join(", ");
+}
+
+type SortKey = "updated" | "name" | "completeness";
+
+interface Props {
+  experiments: Experiment[];
+  onSelect: (id: string) => void;
+  onRefresh: () => void;
+}
+
+export default function ExperimentList({ experiments, onSelect, onRefresh }: Props) {
+  const [sortBy, setSortBy] = useState<SortKey>("updated");
+  const [filterFinished, setFilterFinished] = useState<"all" | "finished" | "active">("all");
+
+  const filtered = experiments.filter((e) => {
+    if (filterFinished === "all") return true;
+    const isFinished = !!e.zayne_findings;
+    return filterFinished === "finished" ? isFinished : !isFinished;
+  });
+
+  const sorted = [...filtered].sort((a, b) => {
+    switch (sortBy) {
+      case "updated":
+        return (b.updated || "").localeCompare(a.updated || "");
+      case "name":
+        return a.name.localeCompare(b.name);
+      case "completeness":
+        return (b.completeness || 0) - (a.completeness || 0);
+      default:
+        return 0;
+    }
+  });
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4 border-b border-gray-800">
+        <h1 className="text-lg font-semibold text-gray-200">Experiments</h1>
+        <div className="flex items-center gap-3">
+          {/* Filter */}
+          <select
+            value={filterFinished}
+            onChange={(e) => setFilterFinished(e.target.value as "all" | "finished" | "active")}
+            className="bg-gray-800 text-gray-300 text-sm rounded px-2 py-1.5 border border-gray-700"
+          >
+            <option value="all">All</option>
+            <option value="active">Active</option>
+            <option value="finished">Finished</option>
+          </select>
+
+          {/* Sort */}
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as SortKey)}
+            className="bg-gray-800 text-gray-300 text-sm rounded px-2 py-1.5 border border-gray-700"
+          >
+            <option value="updated">Last Updated</option>
+            <option value="name">Name</option>
+            <option value="completeness">Completeness</option>
+          </select>
+
+        </div>
+      </div>
+
+      {/* Experiment cards */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {sorted.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+            <p className="text-lg mb-2">No experiments found</p>
+            <p className="text-sm">Try a different filter</p>
+          </div>
+        ) : (
+          <div className="grid gap-3">
+            {sorted.map((exp) => {
+              const isFinished = !!exp.zayne_findings;
+              return (
+                <button
+                  key={exp.id}
+                  onClick={() => onSelect(exp.id)}
+                  className="w-full text-left bg-gray-900 hover:bg-gray-800 border border-gray-800 hover:border-gray-700 rounded-lg p-4 transition-colors"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        {isFinished && (
+                          <span className="text-xs px-2 py-0.5 rounded-full font-medium bg-emerald-900 text-emerald-300 border border-emerald-700">
+                            Finished
+                          </span>
+                        )}
+                        <h3 className="text-sm font-medium text-gray-200 truncate">
+                          {exp.name}
+                        </h3>
+                        {exp.live_status && !isFinished && (
+                          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${statusBadgeColor(deriveDisplayStatus(exp))}`}>
+                            {deriveDisplayStatus(exp).replace("_", " ")}
+                          </span>
+                        )}
+                      </div>
+                      {exp.live_message && (
+                        <p className="text-xs text-cyan-400/80 mt-0.5 truncate">
+                          {exp.live_message}
+                        </p>
+                      )}
+                      {/* Researcher's summary takes priority, fallback to hypothesis */}
+                      {exp.zayne_summary ? (
+                        <div className="mt-1">
+                          <span className="text-[9px] font-bold uppercase tracking-wider text-amber-400/70">Researcher's Summary</span>
+                          <p className="text-xs text-gray-300 line-clamp-2">
+                            {exp.zayne_summary}
+                          </p>
+                        </div>
+                      ) : exp.hypothesis?.statement ? (
+                        <p className="text-xs text-gray-400 mt-1 line-clamp-2 italic">
+                          {exp.hypothesis.statement}
+                        </p>
+                      ) : null}
+                      {exp.live_jobs && Object.keys(exp.live_jobs).length > 0 && (
+                        <div className="flex items-center gap-3 mt-2">
+                          <span className="text-xs text-gray-400">
+                            {jobSummaryText(exp.live_jobs)}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex flex-col items-end ml-4 shrink-0">
+                      <span className="text-xs text-gray-600">
+                        {exp.updated ? new Date(exp.updated).toLocaleDateString() : ""}
+                      </span>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/experiments/components/Markdown.tsx

@@ -0,0 +1,65 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import "katex/dist/katex.min.css";
+
+interface Props {
+  content: string;
+}
+
+export default function Markdown({ content }: Props) {
+  return (
+    <div className="break-words" style={{ overflowWrap: "anywhere" }}>
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+      components={{
+        h1: ({ children }) => <h1 className="text-xl font-bold text-gray-200 mb-3 mt-6 first:mt-0">{children}</h1>,
+        h2: ({ children }) => <h2 className="text-lg font-semibold text-gray-200 mb-2 mt-5 first:mt-0">{children}</h2>,
+        h3: ({ children }) => <h3 className="text-base font-semibold text-gray-300 mb-2 mt-4">{children}</h3>,
+        h4: ({ children }) => <h4 className="text-sm font-semibold text-gray-300 mb-1 mt-3">{children}</h4>,
+        p: ({ children }) => <p className="text-sm text-gray-300 mb-2 leading-relaxed whitespace-pre-wrap break-words">{children}</p>,
+        ul: ({ children }) => <ul className="list-disc list-inside text-sm text-gray-300 mb-2 space-y-0.5 ml-2">{children}</ul>,
+        ol: ({ children }) => <ol className="list-decimal list-inside text-sm text-gray-300 mb-2 space-y-0.5 ml-2">{children}</ol>,
+        li: ({ children }) => <li className="text-sm text-gray-300">{children}</li>,
+        a: ({ href, children }) => (
+          <a href={href} target="_blank" rel="noopener noreferrer" className="text-cyan-400 hover:text-cyan-300 underline">
+            {children}
+          </a>
+        ),
+        code: ({ className, children }) => {
+          const isBlock = className?.includes("language-");
+          if (isBlock) {
+            return (
+              <pre className="bg-gray-950 border border-gray-800 rounded p-3 mb-2 overflow-x-auto">
+                <code className="text-xs text-gray-300 font-mono">{children}</code>
+              </pre>
+            );
+          }
+          return <code className="bg-gray-800 text-cyan-300 text-xs px-1 py-0.5 rounded font-mono">{children}</code>;
+        },
+        pre: ({ children }) => <>{children}</>,
+        blockquote: ({ children }) => (
+          <blockquote className="border-l-2 border-gray-600 pl-3 my-2 text-sm text-gray-400 italic">{children}</blockquote>
+        ),
+        hr: () => <hr className="border-gray-700 my-4" />,
+        strong: ({ children }) => <strong className="text-gray-200 font-semibold">{children}</strong>,
+        em: ({ children }) => <em className="text-gray-400">{children}</em>,
+        table: ({ children }) => (
+          <div className="overflow-x-auto mb-3">
+            <table className="w-full text-sm border-collapse">{children}</table>
+          </div>
+        ),
+        thead: ({ children }) => <thead className="border-b border-gray-700">{children}</thead>,
+        tbody: ({ children }) => <tbody>{children}</tbody>,
+        tr: ({ children }) => <tr className="border-b border-gray-800/50">{children}</tr>,
+        th: ({ children }) => <th className="text-left py-1.5 px-2 text-xs text-gray-400 uppercase tracking-wide font-medium">{children}</th>,
+        td: ({ children }) => <td className="py-1.5 px-2 text-sm text-gray-300">{children}</td>,
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+    </div>
+  );
+}

frontend/src/experiments/components/NoteView.tsx

@@ -0,0 +1,43 @@
+import type { ExperimentNote } from "../types";
+import Markdown from "./Markdown";
+
+interface Props {
+  note: ExperimentNote;
+  experimentName: string;
+  onBack: () => void;
+}
+
+export default function NoteView({ note, experimentName, onBack }: Props) {
+  return (
+    <div className="h-full flex flex-col">
+      {/* Breadcrumb + header */}
+      <div className="px-6 py-4 border-b border-gray-800">
+        <div className="flex items-center gap-2 text-sm mb-3">
+          <button onClick={onBack} className="text-gray-400 hover:text-gray-200 transition-colors">
+            &larr; {experimentName}
+          </button>
+          <span className="text-gray-600">/</span>
+          <span className="text-gray-300">{note.title}</span>
+        </div>
+        <h1 className="text-lg font-semibold text-gray-200">{note.title}</h1>
+        {note.relative_path && (
+          <p className="text-xs text-gray-500 mt-1 font-mono">{note.relative_path}</p>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="border-l-4 border-cyan-500 bg-gray-900/80 rounded-r p-6">
+          <span className="text-[10px] font-bold uppercase tracking-wider text-cyan-400">Claude Code</span>
+          <div className="mt-3">
+            {note.content_md ? (
+              <Markdown content={note.content_md} />
+            ) : (
+              <span className="text-sm text-gray-600 italic">No content.</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/experiments/components/SubExperimentView.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import type { SubExperiment } from "../types";
+import { experimentsApi } from "../api";
+import Markdown from "./Markdown";
+
+interface Props {
+  sub: SubExperiment;
+  experimentName: string;
+  onBack: () => void;
+  onRefresh: () => void;
+}
+
+export default function SubExperimentView({ sub, experimentName, onBack, onRefresh }: Props) {
+  const [editing, setEditing] = useState(false);
+  const [content, setContent] = useState(sub.content_md || "");
+  const [hypothesis, setHypothesis] = useState(sub.hypothesis || "");
+  const [status, setStatus] = useState(sub.status || "active");
+  const [saving, setSaving] = useState(false);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await experimentsApi.updateSub(sub.experiment_id, sub.id, {
+        content_md: content,
+        hypothesis,
+        status,
+      });
+      setEditing(false);
+      onRefresh();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Breadcrumb + header */}
+      <div className="px-6 py-4 border-b border-gray-800">
+        <div className="flex items-center gap-2 text-sm mb-3">
+          <button onClick={onBack} className="text-gray-400 hover:text-gray-200 transition-colors">
+            &larr; {experimentName}
+          </button>
+          <span className="text-gray-600">/</span>
+          <span className="text-gray-300">{sub.name}</span>
+        </div>
+
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-lg font-semibold text-gray-200">{sub.name}</h1>
+            {editing ? (
+              <div className="flex items-center gap-2 mt-2">
+                <input
+                  value={hypothesis}
+                  onChange={(e) => setHypothesis(e.target.value)}
+                  placeholder="Hypothesis"
+                  className="bg-gray-900 text-gray-200 text-sm rounded px-2 py-1 border border-gray-700 outline-none flex-1"
+                />
+                <select
+                  value={status}
+                  onChange={(e) => setStatus(e.target.value)}
+                  className="bg-gray-800 text-gray-300 text-xs rounded px-2 py-1 border border-gray-700"
+                >
+                  <option value="active">active</option>
+                  <option value="concluded">concluded</option>
+                  <option value="inconclusive">inconclusive</option>
+                </select>
+              </div>
+            ) : (
+              <div className="flex items-center gap-3 mt-1">
+                {sub.hypothesis && (
+                  <p className="text-sm text-gray-400">{sub.hypothesis}</p>
+                )}
+                <span className={`text-xs px-2 py-0.5 rounded-full text-white ${
+                  status === "concluded" ? "bg-green-600" :
+                  status === "active" ? "bg-yellow-600" : "bg-gray-600"
+                }`}>
+                  {status}
+                </span>
+              </div>
+            )}
+          </div>
+          <div className="flex gap-2">
+            {editing ? (
+              <>
+                <button onClick={() => { setEditing(false); setContent(sub.content_md || ""); }}
+                  className="text-gray-400 hover:text-gray-200 text-sm px-3 py-1.5 rounded transition-colors">
+                  Cancel
+                </button>
+                <button onClick={handleSave} disabled={saving}
+                  className="bg-cyan-600 hover:bg-cyan-500 text-white text-sm font-medium px-3 py-1.5 rounded transition-colors">
+                  {saving ? "Saving..." : "Save"}
+                </button>
+              </>
+            ) : (
+              <button onClick={() => setEditing(true)}
+                className="text-gray-400 hover:text-gray-200 text-sm px-3 py-1.5 rounded border border-gray-700 transition-colors">
+                Edit
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-3xl">
+          {editing ? (
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              className="w-full bg-gray-900 text-gray-200 text-sm rounded px-4 py-3 border border-gray-700 focus:border-cyan-500 outline-none resize-y font-mono"
+              rows={30}
+              placeholder="Write your sub-experiment report in markdown..."
+            />
+          ) : (
+            <div className="bg-gray-900 rounded p-6 min-h-[300px]">
+              {sub.content_md ? (
+                <Markdown content={sub.content_md} />
+              ) : (
+                <span className="text-sm text-gray-600 italic">No content yet. Click Edit to add your sub-experiment report.</span>
+              )}
+            </div>
+          )}
+
+          {/* HF Repos */}
+          {(sub.hf_repos || []).length > 0 && (
+            <div className="mt-6">
+              <span className="text-xs text-gray-500 uppercase tracking-wide">Linked Datasets</span>
+              <div className="grid gap-2 mt-2">
+                {sub.hf_repos.map((repo, i) => (
+                  <a
+                    key={`${repo.repo}-${i}`}
+                    href={`https://huggingface.co/datasets/${repo.repo}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-cyan-400 hover:text-cyan-300 text-sm"
+                  >
+                    {repo.repo}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Timestamps */}
+          <div className="mt-6 flex gap-4 text-xs text-gray-600">
+            {sub.created && <span>Created: {new Date(sub.created).toLocaleDateString()}</span>}
+            {sub.updated && <span>Updated: {new Date(sub.updated).toLocaleDateString()}</span>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/experiments/components/SummaryFindingsView.tsx

@@ -0,0 +1,38 @@
+import Markdown from "./Markdown";
+
+interface Props {
+  content: string;
+  onBack: () => void;
+}
+
+export default function SummaryFindingsView({ content, onBack }: Props) {
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-800">
+        <div className="flex items-center gap-2 text-sm mb-3">
+          <button onClick={onBack} className="text-gray-400 hover:text-gray-200 transition-colors">
+            &larr; Experiments
+          </button>
+          <span className="text-gray-600">/</span>
+          <span className="text-gray-300">Findings & Summary</span>
+        </div>
+        <h1 className="text-lg font-semibold text-gray-200">Findings & Summary</h1>
+        <p className="text-xs text-gray-500 mt-1">Definitive statements on what has been learned from experiments</p>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-4xl">
+          <div className="bg-gray-900 rounded p-6">
+            {content ? (
+              <Markdown content={content} />
+            ) : (
+              <span className="text-sm text-gray-600 italic">No findings written yet.</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/experiments/components/TimelineTab.tsx

@@ -0,0 +1,228 @@
+import { useState, useMemo } from "react";
+import type { ActivityLogEntry, ActivityEntryType } from "../types";
+
+interface TimelineTabProps {
+  entries: ActivityLogEntry[];
+  onArtifactClick: (datasetName: string) => void;
+}
+
+// Deterministic color hash for run-scoped labels
+function scopeColor(scope: string): string {
+  if (scope === "debug") return "bg-gray-700 text-gray-300";
+  if (scope === "cross-run") return "bg-purple-900/60 text-purple-300";
+  if (scope === "meta") return "bg-blue-900/60 text-blue-300";
+
+  // Deterministic hash for other scopes (run labels etc.)
+  let hash = 0;
+  for (let i = 0; i < scope.length; i++) {
+    hash = (hash * 31 + scope.charCodeAt(i)) & 0xffff;
+  }
+  const palette = [
+    "bg-emerald-900/60 text-emerald-300",
+    "bg-amber-900/60 text-amber-300",
+    "bg-rose-900/60 text-rose-300",
+    "bg-teal-900/60 text-teal-300",
+    "bg-indigo-900/60 text-indigo-300",
+    "bg-fuchsia-900/60 text-fuchsia-300",
+    "bg-orange-900/60 text-orange-300",
+    "bg-lime-900/60 text-lime-300",
+  ];
+  return palette[hash % palette.length];
+}
+
+const TYPE_ICONS: Record<ActivityEntryType, string> = {
+  action: "▶",
+  result: "◆",
+  note: "✎",
+  milestone: "⚑",
+};
+
+const TYPE_LABELS: ActivityEntryType[] = ["action", "result", "note", "milestone"];
+
+function relativeTime(iso: string): string {
+  const now = Date.now();
+  const then = new Date(iso).getTime();
+  const diffMs = now - then;
+  if (isNaN(diffMs)) return iso;
+
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return `${diffSec}s ago`;
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDays = Math.floor(diffHr / 24);
+  return `${diffDays}d ago`;
+}
+
+export default function TimelineTab({ entries, onArtifactClick }: TimelineTabProps) {
+  const [scopeFilter, setScopeFilter] = useState<string>("all");
+  const [activeTypes, setActiveTypes] = useState<Set<ActivityEntryType>>(
+    new Set(TYPE_LABELS)
+  );
+
+  // Sorted most-recent-first (ensure stable order even if backend varies)
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+      ),
+    [entries]
+  );
+
+  const uniqueScopes = useMemo(() => {
+    const set = new Set<string>();
+    entries.forEach((e) => set.add(e.scope));
+    return Array.from(set).sort();
+  }, [entries]);
+
+  const filtered = useMemo(
+    () =>
+      sorted.filter(
+        (e) =>
+          (scopeFilter === "all" || e.scope === scopeFilter) &&
+          activeTypes.has(e.type)
+      ),
+    [sorted, scopeFilter, activeTypes]
+  );
+
+  function toggleType(t: ActivityEntryType) {
+    setActiveTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(t)) {
+        // Keep at least one type active
+        if (next.size > 1) next.delete(t);
+      } else {
+        next.add(t);
+      }
+      return next;
+    });
+  }
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-40 text-sm text-gray-500 italic">
+        No activity log entries yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Filter controls */}
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Scope dropdown */}
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-gray-500 uppercase tracking-wide">Scope</span>
+          <select
+            value={scopeFilter}
+            onChange={(e) => setScopeFilter(e.target.value)}
+            className="bg-gray-800 text-gray-300 text-xs rounded px-2 py-1 border border-gray-700 outline-none focus:border-cyan-500"
+          >
+            <option value="all">All</option>
+            {uniqueScopes.map((s) => (
+              <option key={s} value={s}>
+                {s}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Type filter chips */}
+        <div className="flex items-center gap-1">
+          <span className="text-xs text-gray-500 uppercase tracking-wide mr-1">Type</span>
+          {TYPE_LABELS.map((t) => (
+            <button
+              key={t}
+              onClick={() => toggleType(t)}
+              className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${
+                activeTypes.has(t)
+                  ? "bg-cyan-900/50 border-cyan-700 text-cyan-300"
+                  : "bg-gray-800 border-gray-700 text-gray-500 hover:text-gray-400"
+              }`}
+            >
+              {TYPE_ICONS[t]} {t}
+            </button>
+          ))}
+        </div>
+
+        <span className="text-xs text-gray-600 ml-auto flex items-center gap-2">
+          <span className="text-cyan-600">LLM-generated log</span>
+          <span>{filtered.length} of {entries.length}</span>
+        </span>
+      </div>
+
+      {/* Entries */}
+      {filtered.length === 0 ? (
+        <div className="text-sm text-gray-500 italic py-4">
+          No entries match the current filters.
+        </div>
+      ) : (
+        <div className="space-y-0 border-l-2 border-gray-800 pl-4">
+          {filtered.map((entry, i) => (
+            <div
+              key={i}
+              className="relative py-3 border-b border-gray-800/50 last:border-0"
+            >
+              {/* Timeline dot */}
+              <div className="absolute -left-[17px] top-4 w-2 h-2 rounded-full bg-gray-600" />
+
+              <div className="flex flex-wrap items-start gap-2">
+                {/* Timestamp */}
+                <span
+                  title={new Date(entry.timestamp).toISOString()}
+                  className="text-xs text-gray-600 shrink-0 mt-0.5 cursor-default"
+                >
+                  {relativeTime(entry.timestamp)}
+                </span>
+
+                {/* Scope badge */}
+                <span
+                  className={`text-xs px-2 py-0.5 rounded-full font-medium ${scopeColor(
+                    entry.scope
+                  )}`}
+                >
+                  {entry.scope}
+                </span>
+
+                {/* Type icon + label */}
+                <span className="text-xs text-gray-500 shrink-0 mt-0.5">
+                  {TYPE_ICONS[entry.type]}
+                </span>
+
+                {/* Author */}
+                <span
+                  className={`text-xs shrink-0 mt-0.5 font-medium ${
+                    entry.author === "agent"
+                      ? "text-cyan-500"
+                      : "text-amber-400"
+                  }`}
+                >
+                  {entry.author === "agent" ? "Claude Code" : "Researcher"}
+                </span>
+              </div>
+
+              {/* Message */}
+              <p className="text-sm text-gray-300 mt-1">{entry.message}</p>
+
+              {/* Artifact chips */}
+              {entry.artifacts && entry.artifacts.length > 0 && (
+                <div className="flex flex-wrap gap-1 mt-2">
+                  {entry.artifacts.map((ds) => (
+                    <button
+                      key={ds}
+                      onClick={() => onArtifactClick(ds)}
+                      className="text-xs px-2 py-0.5 rounded-full bg-cyan-900/40 border border-cyan-800/60 text-cyan-400 hover:bg-cyan-900/70 hover:text-cyan-300 transition-colors"
+                    >
+                      {ds}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/experiments/components/viewers/HeatmapViewer.tsx

@@ -0,0 +1,2158 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { HF_ORG } from "../../../config";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface HeatmapViewerProps {
+  datasetRepo: string;
+  split?: string;
+  onClose: () => void;
+}
+
+interface SummaryRow {
+  model: string;
+  hf_model_name: string;
+  local_model_name: string;
+  task: string;
+  split: string;
+  self_tc: boolean;
+  neg_tc: boolean;
+  gpt2_tc: boolean;
+  finetuned: boolean;
+  training_config: string;
+  eval_variant: string;
+  gen_roc: number | null;
+  val_roc: number | null;
+  val_acc: number | null;
+  corr: number | null;
+  corr_pos: number | null;
+  corr_neg: number | null;
+  n_samples: number;
+  filename: string;
+}
+
+type Metric = "gen_roc" | "val_roc" | "val_acc" | "corr" | "corr_pos" | "corr_neg";
+type EvalVariant = "raw" | "tc" | "lenorm" | "tc+lenorm";
+type TCType = "none" | "self" | "neg" | "gpt2";
+type ViewMode = "heatmap" | "bar";
+type DomainFilter = "all" | "ood" | "in-domain";
+type ComparisonPreset = "all" | "training-effect" | "plus-tcself" | "tcself-vs-tcneg" | "tcself-vs-tcgpt2";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const HF_DATASETS_API = "https://datasets-server.huggingface.co";
+const METRICS: { key: Metric; label: string }[] = [
+  { key: "gen_roc", label: "Gen ROC" },
+  { key: "val_roc", label: "Val ROC" },
+  { key: "val_acc", label: "Val Acc" },
+  { key: "corr", label: "Correlation" },
+  { key: "corr_pos", label: "Corr (pos)" },
+  { key: "corr_neg", label: "Corr (neg)" },
+];
+const EVAL_VARIANTS: EvalVariant[] = ["raw", "tc", "lenorm", "tc+lenorm"];
+const TC_TYPES: { key: TCType; label: string }[] = [
+  { key: "self", label: "Self TC" },
+  { key: "neg", label: "Neg TC" },
+  { key: "gpt2", label: "GPT-2 TC" },
+];
+// Plotly default color cycle for bar charts
+const BAR_COLORS = [
+  "#636EFA", "#EF553B", "#00CC96", "#AB63FA", "#FFA15A",
+  "#19D3F3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52",
+];
+
+const TASK_FAMILIES = [
+  { key: "hypernym", label: "Hypernym", prefix: "hypernym-" },
+  { key: "ifeval", label: "IFEval", prefix: "ifeval-" },
+  { key: "plausibleqa", label: "PlausibleQA", prefix: "plausibleqa-" },
+  { key: "ambigqa", label: "AmbigQA", prefix: "ambigqa-" },
+];
+
+// Finetuned models must use force-same-x and the correct combined training dataset.
+// Hypernym and IFEval have single-task variants that must be excluded.
+function isValidFinetunedModel(row: SummaryRow): boolean {
+  if (!row.finetuned) return true;
+  const tc = row.training_config;
+  if (!tc.includes("force-same-x")) return false;
+  // Hypernym models must be trained on the combined "double" dataset
+  if (tc.includes("hypernym-") && !tc.includes("hypernym-concat-bananas-to-dogs-double")) return false;
+  // IFEval models must be trained on the concat dataset
+  if (tc.includes("ifeval-") && !tc.includes("ifeval-concat")) return false;
+  return true;
+}
+
+const COMPARISON_PRESETS: { key: ComparisonPreset; label: string }[] = [
+  { key: "all", label: "All models" },
+  { key: "training-effect", label: "Training Effect" },
+  { key: "plus-tcself", label: "+ TC-Self" },
+  { key: "tcself-vs-tcneg", label: "TC-Self vs TC-Neg" },
+  { key: "tcself-vs-tcgpt2", label: "TC-Self vs TC-GPT2" },
+];
+
+// Preset row sets:
+// Training Effect: Base + lo/semi × {Pref, SFT, Comb-v}
+const TRAINING_EFFECT_ROWS = new Set([
+  "Base", "Pref-lo", "SFT-lo", "Comb-v-lo", "Pref-semi", "SFT-semi", "Comb-v-semi",
+]);
+
+const DEFAULT_HIDDEN_ROWS = new Set([
+  "Pref-v-lo",
+  "Pref-tcself-v-lo",
+  "Pref-tcself-norm-lo",
+  "Pref-tcself-norm-v-lo",
+  "Comb-tcself-norm-v-lo",
+  "SFT-tcself-norm-semi",
+  "Comb-tcself-norm-v-semi",
+  // PlausibleQA models without lo/semi — not comparable
+  "Comb-tcself",
+  "Comb-tcself-v",
+  "SFT-tcself-v",
+]);
+
+// Strip a TC flag from a row label to get the "base" label for pairing
+const TC_FLAGS = ["tco", "tcself", "tcneg"];
+function stripTCFlag(label: string): string {
+  const parts = label.split("-");
+  return parts.filter((p) => !TC_FLAGS.includes(p)).join("-");
+}
+function hasTCFlag(label: string, flag: string): boolean {
+  return label.split("-").includes(flag);
+}
+
+// IFEval prompts 1-21 are OOD (test-only, never trained on)
+const IFEVAL_OOD_MAX = 21;
+
+// Hypernym: fixed in-domain / OOD split
+const HYPERNYM_IN_DOMAIN = new Set([
+  "bananas", "bazookas", "cabinets", "cars", "chairs", "crows", "diapers", "dogs",
+]);
+const HYPERNYM_OOD = new Set([
+  "ducklings", "elephants", "guns", "hammers", "helmets", "jackets", "kayaks", "kites", "mirrors",
+]);
+const HYPERNYM_VALID = new Set([...HYPERNYM_IN_DOMAIN, ...HYPERNYM_OOD]);
+
+// Valid eval task patterns — excludes training tasks like concat, bare family names, etc.
+function isValidEvalTask(task: string): boolean {
+  if (task.startsWith("hypernym-")) {
+    const subtask = task.replace("hypernym-", "");
+    return HYPERNYM_VALID.has(subtask);
+  }
+  if (task.startsWith("ifeval-")) {
+    return /^ifeval-prompt[_-]\d+$/.test(task);
+  }
+  if (task.startsWith("plausibleqa-")) {
+    return task !== "plausibleqa"; // must have a subtask
+  }
+  if (task.startsWith("ambigqa-")) {
+    return task !== "ambigqa"; // must have a subtask
+  }
+  // Bare family names without subtask suffix are training tasks
+  if (task === "ambigqa" || task === "plausibleqa" || task === "hypernym" || task === "ifeval") {
+    return false;
+  }
+  return true;
+}
+
+// ---------------------------------------------------------------------------
+// Color scale: RdYlGn for [0, 1] mapped to percentages
+// ---------------------------------------------------------------------------
+
+// Plotly RdYlGn colorscale stops (matches Plotly's built-in)
+const RDYLGN_STOPS: [number, [number, number, number]][] = [
+  [0.0, [165, 0, 38]],
+  [0.1, [215, 48, 39]],
+  [0.2, [244, 109, 67]],
+  [0.3, [253, 174, 97]],
+  [0.4, [254, 224, 139]],
+  [0.5, [255, 255, 191]],
+  [0.6, [217, 239, 139]],
+  [0.7, [166, 217, 106]],
+  [0.8, [102, 189, 99]],
+  [0.9, [26, 152, 80]],
+  [1.0, [0, 104, 55]],
+];
+
+function interpolateRdYlGn(t: number): string {
+  const clamped = Math.max(0, Math.min(1, t));
+  // Find the two stops to interpolate between
+  for (let i = 0; i < RDYLGN_STOPS.length - 1; i++) {
+    const [t0, c0] = RDYLGN_STOPS[i];
+    const [t1, c1] = RDYLGN_STOPS[i + 1];
+    if (clamped >= t0 && clamped <= t1) {
+      const f = (clamped - t0) / (t1 - t0);
+      const r = Math.round(c0[0] + f * (c1[0] - c0[0]));
+      const g = Math.round(c0[1] + f * (c1[1] - c0[1]));
+      const b = Math.round(c0[2] + f * (c1[2] - c0[2]));
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+  }
+  return `rgb(0, 104, 55)`;
+}
+
+function rdYlGn(value: number): string {
+  if (isNaN(value)) return "#f3f4f6"; // light gray for no data
+  return interpolateRdYlGn(value);
+}
+
+function corrColor(value: number): string {
+  if (isNaN(value)) return "#f3f4f6";
+  return rdYlGn((value + 1) / 2);
+}
+
+function textColor(bgValue: number, isCorr: boolean): string {
+  if (isNaN(bgValue)) return "#9ca3af";
+  const t = isCorr ? (bgValue + 1) / 2 : bgValue;
+  // Dark text on the light middle, white text on dark extremes
+  return t > 0.3 && t < 0.7 ? "#1f2937" : "#ffffff";
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getEvalTCType(row: SummaryRow): TCType {
+  if (row.self_tc) return "self";
+  if (row.neg_tc) return "neg";
+  if (row.gpt2_tc) return "gpt2";
+  return "none";
+}
+
+function getTrainingTCType(row: SummaryRow): TCType {
+  const tc = row.training_config;
+  if (tc.includes("tc-online") || tc.includes("tc_online")) return "gpt2";
+  if (tc.includes("tc-self") || tc.includes("tc_self")) return "self";
+  if (tc.includes("tc-neg") || tc.includes("tc_neg")) return "neg";
+  return "none";
+}
+
+/** For finetuned models, check that eval TC matches training TC */
+function isMatchedTC(row: SummaryRow): boolean {
+  if (!row.finetuned) return true; // base models: any eval TC is valid
+  const trainTC = getTrainingTCType(row);
+  if (trainTC === "none") return true; // model not trained with TC: any eval TC is valid
+  const evalTC = getEvalTCType(row);
+  return evalTC === trainTC;
+}
+
+function getTaskFamily(task: string): string | null {
+  for (const fam of TASK_FAMILIES) {
+    if (task.startsWith(fam.prefix)) return fam.key;
+  }
+  return null;
+}
+
+function parseIfevalPromptNum(task: string): number | null {
+  // ifeval-prompt_42 or ifeval-prompt-42
+  const m = task.match(/ifeval-prompt[_-](\d+)/);
+  return m ? parseInt(m[1], 10) : null;
+}
+
+function isOodTask(task: string, trainingConfig: string, family: string): boolean | null {
+  // Returns true=OOD, false=in-domain, null=unknown/not applicable
+  if (family === "plausibleqa" || family === "ambigqa") return true; // always OOD
+  if (family === "ifeval") {
+    const num = parseIfevalPromptNum(task);
+    if (num === null) return null;
+    return num <= IFEVAL_OOD_MAX;
+  }
+  if (family === "hypernym") {
+    const subtask = task.replace("hypernym-", "");
+    if (HYPERNYM_OOD.has(subtask)) return true;
+    if (HYPERNYM_IN_DOMAIN.has(subtask)) return false;
+    return null; // unknown subtask
+  }
+  return null;
+}
+
+function getTrainingFamily(config: string): string | null {
+  for (const fam of TASK_FAMILIES) {
+    if (config.includes(fam.prefix)) return fam.key;
+  }
+  return null;
+}
+
+function extractFloat(pattern: RegExp, text: string): number | null {
+  const m = text.match(pattern);
+  return m ? parseFloat(m[1]) : null;
+}
+
+function parseTrainingMode(config: string): string {
+  // Parse pref/nllv/nllg weights from training config.
+  // Defaults when absent: pref=1.0, nllv=0.0, nllg=0.0
+  const pref = extractFloat(/(?:^|[_-])pref(\d+(?:\.\d+)?)/, config) ?? 1.0;
+  const nllv = extractFloat(/nllv(\d+(?:\.\d+)?)/, config) ?? 0.0;
+  const nllg = extractFloat(/nllg(\d+(?:\.\d+)?)/, config) ?? 0.0;
+
+  const isSFT = pref === 0.0 && nllv === 1.0 && nllg === 1.0;
+  const isPref = nllv === 0.0 && nllg === 0.0;
+  const isComb = nllv === 1.0 && nllg === 1.0 && pref === 1.0;
+
+  if (isSFT) return "SFT";
+  if (isComb) return "Comb";
+  if (isPref) return "Pref";
+  return "Pref"; // fallback
+}
+
+function buildRowLabel(config: string): string {
+  const mode = parseTrainingMode(config);
+  const flags: string[] = [];
+
+  // TC flags are mutually exclusive
+  const hasTco = config.includes("_tc-online_") || config.includes("-tc-online-");
+  const hasTcself = config.includes("_tc-self_") || config.includes("-tc-self-");
+  const hasTcneg = config.includes("_tc-neg_") || config.includes("-tc-neg-");
+  const tcCount = [hasTco, hasTcself, hasTcneg].filter(Boolean).length;
+  if (tcCount > 1) {
+    console.warn(`Multiple TC flags in training config (expected at most 1): ${config}`);
+  }
+  if (hasTco) flags.push("tco");
+  if (hasTcself) flags.push("tcself");
+  if (hasTcneg) flags.push("tcneg");
+  // Optional independent flags
+  if (config.includes("_lenorm_") || config.includes("-lenorm-")) flags.push("norm");
+  if (config.includes("_vallogodds") || config.includes("-vallogodds")) flags.push("v");
+  // Data regime flags
+  if (config.includes("labelonly")) flags.push("lo");
+  if (config.includes("semi")) flags.push("semi");
+
+  const parts = [mode, ...flags];
+  return parts.join("-");
+}
+
+function getRowLabel(row: SummaryRow): string {
+  if (!row.finetuned) return "Base";
+  return buildRowLabel(row.training_config);
+}
+
+// Display-friendly row label: reorder to [regime, tc, mode, extras], spaces, Pref→RankAlign
+function displayRowLabel(label: string): string {
+  if (label === "Base") return "Base";
+  const parts = label.split("-");
+  const mode = parts[0] === "Pref" ? "RankAlign" : parts[0];
+  const flags = parts.slice(1);
+
+  // Extract known flag groups
+  const regime = flags.filter((f) => f === "lo" || f === "semi");
+  const tc = flags.filter((f) => f === "tcself" || f === "tcneg" || f === "tco");
+  const extras = flags.filter((f) => !["lo", "semi", "tcself", "tcneg", "tco"].includes(f));
+
+  // Order: regime, tc, mode, extras
+  return [...regime, ...tc, mode, ...extras].join(" ");
+}
+
+// JSX version with colored TC flags for use in HTML contexts
+function DisplayRowLabel({ label }: { label: string }) {
+  if (label === "Base") return <>Base</>;
+  const parts = label.split("-");
+  const mode = parts[0] === "Pref" ? "RankAlign" : parts[0];
+  const flags = parts.slice(1);
+  const regime = flags.filter((f) => f === "lo" || f === "semi");
+  const tc = flags.filter((f) => f === "tcself" || f === "tcneg" || f === "tco");
+  const extras = flags.filter((f) => !["lo", "semi", "tcself", "tcneg", "tco"].includes(f));
+  const tokens = [...regime, ...tc, mode, ...extras];
+
+  const tcColor: Record<string, string> = { tcself: "#f87171", tcneg: "#fb923c", tco: "#a78bfa" };
+
+  return (
+    <>
+      {tokens.map((t, i) => (
+        <span key={i}>
+          {i > 0 && " "}
+          {tcColor[t] ? <span style={{ color: tcColor[t] }}>{t}</span> : t}
+        </span>
+      ))}
+    </>
+  );
+}
+
+// SVG version with colored TC flags (uses tspan)
+function SvgRowLabel({ label, maxLen = 22 }: { label: string; maxLen?: number }) {
+  if (label === "Base") return <>Base</>;
+  const parts = label.split("-");
+  const mode = parts[0] === "Pref" ? "RankAlign" : parts[0];
+  const flags = parts.slice(1);
+  const regime = flags.filter((f) => f === "lo" || f === "semi");
+  const tc = flags.filter((f) => f === "tcself" || f === "tcneg" || f === "tco");
+  const extras = flags.filter((f) => !["lo", "semi", "tcself", "tcneg", "tco"].includes(f));
+  const tokens = [...regime, ...tc, mode, ...extras];
+  const full = tokens.join(" ");
+  const display = full.length > maxLen ? full.slice(0, maxLen - 2) + ".." : full;
+
+  const tcColor: Record<string, string> = { tcself: "#f87171", tcneg: "#fb923c", tco: "#a78bfa" };
+
+  // Re-tokenize the display string to color tc flags
+  const displayTokens = display.split(" ");
+  return (
+    <>
+      {displayTokens.map((t, i) => (
+        <tspan key={i} fill={tcColor[t] || undefined}>
+          {i > 0 && " "}{t}
+        </tspan>
+      ))}
+    </>
+  );
+}
+
+function mean(values: number[]): number {
+  if (values.length === 0) return NaN;
+  return values.reduce((a, b) => a + b, 0) / values.length;
+}
+
+function stdErr(values: number[]): number {
+  if (values.length < 2) return 0;
+  const m = mean(values);
+  const variance = values.reduce((sum, v) => sum + (v - m) ** 2, 0) / (values.length - 1);
+  return Math.sqrt(variance) / Math.sqrt(values.length);
+}
+
+// ---------------------------------------------------------------------------
+// Data fetching — downloads the parquet file directly (1 request, ~1MB)
+// ---------------------------------------------------------------------------
+
+function useDatasetRows(repo: string, _split: string) {
+  const [rows, setRows] = useState<SummaryRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [progress, setProgress] = useState({ loaded: 0, total: 0 });
+
+  const fetchAll = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    setRows([]);
+    try {
+      // Step 1: get the parquet file URL from HF datasets server
+      const metaUrl = `${HF_DATASETS_API}/parquet?dataset=${encodeURIComponent(repo)}`;
+      const metaResp = await fetch(metaUrl);
+      if (!metaResp.ok) {
+        throw new Error(`Failed to get parquet info: ${metaResp.status}`);
+      }
+      const metaData = await metaResp.json();
+      const parquetFiles = metaData.parquet_files ?? [];
+      const matchingFile = parquetFiles.find((f: { split: string }) => f.split === _split) ?? parquetFiles[0];
+      if (!matchingFile) {
+        throw new Error("No parquet files found for this dataset");
+      }
+
+      setProgress({ loaded: 0, total: matchingFile.size ?? 0 });
+
+      // Step 2: download the parquet file directly from HF (static file, no rate limits)
+      const parquetUrl: string = matchingFile.url;
+      const { asyncBufferFromUrl, parquetRead } = await import("hyparquet");
+
+      const file = await asyncBufferFromUrl({ url: parquetUrl });
+
+      // Step 3: parse all rows
+      const allRows: SummaryRow[] = [];
+      await parquetRead({
+        file,
+        rowFormat: "object",
+        onComplete: (data: Record<string, unknown>[]) => {
+          for (const row of data) {
+            allRows.push(row as unknown as SummaryRow);
+          }
+        },
+      });
+
+      setProgress({ loaded: allRows.length, total: allRows.length });
+      setRows(allRows);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [repo, _split]);
+
+  useEffect(() => {
+    fetchAll();
+  }, [fetchAll]);
+
+  return { rows, loading, error, progress, refetch: fetchAll };
+}
+
+// ---------------------------------------------------------------------------
+// Aggregation
+// ---------------------------------------------------------------------------
+
+interface AggCell {
+  mean: number;
+  se: number;
+  n: number;
+}
+
+/**
+ * Validate that each row label maps to exactly one model identity.
+ * Checks BOTH the base model (r.model) AND training_config.
+ * If two different models or configs produce the same row label,
+ * we're silently averaging different models — a critical bug.
+ *
+ * Returns null if clean, or an error message string if collisions found.
+ */
+function validateRowLabels(rows: SummaryRow[], groupByRow: (r: SummaryRow) => string): string | null {
+  // Check 1: all rows must come from the same base model
+  const baseModels = new Set(rows.map((r) => r.model));
+  if (baseModels.size > 1) {
+    return (
+      `DATA INTEGRITY ERROR: Multiple base models in the same view!\n` +
+      `Found ${baseModels.size} different models being mixed together:\n` +
+      Array.from(baseModels).map((m) => `  • ${m}`).join("\n") +
+      `\n\nThis means results from different models are being averaged. ` +
+      `Filter by a single model before displaying.`
+    );
+  }
+
+  // Check 2: each row label maps to exactly one training_config
+  const labelToConfigs = new Map<string, Set<string>>();
+  for (const row of rows) {
+    const label = groupByRow(row);
+    const config = row.finetuned ? row.training_config : "__base__";
+    if (!labelToConfigs.has(label)) labelToConfigs.set(label, new Set());
+    labelToConfigs.get(label)!.add(config);
+  }
+  const collisions: string[] = [];
+  for (const [label, configs] of labelToConfigs) {
+    if (configs.size > 1) {
+      collisions.push(
+        `"${label}" → ${configs.size} configs: ${Array.from(configs).join(", ")}`
+      );
+    }
+  }
+  if (collisions.length > 0) {
+    return (
+      `DATA INTEGRITY ERROR: Row label collisions detected!\n` +
+      `The following labels map to multiple different model configs ` +
+      `(their results are being silently averaged):\n\n` +
+      collisions.join("\n")
+    );
+  }
+
+  return null;
+}
+
+interface AggResult {
+  data: Map<string, Map<EvalVariant, AggCell>>;
+  validationError: string | null;
+}
+
+function aggregateData(
+  rows: SummaryRow[],
+  metric: Metric,
+  groupByRow: (r: SummaryRow) => string,
+): AggResult {
+  // Validate: each row label must correspond to one model
+  const validationError = validateRowLabels(rows, groupByRow);
+
+  // Group: rowLabel → evalVariant → values[]
+  const groups = new Map<string, Map<EvalVariant, number[]>>();
+
+  for (const row of rows) {
+    const rl = groupByRow(row);
+    const ev = row.eval_variant as EvalVariant;
+    if (!EVAL_VARIANTS.includes(ev)) continue;
+    const val = row[metric];
+    if (val === null || val === undefined || isNaN(val as number)) continue;
+
+    if (!groups.has(rl)) groups.set(rl, new Map());
+    const evMap = groups.get(rl)!;
+    if (!evMap.has(ev)) evMap.set(ev, []);
+    evMap.get(ev)!.push(val as number);
+  }
+
+  // Compute aggregates
+  const result = new Map<string, Map<EvalVariant, AggCell>>();
+  for (const [rl, evMap] of groups) {
+    const aggMap = new Map<EvalVariant, AggCell>();
+    for (const [ev, vals] of evMap) {
+      aggMap.set(ev, { mean: mean(vals), se: stdErr(vals), n: vals.length });
+    }
+    result.set(rl, aggMap);
+  }
+  return { data: result, validationError };
+}
+
+// ---------------------------------------------------------------------------
+// Sort row labels: Base first, then alphabetical
+// ---------------------------------------------------------------------------
+
+// Sort order: Base first, then by [tc group, data regime, mode]
+// tc group: no-tc (0) < tcself (1) < tcneg (2) < tco (3)
+// data regime: lo (0) < semi (1) < other (2)
+// mode: Pref (0) < SFT (1) < Comb (2) < other (3)
+function rowSortKey(label: string): [number, number, number, number, string] {
+  if (label === "Base") return [-1, 0, 0, 0, ""];
+  const parts = label.split("-");
+
+  // TC group
+  let tcGroup = 0;
+  if (parts.includes("tcself")) tcGroup = 1;
+  else if (parts.includes("tcneg")) tcGroup = 2;
+  else if (parts.includes("tco")) tcGroup = 3;
+
+  // Data regime
+  let regime = 2;
+  if (parts.includes("lo")) regime = 0;
+  else if (parts.includes("semi")) regime = 1;
+
+  // Mode (first part)
+  const mode = parts[0] ?? "";
+  const modeOrder: Record<string, number> = { Pref: 0, SFT: 1, Comb: 2 };
+
+  // Remaining flags for tiebreak
+  const remaining = parts.filter((p) => !["Pref", "SFT", "Comb"].includes(p)).join("-");
+
+  return [0, tcGroup, regime, modeOrder[mode] ?? 3, remaining];
+}
+
+function sortRowLabels(labels: string[]): string[] {
+  return [...labels].sort((a, b) => {
+    const ka = rowSortKey(a);
+    const kb = rowSortKey(b);
+    for (let i = 0; i < 4; i++) {
+      if (ka[i] !== kb[i]) return (ka[i] as number) - (kb[i] as number);
+    }
+    return ka[4].localeCompare(kb[4]);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function Dropdown<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: T;
+  options: { key: T; label: string }[];
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">{label}</label>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as T)}
+        className="bg-gray-800 text-gray-200 text-xs border border-gray-700 rounded px-2 py-1.5 focus:outline-none focus:border-cyan-600"
+      >
+        {options.map((o) => (
+          <option key={o.key} value={o.key}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function MultiSelect<T extends string>({
+  label,
+  selected,
+  options,
+  onChange,
+}: {
+  label: string;
+  selected: Set<T>;
+  options: { key: T; label: string }[];
+  onChange: (s: Set<T>) => void;
+}) {
+  const toggle = (key: T) => {
+    const next = new Set(selected);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    onChange(next);
+  };
+
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">{label}</label>
+      <div className="flex flex-wrap gap-1">
+        {options.map((o) => (
+          <button
+            key={o.key}
+            onClick={() => toggle(o.key)}
+            className={`text-xs px-2 py-1 rounded border transition-colors ${
+              selected.has(o.key)
+                ? "bg-cyan-800/60 text-cyan-200 border-cyan-600/60"
+                : "bg-gray-800 text-gray-500 border-gray-700 hover:text-gray-300"
+            }`}
+          >
+            {o.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Heatmap component (pure HTML/CSS)
+// ---------------------------------------------------------------------------
+
+function HeatmapGrid({
+  data,
+  rowLabels,
+  colLabels,
+  metric,
+  title,
+  fullConfigs,
+}: {
+  data: Map<string, Map<EvalVariant, AggCell>>;
+  rowLabels: string[];
+  colLabels: EvalVariant[];
+  metric: Metric;
+  title: string;
+  fullConfigs: Map<string, string>;
+}) {
+  const isCorr = metric.startsWith("corr");
+  const formatVal = (v: number) => {
+    if (isNaN(v)) return "-";
+    return isCorr ? v.toFixed(3) : (v * 100).toFixed(1);
+  };
+  const colorFn = isCorr ? corrColor : rdYlGn;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h3 className="text-xs font-medium text-gray-300">{title}</h3>
+      <div className="overflow-x-auto">
+        <table className="border-collapse text-xs">
+          <thead>
+            <tr>
+              <th className="text-left py-1 px-2 text-gray-500 font-normal min-w-[160px] max-w-[240px]">Model</th>
+              {colLabels.map((col) => (
+                <th key={col} className="text-center py-1 px-3 text-gray-400 font-medium min-w-[72px]">
+                  {col}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rowLabels.map((rl) => {
+              const evMap = data.get(rl);
+              return (
+                <tr key={rl} className="group">
+                  <td
+                    className="py-1 px-2 text-gray-300 font-mono truncate max-w-[240px]"
+                    title={fullConfigs.get(rl) || rl}
+                  >
+                    <DisplayRowLabel label={rl} />
+                  </td>
+                  {colLabels.map((col) => {
+                    const cell = evMap?.get(col);
+                    const val = cell?.mean ?? NaN;
+                    const bg = colorFn(isCorr ? val : val);
+                    const fg = textColor(val, isCorr);
+                    return (
+                      <td
+                        key={col}
+                        className="text-center py-1.5 px-2 font-mono border border-gray-800/50 cursor-default transition-all hover:ring-1 hover:ring-cyan-500/50"
+                        style={{ backgroundColor: bg, color: fg }}
+                        title={cell ? `${formatVal(val)}${cell.n > 1 ? ` (n=${cell.n}, se=${formatVal(cell.se)})` : ""}` : "no data"}
+                      >
+                        {formatVal(val)}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Bar chart component (SVG)
+// ---------------------------------------------------------------------------
+
+function BarChart({
+  data,
+  rowLabels,
+  evalVariants,
+  metric,
+  title,
+}: {
+  data: Map<string, Map<EvalVariant, AggCell>>;
+  rowLabels: string[];
+  evalVariants: EvalVariant[];
+  metric: Metric;
+  title: string;
+}) {
+  const isCorr = metric.startsWith("corr");
+  const subBarWidth = 18;
+  const subGap = 2;
+  const groupGap = 16;
+  const numSub = evalVariants.length;
+  const groupWidth = numSub * subBarWidth + (numSub - 1) * subGap;
+  const chartHeight = 200;
+  const marginTop = 20;
+  const marginBottom = 80;
+  const marginLeft = 50;
+  const legendHeight = 24;
+  const svgWidth = marginLeft + rowLabels.length * (groupWidth + groupGap) + 20;
+  const svgHeight = chartHeight + marginTop + marginBottom + legendHeight;
+
+  // Collect all values for scale
+  const allCells: { mean: number; se: number }[] = [];
+  for (const rl of rowLabels) {
+    for (const ev of evalVariants) {
+      const cell = data.get(rl)?.get(ev);
+      if (cell && !isNaN(cell.mean)) allCells.push(cell);
+    }
+  }
+  if (allCells.length === 0) {
+    return (
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-medium text-gray-300">{title}</h3>
+        <p className="text-xs text-gray-500 italic">No data</p>
+      </div>
+    );
+  }
+
+  let minVal: number, maxVal: number;
+  const low = Math.min(...allCells.map((c) => c.mean - c.se));
+  const high = Math.max(...allCells.map((c) => c.mean + c.se));
+  if (isCorr) {
+    // Data-driven range with padding, clamped to [-1, 1]
+    minVal = Math.max(-1, low - 0.05);
+    maxVal = Math.min(1, high + 0.05);
+  } else {
+    minVal = Math.max(0, low - 0.05);
+    maxVal = Math.min(1, high + 0.05);
+  }
+  const range = maxVal - minVal || 1;
+  const yScale = (v: number) => marginTop + chartHeight * (1 - (v - minVal) / range);
+
+  // Tick marks
+  const ticks: number[] = [];
+  const corrRange = maxVal - minVal;
+  const step = isCorr ? (corrRange > 0.5 ? 0.2 : 0.1) : 0.1;
+  for (let t = Math.ceil(minVal / step) * step; t <= maxVal; t += step) {
+    ticks.push(Math.round(t * 1000) / 1000);
+  }
+
+  // Shade: raw=full, tc=darker, lenorm=lighter, tc+lenorm=darkest
+  const variantOpacity: Record<string, number> = { raw: 0.85, tc: 0.6, lenorm: 0.7, "tc+lenorm": 0.45 };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h3 className="text-xs font-medium text-gray-300">{title}</h3>
+      <div className="overflow-x-auto">
+        <svg width={svgWidth} height={svgHeight} className="block">
+          {/* Hatching patterns for tc variants */}
+          <defs>
+            <pattern id="hatch-tc" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
+              <line x1="0" y1="0" x2="0" y2="4" stroke="rgba(0,0,0,0.3)" strokeWidth="1" />
+            </pattern>
+            <pattern id="hatch-tclenorm" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(-45)">
+              <line x1="0" y1="0" x2="0" y2="4" stroke="rgba(0,0,0,0.4)" strokeWidth="1.5" />
+            </pattern>
+          </defs>
+          {/* Grid lines */}
+          {ticks.map((t) => (
+            <g key={t}>
+              <line x1={marginLeft} x2={svgWidth - 10} y1={yScale(t)} y2={yScale(t)} stroke="#374151" strokeWidth={0.5} />
+              <text x={marginLeft - 4} y={yScale(t) + 3} textAnchor="end" className="fill-gray-500 text-[10px]">
+                {isCorr ? t.toFixed(1) : (t * 100).toFixed(0)}
+              </text>
+            </g>
+          ))}
+          {/* Grouped bars */}
+          {rowLabels.map((rl, i) => {
+            const groupX = marginLeft + i * (groupWidth + groupGap);
+            const color = BAR_COLORS[i % BAR_COLORS.length];
+            const labelX = groupX + groupWidth / 2;
+            return (
+              <g key={rl}>
+                {evalVariants.map((ev, j) => {
+                  const cell = data.get(rl)?.get(ev);
+                  const val = cell?.mean ?? NaN;
+                  if (isNaN(val)) return null;
+                  const x = groupX + j * (subBarWidth + subGap);
+                  const barY = yScale(val);
+                  const baseY = yScale(isCorr ? 0 : minVal);
+                  const barH = Math.abs(baseY - barY);
+                  const actualY = Math.min(barY, baseY);
+                  const opacity = variantOpacity[ev] ?? 0.85;
+                  const hasHatch = ev === "tc" || ev === "tc+lenorm";
+                  const cx = x + subBarWidth / 2;
+                  const se = cell?.se ?? 0;
+                  const seTop = yScale(Math.min(maxVal, val + se));
+                  const seBot = yScale(Math.max(minVal, val - se));
+                  return (
+                    <g key={ev}>
+                      <rect x={x} y={actualY} width={subBarWidth} height={barH} fill={color} rx={1} opacity={opacity} />
+                      {hasHatch && (
+                        <rect x={x} y={actualY} width={subBarWidth} height={barH} fill={ev === "tc" ? "url(#hatch-tc)" : "url(#hatch-tclenorm)"} rx={1} />
+                      )}
+                      {se > 0 && (
+                        <>
+                          <line x1={cx} x2={cx} y1={seTop} y2={seBot} stroke="#e5e7eb" strokeWidth={1} />
+                          <line x1={cx - 3} x2={cx + 3} y1={seTop} y2={seTop} stroke="#e5e7eb" strokeWidth={1} />
+                          <line x1={cx - 3} x2={cx + 3} y1={seBot} y2={seBot} stroke="#e5e7eb" strokeWidth={1} />
+                        </>
+                      )}
+                      <title>{`${displayRowLabel(rl)} [${ev}]: ${isCorr ? val.toFixed(3) : (val * 100).toFixed(1)} (n=${cell?.n ?? 0}, se=${se.toFixed(4)})`}</title>
+                    </g>
+                  );
+                })}
+                {/* Model label */}
+                <text
+                  x={labelX}
+                  y={marginTop + chartHeight + 8}
+                  textAnchor="end"
+                  transform={`rotate(-45, ${labelX}, ${marginTop + chartHeight + 8})`}
+                  className="fill-gray-400 text-[9px]"
+                >
+                  <SvgRowLabel label={rl} maxLen={22} />
+                </text>
+              </g>
+            );
+          })}
+          {/* Legend */}
+          {evalVariants.map((ev, j) => {
+            const lx = marginLeft + j * 80;
+            const ly = svgHeight - 10;
+            const opacity = variantOpacity[ev] ?? 0.85;
+            const hasHatch = ev === "tc" || ev === "tc+lenorm";
+            return (
+              <g key={ev}>
+                <rect x={lx} y={ly - 8} width={12} height={8} fill="#636EFA" opacity={opacity} rx={1} />
+                {hasHatch && <rect x={lx} y={ly - 8} width={12} height={8} fill={ev === "tc" ? "url(#hatch-tc)" : "url(#hatch-tclenorm)"} rx={1} />}
+                <text x={lx + 16} y={ly} className="fill-gray-400 text-[9px]">{ev}</text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Delta comparison view: side-by-side heatmaps + delta
+// ---------------------------------------------------------------------------
+
+// Diverging color scale for deltas: red (negative) ↔ white (zero) ↔ blue (positive)
+// Uses Plotly's RdBu stops (reversed so blue = positive)
+const DELTA_NEG: [number, number, number][] = [
+  [103, 0, 31],    // -max: deep red
+  [178, 24, 43],
+  [214, 96, 77],
+  [244, 165, 130],
+  [253, 219, 199],
+  [255, 255, 255], // zero: white
+];
+const DELTA_POS: [number, number, number][] = [
+  [255, 255, 255], // zero: white
+  [209, 229, 240],
+  [146, 197, 222],
+  [67, 147, 195],
+  [33, 102, 172],
+  [5, 48, 97],     // +max: deep blue
+];
+
+function deltaColor(delta: number): string {
+  if (isNaN(delta)) return "#f3f4f6";
+  const maxDelta = 0.10; // saturate at ±10pp
+  const t = Math.min(Math.abs(delta) / maxDelta, 1); // 0..1
+  const stops = delta < 0 ? DELTA_NEG : DELTA_POS;
+  // Interpolate across 6 stops (indices 0..5), t maps to position in stops
+  const pos = t * (stops.length - 1);
+  const i = Math.min(Math.floor(pos), stops.length - 2);
+  const f = pos - i;
+  // For negative, go from white (index 5) toward deep red (index 0) → reverse index
+  const idx = delta < 0 ? (stops.length - 1) - i : i;
+  const idxNext = delta < 0 ? idx - 1 : idx + 1;
+  const c0 = stops[idx];
+  const c1 = stops[Math.max(0, Math.min(stops.length - 1, idxNext))];
+  const r = Math.round(c0[0] + f * (c1[0] - c0[0]));
+  const g = Math.round(c0[1] + f * (c1[1] - c0[1]));
+  const b = Math.round(c0[2] + f * (c1[2] - c0[2]));
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+function deltaTextColor(delta: number): string {
+  if (isNaN(delta)) return "#9ca3af";
+  const t = Math.min(Math.abs(delta) / 0.10, 1);
+  return t > 0.6 ? "#ffffff" : "#1f2937";
+}
+
+function SideBySideDelta({
+  pairs,
+  leftData,
+  rightData,
+  colLabels,
+  metric,
+  title,
+  leftLabel,
+  rightLabel,
+  fullConfigs,
+}: {
+  pairs: [string, string][]; // [leftRowLabel, rightRowLabel]
+  leftData: Map<string, Map<EvalVariant, AggCell>>;
+  rightData: Map<string, Map<EvalVariant, AggCell>>;
+  colLabels: EvalVariant[];
+  metric: Metric;
+  title: string;
+  leftLabel: string;
+  rightLabel: string;
+  fullConfigs: Map<string, string>;
+}) {
+  const isCorr = metric.startsWith("corr");
+  const formatVal = (v: number) => {
+    if (isNaN(v)) return "-";
+    return isCorr ? v.toFixed(3) : (v * 100).toFixed(1);
+  };
+  const formatDelta = (v: number) => {
+    if (isNaN(v)) return "-";
+    const pp = isCorr ? v : v * 100;
+    const sign = pp > 0 ? "+" : "";
+    return isCorr ? `${sign}${pp.toFixed(3)}` : `${sign}${pp.toFixed(1)}`;
+  };
+  const colorFn = isCorr ? corrColor : rdYlGn;
+
+  // Build pair labels (strip the tc flag difference for a clean display)
+  const pairLabels = pairs.map(([l]) => l);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-xs font-medium text-gray-300">{title}</h3>
+      <div className="flex gap-6 overflow-x-auto">
+        {/* Left heatmap */}
+        <div>
+          <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium mb-1">{leftLabel}</p>
+          <table className="border-collapse text-xs">
+            <thead>
+              <tr>
+                <th className="text-left py-1 px-2 text-gray-500 font-normal min-w-[120px]">Model</th>
+                {colLabels.map((col) => (
+                  <th key={col} className="text-center py-1 px-3 text-gray-400 font-medium min-w-[60px]">{col}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {pairs.map(([leftLabel_]) => {
+                const evMap = leftData.get(leftLabel_);
+                return (
+                  <tr key={leftLabel_}>
+                    <td className="py-1 px-2 text-gray-300 font-mono text-[11px]" title={fullConfigs.get(leftLabel_) || leftLabel_}><DisplayRowLabel label={leftLabel_} /></td>
+                    {colLabels.map((col) => {
+                      const cell = evMap?.get(col);
+                      const val = cell?.mean ?? NaN;
+                      const bg = colorFn(val);
+                      const fg = textColor(val, isCorr);
+                      return (
+                        <td key={col} className="text-center py-1.5 px-2 font-mono border border-gray-800/50" style={{ backgroundColor: bg, color: fg }}>
+                          {formatVal(val)}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Right heatmap */}
+        <div>
+          <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium mb-1">{rightLabel}</p>
+          <table className="border-collapse text-xs">
+            <thead>
+              <tr>
+                <th className="text-left py-1 px-1.5 text-gray-500 font-normal min-w-[80px]">Model</th>
+                {colLabels.map((col) => (
+                  <th key={col} className="text-center py-1 px-3 text-gray-400 font-medium min-w-[60px]">{col}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {pairs.map(([, rightLabel_]) => {
+                const evMap = rightData.get(rightLabel_);
+                return (
+                  <tr key={rightLabel_}>
+                    <td className="py-1 px-1.5 text-gray-300 font-mono text-[9px] whitespace-nowrap" title={fullConfigs.get(rightLabel_) || rightLabel_}><DisplayRowLabel label={rightLabel_} /></td>
+                    {colLabels.map((col) => {
+                      const cell = evMap?.get(col);
+                      const val = cell?.mean ?? NaN;
+                      const bg = colorFn(val);
+                      const fg = textColor(val, isCorr);
+                      return (
+                        <td key={col} className="text-center py-1.5 px-2 font-mono border border-gray-800/50" style={{ backgroundColor: bg, color: fg }}>
+                          {formatVal(val)}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Delta heatmap */}
+        <div>
+          <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium mb-1">Delta ({rightLabel} − {leftLabel})</p>
+          <table className="border-collapse text-xs">
+            <thead>
+              <tr>
+                <th className="text-left py-1 px-2 text-gray-500 font-normal min-w-[120px]">Model</th>
+                {colLabels.map((col) => (
+                  <th key={col} className="text-center py-1 px-3 text-gray-400 font-medium min-w-[60px]">{col}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {pairs.map(([leftLabel_, rightLabel_]) => {
+                const leftEvMap = leftData.get(leftLabel_);
+                const rightEvMap = rightData.get(rightLabel_);
+                return (
+                  <tr key={leftLabel_}>
+                    <td className="py-1 px-2 text-gray-300 font-mono text-[11px]"><DisplayRowLabel label={pairLabels[pairs.findIndex(([l]) => l === leftLabel_)]} /></td>
+                    {colLabels.map((col) => {
+                      const leftVal = leftEvMap?.get(col)?.mean ?? NaN;
+                      const rightVal = rightEvMap?.get(col)?.mean ?? NaN;
+                      const delta = (!isNaN(leftVal) && !isNaN(rightVal)) ? rightVal - leftVal : NaN;
+                      const bg = deltaColor(delta);
+                      const fg = deltaTextColor(delta);
+                      return (
+                        <td key={col} className="text-center py-1.5 px-2 font-mono border border-gray-800/50" style={{ backgroundColor: bg, color: fg }}>
+                          {formatDelta(delta)}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Per-task collapsible section
+// ---------------------------------------------------------------------------
+
+function PerTaskCollapsible({
+  sections,
+  fullConfigs,
+  visibleRows,
+}: {
+  sections: { label: string; taskCount: number; metrics: { metric: Metric; data: Map<string, Map<EvalVariant, AggCell>> }[] }[];
+  fullConfigs: Map<string, string>;
+  visibleRows: Set<string>;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="border-t border-gray-700 pt-4">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-2 text-sm font-semibold text-gray-300 hover:text-gray-100 transition-colors"
+      >
+        <span className={`text-xs transition-transform ${open ? "rotate-90" : ""}`}>▶</span>
+        Per-task breakdown ({sections.length} tasks)
+      </button>
+      {open && (
+        <div className="mt-4 space-y-10">
+          {sections.map((section) => (
+            <div key={section.label} className="space-y-4">
+              <h3 className="text-sm font-medium text-cyan-300 border-b border-gray-800 pb-1">{section.label}</h3>
+              <div className="flex flex-wrap gap-6">
+                {section.metrics.map(({ metric: m, data }) => {
+                  const metricLabel = METRICS.find((x) => x.key === m)?.label ?? m;
+                  const metricRowLabels = sortRowLabels(Array.from(data.keys()).filter((l) => visibleRows.has(l)));
+                  const metricEvs = EVAL_VARIANTS.filter((ev) => {
+                    for (const evMap of data.values()) {
+                      if (evMap.has(ev)) return true;
+                    }
+                    return false;
+                  });
+                  if (metricRowLabels.length === 0) return null;
+                  return (
+                    <HeatmapGrid
+                      key={m}
+                      data={data}
+                      rowLabels={metricRowLabels}
+                      colLabels={metricEvs}
+                      metric={m}
+                      title={metricLabel}
+                      fullConfigs={fullConfigs}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Per-task comparison collapsible (side-by-side + delta per task)
+// ---------------------------------------------------------------------------
+
+function PerTaskComparisonCollapsible({
+  filteredRows,
+  pairs,
+  leftLabel,
+  rightLabel,
+  leftFilter,
+  rightFilter,
+  fullConfigs,
+}: {
+  filteredRows: SummaryRow[];
+  pairs: [string, string][];
+  leftLabel: string;
+  rightLabel: string;
+  leftFilter: (r: SummaryRow) => boolean;
+  rightFilter: (r: SummaryRow) => boolean;
+  fullConfigs: Map<string, string>;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const tasks = useMemo(() => {
+    const t = new Set(filteredRows.map((r) => r.task));
+    return Array.from(t).sort();
+  }, [filteredRows]);
+
+  if (tasks.length <= 1) return null;
+
+  return (
+    <div className="border-t border-gray-700 pt-4">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-2 text-sm font-semibold text-gray-300 hover:text-gray-100 transition-colors"
+      >
+        <span className={`text-xs transition-transform ${open ? "rotate-90" : ""}`}>▶</span>
+        Per-task breakdown ({tasks.length} tasks)
+      </button>
+      {open && (
+        <div className="mt-4 space-y-10">
+          {tasks.map((task) => {
+            const taskRows = filteredRows.filter((r) => r.task === task);
+            const leftRows = taskRows.filter(leftFilter);
+            const rightRows = taskRows.filter(rightFilter);
+            return (
+              <div key={task} className="space-y-4">
+                <h3 className="text-sm font-medium text-cyan-300 border-b border-gray-800 pb-1">{task}</h3>
+                <div className="space-y-6">
+                  {METRICS.map((m) => {
+                    const leftData = aggregateData(leftRows, m.key, getRowLabel).data;
+                    const rightData = aggregateData(rightRows, m.key, getRowLabel).data;
+                    const existingPairs = pairs.filter(([l, r]) => leftData.has(l) && rightData.has(r));
+                    if (existingPairs.length === 0) return null;
+                    const evs = EVAL_VARIANTS.filter((ev) => {
+                      for (const evMap of [...leftData.values(), ...rightData.values()]) {
+                        if (evMap.has(ev)) return true;
+                      }
+                      return false;
+                    });
+                    return (
+                      <SideBySideDelta
+                        key={m.key}
+                        pairs={existingPairs}
+                        leftData={leftData}
+                        rightData={rightData}
+                        colLabels={evs}
+                        metric={m.key}
+                        title={m.label}
+                        leftLabel={leftLabel}
+                        rightLabel={rightLabel}
+                        fullConfigs={fullConfigs}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export default function HeatmapViewer({
+  datasetRepo,
+  split: _split = "train",
+  onClose,
+}: HeatmapViewerProps) {
+  const fullRepo = datasetRepo.includes("/") ? datasetRepo : `${HF_ORG}/${datasetRepo}`;
+  const shortName = datasetRepo.split("/").pop() ?? datasetRepo;
+
+  const { rows, loading, error, progress, refetch } = useDatasetRows(fullRepo, _split);
+
+  // --- Filter state ---
+  const [selectedModel, setSelectedModel] = useState<string>("__first__");
+  const [selectedFamily, setSelectedFamily] = useState<string>("hypernym");
+  const [selectedTask, setSelectedTask] = useState<string>("__all__");
+  const [selectedSplit, setSelectedSplit] = useState<string>("test");
+  const [selectedTCType, setSelectedTCType] = useState<TCType>("self");
+  const [selectedMetric, setSelectedMetric] = useState<Metric>("gen_roc");
+  const [selectedDomain, setSelectedDomain] = useState<DomainFilter>("all");
+  const [viewMode, setViewMode] = useState<ViewMode>("heatmap");
+  const [barVariant, setBarVariant] = useState<EvalVariant>("raw");
+  const [comparisonPreset, setComparisonPreset] = useState<ComparisonPreset>("all");
+
+  // Row visibility: null means "show all", otherwise explicit set from preset or manual toggle
+  const [visibleRows, setVisibleRows] = useState<Set<string> | null>(null);
+
+  // --- Derived: available splits, tasks, families ---
+  // --- Available base models (model column = base model identity, same for all finetuned variants) ---
+  const availableModels = useMemo(() => {
+    const s = new Set(rows.map((r) => r.model));
+    return Array.from(s).sort();
+  }, [rows]);
+
+  // Display-friendly name: "v6-google_gemma-2-2b" → "gemma-2-2b"
+  const modelDisplayName = useCallback((m: string) => {
+    return m.replace(/^v\d+-[^_]+_/, "");
+  }, []);
+
+  // Resolve __first__ to actual first model once data loads
+  const resolvedModel = useMemo(() => {
+    if (selectedModel === "__first__" && availableModels.length > 0) return availableModels[0];
+    if (availableModels.includes(selectedModel)) return selectedModel;
+    return availableModels[0] ?? "";
+  }, [selectedModel, availableModels]);
+
+  const availableSplits = useMemo(() => {
+    const s = new Set(rows.map((r) => r.split));
+    return Array.from(s).sort();
+  }, [rows]);
+
+  const availableTasks = useMemo(() => {
+    let filtered = rows.filter((r) => isValidEvalTask(r.task));
+    const fam = TASK_FAMILIES.find((f) => f.key === selectedFamily);
+    if (fam) filtered = filtered.filter((r) => r.task.startsWith(fam.prefix));
+    const tasks = new Set(filtered.map((r) => r.task));
+    return Array.from(tasks).sort();
+  }, [rows, selectedFamily]);
+
+  // Reset task selection when family changes
+  useEffect(() => {
+    setSelectedTask("__all__");
+  }, [selectedFamily]);
+
+  // --- Filtering pipeline ---
+  const filteredRows = useMemo(() => {
+    let result = rows;
+
+    // Model filter — critical: never mix different base models
+    if (resolvedModel) {
+      result = result.filter((r) => r.model === resolvedModel);
+    }
+
+    // Exclude non-eval tasks (concat, bare family names, etc.)
+    result = result.filter((r) => isValidEvalTask(r.task));
+
+    // Only show finetuned models trained on valid combined datasets (Setting U)
+    result = result.filter((r) => isValidFinetunedModel(r));
+
+    // Split filter
+    result = result.filter((r) => r.split === selectedSplit);
+
+    // TC type filter (single-select: each TC type is a different eval condition)
+    result = result.filter((r) => getEvalTCType(r) === selectedTCType);
+
+    // For finetuned models trained with a specific TC, only show rows where eval TC matches training TC
+    result = result.filter((r) => isMatchedTC(r));
+
+    // Family filter — also exclude finetuned models trained on a different family
+    const fam = TASK_FAMILIES.find((f) => f.key === selectedFamily);
+    if (fam) {
+      result = result.filter((r) => r.task.startsWith(fam.prefix));
+      result = result.filter((r) => {
+        if (!r.finetuned) return true; // base models always shown
+        const trainFam = getTrainingFamily(r.training_config);
+        return trainFam === null || trainFam === selectedFamily;
+      });
+    }
+
+    // Specific task filter
+    if (selectedTask !== "__all__") {
+      result = result.filter((r) => r.task === selectedTask);
+    }
+
+    // Domain filter (OOD vs in-domain)
+    if (selectedDomain !== "all") {
+      result = result.filter((r) => {
+        const family = getTaskFamily(r.task);
+        if (!family) return true;
+        const ood = isOodTask(r.task, r.training_config, family);
+        if (ood === null) return true;
+        return selectedDomain === "ood" ? ood : !ood;
+      });
+    }
+
+    return result;
+  }, [rows, resolvedModel, selectedSplit, selectedTCType, selectedFamily, selectedTask, selectedDomain]);
+
+  // --- Build row label → full config mapping ---
+  const fullConfigs = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const r of filteredRows) {
+      const label = getRowLabel(r);
+      if (!map.has(label)) {
+        map.set(label, r.finetuned ? r.training_config : "Base (not finetuned)");
+      }
+    }
+    return map;
+  }, [filteredRows]);
+
+  // --- All available row labels (before visibility filter) ---
+  const allRowLabels = useMemo(() => {
+    const labels = new Set<string>();
+    for (const r of filteredRows) labels.add(getRowLabel(r));
+    return sortRowLabels(Array.from(labels));
+  }, [filteredRows]);
+
+  // Effective visible rows: use explicit selection, preset, or show all
+  const effectiveVisibleRows = useMemo(() => {
+    const available = new Set(allRowLabels);
+
+    // If a comparison preset restricts rows, apply that
+    if (comparisonPreset === "training-effect" && visibleRows === null) {
+      const effective = new Set<string>();
+      for (const label of available) {
+        if (TRAINING_EFFECT_ROWS.has(label)) effective.add(label);
+      }
+      return effective.size > 0 ? effective : available;
+    }
+
+    // Manual selection
+    if (visibleRows !== null) {
+      const effective = new Set<string>();
+      for (const label of visibleRows) {
+        if (available.has(label)) effective.add(label);
+      }
+      return effective.size > 0 ? effective : available;
+    }
+
+    // Default: show all except hidden-by-default rows
+    const effective = new Set<string>();
+    for (const label of available) {
+      if (!DEFAULT_HIDDEN_ROWS.has(label)) effective.add(label);
+    }
+    return effective.size > 0 ? effective : available;
+  }, [visibleRows, allRowLabels, comparisonPreset]);
+
+  // --- Aggregation ---
+  const aggResult = useMemo(() => {
+    return aggregateData(filteredRows, selectedMetric, getRowLabel);
+  }, [filteredRows, selectedMetric]);
+
+  const aggData = aggResult.data;
+  const validationError = aggResult.validationError;
+
+  const rowLabels = useMemo(() => {
+    return sortRowLabels(Array.from(aggData.keys()).filter((l) => effectiveVisibleRows.has(l)));
+  }, [aggData, effectiveVisibleRows]);
+
+  // Available eval variants (only those with data)
+  const availableEvalVariants = useMemo(() => {
+    const evs = new Set<EvalVariant>();
+    for (const evMap of aggData.values()) {
+      for (const ev of evMap.keys()) evs.add(ev);
+    }
+    return EVAL_VARIANTS.filter((ev) => evs.has(ev));
+  }, [aggData]);
+
+  // --- Stats ---
+  const stats = useMemo(() => {
+    const taskCount = new Set(filteredRows.map((r) => r.task)).size;
+    const modelCount = new Set(filteredRows.map((r) => r.finetuned ? r.training_config : "base")).size;
+    return { tasks: taskCount, models: modelCount, rows: filteredRows.length };
+  }, [filteredRows]);
+
+  // --- Domain-split rows for aggregated heatmaps ---
+  const domainSplitRows = useMemo(() => {
+    const hasDomainSplit = (selectedFamily === "ifeval" || selectedFamily === "hypernym") && selectedTask === "__all__";
+    if (!hasDomainSplit || selectedDomain !== "all") return null;
+
+    const oodRows = filteredRows.filter((r) => {
+      const family = getTaskFamily(r.task);
+      if (!family) return false;
+      return isOodTask(r.task, r.training_config, family) === true;
+    });
+    const idRows = filteredRows.filter((r) => {
+      const family = getTaskFamily(r.task);
+      if (!family) return false;
+      return isOodTask(r.task, r.training_config, family) === false;
+    });
+    const oodTaskCount = new Set(oodRows.map((r) => r.task)).size;
+    const idTaskCount = new Set(idRows.map((r) => r.task)).size;
+    return { oodRows, idRows, oodTaskCount, idTaskCount };
+  }, [filteredRows, selectedFamily, selectedTask, selectedDomain]);
+
+  // --- Multi-metric heatmaps (one set per domain group when applicable) ---
+  type HeatmapSection = {
+    label: string;
+    taskCount: number;
+    metrics: { metric: Metric; data: Map<string, Map<EvalVariant, AggCell>> }[];
+  };
+
+  const heatmapSections = useMemo((): HeatmapSection[] => {
+    if (viewMode !== "heatmap") return [];
+
+    const buildSection = (sectionRows: SummaryRow[], label: string, taskCount: number): HeatmapSection => {
+      const metrics: { metric: Metric; data: Map<string, Map<EvalVariant, AggCell>> }[] = [];
+      for (const m of METRICS) {
+        metrics.push({ metric: m.key, data: aggregateData(sectionRows, m.key, getRowLabel).data });
+      }
+      return { label, taskCount, metrics };
+    };
+
+    if (domainSplitRows) {
+      const sections: HeatmapSection[] = [];
+      if (domainSplitRows.oodRows.length > 0) {
+        sections.push(buildSection(domainSplitRows.oodRows, "Out-of-domain", domainSplitRows.oodTaskCount));
+      }
+      if (domainSplitRows.idRows.length > 0) {
+        sections.push(buildSection(domainSplitRows.idRows, "In-domain", domainSplitRows.idTaskCount));
+      }
+      return sections;
+    }
+
+    // For families without domain splits but with multiple tasks, still show aggregate
+    return [buildSection(filteredRows, "All tasks", stats.tasks)];
+  }, [filteredRows, viewMode, domainSplitRows, stats.tasks]);
+
+  // --- Per-task heatmaps (when viewing "All tasks" in a family) ---
+  const perTaskSections = useMemo((): HeatmapSection[] => {
+    if (viewMode !== "heatmap") return [];
+    if (selectedTask !== "__all__") return []; // single task already shown in main sections
+    const tasks = new Set(filteredRows.map((r) => r.task));
+    if (tasks.size <= 1) return []; // no point showing per-task if only one
+
+    const sorted = Array.from(tasks).sort();
+    return sorted.map((task) => {
+      const taskRows = filteredRows.filter((r) => r.task === task);
+      const metrics: { metric: Metric; data: Map<string, Map<EvalVariant, AggCell>> }[] = [];
+      for (const m of METRICS) {
+        metrics.push({ metric: m.key, data: aggregateData(taskRows, m.key, getRowLabel).data });
+      }
+      return { label: task, taskCount: 1, metrics };
+    });
+  }, [filteredRows, viewMode, selectedTask]);
+
+  // --- Comparison preset data ---
+  // For delta comparisons, we need rows from multiple TC types simultaneously
+  const comparisonBaseRows = useMemo(() => {
+    // Same as filteredRows but without TC type filter
+    let result = rows;
+    // Model filter — must match filteredRows
+    if (resolvedModel) {
+      result = result.filter((r) => r.model === resolvedModel);
+    }
+    result = result.filter((r) => isValidEvalTask(r.task));
+    result = result.filter((r) => isValidFinetunedModel(r));
+    result = result.filter((r) => r.split === selectedSplit);
+    // For finetuned models trained with a specific TC, only show rows where eval TC matches training TC
+    result = result.filter((r) => isMatchedTC(r));
+    const fam = TASK_FAMILIES.find((f) => f.key === selectedFamily);
+    if (fam) {
+      result = result.filter((r) => r.task.startsWith(fam.prefix));
+      result = result.filter((r) => {
+        if (!r.finetuned) return true;
+        const trainFam = getTrainingFamily(r.training_config);
+        return trainFam === null || trainFam === selectedFamily;
+      });
+    }
+    if (selectedTask !== "__all__") {
+      result = result.filter((r) => r.task === selectedTask);
+    }
+    if (selectedDomain !== "all") {
+      result = result.filter((r) => {
+        const family = getTaskFamily(r.task);
+        if (!family) return true;
+        const ood = isOodTask(r.task, r.training_config, family);
+        if (ood === null) return true;
+        return selectedDomain === "ood" ? ood : !ood;
+      });
+    }
+    return result;
+  }, [rows, resolvedModel, selectedSplit, selectedFamily, selectedTask, selectedDomain]);
+
+  // Build aggregated data for rows with a specific training TC flag (in the row label)
+  // Note: this is the TRAINING tc flag (in the model name), NOT the eval TC type
+  const aggByTrainingTC = useCallback((trainingTCFlag: string | null, metric: Metric) => {
+    const subset = filteredRows.filter((r) => {
+      const label = getRowLabel(r);
+      if (trainingTCFlag === null) {
+        // No training TC flag — exclude rows that have any TC flag
+        return !TC_FLAGS.some((f) => hasTCFlag(label, f));
+      }
+      return hasTCFlag(label, trainingTCFlag);
+    });
+    return aggregateData(subset, metric, getRowLabel).data;
+  }, [filteredRows]);
+
+  // Dynamic pairing: find rows that differ only by a TC flag
+  const buildPairs = useCallback((leftFlag: string | null, rightFlag: string): [string, string][] => {
+    const leftLabels = new Set<string>();
+    const rightLabels = new Set<string>();
+    for (const r of filteredRows) {
+      const label = getRowLabel(r);
+      if (label === "Base") continue;
+      if (rightFlag && hasTCFlag(label, rightFlag)) {
+        rightLabels.add(label);
+      } else if (leftFlag === null && !TC_FLAGS.some((f) => hasTCFlag(label, f))) {
+        leftLabels.add(label);
+      } else if (leftFlag && hasTCFlag(label, leftFlag)) {
+        leftLabels.add(label);
+      }
+    }
+    // Match: strip TC flag from right label, see if it matches a left label
+    const pairs: [string, string][] = [];
+    for (const rl of rightLabels) {
+      const stripped = stripTCFlag(rl);
+      if (leftLabels.has(stripped)) {
+        pairs.push([stripped, rl]);
+      }
+    }
+    return sortRowLabels(pairs.map(([l]) => l)).map((l) => {
+      const r = pairs.find(([left]) => left === l)![1];
+      return [l, r] as [string, string];
+    });
+  }, [filteredRows]);
+
+  // + TC-Self pairs: without-tc ↔ tcself
+  const tcSelfPairs = useMemo((): [string, string][] => {
+    if (comparisonPreset !== "plus-tcself") return [];
+    return buildPairs(null, "tcself");
+  }, [comparisonPreset, buildPairs]);
+
+  // TC-Self vs TC-Neg: for each model, compare train-tcself+eval-self vs train-tcneg+eval-neg
+  // Base model: same "Base" label, just different eval TC type
+  // Finetuned: pair by stripping tcself/tcneg from training label
+  const aggByMatchedTC = useCallback((evalTC: TCType, metric: Metric) => {
+    // From comparisonBaseRows (no eval TC filter), get rows matching this eval TC type
+    const subset = comparisonBaseRows.filter((r) => getEvalTCType(r) === evalTC);
+    return aggregateData(subset, metric, getRowLabel).data;
+  }, [comparisonBaseRows]);
+
+  const tcSelfVsNegPairs = useMemo((): [string, string][] => {
+    if (comparisonPreset !== "tcself-vs-tcneg") return [];
+    // Left: models evaluated with self-TC (base + models trained with tcself)
+    const selfRows = comparisonBaseRows.filter((r) => getEvalTCType(r) === "self");
+    const selfLabels = new Set(selfRows.map(getRowLabel));
+    // Right: models evaluated with neg-TC (base + models trained with tcneg)
+    const negRows = comparisonBaseRows.filter((r) => getEvalTCType(r) === "neg");
+    const negLabels = new Set(negRows.map(getRowLabel));
+
+    const pairs: [string, string][] = [];
+    // Base: appears in both with same label
+    if (selfLabels.has("Base") && negLabels.has("Base")) {
+      pairs.push(["Base", "Base"]);
+    }
+    // Finetuned: match tcself label ↔ tcneg label (strip tc flag to find pair)
+    for (const sl of selfLabels) {
+      if (sl === "Base") continue;
+      if (!hasTCFlag(sl, "tcself")) continue;
+      const negVersion = sl.replace("tcself", "tcneg");
+      if (negLabels.has(negVersion)) {
+        pairs.push([sl, negVersion]);
+      }
+    }
+    return sortRowLabels(pairs.map(([l]) => l)).map((l) => {
+      const p = pairs.find(([left]) => left === l)!;
+      return p;
+    });
+  }, [comparisonPreset, comparisonBaseRows]);
+
+  // TC-Self vs TC-GPT2: pair tcself-trained (eval=self) with tco-trained (eval=gpt2)
+  // e.g. "Comb-tcself-lo" ↔ "Comb-tco-lo"
+  const tcSelfVsGpt2Pairs = useMemo((): [string, string][] => {
+    if (comparisonPreset !== "tcself-vs-tcgpt2") return [];
+    const selfRows = comparisonBaseRows.filter((r) => getEvalTCType(r) === "self");
+    const selfLabels = new Set(selfRows.map(getRowLabel));
+    const gpt2Rows = comparisonBaseRows.filter((r) => getEvalTCType(r) === "gpt2");
+    const gpt2Labels = new Set(gpt2Rows.map(getRowLabel));
+
+    const pairs: [string, string][] = [];
+    // Base: appears in both with same label
+    if (selfLabels.has("Base") && gpt2Labels.has("Base")) {
+      pairs.push(["Base", "Base"]);
+    }
+    // Finetuned: match tcself label ↔ tco label (swap tc flag to find pair)
+    for (const sl of selfLabels) {
+      if (sl === "Base") continue;
+      if (!hasTCFlag(sl, "tcself")) continue;
+      const tcoVersion = sl.replace("tcself", "tco");
+      if (gpt2Labels.has(tcoVersion)) {
+        pairs.push([sl, tcoVersion]);
+      }
+    }
+    return sortRowLabels(pairs.map(([l]) => l)).map((l) => {
+      const p = pairs.find(([left]) => left === l)!;
+      return p;
+    });
+  }, [comparisonPreset, comparisonBaseRows]);
+
+  // Family options for dropdown
+  const familyOptions = useMemo((): { key: string; label: string }[] => {
+    const options: { key: string; label: string }[] = [];
+    for (const fam of TASK_FAMILIES) {
+      const count = new Set(rows.filter((r) => r.task.startsWith(fam.prefix)).map((r) => r.task)).size;
+      if (count > 0) options.push({ key: fam.key, label: `${fam.label} (${count})` });
+    }
+    return options;
+  }, [rows]);
+
+  // Task options for dropdown
+  const taskOptions = useMemo(() => {
+    const options = [{ key: "__all__", label: `All tasks (${availableTasks.length})` }];
+    for (const t of availableTasks) {
+      options.push({ key: t, label: t });
+    }
+    return options;
+  }, [availableTasks]);
+
+  // Domain filter visibility
+  const showDomainFilter = selectedFamily === "ifeval" || selectedFamily === "hypernym";
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-gray-950">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-gray-800 flex-shrink-0 bg-gray-900">
+        <div className="flex items-center gap-3 min-w-0">
+          <span className="text-sm font-semibold text-gray-200 truncate">{shortName}</span>
+          <span className="text-xs text-gray-600 border border-gray-700 px-1.5 py-0.5 rounded">heatmap</span>
+          {!loading && (
+            <span className="text-xs text-gray-500">
+              {rows.length.toLocaleString()} rows loaded
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <a
+            href={`https://huggingface.co/datasets/${fullRepo}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-gray-500 hover:text-cyan-400 transition-colors px-2 py-1 border border-gray-700 rounded"
+          >
+            HF
+          </a>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-700"
+            aria-label="Close viewer"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Loading */}
+      {loading && (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-6 h-6 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin" />
+            <p className="text-sm text-gray-400">
+              Loading... {progress.loaded.toLocaleString()} / {progress.total.toLocaleString()} rows
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Error */}
+      {!loading && error && (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="max-w-lg text-center space-y-3">
+            <p className="text-sm font-medium text-red-400">Failed to load dataset</p>
+            <p className="text-xs text-gray-500 font-mono break-words bg-gray-800 rounded p-3">{error}</p>
+            <button
+              onClick={refetch}
+              className="text-xs text-cyan-400 hover:text-cyan-300 border border-cyan-700/50 px-3 py-1 rounded transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Main content */}
+      {!loading && !error && rows.length > 0 && (
+        <div className="flex-1 flex overflow-hidden">
+          {/* Controls sidebar */}
+          <div className="w-64 flex-shrink-0 border-r border-gray-800 bg-gray-900/50 overflow-y-auto p-4 space-y-4">
+            {/* View mode */}
+            <div className="flex gap-1">
+              <button
+                onClick={() => setViewMode("heatmap")}
+                className={`flex-1 text-xs py-1.5 rounded border transition-colors ${
+                  viewMode === "heatmap"
+                    ? "bg-cyan-800/60 text-cyan-200 border-cyan-600/60"
+                    : "bg-gray-800 text-gray-500 border-gray-700"
+                }`}
+              >
+                Heatmap
+              </button>
+              <button
+                onClick={() => setViewMode("bar")}
+                className={`flex-1 text-xs py-1.5 rounded border transition-colors ${
+                  viewMode === "bar"
+                    ? "bg-cyan-800/60 text-cyan-200 border-cyan-600/60"
+                    : "bg-gray-800 text-gray-500 border-gray-700"
+                }`}
+              >
+                Bar Plot
+              </button>
+            </div>
+
+            {availableModels.length > 1 && (
+              <Dropdown
+                label="Base Model"
+                value={resolvedModel}
+                options={availableModels.map((m) => ({ key: m, label: modelDisplayName(m) }))}
+                onChange={setSelectedModel}
+              />
+            )}
+
+            <Dropdown
+              label="Task Family"
+              value={selectedFamily}
+              options={familyOptions}
+              onChange={setSelectedFamily}
+            />
+
+            <Dropdown
+              label="Task"
+              value={selectedTask}
+              options={taskOptions}
+              onChange={setSelectedTask}
+            />
+
+            <Dropdown
+              label="Split"
+              value={selectedSplit}
+              options={availableSplits.map((s) => ({ key: s, label: s }))}
+              onChange={setSelectedSplit}
+            />
+
+            <Dropdown
+              label="Eval TC Type"
+              value={selectedTCType}
+              options={TC_TYPES}
+              onChange={setSelectedTCType}
+            />
+
+            {showDomainFilter && (
+              <Dropdown
+                label="Domain"
+                value={selectedDomain}
+                options={[
+                  { key: "all" as DomainFilter, label: "All" },
+                  { key: "ood" as DomainFilter, label: "Out-of-domain" },
+                  { key: "in-domain" as DomainFilter, label: "In-domain" },
+                ]}
+                onChange={setSelectedDomain}
+              />
+            )}
+
+            <Dropdown
+              label="Comparison"
+              value={comparisonPreset}
+              options={COMPARISON_PRESETS}
+              onChange={setComparisonPreset}
+            />
+
+            {/* Row visibility */}
+            {allRowLabels.length > 0 && (
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <label className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Visible Models</label>
+                  <div className="flex gap-1">
+                    <button
+                      onClick={() => setVisibleRows(new Set(allRowLabels))}
+                      className="text-[9px] text-gray-500 hover:text-gray-300 px-1"
+                    >
+                      all
+                    </button>
+                    <button
+                      onClick={() => setVisibleRows(null)}
+                      className="text-[9px] text-gray-500 hover:text-gray-300 px-1"
+                    >
+                      default
+                    </button>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-0.5 max-h-48 overflow-y-auto">
+                  {allRowLabels.map((label) => (
+                    <label key={label} className="flex items-center gap-1.5 text-xs cursor-pointer hover:bg-gray-800/50 px-1 py-0.5 rounded">
+                      <input
+                        type="checkbox"
+                        checked={effectiveVisibleRows.has(label)}
+                        onChange={() => {
+                          const next = new Set(effectiveVisibleRows);
+                          if (next.has(label)) next.delete(label);
+                          else next.add(label);
+                          setVisibleRows(next);
+                        }}
+                        className="rounded border-gray-600 bg-gray-800 text-cyan-500 focus:ring-0 focus:ring-offset-0 h-3 w-3"
+                      />
+                      <span className={effectiveVisibleRows.has(label) ? "text-gray-200" : "text-gray-500"}><DisplayRowLabel label={label} /></span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
+
+
+            {/* Stats */}
+            <div className="pt-2 border-t border-gray-800 space-y-1">
+              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Filtered data</p>
+              <p className="text-xs text-gray-400">{stats.tasks} tasks, {stats.models} configs</p>
+              <p className="text-xs text-gray-400">{stats.rows.toLocaleString()} rows</p>
+              {selectedTask === "__all__" && stats.tasks > 1 && (
+                <p className="text-[10px] text-gray-600 italic">Averaging across {stats.tasks} tasks</p>
+              )}
+            </div>
+          </div>
+
+          {/* Visualization area */}
+          <div className="flex-1 overflow-auto p-6 space-y-8">
+            {validationError ? (
+              <div className="flex items-center justify-center h-full">
+                <div className="max-w-xl bg-red-950 border-2 border-red-500 rounded-lg p-6 space-y-3">
+                  <div className="flex items-center gap-2">
+                    <span className="text-2xl">!!!</span>
+                    <h2 className="text-lg font-bold text-red-300">Data Integrity Violation</h2>
+                  </div>
+                  <pre className="text-sm text-red-200 whitespace-pre-wrap font-mono leading-relaxed">{validationError}</pre>
+                  <p className="text-xs text-red-400 mt-4">
+                    All visualizations are blocked until this is resolved. If you see this, the data pipeline has a bug
+                    — different models or training configs are collapsing into the same row label.
+                  </p>
+                </div>
+              </div>
+            ) : filteredRows.length === 0 ? (
+              <div className="flex items-center justify-center h-full">
+                <p className="text-sm text-gray-500 italic">No data matches the current filters.</p>
+              </div>
+            ) : viewMode === "heatmap" ? (
+              <>
+                {/* Aggregated sections (domain-split or single aggregate) — hidden when comparison preset is active */}
+                {(comparisonPreset === "all" || comparisonPreset === "training-effect") && heatmapSections.map((section, sIdx) => (
+                  <div key={`agg-${sIdx}`} className="space-y-6">
+                    {section.label && (
+                      <h2 className="text-sm font-semibold text-gray-200 border-b border-gray-700 pb-2">
+                        {section.label}
+                        {section.taskCount > 1 && (
+                          <span className="text-gray-500 font-normal ml-2">(mean over {section.taskCount} tasks)</span>
+                        )}
+                      </h2>
+                    )}
+                    <div className="flex flex-wrap gap-6">
+                      {section.metrics.map(({ metric: m, data }) => {
+                        const metricLabel = METRICS.find((x) => x.key === m)?.label ?? m;
+                        const metricRowLabels = sortRowLabels(Array.from(data.keys()).filter((l) => effectiveVisibleRows.has(l)));
+                        const metricEvs = EVAL_VARIANTS.filter((ev) => {
+                          for (const evMap of data.values()) {
+                            if (evMap.has(ev)) return true;
+                          }
+                          return false;
+                        });
+                        if (metricRowLabels.length === 0) return null;
+                        return (
+                          <HeatmapGrid
+                            key={m}
+                            data={data}
+                            rowLabels={metricRowLabels}
+                            colLabels={metricEvs}
+                            metric={m}
+                            title={metricLabel}
+                            fullConfigs={fullConfigs}
+                          />
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+
+                {/* Comparison: + TC-Self (side-by-side + delta) */}
+                {comparisonPreset === "plus-tcself" && tcSelfPairs.length === 0 && (
+                  <p className="text-sm text-gray-500 italic">No matched pairs found for + TC-Self comparison. Check that both non-TC and tcself models exist for this family.</p>
+                )}
+                {comparisonPreset === "plus-tcself" && tcSelfPairs.length > 0 && METRICS.map((m) => {
+                  const leftData = aggByTrainingTC(null, m.key);
+                  const rightData = aggByTrainingTC("tcself", m.key);
+                  const existingPairs = tcSelfPairs.filter(([l, r]) => leftData.has(l) && rightData.has(r));
+                  if (existingPairs.length === 0) return null;
+                  const evs = EVAL_VARIANTS.filter((ev) => {
+                    for (const evMap of [...leftData.values(), ...rightData.values()]) {
+                      if (evMap.has(ev)) return true;
+                    }
+                    return false;
+                  });
+                  return (
+                    <SideBySideDelta
+                      key={`tcself-${m.key}`}
+                      pairs={existingPairs}
+                      leftData={leftData}
+                      rightData={rightData}
+                      colLabels={evs}
+                      metric={m.key}
+                      title={m.label}
+                      leftLabel="Without TC"
+                      rightLabel="+ TC-Self"
+                      fullConfigs={fullConfigs}
+                    />
+                  );
+                })}
+
+                {/* Comparison: TC-Self vs TC-Neg (side-by-side + delta) */}
+                {comparisonPreset === "tcself-vs-tcneg" && tcSelfVsNegPairs.length === 0 && (
+                  <p className="text-sm text-gray-500 italic">No matched pairs found for TC-Self vs TC-Neg comparison. Check that both tcself and tcneg models exist for this family.</p>
+                )}
+                {comparisonPreset === "tcself-vs-tcneg" && tcSelfVsNegPairs.length > 0 && METRICS.map((m) => {
+                  const leftData = aggByMatchedTC("self", m.key);
+                  const rightData = aggByMatchedTC("neg", m.key);
+                  const existingPairs = tcSelfVsNegPairs.filter(([l, r]) => leftData.has(l) && rightData.has(r));
+                  if (existingPairs.length === 0) return null;
+                  const evs = EVAL_VARIANTS.filter((ev) => {
+                    for (const evMap of [...leftData.values(), ...rightData.values()]) {
+                      if (evMap.has(ev)) return true;
+                    }
+                    return false;
+                  });
+                  return (
+                    <SideBySideDelta
+                      key={`tcneg-${m.key}`}
+                      pairs={existingPairs}
+                      leftData={leftData}
+                      rightData={rightData}
+                      colLabels={evs}
+                      metric={m.key}
+                      title={m.label}
+                      leftLabel="TC-Self"
+                      rightLabel="TC-Neg"
+                      fullConfigs={fullConfigs}
+                    />
+                  );
+                })}
+
+                {/* Comparison: TC-Self vs TC-GPT2 (side-by-side + delta) */}
+                {comparisonPreset === "tcself-vs-tcgpt2" && tcSelfVsGpt2Pairs.length === 0 && (
+                  <p className="text-sm text-gray-500 italic">No matched pairs found for TC-Self vs TC-GPT2 comparison.</p>
+                )}
+                {comparisonPreset === "tcself-vs-tcgpt2" && tcSelfVsGpt2Pairs.length > 0 && METRICS.map((m) => {
+                  const leftData = aggByMatchedTC("self", m.key);
+                  const rightData = aggByMatchedTC("gpt2", m.key);
+                  const existingPairs = tcSelfVsGpt2Pairs.filter(([l, r]) => leftData.has(l) && rightData.has(r));
+                  if (existingPairs.length === 0) return null;
+                  const evs = EVAL_VARIANTS.filter((ev) => {
+                    for (const evMap of [...leftData.values(), ...rightData.values()]) {
+                      if (evMap.has(ev)) return true;
+                    }
+                    return false;
+                  });
+                  return (
+                    <SideBySideDelta
+                      key={`tcgpt2-${m.key}`}
+                      pairs={existingPairs}
+                      leftData={leftData}
+                      rightData={rightData}
+                      colLabels={evs}
+                      metric={m.key}
+                      title={m.label}
+                      leftLabel="TC-Self"
+                      rightLabel="TC-GPT2"
+                      fullConfigs={fullConfigs}
+                    />
+                  );
+                })}
+
+                {/* Per-task breakdown — regular heatmap for all/training-effect */}
+                {(comparisonPreset === "all" || comparisonPreset === "training-effect") && perTaskSections.length > 0 && (
+                  <PerTaskCollapsible sections={perTaskSections} fullConfigs={fullConfigs} visibleRows={effectiveVisibleRows} />
+                )}
+
+                {/* Per-task breakdown — side-by-side + delta for + TC-Self */}
+                {comparisonPreset === "plus-tcself" && selectedTask === "__all__" && (
+                  <PerTaskComparisonCollapsible
+                    filteredRows={filteredRows}
+                    pairs={tcSelfPairs}
+                    leftLabel="Without TC"
+                    rightLabel="+ TC-Self"
+                    leftFilter={(r) => {
+                      const label = getRowLabel(r);
+                      return !TC_FLAGS.some((f) => hasTCFlag(label, f));
+                    }}
+                    rightFilter={(r) => hasTCFlag(getRowLabel(r), "tcself")}
+                    fullConfigs={fullConfigs}
+                  />
+                )}
+
+                {/* Per-task breakdown — side-by-side + delta for TC-Self vs TC-Neg */}
+                {comparisonPreset === "tcself-vs-tcneg" && selectedTask === "__all__" && (
+                  <PerTaskComparisonCollapsible
+                    filteredRows={comparisonBaseRows}
+                    pairs={tcSelfVsNegPairs}
+                    leftLabel="TC-Self (eval)"
+                    rightLabel="TC-Neg (eval)"
+                    leftFilter={(r) => getEvalTCType(r) === "self"}
+                    rightFilter={(r) => getEvalTCType(r) === "neg"}
+                    fullConfigs={fullConfigs}
+                  />
+                )}
+
+                {/* Per-task breakdown — side-by-side + delta for TC-Self vs TC-GPT2 */}
+                {comparisonPreset === "tcself-vs-tcgpt2" && selectedTask === "__all__" && (
+                  <PerTaskComparisonCollapsible
+                    filteredRows={comparisonBaseRows}
+                    pairs={tcSelfVsGpt2Pairs}
+                    leftLabel="TC-Self (eval)"
+                    rightLabel="TC-GPT2 (eval)"
+                    leftFilter={(r) => getEvalTCType(r) === "self"}
+                    rightFilter={(r) => getEvalTCType(r) === "gpt2"}
+                    fullConfigs={fullConfigs}
+                  />
+                )}
+              </>
+            ) : (
+              <div className="space-y-8">
+                {METRICS.map((m) => {
+                  const metricAgg = aggregateData(filteredRows, m.key, getRowLabel).data;
+                  const metricRowLabels = sortRowLabels(Array.from(metricAgg.keys()).filter((l) => effectiveVisibleRows.has(l)));
+                  if (metricRowLabels.length === 0) return null;
+                  return (
+                    <BarChart
+                      key={m.key}
+                      data={metricAgg}
+                      rowLabels={metricRowLabels}
+                      evalVariants={availableEvalVariants.filter((ev) => ev === "raw" || ev === "tc")}
+                      metric={m.key}
+                      title={`${m.label}${selectedTask === "__all__" && stats.tasks > 1 ? ` (mean ± SE over ${stats.tasks} tasks)` : ""}`}
+                    />
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/experiments/components/viewers/ImageViewer.tsx

@@ -0,0 +1,319 @@
+import { useState, useEffect, useCallback } from "react";
+import { HF_ORG } from "../../../config";
+
+interface ImageViewerProps {
+  datasetRepo: string;
+  split?: string;
+  onClose: () => void;
+}
+
+interface ImageRow {
+  src: string;
+  caption: string;
+  rowIndex: number;
+}
+
+// Attempt to extract an image URL from a column value returned by the datasets-server API.
+// Image columns come back as { src: "..." }, but plain string URLs and path strings are also handled.
+function extractImageUrl(value: unknown): string | null {
+  if (!value) return null;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("/")) {
+      return trimmed;
+    }
+    return null;
+  }
+  if (typeof value === "object") {
+    const obj = value as Record<string, unknown>;
+    if (typeof obj.src === "string") return obj.src;
+    if (typeof obj.url === "string") return obj.url;
+    if (typeof obj.path === "string" && (obj.path as string).startsWith("http")) return obj.path as string;
+  }
+  return null;
+}
+
+// Return the first string value that exists among the given keys in a row object.
+function pickCaption(row: Record<string, unknown>, keys: string[]): string | null {
+  for (const key of keys) {
+    const v = row[key];
+    if (typeof v === "string" && v.trim()) return v.trim();
+    if (typeof v === "number") return String(v);
+  }
+  return null;
+}
+
+export default function ImageViewer({ datasetRepo, split = "train", onClose }: ImageViewerProps) {
+  // Ensure dataset repo has org prefix for HF API calls
+  const fullRepo = datasetRepo.includes("/") ? datasetRepo : `${HF_ORG}/${datasetRepo}`;
+
+  const [images, setImages] = useState<ImageRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [noImageColumns, setNoImageColumns] = useState(false);
+
+  // Lightbox state
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+
+  // ---- Data loading ----
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchImages() {
+      setLoading(true);
+      setError(null);
+      setNoImageColumns(false);
+
+      try {
+        const url = `https://datasets-server.huggingface.co/rows?dataset=${encodeURIComponent(fullRepo)}&config=default&split=${encodeURIComponent(split)}&offset=0&length=20`;
+        const res = await fetch(url);
+        if (!res.ok) {
+          throw new Error(`Datasets server returned ${res.status}: ${res.statusText}`);
+        }
+        const data = await res.json();
+
+        const rows: Record<string, unknown>[] = data.rows?.map(
+          (r: { row: Record<string, unknown> }) => r.row
+        ) ?? [];
+
+        if (rows.length === 0) {
+          if (!cancelled) {
+            setImages([]);
+            setLoading(false);
+          }
+          return;
+        }
+
+        // Find image column(s): any column whose value for the first row resolves to an image URL,
+        // or whose key contains image/url/path hints.
+        const firstRow = rows[0];
+        const columnNames = Object.keys(firstRow);
+
+        // Rank columns: explicit image columns first, then url/path hints, then anything resolving
+        const imageColumns: string[] = [];
+
+        // Pass 1: columns that directly contain image objects or HTTP URLs
+        for (const col of columnNames) {
+          if (extractImageUrl(firstRow[col]) !== null) {
+            imageColumns.push(col);
+          }
+        }
+
+        // Pass 2: columns with suggestive names that we haven't already picked
+        if (imageColumns.length === 0) {
+          const hints = ["image", "img", "image_url", "url", "path", "file"];
+          for (const hint of hints) {
+            const match = columnNames.find((c) => c.toLowerCase().includes(hint));
+            if (match && !imageColumns.includes(match)) {
+              imageColumns.push(match);
+            }
+          }
+        }
+
+        if (imageColumns.length === 0) {
+          if (!cancelled) {
+            setNoImageColumns(true);
+            setLoading(false);
+          }
+          return;
+        }
+
+        // Caption columns (first match wins per row)
+        const captionKeys = ["caption", "description", "label", "title", "text", "name"];
+
+        const imageCol = imageColumns[0];
+        const extracted: ImageRow[] = [];
+
+        rows.forEach((row, idx) => {
+          const src = extractImageUrl(row[imageCol]);
+          if (src) {
+            const caption = pickCaption(row, captionKeys) ?? `Image ${idx + 1}`;
+            extracted.push({ src, caption, rowIndex: idx });
+          }
+        });
+
+        if (!cancelled) {
+          setImages(extracted);
+          setLoading(false);
+        }
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load images");
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchImages();
+    return () => {
+      cancelled = true;
+    };
+  }, [fullRepo, split]);
+
+  // ---- Lightbox keyboard navigation ----
+  const closeLightbox = useCallback(() => setLightboxIndex(null), []);
+
+  const prevImage = useCallback(() => {
+    setLightboxIndex((i) => (i === null || i === 0 ? images.length - 1 : i - 1));
+  }, [images.length]);
+
+  const nextImage = useCallback(() => {
+    setLightboxIndex((i) => (i === null ? 0 : (i + 1) % images.length));
+  }, [images.length]);
+
+  useEffect(() => {
+    if (lightboxIndex === null) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeLightbox();
+      if (e.key === "ArrowLeft") prevImage();
+      if (e.key === "ArrowRight") nextImage();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [lightboxIndex, closeLightbox, prevImage, nextImage]);
+
+  const shortName = datasetRepo.split("/").pop() ?? datasetRepo;
+
+  // ---- Render ----
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-gray-900">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-gray-800 flex-shrink-0">
+        <div className="flex items-center gap-3 min-w-0">
+          <span className="text-sm font-semibold text-gray-200 truncate">{shortName}</span>
+          {datasetRepo.includes("/") && (
+            <span className="text-xs text-gray-600 truncate">{datasetRepo.split("/")[0]}/</span>
+          )}
+          {!loading && !error && !noImageColumns && (
+            <span className="text-xs text-gray-500">{images.length} images</span>
+          )}
+        </div>
+        <button
+          onClick={onClose}
+          className="text-gray-400 hover:text-gray-200 transition-colors ml-4 flex-shrink-0 text-xl leading-none"
+          aria-label="Close"
+        >
+          &times;
+        </button>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto p-5">
+        {loading && (
+          <div className="flex items-center justify-center h-48">
+            <span className="text-sm text-gray-500 animate-pulse">Loading images...</span>
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="flex items-center justify-center h-48">
+            <div className="text-center">
+              <p className="text-sm text-red-400 mb-1">Failed to load dataset</p>
+              <p className="text-xs text-gray-500">{error}</p>
+            </div>
+          </div>
+        )}
+
+        {!loading && !error && noImageColumns && (
+          <div className="flex items-center justify-center h-48">
+            <p className="text-sm text-gray-500 italic">No image columns found in this dataset.</p>
+          </div>
+        )}
+
+        {!loading && !error && !noImageColumns && images.length === 0 && (
+          <div className="flex items-center justify-center h-48">
+            <p className="text-sm text-gray-500 italic">No rows found in this split.</p>
+          </div>
+        )}
+
+        {!loading && !error && images.length > 0 && (
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+            {images.map((img, idx) => (
+              <button
+                key={img.rowIndex}
+                onClick={() => setLightboxIndex(idx)}
+                className="group flex flex-col bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-cyan-600 transition-colors text-left"
+              >
+                <div className="aspect-square overflow-hidden bg-gray-900 flex items-center justify-center">
+                  <img
+                    src={img.src}
+                    alt={img.caption}
+                    className="w-full h-full object-cover group-hover:opacity-90 transition-opacity"
+                    loading="lazy"
+                    onError={(e) => {
+                      (e.currentTarget as HTMLImageElement).style.display = "none";
+                    }}
+                  />
+                </div>
+                <div className="px-2 py-1.5">
+                  <p className="text-xs text-gray-400 truncate" title={img.caption}>
+                    {img.caption}
+                  </p>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Lightbox overlay */}
+      {lightboxIndex !== null && images[lightboxIndex] && (
+        <div
+          className="fixed inset-0 z-60 flex items-center justify-center bg-black/85"
+          onClick={closeLightbox}
+        >
+          {/* Close */}
+          <button
+            className="absolute top-4 right-5 text-gray-300 hover:text-white text-3xl leading-none z-10"
+            onClick={closeLightbox}
+            aria-label="Close lightbox"
+          >
+            &times;
+          </button>
+
+          {/* Prev arrow */}
+          {images.length > 1 && (
+            <button
+              className="absolute left-4 text-gray-300 hover:text-white text-4xl leading-none z-10 px-2 py-4"
+              onClick={(e) => { e.stopPropagation(); prevImage(); }}
+              aria-label="Previous image"
+            >
+              &#8249;
+            </button>
+          )}
+
+          {/* Image */}
+          <div
+            className="max-w-[90vw] max-h-[90vh] flex flex-col items-center gap-3"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <img
+              src={images[lightboxIndex].src}
+              alt={images[lightboxIndex].caption}
+              className="max-w-full max-h-[80vh] object-contain rounded shadow-2xl"
+            />
+            <p className="text-sm text-gray-300 text-center max-w-lg px-4">
+              {images[lightboxIndex].caption}
+            </p>
+            {images.length > 1 && (
+              <p className="text-xs text-gray-600">
+                {lightboxIndex + 1} / {images.length}
+              </p>
+            )}
+          </div>
+
+          {/* Next arrow */}
+          {images.length > 1 && (
+            <button
+              className="absolute right-4 text-gray-300 hover:text-white text-4xl leading-none z-10 px-2 py-4"
+              onClick={(e) => { e.stopPropagation(); nextImage(); }}
+              aria-label="Next image"
+            >
+              &#8250;
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/experiments/components/viewers/PlotlyViewer.tsx

@@ -0,0 +1,422 @@
+import { useState, useEffect, useCallback } from "react";
+import { HF_ORG } from "../../../config";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface PlotlyViewerProps {
+  datasetRepo: string;
+  split?: string;
+  onClose: () => void;
+}
+
+interface HfRow {
+  [key: string]: unknown;
+}
+
+interface ColumnStats {
+  name: string;
+  min: number;
+  max: number;
+  mean: number;
+  count: number;
+}
+
+type ViewerMode = "plotly_json" | "numeric_summary" | "empty";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PLOTLY_COLUMN_NAMES = ["plotly_json", "chart_data", "figure_json"];
+const HF_DATASETS_API = "https://datasets-server.huggingface.co";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function detectPlotlyColumn(row: HfRow): string | null {
+  for (const col of PLOTLY_COLUMN_NAMES) {
+    if (col in row) return col;
+  }
+  return null;
+}
+
+function extractNumericColumns(rows: HfRow[]): ColumnStats[] {
+  if (rows.length === 0) return [];
+  const firstRow = rows[0];
+  const stats: ColumnStats[] = [];
+
+  for (const key of Object.keys(firstRow)) {
+    const values = rows
+      .map((r) => r[key])
+      .filter((v) => typeof v === "number" && isFinite(v as number)) as number[];
+
+    if (values.length === 0) continue;
+
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const mean = values.reduce((a, b) => a + b, 0) / values.length;
+    stats.push({ name: key, min, max, mean, count: values.length });
+  }
+
+  return stats;
+}
+
+function tryParseJson(raw: unknown): object | null {
+  if (typeof raw === "object" && raw !== null) return raw as object;
+  if (typeof raw === "string") {
+    try {
+      const parsed = JSON.parse(raw);
+      if (typeof parsed === "object" && parsed !== null) return parsed;
+    } catch {
+      // not valid JSON
+    }
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard not available
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-gray-100 px-2.5 py-1 rounded transition-colors border border-gray-600"
+    >
+      {copied ? "Copied!" : "Copy JSON"}
+    </button>
+  );
+}
+
+function PlotlyJsonView({ jsonData }: { jsonData: object }) {
+  const formatted = JSON.stringify(jsonData, null, 2);
+
+  // Detect chart type for a helpful header badge
+  const chartType =
+    (jsonData as Record<string, unknown>).type ||
+    (
+      (jsonData as Record<string, unknown[]>).data?.[0] as
+        | Record<string, unknown>
+        | undefined
+    )?.type ||
+    null;
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      {/* Info bar */}
+      <div className="flex items-center justify-between gap-3 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-amber-400 bg-amber-900/30 border border-amber-700/40 px-2 py-0.5 rounded">
+            plotly JSON
+          </span>
+          {chartType && (
+            <span className="text-xs text-gray-400">
+              type:{" "}
+              <span className="text-gray-300 font-mono">
+                {String(chartType)}
+              </span>
+            </span>
+          )}
+          <span className="text-xs text-gray-500 italic">
+            Install{" "}
+            <code className="text-gray-400 bg-gray-800 px-1 py-0.5 rounded text-[11px]">
+              react-plotly.js
+            </code>{" "}
+            for interactive rendering
+          </span>
+        </div>
+        <CopyButton text={formatted} />
+      </div>
+
+      {/* JSON code block */}
+      <div className="flex-1 overflow-auto rounded-lg border border-gray-700 bg-gray-950">
+        <pre className="p-4 text-xs text-gray-300 font-mono leading-relaxed whitespace-pre-wrap break-words">
+          {formatted}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+function NumericSummaryView({ stats }: { stats: ColumnStats[] }) {
+  if (stats.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-32">
+        <p className="text-sm text-gray-500 italic">
+          No numeric columns found in dataset.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-xs text-gray-500">
+        No Plotly JSON column detected (
+        <code className="text-gray-400">
+          {PLOTLY_COLUMN_NAMES.join(", ")}
+        </code>
+        ). Showing numeric column summary.
+      </p>
+      <div className="overflow-x-auto rounded-lg border border-gray-700">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-gray-700 bg-gray-800/50">
+              <th className="text-left py-2 px-3 text-xs text-gray-400 uppercase tracking-wide font-medium">
+                Column
+              </th>
+              <th className="text-right py-2 px-3 text-xs text-gray-400 uppercase tracking-wide font-medium">
+                Count
+              </th>
+              <th className="text-right py-2 px-3 text-xs text-gray-400 uppercase tracking-wide font-medium">
+                Min
+              </th>
+              <th className="text-right py-2 px-3 text-xs text-gray-400 uppercase tracking-wide font-medium">
+                Max
+              </th>
+              <th className="text-right py-2 px-3 text-xs text-gray-400 uppercase tracking-wide font-medium">
+                Mean
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {stats.map((col) => (
+              <tr
+                key={col.name}
+                className="border-b border-gray-800 hover:bg-gray-800/30 transition-colors"
+              >
+                <td className="py-2 px-3 font-mono text-xs text-cyan-300">
+                  {col.name}
+                </td>
+                <td className="py-2 px-3 text-right text-xs text-gray-400 font-mono">
+                  {col.count}
+                </td>
+                <td className="py-2 px-3 text-right text-xs text-gray-300 font-mono">
+                  {col.min.toLocaleString(undefined, {
+                    maximumFractionDigits: 4,
+                  })}
+                </td>
+                <td className="py-2 px-3 text-right text-xs text-gray-300 font-mono">
+                  {col.max.toLocaleString(undefined, {
+                    maximumFractionDigits: 4,
+                  })}
+                </td>
+                <td className="py-2 px-3 text-right text-xs text-gray-300 font-mono">
+                  {col.mean.toLocaleString(undefined, {
+                    maximumFractionDigits: 4,
+                  })}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main Component
+// ---------------------------------------------------------------------------
+
+export default function PlotlyViewer({
+  datasetRepo,
+  split = "train",
+  onClose,
+}: PlotlyViewerProps) {
+  // Ensure dataset repo has org prefix for HF API calls
+  const fullRepo = datasetRepo.includes("/") ? datasetRepo : `${HF_ORG}/${datasetRepo}`;
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [mode, setMode] = useState<ViewerMode>("empty");
+  const [plotlyJson, setPlotlyJson] = useState<object | null>(null);
+  const [numericStats, setNumericStats] = useState<ColumnStats[]>([]);
+  const [rowCount, setRowCount] = useState<number>(0);
+
+  const shortName = datasetRepo.split("/").pop() ?? datasetRepo;
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Fetch first page of rows (up to 100 for numeric summary)
+      const url = `${HF_DATASETS_API}/rows?dataset=${encodeURIComponent(
+        fullRepo
+      )}&config=default&split=${encodeURIComponent(split)}&offset=0&length=100`;
+
+      const resp = await fetch(url);
+      if (!resp.ok) {
+        const text = await resp.text();
+        throw new Error(`HF API error ${resp.status}: ${text.slice(0, 200)}`);
+      }
+
+      const data = (await resp.json()) as {
+        rows?: { row: HfRow }[];
+        num_rows_total?: number;
+      };
+
+      const rows: HfRow[] = (data.rows ?? []).map((r) => r.row);
+      setRowCount(data.num_rows_total ?? rows.length);
+
+      if (rows.length === 0) {
+        setMode("empty");
+        return;
+      }
+
+      // Try to find a plotly JSON column
+      const plotlyCol = detectPlotlyColumn(rows[0]);
+      if (plotlyCol !== null) {
+        // Use the first row's plotly JSON
+        const parsed = tryParseJson(rows[0][plotlyCol]);
+        if (parsed !== null) {
+          setPlotlyJson(parsed);
+          setMode("plotly_json");
+          return;
+        }
+      }
+
+      // Fallback: numeric summary
+      const stats = extractNumericColumns(rows);
+      setNumericStats(stats);
+      setMode(stats.length > 0 ? "numeric_summary" : "empty");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [fullRepo, split]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="w-full max-w-5xl h-[85vh] bg-gray-900 rounded-xl border border-gray-700 shadow-2xl flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-gray-700 flex-shrink-0">
+          <div className="flex items-center gap-3 min-w-0">
+            <span className="text-sm font-semibold text-gray-200 truncate">
+              {shortName}
+            </span>
+            {datasetRepo.includes("/") && (
+              <span className="text-xs text-gray-500 truncate hidden sm:block">
+                {datasetRepo.split("/")[0]}/
+              </span>
+            )}
+            <span className="text-xs text-gray-600 border border-gray-700 px-1.5 py-0.5 rounded">
+              {split}
+            </span>
+            {!loading && rowCount > 0 && (
+              <span className="text-xs text-gray-600">
+                {rowCount.toLocaleString()} rows
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <a
+              href={`https://huggingface.co/datasets/${fullRepo}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-gray-500 hover:text-cyan-400 transition-colors px-2 py-1 border border-gray-700 rounded"
+            >
+              HF
+            </a>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-700"
+              aria-label="Close viewer"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-hidden p-5">
+          {loading && (
+            <div className="flex items-center justify-center h-full">
+              <div className="flex flex-col items-center gap-3">
+                <div className="w-6 h-6 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin" />
+                <p className="text-sm text-gray-400">Loading dataset...</p>
+              </div>
+            </div>
+          )}
+
+          {!loading && error && (
+            <div className="flex items-center justify-center h-full">
+              <div className="max-w-lg text-center space-y-3">
+                <p className="text-sm font-medium text-red-400">
+                  Failed to load dataset
+                </p>
+                <p className="text-xs text-gray-500 font-mono break-words bg-gray-800 rounded p-3">
+                  {error}
+                </p>
+                <button
+                  onClick={fetchData}
+                  className="text-xs text-cyan-400 hover:text-cyan-300 border border-cyan-700/50 px-3 py-1 rounded transition-colors"
+                >
+                  Retry
+                </button>
+              </div>
+            </div>
+          )}
+
+          {!loading && !error && mode === "empty" && (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-center space-y-2">
+                <p className="text-sm text-gray-400">Dataset is empty or has no renderable columns.</p>
+                <p className="text-xs text-gray-600">
+                  Expected columns for Plotly:{" "}
+                  <code className="text-gray-500">
+                    {PLOTLY_COLUMN_NAMES.join(", ")}
+                  </code>
+                </p>
+              </div>
+            </div>
+          )}
+
+          {!loading && !error && mode === "plotly_json" && plotlyJson && (
+            <PlotlyJsonView jsonData={plotlyJson} />
+          )}
+
+          {!loading && !error && mode === "numeric_summary" && (
+            <NumericSummaryView stats={numericStats} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/experiments/components/viewers/TableViewer.tsx

@@ -0,0 +1,440 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { HF_ORG } from "../../../config";
+
+const PAGE_SIZE = 100;
+const CELL_TRUNCATE_LEN = 200;
+
+interface HfRow {
+  row_idx: number;
+  row: Record<string, unknown>;
+}
+
+interface HfFeature {
+  feature_idx: number;
+  name: string;
+  type: Record<string, unknown>;
+}
+
+interface HfResponse {
+  rows: HfRow[];
+  features: HfFeature[];
+  num_rows_total: number;
+}
+
+interface TableViewerProps {
+  datasetRepo: string;
+  split?: string;
+  onClose: () => void;
+}
+
+// ─── Cell Expansion Modal ─────────────────────────────────────────────────────
+
+interface CellModalProps {
+  value: string;
+  colName: string;
+  onClose: () => void;
+}
+
+function CellModal({ value, colName, onClose }: CellModalProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // fallback: do nothing
+    }
+  }, [value]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-gray-900 border border-gray-700 rounded-lg w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700 flex-shrink-0">
+          <span className="text-sm font-medium text-gray-200 truncate max-w-[80%]">
+            {colName}
+          </span>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleCopy}
+              className="text-xs px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 transition-colors border border-gray-600"
+              title="Copy to clipboard"
+            >
+              {copied ? "Copied!" : "Copy"}
+            </button>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-200 transition-colors text-lg leading-none px-1"
+              title="Close (Esc)"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+
+        {/* Full value — scrollable, monospace */}
+        <div className="flex-1 overflow-auto p-4">
+          <pre className="font-mono text-sm text-gray-100 whitespace-pre-wrap break-words leading-relaxed">
+            {value}
+          </pre>
+        </div>
+
+        {/* Footer with char count */}
+        <div className="px-4 py-2 border-t border-gray-700 flex-shrink-0">
+          <span className="text-xs text-gray-500">{value.length.toLocaleString()} characters — complete, untruncated</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Table Cell ───────────────────────────────────────────────────────────────
+
+interface CellProps {
+  value: unknown;
+  colName: string;
+  onExpand: (value: string, colName: string) => void;
+}
+
+function TableCell({ value, colName, onExpand }: CellProps) {
+  const str = value === null || value === undefined
+    ? ""
+    : typeof value === "object"
+    ? JSON.stringify(value, null, 2)
+    : String(value);
+
+  const isTruncated = str.length > CELL_TRUNCATE_LEN;
+  const display = isTruncated ? str.slice(0, CELL_TRUNCATE_LEN) + "..." : str;
+
+  return (
+    <td className="px-3 py-2 text-xs text-gray-300 max-w-xs border-b border-gray-800 align-top">
+      <span className="whitespace-pre-wrap break-words">{display}</span>
+      {isTruncated && (
+        <button
+          onClick={() => onExpand(str, colName)}
+          className="ml-1 text-cyan-400 hover:text-cyan-300 text-xs underline underline-offset-2 transition-colors whitespace-nowrap"
+          title="Show complete value"
+        >
+          Show more
+        </button>
+      )}
+    </td>
+  );
+}
+
+// ─── Sort icon ────────────────────────────────────────────────────────────────
+
+function SortIcon({ dir }: { dir: "asc" | "desc" | null }) {
+  if (dir === null) return <span className="text-gray-600 ml-1 text-xs">⇅</span>;
+  if (dir === "asc") return <span className="text-cyan-400 ml-1 text-xs">↑</span>;
+  return <span className="text-cyan-400 ml-1 text-xs">↓</span>;
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export default function TableViewer({ datasetRepo, split = "train", onClose }: TableViewerProps) {
+  // Ensure dataset repo has org prefix for HF API calls
+  const fullRepo = datasetRepo.includes("/") ? datasetRepo : `${HF_ORG}/${datasetRepo}`;
+
+  const [rows, setRows] = useState<HfRow[]>([]);
+  const [columns, setColumns] = useState<string[]>([]);
+  const [totalRows, setTotalRows] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(0);
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortCol, setSortCol] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+
+  const [expandedCell, setExpandedCell] = useState<{ value: string; colName: string } | null>(null);
+
+  const fetchRef = useRef(0);
+
+  const fetchRows = useCallback(async (pageIndex: number) => {
+    setLoading(true);
+    setError(null);
+
+    const fetchId = ++fetchRef.current;
+    const offset = pageIndex * PAGE_SIZE;
+    const baseUrl = "https://datasets-server.huggingface.co/rows";
+    const urlWithConfig = `${baseUrl}?dataset=${encodeURIComponent(fullRepo)}&config=default&split=${split}&offset=${offset}&length=${PAGE_SIZE}`;
+    const urlWithoutConfig = `${baseUrl}?dataset=${encodeURIComponent(fullRepo)}&split=${split}&offset=${offset}&length=${PAGE_SIZE}`;
+
+    let data: HfResponse | null = null;
+
+    try {
+      const res = await fetch(urlWithConfig);
+      if (res.ok) {
+        data = await res.json() as HfResponse;
+      } else {
+        // Try without config param
+        const res2 = await fetch(urlWithoutConfig);
+        if (res2.ok) {
+          data = await res2.json() as HfResponse;
+        } else {
+          const errText = await res2.text();
+          throw new Error(`API error ${res2.status}: ${errText.slice(0, 200)}`);
+        }
+      }
+    } catch (e) {
+      if (fetchRef.current === fetchId) {
+        setError(e instanceof Error ? e.message : "Failed to fetch dataset rows");
+        setLoading(false);
+      }
+      return;
+    }
+
+    if (fetchRef.current !== fetchId) return;
+
+    if (data) {
+      const cols = data.features.map((f) => f.name);
+      setColumns(cols);
+      setRows(data.rows);
+      setTotalRows(data.num_rows_total);
+    }
+    setLoading(false);
+  }, [fullRepo, split]);
+
+  useEffect(() => {
+    fetchRows(page);
+  }, [fetchRows, page]);
+
+  // ── Derived: search + sort applied to currently loaded page ──
+  const filteredRows = (() => {
+    let result = rows;
+
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter((r) =>
+        columns.some((col) => {
+          const v = r.row[col];
+          if (v === null || v === undefined) return false;
+          return String(typeof v === "object" ? JSON.stringify(v) : v).toLowerCase().includes(q);
+        })
+      );
+    }
+
+    if (sortCol) {
+      result = [...result].sort((a, b) => {
+        const av = a.row[sortCol];
+        const bv = b.row[sortCol];
+        const as = av === null || av === undefined ? "" : typeof av === "object" ? JSON.stringify(av) : String(av);
+        const bs = bv === null || bv === undefined ? "" : typeof bv === "object" ? JSON.stringify(bv) : String(bv);
+        // Try numeric sort first
+        const an = Number(as);
+        const bn = Number(bs);
+        if (!isNaN(an) && !isNaN(bn)) {
+          return sortDir === "asc" ? an - bn : bn - an;
+        }
+        return sortDir === "asc" ? as.localeCompare(bs) : bs.localeCompare(as);
+      });
+    }
+
+    return result;
+  })();
+
+  const handleSort = (col: string) => {
+    if (sortCol === col) {
+      if (sortDir === "asc") {
+        setSortDir("desc");
+      } else {
+        setSortCol(null);
+        setSortDir("asc");
+      }
+    } else {
+      setSortCol(col);
+      setSortDir("asc");
+    }
+  };
+
+  const handleExpand = (value: string, colName: string) => {
+    setExpandedCell({ value, colName });
+  };
+
+  const startRow = page * PAGE_SIZE + 1;
+  const endRow = totalRows !== null ? Math.min((page + 1) * PAGE_SIZE, totalRows) : (page + 1) * PAGE_SIZE;
+  const hasPrev = page > 0;
+  const hasNext = totalRows !== null ? (page + 1) * PAGE_SIZE < totalRows : rows.length === PAGE_SIZE;
+
+  const shortName = datasetRepo.split("/").pop() ?? datasetRepo;
+
+  return (
+    <>
+      {/* Full-screen overlay */}
+      <div className="fixed inset-0 z-40 bg-gray-950 flex flex-col">
+        {/* ── Top bar ────────────────────────────────────────────────── */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-800 flex-shrink-0 bg-gray-900">
+          <div className="flex items-center gap-3 min-w-0">
+            <span className="text-xs text-gray-500 uppercase tracking-wider font-medium">Table Viewer</span>
+            <span className="text-gray-600">·</span>
+            <span className="text-sm font-medium text-gray-200 truncate" title={datasetRepo}>
+              {shortName}
+            </span>
+            <span className="text-xs text-gray-500 truncate hidden sm:block" title={datasetRepo}>
+              ({datasetRepo.split("/")[0]})
+            </span>
+            {totalRows !== null && (
+              <span className="text-xs text-gray-500 flex-shrink-0">
+                {totalRows.toLocaleString()} rows
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 flex-shrink-0">
+            {/* Search */}
+            <input
+              type="text"
+              placeholder="Search all cells…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="text-xs bg-gray-800 border border-gray-700 rounded px-2.5 py-1.5 text-gray-200 placeholder-gray-500 focus:outline-none focus:border-cyan-600 w-48 sm:w-64"
+            />
+
+            {/* Close */}
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-200 transition-colors text-xl leading-none px-1"
+              title="Close viewer"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+
+        {/* ── Body ─────────────────────────────────────────────────────── */}
+        <div className="flex-1 overflow-auto">
+          {loading && (
+            <div className="flex items-center justify-center h-32">
+              <div className="flex items-center gap-3 text-gray-400">
+                <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <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>
+                <span className="text-sm">Loading rows…</span>
+              </div>
+            </div>
+          )}
+
+          {error && !loading && (
+            <div className="flex flex-col items-center justify-center h-32 gap-3">
+              <p className="text-sm text-red-400">{error}</p>
+              <button
+                onClick={() => fetchRows(page)}
+                className="text-xs px-3 py-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 border border-gray-600 transition-colors"
+              >
+                Retry
+              </button>
+            </div>
+          )}
+
+          {!loading && !error && filteredRows.length === 0 && (
+            <div className="flex items-center justify-center h-32">
+              <p className="text-sm text-gray-500 italic">
+                {searchQuery.trim() ? "No rows match your search." : "No rows returned."}
+              </p>
+            </div>
+          )}
+
+          {!loading && !error && filteredRows.length > 0 && (
+            <table className="w-full border-collapse text-left table-auto">
+              <thead className="sticky top-0 z-10 bg-gray-900">
+                <tr>
+                  {/* Row index column */}
+                  <th className="px-3 py-2.5 text-xs font-medium text-gray-500 border-b border-gray-700 w-12 bg-gray-900">
+                    #
+                  </th>
+                  {columns.map((col) => (
+                    <th
+                      key={col}
+                      onClick={() => handleSort(col)}
+                      className="px-3 py-2.5 text-xs font-medium text-gray-300 border-b border-gray-700 cursor-pointer select-none hover:text-gray-100 hover:bg-gray-800 transition-colors whitespace-nowrap bg-gray-900"
+                    >
+                      {col}
+                      <SortIcon dir={sortCol === col ? sortDir : null} />
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {filteredRows.map((r) => (
+                  <tr
+                    key={r.row_idx}
+                    className="hover:bg-gray-800/40 transition-colors"
+                  >
+                    <td className="px-3 py-2 text-xs text-gray-600 border-b border-gray-800 align-top tabular-nums">
+                      {r.row_idx}
+                    </td>
+                    {columns.map((col) => (
+                      <TableCell
+                        key={col}
+                        value={r.row[col]}
+                        colName={col}
+                        onExpand={handleExpand}
+                      />
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+
+        {/* ── Pagination bar ───────────────────────────────────────────── */}
+        {!loading && !error && totalRows !== null && (
+          <div className="flex items-center justify-between px-4 py-2.5 border-t border-gray-800 bg-gray-900 flex-shrink-0">
+            <span className="text-xs text-gray-500">
+              {searchQuery.trim()
+                ? `${filteredRows.length} matching rows on this page`
+                : `Rows ${startRow}–${endRow} of ${totalRows.toLocaleString()}`}
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setPage((p) => p - 1)}
+                disabled={!hasPrev}
+                className="text-xs px-3 py-1 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                ← Prev
+              </button>
+              <span className="text-xs text-gray-500 tabular-nums">
+                Page {page + 1} / {Math.ceil(totalRows / PAGE_SIZE)}
+              </span>
+              <button
+                onClick={() => setPage((p) => p + 1)}
+                disabled={!hasNext}
+                className="text-xs px-3 py-1 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                Next →
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── Cell Expansion Modal ─────────────────────────────────────── */}
+      {expandedCell && (
+        <CellModal
+          value={expandedCell.value}
+          colName={expandedCell.colName}
+          onClose={() => setExpandedCell(null)}
+        />
+      )}
+    </>
+  );
+}

frontend/src/experiments/components/viewers/YamlViewer.tsx

@@ -0,0 +1,588 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { HF_ORG } from "../../../config";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface HfRow {
+  row_idx: number;
+  row: Record<string, unknown>;
+}
+
+interface HfFeature {
+  feature_idx: number;
+  name: string;
+  type: Record<string, unknown>;
+}
+
+interface HfResponse {
+  rows: HfRow[];
+  features: HfFeature[];
+  num_rows_total: number;
+}
+
+interface YamlViewerProps {
+  datasetRepo: string;
+  split?: string;
+  onClose: () => void;
+}
+
+// ─── Syntax Highlighting ──────────────────────────────────────────────────────
+
+/**
+ * Color scheme for JSON tokens in dark theme.
+ * Keys: cyan, strings: green, numbers: amber, booleans: purple, null: gray.
+ */
+function getValueColor(value: unknown): string {
+  if (value === null || value === undefined) return "text-gray-400";
+  if (typeof value === "boolean") return "text-purple-400";
+  if (typeof value === "number") return "text-amber-400";
+  if (typeof value === "string") return "text-green-400";
+  return "text-gray-200";
+}
+
+function StringValue({ value }: { value: string }) {
+  // Render quoted string with green color
+  return <span className="text-green-400">&quot;{value}&quot;</span>;
+}
+
+function PrimitiveValue({ value }: { value: unknown }) {
+  if (value === null) return <span className="text-gray-400">null</span>;
+  if (typeof value === "boolean")
+    return <span className="text-purple-400">{String(value)}</span>;
+  if (typeof value === "number")
+    return <span className="text-amber-400">{String(value)}</span>;
+  if (typeof value === "string") return <StringValue value={value} />;
+  return <span className={getValueColor(value)}>{String(value)}</span>;
+}
+
+// ─── Recursive JSON Node ──────────────────────────────────────────────────────
+
+interface JsonNodeProps {
+  data: unknown;
+  depth?: number;
+  /** If provided, render this key inline before the value */
+  keyName?: string;
+  /** Whether this node is the last sibling (no trailing comma) */
+  isLast?: boolean;
+  /** For top-level keys on the root object: controlled collapse state */
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+function JsonNode({
+  data,
+  depth = 0,
+  keyName,
+  isLast = true,
+  collapsed,
+  onToggleCollapse,
+}: JsonNodeProps) {
+  const indent = "  ".repeat(depth);
+  const isTopLevel = depth === 0 && onToggleCollapse !== undefined;
+
+  // Render the key label (if any)
+  const keyEl = keyName !== undefined ? (
+    <span className="text-cyan-400">&quot;{keyName}&quot;</span>
+  ) : null;
+
+  const separator = keyName !== undefined ? (
+    <span className="text-gray-400">: </span>
+  ) : null;
+
+  // ── Object ────────────────────────────────────────────────────────────────
+  if (data !== null && typeof data === "object" && !Array.isArray(data)) {
+    const entries = Object.entries(data as Record<string, unknown>);
+    const isEmpty = entries.length === 0;
+
+    if (isEmpty) {
+      return (
+        <div>
+          <span className="text-gray-600">{indent}</span>
+          {keyEl}{separator}
+          <span className="text-gray-200">{"{}"}</span>
+          {!isLast && <span className="text-gray-500">,</span>}
+        </div>
+      );
+    }
+
+    // Collapsible header
+    const isCollapsed = collapsed === true;
+
+    return (
+      <div>
+        <div
+          className={isTopLevel ? "cursor-pointer group" : ""}
+          onClick={isTopLevel ? onToggleCollapse : undefined}
+        >
+          <span className="text-gray-600">{indent}</span>
+          {isTopLevel && (
+            <span className={`text-gray-500 mr-1 text-xs transition-transform inline-block ${isCollapsed ? "" : "rotate-90"} group-hover:text-gray-300`}>
+              ▶
+            </span>
+          )}
+          {keyEl}{separator}
+          <span className="text-gray-200">{"{"}</span>
+          {isCollapsed && (
+            <>
+              <span className="text-gray-500"> … </span>
+              <span className="text-gray-200">{"}"}</span>
+              {!isLast && <span className="text-gray-500">,</span>}
+            </>
+          )}
+        </div>
+
+        {!isCollapsed && (
+          <>
+            {entries.map(([k, v], i) => (
+              <JsonNode
+                key={k}
+                data={v}
+                depth={depth + 1}
+                keyName={k}
+                isLast={i === entries.length - 1}
+              />
+            ))}
+            <div>
+              <span className="text-gray-600">{indent}</span>
+              <span className="text-gray-200">{"}"}</span>
+              {!isLast && <span className="text-gray-500">,</span>}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // ── Array ─────────────────────────────────────────────────────────────────
+  if (Array.isArray(data)) {
+    const isEmpty = data.length === 0;
+
+    if (isEmpty) {
+      return (
+        <div>
+          <span className="text-gray-600">{indent}</span>
+          {keyEl}{separator}
+          <span className="text-gray-200">{"[]"}</span>
+          {!isLast && <span className="text-gray-500">,</span>}
+        </div>
+      );
+    }
+
+    const isCollapsed = collapsed === true;
+
+    return (
+      <div>
+        <div
+          className={isTopLevel ? "cursor-pointer group" : ""}
+          onClick={isTopLevel ? onToggleCollapse : undefined}
+        >
+          <span className="text-gray-600">{indent}</span>
+          {isTopLevel && (
+            <span className={`text-gray-500 mr-1 text-xs transition-transform inline-block ${isCollapsed ? "" : "rotate-90"} group-hover:text-gray-300`}>
+              ▶
+            </span>
+          )}
+          {keyEl}{separator}
+          <span className="text-gray-200">{"["}</span>
+          {isCollapsed && (
+            <>
+              <span className="text-gray-500"> … </span>
+              <span className="text-gray-200">{"]"}</span>
+              {!isLast && <span className="text-gray-500">,</span>}
+            </>
+          )}
+        </div>
+
+        {!isCollapsed && (
+          <>
+            {data.map((item, i) => (
+              <JsonNode
+                key={i}
+                data={item}
+                depth={depth + 1}
+                isLast={i === data.length - 1}
+              />
+            ))}
+            <div>
+              <span className="text-gray-600">{indent}</span>
+              <span className="text-gray-200">{"]"}</span>
+              {!isLast && <span className="text-gray-500">,</span>}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // ── Primitive ─────────────────────────────────────────────────────────────
+  return (
+    <div>
+      <span className="text-gray-600">{indent}</span>
+      {keyEl}{separator}
+      <PrimitiveValue value={data} />
+      {!isLast && <span className="text-gray-500">,</span>}
+    </div>
+  );
+}
+
+// ─── Root Object Renderer (top-level collapsible sections) ───────────────────
+
+function JsonRoot({ data }: { data: unknown }) {
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+  const toggle = useCallback((key: string) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  if (data === null || data === undefined) {
+    return <span className="text-gray-400">null</span>;
+  }
+
+  // Top-level object: render each key as a collapsible section
+  if (typeof data === "object" && !Array.isArray(data)) {
+    const entries = Object.entries(data as Record<string, unknown>);
+    if (entries.length === 0) {
+      return <span className="text-gray-200">{"{}"}</span>;
+    }
+
+    return (
+      <div>
+        <div><span className="text-gray-200">{"{"}</span></div>
+        {entries.map(([k, v], i) => (
+          <JsonNode
+            key={k}
+            data={v}
+            depth={1}
+            keyName={k}
+            isLast={i === entries.length - 1}
+            collapsed={collapsed[k] ?? false}
+            onToggleCollapse={() => toggle(k)}
+          />
+        ))}
+        <div><span className="text-gray-200">{"}"}</span></div>
+      </div>
+    );
+  }
+
+  // Top-level array or primitive — render normally
+  return <JsonNode data={data} depth={0} />;
+}
+
+// ─── Row Selector ─────────────────────────────────────────────────────────────
+
+interface RowSelectorProps {
+  rows: HfRow[];
+  currentIdx: number;
+  onChange: (idx: number) => void;
+}
+
+function RowSelector({ rows, currentIdx, onChange }: RowSelectorProps) {
+  if (rows.length <= 1) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-xs text-gray-500">Row:</span>
+      <select
+        value={currentIdx}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="text-xs bg-gray-800 border border-gray-700 rounded px-2 py-1 text-gray-200 focus:outline-none focus:border-cyan-600"
+      >
+        {rows.map((r, i) => (
+          <option key={r.row_idx} value={i}>
+            #{r.row_idx}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export default function YamlViewer({ datasetRepo, split = "train", onClose }: YamlViewerProps) {
+  // Ensure dataset repo has org prefix for HF API calls
+  const fullRepo = datasetRepo.includes("/") ? datasetRepo : `${HF_ORG}/${datasetRepo}`;
+
+  const [rows, setRows] = useState<HfRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedRowIdx, setSelectedRowIdx] = useState(0);
+  const [copied, setCopied] = useState(false);
+
+  const fetchRef = useRef(0);
+
+  const fetchRows = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    const fetchId = ++fetchRef.current;
+    const baseUrl = "https://datasets-server.huggingface.co/rows";
+    const urlWithConfig = `${baseUrl}?dataset=${encodeURIComponent(fullRepo)}&config=default&split=${split}&offset=0&length=100`;
+    const urlWithoutConfig = `${baseUrl}?dataset=${encodeURIComponent(fullRepo)}&split=${split}&offset=0&length=100`;
+
+    let data: HfResponse | null = null;
+
+    try {
+      const res = await fetch(urlWithConfig);
+      if (res.ok) {
+        data = await res.json() as HfResponse;
+      } else {
+        const res2 = await fetch(urlWithoutConfig);
+        if (res2.ok) {
+          data = await res2.json() as HfResponse;
+        } else {
+          const errText = await res2.text();
+          throw new Error(`API error ${res2.status}: ${errText.slice(0, 300)}`);
+        }
+      }
+    } catch (e) {
+      if (fetchRef.current === fetchId) {
+        setError(e instanceof Error ? e.message : "Failed to fetch dataset");
+        setLoading(false);
+      }
+      return;
+    }
+
+    if (fetchRef.current !== fetchId) return;
+
+    if (data) {
+      setRows(data.rows);
+      setSelectedRowIdx(0);
+    }
+    setLoading(false);
+  }, [fullRepo, split]);
+
+  useEffect(() => {
+    fetchRows();
+  }, [fetchRows]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // ── Derive parsed data for the selected row ──────────────────────────────
+  const selectedRow = rows[selectedRowIdx] ?? null;
+
+  /**
+   * Convert a dataset row into displayable JSON data.
+   *
+   * Strategy:
+   *  1. If the row has exactly one column and its value is a string that parses
+   *     as JSON/YAML-ish object → parse and display that.
+   *  2. If the row has a column named "config", "yaml", "json", or "data" that
+   *     contains a string → try to parse it.
+   *  3. Otherwise display the whole row object directly.
+   */
+  const parsedData: unknown = (() => {
+    if (!selectedRow) return null;
+    const rowObj = selectedRow.row;
+    const keys = Object.keys(rowObj);
+
+    // Try single-column string parse
+    if (keys.length === 1) {
+      const val = rowObj[keys[0]];
+      if (typeof val === "string") {
+        try {
+          return JSON.parse(val);
+        } catch {
+          // Not valid JSON — fall through to raw display
+          return rowObj;
+        }
+      }
+    }
+
+    // Try known config column names
+    const configColNames = ["config", "yaml", "json", "data", "content", "value"];
+    for (const col of configColNames) {
+      if (col in rowObj && typeof rowObj[col] === "string") {
+        try {
+          return JSON.parse(rowObj[col] as string);
+        } catch {
+          // Not valid JSON — fall through
+        }
+      }
+    }
+
+    // Default: show the whole row
+    return rowObj;
+  })();
+
+  // ── Canonical JSON string for copy-to-clipboard ──────────────────────────
+  const jsonString = parsedData !== null
+    ? JSON.stringify(parsedData, null, 2)
+    : "";
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(jsonString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // fallback: do nothing
+    }
+  }, [jsonString]);
+
+  const shortName = datasetRepo.split("/").pop() ?? datasetRepo;
+  const orgName = datasetRepo.includes("/") ? datasetRepo.split("/")[0] : "";
+
+  return (
+    <div className="fixed inset-0 z-40 bg-gray-950 flex flex-col">
+      {/* ── Top bar ──────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-800 flex-shrink-0 bg-gray-900">
+        <div className="flex items-center gap-3 min-w-0">
+          <span className="text-xs text-gray-500 uppercase tracking-wider font-medium flex-shrink-0">
+            Config Viewer
+          </span>
+          <span className="text-gray-600">·</span>
+          <span
+            className="text-sm font-medium text-gray-200 truncate"
+            title={datasetRepo}
+          >
+            {shortName}
+          </span>
+          {orgName && (
+            <span
+              className="text-xs text-gray-500 truncate hidden sm:block"
+              title={datasetRepo}
+            >
+              ({orgName})
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3 flex-shrink-0">
+          {/* Row selector (only if multiple rows) */}
+          {rows.length > 1 && (
+            <RowSelector
+              rows={rows}
+              currentIdx={selectedRowIdx}
+              onChange={setSelectedRowIdx}
+            />
+          )}
+
+          {/* Copy button */}
+          {!loading && !error && jsonString && (
+            <button
+              onClick={handleCopy}
+              className="text-xs px-3 py-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 border border-gray-600 transition-colors"
+              title="Copy entire config as JSON"
+            >
+              {copied ? "Copied!" : "Copy JSON"}
+            </button>
+          )}
+
+          {/* HuggingFace link */}
+          <a
+            href={`https://huggingface.co/datasets/${fullRepo}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-500 hover:text-cyan-400 transition-colors"
+            title="Open on HuggingFace"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+          </a>
+
+          {/* Close */}
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-200 transition-colors text-xl leading-none px-1"
+            title="Close viewer (Esc)"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+
+      {/* ── Body ─────────────────────────────────────────────────────────── */}
+      <div className="flex-1 overflow-auto bg-gray-950">
+        {/* Loading */}
+        {loading && (
+          <div className="flex items-center justify-center h-32">
+            <div className="flex items-center gap-3 text-gray-400">
+              <svg
+                className="animate-spin h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <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>
+              <span className="text-sm">Loading config…</span>
+            </div>
+          </div>
+        )}
+
+        {/* Error */}
+        {error && !loading && (
+          <div className="flex flex-col items-center justify-center h-32 gap-3">
+            <p className="text-sm text-red-400">{error}</p>
+            <button
+              onClick={fetchRows}
+              className="text-xs px-3 py-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 border border-gray-600 transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+
+        {/* Empty */}
+        {!loading && !error && rows.length === 0 && (
+          <div className="flex items-center justify-center h-32">
+            <p className="text-sm text-gray-500 italic">No data found in this dataset.</p>
+          </div>
+        )}
+
+        {/* Syntax-highlighted JSON */}
+        {!loading && !error && parsedData !== null && (
+          <div className="p-6">
+            <pre className="font-mono text-sm leading-relaxed whitespace-pre bg-gray-950 rounded-lg p-4 border border-gray-800 overflow-x-auto">
+              <JsonRoot data={parsedData} />
+            </pre>
+          </div>
+        )}
+      </div>
+
+      {/* ── Footer hint ──────────────────────────────────────────────────── */}
+      {!loading && !error && parsedData !== null && (
+        <div className="px-4 py-2 border-t border-gray-800 bg-gray-900 flex-shrink-0 flex items-center justify-between">
+          <span className="text-xs text-gray-600">
+            Click top-level keys to collapse/expand · Press Esc to close
+          </span>
+          <span className="text-xs text-gray-600">
+            {rows.length > 1 ? `${rows.length} rows available` : ""}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/experiments/store.ts

@@ -0,0 +1,205 @@
+import { useState, useCallback, useEffect } from "react";
+import type { Experiment, ExperimentDetail, SubExperiment, ExperimentNote } from "./types";
+import { experimentsApi } from "./api";
+import { parseHash, navigateTo as hashNavigateTo } from "../hashRouter";
+
+export type View =
+  | { kind: "list" }
+  | { kind: "detail"; expId: string }
+  | { kind: "sub"; expId: string; subId: string }
+  | { kind: "note"; expId: string; noteId: string }
+  | { kind: "summary" };
+
+export function useExperimentsState() {
+  const [experiments, setExperiments] = useState<Experiment[]>([]);
+  const [currentDetail, setCurrentDetail] = useState<ExperimentDetail | null>(null);
+  const [currentSub, setCurrentSub] = useState<SubExperiment | null>(null);
+  const [currentNote, setCurrentNote] = useState<ExperimentNote | null>(null);
+  const [summaryContent, setSummaryContent] = useState<string>("");
+  const [view, setView] = useState<View>({ kind: "list" });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadExperiments = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await experimentsApi.list();
+      setExperiments(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load experiments");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Restore a view from hash segments (no hash update — used on mount and popstate)
+  const restoreFromSegments = useCallback(async (segments: string[]) => {
+    if (segments.length === 0) {
+      setView({ kind: "list" });
+      setCurrentDetail(null);
+      setCurrentSub(null);
+      setCurrentNote(null);
+      await loadExperiments();
+      return;
+    }
+
+    if (segments[0] === "summary") {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await experimentsApi.getSummary();
+        setSummaryContent(data.content_md || "");
+        setView({ kind: "summary" });
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to load summary");
+      } finally {
+        setLoading(false);
+      }
+      return;
+    }
+
+    const expId = segments[0];
+    setLoading(true);
+    setError(null);
+    try {
+      const detail = await experimentsApi.get(expId);
+      setCurrentDetail(detail);
+
+      if (segments[1] === "sub" && segments[2]) {
+        const sub = detail.sub_experiments.find((s: SubExperiment) => s.id === segments[2]);
+        if (sub) {
+          setCurrentSub(sub);
+          setView({ kind: "sub", expId, subId: segments[2] });
+          return;
+        }
+      }
+
+      if (segments[1] === "note" && segments[2]) {
+        const note = (detail.experiment_notes || []).find((n: ExperimentNote) => n.id === segments[2]);
+        if (note) {
+          setCurrentNote(note);
+          setView({ kind: "note", expId, noteId: segments[2] });
+          return;
+        }
+      }
+
+      setView({ kind: "detail", expId });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load experiment");
+    } finally {
+      setLoading(false);
+    }
+  }, [loadExperiments]);
+
+  // Restore from hash on mount
+  useEffect(() => {
+    const route = parseHash();
+    if (route.page === "experiments" && route.segments.length > 0) {
+      restoreFromSegments(route.segments);
+    } else {
+      loadExperiments();
+    }
+  }, [restoreFromSegments, loadExperiments]);
+
+  // Handle browser back/forward
+  useEffect(() => {
+    const handler = () => {
+      const route = parseHash();
+      if (route.page !== "experiments") return;
+      restoreFromSegments(route.segments);
+    };
+    window.addEventListener("popstate", handler);
+    return () => window.removeEventListener("popstate", handler);
+  }, [restoreFromSegments]);
+
+  const navigateToList = useCallback(() => {
+    setView({ kind: "list" });
+    setCurrentDetail(null);
+    setCurrentSub(null);
+    setCurrentNote(null);
+    loadExperiments();
+    hashNavigateTo({ page: "experiments", segments: [], params: new URLSearchParams() });
+  }, [loadExperiments]);
+
+  const navigateToDetail = useCallback(async (expId: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const detail = await experimentsApi.get(expId);
+      setCurrentDetail(detail);
+      setView({ kind: "detail", expId });
+      hashNavigateTo({ page: "experiments", segments: [expId], params: new URLSearchParams() });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load experiment");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const navigateToSub = useCallback((expId: string, subId: string) => {
+    if (!currentDetail) return;
+    const sub = currentDetail.sub_experiments.find((s: SubExperiment) => s.id === subId);
+    if (sub) {
+      setCurrentSub(sub);
+      setView({ kind: "sub", expId, subId });
+      hashNavigateTo({ page: "experiments", segments: [expId, "sub", subId] });
+    }
+  }, [currentDetail]);
+
+  const navigateToNote = useCallback((expId: string, noteId: string) => {
+    if (!currentDetail) return;
+    const note = (currentDetail.experiment_notes || []).find((n: ExperimentNote) => n.id === noteId);
+    if (note) {
+      setCurrentNote(note);
+      setView({ kind: "note", expId, noteId });
+      hashNavigateTo({ page: "experiments", segments: [expId, "note", noteId] });
+    }
+  }, [currentDetail]);
+
+  const navigateToSummary = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await experimentsApi.getSummary();
+      setSummaryContent(data.content_md || "");
+      setView({ kind: "summary" });
+      hashNavigateTo({ page: "experiments", segments: ["summary"] });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load summary");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const refreshDetail = useCallback(async () => {
+    if (view.kind === "detail" || view.kind === "sub" || view.kind === "note") {
+      const expId = view.expId;
+      try {
+        const detail = await experimentsApi.get(expId);
+        setCurrentDetail(detail);
+      } catch {
+        // silent refresh failure
+      }
+    }
+  }, [view]);
+
+  return {
+    experiments,
+    currentDetail,
+    currentSub,
+    currentNote,
+    summaryContent,
+    view,
+    loading,
+    error,
+    setError,
+    navigateToList,
+    navigateToDetail,
+    navigateToSub,
+    navigateToNote,
+    navigateToSummary,
+    refreshDetail,
+    loadExperiments,
+  };
+}

frontend/src/experiments/types.ts

@@ -0,0 +1,201 @@
+export interface HfRepo {
+  repo: string;
+  description: string;
+  date: string;
+}
+
+// --- Live dashboard state types ---
+
+export interface LiveJobState {
+  status: "pending" | "running" | "completed" | "failed" | "blocked";
+  cluster: string;
+  gpus: number;
+  partition?: string;
+  slurm_job_id?: string;
+  submitted_at: string;
+  updated_at: string;
+  estimated_completion?: string;
+  message: string;
+  metrics: Record<string, number | string>;
+  blocker?: { reason: string; since: string };
+}
+
+export interface LiveHistoryEntry {
+  timestamp: string;
+  event: string;
+  job_id?: string;
+  cluster?: string;
+  message: string;
+}
+
+export interface UnreachableClusterInfo {
+  reason: string;
+  since: string;
+}
+
+export type LiveStatus = "active" | "paused" | "completed" | "idle";
+export type DisplayStatus = "active" | "blocked" | "partially_blocked" | "paused" | "completed" | "unreachable" | "idle";
+
+export interface Hypothesis {
+  statement: string;
+  type: "comparative" | "ablation" | "exploration" | "reproduction";
+  status: "pending" | "active" | "supported" | "invalidated" | "inconclusive" | "exploring";
+  success_criteria: string;
+}
+
+export type Stage = "idea" | "planned" | "active" | "concluded" | "inconclusive";
+
+export interface Experiment {
+  id: string;
+  name: string;
+  research_project: string;
+  hypothesis: Hypothesis;
+  stage: Stage;
+  completeness: number;
+  models: string[];
+  tasks: string[];
+  tags: string[];
+  hf_repos: HfRepo[];
+  wandb_url: string;
+  notes: string;
+  zayne_summary: string;
+  zayne_readme: string;
+  zayne_findings: string;
+  zayne_decisions: string;
+  red_team_brief: string;
+  created: string;
+  updated: string;
+  run_count?: number;
+  sub_count?: number;
+  note_count?: number;
+  // Live dashboard state (merged from dashboard_state.json)
+  live_status?: LiveStatus;
+  live_message?: string;
+  live_jobs?: Record<string, LiveJobState>;
+  unreachable_clusters?: Record<string, UnreachableClusterInfo>;
+  live_history?: LiveHistoryEntry[];
+  live_started_at?: string;
+  live_updated_at?: string;
+}
+
+export interface RunRecord {
+  id: string;
+  experiment_id: string;
+  condition: string;
+  model: string;
+  cluster: string;
+  status: "running" | "completed" | "failed";
+  hf_dataset: string;
+  metrics: Record<string, number | string>;
+  timestamp: string;
+  notes: string;
+}
+
+export interface SubExperiment {
+  id: string;
+  experiment_id: string;
+  name: string;
+  hypothesis: string;
+  status: string;
+  content_md: string;
+  hf_repos: HfRepo[];
+  created: string;
+  updated: string;
+}
+
+export interface ExperimentNote {
+  id: string;
+  experiment_id: string;
+  title: string;
+  filename: string;
+  relative_path: string;
+  content_md: string;
+  created: string;
+  updated: string;
+}
+
+// --- Activity Log types ---
+
+export type ActivityEntryType = "action" | "result" | "note" | "milestone";
+
+export interface ActivityLogEntry {
+  timestamp: string;
+  scope: string;
+  type: ActivityEntryType;
+  message: string;
+  artifacts: string[];
+  run_ids: string[];
+  author: "agent" | "user";
+}
+
+// --- Artifact types ---
+
+export type ArtifactType =
+  | "input_data"
+  | "inference_output"
+  | "training_config"
+  | "canary_output"
+  | "eval_result"
+  | "processed_data";
+
+export type VisualizerType =
+  | "model_trace"
+  | "table"
+  | "yaml_config"
+  | "plotly"
+  | "image"
+  | "heatmap"
+  | "custom";
+
+export interface Artifact {
+  dataset_name: string;
+  experiment_id: string;
+  run_id: string | null;
+  artifact_type: ArtifactType | null;
+  visualizer_type: VisualizerType | null;
+  artifact_group: string | null;
+  parent_artifact: string | null;
+  size_bytes: number | null;
+  description: string;
+  model: string;
+  tags: string;
+  created: string;
+  updated: string;
+}
+
+export interface ExperimentDetail extends Experiment {
+  runs: RunRecord[];
+  sub_experiments: SubExperiment[];
+  experiment_notes: ExperimentNote[];
+  activity_log: ActivityLogEntry[];
+  artifacts: Artifact[];
+}
+
+// --- Display status derivation ---
+
+export function deriveDisplayStatus(exp: Experiment): DisplayStatus {
+  if (exp.live_status === "completed") return "completed";
+  if (exp.live_status === "paused") return "paused";
+  const jobs = Object.values(exp.live_jobs || {});
+  const hasUnreachable = Object.keys(exp.unreachable_clusters || {}).length > 0;
+  const runningJobs = jobs.filter((j) => j.status === "running");
+  const blockedJobs = jobs.filter((j) => j.status === "blocked");
+  if (hasUnreachable && runningJobs.length === 0) return "unreachable";
+  if (blockedJobs.length > 0 && blockedJobs.length === jobs.length) return "blocked";
+  if (blockedJobs.length > 0 && runningJobs.length > 0) return "partially_blocked";
+  if (exp.live_status === "active" || runningJobs.length > 0) return "active";
+  return "idle";
+}
+
+export function statusBadgeColor(status: DisplayStatus): string {
+  const colors: Record<DisplayStatus, string> = {
+    active: "bg-green-100 text-green-800",
+    blocked: "bg-red-100 text-red-800",
+    partially_blocked: "bg-orange-100 text-orange-800",
+    paused: "bg-yellow-100 text-yellow-800",
+    completed: "bg-blue-100 text-blue-800",
+    unreachable: "bg-gray-200 text-orange-700",
+    idle: "bg-gray-100 text-gray-500",
+  };
+  return colors[status];
+}

frontend/src/hashRouter.ts

@@ -0,0 +1,161 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface HashRoute {
+  page: "experiments" | "viz";
+  tab: string;
+  segments: string[];
+  params: URLSearchParams;
+}
+
+const ROUTE_CHANGE = "routechange";
+const STORAGE_KEY = "agg-viz-route";
+
+/** Read the saved route hash from localStorage (fallback when hash is empty, e.g. in an iframe). */
+function getSavedHash(): string {
+  try {
+    return localStorage.getItem(STORAGE_KEY) || "";
+  } catch {
+    return "";
+  }
+}
+
+/** Persist the current hash to localStorage so iframe reloads restore state. */
+function saveHash(hash: string) {
+  try {
+    localStorage.setItem(STORAGE_KEY, hash);
+  } catch {
+    // localStorage unavailable — ignore
+  }
+}
+
+/** Get the effective hash: prefer URL hash, fall back to localStorage. */
+function effectiveHash(): string {
+  const hash = window.location.hash;
+  if (hash && hash !== "#" && hash !== "#/") return hash;
+  return getSavedHash();
+}
+
+export function parseHash(hash?: string): HashRoute {
+  const raw = (hash ?? effectiveHash()).replace(/^#\/?/, "");
+  if (!raw) {
+    return { page: "experiments", tab: "", segments: [], params: new URLSearchParams() };
+  }
+
+  const qIdx = raw.indexOf("?");
+  const pathPart = qIdx >= 0 ? raw.slice(0, qIdx) : raw;
+  const params = new URLSearchParams(qIdx >= 0 ? raw.slice(qIdx + 1) : "");
+  const parts = pathPart.split("/").filter(Boolean);
+
+  if (parts[0] === "viz") {
+    return { page: "viz", tab: parts[1] || "model", segments: parts.slice(2), params };
+  }
+
+  // "experiments" or anything else defaults to experiments
+  const segments = parts[0] === "experiments" ? parts.slice(1) : parts;
+  return { page: "experiments", tab: "", segments, params };
+}
+
+function buildHash(route: HashRoute): string {
+  const parts: string[] = [route.page === "viz" ? "viz" : "experiments"];
+  if (route.page === "viz" && route.tab) parts.push(route.tab);
+  if (route.segments.length) parts.push(...route.segments);
+  let hash = "#/" + parts.join("/");
+  const qs = route.params.toString();
+  if (qs) hash += "?" + qs;
+  return hash;
+}
+
+function applyRoute(hash: string, push: boolean) {
+  saveHash(hash);
+  if (window.location.hash === hash) return;
+  if (push) {
+    window.history.pushState(null, "", hash);
+  } else {
+    window.history.replaceState(null, "", hash);
+  }
+  window.dispatchEvent(new Event(ROUTE_CHANGE));
+}
+
+/** Navigate to a new route (creates browser history entry). */
+export function navigateTo(update: Partial<HashRoute>) {
+  const current = parseHash();
+  const pageChanged = update.page !== undefined && update.page !== current.page;
+  const tabChanged = update.tab !== undefined && update.tab !== current.tab;
+
+  const merged: HashRoute = {
+    page: update.page ?? current.page,
+    tab: update.tab ?? (pageChanged ? (update.page === "viz" ? "model" : "") : current.tab),
+    segments: update.segments ?? ((pageChanged || tabChanged) ? [] : current.segments),
+    params: update.params ?? ((pageChanged || tabChanged) ? new URLSearchParams() : current.params),
+  };
+  applyRoute(buildHash(merged), true);
+}
+
+/** Replace current route (no history entry). Use for frequent state changes like indices. */
+export function replaceRoute(update: Partial<HashRoute>) {
+  const current = parseHash();
+  const merged: HashRoute = {
+    page: update.page ?? current.page,
+    tab: update.tab ?? current.tab,
+    segments: update.segments ?? current.segments,
+    params: update.params ?? current.params,
+  };
+  applyRoute(buildHash(merged), false);
+}
+
+/** Build a shareable direct URL for the current route (bypasses HF iframe). */
+export function getShareableUrl(): string {
+  const hash = effectiveHash();
+  // Use the app's direct origin (works for both .hf.space and localhost)
+  return `${window.location.origin}${window.location.pathname}${hash}`;
+}
+
+/** Hook that re-renders on hash route changes. */
+export function useHashRoute(): HashRoute {
+  const [route, setRoute] = useState<HashRoute>(parseHash);
+
+  useEffect(() => {
+    const handler = () => setRoute(parseHash());
+    window.addEventListener(ROUTE_CHANGE, handler);
+    window.addEventListener("popstate", handler);
+    window.addEventListener("hashchange", handler);
+    return () => {
+      window.removeEventListener(ROUTE_CHANGE, handler);
+      window.removeEventListener("popstate", handler);
+      window.removeEventListener("hashchange", handler);
+    };
+  }, []);
+
+  // On mount, if URL hash is empty but localStorage has a saved route, apply it
+  useEffect(() => {
+    const urlHash = window.location.hash;
+    if (!urlHash || urlHash === "#" || urlHash === "#/") {
+      const saved = getSavedHash();
+      if (saved) {
+        window.history.replaceState(null, "", saved);
+        setRoute(parseHash(saved));
+      }
+    }
+  }, []);
+
+  return route;
+}
+
+/** Hook for the copy-link button. Returns a callback that copies the shareable URL. */
+export function useCopyLink() {
+  const [copied, setCopied] = useState(false);
+
+  const copyLink = useCallback(async () => {
+    const url = getShareableUrl();
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback: prompt user
+      window.prompt("Copy this link:", url);
+    }
+  }, []);
+
+  return { copyLink, copied };
+}

frontend/src/index.css

@@ -0,0 +1,145 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom scrollbar for trace panels */
+.trace-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.trace-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.trace-scroll::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 3px;
+}
+.trace-scroll::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+/* Drag-to-reorder panel feedback — themed per visualizer */
+.theme-model .panel-drop-target {
+  outline: 2px dashed #60a5fa;
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+  background: rgba(96, 165, 250, 0.05);
+}
+
+.theme-arena .panel-drop-target {
+  outline: 2px dashed #a78bfa;
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+  background: rgba(167, 139, 250, 0.05);
+}
+
+.theme-rlm .panel-drop-target {
+  outline: 2px dashed #fb923c;
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+  background: rgba(251, 146, 60, 0.05);
+}
+
+.theme-harbor .panel-drop-target {
+  outline: 2px dashed #2dd4bf;
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+  background: rgba(45, 212, 191, 0.05);
+}
+
+/* Code block styling (used by Harbor visualizer) */
+.code-block {
+  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.drag-handle {
+  cursor: grab;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+/* ── Light theme overrides ─────────────────────────────────
+   When .light is on <html>, remap dark grays to light equivalents.
+   This avoids rewriting every component — the Tailwind classes stay
+   the same, but the underlying colors change. */
+
+.light {
+  /* Background overrides */
+  --tw-bg-opacity: 1;
+}
+
+/* Backgrounds: dark → light */
+.light .bg-gray-950 { background-color: #ffffff !important; }
+.light .bg-gray-900 { background-color: #f9fafb !important; }
+.light .bg-gray-900\/80 { background-color: rgba(249, 250, 251, 0.8) !important; }
+.light .bg-gray-900\/50 { background-color: rgba(249, 250, 251, 0.5) !important; }
+.light .bg-gray-800 { background-color: #f3f4f6 !important; }
+.light .bg-gray-800\/50 { background-color: rgba(243, 244, 246, 0.5) !important; }
+.light .bg-gray-700 { background-color: #e5e7eb !important; }
+
+/* Text: light on dark → dark on light */
+.light .text-gray-100 { color: #111827 !important; }
+.light .text-gray-200 { color: #1f2937 !important; }
+.light .text-gray-300 { color: #374151 !important; }
+.light .text-gray-400 { color: #6b7280 !important; }
+.light .text-gray-500 { color: #9ca3af !important; }
+.light .text-gray-600 { color: #d1d5db !important; }
+
+/* Borders */
+.light .border-gray-700 { border-color: #e5e7eb !important; }
+.light .border-gray-800 { border-color: #f3f4f6 !important; }
+.light .border-gray-800\/50 { border-color: rgba(243, 244, 246, 0.5) !important; }
+
+/* Accent colors stay vibrant but slightly adjusted for contrast */
+.light .text-cyan-400 { color: #0891b2 !important; }
+.light .text-cyan-400\/80 { color: rgba(8, 145, 178, 0.8) !important; }
+.light .border-cyan-500 { border-color: #06b6d4 !important; }
+.light .text-emerald-300 { color: #059669 !important; }
+.light .text-emerald-400 { color: #059669 !important; }
+.light .text-amber-400 { color: #d97706 !important; }
+.light .text-amber-400\/80 { color: rgba(217, 119, 6, 0.8) !important; }
+.light .text-amber-400\/70 { color: rgba(217, 119, 6, 0.7) !important; }
+.light .text-violet-400 { color: #7c3aed !important; }
+.light .text-red-400 { color: #dc2626 !important; }
+.light .text-yellow-400 { color: #ca8a04 !important; }
+.light .text-green-400 { color: #16a34a !important; }
+
+/* Accent backgrounds */
+.light .bg-emerald-950\/30 { background-color: rgba(5, 150, 105, 0.08) !important; }
+.light .bg-emerald-900 { background-color: rgba(5, 150, 105, 0.15) !important; }
+.light .bg-violet-950\/30 { background-color: rgba(124, 58, 237, 0.08) !important; }
+.light .bg-orange-900\/20 { background-color: rgba(234, 88, 12, 0.08) !important; }
+.light .bg-red-900\/10 { background-color: rgba(220, 38, 38, 0.05) !important; }
+.light .bg-cyan-600 { background-color: #0891b2 !important; }
+
+/* Border accents */
+.light .border-emerald-500 { border-color: #059669 !important; }
+.light .border-emerald-700 { border-color: #059669 !important; }
+.light .border-amber-500 { border-color: #d97706 !important; }
+.light .border-violet-500 { border-color: #7c3aed !important; }
+.light .border-cyan-500 { border-color: #0891b2 !important; }
+.light .border-orange-800\/50 { border-color: rgba(234, 88, 12, 0.3) !important; }
+
+/* Hover states */
+.light .hover\:bg-gray-800:hover { background-color: #e5e7eb !important; }
+.light .hover\:bg-gray-900\/50:hover { background-color: rgba(249, 250, 251, 0.5) !important; }
+.light .hover\:text-gray-200:hover { color: #1f2937 !important; }
+.light .hover\:text-gray-300:hover { color: #374151 !important; }
+.light .hover\:border-gray-700:hover { border-color: #d1d5db !important; }
+.light .hover\:border-gray-400:hover { border-color: #9ca3af !important; }
+.light .hover\:text-cyan-300:hover { color: #0891b2 !important; }
+
+/* Inputs and selects */
+.light select { background-color: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important; }
+.light input { background-color: #f9fafb !important; color: #374151 !important; border-color: #d1d5db !important; }
+
+/* Scrollbar */
+.light .trace-scroll::-webkit-scrollbar-thumb { background: #d1d5db; }
+.light .trace-scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+
+/* Markdown code blocks */
+.light pre { background-color: #f3f4f6 !important; }
+.light code { background-color: #f3f4f6 !important; color: #374151 !important; }

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/model/ModelApp.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useCallback, useRef, useState } from "react";
+import { useAppState } from "./store";
+import Sidebar from "./components/Sidebar";
+import TracePanel, { type DragHandleProps } from "./components/TracePanel";
+import InfoBar from "./components/InfoBar";
+import QuestionNav from "./components/QuestionNav";
+import type { DatasetInfo, QuestionData, Preset } from "./types";
+import { api } from "./api";
+
+export default function ModelApp() {
+  const state = useAppState();
+
+  const handleLoadPreset = useCallback(async (preset: Preset) => {
+    await state.addDataset(preset.repo, preset.column, preset.split, undefined, preset.id, preset.name);
+  }, [state.addDataset]);
+
+  const handleSavePreset = useCallback(async (name: string, repo: string, column: string, split?: string) => {
+    const preset = await api.createPreset(name, repo, column, split);
+    state.setPresets((prev) => [...prev, preset]);
+  }, []);
+
+  const handleDeletePreset = useCallback(async (id: string, datasetId?: string) => {
+    await api.deletePreset(id);
+    state.setPresets((prev) => prev.filter((p) => p.id !== id));
+    if (datasetId) {
+      state.clearDatasetPreset(datasetId);
+    }
+  }, [state.clearDatasetPreset]);
+
+  const handleUpdatePreset = useCallback(async (presetId: string, datasetId: string, updates: { name?: string }) => {
+    const updated = await api.updatePreset(presetId, updates);
+    state.setPresets(prev => prev.map(p => p.id === presetId ? updated : p));
+    if (updates.name) {
+      state.updateDatasetPresetName(datasetId, updates.name);
+    }
+  }, [state.updateDatasetPresetName]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      switch (e.key) {
+        case "j":
+          state.setQuestionIdx((prev) => Math.min(state.maxQuestions - 1, prev + 1));
+          break;
+        case "k":
+          state.setQuestionIdx((prev) => Math.max(0, prev - 1));
+          break;
+        case "l":
+          state.setSampleIdx((prev) => Math.min(state.maxSamples - 1, prev + 1));
+          break;
+        case "h":
+          state.setSampleIdx((prev) => Math.max(0, prev - 1));
+          break;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [state.maxQuestions, state.maxSamples, state.setQuestionIdx, state.setSampleIdx]);
+
+  return (
+    <div className="h-full flex overflow-hidden">
+      <Sidebar
+        datasets={state.datasets}
+        presets={state.presets}
+        loading={state.loading}
+        groups={state.groups}
+        groupIds={state.groupIds}
+        currentGroupId={state.currentGroupId}
+        onAddDataset={state.addDataset}
+        onRemoveDataset={state.removeDataset}
+        onToggleDataset={state.toggleDataset}
+        onSetCurrentGroup={state.setCurrentGroupId}
+        onLoadPreset={handleLoadPreset}
+        onSavePreset={handleSavePreset}
+        onDeletePreset={handleDeletePreset}
+        onUpdatePreset={handleUpdatePreset}
+      />
+
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Error banner */}
+        {state.error && (
+          <div className="px-4 py-2 bg-red-900/50 border-b border-red-700 text-red-300 text-sm flex items-center justify-between">
+            <span>{state.error}</span>
+            <button onClick={() => state.setError(null)} className="text-red-400 hover:text-red-300 ml-2">
+              Dismiss
+            </button>
+          </div>
+        )}
+
+        <InfoBar
+          activeDatasets={state.activeDatasets}
+          questionIdx={state.questionIdx}
+          sampleIdx={state.sampleIdx}
+          getQuestionData={state.getQuestionData}
+        />
+
+        {/* Trace panels (drag to reorder) */}
+        <PanelContainer
+          datasets={state.orderedActiveDatasets}
+          getQuestionData={state.getQuestionData}
+          sampleIdx={state.sampleIdx}
+          onReorder={state.reorderPanels}
+        />
+
+        <QuestionNav
+          questionIdx={state.questionIdx}
+          sampleIdx={state.sampleIdx}
+          maxQuestions={state.maxQuestions}
+          maxSamples={state.maxSamples}
+          filter={state.filter}
+          onQuestionChange={state.setQuestionIdx}
+          onSampleChange={state.setSampleIdx}
+          onFilterChange={state.setFilter}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* ── Drag-to-reorder panel container ── */
+
+interface PanelContainerProps {
+  datasets: DatasetInfo[];
+  getQuestionData: (dsId: string) => QuestionData | undefined;
+  sampleIdx: number;
+  onReorder: (fromId: string, toId: string) => void;
+}
+
+function PanelContainer({ datasets, getQuestionData, sampleIdx, onReorder }: PanelContainerProps) {
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [overId, setOverId] = useState<string | null>(null);
+  const dragCounter = useRef<Record<string, number>>({});
+
+  const handleDragStart = useCallback((e: React.DragEvent, id: string) => {
+    setDraggedId(id);
+    e.dataTransfer.effectAllowed = "move";
+    // Use a transparent 1x1 image so the browser doesn't clone the panel
+    const ghost = document.createElement("canvas");
+    ghost.width = 1;
+    ghost.height = 1;
+    e.dataTransfer.setDragImage(ghost, 0, 0);
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedId(null);
+    setOverId(null);
+    dragCounter.current = {};
+  }, []);
+
+  const handleDragEnter = useCallback((e: React.DragEvent, id: string) => {
+    e.preventDefault();
+    dragCounter.current[id] = (dragCounter.current[id] || 0) + 1;
+    setOverId(id);
+  }, []);
+
+  const handleDragLeave = useCallback((_e: React.DragEvent, id: string) => {
+    dragCounter.current[id] = (dragCounter.current[id] || 0) - 1;
+    if (dragCounter.current[id] <= 0) {
+      dragCounter.current[id] = 0;
+      setOverId(prev => prev === id ? null : prev);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent, targetId: string) => {
+    e.preventDefault();
+    if (draggedId && draggedId !== targetId) {
+      onReorder(draggedId, targetId);
+    }
+    setDraggedId(null);
+    setOverId(null);
+    dragCounter.current = {};
+  }, [draggedId, onReorder]);
+
+  if (datasets.length === 0) {
+    return (
+      <div className="flex-1 flex gap-2 p-2 overflow-x-auto min-h-0">
+        <div className="flex-1 flex items-center justify-center text-gray-500">
+          <div className="text-center">
+            <p className="text-lg mb-2">No repos active</p>
+            <p className="text-sm">Add a HuggingFace repo from the sidebar to get started</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex gap-2 p-2 overflow-x-auto min-h-0">
+      {datasets.map((ds) => {
+        const isDragged = draggedId === ds.id;
+        const isOver = overId === ds.id && draggedId !== null && draggedId !== ds.id;
+
+        const handleProps: DragHandleProps = {
+          draggable: true,
+          onDragStart: (e) => handleDragStart(e, ds.id),
+          onDragEnd: handleDragEnd,
+        };
+
+        return (
+          <div
+            key={ds.id}
+            onDragEnter={(e) => handleDragEnter(e, ds.id)}
+            onDragLeave={(e) => handleDragLeave(e, ds.id)}
+            onDragOver={handleDragOver}
+            onDrop={(e) => handleDrop(e, ds.id)}
+            className={`flex-1 min-w-0 transition-all duration-150 ${
+              isDragged ? "opacity-30 scale-[0.97]" : ""
+            } ${isOver ? "panel-drop-target" : ""}`}
+          >
+            <TracePanel
+              datasetName={ds.presetName || ds.name}
+              repoName={ds.presetName ? ds.name : undefined}
+              data={getQuestionData(ds.id)}
+              sampleIdx={sampleIdx}
+              dragHandleProps={handleProps}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

frontend/src/model/api.ts

@@ -0,0 +1,63 @@
+import type { DatasetInfo, QuestionData, DatasetSummary, Preset } from "./types";
+
+const BASE = "/api/model";
+const PRESETS_BASE = "/api/presets/model";
+
+async function fetchJSON<T>(url: string, opts?: RequestInit): Promise<T> {
+  const res = await fetch(url, {
+    headers: { "Content-Type": "application/json" },
+    ...opts,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error || res.statusText);
+  }
+  return res.json();
+}
+
+export const api = {
+  loadDataset(repo: string, column?: string, split?: string, promptColumn?: string) {
+    return fetchJSON<DatasetInfo & { columns: string[]; question_fingerprint: string }>(`${BASE}/datasets/load`, {
+      method: "POST",
+      body: JSON.stringify({ repo, column, split, prompt_column: promptColumn }),
+    });
+  },
+
+  listDatasets() {
+    return fetchJSON<DatasetInfo[]>(`${BASE}/datasets/`);
+  },
+
+  getQuestion(dsId: string, idx: number) {
+    return fetchJSON<QuestionData>(`${BASE}/datasets/${dsId}/question/${idx}`);
+  },
+
+  getSummary(dsId: string) {
+    return fetchJSON<DatasetSummary>(`${BASE}/datasets/${dsId}/summary`);
+  },
+
+  unloadDataset(dsId: string) {
+    return fetchJSON<{ status: string }>(`${BASE}/datasets/${dsId}`, { method: "DELETE" });
+  },
+
+  listPresets() {
+    return fetchJSON<Preset[]>(`${PRESETS_BASE}`);
+  },
+
+  createPreset(name: string, repo: string, column: string, split?: string) {
+    return fetchJSON<Preset>(`${PRESETS_BASE}`, {
+      method: "POST",
+      body: JSON.stringify({ name, repo, column, split }),
+    });
+  },
+
+  updatePreset(id: string, updates: { name?: string; column?: string; split?: string }) {
+    return fetchJSON<Preset>(`${PRESETS_BASE}/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(updates),
+    });
+  },
+
+  deletePreset(id: string) {
+    return fetchJSON<{ status: string }>(`${PRESETS_BASE}/${id}`, { method: "DELETE" });
+  },
+};

frontend/src/model/components/InfoBar.tsx

@@ -0,0 +1,91 @@
+import type { DatasetInfo, QuestionData } from "../types";
+
+interface InfoBarProps {
+  activeDatasets: DatasetInfo[];
+  questionIdx: number;
+  sampleIdx: number;
+  getQuestionData: (dsId: string) => QuestionData | undefined;
+}
+
+export default function InfoBar({ activeDatasets, questionIdx, sampleIdx, getQuestionData }: InfoBarProps) {
+  let questionText = "";
+  let nSamples = 0;
+  const firstData = activeDatasets.length > 0 ? getQuestionData(activeDatasets[0].id) : undefined;
+  if (firstData) {
+    questionText = firstData.question;
+    nSamples = firstData.n_samples;
+  }
+
+  if (!questionText) {
+    return (
+      <div className="px-4 py-3 border-b border-gray-700 bg-gray-900/80">
+        <p className="text-sm text-gray-500 italic">Load repos and select a question to begin</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 py-3 border-b border-gray-700 bg-gray-900/80">
+      {/* Question text */}
+      <div className="text-sm text-gray-200 font-medium mb-2 leading-relaxed max-h-24 overflow-y-auto">
+        Q{questionIdx}: {questionText}
+      </div>
+
+      {/* Sample bar */}
+      {nSamples > 1 && (
+        <div className="flex items-center gap-1 flex-wrap">
+          <span className="text-[10px] text-gray-500 mr-1">Samples:</span>
+          {Array.from({ length: nSamples }, (_, i) => {
+            const results = activeDatasets.map((ds) => {
+              const d = getQuestionData(ds.id);
+              return d?.eval_correct[i];
+            });
+            const allCorrect = results.every((r) => r === true);
+            const someCorrect = results.some((r) => r === true);
+            const noneCorrect = results.every((r) => r === false);
+
+            let bgColor = "bg-gray-700";
+            if (allCorrect) bgColor = "bg-green-700";
+            else if (someCorrect) bgColor = "bg-yellow-700";
+            else if (noneCorrect) bgColor = "bg-red-900";
+
+            const isSelected = i === sampleIdx;
+
+            return (
+              <span
+                key={i}
+                className={`inline-block w-4 h-4 rounded-sm text-[9px] text-center leading-4 font-mono ${bgColor} ${
+                  isSelected ? "ring-2 ring-blue-400 ring-offset-1 ring-offset-gray-900" : ""
+                }`}
+                title={`Sample ${i + 1}: ${results.map((r, j) => `${activeDatasets[j]?.name}=${r ? "correct" : "wrong"}`).join(", ")}`}
+              >
+                {i + 1}
+              </span>
+            );
+          })}
+          <span className="text-[10px] text-gray-600 ml-2">
+            <span className="inline-block w-2.5 h-2.5 rounded-sm bg-green-700 mr-0.5 align-middle" /> all
+            <span className="inline-block w-2.5 h-2.5 rounded-sm bg-yellow-700 mr-0.5 ml-1.5 align-middle" /> some
+            <span className="inline-block w-2.5 h-2.5 rounded-sm bg-red-900 mr-0.5 ml-1.5 align-middle" /> none
+          </span>
+        </div>
+      )}
+
+      {/* Per-repo correctness for current sample */}
+      <div className="flex items-center gap-3 mt-1.5 flex-wrap">
+        {activeDatasets.map((ds) => {
+          const d = getQuestionData(ds.id);
+          const correct = d?.eval_correct[sampleIdx];
+          return (
+            <span key={ds.id} className="text-[11px]">
+              <span className="text-gray-500">{ds.name}: </span>
+              <span className={correct ? "text-green-400" : "text-red-400"}>
+                {correct === undefined ? "?" : correct ? "Correct" : "Wrong"}
+              </span>
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/model/components/QuestionNav.tsx

@@ -0,0 +1,112 @@
+import type { FilterMode } from "../types";
+
+interface QuestionNavProps {
+  questionIdx: number;
+  sampleIdx: number;
+  maxQuestions: number;
+  maxSamples: number;
+  filter: FilterMode;
+  onQuestionChange: (idx: number) => void;
+  onSampleChange: (idx: number) => void;
+  onFilterChange: (filter: FilterMode) => void;
+}
+
+const FILTERS: { value: FilterMode; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "improvements", label: "Improvements" },
+  { value: "regressions", label: "Regressions" },
+  { value: "both-correct", label: "Both Correct" },
+  { value: "both-wrong", label: "Both Wrong" },
+];
+
+export default function QuestionNav({
+  questionIdx, sampleIdx, maxQuestions, maxSamples,
+  filter, onQuestionChange, onSampleChange, onFilterChange,
+}: QuestionNavProps) {
+  const prevQ = () => onQuestionChange(Math.max(0, questionIdx - 1));
+  const nextQ = () => onQuestionChange(Math.min(maxQuestions - 1, questionIdx + 1));
+  const prevS = () => onSampleChange(Math.max(0, sampleIdx - 1));
+  const nextS = () => onSampleChange(Math.min(maxSamples - 1, sampleIdx + 1));
+
+  return (
+    <div className="px-4 py-2 border-t border-gray-700 bg-gray-900/80 flex items-center justify-between flex-wrap gap-2">
+      {/* Question navigation */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={prevQ}
+          disabled={questionIdx <= 0}
+          className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 rounded border border-gray-600 text-gray-300 transition-colors"
+        >
+          &larr; Prev Q
+        </button>
+        <div className="flex items-center gap-1">
+          <span className="text-xs text-gray-500">Q</span>
+          <input
+            type="number"
+            value={questionIdx}
+            onChange={(e) => {
+              const v = parseInt(e.target.value);
+              if (!isNaN(v) && v >= 0 && v < maxQuestions) onQuestionChange(v);
+            }}
+            className="w-16 px-1.5 py-1 text-xs text-center bg-gray-800 border border-gray-600 rounded text-gray-200 focus:border-blue-500 focus:outline-none"
+          />
+          <span className="text-xs text-gray-500">/ {maxQuestions > 0 ? maxQuestions - 1 : 0}</span>
+        </div>
+        <button
+          onClick={nextQ}
+          disabled={questionIdx >= maxQuestions - 1}
+          className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 rounded border border-gray-600 text-gray-300 transition-colors"
+        >
+          Next Q &rarr;
+        </button>
+      </div>
+
+      {/* Sample navigation */}
+      {maxSamples > 1 && (
+        <div className="flex items-center gap-2">
+          <button
+            onClick={prevS}
+            disabled={sampleIdx <= 0}
+            className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 rounded border border-gray-600 text-gray-300 transition-colors"
+          >
+            &larr; Prev S
+          </button>
+          <span className="text-xs text-gray-400">
+            Sample {sampleIdx + 1}/{maxSamples}
+          </span>
+          <button
+            onClick={nextS}
+            disabled={sampleIdx >= maxSamples - 1}
+            className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 rounded border border-gray-600 text-gray-300 transition-colors"
+          >
+            Next S &rarr;
+          </button>
+        </div>
+      )}
+
+      {/* Filter */}
+      <div className="flex items-center gap-1">
+        {FILTERS.map((f) => (
+          <button
+            key={f.value}
+            onClick={() => onFilterChange(f.value)}
+            className={`px-2 py-1 text-[10px] rounded border transition-colors ${
+              filter === f.value
+                ? "bg-blue-600 border-blue-500 text-white"
+                : "bg-gray-800 border-gray-600 text-gray-400 hover:bg-gray-700"
+            }`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Keyboard hints */}
+      <div className="text-[10px] text-gray-600">
+        <kbd className="px-1 bg-gray-800 rounded">j</kbd>/<kbd className="px-1 bg-gray-800 rounded">k</kbd> question
+        {" "}
+        <kbd className="px-1 bg-gray-800 rounded">h</kbd>/<kbd className="px-1 bg-gray-800 rounded">l</kbd> sample
+      </div>
+    </div>
+  );
+}

frontend/src/model/components/Sidebar.tsx

@@ -0,0 +1,378 @@
+import { useState } from "react";
+import type { DatasetInfo, Preset } from "../types";
+
+// Consistent group colors for visual distinction
+const GROUP_COLORS = [
+  { bg: "bg-blue-500", border: "border-blue-500", text: "text-blue-400", label: "text-blue-300" },
+  { bg: "bg-emerald-500", border: "border-emerald-500", text: "text-emerald-400", label: "text-emerald-300" },
+  { bg: "bg-amber-500", border: "border-amber-500", text: "text-amber-400", label: "text-amber-300" },
+  { bg: "bg-purple-500", border: "border-purple-500", text: "text-purple-400", label: "text-purple-300" },
+  { bg: "bg-rose-500", border: "border-rose-500", text: "text-rose-400", label: "text-rose-300" },
+  { bg: "bg-cyan-500", border: "border-cyan-500", text: "text-cyan-400", label: "text-cyan-300" },
+];
+
+interface SidebarProps {
+  datasets: DatasetInfo[];
+  presets: Preset[];
+  loading: Record<string, boolean>;
+  groups: Record<string, DatasetInfo[]>;
+  groupIds: string[];
+  currentGroupId: string | null;
+  onAddDataset: (repo: string, column?: string, split?: string, promptColumn?: string) => void;
+  onRemoveDataset: (id: string) => void;
+  onToggleDataset: (id: string) => void;
+  onSetCurrentGroup: (groupId: string) => void;
+  onLoadPreset: (preset: Preset) => void;
+  onSavePreset: (name: string, repo: string, column: string, split?: string) => void;
+  onDeletePreset: (id: string, datasetId?: string) => void;
+  onUpdatePreset: (presetId: string, datasetId: string, updates: { name?: string }) => void;
+}
+
+export default function Sidebar({
+  datasets, presets, loading,
+  groups, groupIds, currentGroupId,
+  onAddDataset, onRemoveDataset, onToggleDataset, onSetCurrentGroup,
+  onLoadPreset, onSavePreset, onDeletePreset, onUpdatePreset,
+}: SidebarProps) {
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [repoInput, setRepoInput] = useState("");
+  const [columnInput, setColumnInput] = useState("");
+  const [splitInput, setSplitInput] = useState("train");
+  const [promptColumnInput, setPromptColumnInput] = useState("");
+  const [presetSearch, setPresetSearch] = useState("");
+  // Track which dataset is currently being saved as a preset (by dataset id)
+  const [savingPresetForId, setSavingPresetForId] = useState<string | null>(null);
+  const [presetName, setPresetName] = useState("");
+  // Track which dataset is selected for preset editing
+  const [editingDatasetId, setEditingDatasetId] = useState<string | null>(null);
+  const [editPresetName, setEditPresetName] = useState("");
+
+  const handleAdd = () => {
+    if (!repoInput.trim()) return;
+    onAddDataset(
+      repoInput.trim(),
+      columnInput.trim() || undefined,
+      splitInput.trim() || undefined,
+      promptColumnInput.trim() || undefined,
+    );
+    setRepoInput("");
+    setShowAddModal(false);
+  };
+
+  const handleSavePresetForRepo = (ds: DatasetInfo) => {
+    if (!presetName.trim()) return;
+    onSavePreset(presetName.trim(), ds.repo, ds.column, ds.split);
+    setPresetName("");
+    setSavingPresetForId(null);
+  };
+
+  const getGroupColor = (groupId: string) => {
+    const idx = groupIds.indexOf(groupId);
+    return GROUP_COLORS[idx % GROUP_COLORS.length];
+  };
+
+  return (
+    <div className="w-72 min-w-72 bg-gray-900 border-r border-gray-700 flex flex-col h-full">
+      {/* Presets section */}
+      <div className="p-3 border-b border-gray-700">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Presets</h3>
+        </div>
+        {presets.length === 0 ? (
+          <p className="text-xs text-gray-500 italic">No presets saved</p>
+        ) : (
+          <>
+            {presets.length > 6 && (
+              <input
+                type="text"
+                value={presetSearch}
+                onChange={(e) => setPresetSearch(e.target.value)}
+                placeholder="Search presets..."
+                className="w-full px-2 py-1 mb-2 text-xs bg-gray-800 border border-gray-600 rounded text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+              />
+            )}
+            <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
+              {presets
+                .filter((p) => !presetSearch || p.name.toLowerCase().includes(presetSearch.toLowerCase()) || p.repo.toLowerCase().includes(presetSearch.toLowerCase()))
+                .map((p) => (
+                <div key={p.id} className="group relative">
+                  <button
+                    onClick={() => onLoadPreset(p)}
+                    className="px-2 py-1 text-xs bg-gray-800 hover:bg-gray-700 rounded border border-gray-600 text-gray-300 transition-colors"
+                    title={`${p.repo} (${p.column}, ${p.split ?? "train"})`}
+                  >
+                    {p.name}
+                  </button>
+                  <div className="hidden group-hover:flex absolute top-full left-0 mt-1 z-10 gap-1">
+                    <button
+                      onClick={() => onDeletePreset(p.id)}
+                      className="px-1.5 py-0.5 text-[10px] bg-red-900 hover:bg-red-800 rounded text-red-300"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Datasets section — grouped by question fingerprint */}
+      <div className="flex-1 overflow-y-auto p-3">
+        <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Loaded Repos</h3>
+        {datasets.length === 0 ? (
+          <p className="text-xs text-gray-500 italic">No repos loaded. Add one below.</p>
+        ) : (
+          <div className="space-y-3">
+            {groupIds.map((gid) => {
+              const color = getGroupColor(gid);
+              const groupDatasets = groups[gid];
+              const isCurrentGroup = gid === currentGroupId;
+
+              return (
+                <div key={gid}>
+                  {/* Group header — clickable to switch group */}
+                  <button
+                    onClick={() => onSetCurrentGroup(gid)}
+                    className={`w-full flex items-center gap-1.5 mb-1 px-1 py-0.5 rounded transition-colors ${
+                      isCurrentGroup ? "bg-gray-800" : "hover:bg-gray-800/50"
+                    }`}
+                  >
+                    <span className={`inline-block w-2 h-2 rounded-full ${color.bg} shrink-0`} />
+                    <span className={`text-[10px] font-semibold uppercase tracking-wider ${
+                      isCurrentGroup ? color.label : "text-gray-500"
+                    }`}>
+                      Group {groupIds.indexOf(gid) + 1}
+                      <span className="normal-case font-normal ml-1 text-gray-600">
+                        ({groupDatasets.length} repo{groupDatasets.length !== 1 ? "s" : ""})
+                      </span>
+                    </span>
+                    {isCurrentGroup && (
+                      <span className="text-[9px] text-gray-600 ml-auto">viewing</span>
+                    )}
+                  </button>
+
+                  {/* Repos in this group */}
+                  <div className={`space-y-1 border-l-2 ml-1 pl-2 ${
+                    isCurrentGroup ? color.border : "border-gray-700"
+                  }`}>
+                    {groupDatasets.map((ds) => (
+                      <div key={ds.id}>
+                        <div
+                          onClick={() => {
+                            if (ds.presetId) {
+                              setEditingDatasetId(editingDatasetId === ds.id ? null : ds.id);
+                              setEditPresetName(ds.presetName || "");
+                              setShowAddModal(false);
+                            }
+                          }}
+                          className={`flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-colors ${
+                            ds.active ? "bg-gray-800" : "bg-gray-900 opacity-60"
+                          } ${editingDatasetId === ds.id ? "ring-1 ring-blue-500" : ""} ${ds.presetId ? "cursor-pointer" : ""}`}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={ds.active}
+                            onChange={() => onToggleDataset(ds.id)}
+                            onClick={(e) => e.stopPropagation()}
+                            className="rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
+                          />
+                          <div className="flex-1 min-w-0">
+                            <div className="text-gray-200 truncate text-xs font-medium" title={ds.presetName ? `${ds.presetName}\n${ds.repo}` : ds.repo}>
+                              {ds.presetName || ds.name}
+                            </div>
+                            <div className="text-[10px] text-gray-500">
+                              {ds.column} | {ds.n_rows} rows | {ds.n_samples} samples
+                            </div>
+                          </div>
+                          {/* Save as preset */}
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setSavingPresetForId(savingPresetForId === ds.id ? null : ds.id);
+                              setPresetName("");
+                            }}
+                            className={`transition-colors shrink-0 ${
+                              savingPresetForId === ds.id
+                                ? "text-blue-400"
+                                : "text-gray-600 hover:text-blue-400"
+                            }`}
+                            title="Save as preset"
+                          >
+                            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+                            </svg>
+                          </button>
+                          {/* Remove */}
+                          <button
+                            onClick={(e) => { e.stopPropagation(); onRemoveDataset(ds.id); }}
+                            className="text-gray-600 hover:text-red-400 transition-colors shrink-0"
+                            title="Remove"
+                          >
+                            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                          </button>
+                        </div>
+                        {/* Inline preset name input */}
+                        {savingPresetForId === ds.id && (
+                          <div className="flex gap-1 mt-1 ml-6">
+                            <input
+                              type="text"
+                              value={presetName}
+                              onChange={(e) => setPresetName(e.target.value)}
+                              onKeyDown={(e) => {
+                                if (e.key === "Enter") handleSavePresetForRepo(ds);
+                                if (e.key === "Escape") setSavingPresetForId(null);
+                              }}
+                              placeholder="Preset name..."
+                              className="flex-1 px-2 py-1 text-xs bg-gray-800 border border-gray-600 rounded text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+                              autoFocus
+                            />
+                            <button
+                              onClick={() => handleSavePresetForRepo(ds)}
+                              className="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-500 rounded text-white"
+                            >
+                              Save
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Preset edit panel */}
+      {editingDatasetId && (() => {
+        const editDs = datasets.find(d => d.id === editingDatasetId);
+        if (!editDs?.presetId) return null;
+        return (
+          <div className="p-3 border-t border-gray-700 space-y-2">
+            <div className="text-[10px] text-gray-500 uppercase font-semibold tracking-wider">Edit Preset</div>
+            <input
+              type="text"
+              value={editPresetName}
+              onChange={(e) => setEditPresetName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && editPresetName.trim()) {
+                  onUpdatePreset(editDs.presetId!, editDs.id, { name: editPresetName.trim() });
+                  setEditingDatasetId(null);
+                }
+                if (e.key === "Escape") setEditingDatasetId(null);
+              }}
+              placeholder="Preset name..."
+              className="w-full px-2 py-1 text-xs bg-gray-800 border border-gray-600 rounded text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+              autoFocus
+            />
+            <div className="flex gap-2">
+              <button
+                onClick={() => {
+                  if (editPresetName.trim()) {
+                    onUpdatePreset(editDs.presetId!, editDs.id, { name: editPresetName.trim() });
+                    setEditingDatasetId(null);
+                  }
+                }}
+                disabled={!editPresetName.trim()}
+                className="flex-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 rounded text-white transition-colors"
+              >
+                Save
+              </button>
+              <button
+                onClick={() => {
+                  onDeletePreset(editDs.presetId!, editDs.id);
+                  setEditingDatasetId(null);
+                }}
+                className="px-2 py-1 text-xs bg-red-900 hover:bg-red-800 rounded text-red-300 transition-colors"
+              >
+                Delete
+              </button>
+              <button
+                onClick={() => setEditingDatasetId(null)}
+                className="px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded text-gray-300 transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* Add repo section */}
+      <div className="p-3 border-t border-gray-700">
+        {!showAddModal ? (
+          <button
+            onClick={() => {
+              setEditingDatasetId(null);
+              setShowAddModal(true);
+              setRepoInput("");
+              setColumnInput("");
+              setSplitInput("train");
+              setPromptColumnInput("");
+            }}
+            className="w-full px-3 py-2 text-sm bg-blue-600 hover:bg-blue-500 rounded text-white font-medium transition-colors"
+          >
+            + Add Repo
+          </button>
+        ) : (
+          <div className="space-y-2">
+            <input
+              type="text"
+              value={repoInput}
+              onChange={(e) => setRepoInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleAdd()}
+              placeholder="org/dataset-name"
+              className="w-full px-2 py-1.5 text-sm bg-gray-800 border border-gray-600 rounded text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+              autoFocus
+            />
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={columnInput}
+                onChange={(e) => setColumnInput(e.target.value)}
+                placeholder="Response col (auto-detect)"
+                className="flex-1 px-2 py-1 text-xs bg-gray-800 border border-gray-600 rounded text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+              />
+              <input
+                type="text"
+                value={splitInput}
+                onChange={(e) => setSplitInput(e.target.value)}
+                placeholder="Split"
+                className="w-16 px-2 py-1 text-xs bg-gray-800 border border-gray-600 rounded text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+              />
+            </div>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={promptColumnInput}
+                onChange={(e) => setPromptColumnInput(e.target.value)}
+                placeholder="Prompt col (auto-detect)"
+                className="flex-1 px-2 py-1 text-xs bg-gray-800 border border-gray-600 rounded text-gray-200 placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+              />
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={handleAdd}
+                disabled={!repoInput.trim() || loading[repoInput.trim()]}
+                className="flex-1 px-2 py-1.5 text-sm bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 rounded text-white transition-colors"
+              >
+                {loading[repoInput.trim()] ? "Loading..." : "Load"}
+              </button>
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="px-3 py-1.5 text-sm bg-gray-700 hover:bg-gray-600 rounded text-gray-300 transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/model/components/TracePanel.tsx

@@ -0,0 +1,171 @@
+import { useState } from "react";
+import type { QuestionData } from "../types";
+import { highlightTrace } from "../utils/traceHighlight";
+import { parsePrompt, type ParsedMessage } from "../utils/promptParser";
+
+export interface DragHandleProps {
+  draggable: true;
+  onDragStart: (e: React.DragEvent) => void;
+  onDragEnd: (e: React.DragEvent) => void;
+}
+
+interface TracePanelProps {
+  datasetName: string;
+  repoName?: string;
+  data: QuestionData | undefined;
+  sampleIdx: number;
+  isLoading?: boolean;
+  dragHandleProps?: DragHandleProps;
+}
+
+export default function TracePanel({ datasetName, repoName, data, sampleIdx, isLoading, dragHandleProps }: TracePanelProps) {
+  const [promptExpanded, setPromptExpanded] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className="h-full border border-gray-700 rounded-lg flex items-center justify-center">
+        <div className="text-gray-500 text-sm">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="h-full border border-gray-700 rounded-lg flex items-center justify-center">
+        <div className="text-gray-500 text-sm">No data</div>
+      </div>
+    );
+  }
+
+  const isCorrect = data.eval_correct[sampleIdx];
+  const analysis = data.analyses[sampleIdx];
+  const extraction = data.extractions?.[sampleIdx];
+
+  const borderColor = isCorrect === undefined
+    ? "border-gray-700"
+    : isCorrect
+    ? "border-green-600"
+    : "border-red-600";
+
+  const thinkSegments = highlightTrace(analysis?.think_text || "");
+  const answerText = analysis?.answer_text || "";
+
+  const promptMessages = data.prompt_text ? parsePrompt(data.prompt_text) : [];
+
+  return (
+    <div className={`h-full border-2 ${borderColor} rounded-lg flex flex-col bg-gray-900/50`}>
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-gray-700 flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-sm font-semibold text-gray-200 truncate" title={repoName ? `${datasetName}\n${repoName}` : datasetName}>{datasetName}</span>
+          {isCorrect !== undefined && (
+            <span className={`px-1.5 py-0.5 text-[10px] rounded font-medium ${
+              isCorrect ? "bg-green-900 text-green-300" : "bg-red-900 text-red-300"
+            }`}>
+              {isCorrect ? "CORRECT" : "WRONG"}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0 ml-2">
+          <span className="text-[10px] text-gray-500">
+            {analysis && (
+              <>Think: {analysis.think_len.toLocaleString()} | BT: {analysis.backtracks}</>
+            )}
+          </span>
+          {dragHandleProps && (
+            <span
+              {...dragHandleProps}
+              title="Drag to reorder"
+              className="drag-handle text-gray-600 hover:text-gray-400 transition-colors"
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                <circle cx="5" cy="3" r="1.5" />
+                <circle cx="11" cy="3" r="1.5" />
+                <circle cx="5" cy="8" r="1.5" />
+                <circle cx="11" cy="8" r="1.5" />
+                <circle cx="5" cy="13" r="1.5" />
+                <circle cx="11" cy="13" r="1.5" />
+              </svg>
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Extraction / extracted answer */}
+      {extraction && (
+        <div className="px-3 py-1.5 border-b border-gray-700/50 bg-gray-800/30 overflow-x-auto whitespace-nowrap">
+          <span className="text-[10px] text-gray-500 uppercase font-medium">Extracted: </span>
+          <span className="text-xs text-gray-300 font-mono">{extraction}</span>
+        </div>
+      )}
+
+      {/* Trace content */}
+      <div className="flex-1 overflow-y-auto trace-scroll px-3 py-2">
+        {/* Prompt section — collapsible */}
+        {promptMessages.length > 0 && (
+          <div className="mb-3">
+            <button
+              onClick={() => setPromptExpanded(!promptExpanded)}
+              className="flex items-center gap-1 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1 hover:text-gray-300 transition-colors"
+            >
+              <span className="text-[10px]">{promptExpanded ? "\u25BC" : "\u25B6"}</span>
+              Prompt ({promptMessages.length} message{promptMessages.length !== 1 ? "s" : ""})
+            </button>
+            {promptExpanded && (
+              <div className="space-y-1.5">
+                {promptMessages.map((msg, i) => (
+                  <PromptMessage key={i} message={msg} />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Thinking section */}
+        <div className="mb-3">
+          <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            Thinking ({analysis?.think_len.toLocaleString() || 0} chars)
+          </div>
+          <pre className="text-xs leading-relaxed whitespace-pre-wrap font-mono">
+            {thinkSegments.map((seg, i) => (
+              <span key={i} className={seg.className}>{seg.text}</span>
+            ))}
+          </pre>
+        </div>
+
+        {/* Answer section */}
+        {answerText && (
+          <div>
+            <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+              Answer ({analysis?.answer_len.toLocaleString() || 0} chars)
+            </div>
+            <pre className="text-xs leading-relaxed whitespace-pre-wrap font-mono text-gray-100 font-bold">
+              {answerText}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const ROLE_STYLES: Record<string, { border: string; label: string; bg: string }> = {
+  system: { border: "border-l-purple-500", label: "text-purple-400", bg: "bg-purple-500/5" },
+  user: { border: "border-l-blue-500", label: "text-blue-400", bg: "bg-blue-500/5" },
+  assistant: { border: "border-l-green-500", label: "text-green-400", bg: "bg-green-500/5" },
+  prompt: { border: "border-l-gray-500", label: "text-gray-400", bg: "bg-gray-500/5" },
+};
+
+function PromptMessage({ message }: { message: ParsedMessage }) {
+  const style = ROLE_STYLES[message.role] || ROLE_STYLES.prompt;
+  return (
+    <div className={`border-l-2 ${style.border} ${style.bg} rounded-r pl-2 py-1`}>
+      <div className={`text-[10px] font-semibold uppercase tracking-wider ${style.label}`}>
+        {message.role}
+      </div>
+      <pre className="text-xs leading-relaxed whitespace-pre-wrap font-mono text-gray-300 max-h-60 overflow-y-auto">
+        {message.content}
+      </pre>
+    </div>
+  );
+}

frontend/src/model/store.ts

@@ -0,0 +1,270 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import type { DatasetInfo, QuestionData, Preset, FilterMode } from "./types";
+import { api } from "./api";
+import { parseHash, replaceRoute } from "../hashRouter";
+
+interface GroupIndices {
+  questionIdx: number;
+  sampleIdx: number;
+}
+
+export function useAppState() {
+  // Capture URL params at init BEFORE any effects can wipe them
+  const initialParams = useRef(parseHash().params);
+
+  const [datasets, setDatasets] = useState<DatasetInfo[]>([]);
+  const [presets, setPresets] = useState<Preset[]>([]);
+  const [filter, setFilter] = useState<FilterMode>("all");
+  const [questionDataMap, setQuestionDataMap] = useState<Record<string, QuestionData>>({});
+  const [loading, setLoading] = useState<Record<string, boolean>>({});
+  const [error, setError] = useState<string | null>(null);
+
+  // Per-group navigation indices
+  const [groupIndices, setGroupIndices] = useState<Record<string, GroupIndices>>({});
+  // Which group is currently displayed (fingerprint)
+  const [currentGroupId, setCurrentGroupId] = useState<string | null>(null);
+
+  // Load presets on mount
+  useEffect(() => {
+    api.listPresets().then(setPresets).catch(() => {});
+  }, []);
+
+  // Sync URL state on mount (read from hash params) — q/s/filter only, repos loaded below
+  useEffect(() => {
+    const route = parseHash();
+    const params = route.params;
+    const q = parseInt(params.get("q") || "0");
+    const s = parseInt(params.get("s") || "0");
+    const f = (params.get("filter") || "all") as FilterMode;
+    setFilter(f);
+    // q and s will be applied once the first group is set
+    if (!isNaN(q) || !isNaN(s)) {
+      // Store initial URL indices to apply to first group loaded
+      (window as unknown as Record<string, unknown>).__initialQ = isNaN(q) ? 0 : q;
+      (window as unknown as Record<string, unknown>).__initialS = isNaN(s) ? 0 : s;
+    }
+  }, []);
+
+  // Derive groups from datasets by fingerprint
+  const groups = useMemo(() => {
+    const map: Record<string, DatasetInfo[]> = {};
+    for (const ds of datasets) {
+      const fp = ds.questionFingerprint;
+      if (!map[fp]) map[fp] = [];
+      map[fp].push(ds);
+    }
+    return map;
+  }, [datasets]);
+
+  const groupIds = useMemo(() => Object.keys(groups).sort(), [groups]);
+
+  // Auto-set currentGroupId if not set or invalid
+  useEffect(() => {
+    if (currentGroupId && groups[currentGroupId]) return;
+    // Pick first group that has active datasets, or first group overall
+    const activeGroup = groupIds.find(gid => groups[gid].some(d => d.active));
+    if (activeGroup) {
+      setCurrentGroupId(activeGroup);
+    } else if (groupIds.length > 0) {
+      setCurrentGroupId(groupIds[0]);
+    } else {
+      setCurrentGroupId(null);
+    }
+  }, [groupIds, groups, currentGroupId]);
+
+  // Active datasets = active datasets in current group
+  const activeDatasets = useMemo(
+    () => datasets.filter(d => d.active && d.questionFingerprint === currentGroupId),
+    [datasets, currentGroupId]
+  );
+
+  // Panel ordering: track display order of active dataset IDs
+  const [panelOrder, setPanelOrder] = useState<string[]>([]);
+
+  // Keep panelOrder in sync with activeDatasets: add new IDs at end, remove stale ones
+  useEffect(() => {
+    const activeIds = new Set(activeDatasets.map(d => d.id));
+    setPanelOrder(prev => {
+      const kept = prev.filter(id => activeIds.has(id));
+      const newIds = activeDatasets.map(d => d.id).filter(id => !prev.includes(id));
+      const merged = [...kept, ...newIds];
+      // Only update if changed to avoid unnecessary renders
+      if (merged.length === prev.length && merged.every((id, i) => id === prev[i])) return prev;
+      return merged;
+    });
+  }, [activeDatasets]);
+
+  // Ordered active datasets according to panelOrder
+  const orderedActiveDatasets = useMemo(() => {
+    const map = new Map(activeDatasets.map(d => [d.id, d]));
+    return panelOrder.map(id => map.get(id)).filter((d): d is DatasetInfo => d !== undefined);
+  }, [activeDatasets, panelOrder]);
+
+  const reorderPanels = useCallback((fromId: string, toId: string) => {
+    if (fromId === toId) return;
+    setPanelOrder(prev => {
+      const order = [...prev];
+      const fromIdx = order.indexOf(fromId);
+      const toIdx = order.indexOf(toId);
+      if (fromIdx === -1 || toIdx === -1) return prev;
+      order.splice(fromIdx, 1);
+      order.splice(toIdx, 0, fromId);
+      return order;
+    });
+  }, []);
+
+  // Current group's indices
+  const currentIndices = currentGroupId ? groupIndices[currentGroupId] : undefined;
+  const questionIdx = currentIndices?.questionIdx ?? 0;
+  const sampleIdx = currentIndices?.sampleIdx ?? 0;
+
+  const setQuestionIdx = useCallback((val: number | ((prev: number) => number)) => {
+    if (!currentGroupId) return;
+    setGroupIndices(prev => {
+      const cur = prev[currentGroupId] ?? { questionIdx: 0, sampleIdx: 0 };
+      const newQ = typeof val === "function" ? val(cur.questionIdx) : val;
+      return { ...prev, [currentGroupId]: { ...cur, questionIdx: newQ } };
+    });
+  }, [currentGroupId]);
+
+  const setSampleIdx = useCallback((val: number | ((prev: number) => number)) => {
+    if (!currentGroupId) return;
+    setGroupIndices(prev => {
+      const cur = prev[currentGroupId] ?? { questionIdx: 0, sampleIdx: 0 };
+      const newS = typeof val === "function" ? val(cur.sampleIdx) : val;
+      return { ...prev, [currentGroupId]: { ...cur, sampleIdx: newS } };
+    });
+  }, [currentGroupId]);
+
+  // Update hash params when state changes
+  useEffect(() => {
+    const params = new URLSearchParams();
+    const activeRepos = datasets.filter((d) => d.active);
+    if (activeRepos.length > 0) {
+      params.set("repos", activeRepos.map((d) => d.repo).join(","));
+      params.set("cols", activeRepos.map((d) => d.column).join(","));
+      params.set("pcols", activeRepos.map((d) => d.promptColumn || "formatted_prompt").join(","));
+    }
+    params.set("q", String(questionIdx));
+    params.set("s", String(sampleIdx));
+    if (filter !== "all") params.set("filter", filter);
+    if (currentGroupId) params.set("group", currentGroupId);
+    replaceRoute({ params });
+  }, [datasets, questionIdx, sampleIdx, filter, currentGroupId]);
+
+  // Fetch question data for active datasets in current group when question changes
+  useEffect(() => {
+    activeDatasets.forEach((ds) => {
+      const key = `${ds.id}:${questionIdx}`;
+      if (!questionDataMap[key]) {
+        api.getQuestion(ds.id, questionIdx).then((data) => {
+          setQuestionDataMap((prev) => ({ ...prev, [key]: data }));
+        }).catch(() => {});
+      }
+    });
+  }, [questionIdx, activeDatasets]);
+
+  const addDataset = useCallback(async (
+    repo: string, column?: string, split?: string, promptColumn?: string,
+    presetId?: string, presetName?: string,
+  ) => {
+    setLoading((prev) => ({ ...prev, [repo]: true }));
+    setError(null);
+    try {
+      const { question_fingerprint, ...rest } = await api.loadDataset(repo, column, split, promptColumn);
+      const fp = question_fingerprint ?? "";
+      const dsInfo: DatasetInfo = {
+        ...rest,
+        questionFingerprint: fp,
+        active: true,
+        presetId,
+        presetName,
+      };
+
+      setDatasets((prev) => {
+        if (prev.some((d) => d.id === dsInfo.id)) return prev;
+        return [...prev, dsInfo];
+      });
+
+      // Initialize group indices if new group, or inherit existing
+      setGroupIndices(prev => {
+        if (prev[fp]) return prev; // Group already exists, new repo inherits its indices
+        // New group — check for initial URL params or start at 0
+        const win = window as unknown as Record<string, unknown>;
+        const initQ = typeof win.__initialQ === "number" ? win.__initialQ : 0;
+        const initS = typeof win.__initialS === "number" ? win.__initialS : 0;
+        // Only use initial params for the very first group
+        const isFirstGroup = Object.keys(prev).length === 0;
+        return {
+          ...prev,
+          [fp]: { questionIdx: isFirstGroup ? initQ : 0, sampleIdx: isFirstGroup ? initS : 0 },
+        };
+      });
+
+      // Switch to the new dataset's group
+      setCurrentGroupId(fp);
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to load dataset");
+    } finally {
+      setLoading((prev) => ({ ...prev, [repo]: false }));
+    }
+  }, []);
+
+  // Auto-load repos from URL (must be after addDataset declaration)
+  // Auto-load from URL — uses initialParams captured before any effect could wipe them
+  useEffect(() => {
+    const params = initialParams.current;
+    const repoList = params.get("repos")?.split(",").filter(Boolean) || [];
+    const colList = params.get("cols")?.split(",") || [];
+    const pcolList = params.get("pcols")?.split(",") || [];
+    for (let i = 0; i < repoList.length; i++) {
+      addDataset(repoList[i], colList[i] || undefined, undefined, pcolList[i] || undefined);
+    }
+  }, [addDataset]);
+
+  const removeDataset = useCallback(async (id: string) => {
+    await api.unloadDataset(id).catch(() => {});
+    setDatasets((prev) => prev.filter((d) => d.id !== id));
+  }, []);
+
+  const toggleDataset = useCallback((id: string) => {
+    setDatasets((prev) => {
+      const updated = prev.map((d) => (d.id === id ? { ...d, active: !d.active } : d));
+      // If toggling ON a dataset from a different group, switch to that group
+      const toggled = updated.find(d => d.id === id);
+      if (toggled && toggled.active) {
+        setCurrentGroupId(toggled.questionFingerprint);
+      }
+      return updated;
+    });
+  }, []);
+
+  const updateDatasetPresetName = useCallback((dsId: string, name: string) => {
+    setDatasets(prev => prev.map(d => d.id === dsId ? { ...d, presetName: name } : d));
+  }, []);
+
+  const clearDatasetPreset = useCallback((dsId: string) => {
+    setDatasets(prev => prev.map(d => d.id === dsId ? { ...d, presetId: undefined, presetName: undefined } : d));
+  }, []);
+
+  const maxQuestions = Math.min(...activeDatasets.map((d) => d.n_rows), Infinity);
+  const maxSamples = Math.max(...activeDatasets.map((d) => d.n_samples), 0);
+
+  const getQuestionData = (dsId: string): QuestionData | undefined => {
+    return questionDataMap[`${dsId}:${questionIdx}`];
+  };
+
+  return {
+    datasets, presets, setPresets,
+    questionIdx, setQuestionIdx,
+    sampleIdx, setSampleIdx,
+    filter, setFilter,
+    loading, error, setError,
+    activeDatasets, orderedActiveDatasets, maxQuestions, maxSamples,
+    addDataset, removeDataset, toggleDataset,
+    updateDatasetPresetName, clearDatasetPreset,
+    getQuestionData, reorderPanels,
+    // Group state
+    groups, groupIds, currentGroupId, setCurrentGroupId,
+  };
+}

frontend/src/model/types.ts

@@ -0,0 +1,55 @@
+export interface DatasetInfo {
+  id: string;
+  repo: string;
+  name: string;
+  column: string;
+  columns: string[];
+  split: string;
+  promptColumn: string | null;
+  n_rows: number;
+  n_samples: number;
+  active: boolean;
+  questionFingerprint: string;
+  presetId?: string;
+  presetName?: string;
+}
+
+export interface TraceAnalysis {
+  total_len: number;
+  think_len: number;
+  answer_len: number;
+  backtracks: number;
+  restarts: number;
+  think_text: string;
+  answer_text: string;
+}
+
+export interface QuestionData {
+  question: string;
+  prompt_text: string;
+  responses: string[];
+  eval_correct: boolean[];
+  extractions: string[];
+  metadata: Record<string, unknown>;
+  analyses: TraceAnalysis[];
+  n_samples: number;
+  index: number;
+}
+
+export interface DatasetSummary {
+  n_rows: number;
+  n_samples: number;
+  has_eval: boolean;
+  sample_accuracy?: { correct: number; total: number; rate: number };
+  pass_at?: Record<number, { correct: number; total: number; rate: number }>;
+}
+
+export interface Preset {
+  id: string;
+  name: string;
+  repo: string;
+  column: string;
+  split?: string;
+}
+
+export type FilterMode = "all" | "improvements" | "regressions" | "both-correct" | "both-wrong";

frontend/src/model/utils/promptParser.ts

@@ -0,0 +1,93 @@
+export interface ParsedMessage {
+  role: string;
+  content: string;
+}
+
+export function parsePrompt(text: string): ParsedMessage[] {
+  if (!text || !text.trim()) return [];
+
+  // Try 1: JSON array of {role, content} objects
+  try {
+    const parsed = JSON.parse(text);
+    if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].role !== undefined) {
+      return parsed.map((m: Record<string, unknown>) => ({
+        role: String(m.role || "unknown"),
+        content: String(m.content ?? ""),
+      }));
+    }
+  } catch {
+    // Not JSON
+  }
+
+  // Try 2: ChatML — <|im_start|>role\ncontent<|im_end|>
+  if (text.includes("<|im_start|>")) {
+    const parts = text.split("<|im_start|>").filter(Boolean);
+    return parts.map((part) => {
+      const nlIdx = part.indexOf("\n");
+      const role = nlIdx > 0 ? part.slice(0, nlIdx).trim() : "unknown";
+      const content = (nlIdx > 0 ? part.slice(nlIdx + 1) : part)
+        .replace(/<\|im_end\|>/g, "")
+        .trim();
+      return { role, content };
+    });
+  }
+
+  // Try 3: Generic chat template — <|system|>, <|user|>, <|assistant|>
+  if (/<\|(system|user|assistant)\|>/.test(text)) {
+    const regex = /<\|(system|user|assistant)\|>/g;
+    const positions: { role: string; start: number; tagEnd: number }[] = [];
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+      positions.push({
+        role: match[1],
+        start: match.index,
+        tagEnd: match.index + match[0].length,
+      });
+    }
+    return positions.map((pos, i) => {
+      const end = i + 1 < positions.length ? positions[i + 1].start : text.length;
+      return { role: pos.role, content: text.slice(pos.tagEnd, end).trim() };
+    });
+  }
+
+  // Try 4: Llama-style — <<SYS>>, [INST], [/INST]
+  if (text.includes("[INST]") || text.includes("<<SYS>>")) {
+    const messages: ParsedMessage[] = [];
+    const sysMatch = text.match(/<<SYS>>([\s\S]*?)<<\/SYS>>/);
+    if (sysMatch) {
+      messages.push({ role: "system", content: sysMatch[1].trim() });
+    }
+    // Split on [INST] and [/INST] markers
+    const withoutSys = text.replace(/<<SYS>>[\s\S]*?<<\/SYS>>/g, "");
+    const segments = withoutSys.split(/\[INST\]|\[\/INST\]/).map((s) => s.trim()).filter(Boolean);
+    let isUser = true;
+    for (const seg of segments) {
+      messages.push({ role: isUser ? "user" : "assistant", content: seg });
+      isUser = !isUser;
+    }
+    return messages.length > 0 ? messages : [{ role: "prompt", content: text }];
+  }
+
+  // Try 5: Plain labeled — "System:", "User:", "Assistant:", "Human:"
+  if (/^(System|User|Assistant|Human):\s/m.test(text)) {
+    const regex = /^(System|User|Assistant|Human):\s*/gm;
+    const positions: { role: string; contentStart: number }[] = [];
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+      const role = match[1].toLowerCase() === "human" ? "user" : match[1].toLowerCase();
+      positions.push({ role, contentStart: match.index + match[0].length });
+    }
+    return positions.map((pos, i) => {
+      const end = i + 1 < positions.length
+        ? text.lastIndexOf("\n", positions[i + 1].contentStart - positions[i + 1].role.length - 2)
+        : text.length;
+      return {
+        role: pos.role,
+        content: text.slice(pos.contentStart, end > pos.contentStart ? end : text.length).trim(),
+      };
+    });
+  }
+
+  // Fallback: single prompt block
+  return [{ role: "prompt", content: text }];
+}

frontend/src/model/utils/traceHighlight.ts

@@ -0,0 +1,37 @@
+export interface HighlightSegment {
+  text: string;
+  className: string;
+}
+
+export function highlightTrace(text: string): HighlightSegment[] {
+  if (!text) return [{ text: "(no response)", className: "text-gray-500 italic" }];
+
+  const segments: HighlightSegment[] = [];
+  const lines = text.split("\n");
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lo = line.toLowerCase().trim();
+
+    let className = "text-gray-300";
+
+    if (lo.startsWith("wait") || lo.startsWith("hmm") || lo.startsWith("but wait")) {
+      className = "text-yellow-400";
+    } else if (lo.startsWith("let me try") || lo.startsWith("let me reconsider") || lo.startsWith("let me think")) {
+      className = "text-cyan-400";
+    } else if (lo.startsWith("so the answer") || lo.startsWith("so the expression") || lo.startsWith("therefore") || lo.startsWith("the final")) {
+      className = "text-green-400 font-bold";
+    } else if (lo.startsWith("i give up") || lo.startsWith("i can't find") || lo.startsWith("i'm stuck") || lo.startsWith("i'm sorry")) {
+      className = "text-red-400 font-bold";
+    } else if (line.includes("=") && /[+\-*/]/.test(line)) {
+      className = "text-gray-100";
+    }
+
+    segments.push({ text: line, className });
+    if (i < lines.length - 1) {
+      segments.push({ text: "\n", className: "" });
+    }
+  }
+
+  return segments;
+}

frontend/src/visualizer/VisualizerApp.tsx

@@ -0,0 +1,55 @@
+import { lazy, Suspense } from "react";
+import { useHashRoute, navigateTo } from "../hashRouter";
+
+const ModelApp = lazy(() => import("../model/ModelApp"));
+
+type TabId = "model";
+
+const TABS: { id: TabId; label: string; color: string; activeClass: string }[] = [
+  { id: "model", label: "Model Trace", color: "blue", activeClass: "border-blue-500 text-blue-400" },
+];
+
+const VALID_TABS = new Set<string>(TABS.map(t => t.id));
+
+export default function VisualizerApp() {
+  const route = useHashRoute();
+  const activeTab: TabId = VALID_TABS.has(route.tab) ? (route.tab as TabId) : "model";
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Visualizer tab bar */}
+      <div className="flex items-center border-b border-gray-800 bg-gray-900/50 px-2 shrink-0">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => navigateTo({ page: "viz", tab: tab.id })}
+            className={`px-5 py-2 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === tab.id
+                ? tab.activeClass
+                : "border-transparent text-gray-500 hover:text-gray-300"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Active visualizer */}
+      <div className="flex-1 overflow-hidden">
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center h-full text-gray-500">
+              Loading...
+            </div>
+          }
+        >
+          {activeTab === "model" && (
+            <div className="theme-model h-full">
+              <ModelApp />
+            </div>
+          )}
+        </Suspense>
+      </div>
+    </div>
+  );
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

frontend/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }]
+}

frontend/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: "dist",
+  },
+});