new tab

backend/api/presets.py

@@ -8,7 +8,7 @@ from flask import Blueprint, request, jsonify
 bp = Blueprint("presets", __name__, url_prefix="/api/presets")
 
 PRESETS_REPO = "reasoning-degeneration-dev/AGG_VIS_PRESETS"
-VALID_TYPES = {"model", "arena", "rlm", "harbor"}
+VALID_TYPES = {"model", "arena", "rlm", "rlm-eval", "harbor"}
 LOCAL_PRESETS_DIR = os.path.join(os.path.dirname(os.path.dirname(__file__)), "presets")
 
 # In-memory cache: vis_type -> list[dict]
@@ -133,7 +133,7 @@ def create_preset(vis_type):
 
     if vis_type == "model":
         preset["column"] = data.get("column", "model_responses")
-    elif vis_type == "rlm":
+    elif vis_type in ("rlm", "rlm-eval"):
         preset["config"] = data.get("config", "rlm_call_traces")
 
     presets = _get_presets(vis_type)

backend/api/rlm_eval_datasets.py

@@ -0,0 +1,247 @@
+import json
+import hashlib
+from flask import Blueprint, request, jsonify
+from datasets import load_dataset
+
+bp = Blueprint("rlm_eval_datasets", __name__, url_prefix="/api/rlm-eval/datasets")
+
+_cache: dict[str, dict] = {}
+
+
+def _make_id(repo: str, config: str, split: str) -> str:
+    key = f"{repo}:{config}:{split}"
+    return hashlib.md5(key.encode()).hexdigest()[:12]
+
+
+def _build_hierarchy(rows: list[dict]) -> dict:
+    """Reconstruct hierarchy from flat rows: examples -> iterations."""
+    examples: dict[int, dict] = {}
+
+    for row in rows:
+        ei = row.get("example_idx", 0)
+        ri = row.get("rlm_iter", 0)
+
+        if ei not in examples:
+            examples[ei] = {
+                "example_idx": ei,
+                "question_text": row.get("question_text", ""),
+                "eval_correct": row.get("eval_correct"),
+                "iterations": {},
+                "total_input_tokens": 0,
+                "total_output_tokens": 0,
+                "total_execution_time": 0.0,
+                "final_answer": None,
+                "final_answer_preview": "",
+            }
+
+        ex = examples[ei]
+
+        # Parse code blocks
+        code_blocks = []
+        cbj = row.get("code_blocks_json", "")
+        if cbj and cbj != "[]":
+            try:
+                code_blocks = json.loads(cbj) if isinstance(cbj, str) else cbj
+            except (json.JSONDecodeError, TypeError):
+                code_blocks = []
+
+        iteration = {
+            "rlm_iter": ri,
+            "prompt": row.get("prompt", ""),
+            "response": row.get("response", ""),
+            "model": row.get("model", ""),
+            "input_tokens": row.get("input_tokens", 0),
+            "output_tokens": row.get("output_tokens", 0),
+            "execution_time": row.get("execution_time", 0.0),
+            "has_code_blocks": row.get("has_code_blocks", False),
+            "code_blocks": code_blocks,
+            "final_answer": row.get("final_answer"),
+            "timestamp": row.get("timestamp", ""),
+        }
+
+        ex["iterations"][ri] = iteration
+        ex["total_input_tokens"] += iteration["input_tokens"] or 0
+        ex["total_output_tokens"] += iteration["output_tokens"] or 0
+        ex["total_execution_time"] += iteration["execution_time"] or 0.0
+
+        if iteration["final_answer"]:
+            ex["final_answer"] = iteration["final_answer"]
+            ex["final_answer_preview"] = (iteration["final_answer"] or "")[:200]
+
+    # Sort and convert dicts to lists
+    result = []
+    for ei_key in sorted(examples.keys()):
+        ex = examples[ei_key]
+        iters_list = []
+        for ri_key in sorted(ex["iterations"].keys()):
+            iters_list.append(ex["iterations"][ri_key])
+        ex["iterations"] = iters_list
+        result.append(ex)
+
+    return {"examples": result}
+
+
+@bp.route("/load", methods=["POST"])
+def load_dataset_endpoint():
+    data = request.get_json()
+    repo = data.get("repo", "").strip()
+    if not repo:
+        return jsonify({"error": "repo is required"}), 400
+
+    config = data.get("config", "rlm_call_traces")
+    split = data.get("split", "train")
+
+    try:
+        ds = load_dataset(repo, config, split=split)
+    except Exception as e:
+        return jsonify({"error": f"Failed to load dataset: {e}"}), 400
+
+    ds_id = _make_id(repo, config, split)
+    rows = [ds[i] for i in range(len(ds))]
+    hierarchy = _build_hierarchy(rows)
+
+    # Extract metadata from first row
+    first_row = rows[0] if rows else {}
+    metadata = {
+        "run_id": first_row.get("run_id", ""),
+        "method": first_row.get("method", ""),
+        "model": first_row.get("model", ""),
+    }
+
+    _cache[ds_id] = {
+        "repo": repo,
+        "config": config,
+        "split": split,
+        "hierarchy": hierarchy,
+        "metadata": metadata,
+        "n_rows": len(rows),
+    }
+
+    short_name = repo.rsplit("/", 1)[-1] if "/" in repo else repo
+
+    return jsonify({
+        "id": ds_id,
+        "repo": repo,
+        "name": short_name,
+        "config": config,
+        "split": split,
+        "metadata": metadata,
+        "n_examples": len(hierarchy["examples"]),
+        "n_rows": len(rows),
+    })
+
+
+@bp.route("/", methods=["GET"])
+def list_datasets():
+    result = []
+    for ds_id, info in _cache.items():
+        result.append({
+            "id": ds_id,
+            "repo": info["repo"],
+            "name": info["repo"].rsplit("/", 1)[-1] if "/" in info["repo"] else info["repo"],
+            "config": info["config"],
+            "split": info["split"],
+            "metadata": info["metadata"],
+            "n_rows": info["n_rows"],
+            "n_examples": len(info["hierarchy"]["examples"]),
+        })
+    return jsonify(result)
+
+
+@bp.route("/<ds_id>/overview", methods=["GET"])
+def get_overview(ds_id):
+    """Level 1: Summary of all examples."""
+    if ds_id not in _cache:
+        return jsonify({"error": "Dataset not loaded"}), 404
+
+    info = _cache[ds_id]
+    hierarchy = info["hierarchy"]
+
+    summaries = []
+    for ex in hierarchy["examples"]:
+        summaries.append({
+            "example_idx": ex["example_idx"],
+            "question_text": (ex["question_text"] or "")[:300],
+            "eval_correct": ex["eval_correct"],
+            "n_iterations": len(ex["iterations"]),
+            "total_input_tokens": ex["total_input_tokens"],
+            "total_output_tokens": ex["total_output_tokens"],
+            "total_execution_time": ex["total_execution_time"],
+            "final_answer_preview": ex["final_answer_preview"],
+        })
+
+    return jsonify({
+        "metadata": info["metadata"],
+        "examples": summaries,
+    })
+
+
+@bp.route("/<ds_id>/example/<int:example_idx>", methods=["GET"])
+def get_example_detail(ds_id, example_idx):
+    """Level 2: Iteration timeline for one example."""
+    if ds_id not in _cache:
+        return jsonify({"error": "Dataset not loaded"}), 404
+
+    info = _cache[ds_id]
+    hierarchy = info["hierarchy"]
+
+    ex_data = None
+    for ex in hierarchy["examples"]:
+        if ex["example_idx"] == example_idx:
+            ex_data = ex
+            break
+
+    if ex_data is None:
+        return jsonify({"error": f"Example {example_idx} not found"}), 404
+
+    iters = []
+    for it in ex_data["iterations"]:
+        iters.append({
+            "rlm_iter": it["rlm_iter"],
+            "model": it["model"],
+            "input_tokens": it["input_tokens"],
+            "output_tokens": it["output_tokens"],
+            "execution_time": it["execution_time"],
+            "has_code_blocks": it["has_code_blocks"],
+            "n_code_blocks": len(it["code_blocks"]),
+            "response_preview": (it["response"] or "")[:300],
+            "has_final_answer": it["final_answer"] is not None,
+            "timestamp": it["timestamp"],
+        })
+
+    return jsonify({
+        "example_idx": example_idx,
+        "question_text": ex_data["question_text"],
+        "eval_correct": ex_data["eval_correct"],
+        "total_input_tokens": ex_data["total_input_tokens"],
+        "total_output_tokens": ex_data["total_output_tokens"],
+        "total_execution_time": ex_data["total_execution_time"],
+        "final_answer": ex_data["final_answer"],
+        "iterations": iters,
+    })
+
+
+@bp.route("/<ds_id>/example/<int:example_idx>/iter/<int:rlm_iter>", methods=["GET"])
+def get_iter_detail(ds_id, example_idx, rlm_iter):
+    """Full detail for a specific RLM iteration within an example."""
+    if ds_id not in _cache:
+        return jsonify({"error": "Dataset not loaded"}), 404
+
+    info = _cache[ds_id]
+    hierarchy = info["hierarchy"]
+
+    for ex in hierarchy["examples"]:
+        if ex["example_idx"] != example_idx:
+            continue
+        for it in ex["iterations"]:
+            if it["rlm_iter"] == rlm_iter:
+                return jsonify(it)
+
+    return jsonify({"error": "Iteration not found"}), 404
+
+
+@bp.route("/<ds_id>", methods=["DELETE"])
+def unload_dataset(ds_id):
+    if ds_id in _cache:
+        del _cache[ds_id]
+    return jsonify({"status": "ok"})

