feat: add Research Dashboard with Experiments page as parent site

Restructure agg_visualizer into a Research Dashboard with top-level
navigation (Experiments | Visualizer). The existing visualizer is
preserved as a subpage. New Experiments page provides CRUD for
tracking experiments, runs, sub-experiments, and HF datasets.

Backend: /api/experiments/ with JSON storage in HF dataset repo
(reasoning-degeneration-dev/RESEARCH_DASHBOARD), import endpoint
for exp-runner integration.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -4,4 +4,5 @@ __pycache__/
 *.pyc
 .env
 backend/presets/
+backend/data/
 .DS_Store

README.md

@@ -1,5 +1,5 @@
 ---
-title: Aggregate Trace Visualizer
+title: Research Dashboard
 emoji: 📊
 colorFrom: blue
 colorTo: purple
@@ -7,13 +7,30 @@ sdk: docker
 pinned: false
 ---
 
-# Aggregate Trace Visualizer
+# Research Dashboard
 
-A unified interface for four trace visualization tools:
+A unified research control pane with two main sections:
+
+## Experiments
+
+Track research experiments, hypotheses, runs, and artifacts:
+
+- **Experiment tracking** - Create/manage experiments with hypothesis statements, status, and completeness scoring
+- **Run history** - Record runs with conditions, models, clusters, metrics, and HF dataset links
+- **Sub-experiments** - Drill into focused sub-studies with markdown reports
+- **HF dataset catalog** - Link and browse all HuggingFace datasets per experiment
+
+Data stored in `reasoning-degeneration-dev/RESEARCH_DASHBOARD`. Supports programmatic import via `/api/experiments/import`.
+
+## Visualizer
+
+Six trace visualization tools:
 
 - **Model Trace** - Analyze reasoning traces from model responses (think tags, backtracks, restarts)
 - **Arena** - Explore multi-agent game episodes and transcripts
 - **RLM** - Navigate hierarchical RLM call traces (GEPA iterations, RLM calls)
+- **RLM Eval** - RLM evaluation trace viewer
 - **Harbor** - View SWE-bench agent trajectories (ATIF + raw message formats)
+- **AdaEvolve** - Explore AdaEvolve optimization traces
 
 Each visualizer loads datasets from HuggingFace and supports preset configurations stored in `reasoning-degeneration-dev/AGG_VIS_PRESETS`.

backend/api/experiments.py

