added delete benchmark(s) endpoints and exposed them in frontend

DocPilot/backend/app/core/dependencies.py

@@ -1,3 +1,4 @@
+print("USING DOCPILOT DEPENDENCIES")
 from fastapi import Depends, HTTPException
 
 from fastapi.security import OAuth2PasswordBearer

GaugePilot/backend/app/api/benchmark.py

@@ -1,7 +1,7 @@
 from fastapi import APIRouter, Depends
 
 from sqlalchemy.orm import Session
-
+from fastapi import HTTPException
 import json
 
 from GaugePilot.backend.app.core.dependencies import (
@@ -32,6 +32,12 @@ from pilotcore.runtime.experiment_config import (
     ExperimentConfig,
 )
 
+from sqlalchemy.orm import Session
+
+from GaugePilot.backend.app.db.session import get_db
+
+from GaugePilot.backend.app.models.benchmark_run import BenchmarkRun
+
 router = APIRouter()
 
 
@@ -82,9 +88,23 @@ def run_benchmark_endpoint(
 
     leaderboard = generate_leaderboard(results)
 
+    # Use the most recently uploaded document name (from DocPilot) as the benchmark run name.
+    from DocPilot.backend.app.models.document import Document as PilotDocument
+
+    uploaded_document = (
+        db.query(PilotDocument)
+        .filter(PilotDocument.owner_id == current_user.id)
+        .order_by(PilotDocument.created_at.desc())
+        .first()
+    )
+
+    benchmark_name = (
+        uploaded_document.filename if uploaded_document else "Benchmark Run"
+    )
+
     run = BenchmarkRun(
         owner_id=current_user.id,
-        name="Benchmark Run",
+        name=benchmark_name,
         leaderboard_json=json.dumps(leaderboard),
     )
 
@@ -111,3 +131,59 @@ def get_runs(
     )
 
     return runs
+
+
+@router.get("/runs")
+def get_benchmark_runs(
+    db: Session = Depends(get_db),
+    current_user=Depends(get_current_user),
+):
+    runs = (
+        db.query(BenchmarkRun)
+        .filter(BenchmarkRun.owner_id == current_user.id)
+        .order_by(BenchmarkRun.created_at.desc())
+        .all()
+    )
+
+    return runs
+
+
+@router.delete("/runs/reset")
+def reset_benchmark_runs(
+    db: Session = Depends(get_db),
+    current_user=Depends(get_current_user),
+):
+    (db.query(BenchmarkRun).filter(BenchmarkRun.owner_id == current_user.id).delete())
+
+    db.commit()
+
+    return {"message": "All benchmark runs deleted"}
+
+
+@router.delete("/runs/{run_id}")
+def delete_benchmark_run(
+    run_id: int,
+    db: Session = Depends(get_db),
+    current_user=Depends(get_current_user),
+):
+    run = (
+        db.query(BenchmarkRun)
+        .filter(
+            BenchmarkRun.id == run_id,
+            BenchmarkRun.owner_id == current_user.id,
+        )
+        .first()
+    )
+
+    if not run:
+        raise HTTPException(
+            status_code=404,
+            detail="Benchmark run not found",
+        )
+
+    db.delete(run)
+    db.commit()
+
+    return {
+        "message": "Benchmark deleted",
+    }

GaugePilot/backend/app/api/documents.py

@@ -21,12 +21,11 @@ from pilotcore.retrieval.vector_store import (
     rebuild_index_without_document,
 )
 
-from DocPilot.backend.app.core.dependencies import (
+from GaugePilot.backend.app.core.dependencies import (
     get_current_user,
 )
 
-from DocPilot.backend.app.db.session import get_db
-
+from GaugePilot.backend.app.db.session import get_db
 from DocPilot.backend.app.models.document import Document
 
 from GaugePilot.backend.app.schemas.document import (

GaugePilot/backend/app/core/dependencies.py

@@ -1,5 +1,47 @@
-from fastapi import Depends
+print("USING GAUGEPILOT DEPENDENCIES")
+from fastapi import Depends, HTTPException
+from fastapi.security import OAuth2PasswordBearer
 
-# Reuse DocPilot's auth/db wiring if available in this monorepo.
-# This keeps GaugePilot thin while preserving existing behavior.
-from DocPilot.backend.app.core.dependencies import get_current_user  # noqa: F401
+from jose import JWTError, jwt
+from sqlalchemy.orm import Session
+
+from DocPilot.backend.app.db.session import get_db
+from DocPilot.backend.app.models.user import User
+from DocPilot.backend.app.core.security import (
+    SECRET_KEY,
+    ALGORITHM,
+)
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/docpilot/auth/login")
+
+
+def get_current_user(
+    token: str = Depends(oauth2_scheme),
+    db: Session = Depends(get_db),
+):
+    credentials_exception = HTTPException(
+        status_code=401,
+        detail="Could not validate credentials",
+    )
+
+    try:
+        payload = jwt.decode(
+            token,
+            SECRET_KEY,
+            algorithms=[ALGORITHM],
+        )
+
+        email = payload.get("sub")
+
+        if email is None:
+            raise credentials_exception
+
+    except JWTError:
+        raise credentials_exception
+
+    user = db.query(User).filter(User.email == email).first()
+
+    if user is None:
+        raise credentials_exception
+
+    return user

frontend/src/gaugepilot/GaugePilot.jsx

@@ -33,75 +33,81 @@ export default function GaugePilot({ onHome }) {
   const [isMobileOpen, setIsMobileOpen]   = useState(false);
   const [hoveredItem, setHoveredItem]     = useState(null);
   const [isMobile, setIsMobile]           = useState(false);
-  const [isTablet, setIsTablet]           = useState(false);
   const observersRef = useRef([]);
-const mainRef = useRef(null);
-const scrollToSection = (id) => {
-  document
-    .getElementById(id)
-    ?.scrollIntoView({
-      behavior: "smooth",
-      block: "start",
-    });
-};
+  const mainRef = useRef(null);
 
   // ── Responsive breakpoints ─────────────────────────────────────────────────
   useEffect(() => {
     const check = () => {
       setIsMobile(window.innerWidth < 640);
-      setIsTablet(window.innerWidth >= 640 && window.innerWidth < 1024);
     };
     check();
     window.addEventListener("resize", check);
     return () => window.removeEventListener("resize", check);
   }, []);
 
-  // ── Scroll spy ─────────────────────────────────────────────────────────────
+  // ── Scroll spy (bidirectional) ─────────────────────────────────────────────
+  // Uses scroll position on the main container to determine which section is
+  // currently "in view" by comparing scrollTop against each section's offsetTop.
+  // This avoids IntersectionObserver's one-directional rootMargin bias.
   useEffect(() => {
-    observersRef.current.forEach((o) => o.disconnect());
-    observersRef.current = [];
-
-    const observers = SECTION_IDS.map((id) => {
-      const el = document.getElementById(id);
-      if (!el) return null;
-      const obs = new IntersectionObserver(
-        ([entry]) => { if (entry.isIntersecting) setActiveSection(id); },
-        { rootMargin: "-30% 0px -60% 0px", threshold: 0 }
-      );
-      obs.observe(el);
-      observersRef.current.push(obs);
-      return obs;
-    });
-
-    return () => observers.forEach((o) => o?.disconnect());
-  }, []);
+    const mainEl = mainRef.current;
+    if (!mainEl) return;
 
-  // ── Navigation ─────────────────────────────────────────────────────────────
-const navigateTo = (sectionId) => {
-  if (isMobile) setIsMobileOpen(false);
+    const handleScroll = () => {
+      const scrollTop = mainEl.scrollTop;
+      const viewportH = mainEl.clientHeight;
+
+      // Collect all sections that exist in the DOM
+      const sections = SECTION_IDS
+        .map((id) => {
+          const el = document.getElementById(id);
+          return el ? { id, top: el.offsetTop } : null;
+        })
+        .filter(Boolean)
+        .sort((a, b) => a.top - b.top);
 
-  if (!sectionId) {
-    onHome?.();
-    return;
-  }
+      if (!sections.length) return;
 
-  const element = document.getElementById(sectionId);
+      // Pick the last section whose top edge is within the upper 40% of viewport
+      const threshold = scrollTop + viewportH * 0.4;
+      let current = sections[0].id;
+      for (const s of sections) {
+        if (s.top <= threshold) current = s.id;
+      }
 
-  if (element && mainRef.current) {
-    const top =
-      element.offsetTop - 20;
+      setActiveSection(current);
+    };
+
+    mainEl.addEventListener("scroll", handleScroll, { passive: true });
+    // Run once on mount so initial state is correct
+    handleScroll();
 
-    mainRef.current.scrollTo({
-      top,
-      behavior: "smooth",
-    });
+    return () => mainEl.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  // ── Navigation ─────────────────────────────────────────────────────────────
+  const navigateTo = (sectionId) => {
+    if (isMobile) setIsMobileOpen(false);
+
+    if (!sectionId) {
+      onHome?.();
+      return;
+    }
+
+    const element = document.getElementById(sectionId);
+    if (element && mainRef.current) {
+      mainRef.current.scrollTo({
+        top: element.offsetTop - 20,
+        behavior: "smooth",
+      });
+      setActiveSection(sectionId);
+    }
+  };
 
-    setActiveSection(sectionId);
-  }
-};
   // ── Design tokens ──────────────────────────────────────────────────────────
-  const accent      = "#4f6ef7";
-  const sidebarW    = isCollapsed ? "72px" : "240px";
+  const accent   = "#4f6ef7";
+  const sidebarW = isCollapsed ? "72px" : "240px";
 
   const sidebarStyle = {
     width: sidebarW,
@@ -111,9 +117,9 @@ const navigateTo = (sectionId) => {
     top: 0,
     display: "flex",
     flexDirection: "column",
-    background: "linear-gradient(180deg, rgba(10,14,35,0.98) 0%, rgba(8,12,28,0.99) 100%)",
-    borderRight: "1px solid rgba(255,255,255,0.07)",
-    boxShadow: "4px 0 24px rgba(0,0,0,0.3)",
+    background: "linear-gradient(180deg, rgba(12,17,42,0.99) 0%, rgba(9,13,32,1) 100%)",
+    borderRight: "1px solid rgba(255,255,255,0.1)",
+    boxShadow: "4px 0 24px rgba(0,0,0,0.35)",
     transition: "width 0.25s cubic-bezier(0.4,0,0.2,1), min-width 0.25s cubic-bezier(0.4,0,0.2,1)",
     zIndex: 50,
     overflowX: "hidden",
@@ -136,7 +142,7 @@ const navigateTo = (sectionId) => {
       {/* Branding */}
       <div style={{
         padding: isCollapsed ? "24px 0" : "28px 20px 20px",
-        borderBottom: "1px solid rgba(255,255,255,0.06)",
+        borderBottom: "1px solid rgba(255,255,255,0.09)",
         display: "flex", alignItems: "center",
         justifyContent: isCollapsed ? "center" : "space-between",
         gap: "10px", flexShrink: 0,
@@ -150,7 +156,7 @@ const navigateTo = (sectionId) => {
             }}>GaugePilot</h1>
             <p style={{
               margin: "7px 0 0", fontFamily: "'Courier New', monospace",
-              fontSize: "10px", fontWeight: 700, color: "rgba(255,255,255,0.35)",
+              fontSize: "10px", fontWeight: 700, color: "rgba(255,255,255,0.5)",
               letterSpacing: "0.05em", textTransform: "uppercase", whiteSpace: "nowrap",
             }}>benchmark & analysis</p>
           </div>
@@ -164,13 +170,20 @@ const navigateTo = (sectionId) => {
           <button
             onClick={() => setIsCollapsed((c) => !c)}
             style={{
-              background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)",
-              borderRadius: "8px", color: "rgba(255,255,255,0.5)", cursor: "pointer",
+              background: "rgba(255,255,255,0.07)",
+              border: "1px solid rgba(255,255,255,0.12)",
+              borderRadius: "8px", color: "rgba(255,255,255,0.65)", cursor: "pointer",
               padding: "5px 7px", fontSize: "12px", lineHeight: 1, flexShrink: 0,
               transition: "all 0.15s",
             }}
-            onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.1)"; e.currentTarget.style.color = "white"; }}
-            onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.05)"; e.currentTarget.style.color = "rgba(255,255,255,0.5)"; }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = "rgba(255,255,255,0.14)";
+              e.currentTarget.style.color = "white";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = "rgba(255,255,255,0.07)";
+              e.currentTarget.style.color = "rgba(255,255,255,0.65)";
+            }}
           >
             {isCollapsed ? "→" : "←"}
           </button>
@@ -178,7 +191,10 @@ const navigateTo = (sectionId) => {
       </div>
 
       {/* Nav groups */}
-      <nav style={{ flex: 1, overflowY: "auto", overflowX: "hidden", padding: "12px 8px", scrollbarWidth: "none" }}>
+      <nav style={{
+        flex: 1, overflowY: "auto", overflowX: "hidden",
+        padding: "12px 8px", scrollbarWidth: "none",
+      }}>
         {NAV_GROUPS.map((group) => (
           <div key={group.label} style={{ marginBottom: "4px" }}>
 
@@ -186,7 +202,7 @@ const navigateTo = (sectionId) => {
             {!isCollapsed && (
               <div style={{
                 fontSize: "10px", fontWeight: 700, letterSpacing: "0.12em",
-                textTransform: "uppercase", color: "rgba(255,255,255,0.22)",
+                textTransform: "uppercase", color: "rgba(255,255,255,0.38)",
                 padding: "12px 10px 6px", userSelect: "none",
               }}>
                 {group.label}
@@ -215,19 +231,23 @@ const navigateTo = (sectionId) => {
                     marginBottom: "2px",
                     justifyContent: isCollapsed ? "center" : "flex-start",
                     background: isActive
-                      ? "rgba(79,110,247,0.18)"
+                      ? "rgba(79,110,247,0.22)"
                       : isHover
-                      ? "rgba(255,255,255,0.05)"
+                      ? "rgba(255,255,255,0.07)"
                       : "transparent",
                     border: "none",
                     borderRadius: "10px",
                     cursor: "pointer",
-                    color: isActive ? "#8babff" : isHover ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.5)",
+                    color: isActive
+                      ? "#a0baff"
+                      : isHover
+                      ? "rgba(255,255,255,0.9)"
+                      : "rgba(255,255,255,0.6)",
                     fontSize: "14px",
                     fontWeight: isActive ? 600 : 400,
                     textAlign: "left",
                     transition: "all 0.15s ease",
-                    boxShadow: isActive ? "0 0 16px rgba(79,110,247,0.15)" : "none",
+                    boxShadow: isActive ? "0 0 16px rgba(79,110,247,0.18)" : "none",
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                   }}
@@ -238,14 +258,14 @@ const navigateTo = (sectionId) => {
                       position: "absolute", left: 0, top: "20%", bottom: "20%",
                       width: "3px", borderRadius: "0 3px 3px 0",
                       background: "linear-gradient(180deg, #4f6ef7, #a78bfa)",
-                      boxShadow: "0 0 8px rgba(79,110,247,0.7)",
+                      boxShadow: "0 0 8px rgba(79,110,247,0.8)",
                     }} />
                   )}
 
                   {/* Icon */}
                   <span style={{
                     fontSize: "16px", lineHeight: 1, flexShrink: 0,
-                    filter: isActive ? "drop-shadow(0 0 4px rgba(79,110,247,0.8))" : "none",
+                    filter: isActive ? "drop-shadow(0 0 4px rgba(79,110,247,0.9))" : "none",
                     transition: "filter 0.15s",
                   }}>
                     {icon}
@@ -253,7 +273,9 @@ const navigateTo = (sectionId) => {
 
                   {/* Label */}
                   {!isCollapsed && (
-                    <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{label}</span>
+                    <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+                      {label}
+                    </span>
                   )}
                 </button>
               );
@@ -265,18 +287,21 @@ const navigateTo = (sectionId) => {
       {/* Footer */}
       {!isCollapsed && (
         <div style={{
-          padding: "14px 16px", borderTop: "1px solid rgba(255,255,255,0.05)", flexShrink: 0,
+          padding: "14px 16px",
+          borderTop: "1px solid rgba(255,255,255,0.08)",
+          flexShrink: 0,
         }}>
           <div style={{
             display: "flex", alignItems: "center", gap: "8px",
             padding: "8px 10px", borderRadius: "10px",
-            background: "rgba(79,110,247,0.08)", border: "1px solid rgba(79,110,247,0.15)",
+            background: "rgba(79,110,247,0.1)",
+            border: "1px solid rgba(79,110,247,0.2)",
           }}>
             <span style={{
               width: 7, height: 7, borderRadius: "50%", background: "#22c55e",
               boxShadow: "0 0 6px #22c55e", display: "inline-block", flexShrink: 0,
             }} />
-            <span style={{ fontSize: "11px", color: "rgba(255,255,255,0.72)", fontWeight: 500 }}>
+            <span style={{ fontSize: "11px", color: "rgba(255,255,255,0.8)", fontWeight: 500 }}>
               System ready
             </span>
           </div>
@@ -287,71 +312,61 @@ const navigateTo = (sectionId) => {
 
   // ── Render ─────────────────────────────────────────────────────────────────
   return (
-  <div
-    style={{
+    <div style={{
       display: "flex",
       height: "100vh",
       overflow: "hidden",
       background: "var(--bg-primary, #0a0e23)",
-    }}
-  >
+    }}>
 
-    {/* Mobile overlay */}
-    {isMobile && isMobileOpen && (
-      <div
-        onClick={() => setIsMobileOpen(false)}
-        style={{
-          position: "fixed",
-          inset: 0,
-          background: "rgba(0,0,0,0.6)",
-          zIndex: 199,
-          backdropFilter: "blur(2px)",
-        }}
-      />
-    )}
+      {/* Mobile overlay */}
+      {isMobile && isMobileOpen && (
+        <div
+          onClick={() => setIsMobileOpen(false)}
+          style={{
+            position: "fixed", inset: 0,
+            background: "rgba(0,0,0,0.6)",
+            zIndex: 199,
+            backdropFilter: "blur(2px)",
+          }}
+        />
+      )}
+
+      {/* Mobile hamburger */}
+      {isMobile && (
+        <button
+          onClick={() => setIsMobileOpen((o) => !o)}
+          style={{
+            position: "fixed", top: "16px", left: "16px", zIndex: 300,
+            background: "rgba(10,14,35,0.95)",
+            border: "1px solid rgba(255,255,255,0.15)",
+            borderRadius: "10px", color: "white",
+            fontSize: "18px", padding: "8px 11px",
+            cursor: "pointer", boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+          }}
+        >
+          {isMobileOpen ? "✕" : "☰"}
+        </button>
+      )}
 
-    {/* Mobile hamburger */}
-    {isMobile && (
-      <button
-        onClick={() => setIsMobileOpen((o) => !o)}
+      {/* Sidebar */}
+      <aside style={isMobile ? mobileSidebarStyle : sidebarStyle}>
+        <SidebarContent />
+      </aside>
+
+      {/* Main content */}
+      <main
+        ref={mainRef}
         style={{
-          position: "fixed",
-          top: "16px",
-          left: "16px",
-          zIndex: 300,
-          background: "rgba(10,14,35,0.95)",
-          border: "1px solid rgba(255,255,255,0.12)",
-          borderRadius: "10px",
-          color: "white",
-          fontSize: "18px",
-          padding: "8px 11px",
-          cursor: "pointer",
-          boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+          flex: 1,
+          minWidth: 0,
+          height: "100vh",
+          overflowY: "auto",
+          paddingTop: isMobile ? "56px" : 0,
         }}
       >
-        {isMobileOpen ? "✕" : "☰"}
-      </button>
-    )}
-
-    {/* Sidebar */}
-    <aside style={isMobile ? mobileSidebarStyle : sidebarStyle}>
-      <SidebarContent />
-    </aside>
-
-    {/* Main content */}
-    <main
-      ref={mainRef}
-      style={{
-        flex: 1,
-        minWidth: 0,
-        height: "100vh",
-        overflowY: "auto",
-        paddingTop: isMobile ? "56px" : 0,
-      }}
-    >
-      <ExperimentSetup />
-    </main>
-  </div>
-
+        <ExperimentSetup />
+      </main>
+    </div>
   );
 }

frontend/src/gaugepilot/api.js

@@ -36,4 +36,71 @@ export async function uploadDocument(file, token) {
   );
 
   return response.data;
-}
+}
+export async function getBenchmarkRuns(token) {
+  const response = await API.get(
+    "/benchmark/runs",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return response.data;
+}
+export async function getDocuments(token) {
+  const response = await API.get(
+    "/docs/",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return response.data;
+}
+export async function deleteBenchmarkRun(
+  runId,
+  token,
+) {
+  const response = await API.delete(
+    `/benchmark/runs/${runId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return response.data;
+}
+export async function resetBenchmarkRuns(
+  token,
+) {
+  const response = await API.delete(
+    "/benchmark/runs/reset",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return response.data;
+}
+export async function resetDocuments(
+  token,
+) {
+  const response = await API.delete(
+    "/docs/reset",
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return response.data;
+}

frontend/src/gaugepilot/hooks/useBenchmark.js

@@ -1,8 +1,9 @@
- 
-import { useState } from "react";
-
-import { runBenchmark } from "../api";
+import { useState, useEffect } from "react";
 
+import {
+  runBenchmark,
+  getBenchmarkRuns,
+} from "../api";
 export function useBenchmark() {
   const [loading, setLoading] = useState(false);
 
@@ -10,6 +11,40 @@ export function useBenchmark() {
 
   const [error, setError] = useState(null);
 
+  useEffect(() => {
+  const loadLatestRun = async () => {
+    try {
+      const token =
+        localStorage.getItem("token");
+
+      if (!token) return;
+
+      const runs =
+        await getBenchmarkRuns(token);
+
+      if (!runs.length) return;
+
+      const latest =
+  runs.sort(
+    (a, b) =>
+      new Date(b.created_at) -
+      new Date(a.created_at)
+  )[0];
+
+      setResults({
+        leaderboard:
+          JSON.parse(
+            latest.leaderboard_json
+          ),
+      });
+
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  loadLatestRun();
+}, []);
   const executeBenchmark = async (
     payload,
     token,
@@ -47,4 +82,4 @@ export function useBenchmark() {
     error,
     executeBenchmark,
   };
-}
+}

frontend/src/gaugepilot/pages/ExperimentSetup.jsx

@@ -1,18 +1,16 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useBenchmark } from "../hooks/useBenchmark";
 import Leaderboards from "./Leaderboards";
 import ExperimentSelector from "../components/ExperimentSelector";
 import {
   runBenchmark,
   uploadDocument,
+  getBenchmarkRuns,
+  deleteBenchmarkRun,
+  resetBenchmarkRuns,
+  getDocuments,
+  resetDocuments,
 } from "../api";
-/*const SAMPLE_QUESTIONS = [
-  "What is the main contribution of this paper?",
-  "How does the proposed method compare to baselines?",
-  "What datasets were used for evaluation?",
-  "What are the limitations acknowledged by the authors?",
-  "What future work do the authors suggest?",
-];*/
 
 export default function ExperimentSetup() {
   const { loading, results, error, executeBenchmark } = useBenchmark();
@@ -28,9 +26,54 @@ export default function ExperimentSetup() {
   const [uploading, setUploading] = useState(false);
   const [benchmarkRuns, setBenchmarkRuns] = useState(0);
   const [bestScore, setBestScore] = useState(null);
+  const [allRuns, setAllRuns] = useState([]);
+  const [selectedRun, setSelectedRun] = useState(null);
+
   const fileInputRef = useRef(null);
 
-  const questionList = questions.split("\n").map((q) => q.trim()).filter(Boolean);
+  useEffect(() => {
+    const loadDashboardData = async () => {
+      try {
+        const token = localStorage.getItem("token");
+        if (!token) return;
+
+        const runs = await getBenchmarkRuns(token);
+        const docs = await getDocuments(token);
+
+        setBenchmarkRuns(runs.length);
+        setAllRuns(runs);
+
+        const sorted = [...runs].sort(
+          (a, b) => new Date(b.created_at) - new Date(a.created_at)
+        );
+
+        if (sorted.length) {
+          setSelectedRun(sorted[0]);
+          const leaderboard = JSON.parse(sorted[0].leaderboard_json);
+          const score =
+            leaderboard.overall?.[0]?.average_rank ??
+            leaderboard.overall?.[0]?.avg_rank;
+          if (score != null) setBestScore(score);
+        }
+
+        if (docs.length) {
+          setUploadedFile({
+            name: docs[0].filename,
+            size: docs[0].file_size || 0,
+          });
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    loadDashboardData();
+  }, []);
+
+  const questionList = questions
+    .split("\n")
+    .map((q) => q.trim())
+    .filter(Boolean);
   const canRun = questionList.length > 0 && !loading;
 
   const handleRun = async () => {
@@ -49,157 +92,358 @@ export default function ExperimentSetup() {
         const s = res.leaderboard.overall[0].avg_rank;
         return prev === null ? s : Math.min(prev, s);
       });
+      // Refresh runs list after a new run completes
+      try {
+        const updatedRuns = await getBenchmarkRuns(token);
+        const sorted = [...updatedRuns].sort(
+          (a, b) => new Date(b.created_at) - new Date(a.created_at)
+        );
+        setAllRuns(updatedRuns);
+        setBenchmarkRuns(updatedRuns.length);
+        if (sorted.length) setSelectedRun(sorted[0]);
+      } catch (err) {
+        console.error("Failed to refresh runs", err);
+      }
     }
   };
 
   const handleFileChange = async (file) => {
-  if (!file) return;
-
-  try {
-    setUploading(true);
+    if (!file) return;
+    try {
+      setUploading(true);
+      const token = localStorage.getItem("token");
+      await uploadDocument(file, token);
+      setUploadedFile(file);
+    } catch (err) {
+      console.error("Upload failed", err);
+    } finally {
+      setUploading(false);
+    }
+  };
 
+  const handleDeleteRun = async () => {
+    if (!selectedRun) return;
     const token = localStorage.getItem("token");
+    try {
+      await deleteBenchmarkRun(selectedRun.id, token);
+      const updated = allRuns.filter((r) => r.id !== selectedRun.id);
+      const sorted = [...updated].sort(
+        (a, b) => new Date(b.created_at) - new Date(a.created_at)
+      );
+      setAllRuns(updated);
+      setBenchmarkRuns(updated.length);
+      setSelectedRun(sorted.length ? sorted[0] : null);
+      if (!sorted.length) setBestScore(null);
+    } catch (err) {
+      console.error("Delete run failed", err);
+    }
+  };
 
-    await uploadDocument(
-      file,
-      token
-    );
-
-    setUploadedFile(file);
-
-    console.log(
-      "GaugePilot upload successful"
-    );
-  } catch (err) {
-    console.error(
-      "GaugePilot upload failed",
-      err
-    );
-  } finally {
-    setUploading(false);
-  }
-};
-
+  const handleResetRuns = async () => {
+    const token = localStorage.getItem("token");
+    try {
+      await resetBenchmarkRuns(token);
+      setAllRuns([]);
+      setBenchmarkRuns(0);
+      setSelectedRun(null);
+      setBestScore(null);
+    } catch (err) {
+      console.error("Reset runs failed", err);
+    }
+  };
 
+  const handleResetDocuments = async () => {
+    const token = localStorage.getItem("token");
+    try {
+      await resetDocuments(token);
+      setUploadedFile(null);
+    } catch (err) {
+      console.error("Reset documents failed", err);
+    }
+  };
 
   const handleDrop = (e) => {
-    e.preventDefault(); setIsDragging(false);
+    e.preventDefault();
+    setIsDragging(false);
     handleFileChange(e.dataTransfer.files[0]);
   };
 
   const labelMap = {
-    "llama-3.1-8b": "Llama 3.1 8B", hybrid: "Hybrid", vector: "Vector",
-    lexical: "BM25", minilm: "MiniLM", default: "Default",
+    "llama-3.1-8b": "Llama 3.1 8B",
+    hybrid: "Hybrid",
+    vector: "Vector",
+    lexical: "BM25",
+    minilm: "MiniLM",
+    default: "Default",
   };
 
-  // ── Design tokens ────────────────────────────────────────────────────────────
+  // ── Design tokens ──────────────────────────────────────────────────────────
   const accent = "#4f6ef7";
   const accentPurple = "#6a4ff7";
   const green = "#22c55e";
 
   const card = {
-    background: "rgba(255,255,255,0.03)",
-    border: "1px solid rgba(255,255,255,0.08)",
+    background: "rgba(255,255,255,0.07)",
+    border: "1px solid rgba(255,255,255,0.15)",
     borderRadius: "20px",
     padding: "24px",
   };
 
   const sectionLabel = {
-    fontSize: "11px", fontWeight: 700, letterSpacing: "0.1em",
-    textTransform: "uppercase", color: "rgba(255,255,255,0.3)", marginBottom: "14px",
+    fontSize: "11px",
+    fontWeight: 700,
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    color: "rgba(255,255,255,0.6)",
+    marginBottom: "14px",
   };
 
   const chip = (color = accent) => ({
-    display: "inline-flex", alignItems: "center", gap: "6px",
-    padding: "3px 10px", borderRadius: "999px",
-    background: `${color}22`, border: `1px solid ${color}44`,
-    color, fontSize: "11px", fontWeight: 600, letterSpacing: "0.04em",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "3px 10px",
+    borderRadius: "999px",
+    background: `${color}33`,
+    border: `1px solid ${color}66`,
+    color,
+    fontSize: "11px",
+    fontWeight: 600,
+    letterSpacing: "0.04em",
   });
 
-  // ── KPI Stats ─────────────────────────────────────────────────────────────────
+  const dangerBtn = {
+    padding: "10px 18px",
+    borderRadius: "10px",
+    border: "1px solid rgba(239,68,68,0.45)",
+    background: "rgba(239,68,68,0.14)",
+    color: "#fca5a5",
+    fontSize: "13px",
+    fontWeight: 700,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    letterSpacing: "0.02em",
+  };
+
+  // ── KPI Stats ──────────────────────────────────────────────────────────────
   const stats = [
     { label: "Questions Added", value: questionList.length, icon: "❓", color: accent },
     { label: "Uploaded Files", value: uploadedFile ? 1 : 0, icon: "📄", color: "#a78bfa" },
     { label: "Benchmark Runs", value: benchmarkRuns, icon: "🚀", color: green },
-    { label: "Best Score", value: bestScore !== null ? bestScore.toFixed(2) : "—", icon: "🏆", color: "#f59e0b" },
+    {
+      label: "Best Score",
+      value: bestScore !== null ? bestScore.toFixed(2) : "—",
+      icon: "🏆",
+      color: "#f59e0b",
+    },
   ];
 
   return (
-    <div id="experiment-setup" style={{ maxWidth: "1240px", margin: "0 auto", padding: "28px 24px", fontFamily: "inherit" }}>
-
-      {/* ── Page Header ──────────────────────────────────────────────────────── */}
-      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", gap: "12px", marginBottom: "24px" }}>
+    <div
+      id="experiment-setup"
+      style={{
+        maxWidth: "1240px",
+        margin: "0 auto",
+        padding: "28px 24px",
+        fontFamily: "inherit",
+      }}
+    >
+      {/* ── Page Header ───────────────────────────────────────────────────── */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          gap: "12px",
+          marginBottom: "24px",
+        }}
+      >
         <div>
-          <div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "8px" }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              marginBottom: "8px",
+            }}
+          >
             <span style={{ fontSize: "30px", lineHeight: 1 }}>🧪</span>
-            <h1 style={{ margin: 0, fontSize: "34px", fontWeight: 700, letterSpacing: "-0.5px", color: "white" }}>
+            <h1
+              style={{
+                margin: 0,
+                fontSize: "34px",
+                fontWeight: 700,
+                letterSpacing: "-0.5px",
+                color: "white",
+              }}
+            >
               Experiment Setup
             </h1>
           </div>
-          <p style={{ margin: 0, fontSize: "13px", color: "rgba(255,255,255,0.72)", lineHeight: 1.6 }}>
-            Configure your RAG pipeline, upload a source document, and define evaluation questions.
+          <p
+            style={{
+              margin: 0,
+              fontSize: "13px",
+              color: "rgba(255,255,255,0.85)",
+              lineHeight: 1.6,
+            }}
+          >
+            Configure your RAG pipeline, upload a source document, and define
+            evaluation questions.
           </p>
         </div>
         <div style={chip(results ? green : accent)}>
-          <span style={{
-            width: 7, height: 7, borderRadius: "50%",
-            background: results ? green : accent,
-            boxShadow: `0 0 6px ${results ? green : accent}`,
-            display: "inline-block",
-          }} />
+          <span
+            style={{
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: results ? green : accent,
+              boxShadow: `0 0 6px ${results ? green : accent}`,
+              display: "inline-block",
+            }}
+          />
           {loading ? "Running…" : results ? "Complete" : "Ready"}
         </div>
       </div>
 
-      {/* ── KPI Row ──────────────────────────────────────────────────────────── */}
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "12px", marginBottom: "20px" }}>
+      {/* ── KPI Row ───────────────────────────────────────────────────────── */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(4, 1fr)",
+          gap: "12px",
+          marginBottom: "20px",
+        }}
+      >
         {stats.map(({ label, value, icon, color }) => (
-          <div key={label} style={{
-            ...card, padding: "16px 20px",
-            display: "flex", alignItems: "center", gap: "14px",
-          }}>
-            <div style={{
-              width: 40, height: 40, borderRadius: "10px", flexShrink: 0,
-              background: `${color}18`, display: "flex", alignItems: "center",
-              justifyContent: "center", fontSize: "18px",
-            }}>{icon}</div>
+          <div
+            key={label}
+            style={{
+              ...card,
+              padding: "16px 20px",
+              display: "flex",
+              alignItems: "center",
+              gap: "14px",
+            }}
+          >
+            <div
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: "10px",
+                flexShrink: 0,
+                background: `${color}28`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "18px",
+              }}
+            >
+              {icon}
+            </div>
             <div>
-              <div style={{ fontSize: "22px", fontWeight: 700, color: "white", lineHeight: 1 }}>{value}</div>
-              <div style={{ fontSize: "11px", color: "rgba(255,255,255,0.35)", marginTop: "3px" }}>{label}</div>
+              <div
+                style={{
+                  fontSize: "22px",
+                  fontWeight: 700,
+                  color: "white",
+                  lineHeight: 1,
+                }}
+              >
+                {value}
+              </div>
+              <div
+                style={{
+                  fontSize: "11px",
+                  color: "rgba(255,255,255,0.55)",
+                  marginTop: "3px",
+                }}
+              >
+                {label}
+              </div>
             </div>
           </div>
         ))}
       </div>
 
-      {/* ── Configuration Panel ──────────────────────────────────────────────── */}
+      {/* ── Configuration Panel ───────────────────────────────────────────── */}
       <div style={{ ...card, marginBottom: "16px" }}>
         <p style={sectionLabel}>Pipeline Configuration</p>
         <div style={{ display: "flex", gap: "32px", flexWrap: "wrap" }}>
-          <ExperimentSelector label="Active Model" value={model} onChange={setModel}
-            options={[{ value: "llama-3.1-8b", label: "Llama 3.1 8B", description: "Fast & Efficient" }]} />
-          <ExperimentSelector label="Retrieval Strategy" value={retrievalMethod} onChange={setRetrievalMethod}
+          <ExperimentSelector
+            label="Active Model"
+            value={model}
+            onChange={setModel}
+            options={[
+              {
+                value: "llama-3.1-8b",
+                label: "Llama 3.1 8B",
+                description: "Fast & Efficient",
+              },
+            ]}
+          />
+          <ExperimentSelector
+            label="Retrieval Strategy"
+            value={retrievalMethod}
+            onChange={setRetrievalMethod}
             options={[
               { value: "hybrid", label: "Hybrid", description: "Vector + BM25" },
-              { value: "vector", label: "Vector", description: "Embedding Search" },
+              {
+                value: "vector",
+                label: "Vector",
+                description: "Embedding Search",
+              },
               { value: "lexical", label: "BM25", description: "Keyword Search" },
-            ]} />
-          <ExperimentSelector label="Reranker" value={reranker} onChange={setReranker}
-            options={[{ value: "minilm", label: "MiniLM", description: "Fast balanced baseline" }]} />
-          <ExperimentSelector label="Enhancements" value={enhancement} onChange={setEnhancement}
-            options={[{ value: "default", label: "Default", description: "Standard pipeline" }]} />
+            ]}
+          />
+          <ExperimentSelector
+            label="Reranker"
+            value={reranker}
+            onChange={setReranker}
+            options={[
+              {
+                value: "minilm",
+                label: "MiniLM",
+                description: "Fast balanced baseline",
+              },
+            ]}
+          />
+          <ExperimentSelector
+            label="Enhancements"
+            value={enhancement}
+            onChange={setEnhancement}
+            options={[
+              {
+                value: "default",
+                label: "Default",
+                description: "Standard pipeline",
+              },
+            ]}
+          />
         </div>
       </div>
 
-      {/* ── Main Grid ────────────────────────────────────────────────────────── */}
-      <div style={{ display: "grid", gridTemplateColumns: "420px 1fr", gap: "16px", alignItems: "start" }}>
-
-        {/* ── Left Column ──────────────────────────────────────────────────── */}
+      {/* ── Main Grid ─────────────────────────────────────────────────────── */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "420px 1fr",
+          gap: "16px",
+          alignItems: "start",
+        }}
+      >
+        {/* ── Left Column ─────────────────────────────────────────────── */}
         <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
 
           {/* Upload Card */}
           <div
             onClick={() => fileInputRef.current?.click()}
-            onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
             onDragLeave={() => setIsDragging(false)}
             onDrop={handleDrop}
             onMouseEnter={() => setIsHoveringUpload(true)}
@@ -207,201 +451,243 @@ export default function ExperimentSetup() {
             style={{
               borderRadius: "20px",
               minHeight: "240px",
-              display: "flex", flexDirection: "column",
-              alignItems: "center", justifyContent: "center", gap: "14px",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "14px",
               cursor: "pointer",
-              position: "relative", overflow: "hidden",
+              position: "relative",
+              overflow: "hidden",
               transition: "all 0.25s ease",
               background: isDragging
-                ? `rgba(79,110,247,0.1)`
+                ? `rgba(79,110,247,0.12)`
                 : uploadedFile
-                ? `rgba(34,197,94,0.06)`
-                : `rgba(255,255,255,0.025)`,
+                ? `rgba(34,197,94,0.08)`
+                : `rgba(255,255,255,0.05)`,
               border: `1.5px ${isDragging ? "solid" : "dashed"} ${
-                isDragging ? accent
-                : uploadedFile ? `${green}66`
-                : isHoveringUpload ? "rgba(79,110,247,0.5)"
-                : "rgba(255,255,255,0.1)"
+                isDragging
+                  ? accent
+                  : uploadedFile
+                  ? `${green}88`
+                  : isHoveringUpload
+                  ? "rgba(79,110,247,0.6)"
+                  : "rgba(255,255,255,0.2)"
               }`,
               boxShadow: isDragging
                 ? `0 0 32px rgba(79,110,247,0.2), inset 0 0 32px rgba(79,110,247,0.05)`
                 : isHoveringUpload
                 ? `0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(79,110,247,0.1)`
                 : uploadedFile
-                ? `0 0 20px rgba(34,197,94,0.1)`
+                ? `0 0 20px rgba(34,197,94,0.12)`
                 : "none",
-              transform: isHoveringUpload && !isDragging ? "translateY(-2px)" : "none",
+              transform:
+                isHoveringUpload && !isDragging ? "translateY(-2px)" : "none",
             }}
           >
-            <input ref={fileInputRef} type="file" style={{ display: "none" }}
-              onChange={(e) => handleFileChange(e.target.files[0])} />
+            <input
+              ref={fileInputRef}
+              type="file"
+              style={{ display: "none" }}
+              onChange={(e) => handleFileChange(e.target.files[0])}
+            />
 
             {/* Ambient glow blob */}
-            <div style={{
-              position: "absolute", width: "200px", height: "200px",
-              borderRadius: "50%", top: "50%", left: "50%",
-              transform: "translate(-50%, -50%)",
-              background: uploadedFile
-                ? `radial-gradient(circle, rgba(34,197,94,0.08) 0%, transparent 70%)`
-                : `radial-gradient(circle, rgba(79,110,247,0.08) 0%, transparent 70%)`,
-              pointerEvents: "none",
-            }} />
+            <div
+              style={{
+                position: "absolute",
+                width: "200px",
+                height: "200px",
+                borderRadius: "50%",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                background: uploadedFile
+                  ? `radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 70%)`
+                  : `radial-gradient(circle, rgba(79,110,247,0.1) 0%, transparent 70%)`,
+                pointerEvents: "none",
+              }}
+            />
 
             {uploading ? (
-  <>
-    <div
-      style={{
-        width: 60,
-        height: 60,
-        borderRadius: "16px",
-        background: "rgba(79,110,247,0.15)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: "28px",
-        boxShadow: "0 0 20px rgba(79,110,247,0.2)",
-      }}
-    >
-      ⏳
-    </div>
-
-    <div style={{ textAlign: "center", zIndex: 1 }}>
-      <p
-        style={{
-          margin: 0,
-          fontWeight: 700,
-          fontSize: "15px",
-          color: "#4f6ef7",
-        }}
-      >
-        Uploading & Indexing...
-      </p>
-
-      <p
-        style={{
-          margin: "4px 0 0",
-          fontSize: "12px",
-          color: "rgba(255,255,255,0.35)",
-        }}
-      >
-        Processing document
-      </p>
-    </div>
-  </>
-) : uploadedFile ? (
-  <>
-    <div
-      style={{
-        width: 60,
-        height: 60,
-        borderRadius: "16px",
-        background: "rgba(34,197,94,0.15)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: "28px",
-        boxShadow: "0 0 20px rgba(34,197,94,0.2)",
-      }}
-    >
-      ✅
-    </div>
-
-    <div style={{ textAlign: "center", zIndex: 1 }}>
-      <p
-        style={{
-          margin: 0,
-          fontWeight: 700,
-          fontSize: "15px",
-          color: green,
-        }}
-      >
-        {uploadedFile.name}
-      </p>
-
-      <p
-        style={{
-          margin: "4px 0 0",
-          fontSize: "12px",
-          color: "rgba(255,255,255,0.35)",
-        }}
-      >
-        {(uploadedFile.size / 1024).toFixed(1)} KB · Click to replace
-      </p>
-    </div>
-  </>
-) : (
-  <>
-    <div
-      style={{
-        width: 64,
-        height: 64,
-        borderRadius: "18px",
-        background: isDragging
-          ? `rgba(79,110,247,0.2)`
-          : "rgba(79,110,247,0.1)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: "28px",
-        zIndex: 1,
-        boxShadow: isDragging
-          ? `0 0 24px rgba(79,110,247,0.3)`
-          : "none",
-        transition: "all 0.2s ease",
-      }}
-    >
-      ⬆️
-    </div>
-
-    <div style={{ textAlign: "center", zIndex: 1 }}>
-      <p
-        style={{
-          margin: 0,
-          fontWeight: 700,
-          fontSize: "16px",
-          color: "white",
-        }}
-      >
-        {isDragging
-          ? "Drop to upload"
-          : "Upload Document"}
-      </p>
-
-      <p
-        style={{
-          margin: "5px 0 0",
-          fontSize: "12px",
-          color: "rgba(255,255,255,0.35)",
-          lineHeight: 1.6,
-        }}
-      >
-        Drag & drop or click to browse
-        <br />
-        
-      </p>
-    </div>
-  </>
-)}
+              <>
+                <div
+                  style={{
+                    width: 60,
+                    height: 60,
+                    borderRadius: "16px",
+                    background: "rgba(79,110,247,0.18)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "28px",
+                    boxShadow: "0 0 20px rgba(79,110,247,0.25)",
+                  }}
+                >
+                  ⏳
+                </div>
+                <div style={{ textAlign: "center", zIndex: 1 }}>
+                  <p
+                    style={{
+                      margin: 0,
+                      fontWeight: 700,
+                      fontSize: "15px",
+                      color: "#7b96ff",
+                    }}
+                  >
+                    Uploading & Indexing...
+                  </p>
+                  <p
+                    style={{
+                      margin: "4px 0 0",
+                      fontSize: "12px",
+                      color: "rgba(255,255,255,0.5)",
+                    }}
+                  >
+                    Processing document
+                  </p>
+                </div>
+              </>
+            ) : uploadedFile ? (
+              <>
+                <div
+                  style={{
+                    width: 60,
+                    height: 60,
+                    borderRadius: "16px",
+                    background: "rgba(34,197,94,0.18)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "28px",
+                    boxShadow: "0 0 20px rgba(34,197,94,0.25)",
+                  }}
+                >
+                  ✅
+                </div>
+                <div style={{ textAlign: "center", zIndex: 1 }}>
+                  <p
+                    style={{
+                      margin: 0,
+                      fontWeight: 700,
+                      fontSize: "15px",
+                      color: green,
+                    }}
+                  >
+                    {uploadedFile.name}
+                  </p>
+                  <p
+                    style={{
+                      margin: "4px 0 0",
+                      fontSize: "12px",
+                      color: "rgba(255,255,255,0.5)",
+                    }}
+                  >
+                    {(uploadedFile.size / 1024).toFixed(1)} KB · Click to replace
+                  </p>
+                </div>
+              </>
+            ) : (
+              <>
+                <div
+                  style={{
+                    width: 64,
+                    height: 64,
+                    borderRadius: "18px",
+                    background: isDragging
+                      ? `rgba(79,110,247,0.25)`
+                      : "rgba(79,110,247,0.14)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "28px",
+                    zIndex: 1,
+                    boxShadow: isDragging
+                      ? `0 0 24px rgba(79,110,247,0.35)`
+                      : "none",
+                    transition: "all 0.2s ease",
+                  }}
+                >
+                  ⬆️
+                </div>
+                <div style={{ textAlign: "center", zIndex: 1 }}>
+                  <p
+                    style={{
+                      margin: 0,
+                      fontWeight: 700,
+                      fontSize: "16px",
+                      color: "white",
+                    }}
+                  >
+                    {isDragging ? "Drop to upload" : "Upload Document"}
+                  </p>
+                  <p
+                    style={{
+                      margin: "5px 0 0",
+                      fontSize: "12px",
+                      color: "rgba(255,255,255,0.5)",
+                      lineHeight: 1.6,
+                    }}
+                  >
+                    Drag & drop or click to browse
+                  </p>
+                </div>
+              </>
+            )}
           </div>
 
           {/* Benchmark Summary */}
           <div style={{ ...card, padding: "16px 20px" }}>
-            <p style={{ ...sectionLabel, marginBottom: "10px" }}>Benchmark Summary</p>
+            <p style={{ ...sectionLabel, marginBottom: "10px" }}>
+              Benchmark Summary
+            </p>
             <div style={{ display: "flex", flexDirection: "column", gap: "0px" }}>
               {[
                 { label: "Model", value: labelMap[model] ?? model },
-                { label: "Retrieval", value: labelMap[retrievalMethod] ?? retrievalMethod },
+                {
+                  label: "Retrieval",
+                  value: labelMap[retrievalMethod] ?? retrievalMethod,
+                },
                 { label: "Reranker", value: labelMap[reranker] ?? reranker },
-                { label: "Enhancement", value: labelMap[enhancement] ?? enhancement },
-                { label: "Questions", value: questionList.length === 0 ? "None" : `${questionList.length}` },
+                {
+                  label: "Enhancement",
+                  value: labelMap[enhancement] ?? enhancement,
+                },
+                {
+                  label: "Questions",
+                  value:
+                    questionList.length === 0
+                      ? "None"
+                      : `${questionList.length}`,
+                },
               ].map(({ label, value }, i, arr) => (
-                <div key={label} style={{
-                  display: "flex", justifyContent: "space-between", alignItems: "center",
-                  padding: "7px 0",
-                  borderBottom: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.04)" : "none",
-                }}>
-                  <span style={{ fontSize: "12px", color: "rgba(255,255,255,0.3)" }}>{label}</span>
-                  <span style={{ fontSize: "12px", fontWeight: 600, color: "rgba(255,255,255,0.75)" }}>{value}</span>
+                <div
+                  key={label}
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: "7px 0",
+                    borderBottom:
+                      i < arr.length - 1
+                        ? "1px solid rgba(255,255,255,0.07)"
+                        : "none",
+                  }}
+                >
+                  <span
+                    style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}
+                  >
+                    {label}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      color: "rgba(255,255,255,0.9)",
+                    }}
+                  >
+                    {value}
+                  </span>
                 </div>
               ))}
             </div>
@@ -414,14 +700,22 @@ export default function ExperimentSetup() {
             onMouseEnter={() => setIsHoveringRun(true)}
             onMouseLeave={() => setIsHoveringRun(false)}
             style={{
-              width: "100%", padding: "18px", borderRadius: "16px", border: "none",
+              width: "100%",
+              padding: "18px",
+              borderRadius: "16px",
+              border: "none",
               background: canRun
                 ? `linear-gradient(135deg, ${accent} 0%, ${accentPurple} 100%)`
-                : "rgba(255,255,255,0.05)",
-              color: canRun ? "white" : "rgba(255,255,255,0.2)",
-              fontSize: "16px", fontWeight: 700, letterSpacing: "0.03em",
+                : "rgba(255,255,255,0.07)",
+              color: canRun ? "white" : "rgba(255,255,255,0.3)",
+              fontSize: "16px",
+              fontWeight: 700,
+              letterSpacing: "0.03em",
               cursor: canRun ? "pointer" : "not-allowed",
-              display: "flex", alignItems: "center", justifyContent: "center", gap: "10px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "10px",
               boxShadow: canRun
                 ? isHoveringRun
                   ? `0 0 40px rgba(79,110,247,0.6), 0 8px 24px rgba(0,0,0,0.4)`
@@ -433,68 +727,148 @@ export default function ExperimentSetup() {
           >
             {loading ? (
               <>
-                <span style={{
-                  width: 15, height: 15,
-                  border: "2px solid rgba(255,255,255,0.3)",
-                  borderTop: "2px solid white",
-                  borderRadius: "50%",
-                  display: "inline-block",
-                  animation: "spin 0.7s linear infinite",
-                }} />
+                <span
+                  style={{
+                    width: 15,
+                    height: 15,
+                    border: "2px solid rgba(255,255,255,0.3)",
+                    borderTop: "2px solid white",
+                    borderRadius: "50%",
+                    display: "inline-block",
+                    animation: "spin 0.7s linear infinite",
+                  }}
+                />
                 Running Benchmark…
               </>
-            ) : <>▶ Run Benchmark</>}
+            ) : (
+              <>▶ Run Benchmark</>
+            )}
           </button>
 
           <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
 
           {!canRun && !loading && (
-            <p style={{ margin: "-4px 0 0", fontSize: "12px", color: "rgba(255,255,255,0.25)", textAlign: "center" }}>
+            <p
+              style={{
+                margin: "-4px 0 0",
+                fontSize: "12px",
+                color: "rgba(255,255,255,0.4)",
+                textAlign: "center",
+              }}
+            >
               Add at least one question to run
             </p>
           )}
         </div>
 
-        {/* ── Right Column: Questions ─────────────────────────────────────── */}
-        <div style={{ ...card, display: "flex", flexDirection: "column", gap: "14px" }}>
-
+        {/* ── Right Column: Questions ───────────────────────────────────── */}
+        <div
+          style={{
+            ...card,
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
+          }}
+        >
           {/* Questions header */}
-          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+            }}
+          >
             <div>
-              <p style={{ ...sectionLabel, marginBottom: "3px", color: "rgba(255,255,255,0.72)" }}>Evaluation Questions</p>
-              <p style={{ margin: 0, fontSize: "12px", color: "rgba(255,255,255,0.72)" }}>One question per line</p>
+              <p
+                style={{
+                  ...sectionLabel,
+                  marginBottom: "3px",
+                  color: "rgba(255,255,255,0.85)",
+                }}
+              >
+                Evaluation Questions
+              </p>
+              <p
+                style={{
+                  margin: 0,
+                  fontSize: "12px",
+                  color: "rgba(255,255,255,0.6)",
+                }}
+              >
+                One question per line
+              </p>
             </div>
-            <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+            <div
+              style={{ display: "flex", gap: "8px", alignItems: "center" }}
+            >
               {questionList.length > 0 && (
                 <>
-                  <div style={chip(green)}>✓ {questionList.length} question{questionList.length !== 1 ? "s" : ""}</div>
+                  <div style={chip(green)}>
+                    ✓ {questionList.length} question
+                    {questionList.length !== 1 ? "s" : ""}
+                  </div>
                   <button
                     onClick={() => setQuestions("")}
                     style={{
-                      background: "rgba(239,68,68,0.1)", border: "1px solid rgba(239,68,68,0.2)",
-                      borderRadius: "8px", color: "#f87171", fontSize: "12px", fontWeight: 600,
-                      padding: "4px 10px", cursor: "pointer",
+                      background: "rgba(239,68,68,0.12)",
+                      border: "1px solid rgba(239,68,68,0.3)",
+                      borderRadius: "8px",
+                      color: "#fca5a5",
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      padding: "4px 10px",
+                      cursor: "pointer",
                     }}
-                  >Clear</button>
+                  >
+                    Clear
+                  </button>
                 </>
               )}
-              <span style={{ fontSize: "11px", color: "rgba(255,255,255,0.2)" }}>{questions.length} chars</span>
+              <span
+                style={{
+                  fontSize: "11px",
+                  color: "rgba(255,255,255,0.35)",
+                }}
+              >
+                {questions.length} chars
+              </span>
             </div>
           </div>
 
-        
-
-          
-
-          <div style={{ position: "relative", display: "flex", borderRadius: "14px", overflow: "hidden", border: "1px solid rgba(255,255,255,0.08)" }}>
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              borderRadius: "14px",
+              overflow: "hidden",
+              border: "1px solid rgba(255,255,255,0.12)",
+            }}
+          >
             {/* Line numbers */}
-            <div style={{
-              background: "rgba(0,0,0,0.25)", padding: "18px 10px",
-              display: "flex", flexDirection: "column", alignItems: "flex-end",
-              gap: 0, userSelect: "none", minWidth: "36px", borderRight: "1px solid rgba(255,255,255,0.05)",
-            }}>
+            <div
+              style={{
+                background: "rgba(0,0,0,0.25)",
+                padding: "18px 10px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                gap: 0,
+                userSelect: "none",
+                minWidth: "36px",
+                borderRight: "1px solid rgba(255,255,255,0.07)",
+              }}
+            >
               {(questions || " ").split("\n").map((_, i) => (
-                <div key={i} style={{ fontSize: "12px", color: "rgba(255,255,255,0.18)", lineHeight: "1.8", fontFamily: "'Courier New', monospace", height: "21.6px" }}>
+                <div
+                  key={i}
+                  style={{
+                    fontSize: "12px",
+                    color: "rgba(255,255,255,0.3)",
+                    lineHeight: "1.8",
+                    fontFamily: "'Courier New', monospace",
+                    height: "21.6px",
+                  }}
+                >
                   {i + 1}
                 </div>
               ))}
@@ -505,11 +879,18 @@ export default function ExperimentSetup() {
               value={questions}
               onChange={(e) => setQuestions(e.target.value)}
               style={{
-                flex: 1, minHeight: "300px", padding: "18px 16px",
-                border: "none", background: "rgba(0,0,0,0.2)",
-                color: "white", fontSize: "13px", resize: "vertical",
-                lineHeight: "1.8", fontFamily: "'Courier New', Courier, monospace",
-                outline: "none", boxSizing: "border-box",
+                flex: 1,
+                minHeight: "300px",
+                padding: "18px 16px",
+                border: "none",
+                background: "rgba(0,0,0,0.2)",
+                color: "white",
+                fontSize: "13px",
+                resize: "vertical",
+                lineHeight: "1.8",
+                fontFamily: "'Courier New', Courier, monospace",
+                outline: "none",
+                boxSizing: "border-box",
               }}
             />
           </div>
@@ -517,19 +898,133 @@ export default function ExperimentSetup() {
       </div>
 
       {error && (
-        <div style={{
-          marginTop: "14px", padding: "13px 18px", borderRadius: "12px",
-          background: "rgba(239,68,68,0.08)", border: "1px solid rgba(239,68,68,0.25)",
-          color: "#f87171", fontSize: "13px",
-        }}>⚠️ {error}</div>
+        <div
+          style={{
+            marginTop: "14px",
+            padding: "13px 18px",
+            borderRadius: "12px",
+            background: "rgba(239,68,68,0.1)",
+            border: "1px solid rgba(239,68,68,0.3)",
+            color: "#fca5a5",
+            fontSize: "13px",
+          }}
+        >
+          ⚠️ {error}
+        </div>
       )}
 
+      {/* ── Benchmark History ─────────────────────────────────────────────── */}
+      <div style={{ ...card, marginTop: "16px" }}>
+        <p style={sectionLabel}>Benchmark History</p>
+
+        {allRuns.length === 0 ? (
+          <p
+            style={{
+              margin: "0 0 16px",
+              fontSize: "13px",
+              color: "rgba(255,255,255,0.5)",
+            }}
+          >
+            No benchmark runs yet. Run your first benchmark above.
+          </p>
+        ) : (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "10px",
+              flexWrap: "wrap",
+              marginBottom: "16px",
+            }}
+          >
+            {/* Run selector dropdown */}
+            <select
+              value={selectedRun?.id ?? ""}
+              onChange={(e) =>
+                setSelectedRun(
+                  allRuns.find((r) => String(r.id) === e.target.value) ?? null
+                )
+              }
+              style={{
+                flex: "1 1 260px",
+                padding: "10px 14px",
+                borderRadius: "10px",
+                background: "rgba(255,255,255,0.08)",
+                border: "1px solid rgba(255,255,255,0.2)",
+                color: "white",
+                fontSize: "13px",
+                fontWeight: 600,
+                outline: "none",
+                cursor: "pointer",
+                appearance: "auto",
+              }}
+            >
+              {[...allRuns]
+                .sort(
+                  (a, b) =>
+                    new Date(b.created_at) - new Date(a.created_at)
+                )
+                .map((run) => (
+                  <option
+                    key={run.id}
+                    value={run.id}
+                    style={{ background: "#1a1a2e", color: "white" }}
+                  >
+                    {run.name}
+                  </option>
+                ))}
+            </select>
+
+            {/* Delete selected run */}
+            <button
+              onClick={handleDeleteRun}
+              disabled={!selectedRun}
+              title="Delete selected run"
+              style={{
+                ...dangerBtn,
+                opacity: selectedRun ? 1 : 0.4,
+                cursor: selectedRun ? "pointer" : "not-allowed",
+              }}
+            >
+              ❌ Delete Selected
+            </button>
+          </div>
+        )}
+
+        {/* Destructive actions row */}
+        <div
+          style={{
+            display: "flex",
+            gap: "10px",
+            flexWrap: "wrap",
+            paddingTop: allRuns.length > 0 ? "14px" : "0",
+            borderTop:
+              allRuns.length > 0
+                ? "1px solid rgba(255,255,255,0.08)"
+                : "none",
+          }}
+        >
+          <button onClick={handleResetRuns} style={dangerBtn}>
+            🗑 Delete All Benchmarks
+          </button>
+          <button onClick={handleResetDocuments} style={dangerBtn}>
+            📂 Delete Documents &amp; Vector Store
+          </button>
+        </div>
+      </div>
+
       <div style={{ marginTop: "24px" }}>
         <Leaderboards
-          leaderboard={results?.leaderboard || {
-            overall: [], faithfulness: [], grounding: [],
-            retrieval_quality: [], query_coverage: [], latency: [],
-          }}
+          leaderboard={
+            results?.leaderboard || {
+              overall: [],
+              faithfulness: [],
+              grounding: [],
+              retrieval_quality: [],
+              query_coverage: [],
+              latency: [],
+            }
+          }
         />
       </div>
     </div>