backend/app.py

@@ -6,10 +6,11 @@ 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, harbor_datasets, presets
+    from backend.api import model_datasets, arena_datasets, rlm_datasets, rlm_eval_datasets, harbor_datasets, presets
     app.register_blueprint(model_datasets.bp)
     app.register_blueprint(arena_datasets.bp)
     app.register_blueprint(rlm_datasets.bp)
+    app.register_blueprint(rlm_eval_datasets.bp)
     app.register_blueprint(harbor_datasets.bp)
     app.register_blueprint(presets.bp)
 

frontend/src/App.tsx

@@ -2,15 +2,17 @@ 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"));
 
-type TabId = "model" | "arena" | "rlm" | "harbor";
+type TabId = "model" | "arena" | "rlm-eval" | "rlm" | "harbor";
 
 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", label: "RLM", color: "orange", activeClass: "border-orange-500 text-orange-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" },
 ];
 
@@ -56,6 +58,11 @@ export default function App() {
               <ArenaApp />
             </div>
           )}
+          {activeTab === "rlm-eval" && (
+            <div className="theme-rlm-eval h-full">
+              <RlmEvalApp />
+            </div>
+          )}
           {activeTab === "rlm" && (
             <div className="theme-rlm h-full">
               <RlmApp />

frontend/src/rlm-eval/RlmEvalApp.tsx

@@ -0,0 +1,133 @@
+import { useEffect } from "react";
+import { useAppState } from "./store";
+import Sidebar from "./components/Sidebar";
+import Panel from "./components/Panel";
+
+function RlmEvalApp() {
+  const state = useAppState();
+
+  const handleSelectDataset = (id: string) => {
+    state.navigatePanel("A", { datasetId: id, level: 1 });
+  };
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLSelectElement
+      )
+        return;
+
+      switch (e.key) {
+        case "Escape":
+          state.goUp("A");
+          break;
+        case "c":
+          state.toggleComparison();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [state.goUp, state.toggleComparison]);
+
+  return (
+    <div className="flex h-full bg-gray-950 text-gray-100">
+      {/* Sidebar */}
+      <Sidebar
+        datasets={state.datasets}
+        presets={state.presets}
+        setPresets={state.setPresets}
+        loading={state.loading}
+        onAddDataset={state.addDataset}
+        onRemoveDataset={state.removeDataset}
+        onToggleDataset={state.toggleDataset}
+        onSelectDataset={handleSelectDataset}
+        onUpdateDatasetPresetName={state.updateDatasetPresetName}
+        onClearDatasetPreset={state.clearDatasetPreset}
+      />
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Error banner */}
+        {state.error && (
+          <div className="bg-red-900 border-b border-red-700 px-4 py-2 text-sm text-red-200 flex justify-between">
+            <span>{state.error}</span>
+            <button onClick={() => state.setError(null)} className="text-red-300 hover:text-red-100">
+              x
+            </button>
+          </div>
+        )}
+
+        {/* Toolbar */}
+        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-700 bg-gray-900">
+          <div className="text-sm text-gray-400">
+            {state.activeDatasets.length} dataset{state.activeDatasets.length !== 1 ? "s" : ""} loaded
+          </div>
+          <button
+            className={`text-sm px-3 py-1 rounded ${
+              state.comparisonMode
+                ? "bg-emerald-600 text-white"
+                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
+            }`}
+            onClick={state.toggleComparison}
+          >
+            {state.comparisonMode ? "Exit Compare" : "Compare"}
+          </button>
+        </div>
+
+        {/* Panels */}
+        <div className="flex-1 flex gap-2 p-2 overflow-hidden">
+          {state.panelA ? (
+            <div className={state.comparisonMode ? "w-1/2" : "w-full"}>
+              <Panel
+                nav={state.panelA}
+                dataset={state.datasets.find((d) => d.id === state.panelA?.datasetId)}
+                panelLabel={state.comparisonMode ? "A" : undefined}
+                onNavigate={(nav) => state.navigatePanel("A", nav)}
+                onGoUp={() => state.goUp("A")}
+                fetchOverview={state.fetchOverview}
+                fetchExampleDetail={state.fetchExampleDetail}
+                fetchIterDetail={state.fetchIterDetail}
+              />
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-gray-500">
+              <div className="text-center">
+                <p className="text-lg mb-2">No dataset loaded</p>
+                <p className="text-sm">Add a dataset from the sidebar to get started</p>
+              </div>
+            </div>
+          )}
+
+          {state.comparisonMode && state.panelB && (
+            <div className="w-1/2">
+              <Panel
+                nav={state.panelB}
+                dataset={state.datasets.find((d) => d.id === state.panelB?.datasetId)}
+                panelLabel="B"
+                datasets={state.datasets}
+                onNavigate={(nav) => state.navigatePanel("B", nav)}
+                onGoUp={() => state.goUp("B")}
+                onSwitchDataset={(id) => state.navigatePanel("B", { datasetId: id, level: 1 })}
+                fetchOverview={state.fetchOverview}
+                fetchExampleDetail={state.fetchExampleDetail}
+                fetchIterDetail={state.fetchIterDetail}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Keyboard hints */}
+        <div className="flex items-center gap-4 px-4 py-1 border-t border-gray-800 text-xs text-gray-600">
+          <span>Esc: Go up</span>
+          <span>C: Toggle compare</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RlmEvalApp;

frontend/src/rlm-eval/api.ts

@@ -0,0 +1,74 @@
+const BASE = "/api/rlm-eval";
+
+async function fetchJson<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${url}`, {
+    headers: { "Content-Type": "application/json" },
+    ...init,
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+const PRESETS_BASE = "/api/presets/rlm-eval";
+async function fetchPresetsJson<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${PRESETS_BASE}${url}`, {
+    headers: { "Content-Type": "application/json" }, ...init,
+  });
+  if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error(body.error || `HTTP ${res.status}`); }
+  return res.json();
+}
+
+export const api = {
+  loadDataset: (repo: string, config?: string, split?: string) =>
+    fetchJson<{
+      id: string;
+      repo: string;
+      name: string;
+      config: string;
+      split: string;
+      metadata: Record<string, unknown>;
+      n_examples: number;
+      n_rows: number;
+    }>("/datasets/load", {
+      method: "POST",
+      body: JSON.stringify({
+        repo,
+        config: config || "rlm_call_traces",
+        split: split || "train",
+      }),
+    }),
+
+  getOverview: (dsId: string) =>
+    fetchJson<Record<string, unknown>>(`/datasets/${dsId}/overview`),
+
+  getExampleDetail: (dsId: string, exampleIdx: number) =>
+    fetchJson<Record<string, unknown>>(`/datasets/${dsId}/example/${exampleIdx}`),
+
+  getIterDetail: (dsId: string, exampleIdx: number, rlmIter: number) =>
+    fetchJson<Record<string, unknown>>(
+      `/datasets/${dsId}/example/${exampleIdx}/iter/${rlmIter}`
+    ),
+
+  unloadDataset: (dsId: string) =>
+    fetchJson<{ status: string }>(`/datasets/${dsId}`, { method: "DELETE" }),
+
+  listPresets: () => fetchPresetsJson<Record<string, unknown>[]>(""),
+
+  createPreset: (preset: { name: string; repo: string; config: string; split: string }) =>
+    fetchPresetsJson<Record<string, unknown>>("", {
+      method: "POST",
+      body: JSON.stringify(preset),
+    }),
+
+  updatePreset: (id: string, data: { name: string }) =>
+    fetchPresetsJson<Record<string, unknown>>(`/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+    }),
+
+  deletePreset: (id: string) =>
+    fetchPresetsJson<{ status: string }>(`/${id}`, { method: "DELETE" }),
+};

frontend/src/rlm-eval/components/Breadcrumb.tsx

@@ -0,0 +1,45 @@
+import type { PanelNav, DatasetInfo } from "../types";
+
+interface BreadcrumbProps {
+  nav: PanelNav;
+  dataset: DatasetInfo | undefined;
+  onNavigate: (nav: PanelNav) => void;
+}
+
+export default function Breadcrumb({ nav, dataset, onNavigate }: BreadcrumbProps) {
+  const parts: { label: string; nav: PanelNav }[] = [];
+
+  if (dataset) {
+    parts.push({
+      label: dataset.name,
+      nav: { datasetId: nav.datasetId, level: 1 },
+    });
+  }
+
+  if (nav.level >= 2 && nav.exampleIdx !== undefined) {
+    parts.push({
+      label: `Example ${nav.exampleIdx}`,
+      nav: { datasetId: nav.datasetId, level: 2, exampleIdx: nav.exampleIdx },
+    });
+  }
+
+  return (
+    <div className="flex items-center gap-1 text-sm">
+      {parts.map((p, i) => (
+        <span key={i} className="flex items-center gap-1">
+          {i > 0 && <span className="text-gray-500">/</span>}
+          {i < parts.length - 1 ? (
+            <button
+              className="text-emerald-400 hover:text-emerald-300"
+              onClick={() => onNavigate(p.nav)}
+            >
+              {p.label}
+            </button>
+          ) : (
+            <span className="text-gray-200">{p.label}</span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}

frontend/src/rlm-eval/components/DatasetSelector.tsx

@@ -0,0 +1,23 @@
+import type { DatasetInfo } from "../types";
+
+interface DatasetSelectorProps {
+  datasets: DatasetInfo[];
+  currentId: string;
+  onSelect: (id: string) => void;
+}
+
+export default function DatasetSelector({ datasets, currentId, onSelect }: DatasetSelectorProps) {
+  return (
+    <select
+      className="bg-gray-800 text-gray-200 text-xs rounded px-2 py-0.5 border border-gray-600 focus:border-emerald-500 outline-none"
+      value={currentId}
+      onChange={(e) => onSelect(e.target.value)}
+    >
+      {datasets.map((ds) => (
+        <option key={ds.id} value={ds.id}>
+          {ds.name}
+        </option>
+      ))}
+    </select>
+  );
+}

frontend/src/rlm-eval/components/ExampleDetailLevel.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useState } from "react";
+import type { ExampleDetailData, RlmIterDetail } from "../types";
+import IterationDetail from "./IterationDetail";
+
+interface ExampleDetailLevelProps {
+  datasetId: string;
+  exampleIdx: number;
+  fetchExampleDetail: (dsId: string, exampleIdx: number) => Promise<ExampleDetailData>;
+  fetchIterDetail: (dsId: string, exampleIdx: number, rlmIter: number) => Promise<RlmIterDetail>;
+}
+
+export default function ExampleDetailLevel({
+  datasetId,
+  exampleIdx,
+  fetchExampleDetail,
+  fetchIterDetail,
+}: ExampleDetailLevelProps) {
+  const [data, setData] = useState<ExampleDetailData | null>(null);
+  const [expandedIter, setExpandedIter] = useState<number | null>(null);
+  const [iterDetail, setIterDetail] = useState<RlmIterDetail | null>(null);
+
+  useEffect(() => {
+    fetchExampleDetail(datasetId, exampleIdx).then(setData).catch(() => {});
+  }, [datasetId, exampleIdx, fetchExampleDetail]);
+
+  useEffect(() => {
+    if (expandedIter === null) {
+      setIterDetail(null);
+      return;
+    }
+    fetchIterDetail(datasetId, exampleIdx, expandedIter)
+      .then(setIterDetail)
+      .catch(() => {});
+  }, [datasetId, exampleIdx, expandedIter, fetchIterDetail]);
+
+  if (!data) return <div className="p-4 text-gray-400">Loading example detail...</div>;
+
+  return (
+    <div className="p-4 space-y-4 overflow-y-auto">
+      {/* Question text */}
+      <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
+        <div className="flex items-center gap-2 mb-2">
+          <div className="text-xs font-semibold text-emerald-400">Question</div>
+          {data.eval_correct === true && (
+            <span className="text-emerald-400 text-xs font-bold">&#10003; Correct</span>
+          )}
+          {data.eval_correct === false && (
+            <span className="text-red-400 text-xs font-bold">&#10007; Incorrect</span>
+          )}
+        </div>
+        <div className="text-sm text-gray-200 whitespace-pre-wrap max-h-40 overflow-y-auto">
+          {data.question_text}
+        </div>
+      </div>
+
+      {/* Stats row */}
+      <div className="flex gap-4 text-xs text-gray-400">
+        <span>
+          Total tokens:{" "}
+          <span className="text-gray-200">
+            {((data.total_input_tokens + data.total_output_tokens) / 1000).toFixed(1)}k
+          </span>
+        </span>
+        <span>
+          Time: <span className="text-gray-200">{data.total_execution_time.toFixed(1)}s</span>
+        </span>
+        <span>
+          Iterations: <span className="text-gray-200">{data.iterations.length}</span>
+        </span>
+      </div>
+
+      {/* Iteration timeline */}
+      <div>
+        <div className="text-xs font-semibold text-gray-400 mb-2">Iteration Timeline</div>
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {data.iterations.map((it) => (
+            <div
+              key={it.rlm_iter}
+              className={`flex-shrink-0 w-56 bg-gray-800 border rounded-lg p-3 cursor-pointer transition-colors hover:border-emerald-500 ${
+                expandedIter === it.rlm_iter
+                  ? "border-emerald-500 ring-1 ring-emerald-500"
+                  : it.has_final_answer
+                    ? "border-emerald-600"
+                    : "border-gray-700"
+              }`}
+              onClick={() =>
+                setExpandedIter(expandedIter === it.rlm_iter ? null : it.rlm_iter)
+              }
+            >
+              <div className="flex items-center justify-between mb-2">
+                <span className="bg-gray-700 text-gray-200 text-xs font-mono px-2 py-0.5 rounded">
+                  iter {it.rlm_iter}
+                </span>
+                <div className="flex gap-1">
+                  {it.has_code_blocks && (
+                    <span className="bg-emerald-900 text-emerald-300 text-xs px-1.5 py-0.5 rounded">
+                      {it.n_code_blocks} code
+                    </span>
+                  )}
+                  {it.has_final_answer && (
+                    <span className="bg-amber-900 text-amber-300 text-xs px-1.5 py-0.5 rounded">
+                      FINAL
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex justify-between text-xs text-gray-500 mb-2">
+                <span>{((it.input_tokens + it.output_tokens) / 1000).toFixed(1)}k tok</span>
+                <span>{it.execution_time.toFixed(1)}s</span>
+              </div>
+
+              <div className="text-xs text-gray-400 line-clamp-3 leading-relaxed">
+                {it.response_preview || "(empty)"}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Expanded iteration detail */}
+      {expandedIter !== null && iterDetail && (
+        <IterationDetail data={iterDetail} />
+      )}
+
+      {/* Final answer if present */}
+      {data.final_answer && (
+        <div className="bg-emerald-950 border border-emerald-700 rounded-lg p-4">
+          <div className="text-xs font-semibold text-emerald-400 mb-2">Final Answer</div>
+          <div className="text-sm text-gray-200 whitespace-pre-wrap max-h-60 overflow-y-auto">
+            {data.final_answer}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/rlm-eval/components/IterationDetail.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import type { RlmIterDetail } from "../types";
+
+interface IterationDetailProps {
+  data: RlmIterDetail;
+}
+
+function parsePromptMessages(promptStr: string): { role: string; content: string }[] {
+  try {
+    const parsed = JSON.parse(promptStr);
+    if (Array.isArray(parsed)) return parsed;
+  } catch { /* not JSON */ }
+  return [{ role: "raw", content: promptStr }];
+}
+
+const roleColors: Record<string, string> = {
+  system: "border-violet-500 bg-violet-950",
+  user: "border-emerald-500 bg-emerald-950",
+  assistant: "border-sky-500 bg-sky-950",
+  raw: "border-gray-500 bg-gray-900",
+};
+
+export default function IterationDetail({ data }: IterationDetailProps) {
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  const messages = parsePromptMessages(data.prompt);
+
+  return (
+    <div className="space-y-4 border border-gray-700 rounded-lg p-4 bg-gray-900">
+      {/* Stats */}
+      <div className="flex gap-4 text-xs text-gray-400">
+        <span>Model: <span className="text-gray-200">{data.model}</span></span>
+        <span>In: <span className="text-emerald-300">{(data.input_tokens / 1000).toFixed(1)}k</span></span>
+        <span>Out: <span className="text-emerald-300">{(data.output_tokens / 1000).toFixed(1)}k</span></span>
+        <span>Time: <span className="text-gray-200">{data.execution_time.toFixed(1)}s</span></span>
+      </div>
+
+      {/* Prompt section (collapsible) */}
+      <div>
+        <button
+          className="flex items-center gap-2 text-sm font-semibold text-gray-300 hover:text-gray-100 mb-2"
+          onClick={() => setPromptExpanded(!promptExpanded)}
+        >
+          <span className={`transform transition-transform ${promptExpanded ? "rotate-90" : ""}`}>
+            &#9654;
+          </span>
+          Prompt ({messages.length} messages)
+        </button>
+        {promptExpanded && (
+          <div className="space-y-2 ml-4">
+            {messages.map((msg, i) => (
+              <div
+                key={i}
+                className={`border-l-2 rounded-r-lg px-3 py-2 ${roleColors[msg.role] || roleColors.raw}`}
+              >
+                <div className="text-xs font-semibold text-gray-400 mb-1 uppercase">{msg.role}</div>
+                <div className="text-sm text-gray-200 whitespace-pre-wrap max-h-96 overflow-y-auto">
+                  {msg.content.length > 8000 ? msg.content.slice(0, 8000) + "\n...(truncated)" : msg.content}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Response */}
+      <div>
+        <div className="text-sm font-semibold text-gray-300 mb-2">Response</div>
+        <div className="bg-gray-800 border border-gray-700 rounded-lg p-3">
+          <div className="text-sm text-gray-200 whitespace-pre-wrap max-h-96 overflow-y-auto font-mono">
+            {data.response}
+          </div>
+        </div>
+      </div>
+
+      {/* Code Blocks */}
+      {data.code_blocks.length > 0 && (
+        <div>
+          <div className="text-sm font-semibold text-gray-300 mb-2">
+            Code Blocks ({data.code_blocks.length})
+          </div>
+          <div className="space-y-3">
+            {data.code_blocks.map((cb, i) => (
+              <div key={i} className="border border-gray-700 rounded-lg overflow-hidden">
+                <div className="bg-gray-800 px-3 py-1.5 text-xs text-gray-400 border-b border-gray-700 flex items-center gap-2">
+                  <span className="text-emerald-400 font-mono">python</span>
+                  <span>Block {i + 1}</span>
+                </div>
+                <pre className="bg-gray-900 p-3 text-sm text-gray-200 overflow-x-auto font-mono leading-relaxed">
+                  {cb.code}
+                </pre>
+                {cb.stdout && (
+                  <div className="border-t border-gray-700">
+                    <div className="bg-gray-800 px-3 py-1 text-xs text-gray-400">stdout</div>
+                    <pre className="bg-emerald-950 p-3 text-sm text-emerald-200 overflow-x-auto font-mono">
+                      {cb.stdout}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Final Answer */}
+      {data.final_answer && (
+        <div className="bg-emerald-950 border border-emerald-700 rounded-lg p-4">
+          <div className="text-xs font-semibold text-emerald-400 mb-2">Final Answer</div>
+          <div className="text-sm text-gray-200 whitespace-pre-wrap max-h-96 overflow-y-auto">
+            {data.final_answer}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/rlm-eval/components/OverviewLevel.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import type { OverviewData, PanelNav } from "../types";
+
+interface OverviewLevelProps {
+  datasetId: string;
+  fetchOverview: (dsId: string) => Promise<OverviewData>;
+  onDrillDown: (nav: PanelNav) => void;
+}
+
+export default function OverviewLevel({ datasetId, fetchOverview, onDrillDown }: OverviewLevelProps) {
+  const [data, setData] = useState<OverviewData | null>(null);
+
+  useEffect(() => {
+    fetchOverview(datasetId).then(setData).catch(() => {});
+  }, [datasetId, fetchOverview]);
+
+  if (!data) return <div className="p-4 text-gray-400">Loading overview...</div>;
+
+  const correctCount = data.examples.filter((ex) => ex.eval_correct === true).length;
+  const incorrectCount = data.examples.filter((ex) => ex.eval_correct === false).length;
+  const unknownCount = data.examples.filter((ex) => ex.eval_correct === null || ex.eval_correct === undefined).length;
+
+  return (
+    <div className="p-4 space-y-3">
+      {/* Experiment metadata */}
+      <div className="flex gap-3 text-xs text-gray-400">
+        <span>Model: <span className="text-gray-200">{data.metadata.model}</span></span>
+        <span>Method: <span className="text-gray-200">{data.metadata.method}</span></span>
+        <span>Run: <span className="text-gray-200">{data.metadata.run_id}</span></span>
+      </div>
+
+      {/* Summary stats */}
+      <div className="flex gap-3 text-xs text-gray-400">
+        <span>{data.examples.length} examples</span>
+        {correctCount > 0 && (
+          <span className="text-emerald-400">{correctCount} correct</span>
+        )}
+        {incorrectCount > 0 && (
+          <span className="text-red-400">{incorrectCount} incorrect</span>
+        )}
+        {unknownCount > 0 && (
+          <span className="text-gray-500">{unknownCount} unknown</span>
+        )}
+      </div>
+
+      {/* Example cards */}
+      <div className="space-y-2">
+        {data.examples.map((ex) => (
+          <div
+            key={ex.example_idx}
+            className="bg-gray-800 border border-gray-700 rounded-lg p-4 hover:border-emerald-500 cursor-pointer transition-colors"
+            onClick={() =>
+              onDrillDown({
+                datasetId,
+                level: 2,
+                exampleIdx: ex.example_idx,
+              })
+            }
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-3">
+                <span className="bg-emerald-600 text-white text-xs font-bold px-2 py-0.5 rounded-full">
+                  Ex {ex.example_idx}
+                </span>
+                <span className="bg-gray-700 text-gray-300 text-xs px-2 py-0.5 rounded">
+                  {ex.n_iterations} iter{ex.n_iterations !== 1 ? "s" : ""}
+                </span>
+                {ex.eval_correct === true && (
+                  <span className="text-emerald-400 text-sm font-bold" title="Correct">
+                    &#10003;
+                  </span>
+                )}
+                {ex.eval_correct === false && (
+                  <span className="text-red-400 text-sm font-bold" title="Incorrect">
+                    &#10007;
+                  </span>
+                )}
+              </div>
+              <span className="text-xs text-gray-400">
+                {ex.total_execution_time.toFixed(1)}s
+              </span>
+            </div>
+
+            {/* Question preview */}
+            <div className="text-sm text-gray-300 line-clamp-2 mb-2 leading-relaxed">
+              {ex.question_text || "(no question text)"}
+            </div>
+
+            <div className="flex gap-4 text-xs text-gray-400">
+              <span>
+                {((ex.total_input_tokens + ex.total_output_tokens) / 1000).toFixed(1)}k tokens
+              </span>
+            </div>
+
+            {ex.final_answer_preview && (
+              <div className="mt-2 text-xs text-gray-500 truncate">
+                Answer: {ex.final_answer_preview}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/rlm-eval/components/Panel.tsx

@@ -0,0 +1,86 @@
+import type { PanelNav, DatasetInfo, OverviewData, ExampleDetailData, RlmIterDetail } from "../types";
+import Breadcrumb from "./Breadcrumb";
+import OverviewLevel from "./OverviewLevel";
+import ExampleDetailLevel from "./ExampleDetailLevel";
+import DatasetSelector from "./DatasetSelector";
+
+interface PanelProps {
+  nav: PanelNav;
+  dataset: DatasetInfo | undefined;
+  panelLabel?: string;
+  datasets?: DatasetInfo[];
+  onNavigate: (nav: PanelNav) => void;
+  onGoUp: () => void;
+  onSwitchDataset?: (id: string) => void;
+  fetchOverview: (dsId: string) => Promise<OverviewData>;
+  fetchExampleDetail: (dsId: string, exampleIdx: number) => Promise<ExampleDetailData>;
+  fetchIterDetail: (
+    dsId: string,
+    exampleIdx: number,
+    rlmIter: number
+  ) => Promise<RlmIterDetail>;
+}
+
+export default function Panel({
+  nav,
+  dataset,
+  panelLabel,
+  datasets,
+  onNavigate,
+  onGoUp,
+  onSwitchDataset,
+  fetchOverview,
+  fetchExampleDetail,
+  fetchIterDetail,
+}: PanelProps) {
+  return (
+    <div className="flex flex-col h-full border border-gray-700 rounded-lg bg-gray-900 overflow-hidden">
+      {/* Panel header */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-gray-700 bg-gray-800">
+        {nav.level > 1 && (
+          <button
+            className="text-gray-400 hover:text-gray-200 text-sm"
+            onClick={onGoUp}
+            title="Go up"
+          >
+            &#8592;
+          </button>
+        )}
+        {panelLabel && (
+          <span className="text-xs bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded">
+            {panelLabel}
+          </span>
+        )}
+        <Breadcrumb nav={nav} dataset={dataset} onNavigate={onNavigate} />
+        {panelLabel === "B" && datasets && onSwitchDataset && (
+          <div className="ml-auto">
+            <DatasetSelector
+              datasets={datasets}
+              currentId={nav.datasetId}
+              onSelect={(id) => onSwitchDataset(id)}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Panel content */}
+      <div className="flex-1 overflow-y-auto">
+        {nav.level === 1 && (
+          <OverviewLevel
+            datasetId={nav.datasetId}
+            fetchOverview={fetchOverview}
+            onDrillDown={onNavigate}
+          />
+        )}
+        {nav.level === 2 && nav.exampleIdx !== undefined && (
+          <ExampleDetailLevel
+            datasetId={nav.datasetId}
+            exampleIdx={nav.exampleIdx}
+            fetchExampleDetail={fetchExampleDetail}
+            fetchIterDetail={fetchIterDetail}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/rlm-eval/components/Sidebar.tsx

@@ -0,0 +1,388 @@
+import { useState } from "react";
+import type { DatasetInfo, Preset } from "../types";
+import { api } from "../api";
+
+interface SidebarProps {
+  datasets: DatasetInfo[];
+  presets: Preset[];
+  setPresets: (p: Preset[]) => void;
+  loading: Record<string, boolean>;
+  onAddDataset: (repo: string, config?: string, split?: string, presetId?: string, presetName?: string) => void;
+  onRemoveDataset: (id: string) => void;
+  onToggleDataset: (id: string) => void;
+  onSelectDataset: (id: string) => void;
+  onUpdateDatasetPresetName: (dsId: string, name: string) => void;
+  onClearDatasetPreset: (dsId: string) => void;
+}
+
+export default function Sidebar({
+  datasets,
+  presets,
+  setPresets,
+  loading,
+  onAddDataset,
+  onRemoveDataset,
+  onToggleDataset,
+  onSelectDataset,
+  onUpdateDatasetPresetName,
+  onClearDatasetPreset,
+}: SidebarProps) {
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [repo, setRepo] = useState("");
+  const [config, setConfig] = useState("rlm_call_traces");
+  const [split, setSplit] = useState("train");
+  const [presetSearch, setPresetSearch] = useState("");
+
+  // Inline preset saving
+  const [savingPresetForId, setSavingPresetForId] = useState<string | null>(null);
+  const [presetName, setPresetName] = useState("");
+
+  // Preset editing panel
+  const [editingDatasetId, setEditingDatasetId] = useState<string | null>(null);
+  const [editPresetName, setEditPresetName] = useState("");
+
+  const handleAdd = () => {
+    if (!repo.trim()) return;
+    onAddDataset(repo.trim(), config, split);
+    setRepo("");
+    setShowAddForm(false);
+  };
+
+  const handleLoadPreset = (p: Preset) => {
+    onAddDataset(p.repo, p.config, p.split || "train", p.id, p.name);
+  };
+
+  const handleSavePresetForRepo = async (ds: DatasetInfo) => {
+    if (!presetName.trim()) return;
+    try {
+      const preset = (await api.createPreset({
+        name: presetName.trim(),
+        repo: ds.repo,
+        config: ds.config,
+        split: ds.split,
+      })) as unknown as Preset;
+      setPresets([...presets, preset]);
+      onUpdateDatasetPresetName(ds.id, presetName.trim());
+    } catch {
+      /* ignore */
+    }
+    setPresetName("");
+    setSavingPresetForId(null);
+  };
+
+  const handleUpdatePreset = async (presetId: string, dsId: string) => {
+    if (!editPresetName.trim()) return;
+    try {
+      await api.updatePreset(presetId, { name: editPresetName.trim() });
+      setPresets(
+        presets.map((p) => (p.id === presetId ? { ...p, name: editPresetName.trim() } : p))
+      );
+      onUpdateDatasetPresetName(dsId, editPresetName.trim());
+    } catch {
+      /* ignore */
+    }
+    setEditingDatasetId(null);
+  };
+
+  const handleDeletePreset = async (id: string, dsId?: string) => {
+    await api.deletePreset(id).catch(() => {});
+    setPresets(presets.filter((p) => p.id !== id));
+    if (dsId) {
+      onClearDatasetPreset(dsId);
+    }
+    setEditingDatasetId(null);
+  };
+
+  const filteredPresets = presetSearch
+    ? presets.filter(
+        (p) =>
+          p.name.toLowerCase().includes(presetSearch.toLowerCase()) ||
+          p.repo.toLowerCase().includes(presetSearch.toLowerCase())
+      )
+    : presets;
+
+  return (
+    <div className="w-64 min-w-64 bg-gray-900 border-r border-gray-700 flex flex-col h-full overflow-hidden">
+      {/* Header */}
+      <div className="p-3 border-b border-gray-700">
+        <h1 className="text-sm font-bold tracking-wide text-gray-200">RLM Eval Visualizer</h1>
+      </div>
+
+      {/* Presets section */}
+      <div className="p-3 border-b border-gray-700">
+        <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
+          Presets
+        </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-emerald-500 focus:outline-none"
+              />
+            )}
+            <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
+              {filteredPresets.map((p) => (
+                <div key={p.id} className="group relative">
+                  <button
+                    onClick={() => handleLoadPreset(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.config}, ${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={() => handleDeletePreset(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>
+
+      {/* Loaded Experiments */}
+      <div className="flex-1 overflow-y-auto p-3">
+        <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
+          Loaded Datasets
+        </div>
+        {datasets.length === 0 ? (
+          <p className="text-xs text-gray-500 italic">No datasets loaded</p>
+        ) : (
+          <div className="space-y-1">
+            {datasets.map((ds) => (
+              <div key={ds.id}>
+                <div
+                  onClick={() => {
+                    if (ds.presetId) {
+                      setEditingDatasetId(editingDatasetId === ds.id ? null : ds.id);
+                      setEditPresetName(ds.presetName || "");
+                      setShowAddForm(false);
+                    }
+                    onSelectDataset(ds.id);
+                  }}
+                  className={`flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-colors cursor-pointer ${
+                    ds.active ? "bg-gray-800" : "bg-gray-900 opacity-60"
+                  } ${editingDatasetId === ds.id ? "ring-1 ring-emerald-500" : "hover:bg-gray-800"}`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={ds.active}
+                    onChange={() => onToggleDataset(ds.id)}
+                    onClick={(e) => e.stopPropagation()}
+                    className="accent-emerald-500 shrink-0"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div
+                      className="text-xs font-medium text-gray-200 truncate"
+                      title={ds.presetName ? `${ds.presetName}\n${ds.repo}` : ds.repo}
+                    >
+                      {ds.presetName || ds.name}
+                    </div>
+                    <div className="text-[10px] text-gray-500">
+                      {ds.metadata.model} | {ds.n_examples} examples
+                    </div>
+                  </div>
+                  {/* Save as preset bookmark */}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setSavingPresetForId(savingPresetForId === ds.id ? null : ds.id);
+                      setPresetName(ds.presetName || ds.name);
+                    }}
+                    className={`transition-colors shrink-0 ${
+                      savingPresetForId === ds.id
+                        ? "text-emerald-400"
+                        : ds.presetId
+                          ? "text-emerald-500"
+                          : "text-gray-600 hover:text-emerald-400"
+                    }`}
+                    title={ds.presetId ? "Saved as preset" : "Save as preset"}
+                  >
+                    <svg
+                      className="w-3.5 h-3.5"
+                      fill={ds.presetId ? "currentColor" : "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-emerald-500 focus:outline-none"
+                      autoFocus
+                    />
+                    <button
+                      onClick={() => handleSavePresetForRepo(ds)}
+                      className="px-2 py-1 text-xs bg-emerald-600 hover:bg-emerald-500 rounded text-white"
+                    >
+                      Save
+                    </button>
+                  </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()) {
+                    handleUpdatePreset(editDs.presetId!, editDs.id);
+                  }
+                  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-emerald-500 focus:outline-none"
+                autoFocus
+              />
+              <div className="flex gap-2">
+                <button
+                  onClick={() => handleUpdatePreset(editDs.presetId!, editDs.id)}
+                  disabled={!editPresetName.trim()}
+                  className="flex-1 px-2 py-1 text-xs bg-emerald-600 hover:bg-emerald-500 disabled:bg-gray-700 disabled:text-gray-500 rounded text-white transition-colors"
+                >
+                  Save
+                </button>
+                <button
+                  onClick={() => handleDeletePreset(editDs.presetId!, editDs.id)}
+                  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 Dataset Form */}
+      <div className="p-3 border-t border-gray-700">
+        {showAddForm ? (
+          <div className="space-y-2">
+            <input
+              className="w-full bg-gray-800 text-sm text-gray-200 rounded px-2 py-1.5 border border-gray-600 focus:border-emerald-500 outline-none"
+              placeholder="org/repo-name"
+              value={repo}
+              onChange={(e) => setRepo(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleAdd()}
+              autoFocus
+            />
+            <div className="flex gap-2">
+              <input
+                className="flex-1 bg-gray-800 text-xs text-gray-200 rounded px-2 py-1 border border-gray-600 focus:border-emerald-500 outline-none"
+                placeholder="Config"
+                value={config}
+                onChange={(e) => setConfig(e.target.value)}
+              />
+              <input
+                className="w-16 bg-gray-800 text-xs text-gray-200 rounded px-2 py-1 border border-gray-600 focus:border-emerald-500 outline-none"
+                placeholder="Split"
+                value={split}
+                onChange={(e) => setSplit(e.target.value)}
+              />
+            </div>
+            <div className="flex gap-2">
+              <button
+                className="flex-1 px-2 py-1.5 text-sm bg-emerald-600 hover:bg-emerald-500 disabled:bg-gray-700 disabled:text-gray-500 rounded text-white transition-colors"
+                onClick={handleAdd}
+                disabled={!repo.trim() || !!loading[repo.trim()]}
+              >
+                {loading[repo.trim()] ? "Loading..." : "Load"}
+              </button>
+              <button
+                className="px-3 py-1.5 text-sm bg-gray-700 hover:bg-gray-600 rounded text-gray-300 transition-colors"
+                onClick={() => setShowAddForm(false)}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            className="w-full px-3 py-2 text-sm bg-emerald-600 hover:bg-emerald-500 rounded text-white font-medium transition-colors"
+            onClick={() => {
+              setEditingDatasetId(null);
+              setShowAddForm(true);
+              setRepo("");
+              setConfig("rlm_call_traces");
+              setSplit("train");
+            }}
+          >
+            + Add Dataset
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/rlm-eval/store.ts

@@ -0,0 +1,179 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import type {
+  DatasetInfo,
+  Preset,
+  PanelNav,
+  OverviewData,
+  ExampleDetailData,
+  RlmIterDetail,
+} from "./types";
+import { api } from "./api";
+
+export function useAppState() {
+  const [datasets, setDatasets] = useState<DatasetInfo[]>([]);
+  const [presets, setPresets] = useState<Preset[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<Record<string, boolean>>({});
+
+  // Dual panel navigation
+  const [panelA, setPanelA] = useState<PanelNav | null>(null);
+  const [panelB, setPanelB] = useState<PanelNav | null>(null);
+  const [comparisonMode, setComparisonMode] = useState(false);
+
+  // Data caches
+  const [overviewCache, setOverviewCache] = useState<Record<string, OverviewData>>({});
+  const [exampleDetailCache, setExampleDetailCache] = useState<Record<string, ExampleDetailData>>({});
+  const [iterDetailCache, setIterDetailCache] = useState<Record<string, RlmIterDetail>>({});
+
+  // Load presets on mount
+  useEffect(() => {
+    api.listPresets().then((data) => setPresets(data as unknown as Preset[])).catch(() => {});
+  }, []);
+
+  const activeDatasets = useMemo(() => datasets.filter((d) => d.active), [datasets]);
+
+  // Data fetching helpers
+  const fetchOverview = useCallback(async (dsId: string) => {
+    if (overviewCache[dsId]) return overviewCache[dsId];
+    const data = (await api.getOverview(dsId)) as unknown as OverviewData;
+    setOverviewCache((prev) => ({ ...prev, [dsId]: data }));
+    return data;
+  }, [overviewCache]);
+
+  const fetchExampleDetail = useCallback(
+    async (dsId: string, exampleIdx: number) => {
+      const key = `${dsId}:${exampleIdx}`;
+      if (exampleDetailCache[key]) return exampleDetailCache[key];
+      const data = (await api.getExampleDetail(dsId, exampleIdx)) as unknown as ExampleDetailData;
+      setExampleDetailCache((prev) => ({ ...prev, [key]: data }));
+      return data;
+    },
+    [exampleDetailCache]
+  );
+
+  const fetchIterDetail = useCallback(
+    async (dsId: string, exampleIdx: number, rlmIter: number) => {
+      const key = `${dsId}:${exampleIdx}:${rlmIter}`;
+      if (iterDetailCache[key]) return iterDetailCache[key];
+      const data = (await api.getIterDetail(dsId, exampleIdx, rlmIter)) as unknown as RlmIterDetail;
+      setIterDetailCache((prev) => ({ ...prev, [key]: data }));
+      return data;
+    },
+    [iterDetailCache]
+  );
+
+  // Dataset operations
+  const addDataset = useCallback(
+    async (repo: string, config?: string, split?: string, presetId?: string, presetName?: string) => {
+      setLoading((prev) => ({ ...prev, [repo]: true }));
+      setError(null);
+      try {
+        const result = await api.loadDataset(repo, config, split);
+        const dsInfo: DatasetInfo = {
+          id: result.id,
+          repo: result.repo,
+          name: result.name,
+          config: result.config,
+          split: result.split,
+          metadata: result.metadata as unknown as DatasetInfo["metadata"],
+          n_examples: result.n_examples,
+          n_rows: result.n_rows,
+          active: true,
+          presetId,
+          presetName,
+        };
+
+        setDatasets((prev) => {
+          if (prev.some((d) => d.id === dsInfo.id)) return prev;
+          return [...prev, dsInfo];
+        });
+
+        // Auto-set panel A if not set
+        setPanelA((prev) => prev || { datasetId: dsInfo.id, level: 1 });
+      } catch (e: unknown) {
+        setError(e instanceof Error ? e.message : "Failed to load dataset");
+      } finally {
+        setLoading((prev) => ({ ...prev, [repo]: false }));
+      }
+    },
+    []
+  );
+
+  const removeDataset = useCallback(async (id: string) => {
+    await api.unloadDataset(id).catch(() => {});
+    setDatasets((prev) => prev.filter((d) => d.id !== id));
+    setPanelA((prev) => (prev?.datasetId === id ? null : prev));
+    setPanelB((prev) => (prev?.datasetId === id ? null : prev));
+  }, []);
+
+  const toggleDataset = useCallback((id: string) => {
+    setDatasets((prev) => prev.map((d) => (d.id === id ? { ...d, active: !d.active } : d)));
+  }, []);
+
+  // Navigation
+  const navigatePanel = useCallback(
+    (panel: "A" | "B", nav: PanelNav) => {
+      if (panel === "A") setPanelA(nav);
+      else setPanelB(nav);
+    },
+    []
+  );
+
+  const goUp = useCallback((panel: "A" | "B") => {
+    const setter = panel === "A" ? setPanelA : setPanelB;
+    setter((prev) => {
+      if (!prev) return prev;
+      if (prev.level === 2) return { ...prev, level: 1, exampleIdx: undefined };
+      return prev;
+    });
+  }, []);
+
+  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 toggleComparison = useCallback(() => {
+    setComparisonMode((prev) => {
+      if (!prev && panelA) {
+        // Entering comparison: initialize panel B same as A
+        setPanelB({ ...panelA });
+      } else if (prev) {
+        setPanelB(null);
+      }
+      return !prev;
+    });
+  }, [panelA]);
+
+  return {
+    datasets,
+    presets,
+    setPresets,
+    error,
+    setError,
+    loading,
+    activeDatasets,
+    panelA,
+    panelB,
+    comparisonMode,
+    addDataset,
+    removeDataset,
+    toggleDataset,
+    updateDatasetPresetName,
+    clearDatasetPreset,
+    navigatePanel,
+    goUp,
+    toggleComparison,
+    fetchOverview,
+    fetchExampleDetail,
+    fetchIterDetail,
+    overviewCache,
+    exampleDetailCache,
+    iterDetailCache,
+  };
+}

frontend/src/rlm-eval/types.ts

@@ -0,0 +1,92 @@
+export interface ExperimentMetadata {
+  run_id: string;
+  method: string;
+  model: string;
+}
+
+export interface DatasetInfo {
+  id: string;
+  repo: string;
+  name: string;
+  config: string;
+  split: string;
+  metadata: ExperimentMetadata;
+  n_examples: number;
+  n_rows: number;
+  active: boolean;
+  presetId?: string;
+  presetName?: string;
+}
+
+export interface ExampleSummary {
+  example_idx: number;
+  question_text: string;
+  eval_correct: boolean | null;
+  n_iterations: number;
+  total_input_tokens: number;
+  total_output_tokens: number;
+  total_execution_time: number;
+  final_answer_preview: string;
+}
+
+export interface OverviewData {
+  metadata: ExperimentMetadata;
+  examples: ExampleSummary[];
+}
+
+export interface RlmIterSummary {
+  rlm_iter: number;
+  model: string;
+  input_tokens: number;
+  output_tokens: number;
+  execution_time: number;
+  has_code_blocks: boolean;
+  n_code_blocks: number;
+  response_preview: string;
+  has_final_answer: boolean;
+  timestamp: string;
+}
+
+export interface ExampleDetailData {
+  example_idx: number;
+  question_text: string;
+  eval_correct: boolean | null;
+  total_input_tokens: number;
+  total_output_tokens: number;
+  total_execution_time: number;
+  final_answer: string | null;
+  iterations: RlmIterSummary[];
+}
+
+export interface CodeBlock {
+  code: string;
+  stdout?: string;
+}
+
+export interface RlmIterDetail {
+  rlm_iter: number;
+  prompt: string;
+  response: string;
+  model: string;
+  input_tokens: number;
+  output_tokens: number;
+  execution_time: number;
+  has_code_blocks: boolean;
+  code_blocks: CodeBlock[];
+  final_answer: string | null;
+  timestamp: string;
+}
+
+export interface Preset {
+  id: string;
+  name: string;
+  repo: string;
+  config: string;
+  split?: string;
+}
+
+export interface PanelNav {
+  datasetId: string;
+  level: 1 | 2;
+  exampleIdx?: number;
+}