@@ -0,0 +1,426 @@
+import json
+import os
+import uuid
+import tempfile
+import threading
+from datetime import datetime, timezone
+from flask import Blueprint, request, jsonify
+
+bp = Blueprint("experiments", __name__, url_prefix="/api/experiments")
+
+DASHBOARD_REPO = "reasoning-degeneration-dev/RESEARCH_DASHBOARD"
+LOCAL_DATA_DIR = os.path.join(os.path.dirname(os.path.dirname(__file__)), "data")
+
+_cache: dict[str, list[dict]] = {}
+_cache_loaded: set[str] = set()
+_lock = threading.Lock()
+
+FILES = ["experiments", "runs", "sub_experiments"]
+
+
+def _ensure_local_dir():
+    os.makedirs(LOCAL_DATA_DIR, exist_ok=True)
+
+
+def _local_path(name: str) -> str:
+    _ensure_local_dir()
+    return os.path.join(LOCAL_DATA_DIR, f"{name}.json")
+
+
+def _download_file(name: str) -> list[dict]:
+    try:
+        from huggingface_hub import hf_hub_download
+        path = hf_hub_download(
+            DASHBOARD_REPO,
+            f"{name}.json",
+            repo_type="dataset",
+        )
+        with open(path) as f:
+            data = json.load(f)
+        with open(_local_path(name), "w") as f:
+            json.dump(data, f, indent=2)
+        return data
+    except Exception:
+        local = _local_path(name)
+        if os.path.exists(local):
+            with open(local) as f:
+                return json.load(f)
+        return []
+
+
+def _upload_file(name: str, data: list[dict]):
+    with open(_local_path(name), "w") as f:
+        json.dump(data, f, indent=2)
+
+    def _do_upload():
+        try:
+            from huggingface_hub import HfApi
+            api = HfApi()
+            try:
+                api.create_repo(DASHBOARD_REPO, repo_type="dataset", exist_ok=True)
+            except Exception:
+                pass
+            with tempfile.NamedTemporaryFile("w", suffix=".json", delete=False) as f:
+                json.dump(data, f, indent=2)
+                tmp = f.name
+            api.upload_file(
+                path_or_fileobj=tmp,
+                path_in_repo=f"{name}.json",
+                repo_id=DASHBOARD_REPO,
+                repo_type="dataset",
+            )
+            os.unlink(tmp)
+        except Exception as e:
+            print(f"[experiments] HF upload failed for {name}: {e}")
+
+    threading.Thread(target=_do_upload, daemon=True).start()
+
+
+def _get(name: str) -> list[dict]:
+    with _lock:
+        if name not in _cache_loaded:
+            _cache[name] = _download_file(name)
+            _cache_loaded.add(name)
+        return list(_cache.get(name, []))
+
+
+def _set(name: str, data: list[dict]):
+    with _lock:
+        _cache[name] = data
+        _cache_loaded.add(name)
+    _upload_file(name, data)
+
+
+def _now() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+# --- Experiments CRUD ---
+
+@bp.route("/", methods=["GET"])
+def list_experiments():
+    experiments = _get("experiments")
+    runs = _get("runs")
+    subs = _get("sub_experiments")
+
+    # Enrich with counts
+    result = []
+    for exp in experiments:
+        exp_runs = [r for r in runs if r.get("experiment_id") == exp["id"]]
+        exp_subs = [s for s in subs if s.get("experiment_id") == exp["id"]]
+        result.append({
+            **exp,
+            "run_count": len(exp_runs),
+            "sub_count": len(exp_subs),
+        })
+    return jsonify(result)
+
+
+@bp.route("/", methods=["POST"])
+def create_experiment():
+    data = request.get_json()
+    name = data.get("name", "").strip()
+    if not name:
+        return jsonify({"error": "name is required"}), 400
+
+    exp_id = data.get("id", name.lower().replace(" ", "_"))
+
+    experiments = _get("experiments")
+    if any(e["id"] == exp_id for e in experiments):
+        return jsonify({"error": f"Experiment '{exp_id}' already exists"}), 409
+
+    experiment = {
+        "id": exp_id,
+        "name": name,
+        "research_project": data.get("research_project", ""),
+        "hypothesis": data.get("hypothesis", {
+            "statement": "",
+            "type": "exploration",
+            "status": "pending",
+            "success_criteria": "",
+        }),
+        "stage": data.get("stage", "idea"),
+        "completeness": data.get("completeness", 0),
+        "models": data.get("models", []),
+        "tasks": data.get("tasks", []),
+        "tags": data.get("tags", []),
+        "hf_repos": data.get("hf_repos", []),
+        "wandb_url": data.get("wandb_url", ""),
+        "notes": data.get("notes", ""),
+        "created": _now(),
+        "updated": _now(),
+    }
+
+    experiments.append(experiment)
+    _set("experiments", experiments)
+    return jsonify(experiment), 201
+
+
+@bp.route("/<exp_id>", methods=["GET"])
+def get_experiment(exp_id):
+    experiments = _get("experiments")
+    exp = next((e for e in experiments if e["id"] == exp_id), None)
+    if not exp:
+        return jsonify({"error": "not found"}), 404
+
+    runs = [r for r in _get("runs") if r.get("experiment_id") == exp_id]
+    subs = [s for s in _get("sub_experiments") if s.get("experiment_id") == exp_id]
+
+    return jsonify({**exp, "runs": runs, "sub_experiments": subs})
+
+
+@bp.route("/<exp_id>", methods=["PUT"])
+def update_experiment(exp_id):
+    data = request.get_json()
+    experiments = _get("experiments")
+
+    for exp in experiments:
+        if exp["id"] == exp_id:
+            for key in ["name", "research_project", "hypothesis", "stage",
+                        "completeness", "models", "tasks", "tags", "hf_repos",
+                        "wandb_url", "notes"]:
+                if key in data:
+                    exp[key] = data[key]
+            exp["updated"] = _now()
+            _set("experiments", experiments)
+            return jsonify(exp)
+
+    return jsonify({"error": "not found"}), 404
+
+
+@bp.route("/<exp_id>", methods=["DELETE"])
+def delete_experiment(exp_id):
+    experiments = _get("experiments")
+    experiments = [e for e in experiments if e["id"] != exp_id]
+    _set("experiments", experiments)
+
+    # Also delete associated runs and subs
+    runs = [r for r in _get("runs") if r.get("experiment_id") != exp_id]
+    _set("runs", runs)
+    subs = [s for s in _get("sub_experiments") if s.get("experiment_id") != exp_id]
+    _set("sub_experiments", subs)
+
+    return jsonify({"status": "ok"})
+
+
+# --- Run records ---
+
+@bp.route("/<exp_id>/runs", methods=["POST"])
+def create_run(exp_id):
+    experiments = _get("experiments")
+    if not any(e["id"] == exp_id for e in experiments):
+        return jsonify({"error": "experiment not found"}), 404
+
+    data = request.get_json()
+    run = {
+        "id": data.get("id", f"run_{uuid.uuid4().hex[:8]}"),
+        "experiment_id": exp_id,
+        "condition": data.get("condition", ""),
+        "model": data.get("model", ""),
+        "cluster": data.get("cluster", ""),
+        "status": data.get("status", "completed"),
+        "hf_dataset": data.get("hf_dataset", ""),
+        "metrics": data.get("metrics", {}),
+        "timestamp": data.get("timestamp", _now()),
+        "notes": data.get("notes", ""),
+    }
+
+    runs = _get("runs")
+    runs.append(run)
+    _set("runs", runs)
+
+    # Touch experiment updated timestamp
+    for exp in experiments:
+        if exp["id"] == exp_id:
+            exp["updated"] = _now()
+    _set("experiments", experiments)
+
+    return jsonify(run), 201
+
+
+@bp.route("/<exp_id>/runs/<run_id>", methods=["PUT"])
+def update_run(exp_id, run_id):
+    data = request.get_json()
+    runs = _get("runs")
+
+    for run in runs:
+        if run["id"] == run_id and run["experiment_id"] == exp_id:
+            for key in ["condition", "model", "cluster", "status",
+                        "hf_dataset", "metrics", "notes"]:
+                if key in data:
+                    run[key] = data[key]
+            _set("runs", runs)
+            return jsonify(run)
+
+    return jsonify({"error": "not found"}), 404
+
+
+@bp.route("/<exp_id>/runs/<run_id>", methods=["DELETE"])
+def delete_run(exp_id, run_id):
+    runs = _get("runs")
+    runs = [r for r in runs if not (r["id"] == run_id and r["experiment_id"] == exp_id)]
+    _set("runs", runs)
+    return jsonify({"status": "ok"})
+
+
+# --- Sub-experiments ---
+
+@bp.route("/<exp_id>/subs", methods=["POST"])
+def create_sub(exp_id):
+    experiments = _get("experiments")
+    if not any(e["id"] == exp_id for e in experiments):
+        return jsonify({"error": "experiment not found"}), 404
+
+    data = request.get_json()
+    name = data.get("name", "").strip()
+    if not name:
+        return jsonify({"error": "name is required"}), 400
+
+    sub_id = data.get("id", f"{exp_id}__{name.lower().replace(' ', '_')}")
+
+    sub = {
+        "id": sub_id,
+        "experiment_id": exp_id,
+        "name": name,
+        "hypothesis": data.get("hypothesis", ""),
+        "status": data.get("status", "active"),
+        "content_md": data.get("content_md", ""),
+        "hf_repos": data.get("hf_repos", []),
+        "created": _now(),
+        "updated": _now(),
+    }
+
+    subs = _get("sub_experiments")
+    subs.append(sub)
+    _set("sub_experiments", subs)
+
+    # Touch experiment updated timestamp
+    for exp in experiments:
+        if exp["id"] == exp_id:
+            exp["updated"] = _now()
+    _set("experiments", experiments)
+
+    return jsonify(sub), 201
+
+
+@bp.route("/<exp_id>/subs/<sub_id>", methods=["PUT"])
+def update_sub(exp_id, sub_id):
+    data = request.get_json()
+    subs = _get("sub_experiments")
+
+    for sub in subs:
+        if sub["id"] == sub_id and sub["experiment_id"] == exp_id:
+            for key in ["name", "hypothesis", "status", "content_md", "hf_repos"]:
+                if key in data:
+                    sub[key] = data[key]
+            sub["updated"] = _now()
+            _set("sub_experiments", subs)
+            return jsonify(sub)
+
+    return jsonify({"error": "not found"}), 404
+
+
+@bp.route("/<exp_id>/subs/<sub_id>", methods=["DELETE"])
+def delete_sub(exp_id, sub_id):
+    subs = _get("sub_experiments")
+    subs = [s for s in subs if not (s["id"] == sub_id and s["experiment_id"] == exp_id)]
+    _set("sub_experiments", subs)
+    return jsonify({"status": "ok"})
+
+
+# --- Sync & Import ---
+
+@bp.route("/sync", methods=["POST"])
+def sync():
+    with _lock:
+        _cache.clear()
+        _cache_loaded.clear()
+    for name in FILES:
+        _get(name)
+    return jsonify({"status": "ok"})
+
+
+@bp.route("/import", methods=["POST"])
+def import_experiments():
+    """Bulk import from experiment.yaml format (as produced by exp-runner)."""
+    data = request.get_json()
+    items = data if isinstance(data, list) else [data]
+    imported = []
+
+    experiments = _get("experiments")
+    runs = _get("runs")
+    subs = _get("sub_experiments")
+    existing_ids = {e["id"] for e in experiments}
+
+    for item in items:
+        exp_id = item.get("name", "").lower().replace(" ", "_").replace("-", "_")
+        if not exp_id:
+            continue
+
+        hypothesis = item.get("hypothesis", {})
+        models = item.get("models", [])
+        model_names = [m.get("id", "") if isinstance(m, dict) else str(m) for m in models]
+
+        if exp_id not in existing_ids:
+            experiment = {
+                "id": exp_id,
+                "name": item.get("name", exp_id),
+                "research_project": item.get("research_project", ""),
+                "hypothesis": {
+                    "statement": hypothesis.get("statement", "") if isinstance(hypothesis, dict) else str(hypothesis),
+                    "type": hypothesis.get("type", "exploration") if isinstance(hypothesis, dict) else "exploration",
+                    "status": hypothesis.get("status", "pending") if isinstance(hypothesis, dict) else "pending",
+                    "success_criteria": hypothesis.get("success_criteria", "") if isinstance(hypothesis, dict) else "",
+                },
+                "stage": "active",
+                "completeness": 0,
+                "models": model_names,
+                "tasks": [],
+                "tags": item.get("observability", {}).get("tags", []) if isinstance(item.get("observability"), dict) else [],
+                "hf_repos": [],
+                "wandb_url": "",
+                "notes": "",
+                "created": item.get("created", _now()),
+                "updated": _now(),
+            }
+            experiments.append(experiment)
+            existing_ids.add(exp_id)
+
+        # Import runs
+        for run_data in item.get("runs", []):
+            run_id = run_data.get("run_id", f"run_{uuid.uuid4().hex[:8]}")
+            if any(r["id"] == run_id and r["experiment_id"] == exp_id for r in runs):
+                continue
+            run = {
+                "id": run_id,
+                "experiment_id": exp_id,
+                "condition": run_data.get("condition", ""),
+                "model": run_data.get("model", ""),
+                "cluster": run_data.get("cluster", ""),
+                "status": run_data.get("status", "completed"),
+                "hf_dataset": run_data.get("hf_dataset", ""),
+                "metrics": run_data.get("metrics", {}),
+                "timestamp": run_data.get("timestamp", _now()),
+                "notes": run_data.get("notes", ""),
+            }
+            runs.append(run)
+
+            # Add HF repo to experiment if present
+            if run.get("hf_dataset"):
+                for exp in experiments:
+                    if exp["id"] == exp_id:
+                        existing_repos = {r["repo"] for r in exp.get("hf_repos", [])}
+                        if run["hf_dataset"] not in existing_repos:
+                            exp.setdefault("hf_repos", []).append({
+                                "repo": run["hf_dataset"],
+                                "description": f"{run['condition']} - {run['model']}",
+                                "date": run["timestamp"][:10] if run["timestamp"] else "",
+                            })
+
+        imported.append(exp_id)
+
+    _set("experiments", experiments)
+    _set("runs", runs)
+    _set("sub_experiments", subs)
+
+    return jsonify({"imported": imported, "count": len(imported)})

