feat: add AdaEvolve visualizer tab for reasoning stickiness analysis

New tab with timeline view (L1/L2/L3 color-coded bars), detail view
with reasoning traces, code, and meta-guidance tactics. Backend API
for loading AdaEvolve HF datasets.

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

backend/api/adaevolve_datasets.py

@@ -0,0 +1,164 @@
+import hashlib
+from flask import Blueprint, request, jsonify
+from datasets import load_dataset
+
+bp = Blueprint("adaevolve_datasets", __name__, url_prefix="/api/adaevolve/datasets")
+
+_cache: dict[str, dict] = {}
+
+
+def _make_id(repo: str, split: str) -> str:
+    key = f"{repo}:{split}"
+    return hashlib.md5(key.encode()).hexdigest()[:12]
+
+
+def _build_iteration_summary(row: dict, idx: int) -> dict:
+    """Build a summary for one iteration row."""
+    return {
+        "index": idx,
+        "iteration": row.get("iteration", idx),
+        "island_id": row.get("island_id", 0),
+        "score": row.get("score", 0.0),
+        "best_score": row.get("best_score", 0.0),
+        "delta": row.get("delta", 0.0),
+        "adaptation_type": row.get("adaptation_type", ""),
+        "exploration_intensity": row.get("exploration_intensity", 0.0),
+        "is_valid": row.get("is_valid", False),
+        "task_id": row.get("task_id", ""),
+        "meta_guidance_tactic": row.get("meta_guidance_tactic", ""),
+        "tactic_approach_type": row.get("tactic_approach_type", ""),
+    }
+
+
+def _build_summary_stats(iterations: list[dict]) -> dict:
+    """Build aggregate stats across all iterations."""
+    adaptation_counts: dict[str, int] = {}
+    island_best_scores: dict[int, float] = {}
+    global_best = 0.0
+
+    for it in iterations:
+        atype = it.get("adaptation_type", "unknown")
+        adaptation_counts[atype] = adaptation_counts.get(atype, 0) + 1
+
+        iid = it.get("island_id", 0)
+        score = it.get("best_score", 0.0)
+        if iid not in island_best_scores or score > island_best_scores[iid]:
+            island_best_scores[iid] = score
+
+        if score > global_best:
+            global_best = score
+
+    return {
+        "adaptation_counts": adaptation_counts,
+        "island_best_scores": {str(k): v for k, v in island_best_scores.items()},
+        "global_best": global_best,
+        "n_islands": len(island_best_scores),
+    }
+
+
+@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
+
+    split = data.get("split", "train")
+
+    try:
+        ds = load_dataset(repo, split=split)
+    except Exception as e:
+        return jsonify({"error": f"Failed to load dataset: {e}"}), 400
+
+    ds_id = _make_id(repo, split)
+
+    # Build iteration summaries
+    iterations = []
+    for i in range(len(ds)):
+        row = ds[i]
+        summary = _build_iteration_summary(row, i)
+        iterations.append(summary)
+
+    summary_stats = _build_summary_stats(iterations)
+
+    _cache[ds_id] = {
+        "repo": repo,
+        "split": split,
+        "dataset": ds,
+        "iterations": iterations,
+    }
+
+    short_name = repo.rsplit("/", 1)[-1] if "/" in repo else repo
+
+    return jsonify({
+        "id": ds_id,
+        "repo": repo,
+        "name": short_name,
+        "split": split,
+        "iterations": iterations,
+        "n_iterations": len(iterations),
+        "summary_stats": summary_stats,
+    })
+
+
+@bp.route("/", methods=["GET"])
+def list_datasets():
+    result = []
+    for ds_id, info in _cache.items():
+        iterations = info["iterations"]
+        summary_stats = _build_summary_stats(iterations)
+        result.append({
+            "id": ds_id,
+            "repo": info["repo"],
+            "name": info["repo"].rsplit("/", 1)[-1] if "/" in info["repo"] else info["repo"],
+            "split": info["split"],
+            "n_iterations": len(iterations),
+            "iterations": iterations,
+            "summary_stats": summary_stats,
+        })
+    return jsonify(result)
+
+
+@bp.route("/<ds_id>/iterations", methods=["GET"])
+def get_iterations(ds_id):
+    if ds_id not in _cache:
+        return jsonify({"error": "Dataset not loaded"}), 404
+    return jsonify(_cache[ds_id]["iterations"])
+
+
+@bp.route("/<ds_id>/iteration/<int:idx>", methods=["GET"])
+def get_iteration(ds_id, idx):
+    """Get full detail for one iteration including prompt, reasoning, code."""
+    if ds_id not in _cache:
+        return jsonify({"error": "Dataset not loaded"}), 404
+
+    info = _cache[ds_id]
+    if idx < 0 or idx >= len(info["dataset"]):
+        return jsonify({"error": f"Iteration index {idx} out of range"}), 404
+
+    row = info["dataset"][idx]
+
+    return jsonify({
+        "index": idx,
+        "iteration": row.get("iteration", idx),
+        "island_id": row.get("island_id", 0),
+        "score": row.get("score", 0.0),
+        "best_score": row.get("best_score", 0.0),
+        "delta": row.get("delta", 0.0),
+        "adaptation_type": row.get("adaptation_type", ""),
+        "exploration_intensity": row.get("exploration_intensity", 0.0),
+        "is_valid": row.get("is_valid", False),
+        "task_id": row.get("task_id", ""),
+        "prompt_text": row.get("prompt_text", ""),
+        "reasoning_trace": row.get("reasoning_trace", ""),
+        "program_code": row.get("program_code", ""),
+        "meta_guidance_tactic": row.get("meta_guidance_tactic", ""),
+        "tactic_approach_type": row.get("tactic_approach_type", ""),
+    })
+
+
+@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/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", "rlm-eval", "harbor"}
+VALID_TYPES = {"model", "arena", "rlm", "rlm-eval", "harbor", "adaevolve"}
 LOCAL_PRESETS_DIR = os.path.join(os.path.dirname(os.path.dirname(__file__)), "presets")
 
 # In-memory cache: vis_type -> list[dict]