backend/app.py

@@ -6,7 +6,7 @@ def create_app():
     app = Flask(__name__, static_folder="../frontend/dist", static_url_path="/")
     CORS(app)
 
-    from backend.api import model_datasets, arena_datasets, rlm_datasets, rlm_eval_datasets, harbor_datasets, adaevolve_datasets, presets
+    from backend.api import model_datasets, arena_datasets, rlm_datasets, rlm_eval_datasets, harbor_datasets, adaevolve_datasets, presets, experiments
     app.register_blueprint(model_datasets.bp)
     app.register_blueprint(arena_datasets.bp)
     app.register_blueprint(rlm_datasets.bp)
@@ -14,6 +14,7 @@ def create_app():
     app.register_blueprint(harbor_datasets.bp)
     app.register_blueprint(adaevolve_datasets.bp)
     app.register_blueprint(presets.bp)
+    app.register_blueprint(experiments.bp)
 
     @app.route("/api/health")
     def health():

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 `reasoning-degeneration-dev/RESEARCH_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/src/App.tsx

@@ -1,47 +1,44 @@
 import { useState, lazy, Suspense } from "react";
 
-const ModelApp = lazy(() => import("./model/ModelApp"));
-const ArenaApp = lazy(() => import("./arena/ArenaApp"));
-const RlmEvalApp = lazy(() => import("./rlm-eval/RlmEvalApp"));
-const RlmApp = lazy(() => import("./rlm/RlmApp"));
-const HarborApp = lazy(() => import("./harbor/HarborApp"));
-const AdaevolveApp = lazy(() => import("./adaevolve/AdaevolveApp"));
+const VisualizerApp = lazy(() => import("./visualizer/VisualizerApp"));
+const ExperimentsApp = lazy(() => import("./experiments/ExperimentsApp"));
 
-type TabId = "model" | "arena" | "rlm-eval" | "rlm" | "harbor" | "adaevolve";
+type PageId = "experiments" | "visualizer";
 
-const TABS: { id: TabId; label: string; color: string; activeClass: string }[] = [
-  { id: "model", label: "Model Trace", color: "blue", activeClass: "border-blue-500 text-blue-400" },
-  { id: "arena", label: "Arena", color: "purple", activeClass: "border-purple-500 text-purple-400" },
-  { id: "rlm-eval", label: "RLM", color: "emerald", activeClass: "border-emerald-500 text-emerald-400" },
-  { id: "rlm", label: "RLM+GEPA", color: "orange", activeClass: "border-orange-500 text-orange-400" },
-  { id: "harbor", label: "Harbor", color: "teal", activeClass: "border-teal-500 text-teal-400" },
-  { id: "adaevolve", label: "AdaEvolve", color: "rose", activeClass: "border-rose-500 text-rose-400" },
+const PAGES: { id: PageId; label: string }[] = [
+  { id: "experiments", label: "Experiments" },
+  { id: "visualizer", label: "Visualizer" },
 ];
 
 export default function App() {
-  const [activeTab, setActiveTab] = useState<TabId>("model");
+  const [activePage, setActivePage] = useState<PageId>("experiments");
 
   return (
     <div className="h-screen flex flex-col bg-gray-950 text-gray-100">
-      {/* Tab bar */}
-      <div className="flex items-center border-b border-gray-800 bg-gray-900 px-2 shrink-0">
-        {TABS.map((tab) => (
+      {/* 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={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={`px-5 py-2.5 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === tab.id
-                ? tab.activeClass
+            key={page.id}
+            onClick={() => setActivePage(page.id)}
+            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"
             }`}
           >
-            {tab.label}
+            {page.label}
           </button>
         ))}
-        <div className="ml-auto text-xs text-gray-600 px-3">Aggregate Trace Visualizer</div>
+        <div className="ml-auto text-xs text-gray-600 px-3">
+          reasoning-degeneration-dev
+        </div>
       </div>
 
-      {/* Active visualizer */}
+      {/* Active page */}
       <div className="flex-1 overflow-hidden">
         <Suspense
           fallback={
@@ -50,36 +47,8 @@ export default function App() {
             </div>
           }
         >
-          {activeTab === "model" && (
-            <div className="theme-model h-full">
-              <ModelApp />
-            </div>
-          )}
-          {activeTab === "arena" && (
-            <div className="theme-arena h-full">
-              <ArenaApp />
-            </div>
-          )}
-          {activeTab === "rlm-eval" && (
-            <div className="theme-rlm-eval h-full">
-              <RlmEvalApp />
-            </div>
-          )}
-          {activeTab === "rlm" && (
-            <div className="theme-rlm h-full">
-              <RlmApp />
-            </div>
-          )}
-          {activeTab === "harbor" && (
-            <div className="theme-harbor h-full">
-              <HarborApp />
-            </div>
-          )}
-          {activeTab === "adaevolve" && (
-            <div className="theme-adaevolve h-full">
-              <AdaevolveApp />
-            </div>
-          )}
+          {activePage === "experiments" && <ExperimentsApp />}
+          {activePage === "visualizer" && <VisualizerApp />}
         </Suspense>
       </div>
     </div>

frontend/src/experiments/ExperimentsApp.tsx

@@ -0,0 +1,60 @@
+import { useExperimentsState } from "./store";
+import ExperimentList from "./components/ExperimentList";
+import ExperimentDetail from "./components/ExperimentDetail";
+import SubExperimentView from "./components/SubExperimentView";
+
+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 === "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}
+        onSelectSub={(subId) => state.navigateToSub(state.view.kind === "detail" ? state.view.expId : "", subId)}
+        onRefresh={state.refreshDetail}
+      />
+    );
+  }
+
+  return (
+    <ExperimentList
+      experiments={state.experiments}
+      onSelect={state.navigateToDetail}
+      onRefresh={state.loadExperiments}
+    />
+  );
+}

frontend/src/experiments/api.ts

@@ -0,0 +1,83 @@
+import type { Experiment, ExperimentDetail, RunRecord, SubExperiment } 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" });
+  },
+
+  createRun(expId: string, data: Partial<RunRecord>) {
+    return fetchJSON<RunRecord>(`${BASE}/${expId}/runs`, {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+  },
+
+  updateRun(expId: string, runId: string, data: Partial<RunRecord>) {
+    return fetchJSON<RunRecord>(`${BASE}/${expId}/runs/${runId}`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+    });
+  },
+
+  deleteRun(expId: string, runId: string) {
+    return fetchJSON<{ status: string }>(`${BASE}/${expId}/runs/${runId}`, { 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" });
+  },
+
+  sync() {
+    return fetchJSON<{ status: string }>(`${BASE}/sync`, { method: "POST" });
+  },
+};

frontend/src/experiments/components/ExperimentDetail.tsx

@@ -0,0 +1,480 @@
+import { useState } from "react";
+import type { ExperimentDetail as ExperimentDetailType, RunRecord, HfRepo } from "../types";
+import { experimentsApi } from "../api";
+
+const STATUS_COLORS: Record<string, string> = {
+  pending: "bg-gray-600",
+  active: "bg-yellow-600",
+  exploring: "bg-blue-600",
+  supported: "bg-green-600",
+  invalidated: "bg-red-600",
+  inconclusive: "bg-orange-600",
+};
+
+const RUN_STATUS_COLORS: Record<string, string> = {
+  running: "text-yellow-400",
+  completed: "text-green-400",
+  failed: "text-red-400",
+};
+
+type Tab = "overview" | "runs" | "datasets" | "subs";
+
+interface Props {
+  experiment: ExperimentDetailType;
+  onBack: () => void;
+  onSelectSub: (subId: string) => void;
+  onRefresh: () => void;
+}
+
+export default function ExperimentDetail({ experiment, onBack, onSelectSub, onRefresh }: Props) {
+  const [tab, setTab] = useState<Tab>("overview");
+  const [editing, setEditing] = useState(false);
+  const [notes, setNotes] = useState(experiment.notes || "");
+  const [hypothesisStatus, setHypothesisStatus] = useState<string>(experiment.hypothesis?.status || "pending");
+  const [saving, setSaving] = useState(false);
+
+  // Add run form
+  const [showAddRun, setShowAddRun] = useState(false);
+  const [runForm, setRunForm] = useState({ condition: "", model: "", cluster: "", hf_dataset: "", notes: "" });
+
+  // Add dataset form
+  const [showAddDataset, setShowAddDataset] = useState(false);
+  const [datasetForm, setDatasetForm] = useState({ repo: "", description: "" });
+
+  // Add sub form
+  const [showAddSub, setShowAddSub] = useState(false);
+  const [subForm, setSubForm] = useState({ name: "", hypothesis: "" });
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await experimentsApi.update(experiment.id, {
+        notes,
+        hypothesis: { ...experiment.hypothesis, status: hypothesisStatus as any },
+      });
+      setEditing(false);
+      onRefresh();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAddRun = async () => {
+    if (!runForm.condition) return;
+    await experimentsApi.createRun(experiment.id, runForm);
+    setRunForm({ condition: "", model: "", cluster: "", hf_dataset: "", notes: "" });
+    setShowAddRun(false);
+    onRefresh();
+  };
+
+  const handleAddDataset = async () => {
+    if (!datasetForm.repo) return;
+    const hf_repos = [...(experiment.hf_repos || []), { ...datasetForm, date: new Date().toISOString().slice(0, 10) }];
+    await experimentsApi.update(experiment.id, { hf_repos } as any);
+    setDatasetForm({ repo: "", description: "" });
+    setShowAddDataset(false);
+    onRefresh();
+  };
+
+  const handleAddSub = async () => {
+    if (!subForm.name) return;
+    await experimentsApi.createSub(experiment.id, subForm);
+    setSubForm({ name: "", hypothesis: "" });
+    setShowAddSub(false);
+    onRefresh();
+  };
+
+  const handleDeleteRun = async (runId: string) => {
+    await experimentsApi.deleteRun(experiment.id, runId);
+    onRefresh();
+  };
+
+  const TABS: { id: Tab; label: string; count?: number }[] = [
+    { id: "overview", label: "Overview" },
+    { id: "runs", label: "Runs", count: experiment.runs?.length || 0 },
+    { id: "datasets", label: "Datasets", count: experiment.hf_repos?.length || 0 },
+    { id: "subs", label: "Sub-experiments", count: experiment.sub_experiments?.length || 0 },
+  ];
+
+  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 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>
+            <h1 className="text-lg font-semibold text-gray-200">{experiment.name}</h1>
+            {experiment.hypothesis?.statement && (
+              <p className="text-sm text-gray-400 mt-1 max-w-2xl">
+                {experiment.hypothesis.statement}
+              </p>
+            )}
+            <div className="flex items-center gap-3 mt-2">
+              {editing ? (
+                <select
+                  value={hypothesisStatus}
+                  onChange={(e) => setHypothesisStatus(e.target.value)}
+                  className="bg-gray-800 text-gray-300 text-xs rounded px-2 py-1 border border-gray-700"
+                >
+                  <option value="pending">pending</option>
+                  <option value="active">active</option>
+                  <option value="exploring">exploring</option>
+                  <option value="supported">supported</option>
+                  <option value="invalidated">invalidated</option>
+                  <option value="inconclusive">inconclusive</option>
+                </select>
+              ) : (
+                <span className={`text-xs px-2 py-0.5 rounded-full text-white ${STATUS_COLORS[experiment.hypothesis?.status] || STATUS_COLORS.pending}`}>
+                  {experiment.hypothesis?.status || "pending"}
+                </span>
+              )}
+              {experiment.hypothesis?.type && (
+                <span className="text-xs text-gray-500">{experiment.hypothesis.type}</span>
+              )}
+              {experiment.hypothesis?.success_criteria && (
+                <span className="text-xs text-gray-500 italic">
+                  Goal: {experiment.hypothesis.success_criteria}
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="flex gap-2">
+            {editing ? (
+              <>
+                <button
+                  onClick={() => setEditing(false)}
+                  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>
+
+        {/* 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="flex-1 overflow-y-auto p-6">
+        {tab === "overview" && (
+          <div className="max-w-3xl space-y-4">
+            {/* Meta info */}
+            <div className="flex gap-6 text-sm text-gray-400">
+              {experiment.research_project && (
+                <span>Project: <span className="text-gray-300">{experiment.research_project}</span></span>
+              )}
+              {experiment.wandb_url && (
+                <a href={experiment.wandb_url} target="_blank" rel="noopener noreferrer" className="text-cyan-400 hover:text-cyan-300">
+                  W&B Dashboard
+                </a>
+              )}
+              <span>Stage: <span className="text-gray-300">{experiment.stage}</span></span>
+            </div>
+
+            {/* Models & Tasks */}
+            {((experiment.models || []).length > 0 || (experiment.tasks || []).length > 0) && (
+              <div className="flex gap-6">
+                {(experiment.models || []).length > 0 && (
+                  <div>
+                    <span className="text-xs text-gray-500 uppercase tracking-wide">Models</span>
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {experiment.models.map((m) => (
+                        <span key={m} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded">{m}</span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {(experiment.tasks || []).length > 0 && (
+                  <div>
+                    <span className="text-xs text-gray-500 uppercase tracking-wide">Tasks</span>
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {experiment.tasks.map((t) => (
+                        <span key={t} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded">{t}</span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Tags */}
+            {(experiment.tags || []).length > 0 && (
+              <div>
+                <span className="text-xs text-gray-500 uppercase tracking-wide">Tags</span>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {experiment.tags.map((tag) => (
+                    <span key={tag} className="text-xs bg-cyan-900/30 text-cyan-400 px-2 py-0.5 rounded">{tag}</span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Notes */}
+            <div>
+              <span className="text-xs text-gray-500 uppercase tracking-wide">Notes / Key Findings</span>
+              {editing ? (
+                <textarea
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  className="w-full mt-2 bg-gray-900 text-gray-200 text-sm rounded px-3 py-2 border border-gray-700 focus:border-cyan-500 outline-none resize-y min-h-[200px] font-mono"
+                  rows={10}
+                />
+              ) : (
+                <div className="mt-2 text-sm text-gray-300 whitespace-pre-wrap bg-gray-900 rounded p-4 min-h-[100px]">
+                  {experiment.notes || <span className="text-gray-600 italic">No notes yet. Click Edit to add findings.</span>}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {tab === "runs" && (
+          <div>
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-sm font-medium text-gray-300">Run History</h2>
+              <button
+                onClick={() => setShowAddRun(true)}
+                className="bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-medium px-2.5 py-1 rounded transition-colors"
+              >
+                + Add Run
+              </button>
+            </div>
+
+            {showAddRun && (
+              <div className="mb-4 p-3 bg-gray-800 rounded-lg border border-gray-700">
+                <div className="grid grid-cols-2 gap-2">
+                  <input placeholder="Condition" value={runForm.condition} onChange={(e) => setRunForm({ ...runForm, condition: e.target.value })}
+                    className="bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none" />
+                  <input placeholder="Model" value={runForm.model} onChange={(e) => setRunForm({ ...runForm, model: e.target.value })}
+                    className="bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none" />
+                  <input placeholder="Cluster" value={runForm.cluster} onChange={(e) => setRunForm({ ...runForm, cluster: e.target.value })}
+                    className="bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none" />
+                  <input placeholder="HF Dataset" value={runForm.hf_dataset} onChange={(e) => setRunForm({ ...runForm, hf_dataset: e.target.value })}
+                    className="bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none" />
+                </div>
+                <input placeholder="Notes" value={runForm.notes} onChange={(e) => setRunForm({ ...runForm, notes: e.target.value })}
+                  className="w-full mt-2 bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none" />
+                <div className="flex gap-2 justify-end mt-2">
+                  <button onClick={() => setShowAddRun(false)} className="text-gray-400 text-xs px-2 py-1">Cancel</button>
+                  <button onClick={handleAddRun} className="bg-cyan-600 text-white text-xs px-2.5 py-1 rounded">Add</button>
+                </div>
+              </div>
+            )}
+
+            {(experiment.runs || []).length === 0 ? (
+              <p className="text-sm text-gray-500">No runs recorded yet.</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">Condition</th>
+                      <th className="text-left py-2 px-2">Model</th>
+                      <th className="text-left py-2 px-2">Cluster</th>
+                      <th className="text-left py-2 px-2">Status</th>
+                      <th className="text-left py-2 px-2">Metrics</th>
+                      <th className="text-left py-2 px-2">HF Dataset</th>
+                      <th className="text-left py-2 px-2">Date</th>
+                      <th className="text-left py-2 px-2"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {[...experiment.runs].reverse().map((run) => (
+                      <tr key={run.id} className="border-b border-gray-800/50 hover:bg-gray-900/50">
+                        <td className="py-2 px-2 text-gray-300">{run.condition || "-"}</td>
+                        <td className="py-2 px-2 text-gray-400">{run.model || "-"}</td>
+                        <td className="py-2 px-2 text-gray-400">{run.cluster || "-"}</td>
+                        <td className={`py-2 px-2 ${RUN_STATUS_COLORS[run.status] || "text-gray-400"}`}>{run.status}</td>
+                        <td className="py-2 px-2 text-gray-400 font-mono text-xs">
+                          {Object.keys(run.metrics || {}).length > 0
+                            ? Object.entries(run.metrics).map(([k, v]) => `${k}: ${typeof v === "number" ? v.toFixed(3) : v}`).join(", ")
+                            : "-"}
+                        </td>
+                        <td className="py-2 px-2">
+                          {run.hf_dataset ? (
+                            <a
+                              href={`https://huggingface.co/datasets/${run.hf_dataset}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-cyan-400 hover:text-cyan-300 text-xs"
+                            >
+                              {run.hf_dataset.split("/").pop()}
+                            </a>
+                          ) : "-"}
+                        </td>
+                        <td className="py-2 px-2 text-gray-500 text-xs">
+                          {run.timestamp ? new Date(run.timestamp).toLocaleDateString() : "-"}
+                        </td>
+                        <td className="py-2 px-2">
+                          <button
+                            onClick={() => handleDeleteRun(run.id)}
+                            className="text-gray-600 hover:text-red-400 text-xs transition-colors"
+                          >
+                            &times;
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        )}
+
+        {tab === "datasets" && (
+          <div>
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-sm font-medium text-gray-300">HuggingFace Datasets</h2>
+              <button
+                onClick={() => setShowAddDataset(true)}
+                className="bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-medium px-2.5 py-1 rounded transition-colors"
+              >
+                + Add Dataset
+              </button>
+            </div>
+
+            {showAddDataset && (
+              <div className="mb-4 p-3 bg-gray-800 rounded-lg border border-gray-700">
+                <input placeholder="org/dataset-name" value={datasetForm.repo} onChange={(e) => setDatasetForm({ ...datasetForm, repo: e.target.value })}
+                  className="w-full bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none mb-2" />
+                <input placeholder="Description" value={datasetForm.description} onChange={(e) => setDatasetForm({ ...datasetForm, description: e.target.value })}
+                  className="w-full bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none" />
+                <div className="flex gap-2 justify-end mt-2">
+                  <button onClick={() => setShowAddDataset(false)} className="text-gray-400 text-xs px-2 py-1">Cancel</button>
+                  <button onClick={handleAddDataset} className="bg-cyan-600 text-white text-xs px-2.5 py-1 rounded">Add</button>
+                </div>
+              </div>
+            )}
+
+            {(experiment.hf_repos || []).length === 0 ? (
+              <p className="text-sm text-gray-500">No datasets linked yet.</p>
+            ) : (
+              <div className="grid gap-2">
+                {experiment.hf_repos.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>
+        )}
+
+        {tab === "subs" && (
+          <div>
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-sm font-medium text-gray-300">Sub-experiments</h2>
+              <button
+                onClick={() => setShowAddSub(true)}
+                className="bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-medium px-2.5 py-1 rounded transition-colors"
+              >
+                + Add Sub-experiment
+              </button>
+            </div>
+
+            {showAddSub && (
+              <div className="mb-4 p-3 bg-gray-800 rounded-lg border border-gray-700">
+                <input placeholder="Sub-experiment name" value={subForm.name} onChange={(e) => setSubForm({ ...subForm, name: e.target.value })}
+                  className="w-full bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none mb-2" autoFocus />
+                <input placeholder="Hypothesis" value={subForm.hypothesis} onChange={(e) => setSubForm({ ...subForm, hypothesis: e.target.value })}
+                  className="w-full bg-gray-900 text-gray-200 text-sm rounded px-2 py-1.5 border border-gray-700 outline-none" />
+                <div className="flex gap-2 justify-end mt-2">
+                  <button onClick={() => setShowAddSub(false)} className="text-gray-400 text-xs px-2 py-1">Cancel</button>
+                  <button onClick={handleAddSub} className="bg-cyan-600 text-white text-xs px-2.5 py-1 rounded">Add</button>
+                </div>
+              </div>
+            )}
+
+            {(experiment.sub_experiments || []).length === 0 ? (
+              <p className="text-sm text-gray-500">No sub-experiments yet.</p>
+            ) : (
+              <div className="grid gap-2">
+                {experiment.sub_experiments.map((sub) => (
+                  <button
+                    key={sub.id}
+                    onClick={() => onSelectSub(sub.id)}
+                    className="w-full text-left bg-gray-900 hover:bg-gray-800 border border-gray-800 hover:border-gray-700 rounded p-3 transition-colors"
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <span className="text-sm text-gray-200">{sub.name}</span>
+                        {sub.hypothesis && (
+                          <p className="text-xs text-gray-500 mt-0.5">{sub.hypothesis}</p>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className={`text-xs px-2 py-0.5 rounded-full text-white ${
+                          sub.status === "concluded" ? "bg-green-600" :
+                          sub.status === "active" ? "bg-yellow-600" : "bg-gray-600"
+                        }`}>
+                          {sub.status}
+                        </span>
+                        <span className="text-xs text-gray-600">
+                          {sub.updated ? new Date(sub.updated).toLocaleDateString() : ""}
+                        </span>
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/experiments/components/ExperimentList.tsx

@@ -0,0 +1,249 @@
+import { useState } from "react";
+import type { Experiment, Stage } from "../types";
+import { experimentsApi } from "../api";
+
+const STAGE_COLORS: Record<Stage, string> = {
+  idea: "bg-gray-600",
+  planned: "bg-blue-600",
+  active: "bg-yellow-600",
+  concluded: "bg-green-600",
+  inconclusive: "bg-orange-600",
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  pending: "text-gray-400",
+  active: "text-yellow-400",
+  exploring: "text-blue-400",
+  supported: "text-green-400",
+  invalidated: "text-red-400",
+  inconclusive: "text-orange-400",
+};
+
+type SortKey = "updated" | "name" | "stage" | "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 [filterStage, setFilterStage] = useState<Stage | "all">("all");
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newHypothesis, setNewHypothesis] = useState("");
+  const [creating, setCreating] = useState(false);
+
+  const filtered = experiments.filter(
+    (e) => filterStage === "all" || e.stage === filterStage
+  );
+
+  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 "stage":
+        return a.stage.localeCompare(b.stage);
+      case "completeness":
+        return (b.completeness || 0) - (a.completeness || 0);
+      default:
+        return 0;
+    }
+  });
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    setCreating(true);
+    try {
+      await experimentsApi.create({
+        name: newName.trim(),
+        hypothesis: {
+          statement: newHypothesis.trim(),
+          type: "exploration",
+          status: "pending",
+          success_criteria: "",
+        },
+      });
+      setNewName("");
+      setNewHypothesis("");
+      setShowCreate(false);
+      onRefresh();
+    } catch (e) {
+      // TODO: show error
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  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={filterStage}
+            onChange={(e) => setFilterStage(e.target.value as Stage | "all")}
+            className="bg-gray-800 text-gray-300 text-sm rounded px-2 py-1.5 border border-gray-700"
+          >
+            <option value="all">All stages</option>
+            <option value="idea">Idea</option>
+            <option value="planned">Planned</option>
+            <option value="active">Active</option>
+            <option value="concluded">Concluded</option>
+            <option value="inconclusive">Inconclusive</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="stage">Stage</option>
+            <option value="completeness">Completeness</option>
+          </select>
+
+          <button
+            onClick={() => setShowCreate(true)}
+            className="bg-cyan-600 hover:bg-cyan-500 text-white text-sm font-medium px-3 py-1.5 rounded transition-colors"
+          >
+            + New Experiment
+          </button>
+        </div>
+      </div>
+
+      {/* Create modal */}
+      {showCreate && (
+        <div className="mx-6 mt-4 p-4 bg-gray-800 rounded-lg border border-gray-700">
+          <div className="flex flex-col gap-3">
+            <input
+              type="text"
+              placeholder="Experiment name"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              className="bg-gray-900 text-gray-200 text-sm rounded px-3 py-2 border border-gray-700 focus:border-cyan-500 outline-none"
+              autoFocus
+              onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+            />
+            <textarea
+              placeholder="Hypothesis statement (optional)"
+              value={newHypothesis}
+              onChange={(e) => setNewHypothesis(e.target.value)}
+              className="bg-gray-900 text-gray-200 text-sm rounded px-3 py-2 border border-gray-700 focus:border-cyan-500 outline-none resize-none"
+              rows={2}
+            />
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setShowCreate(false)}
+                className="text-gray-400 hover:text-gray-200 text-sm px-3 py-1.5 rounded transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={creating || !newName.trim()}
+                className="bg-cyan-600 hover:bg-cyan-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium px-3 py-1.5 rounded transition-colors"
+              >
+                {creating ? "Creating..." : "Create"}
+              </button>
+            </div>
+          </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 yet</p>
+            <p className="text-sm">Create one to get started</p>
+          </div>
+        ) : (
+          <div className="grid gap-3">
+            {sorted.map((exp) => (
+              <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">
+                      <span className={`text-xs px-2 py-0.5 rounded-full text-white ${STAGE_COLORS[exp.stage] || STAGE_COLORS.idea}`}>
+                        {exp.stage}
+                      </span>
+                      <h3 className="text-sm font-medium text-gray-200 truncate">
+                        {exp.name}
+                      </h3>
+                    </div>
+                    {exp.hypothesis?.statement && (
+                      <p className="text-xs text-gray-400 mt-1 line-clamp-2">
+                        {exp.hypothesis.statement}
+                      </p>
+                    )}
+                    <div className="flex items-center gap-3 mt-2">
+                      {exp.hypothesis?.status && (
+                        <span className={`text-xs ${STATUS_COLORS[exp.hypothesis.status] || "text-gray-400"}`}>
+                          {exp.hypothesis.status}
+                        </span>
+                      )}
+                      {(exp.models || []).length > 0 && (
+                        <span className="text-xs text-gray-500">
+                          {exp.models.slice(0, 3).join(", ")}
+                          {exp.models.length > 3 && ` +${exp.models.length - 3}`}
+                        </span>
+                      )}
+                      {(exp.tags || []).length > 0 && (
+                        <div className="flex gap-1">
+                          {exp.tags.slice(0, 3).map((tag) => (
+                            <span
+                              key={tag}
+                              className="text-xs bg-gray-800 text-gray-400 px-1.5 py-0.5 rounded"
+                            >
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex flex-col items-end gap-1 ml-4 shrink-0">
+                    {/* Completeness dots */}
+                    <div className="flex gap-0.5">
+                      {[0, 1, 2, 3, 4].map((i) => (
+                        <div
+                          key={i}
+                          className={`w-1.5 h-1.5 rounded-full ${
+                            i < (exp.completeness || 0) ? "bg-cyan-500" : "bg-gray-700"
+                          }`}
+                        />
+                      ))}
+                    </div>
+                    <span className="text-xs text-gray-500">
+                      {exp.run_count || 0} runs
+                    </span>
+                    {exp.sub_count ? (
+                      <span className="text-xs text-gray-500">
+                        {exp.sub_count} sub-exp
+                      </span>
+                    ) : null}
+                    <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/SubExperimentView.tsx

@@ -0,0 +1,149 @@
+import { useState } from "react";
+import type { SubExperiment } from "../types";
+import { experimentsApi } from "../api";
+
+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="text-sm text-gray-300 whitespace-pre-wrap bg-gray-900 rounded p-6 min-h-[300px]">
+              {sub.content_md || <span className="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/store.ts

@@ -0,0 +1,91 @@
+import { useState, useCallback, useEffect } from "react";
+import type { Experiment, ExperimentDetail, SubExperiment } from "./types";
+import { experimentsApi } from "./api";
+
+export type View =
+  | { kind: "list" }
+  | { kind: "detail"; expId: string }
+  | { kind: "sub"; expId: string; subId: string };
+
+export function useExperimentsState() {
+  const [experiments, setExperiments] = useState<Experiment[]>([]);
+  const [currentDetail, setCurrentDetail] = useState<ExperimentDetail | null>(null);
+  const [currentSub, setCurrentSub] = useState<SubExperiment | null>(null);
+  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);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadExperiments();
+  }, [loadExperiments]);
+
+  const navigateToList = useCallback(() => {
+    setView({ kind: "list" });
+    setCurrentDetail(null);
+    setCurrentSub(null);
+    loadExperiments();
+  }, [loadExperiments]);
+
+  const navigateToDetail = useCallback(async (expId: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const detail = await experimentsApi.get(expId);
+      setCurrentDetail(detail);
+      setView({ kind: "detail", expId });
+    } 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 => s.id === subId);
+    if (sub) {
+      setCurrentSub(sub);
+      setView({ kind: "sub", expId, subId });
+    }
+  }, [currentDetail]);
+
+  const refreshDetail = useCallback(async () => {
+    if (view.kind === "detail" || view.kind === "sub") {
+      const expId = view.expId;
+      try {
+        const detail = await experimentsApi.get(expId);
+        setCurrentDetail(detail);
+      } catch (e) {
+        // silent refresh failure
+      }
+    }
+  }, [view]);
+
+  return {
+    experiments,
+    currentDetail,
+    currentSub,
+    view,
+    loading,
+    error,
+    setError,
+    navigateToList,
+    navigateToDetail,
+    navigateToSub,
+    refreshDetail,
+    loadExperiments,
+  };
+}

frontend/src/experiments/types.ts

@@ -0,0 +1,63 @@
+export interface HfRepo {
+  repo: string;
+  description: string;
+  date: string;
+}
+
+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;
+  created: string;
+  updated: string;
+  run_count?: number;
+  sub_count?: number;
+}
+
+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 ExperimentDetail extends Experiment {
+  runs: RunRecord[];
+  sub_experiments: SubExperiment[];
+}

frontend/src/visualizer/VisualizerApp.tsx

@@ -0,0 +1,86 @@
+import { useState, lazy, Suspense } from "react";
+
+const ModelApp = lazy(() => import("../model/ModelApp"));
+const ArenaApp = lazy(() => import("../arena/ArenaApp"));
+const RlmEvalApp = lazy(() => import("../rlm-eval/RlmEvalApp"));
+const RlmApp = lazy(() => import("../rlm/RlmApp"));
+const HarborApp = lazy(() => import("../harbor/HarborApp"));
+const AdaevolveApp = lazy(() => import("../adaevolve/AdaevolveApp"));
+
+type TabId = "model" | "arena" | "rlm-eval" | "rlm" | "harbor" | "adaevolve";
+
+const TABS: { id: TabId; label: string; color: string; activeClass: string }[] = [
+  { id: "model", label: "Model Trace", color: "blue", activeClass: "border-blue-500 text-blue-400" },
+  { id: "arena", label: "Arena", color: "purple", activeClass: "border-purple-500 text-purple-400" },
+  { id: "rlm-eval", label: "RLM", color: "emerald", activeClass: "border-emerald-500 text-emerald-400" },
+  { id: "rlm", label: "RLM+GEPA", color: "orange", activeClass: "border-orange-500 text-orange-400" },
+  { id: "harbor", label: "Harbor", color: "teal", activeClass: "border-teal-500 text-teal-400" },
+  { id: "adaevolve", label: "AdaEvolve", color: "rose", activeClass: "border-rose-500 text-rose-400" },
+];
+
+export default function VisualizerApp() {
+  const [activeTab, setActiveTab] = useState<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={() => setActiveTab(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>
+          )}
+          {activeTab === "arena" && (
+            <div className="theme-arena h-full">
+              <ArenaApp />
+            </div>
+          )}
+          {activeTab === "rlm-eval" && (
+            <div className="theme-rlm-eval h-full">
+              <RlmEvalApp />
+            </div>
+          )}
+          {activeTab === "rlm" && (
+            <div className="theme-rlm h-full">
+              <RlmApp />
+            </div>
+          )}
+          {activeTab === "harbor" && (
+            <div className="theme-harbor h-full">
+              <HarborApp />
+            </div>
+          )}
+          {activeTab === "adaevolve" && (
+            <div className="theme-adaevolve h-full">
+              <AdaevolveApp />
+            </div>
+          )}
+        </Suspense>
+      </div>
+    </div>
+  );
+}

frontend/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/arena/arenaapp.tsx","./src/arena/api.ts","./src/arena/store.ts","./src/arena/types.ts","./src/arena/components/episodebar.tsx","./src/arena/components/episodenav.tsx","./src/arena/components/sidebar.tsx","./src/arena/components/transcriptpanel.tsx","./src/arena/utils/tracehighlight.ts","./src/harbor/harborapp.tsx","./src/harbor/api.ts","./src/harbor/store.ts","./src/harbor/types.ts","./src/harbor/components/chatbubble.tsx","./src/harbor/components/infobar.tsx","./src/harbor/components/instancelist.tsx","./src/harbor/components/instancenav.tsx","./src/harbor/components/metricssummary.tsx","./src/harbor/components/sidebar.tsx","./src/harbor/components/stepdetail.tsx","./src/harbor/components/trajectoryview.tsx","./src/model/modelapp.tsx","./src/model/api.ts","./src/model/store.ts","./src/model/types.ts","./src/model/components/infobar.tsx","./src/model/components/questionnav.tsx","./src/model/components/sidebar.tsx","./src/model/components/tracepanel.tsx","./src/model/utils/promptparser.ts","./src/model/utils/tracehighlight.ts","./src/rlm/rlmapp.tsx","./src/rlm/api.ts","./src/rlm/store.ts","./src/rlm/types.ts","./src/rlm/components/breadcrumb.tsx","./src/rlm/components/datasetselector.tsx","./src/rlm/components/gepaiterlevel.tsx","./src/rlm/components/overviewlevel.tsx","./src/rlm/components/panel.tsx","./src/rlm/components/rlmdetaillevel.tsx","./src/rlm/components/sidebar.tsx","./src/rlm-eval/rlmevalapp.tsx","./src/rlm-eval/api.ts","./src/rlm-eval/store.ts","./src/rlm-eval/types.ts","./src/rlm-eval/components/breadcrumb.tsx","./src/rlm-eval/components/datasetselector.tsx","./src/rlm-eval/components/exampledetaillevel.tsx","./src/rlm-eval/components/iterationdetail.tsx","./src/rlm-eval/components/overviewlevel.tsx","./src/rlm-eval/components/panel.tsx","./src/rlm-eval/components/sidebar.tsx"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/adaevolve/adaevolveapp.tsx","./src/adaevolve/api.ts","./src/adaevolve/store.ts","./src/adaevolve/types.ts","./src/arena/arenaapp.tsx","./src/arena/api.ts","./src/arena/store.ts","./src/arena/types.ts","./src/arena/components/episodebar.tsx","./src/arena/components/episodenav.tsx","./src/arena/components/sidebar.tsx","./src/arena/components/transcriptpanel.tsx","./src/arena/utils/tracehighlight.ts","./src/experiments/experimentsapp.tsx","./src/experiments/api.ts","./src/experiments/store.ts","./src/experiments/types.ts","./src/experiments/components/experimentdetail.tsx","./src/experiments/components/experimentlist.tsx","./src/experiments/components/subexperimentview.tsx","./src/harbor/harborapp.tsx","./src/harbor/api.ts","./src/harbor/store.ts","./src/harbor/types.ts","./src/harbor/components/chatbubble.tsx","./src/harbor/components/infobar.tsx","./src/harbor/components/instancelist.tsx","./src/harbor/components/instancenav.tsx","./src/harbor/components/metricssummary.tsx","./src/harbor/components/sidebar.tsx","./src/harbor/components/stepdetail.tsx","./src/harbor/components/trajectoryview.tsx","./src/model/modelapp.tsx","./src/model/api.ts","./src/model/store.ts","./src/model/types.ts","./src/model/components/infobar.tsx","./src/model/components/questionnav.tsx","./src/model/components/sidebar.tsx","./src/model/components/tracepanel.tsx","./src/model/utils/promptparser.ts","./src/model/utils/tracehighlight.ts","./src/rlm/rlmapp.tsx","./src/rlm/api.ts","./src/rlm/store.ts","./src/rlm/types.ts","./src/rlm/components/breadcrumb.tsx","./src/rlm/components/datasetselector.tsx","./src/rlm/components/gepaiterlevel.tsx","./src/rlm/components/overviewlevel.tsx","./src/rlm/components/panel.tsx","./src/rlm/components/rlmdetaillevel.tsx","./src/rlm/components/sidebar.tsx","./src/rlm-eval/rlmevalapp.tsx","./src/rlm-eval/api.ts","./src/rlm-eval/store.ts","./src/rlm-eval/types.ts","./src/rlm-eval/components/breadcrumb.tsx","./src/rlm-eval/components/datasetselector.tsx","./src/rlm-eval/components/exampledetaillevel.tsx","./src/rlm-eval/components/iterationdetail.tsx","./src/rlm-eval/components/overviewlevel.tsx","./src/rlm-eval/components/panel.tsx","./src/rlm-eval/components/sidebar.tsx","./src/visualizer/visualizerapp.tsx"],"version":"5.9.3"}