backend/app.py

@@ -6,12 +6,13 @@ 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, presets
+    from backend.api import model_datasets, arena_datasets, rlm_datasets, rlm_eval_datasets, harbor_datasets, adaevolve_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(adaevolve_datasets.bp)
     app.register_blueprint(presets.bp)
 
     @app.route("/api/health")

frontend/src/App.tsx

@@ -5,8 +5,9 @@ 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";
+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" },
@@ -14,6 +15,7 @@ const TABS: { id: TabId; label: string; color: string; activeClass: string }[] =
   { 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 App() {
@@ -73,6 +75,11 @@ export default function App() {
               <HarborApp />
             </div>
           )}
+          {activeTab === "adaevolve" && (
+            <div className="theme-adaevolve h-full">
+              <AdaevolveApp />
+            </div>
+          )}
         </Suspense>
       </div>
     </div>

frontend/src/adaevolve/AdaevolveApp.tsx

@@ -0,0 +1,538 @@
+import { useEffect, useState, useMemo } from "react";
+import { useAppState } from "./store";
+import type { IterationSummary } from "./types";
+
+const ADAPTATION_COLORS: Record<string, { bg: string; text: string; bar: string }> = {
+  L1_explore: { bg: "bg-blue-900/40", text: "text-blue-400", bar: "bg-blue-500" },
+  L1_exploit: { bg: "bg-green-900/40", text: "text-green-400", bar: "bg-green-500" },
+  L2_migrate: { bg: "bg-amber-900/40", text: "text-amber-400", bar: "bg-amber-500" },
+  L3_meta: { bg: "bg-red-900/40", text: "text-red-400", bar: "bg-red-500" },
+};
+
+const DEFAULT_COLOR = { bg: "bg-gray-900/40", text: "text-gray-400", bar: "bg-gray-500" };
+
+function getAdaptationColor(type: string) {
+  return ADAPTATION_COLORS[type] || DEFAULT_COLOR;
+}
+
+type SortKey = "iteration" | "score" | "best_score" | "delta" | "island_id" | "adaptation_type";
+type SortDir = "asc" | "desc";
+
+export default function AdaevolveApp() {
+  const store = useAppState();
+  const { state } = store;
+  const [repoInput, setRepoInput] = useState("");
+  const [sortKey, setSortKey] = useState<SortKey>("iteration");
+  const [sortDir, setSortDir] = useState<SortDir>("asc");
+
+  useEffect(() => {
+    store.loadPresets();
+  }, []);
+
+  // Get the currently selected dataset
+  const selectedDataset = useMemo(
+    () => state.datasets.find((d) => d.id === state.selectedDatasetId) ?? null,
+    [state.datasets, state.selectedDatasetId]
+  );
+
+  // Filter iterations by adaptation type
+  const filteredIterations = useMemo(() => {
+    if (!selectedDataset) return [];
+    let iters = selectedDataset.iterations;
+    if (state.filterAdaptation) {
+      iters = iters.filter((it) => it.adaptation_type === state.filterAdaptation);
+    }
+    return iters;
+  }, [selectedDataset, state.filterAdaptation]);
+
+  // Sort iterations
+  const sortedIterations = useMemo(() => {
+    const sorted = [...filteredIterations];
+    sorted.sort((a, b) => {
+      const av = a[sortKey];
+      const bv = b[sortKey];
+      if (typeof av === "number" && typeof bv === "number") {
+        return sortDir === "asc" ? av - bv : bv - av;
+      }
+      const sa = String(av);
+      const sb = String(bv);
+      return sortDir === "asc" ? sa.localeCompare(sb) : sb.localeCompare(sa);
+    });
+    return sorted;
+  }, [filteredIterations, sortKey, sortDir]);
+
+  // Get all unique adaptation types across selected dataset
+  const adaptationTypes = useMemo(() => {
+    if (!selectedDataset) return [];
+    const types = new Set(selectedDataset.iterations.map((it) => it.adaptation_type));
+    return Array.from(types).sort();
+  }, [selectedDataset]);
+
+  function handleSort(key: SortKey) {
+    if (sortKey === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  }
+
+  function handleLoad() {
+    if (repoInput.trim()) {
+      store.loadDataset(repoInput.trim());
+      setRepoInput("");
+    }
+  }
+
+  // Compute max score for bar chart scaling
+  const maxScore = useMemo(() => {
+    if (!filteredIterations.length) return 1;
+    return Math.max(...filteredIterations.map((it) => Math.abs(it.score)), 0.001);
+  }, [filteredIterations]);
+
+  const sortIndicator = (key: SortKey) => {
+    if (sortKey !== key) return "";
+    return sortDir === "asc" ? " ^" : " v";
+  };
+
+  return (
+    <div className="flex h-full overflow-hidden">
+      {/* Sidebar */}
+      <div className="w-72 border-r border-gray-800 bg-gray-900 flex flex-col overflow-hidden shrink-0">
+        {/* Repo input */}
+        <div className="p-3 border-b border-gray-800">
+          <label className="text-xs text-gray-500 mb-1 block">HuggingFace Repo</label>
+          <div className="flex gap-1">
+            <input
+              type="text"
+              value={repoInput}
+              onChange={(e) => setRepoInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleLoad()}
+              placeholder="org/dataset-name"
+              className="flex-1 bg-gray-800 text-sm px-2 py-1.5 rounded border border-gray-700 focus:border-rose-500 focus:outline-none text-gray-200"
+            />
+            <button
+              onClick={handleLoad}
+              disabled={state.loading || !repoInput.trim()}
+              className="bg-rose-600 hover:bg-rose-500 disabled:opacity-50 text-white text-sm px-3 py-1.5 rounded"
+            >
+              Load
+            </button>
+          </div>
+        </div>
+
+        {/* Presets */}
+        <div className="p-3 border-b border-gray-800">
+          <div className="text-xs text-gray-500 mb-2">Presets</div>
+          {state.presets.length === 0 && (
+            <div className="text-xs text-gray-600">No presets available</div>
+          )}
+          <div className="space-y-1 max-h-32 overflow-y-auto">
+            {state.presets.map((p) => (
+              <div
+                key={p.id}
+                className="flex items-center justify-between group"
+              >
+                <button
+                  onClick={() => store.loadPreset(p)}
+                  className="text-xs text-rose-400 hover:text-rose-300 truncate flex-1 text-left"
+                  title={p.repo}
+                >
+                  {p.name}
+                </button>
+                <button
+                  onClick={() => store.deletePreset(p.id)}
+                  className="text-gray-600 hover:text-red-400 text-xs opacity-0 group-hover:opacity-100 ml-1"
+                >
+                  x
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Loaded datasets */}
+        <div className="flex-1 overflow-y-auto p-3">
+          <div className="text-xs text-gray-500 mb-2">
+            Loaded Datasets ({state.datasets.length})
+          </div>
+          {state.datasets.map((ds) => (
+            <div
+              key={ds.id}
+              className={`mb-3 p-2 rounded border cursor-pointer ${
+                state.selectedDatasetId === ds.id
+                  ? "border-rose-500 bg-rose-900/20"
+                  : "border-gray-700 hover:border-gray-600"
+              }`}
+              onClick={() => store.selectDataset(ds.id)}
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-200 truncate" title={ds.repo}>
+                  {ds.name}
+                </span>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    store.unloadDataset(ds.id);
+                  }}
+                  className="text-gray-600 hover:text-red-400 text-xs ml-1"
+                >
+                  x
+                </button>
+              </div>
+              <div className="text-xs text-gray-500 mt-1">
+                {ds.n_iterations} iterations | {ds.summary_stats.n_islands} islands
+              </div>
+              <div className="text-xs text-gray-500">
+                Best: {ds.summary_stats.global_best.toFixed(4)}
+              </div>
+              {/* Adaptation breakdown */}
+              <div className="mt-1 space-y-0.5">
+                {Object.entries(ds.summary_stats.adaptation_counts).map(([type, count]) => {
+                  const color = getAdaptationColor(type);
+                  return (
+                    <div key={type} className="flex items-center text-xs gap-1">
+                      <span className={`w-2 h-2 rounded-full ${color.bar}`} />
+                      <span className={color.text}>{type}</span>
+                      <span className="text-gray-600 ml-auto">{count}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Filter by adaptation type */}
+        {selectedDataset && (
+          <div className="p-3 border-t border-gray-800">
+            <div className="text-xs text-gray-500 mb-1">Filter by Adaptation</div>
+            <select
+              value={state.filterAdaptation}
+              onChange={(e) => store.setFilterAdaptation(e.target.value)}
+              className="w-full bg-gray-800 text-sm px-2 py-1 rounded border border-gray-700 text-gray-200"
+            >
+              <option value="">All</option>
+              {adaptationTypes.map((t) => (
+                <option key={t} value={t}>
+                  {t}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {state.error && (
+          <div className="bg-red-900/50 border-b border-red-700 px-4 py-2 text-sm text-red-200 flex justify-between items-center">
+            <span>{state.error}</span>
+            <button
+              onClick={() => store.setError(null)}
+              className="text-red-400 hover:text-red-200 ml-4"
+            >
+              dismiss
+            </button>
+          </div>
+        )}
+
+        {state.loading && (
+          <div className="bg-rose-900/30 border-b border-rose-800 px-4 py-1.5 text-xs text-rose-300">
+            Loading...
+          </div>
+        )}
+
+        {/* Timeline view */}
+        {state.viewMode === "timeline" && selectedDataset && (
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* Bar chart */}
+            <div className="border-b border-gray-800 p-4 shrink-0">
+              <div className="text-sm text-gray-400 mb-2">
+                Score Timeline ({filteredIterations.length} iterations)
+              </div>
+              <div className="flex items-end gap-px h-32 overflow-x-auto">
+                {filteredIterations.map((it) => {
+                  const height = Math.max((Math.abs(it.score) / maxScore) * 100, 2);
+                  const color = getAdaptationColor(it.adaptation_type);
+                  return (
+                    <div
+                      key={it.index}
+                      className="flex flex-col items-center justify-end flex-shrink-0 cursor-pointer group"
+                      style={{ minWidth: Math.max(4, Math.min(20, 800 / filteredIterations.length)) }}
+                      onClick={() => store.selectIteration(selectedDataset.id, it.index)}
+                      title={`iter ${it.iteration} | score ${it.score.toFixed(4)} | ${it.adaptation_type}`}
+                    >
+                      <div
+                        className={`w-full rounded-t ${color.bar} group-hover:opacity-80 transition-opacity`}
+                        style={{ height: `${height}%` }}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+              {/* Legend */}
+              <div className="flex gap-4 mt-2">
+                {Object.entries(ADAPTATION_COLORS).map(([type, color]) => (
+                  <div key={type} className="flex items-center gap-1 text-xs">
+                    <span className={`w-2 h-2 rounded-full ${color.bar}`} />
+                    <span className={color.text}>{type}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Iteration table */}
+            <div className="flex-1 overflow-auto">
+              <table className="w-full text-sm">
+                <thead className="sticky top-0 bg-gray-900 border-b border-gray-800">
+                  <tr>
+                    {(
+                      [
+                        ["iteration", "Iter"],
+                        ["island_id", "Island"],
+                        ["score", "Score"],
+                        ["best_score", "Best"],
+                        ["delta", "Delta"],
+                        ["adaptation_type", "Adaptation"],
+                      ] as [SortKey, string][]
+                    ).map(([key, label]) => (
+                      <th
+                        key={key}
+                        onClick={() => handleSort(key)}
+                        className="px-3 py-2 text-left text-gray-400 font-medium cursor-pointer hover:text-gray-200 select-none"
+                      >
+                        {label}
+                        {sortIndicator(key)}
+                      </th>
+                    ))}
+                    <th className="px-3 py-2 text-left text-gray-400 font-medium">Valid</th>
+                    <th className="px-3 py-2 text-left text-gray-400 font-medium">Task</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {sortedIterations.map((it) => {
+                    const color = getAdaptationColor(it.adaptation_type);
+                    return (
+                      <tr
+                        key={it.index}
+                        onClick={() => store.selectIteration(selectedDataset.id, it.index)}
+                        className="border-b border-gray-800/50 hover:bg-gray-800/50 cursor-pointer"
+                      >
+                        <td className="px-3 py-1.5 text-gray-300">{it.iteration}</td>
+                        <td className="px-3 py-1.5 text-gray-300">{it.island_id}</td>
+                        <td className="px-3 py-1.5 text-gray-200 font-mono">
+                          {it.score.toFixed(4)}
+                        </td>
+                        <td className="px-3 py-1.5 text-gray-200 font-mono">
+                          {it.best_score.toFixed(4)}
+                        </td>
+                        <td
+                          className={`px-3 py-1.5 font-mono ${
+                            it.delta > 0
+                              ? "text-green-400"
+                              : it.delta < 0
+                              ? "text-red-400"
+                              : "text-gray-500"
+                          }`}
+                        >
+                          {it.delta > 0 ? "+" : ""}
+                          {it.delta.toFixed(4)}
+                        </td>
+                        <td className="px-3 py-1.5">
+                          <span
+                            className={`px-1.5 py-0.5 rounded text-xs ${color.bg} ${color.text}`}
+                          >
+                            {it.adaptation_type}
+                          </span>
+                        </td>
+                        <td className="px-3 py-1.5">
+                          {it.is_valid ? (
+                            <span className="text-green-400 text-xs">yes</span>
+                          ) : (
+                            <span className="text-red-400 text-xs">no</span>
+                          )}
+                        </td>
+                        <td className="px-3 py-1.5 text-gray-500 text-xs truncate max-w-[150px]">
+                          {it.task_id}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* Detail view */}
+        {state.viewMode === "detail" && state.iterationDetail && (
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* Detail header */}
+            <div className="border-b border-gray-800 px-4 py-2 flex items-center gap-4 shrink-0">
+              <button
+                onClick={() => store.backToTimeline()}
+                className="text-rose-400 hover:text-rose-300 text-sm"
+              >
+                &larr; Back to timeline
+              </button>
+              <div className="text-sm text-gray-300">
+                Iteration {state.iterationDetail.iteration} | Island{" "}
+                {state.iterationDetail.island_id}
+              </div>
+              <div className="flex items-center gap-2 ml-auto">
+                <span
+                  className={`px-2 py-0.5 rounded text-xs ${
+                    getAdaptationColor(state.iterationDetail.adaptation_type).bg
+                  } ${getAdaptationColor(state.iterationDetail.adaptation_type).text}`}
+                >
+                  {state.iterationDetail.adaptation_type}
+                </span>
+                <span className="text-gray-400 text-sm font-mono">
+                  score: {state.iterationDetail.score.toFixed(4)}
+                </span>
+                <span
+                  className={`text-sm font-mono ${
+                    state.iterationDetail.delta > 0
+                      ? "text-green-400"
+                      : state.iterationDetail.delta < 0
+                      ? "text-red-400"
+                      : "text-gray-500"
+                  }`}
+                >
+                  ({state.iterationDetail.delta > 0 ? "+" : ""}
+                  {state.iterationDetail.delta.toFixed(4)})
+                </span>
+                {state.iterationDetail.is_valid ? (
+                  <span className="text-green-400 text-xs border border-green-800 rounded px-1">
+                    valid
+                  </span>
+                ) : (
+                  <span className="text-red-400 text-xs border border-red-800 rounded px-1">
+                    invalid
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Detail grid */}
+            <div className="flex-1 overflow-auto p-4">
+              <div className="grid grid-cols-2 gap-4 h-full">
+                {/* Meta info */}
+                <div className="col-span-2 grid grid-cols-4 gap-3">
+                  <div className="bg-gray-900 rounded border border-gray-800 p-3">
+                    <div className="text-xs text-gray-500 mb-1">Task ID</div>
+                    <div className="text-sm text-gray-200 break-all">
+                      {state.iterationDetail.task_id || "-"}
+                    </div>
+                  </div>
+                  <div className="bg-gray-900 rounded border border-gray-800 p-3">
+                    <div className="text-xs text-gray-500 mb-1">Exploration Intensity</div>
+                    <div className="text-sm text-gray-200 font-mono">
+                      {state.iterationDetail.exploration_intensity.toFixed(4)}
+                    </div>
+                  </div>
+                  <div className="bg-gray-900 rounded border border-gray-800 p-3">
+                    <div className="text-xs text-gray-500 mb-1">Meta-Guidance Tactic</div>
+                    <div className="text-sm text-gray-200">
+                      {state.iterationDetail.meta_guidance_tactic || "-"}
+                    </div>
+                  </div>
+                  <div className="bg-gray-900 rounded border border-gray-800 p-3">
+                    <div className="text-xs text-gray-500 mb-1">Tactic Approach</div>
+                    <div className="text-sm text-gray-200">
+                      {state.iterationDetail.tactic_approach_type || "-"}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Prompt */}
+                <div className="bg-gray-900 rounded border border-gray-800 flex flex-col overflow-hidden">
+                  <div className="px-3 py-2 border-b border-gray-800 text-xs text-rose-400 font-medium shrink-0">
+                    Prompt
+                  </div>
+                  <pre className="flex-1 overflow-auto p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
+                    {state.iterationDetail.prompt_text || "(empty)"}
+                  </pre>
+                </div>
+
+                {/* Reasoning trace */}
+                <div className="bg-gray-900 rounded border border-gray-800 flex flex-col overflow-hidden">
+                  <div className="px-3 py-2 border-b border-gray-800 text-xs text-rose-400 font-medium shrink-0">
+                    Reasoning Trace
+                  </div>
+                  <pre className="flex-1 overflow-auto p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
+                    {state.iterationDetail.reasoning_trace || "(empty)"}
+                  </pre>
+                </div>
+
+                {/* Generated code */}
+                <div className="col-span-2 bg-gray-900 rounded border border-gray-800 flex flex-col overflow-hidden max-h-96">
+                  <div className="px-3 py-2 border-b border-gray-800 text-xs text-rose-400 font-medium shrink-0">
+                    Generated Code
+                  </div>
+                  <pre className="flex-1 overflow-auto p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
+                    {state.iterationDetail.program_code || "(empty)"}
+                  </pre>
+                </div>
+              </div>
+            </div>
+
+            {/* Navigation */}
+            {selectedDataset && (
+              <div className="border-t border-gray-800 px-4 py-2 flex items-center justify-between shrink-0">
+                <button
+                  onClick={() => {
+                    const idx = state.iterationDetail!.index;
+                    if (idx > 0) store.selectIteration(selectedDataset.id, idx - 1);
+                  }}
+                  disabled={state.iterationDetail.index <= 0}
+                  className="text-sm text-rose-400 hover:text-rose-300 disabled:opacity-30 disabled:cursor-default"
+                >
+                  &larr; Previous
+                </button>
+                <span className="text-xs text-gray-500">
+                  {state.iterationDetail.index + 1} / {selectedDataset.n_iterations}
+                </span>
+                <button
+                  onClick={() => {
+                    const idx = state.iterationDetail!.index;
+                    if (idx < selectedDataset.n_iterations - 1)
+                      store.selectIteration(selectedDataset.id, idx + 1);
+                  }}
+                  disabled={
+                    state.iterationDetail.index >= selectedDataset.n_iterations - 1
+                  }
+                  className="text-sm text-rose-400 hover:text-rose-300 disabled:opacity-30 disabled:cursor-default"
+                >
+                  Next &rarr;
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Empty state */}
+        {state.datasets.length === 0 && state.viewMode === "timeline" && (
+          <div className="flex-1 flex items-center justify-center text-gray-500">
+            <div className="text-center">
+              <div className="text-lg mb-2">No datasets loaded</div>
+              <div className="text-sm">
+                Load a HuggingFace repo from the sidebar or select a preset
+              </div>
+            </div>
+          </div>
+        )}
+
+        {state.datasets.length > 0 && !selectedDataset && state.viewMode === "timeline" && (
+          <div className="flex-1 flex items-center justify-center text-gray-500">
+            <div className="text-center">
+              <div className="text-lg mb-2">Select a dataset</div>
+              <div className="text-sm">Click a dataset in the sidebar to view its iterations</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/adaevolve/api.ts

@@ -0,0 +1,51 @@
+import type { DatasetInfo, IterationDetail, Preset } from "./types";
+
+const BASE = "/api/adaevolve";
+const PRESETS_BASE = "/api/presets/adaevolve";
+
+async function fetchJson<T>(url: string, opts?: RequestInit): Promise<T> {
+  const res = await fetch(url, opts);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+// Datasets
+export async function loadDataset(repo: string, split = "train"): Promise<DatasetInfo> {
+  return fetchJson(`${BASE}/datasets/load`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ repo, split }),
+  });
+}
+
+export async function listDatasets(): Promise<DatasetInfo[]> {
+  return fetchJson(`${BASE}/datasets/`);
+}
+
+export async function getIterationDetail(dsId: string, idx: number): Promise<IterationDetail> {
+  return fetchJson(`${BASE}/datasets/${dsId}/iteration/${idx}`);
+}
+
+export async function unloadDataset(dsId: string): Promise<void> {
+  await fetchJson(`${BASE}/datasets/${dsId}`, { method: "DELETE" });
+}
+
+// Presets
+export async function listPresets(): Promise<Preset[]> {
+  return fetchJson(PRESETS_BASE);
+}
+
+export async function createPreset(name: string, repo: string, split = "train"): Promise<Preset> {
+  return fetchJson(PRESETS_BASE, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name, repo, split }),
+  });
+}
+
+export async function deletePreset(id: string): Promise<void> {
+  await fetchJson(`${PRESETS_BASE}/${id}`, { method: "DELETE" });
+}

frontend/src/adaevolve/store.ts

@@ -0,0 +1,180 @@
+import { useCallback, useState } from "react";
+import type {
+  DatasetInfo,
+  IterationDetail,
+  Preset,
+  ViewMode,
+} from "./types";
+import * as api from "./api";
+
+export interface AppState {
+  datasets: DatasetInfo[];
+  presets: Preset[];
+  selectedDatasetId: string | null;
+  selectedIterationIdx: number | null;
+  iterationDetail: IterationDetail | null;
+  viewMode: ViewMode;
+  loading: boolean;
+  error: string | null;
+  filterAdaptation: string; // "" means all
+}
+
+const initialState: AppState = {
+  datasets: [],
+  presets: [],
+  selectedDatasetId: null,
+  selectedIterationIdx: null,
+  iterationDetail: null,
+  viewMode: "timeline",
+  loading: false,
+  error: null,
+  filterAdaptation: "",
+};
+
+export function useAppState() {
+  const [state, setState] = useState<AppState>(initialState);
+
+  const setError = useCallback((error: string | null) => {
+    setState((s) => ({ ...s, error }));
+  }, []);
+
+  const loadDataset = useCallback(async (repo: string, split = "train") => {
+    setState((s) => ({ ...s, loading: true, error: null }));
+    try {
+      const ds = await api.loadDataset(repo, split);
+      setState((s) => {
+        const exists = s.datasets.find((d) => d.id === ds.id);
+        const datasets = exists
+          ? s.datasets.map((d) => (d.id === ds.id ? ds : d))
+          : [...s.datasets, ds];
+        const selectedDatasetId = ds.id;
+        return {
+          ...s,
+          datasets,
+          selectedDatasetId,
+          loading: false,
+        };
+      });
+    } catch (e: unknown) {
+      setState((s) => ({
+        ...s,
+        loading: false,
+        error: e instanceof Error ? e.message : String(e),
+      }));
+    }
+  }, []);
+
+  const unloadDataset = useCallback(async (dsId: string) => {
+    try {
+      await api.unloadDataset(dsId);
+      setState((s) => {
+        const datasets = s.datasets.filter((d) => d.id !== dsId);
+        return {
+          ...s,
+          datasets,
+          selectedDatasetId: s.selectedDatasetId === dsId ? null : s.selectedDatasetId,
+          selectedIterationIdx: s.selectedDatasetId === dsId ? null : s.selectedIterationIdx,
+          iterationDetail: s.selectedDatasetId === dsId ? null : s.iterationDetail,
+        };
+      });
+    } catch (e: unknown) {
+      setState((s) => ({
+        ...s,
+        error: e instanceof Error ? e.message : String(e),
+      }));
+    }
+  }, []);
+
+  const selectDataset = useCallback((dsId: string | null) => {
+    setState((s) => ({
+      ...s,
+      selectedDatasetId: dsId,
+      selectedIterationIdx: null,
+      iterationDetail: null,
+      viewMode: "timeline",
+    }));
+  }, []);
+
+  const selectIteration = useCallback(async (dsId: string, idx: number) => {
+    setState((s) => ({ ...s, loading: true, error: null }));
+    try {
+      const detail = await api.getIterationDetail(dsId, idx);
+      setState((s) => ({
+        ...s,
+        selectedDatasetId: dsId,
+        selectedIterationIdx: idx,
+        iterationDetail: detail,
+        viewMode: "detail",
+        loading: false,
+      }));
+    } catch (e: unknown) {
+      setState((s) => ({
+        ...s,
+        loading: false,
+        error: e instanceof Error ? e.message : String(e),
+      }));
+    }
+  }, []);
+
+  const backToTimeline = useCallback(() => {
+    setState((s) => ({
+      ...s,
+      selectedIterationIdx: null,
+      iterationDetail: null,
+      viewMode: "timeline",
+    }));
+  }, []);
+
+  const loadPresets = useCallback(async () => {
+    try {
+      const presets = await api.listPresets();
+      setState((s) => ({ ...s, presets }));
+    } catch {
+      // Presets might not exist yet
+    }
+  }, []);
+
+  const createPreset = useCallback(
+    async (name: string, repo: string, split = "train") => {
+      const preset = await api.createPreset(name, repo, split);
+      setState((s) => ({ ...s, presets: [...s.presets, preset] }));
+    },
+    []
+  );
+
+  const deletePreset = useCallback(async (id: string) => {
+    await api.deletePreset(id);
+    setState((s) => ({ ...s, presets: s.presets.filter((p) => p.id !== id) }));
+  }, []);
+
+  const loadPreset = useCallback(
+    async (preset: Preset) => {
+      await loadDataset(preset.repo, preset.split);
+    },
+    [loadDataset]
+  );
+
+  const setViewMode = useCallback((viewMode: ViewMode) => {
+    setState((s) => ({ ...s, viewMode }));
+  }, []);
+
+  const setFilterAdaptation = useCallback((filterAdaptation: string) => {
+    setState((s) => ({ ...s, filterAdaptation }));
+  }, []);
+
+  return {
+    state,
+    loadDataset,
+    unloadDataset,
+    selectDataset,
+    selectIteration,
+    backToTimeline,
+    loadPresets,
+    createPreset,
+    deletePreset,
+    loadPreset,
+    setViewMode,
+    setFilterAdaptation,
+    setError,
+  };
+}

frontend/src/adaevolve/types.ts

@@ -0,0 +1,64 @@
+// Iteration summary (list level)
+export interface IterationSummary {
+  index: number;
+  iteration: number;
+  island_id: number;
+  score: number;
+  best_score: number;
+  delta: number;
+  adaptation_type: string;
+  exploration_intensity: number;
+  is_valid: boolean;
+  task_id: string;
+  meta_guidance_tactic: string;
+  tactic_approach_type: string;
+}
+
+// Summary stats
+export interface SummaryStats {
+  adaptation_counts: Record<string, number>;
+  island_best_scores: Record<string, number>;
+  global_best: number;
+  n_islands: number;
+}
+
+// Dataset / repo level
+export interface DatasetInfo {
+  id: string;
+  repo: string;
+  name: string;
+  split: string;
+  iterations: IterationSummary[];
+  n_iterations: number;
+  summary_stats: SummaryStats;
+}
+
+// Full iteration detail
+export interface IterationDetail {
+  index: number;
+  iteration: number;
+  island_id: number;
+  score: number;
+  best_score: number;
+  delta: number;
+  adaptation_type: string;
+  exploration_intensity: number;
+  is_valid: boolean;
+  task_id: string;
+  prompt_text: string;
+  reasoning_trace: string;
+  program_code: string;
+  meta_guidance_tactic: string;
+  tactic_approach_type: string;
+}
+
+// Preset
+export interface Preset {
+  id: string;
+  name: string;
+  repo: string;
+  split: string;
+}
+
+// View mode
+export type ViewMode = "timeline" | "detail";