feat: mobile responsive layouts, SPA direct routing rewrites, and Config 1/2/3 hover tooltips

frontend/src/App.jsx

@@ -250,25 +250,29 @@ function PilotMasterHome({ username, plan, onOpen, onLogout }) {
     return (
         <div
             key={experimentMode ? "exp" : "prod"}
+            className="pilot-home"
             style={{
                 background: "var(--bg-primary)",
                 color: "var(--text-primary)",
                 fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
                 width: "100vw",
-                height: "100vh",
+                minHeight: "100dvh",
                 boxSizing: "border-box",
                 display: "grid",
                 gridTemplateRows: "auto 1fr auto",
-                overflow: "hidden",
+                overflowY: "auto",
             }}
         >
             {/* TOP BAR */}
             <header
+                className="pilot-home-topbar"
                 style={{
                     display: "flex",
                     justifyContent: "space-between",
                     alignItems: "center",
                     padding: "20px 48px",
+                    flexWrap: "wrap",
+                    gap: "14px",
                 }}
             >
                 <div>
@@ -288,7 +292,7 @@ function PilotMasterHome({ username, plan, onOpen, onLogout }) {
                     </p>
                 </div>
 
-                <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+                <div className="pilot-home-actions" style={{ display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }}>
 
                     <div
                         style={{
@@ -363,7 +367,7 @@ function PilotMasterHome({ username, plan, onOpen, onLogout }) {
             </header>
 
             {/* CENTER */}
-            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: "32px", padding: "0 24px" }}>
+            <div className="pilot-home-center" style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: "28px", padding: "20px 24px" }}>
                 <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: "10px" }}>
                     <button
                         onClick={toggleMode}
@@ -388,7 +392,7 @@ function PilotMasterHome({ username, plan, onOpen, onLogout }) {
                     <h2
                         style={{
                             margin: "12px 0 0",
-                            fontSize: "36px",
+                            fontSize: "clamp(26px, 4vw, 36px)",
                             fontWeight: "700",
                             letterSpacing: "-1px",
                             color: "#ffffff",
@@ -403,7 +407,7 @@ function PilotMasterHome({ username, plan, onOpen, onLogout }) {
                     </p>
                 </div>
 
-                <div style={{ display: "flex", gap: "20px", flexWrap: "wrap", justifyContent: "center" }}>
+                <div className="pilot-home-grid" style={{ display: "flex", gap: "20px", flexWrap: "wrap", justifyContent: "center", width: "100%", maxWidth: "1100px" }}>
                     <ProductCard
                         name="DocPilot"
                         description="Upload multi-format documents, ask complex questions, and receive grounded answers with citations."
@@ -435,7 +439,7 @@ function PilotMasterHome({ username, plan, onOpen, onLogout }) {
             </div>
 
             {/* FOOTER */}
-            <footer style={{ padding: "18px 48px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <footer className="pilot-home-footer" style={{ padding: "18px 48px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "10px" }}>
                 <p style={{ margin: 0, fontSize: "12px", color: "var(--text-muted)" }}>
                     PilotMaster · Powered by PilotCore Kernel
                 </p>
@@ -466,8 +470,9 @@ function ProductCard({ name, icon, description, tags, href, onClick, accent }) {
             onMouseEnter={() => setHovered(true)}
             onMouseLeave={() => setHovered(false)}
             style={{
-                width: "320px",
-                padding: "28px 24px",
+                width: "100%",
+                maxWidth: "340px",
+                padding: "26px 22px",
                 borderRadius: "24px",
                 cursor: "pointer",
                 textDecoration: "none",
@@ -484,7 +489,7 @@ function ProductCard({ name, icon, description, tags, href, onClick, accent }) {
         >
 
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                <h3 style={{ margin: 0, fontSize: "24px", fontWeight: "800", color: accent, letterSpacing: "-0.6px", transition: "color 0.15s ease" }}>
+                <h3 style={{ margin: 0, fontSize: "22px", fontWeight: "800", color: accent, letterSpacing: "-0.6px", transition: "color 0.15s ease" }}>
                     {name}
                 </h3>
                 <span style={{ fontSize: "18px", color: hovered ? "#ffffff" : accent, transition: "color 0.15s" }}>
@@ -756,26 +761,29 @@ function ForgotPassword({ goBack }) {
 function AuthShell({ children }) {
     return (
         <div
+            className="auth-shell"
             style={{
                 background: "var(--bg-primary)",
                 width: "100vw",
-                height: "100vh",
+                minHeight: "100dvh",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
                 fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
                 boxSizing: "border-box",
-                padding: "24px",
+                padding: "clamp(16px, 4vw, 24px)",
+                overflowY: "auto",
             }}
         >
             <div
+                className="auth-panel"
                 style={{
                     width: "100%",
                     maxWidth: "420px",
                     borderRadius: "28px",
                     background: "rgba(255, 255, 255, 0.03)",
                     boxShadow: "0 24px 60px rgba(0, 0, 0, 0.4)",
-                    padding: "36px 32px",
+                    padding: "clamp(24px, 5vw, 36px) clamp(20px, 4vw, 32px)",
                     display: "flex",
                     flexDirection: "column",
                     boxSizing: "border-box",

frontend/src/components/OpeningLanding.jsx

@@ -232,10 +232,12 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
       <header
         style={{
           width: "100%",
-          padding: "16px 36px",
+          padding: "14px clamp(16px, 4vw, 36px)",
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
+          flexWrap: "wrap",
+          gap: "12px",
           borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
           background: "rgba(4, 7, 17, 0.85)",
           backdropFilter: "blur(20px)",
@@ -244,70 +246,71 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
           flexShrink: 0,
         }}
       >
-        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <div
             style={{
-              width: "34px",
-              height: "34px",
+              width: "32px",
+              height: "32px",
               borderRadius: "10px",
               background: "linear-gradient(135deg, #3b82f6, #8b5cf6)",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              fontSize: "18px",
+              fontSize: "16px",
               fontWeight: 800,
               boxShadow: "0 0 20px rgba(59, 130, 246, 0.4)",
+              flexShrink: 0,
             }}
           >
             ⚡
           </div>
           <div>
-            <div style={{ fontSize: "19px", fontWeight: 800, letterSpacing: "-0.5px", color: "#ffffff" }}>
+            <div style={{ fontSize: "18px", fontWeight: 800, letterSpacing: "-0.5px", color: "#ffffff" }}>
               PilotMaster
             </div>
-            <div style={{ fontSize: "11px", color: "#94a3b8", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>
-              Observable AI Execution Ecosystem
+            <div style={{ fontSize: "10px", color: "#94a3b8", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>
+              Observable AI Ecosystem
             </div>
           </div>
         </div>
 
-        <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }}>
           <div
             style={{
               display: "flex",
               alignItems: "center",
-              gap: "8px",
-              padding: "5px 12px",
+              gap: "6px",
+              padding: "4px 10px",
               borderRadius: "9999px",
               background: "rgba(34, 197, 94, 0.08)",
               border: "1px solid rgba(34, 197, 94, 0.2)",
-              fontSize: "12px",
+              fontSize: "11px",
               color: "#4ade80",
               fontWeight: 600,
             }}
           >
             <span
               style={{
-                width: "7px",
-                height: "7px",
+                width: "6px",
+                height: "6px",
                 borderRadius: "50%",
                 background: "#22c55e",
                 boxShadow: "0 0 8px #22c55e",
               }}
             />
-            Kernel v2.0 Active
+            Kernel v2.0
           </div>
 
           <button
             onClick={handleQuickDemo}
             title="Instant one-click access with sample data and live Groq inference"
             style={{
-              padding: "7px 16px",
+              padding: "6px 14px",
               borderRadius: "9999px",
               background: "linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(168, 85, 247, 0.2))",
               border: "1px solid rgba(147, 197, 253, 0.3)",
               color: "#ffffff",
-              fontSize: "12px",
+              fontSize: "11px",
               fontWeight: 600,
               cursor: "pointer",
               transition: "all 0.2s ease",
@@ -321,29 +324,38 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
               e.currentTarget.style.transform = "translateY(0)";
             }}
           >
-            ⚡ Quick Demo Access
+            ⚡ Quick Demo
           </button>
         </div>
       </header>
 
-      {/* MAIN HERO SPLIT VIEW (BALANCED VERTICAL ALIGNMENT) */}
+      {/* MAIN HERO SPLIT VIEW (RESPONSIVE STACK ON MOBILE) */}
       <main
         style={{
           flex: 1,
-          display: "grid",
-          gridTemplateColumns: "1.25fr 0.75fr",
-          gap: "36px",
-          padding: "28px 40px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "28px",
+          padding: "clamp(16px, 3vw, 28px) clamp(16px, 4vw, 40px)",
           maxWidth: "1400px",
           margin: "0 auto",
           width: "100%",
           boxSizing: "border-box",
           zIndex: 1,
-          alignItems: "center",
+          justifyContent: "center",
         }}
       >
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 460px), 1fr))",
+            gap: "28px",
+            alignItems: "center",
+            width: "100%",
+          }}
+        >
         {/* LEFT COLUMN: ARCHITECTURE TOPOLOGY & DEEP DIVE DESCRIPTION */}
-        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "18px", width: "100%", minWidth: 0 }}>
           {/* Main Title & Ecosystem Subtitle */}
           <div>
             <div
@@ -355,10 +367,11 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                 borderRadius: "9999px",
                 background: "rgba(59, 130, 246, 0.1)",
                 border: "1px solid rgba(59, 130, 246, 0.25)",
-                fontSize: "12px",
+                fontSize: "11px",
                 color: "#93c5fd",
                 fontWeight: 600,
-                marginBottom: "10px",
+                marginBottom: "8px",
+                maxWidth: "100%",
               }}
             >
               <span>🔬 Next-Gen RAG Orchestration & Observability</span>
@@ -366,10 +379,10 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
             <h1
               style={{
                 margin: "0 0 8px",
-                fontSize: "36px",
+                fontSize: "clamp(24px, 4vw, 36px)",
                 fontWeight: 900,
                 lineHeight: 1.15,
-                letterSpacing: "-1px",
+                letterSpacing: "-0.8px",
                 background: "linear-gradient(135deg, #ffffff 40%, #93c5fd 80%, #c084fc 100%)",
                 WebkitBackgroundClip: "text",
                 WebkitTextFillColor: "transparent",
@@ -386,8 +399,10 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
               background: "rgba(11, 16, 28, 0.7)",
               border: "1px solid rgba(255, 255, 255, 0.1)",
               backdropFilter: "blur(20px)",
-              padding: "20px",
+              padding: "clamp(14px, 2.5vw, 20px)",
               boxShadow: "0 16px 40px rgba(0, 0, 0, 0.4)",
+              width: "100%",
+              boxSizing: "border-box",
             }}
           >
             {/* TOPOLOGY TAB SELECTOR */}
@@ -396,24 +411,26 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
-                marginBottom: "16px",
+                flexWrap: "wrap",
+                gap: "8px",
+                marginBottom: "14px",
                 borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
                 paddingBottom: "10px",
               }}
             >
-              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                <span style={{ width: "8px", height: "8px", borderRadius: "50%", background: currentDesc.badgeColor }} />
-                <span style={{ fontSize: "11px", fontWeight: 700, color: "#e2e8f0", textTransform: "uppercase", letterSpacing: "0.06em" }}>
+              <div style={{ display: "flex", alignItems: "center", gap: "8px", minWidth: 0 }}>
+                <span style={{ width: "8px", height: "8px", borderRadius: "50%", background: currentDesc.badgeColor, flexShrink: 0 }} />
+                <span style={{ fontSize: "11px", fontWeight: 700, color: "#e2e8f0", textTransform: "uppercase", letterSpacing: "0.06em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                   {currentDesc.title}
                 </span>
               </div>
-              <div style={{ display: "flex", gap: "4px" }}>
+              <div style={{ display: "flex", gap: "4px", overflowX: "auto", maxWidth: "100%", paddingBottom: "2px" }}>
                 {["ecosystem", "docpilot", "tracepilot", "gaugepilot"].map((tab) => (
                   <button
                     key={tab}
                     onClick={() => setActiveTab(tab)}
                     style={{
-                      padding: "4px 10px",
+                      padding: "4px 9px",
                       borderRadius: "6px",
                       background: activeTab === tab ? "rgba(255, 255, 255, 0.12)" : "transparent",
                       border: activeTab === tab ? "1px solid rgba(255, 255, 255, 0.15)" : "1px solid transparent",
@@ -423,6 +440,7 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                       cursor: "pointer",
                       textTransform: "capitalize",
                       transition: "all 0.15s ease",
+                      whiteSpace: "nowrap",
                     }}
                   >
                     {tab}
@@ -431,14 +449,14 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
               </div>
             </div>
 
-            {/* TOPOLOGY NODES GRID */}
+            {/* TOPOLOGY NODES GRID (RESPONSIVE WRAP) */}
             <div
               style={{
                 display: "grid",
-                gridTemplateColumns: "1fr 1.2fr 1fr",
-                gap: "14px",
-                alignItems: "center",
-                marginBottom: "16px",
+                gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 140px), 1fr))",
+                gap: "10px",
+                alignItems: "stretch",
+                marginBottom: "14px",
               }}
             >
               {/* PILLAR 1: DOCPILOT */}
@@ -447,7 +465,7 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                 onMouseEnter={() => setHoveredNode("docpilot")}
                 onMouseLeave={() => setHoveredNode(null)}
                 style={{
-                  padding: "14px",
+                  padding: "12px",
                   borderRadius: "14px",
                   background:
                     activeTab === "docpilot" || hoveredNode === "docpilot"
@@ -463,8 +481,8 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                 }}
               >
                 <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "4px" }}>
-                  <span style={{ fontSize: "16px" }}>📄</span>
-                  <h3 style={{ margin: 0, fontSize: "14px", fontWeight: 800, color: "#60a5fa" }}>DocPilot</h3>
+                  <span style={{ fontSize: "15px" }}>📄</span>
+                  <h3 style={{ margin: 0, fontSize: "13px", fontWeight: 800, color: "#60a5fa" }}>DocPilot</h3>
                 </div>
                 <p style={{ margin: 0, fontSize: "11px", color: "#cbd5e1", lineHeight: 1.4 }}>
                   Document intelligence & grounded natural language synthesis.
@@ -477,8 +495,8 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                 onMouseEnter={() => setHoveredNode("pilotcore")}
                 onMouseLeave={() => setHoveredNode(null)}
                 style={{
-                  padding: "16px 12px",
-                  borderRadius: "18px",
+                  padding: "14px 10px",
+                  borderRadius: "16px",
                   background:
                     activeTab === "ecosystem" || hoveredNode === "pilotcore"
                       ? "linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95))"
@@ -489,7 +507,8 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                   display: "flex",
                   flexDirection: "column",
                   alignItems: "center",
-                  gap: "6px",
+                  justifyContent: "center",
+                  gap: "4px",
                   cursor: "pointer",
                   position: "relative",
                 }}
@@ -510,9 +529,9 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
                 >
                   Core Kernel
                 </div>
-                <div style={{ fontSize: "20px" }}>⚡</div>
+                <div style={{ fontSize: "18px" }}>⚡</div>
                 <div>
-                  <h3 style={{ margin: 0, fontSize: "15px", fontWeight: 900, color: "#38bdf8" }}>PilotCore</h3>
+                  <h3 style={{ margin: 0, fontSize: "14px", fontWeight: 900, color: "#38bdf8" }}>PilotCore</h3>
                   <div style={{ fontSize: "10px", color: "#94a3b8" }}>
                     Hybrid Vector + Lexical RRF
                   </div>
@@ -585,21 +604,21 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
             {/* AUTHORITATIVE ECOSYSTEM TEXT & HIGHLIGHTS */}
             <div
               style={{
-                padding: "14px 16px",
+                padding: "12px 14px",
                 borderRadius: "14px",
                 background: "rgba(255, 255, 255, 0.02)",
                 border: "1px solid rgba(255, 255, 255, 0.06)",
               }}
             >
-              <p style={{ margin: "0 0 10px", fontSize: "12.5px", lineHeight: 1.6, color: "#cbd5e1" }}>
+              <p style={{ margin: "0 0 10px", fontSize: "12px", lineHeight: 1.6, color: "#cbd5e1" }}>
                 {currentDesc.description}
               </p>
-              <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+              <div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>
                 {currentDesc.highlights.map((h, idx) => (
                   <span
                     key={idx}
                     style={{
-                      fontSize: "11px",
+                      fontSize: "10.5px",
                       padding: "3px 8px",
                       borderRadius: "6px",
                       background: "rgba(255, 255, 255, 0.05)",
@@ -616,16 +635,16 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
         </div>
 
         {/* RIGHT COLUMN: MAANG-GRADE BALANCED AUTHENTICATION CARD */}
-        <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%" }}>
           <div
             style={{
               width: "100%",
-              maxWidth: "400px",
+              maxWidth: "420px",
               borderRadius: "24px",
               background: "rgba(13, 19, 33, 0.85)",
               border: "1px solid rgba(255, 255, 255, 0.12)",
               backdropFilter: "blur(30px)",
-              padding: "30px 28px",
+              padding: "clamp(20px, 4vw, 30px) clamp(16px, 3.5vw, 28px)",
               boxShadow: "0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.08)",
               display: "flex",
               flexDirection: "column",
@@ -954,17 +973,20 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
             )}
           </div>
         </div>
-      </main>
+      </div>
+    </main>
 
       {/* FOOTER BAR */}
       <footer
         style={{
-          padding: "16px 36px",
+          padding: "14px clamp(16px, 4vw, 36px)",
           borderTop: "1px solid rgba(255, 255, 255, 0.05)",
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
-          fontSize: "11.5px",
+          flexWrap: "wrap",
+          gap: "10px",
+          fontSize: "11px",
           color: "#64748b",
           boxSizing: "border-box",
           zIndex: 10,
@@ -972,7 +994,7 @@ export default function OpeningLanding({ onLogin, initialMode = "login" }) {
         }}
       >
         <div>PilotMaster Intelligence Platform © 2026. Powered by PilotCore Kernel.</div>
-        <div style={{ display: "flex", gap: "18px" }}>
+        <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
           <span>Dual Mode (Production & Lab)</span>
           <span>Active Groq Models</span>
           <span>PostgreSQL Observability</span>

frontend/src/docpilot/pages/Dashboard.jsx

@@ -65,7 +65,8 @@ function CustomSelector({ label, sublabel, open, onToggle, selectorRef, children
             position: "absolute",
             bottom: "calc(100% + 8px)",
             left: 0,
-            width: "300px",
+            width: "min(320px, calc(100vw - 28px))",
+            maxWidth: "calc(100vw - 28px)",
             maxHeight: "360px",
             overflowY: "auto",
             zIndex: 9999,
@@ -1921,10 +1922,22 @@ function Dashboard({
                 alignItems: "center",
                 justifyContent: "space-between",
                 gap: "8px",
-                flexWrap: "wrap",
+                width: "100%",
+                minWidth: 0,
               }}
             >
-              <div style={{ display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }}>
+              <div
+                className="pill-scroll-bar"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  overflowX: "auto",
+                  flex: 1,
+                  minWidth: 0,
+                  paddingBottom: "2px",
+                }}
+              >
                 {/* MODEL SELECTOR */}
                 <CustomSelector
                   label={activeModelLabel}
@@ -2213,7 +2226,8 @@ function Dashboard({
                           position: "absolute",
                           bottom: "calc(100% + 8px)",
                           left: 0,
-                          width: "350px",
+                          width: "min(340px, calc(100vw - 32px))",
+                          maxWidth: "calc(100vw - 32px)",
                           maxHeight: "440px",
                           overflowY: "auto",
                           zIndex: 9999,

frontend/src/gaugepilot/components/ConfigBadge.jsx

@@ -0,0 +1,211 @@
+import { useState, useRef, useEffect } from "react";
+import { parseConfigDetails } from "../utils/configUtils";
+
+/**
+ * Interactive Configuration Badge with detailed specification hover card / tooltip.
+ */
+export default function ConfigBadge({
+  configName,
+  label = null,
+  isBest = false,
+  medal = null,
+  fontSize = "13px",
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [popoverPos, setPopoverPos] = useState({ top: 0, left: 0, placeAbove: true });
+  const badgeRef = useRef(null);
+
+  const displayLabel = label || configName || "Config";
+  const details = parseConfigDetails(configName);
+
+  const handleMouseEnter = () => {
+    if (badgeRef.current) {
+      const rect = badgeRef.current.getBoundingClientRect();
+      const placeAbove = rect.top > 260; // place above if room, else below
+      setPopoverPos({
+        top: placeAbove ? rect.top - 8 : rect.bottom + 8,
+        left: rect.left + rect.width / 2,
+        placeAbove,
+      });
+    }
+    setHovered(true);
+  };
+
+  return (
+    <div
+      ref={badgeRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={() => setHovered(false)}
+      onFocus={handleMouseEnter}
+      onBlur={() => setHovered(false)}
+      tabIndex={0}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        position: "relative",
+        cursor: "pointer",
+        outline: "none",
+      }}
+    >
+      {medal && (
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 24,
+            height: 24,
+            borderRadius: "6px",
+            background: medal.color ? `${medal.color}18` : "rgba(255,255,255,0.04)",
+            fontSize: "14px",
+            fontWeight: 700,
+            color: medal.color || "#ffffff",
+          }}
+        >
+          {medal.label}
+        </span>
+      )}
+
+      {isBest && (
+        <span
+          style={{
+            fontSize: "10px",
+            fontWeight: 700,
+            padding: "2px 6px",
+            borderRadius: "4px",
+            background: "rgba(245, 158, 11, 0.15)",
+            border: "1px solid rgba(245, 158, 11, 0.3)",
+            color: "#f59e0b",
+            letterSpacing: "0.05em",
+            textTransform: "uppercase",
+          }}
+        >
+          Best
+        </span>
+      )}
+
+      {/* Main Config Badge */}
+      <span
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "3px 10px",
+          borderRadius: "8px",
+          background: hovered ? "rgba(168, 85, 247, 0.2)" : "rgba(255, 255, 255, 0.05)",
+          border: hovered ? "1px solid rgba(168, 85, 247, 0.4)" : "1px solid rgba(255, 255, 255, 0.08)",
+          color: hovered ? "#ffffff" : "rgba(255, 255, 255, 0.9)",
+          fontWeight: isBest ? 700 : 600,
+          fontSize,
+          letterSpacing: "-0.2px",
+          transition: "all 0.15s ease",
+          boxShadow: hovered ? "0 4px 16px rgba(168, 85, 247, 0.2)" : "none",
+        }}
+      >
+        <span>{displayLabel}</span>
+        <span
+          style={{
+            fontSize: "10px",
+            color: hovered ? "#c084fc" : "rgba(255, 255, 255, 0.4)",
+            fontWeight: 400,
+          }}
+        >
+          ℹ
+        </span>
+      </span>
+
+      {/* Floating Hover Card / Tooltip Popover */}
+      {hovered && (
+        <div
+          style={{
+            position: "fixed",
+            top: popoverPos.placeAbove ? popoverPos.top : popoverPos.top,
+            left: popoverPos.left,
+            transform: popoverPos.placeAbove ? "translate(-50%, -100%)" : "translate(-50%, 0)",
+            zIndex: 99999,
+            width: "min(320px, calc(100vw - 32px))",
+            padding: "14px 16px",
+            borderRadius: "16px",
+            background: "rgba(15, 20, 36, 0.96)",
+            border: "1px solid rgba(168, 85, 247, 0.35)",
+            backdropFilter: "blur(20px)",
+            boxShadow: "0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(168, 85, 247, 0.15)",
+            pointerEvents: "none",
+            boxSizing: "border-box",
+            animation: "fadeIn 0.15s ease-out",
+          }}
+        >
+          {/* Header */}
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px", borderBottom: "1px solid rgba(255,255,255,0.08)", paddingBottom: "8px" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+              <span style={{ fontSize: "14px" }}>⚙️</span>
+              <span style={{ fontSize: "13px", fontWeight: 700, color: "#ffffff" }}>
+                {displayLabel} Specifications
+              </span>
+            </div>
+            {isBest && (
+              <span style={{ fontSize: "9px", fontWeight: 700, padding: "1px 5px", borderRadius: "4px", background: "rgba(245, 158, 11, 0.2)", color: "#fbbf24", textTransform: "uppercase" }}>
+                Top Rank
+              </span>
+            )}
+          </div>
+
+          {/* Breakdown Rows */}
+          <div style={{ display: "flex", flexDirection: "column", gap: "6px", fontSize: "11.5px" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "8px" }}>
+              <span style={{ color: "rgba(255,255,255,0.5)" }}>🤖 LLM Model:</span>
+              <span style={{ color: "#ffffff", fontWeight: 600, textAlign: "right" }}>{details.model}</span>
+            </div>
+
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "8px" }}>
+              <span style={{ color: "rgba(255,255,255,0.5)" }}>⚡ Retrieval:</span>
+              <span style={{ color: "#38bdf8", fontWeight: 600, textAlign: "right" }}>{details.retrieval}</span>
+            </div>
+
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "8px" }}>
+              <span style={{ color: "rgba(255,255,255,0.5)" }}>🎯 Reranker:</span>
+              <span style={{ color: "#c084fc", fontWeight: 600, textAlign: "right" }}>{details.reranker}</span>
+            </div>
+
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "8px" }}>
+              <span style={{ color: "rgba(255,255,255,0.5)" }}>📄 Chunker:</span>
+              <span style={{ color: "rgba(255,255,255,0.85)", textAlign: "right" }}>{details.chunker}</span>
+            </div>
+
+            <div style={{ display: "flex", justifyContent: "space-between", gap: "8px" }}>
+              <span style={{ color: "rgba(255,255,255,0.5)" }}>🧬 Embedding:</span>
+              <span style={{ color: "rgba(255,255,255,0.85)", textAlign: "right" }}>{details.embedding}</span>
+            </div>
+
+            <div style={{ marginTop: "4px", paddingTop: "6px", borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+              <div style={{ color: "rgba(255,255,255,0.5)", marginBottom: "4px" }}>🧩 Active Enhancements:</div>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
+                {details.enhancements.map((enh, idx) => (
+                  <span
+                    key={idx}
+                    style={{
+                      fontSize: "10px",
+                      padding: "2px 6px",
+                      borderRadius: "6px",
+                      background: enh.includes("Default") ? "rgba(255,255,255,0.05)" : "rgba(168, 85, 247, 0.2)",
+                      color: enh.includes("Default") ? "rgba(255,255,255,0.6)" : "#d8b4fe",
+                      fontWeight: 500,
+                    }}
+                  >
+                    {enh}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Raw signature */}
+            <div style={{ marginTop: "6px", paddingTop: "6px", borderTop: "1px solid rgba(255,255,255,0.06)", fontSize: "10px", color: "rgba(255,255,255,0.35)", wordBreak: "break-all", fontFamily: "monospace" }}>
+              Signature: {details.rawName}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/gaugepilot/components/CustomSelector.jsx

@@ -64,7 +64,8 @@ export function CustomSelector({
             position: "absolute",
             top: "calc(100% + 8px)",
             left: 0,
-            width: "300px",
+            width: "min(320px, calc(100vw - 28px))",
+            maxWidth: "calc(100vw - 28px)",
             maxHeight: "360px",
             overflowY: "auto",
             zIndex: 9999,

frontend/src/gaugepilot/components/leaderboards/OverallTable.jsx

@@ -1,4 +1,8 @@
-export default function OverallTable({ data }) {
+import { useMemo } from "react";
+import ConfigBadge from "../ConfigBadge";
+import { buildConfigLabelMap } from "../../utils/configUtils";
+
+export default function OverallTable({ data, labelMap = null }) {
   if (!data || data.length === 0) {
     return (
       <div style={{
@@ -18,9 +22,10 @@ export default function OverallTable({ data }) {
 
   const isOverall = data[0]?.metrics !== undefined;
 
-  const formatConfigName = (name) =>
-    name?.replaceAll("_", " ").replaceAll("+", " + ")
-      .replace("NoRewrite", "(No Rewrite)").replace("NoReranker", "(No Reranker)") ?? "";
+  const resolvedLabelMap = useMemo(() => {
+    if (labelMap && labelMap.size > 0) return labelMap;
+    return buildConfigLabelMap(data);
+  }, [labelMap, data]);
 
   const getMedal = (rank) => {
     if (rank === 1) return { label: "🥇", color: "#f59e0b" };
@@ -69,10 +74,11 @@ export default function OverallTable({ data }) {
     </span>
   );
 
+  // Single Metric View
   if (!isOverall) {
     return (
-      <div style={{ overflowX: "auto" }}>
-        <table style={{ width: "100%", borderCollapse: "collapse", maxWidth: "600px" }}>
+      <div className="table-scroll-container" style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse", minWidth: "460px", maxWidth: "600px" }}>
           <thead>
             <tr>
               <th style={{ ...th, width: "70px", textAlign: "center" }}>Rank</th>
@@ -83,6 +89,7 @@ export default function OverallTable({ data }) {
           <tbody>
             {data.map((row, i) => {
               const medal = getMedal(i + 1);
+              const configLabel = resolvedLabelMap.get(row.config_name) || `Config ${i + 1}`;
               return (
                 <tr
                   key={row.config_name}
@@ -100,7 +107,11 @@ export default function OverallTable({ data }) {
                     }}>{medal.label}</span>
                   </td>
                   <td style={td}>
-                    <span style={{ fontWeight: i === 0 ? 600 : 400 }}>{formatConfigName(row.config_name)}</span>
+                    <ConfigBadge
+                      configName={row.config_name}
+                      label={configLabel}
+                      isBest={i === 0}
+                    />
                   </td>
                   <td style={{ ...td, textAlign: "right" }}>
                     {metricCell(row.value)}
@@ -114,9 +125,10 @@ export default function OverallTable({ data }) {
     );
   }
 
+  // Overall Combined View
   return (
-    <div style={{ overflowX: "auto" }}>
-      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+    <div className="table-scroll-container" style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
+      <table style={{ width: "100%", borderCollapse: "collapse", minWidth: "680px" }}>
         <thead>
           <tr>
             <th style={{ ...th, textAlign: "center", width: "60px" }}>Rank</th>
@@ -132,6 +144,7 @@ export default function OverallTable({ data }) {
         <tbody>
           {data.map((row, i) => {
             const medal = getMedal(i + 1);
+            const configLabel = resolvedLabelMap.get(row.config_name) || `Config ${i + 1}`;
             return (
               <tr
                 key={row.config_name}
@@ -149,19 +162,11 @@ export default function OverallTable({ data }) {
                   }}>{medal.label}</span>
                 </td>
                 <td style={td}>
-                  <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                    {i === 0 && (
-                      <span style={{
-                        fontSize: "10px", fontWeight: 700, padding: "2px 6px",
-                        borderRadius: "4px", background: "rgba(245,158,11,0.15)",
-                        border: "1px solid rgba(245,158,11,0.3)", color: "#f59e0b",
-                        letterSpacing: "0.05em", textTransform: "uppercase",
-                      }}>Best</span>
-                    )}
-                    <span style={{ fontWeight: i === 0 ? 600 : 400, color: i === 0 ? "white" : "rgba(255,255,255,0.75)" }}>
-                      {formatConfigName(row.config_name)}
-                    </span>
-                  </div>
+                  <ConfigBadge
+                    configName={row.config_name}
+                    label={configLabel}
+                    isBest={i === 0}
+                  />
                 </td>
                 <td style={{ ...td, textAlign: "right" }}>
                   <span style={{ fontFamily: "'Courier New', monospace", fontWeight: 600, color: "rgba(255,255,255,0.7)" }}>

frontend/src/gaugepilot/components/visualizations/HeatmapView.jsx

@@ -1,36 +1,18 @@
 import Plot from "react-plotly.js";
+import { parseConfigDetails } from "../../utils/configUtils";
 
 const METRICS = [
-  {
-    key: "faithfulness",
-    label: "Faithfulness",
-  },
-  {
-    key: "grounding",
-    label: "Grounding",
-  },
-  {
-    key: "quality",
-    label: "Quality",
-  },
-  {
-    key: "coverage",
-    label: "Coverage",
-  },
-  {
-    key: "latency",
-    label: "Latency",
-  },
+  { key: "faithfulness", label: "Faithfulness" },
+  { key: "grounding",    label: "Grounding" },
+  { key: "quality",      label: "Quality" },
+  { key: "coverage",     label: "Coverage" },
+  { key: "latency",      label: "Latency" },
 ];
 
-const LOWER_IS_BETTER = new Set([
-  "latency",
-]);
+const LOWER_IS_BETTER = new Set(["latency"]);
 
 function normalizeColumn(values, invert = false) {
-  const valid = values.filter(
-    (v) => v != null && !Number.isNaN(v)
-  );
+  const valid = values.filter((v) => v != null && !Number.isNaN(v));
 
   if (!valid.length) {
     return values.map(() => null);
@@ -42,86 +24,45 @@ function normalizeColumn(values, invert = false) {
 
   return values.map((v) => {
     if (v == null) return null;
-
-    let score =
-      range === 0
-        ? 1
-        : (v - min) / range;
-
-    if (invert) {
-      score = 1 - score;
-    }
-
+    let score = range === 0 ? 1 : (v - min) / range;
+    if (invert) score = 1 - score;
     return score;
   });
 }
 
-export default function HeatmapView({
-  data,
-}) {
+export default function HeatmapView({ data }) {
   const rows = data ?? [];
 
   if (!rows.length) {
     return (
-      <p
-        style={{
-          color:
-            "rgba(255,255,255,0.4)",
-          margin: 0,
-        }}
-      >
-        No configurations to compare
-        yet.
+      <p style={{ color: "rgba(255,255,255,0.4)", margin: 0 }}>
+        No configurations to compare yet.
       </p>
     );
   }
 
   const z = rows.map((row, i) => {
-    return METRICS.map(
-      ({ key }) => {
-        const values = rows.map(
-          (r) => r[key]
-        );
-
-        const normalized =
-          normalizeColumn(
-            values,
-            LOWER_IS_BETTER.has(key)
-          );
-
-        return normalized[i];
-      }
-    );
+    return METRICS.map(({ key }) => {
+      const values = rows.map((r) => r[key]);
+      const normalized = normalizeColumn(values, LOWER_IS_BETTER.has(key));
+      return normalized[i];
+    });
   });
 
   const annotations = [];
 
-  rows.forEach((row, rowIndex) => {
-    METRICS.forEach(
-      ({ key, label }, colIndex) => {
-        const value = row[key];
-
-        annotations.push({
-          x: label,
-          y:
-            row.config
-              ?.replaceAll("_", " ")
-              ?.replaceAll("+", " + ") ??
-            "",
-          text:
-            value != null
-              ? Number(value).toFixed(
-                  2
-                )
-              : "—",
-          showarrow: false,
-          font: {
-            color: "white",
-            size: 13,
-          },
-        });
-      }
-    );
+  rows.forEach((row) => {
+    const cLabel = row.configLabel || row.config;
+    METRICS.forEach(({ key, label }) => {
+      const value = row[key];
+      annotations.push({
+        x: label,
+        y: cLabel,
+        text: value != null ? Number(value).toFixed(2) : "—",
+        showarrow: false,
+        font: { color: "white", size: 13 },
+      });
+    });
   });
 
   return (
@@ -129,68 +70,34 @@ export default function HeatmapView({
       data={[
         {
           z,
-          x: METRICS.map(
-            (m) => m.label
-          ),
-          y: rows.map(
-            (r) =>
-              r.config
-                ?.replaceAll(
-                  "_",
-                  " "
-                )
-                ?.replaceAll(
-                  "+",
-                  " + "
-                ) ?? ""
-          ),
+          x: METRICS.map((m) => m.label),
+          y: rows.map((r) => r.configLabel || r.config),
           type: "heatmap",
           colorscale: "RdYlGn",
           reversescale: false,
           showscale: true,
           hoverongaps: false,
-          hovertemplate:
-            "<b>%{y}</b><br>%{x}<br>%{z:.2f}<extra></extra>",
+          hovertemplate: "<b>%{y}</b><br>%{x}: %{z:.2f}<extra></extra>",
         },
       ]}
       layout={{
-        height:
-          120 +
-          rows.length * 70,
-        margin: {
-          l: 220,
-          r: 50,
-          t: 30,
-          b: 70,
-        },
-        paper_bgcolor:
-          "rgba(0,0,0,0)",
-        plot_bgcolor:
-          "rgba(0,0,0,0)",
-        font: {
-          color: "white",
-        },
+        height: 120 + rows.length * 60,
+        margin: { l: 120, r: 50, t: 30, b: 60 },
+        paper_bgcolor: "rgba(0,0,0,0)",
+        plot_bgcolor: "rgba(0,0,0,0)",
+        font: { color: "white" },
         annotations,
         xaxis: {
           side: "top",
-          tickfont: {
-            size: 14,
-          },
+          tickfont: { size: 13, color: "rgba(255,255,255,0.85)" },
         },
         yaxis: {
-          tickfont: {
-            size: 14,
-          },
+          tickfont: { size: 13, color: "rgba(255,255,255,0.85)" },
           autorange: "reversed",
         },
       }}
-      style={{
-        width: "100%",
-      }}
-      config={{
-        displayModeBar: false,
-        responsive: true,
-      }}
+      style={{ width: "100%" }}
+      config={{ displayModeBar: false, responsive: true }}
     />
   );
 }

frontend/src/gaugepilot/components/visualizations/ParallelCoordinatesView.jsx

@@ -9,6 +9,7 @@ import {
   Legend,
   ResponsiveContainer,
 } from "recharts";
+import { parseConfigDetails } from "../../utils/configUtils";
 
 const METRICS = [
   { key: "faithfulness", label: "Faithfulness" },
@@ -20,8 +21,7 @@ const METRICS = [
 
 const LOWER_IS_BETTER = new Set(["latency"]);
 
-const getColor = (index) =>
-  `hsl(${(index * 137.508) % 360}, 70%, 55%)`;
+const getColor = (index) => `hsl(${(index * 137.508) % 360}, 70%, 55%)`;
 
 function buildNormalizers(rows) {
   const map = {};
@@ -42,14 +42,8 @@ function buildNormalizers(rows) {
 
     map[key] = (v) => {
       if (v == null) return null;
-
-      const t =
-        range === 0 ? 1 : (v - min) / range;
-
-      const goodness = LOWER_IS_BETTER.has(key)
-        ? 1 - t
-        : t;
-
+      const t = range === 0 ? 1 : (v - min) / range;
+      const goodness = LOWER_IS_BETTER.has(key) ? 1 - t : t;
       return Math.round(goodness * 100);
     };
   });
@@ -57,42 +51,26 @@ function buildNormalizers(rows) {
   return map;
 }
 
-export default function ParallelCoordinatesView({
-  data,
-}) {
+export default function ParallelCoordinatesView({ data }) {
   const rows = data ?? [];
 
   const displayRows = useMemo(() => {
-    if (rows.length <= 7) {
-      return rows;
-    }
-
-    return [...rows]
-      .sort(
-        (a, b) =>
-          (a.average_rank ?? 999) -
-          (b.average_rank ?? 999)
-      )
-      .slice(0, 7);
+    const sorted = [...rows].sort(
+      (a, b) => (a.averageRank ?? 999) - (b.averageRank ?? 999)
+    );
+    return sorted.slice(0, 8);
   }, [rows]);
 
-  const normalizers = useMemo(
-    () => buildNormalizers(displayRows),
-    [displayRows]
-  );
+  const normalizers = useMemo(() => buildNormalizers(displayRows), [displayRows]);
 
   const chartData = useMemo(
     () =>
       METRICS.map(({ key, label }) => {
-        const point = {
-          metric: label,
-        };
-
+        const point = { metric: label };
         displayRows.forEach((row) => {
-          point[row.config] =
-            normalizers[key](row[key]) ?? null;
+          const cLabel = row.configLabel || row.config;
+          point[cLabel] = normalizers[key](row[key]) ?? null;
         });
-
         return point;
       }),
     [displayRows, normalizers]
@@ -100,168 +78,106 @@ export default function ParallelCoordinatesView({
 
   const rawByConfigAndMetric = useMemo(() => {
     const map = {};
-
     displayRows.forEach((row) => {
-      map[row.config] = {};
-
+      const cLabel = row.configLabel || row.config;
+      map[cLabel] = {
+        details: row.configDetails || parseConfigDetails(row.config),
+        metrics: {},
+      };
       METRICS.forEach(({ key }) => {
-        map[row.config][key] = row[key];
+        map[cLabel].metrics[key] = row[key];
       });
     });
-
     return map;
   }, [displayRows]);
 
-  const CustomTooltip = ({
-    active,
-    payload,
-    label,
-  }) => {
-    if (!active || !payload?.length) {
-      return null;
-    }
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (!active || !payload?.length) return null;
 
-    const metricKey = METRICS.find(
-      (m) => m.label === label
-    )?.key;
+    const metricKey = METRICS.find((m) => m.label === label)?.key;
 
     return (
       <div
         style={{
-          background:
-            "rgba(15,15,25,0.96)",
-          border:
-            "1px solid rgba(255,255,255,0.12)",
-          borderRadius: "12px",
-          padding: "12px 14px",
+          background: "rgba(15, 20, 36, 0.97)",
+          border: "1px solid rgba(168, 85, 247, 0.35)",
+          borderRadius: "14px",
+          padding: "12px 16px",
           fontSize: "12px",
-          minWidth: "200px",
+          minWidth: "260px",
+          boxShadow: "0 16px 36px rgba(0,0,0,0.6)",
         }}
       >
-        <div
-          style={{
-            color: "white",
-            fontWeight: 700,
-            marginBottom: "8px",
-          }}
-        >
-          {label}
+        <div style={{ color: "white", fontWeight: 700, marginBottom: 10, fontSize: "13px", borderBottom: "1px solid rgba(255,255,255,0.08)", paddingBottom: "6px" }}>
+          📊 {label} Coordinate Trajectory
         </div>
 
-        {payload.map((entry) => (
-          <div
-            key={entry.dataKey}
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              gap: "12px",
-              color: entry.color,
-              marginBottom: "4px",
-            }}
-          >
-            <span>
-              {String(entry.dataKey).replaceAll(
-                "_",
-                " "
-              )}
-            </span>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          {payload.map((entry) => {
+            const info = rawByConfigAndMetric[entry.dataKey];
+            const rawVal = info?.metrics?.[metricKey];
+            const details = info?.details;
 
-            <span style={{ color: "white" }}>
-              {rawByConfigAndMetric[
-                entry.dataKey
-              ]?.[metricKey] != null
-                ? Number(
-                    rawByConfigAndMetric[
-                      entry.dataKey
-                    ][metricKey]
-                  ).toFixed(2)
-                : "—"}
-            </span>
-          </div>
-        ))}
+            return (
+              <div
+                key={entry.dataKey}
+                style={{
+                  padding: "6px 8px",
+                  borderRadius: "8px",
+                  background: "rgba(255,255,255,0.03)",
+                  borderLeft: `3px solid ${entry.color}`,
+                }}
+              >
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                  <span style={{ color: entry.color, fontWeight: 700 }}>{entry.dataKey}</span>
+                  <span style={{ color: "rgba(255,255,255,0.9)", fontWeight: 600 }}>
+                    Score: {entry.value}/100 {rawVal != null ? `(${Number(rawVal).toFixed(2)})` : ""}
+                  </span>
+                </div>
+                {details && (
+                  <div style={{ fontSize: "10.5px", color: "rgba(255,255,255,0.6)", marginTop: "2px" }}>
+                    {details.model} · {details.retrieval} · {details.reranker}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
       </div>
     );
   };
 
-  if (!displayRows.length) {
+  if (displayRows.length === 0) {
     return (
-      <p
-        style={{
-          margin: 0,
-          fontSize: "13px",
-          color:
-            "rgba(255,255,255,0.35)",
-        }}
-      >
-        No configurations to compare yet.
+      <p style={{ margin: 0, fontSize: "13px", color: "rgba(255,255,255,0.35)" }}>
+        No configurations to plot yet.
       </p>
     );
   }
 
   return (
     <div>
-      {rows.length > 7 && (
-        <div
-          style={{
-            marginBottom: 14,
-            fontSize: 12,
-            color:
-              "rgba(255,255,255,0.45)",
-          }}
-        >
-          Showing top 7 of {rows.length} configurations.
-        </div>
-      )}
-
-      <ResponsiveContainer
-        width="100%"
-        height={450}
-      >
-        <LineChart
-          data={chartData}
-          margin={{
-            top: 20,
-            right: 30,
-            bottom: 20,
-            left: 10,
-          }}
-        >
-          <CartesianGrid
-            stroke="rgba(255,255,255,0.06)"
-          />
-
+      <ResponsiveContainer width="100%" height={380}>
+        <LineChart data={chartData} margin={{ top: 20, right: 30, bottom: 20, left: 10 }}>
+          <CartesianGrid stroke="rgba(255,255,255,0.06)" />
           <XAxis
             dataKey="metric"
             stroke="rgba(255,255,255,0.35)"
-            tick={{
-              fill:
-                "rgba(255,255,255,0.6)",
-              fontSize: 12,
-            }}
+            tick={{ fill: "rgba(255,255,255,0.85)", fontSize: 12, fontWeight: 600 }}
           />
-
           <YAxis
             domain={[0, 100]}
             stroke="rgba(255,255,255,0.35)"
-            tick={{
-              fill:
-                "rgba(255,255,255,0.6)",
-              fontSize: 11,
-            }}
+            tick={{ fill: "rgba(255,255,255,0.5)", fontSize: 11 }}
             label={{
               value: "Normalized Score",
               angle: -90,
               position: "insideLeft",
-              fill:
-                "rgba(255,255,255,0.45)",
+              fill: "rgba(255,255,255,0.45)",
               fontSize: 11,
             }}
           />
-
-          <Tooltip
-            content={<CustomTooltip />}
-          />
-
+          <Tooltip content={<CustomTooltip />} />
           <Legend
             layout="horizontal"
             verticalAlign="bottom"
@@ -269,63 +185,35 @@ export default function ParallelCoordinatesView({
               maxHeight: 70,
               overflowY: "auto",
               fontSize: 12,
+              paddingTop: "10px",
             }}
             formatter={(value) => (
-              <span
-                style={{
-                  color:
-                    "rgba(255,255,255,0.7)",
-                }}
-              >
-                {value.replaceAll(
-                  "_",
-                  " "
-                )}
+              <span style={{ color: "rgba(255,255,255,0.85)", fontWeight: 600, marginRight: 8 }}>
+                {value}
               </span>
             )}
           />
-
-          {displayRows
-            .sort(
-              (a, b) =>
-                (a.average_rank ?? 999) -
-                (b.average_rank ?? 999)
-            )
-            .map((row, i) => (
+          {displayRows.map((row, i) => {
+            const cLabel = row.configLabel || row.config;
+            return (
               <Line
-                key={row.config}
+                key={cLabel}
                 type="monotone"
-                name={row.config}
-                dataKey={row.config}
+                name={cLabel}
+                dataKey={cLabel}
                 stroke={getColor(i)}
                 strokeWidth={3}
-                dot={{
-                  r: 5,
-                  fill: getColor(i),
-                  strokeWidth: 2,
-                }}
-                activeDot={{
-                  r: 7,
-                }}
+                dot={{ r: 5, fill: getColor(i), strokeWidth: 2 }}
+                activeDot={{ r: 7 }}
                 connectNulls
               />
-            ))}
+            );
+          })}
         </LineChart>
       </ResponsiveContainer>
 
-      <p
-        style={{
-          margin: "16px 0 0",
-          fontSize: "11px",
-          color:
-            "rgba(255,255,255,0.3)",
-        }}
-      >
-        Each metric is normalized from
-        0–100 across all displayed
-        configurations. Latency is
-        inverted so higher always means
-        better.
+      <p style={{ margin: "16px 0 0", fontSize: "11px", color: "rgba(255,255,255,0.3)" }}>
+        Each metric is normalized from 0–100 across displayed configurations. Latency is inverted so higher represents better performance.
       </p>
     </div>
   );

frontend/src/gaugepilot/components/visualizations/ParetoView.jsx

@@ -3,6 +3,7 @@ import {
   ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
 } from "recharts";
 import ExperimentSelector from "../ExperimentSelector";
+import { parseConfigDetails } from "../../utils/configUtils";
 
 const METRICS = [
   { value: "faithfulness", label: "Faithfulness" },
@@ -16,7 +17,6 @@ const LOWER_IS_BETTER = new Set(["latency"]);
 const metricLabel = (key) => METRICS.find((m) => m.value === key)?.label ?? key;
 
 function computeFrontier(points, xMetric, yMetric) {
-  // Orient both axes so "higher is better" for the dominance comparison.
   const oriented = points.map((p) => ({
     ...p,
     ox: LOWER_IS_BETTER.has(xMetric) ? -p.x : p.x,
@@ -42,7 +42,13 @@ export default function ParetoView({ data }) {
     () =>
       (data ?? [])
         .filter((row) => row[xMetric] != null && row[yMetric] != null)
-        .map((row) => ({ config: row.config, x: row[xMetric], y: row[yMetric] })),
+        .map((row) => ({
+          config: row.config,
+          configLabel: row.configLabel || row.config,
+          configDetails: row.configDetails || parseConfigDetails(row.config),
+          x: row[xMetric],
+          y: row[yMetric],
+        })),
     [data, xMetric, yMetric]
   );
 
@@ -56,22 +62,41 @@ export default function ParetoView({ data }) {
   const CustomTooltip = ({ active, payload }) => {
     if (!active || !payload?.length) return null;
     const p = payload[0].payload;
+    const details = p.configDetails || parseConfigDetails(p.config);
+
     return (
       <div style={{
-        background: "rgba(15,15,25,0.95)", border: "1px solid rgba(255,255,255,0.12)",
-        borderRadius: "10px", padding: "10px 14px", fontSize: "12px",
+        background: "rgba(15, 20, 36, 0.97)",
+        border: "1px solid rgba(168, 85, 247, 0.35)",
+        borderRadius: "14px",
+        padding: "12px 16px",
+        fontSize: "12px",
+        boxShadow: "0 16px 36px rgba(0,0,0,0.6)",
+        maxWidth: "300px",
       }}>
-        <div style={{ fontWeight: 700, color: "white", marginBottom: "4px" }}>
-          {p.config?.replaceAll("_", " ")}
-        </div>
-        <div style={{ color: "rgba(255,255,255,0.6)" }}>
-          {metricLabel(xMetric)}: <span style={{ color: "white" }}>{Number(p.x).toFixed(2)}</span>
+        <div style={{ fontWeight: 700, color: "white", fontSize: "13px", marginBottom: "6px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span>🏷️ {p.configLabel}</span>
+          <span style={{
+            fontSize: "10px",
+            fontWeight: 700,
+            padding: "2px 6px",
+            borderRadius: "4px",
+            background: p.dominated ? "rgba(255,255,255,0.06)" : "rgba(34, 197, 94, 0.2)",
+            color: p.dominated ? "rgba(255,255,255,0.5)" : "#22c55e",
+          }}>
+            {p.dominated ? "Dominated" : "Pareto Optimal"}
+          </span>
         </div>
-        <div style={{ color: "rgba(255,255,255,0.6)" }}>
-          {metricLabel(yMetric)}: <span style={{ color: "white" }}>{Number(p.y).toFixed(2)}</span>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "4px", fontSize: "11.5px", color: "rgba(255,255,255,0.8)" }}>
+          <div>{metricLabel(xMetric)}: <strong style={{ color: "#38bdf8" }}>{Number(p.x).toFixed(2)}</strong></div>
+          <div>{metricLabel(yMetric)}: <strong style={{ color: "#c084fc" }}>{Number(p.y).toFixed(2)}</strong></div>
         </div>
-        <div style={{ marginTop: "4px", fontWeight: 600, color: p.dominated ? "rgba(255,255,255,0.4)" : "#22c55e" }}>
-          {p.dominated ? "Dominated" : "Pareto optimal"}
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "2px", fontSize: "10.5px", color: "rgba(255,255,255,0.6)", borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: "6px", marginTop: "6px" }}>
+          <div>Model: {details.model}</div>
+          <div>Retrieval: {details.retrieval} · {details.reranker}</div>
+          <div>Enhancements: {details.enhancements?.join(", ")}</div>
         </div>
       </div>
     );
@@ -108,18 +133,14 @@ export default function ParetoView({ data }) {
           <Legend
             verticalAlign="top" align="right" height={30}
             payload={[
-              { value: "Pareto optimal", type: "circle", color: accent },
+              { value: "Pareto Frontier (Optimal)", type: "circle", color: "#22c55e" },
               { value: "Dominated", type: "circle", color: muted },
             ]}
-            formatter={(value) => <span style={{ color: "rgba(255,255,255,0.6)", fontSize: 12 }}>{value}</span>}
           />
-          <Scatter data={dominated} fill={muted} fillOpacity={0.6} />
-          <Scatter data={frontier} fill={accent} line={{ stroke: accent, strokeWidth: 1.5, strokeDasharray: "4 4" }} lineType="joint" />
+          <Scatter name="Dominated" data={dominated} fill={muted} />
+          <Scatter name="Pareto Optimal" data={frontier} fill="#22c55e" line={{ stroke: "#22c55e", strokeWidth: 1.5, strokeDasharray: "4 4" }} />
         </ScatterChart>
       </ResponsiveContainer>
-      <p style={{ margin: "14px 0 0", fontSize: "11px", color: "rgba(255,255,255,0.3)" }}>
-        Dashed line connects Pareto-optimal configurations; dominated configurations are faded.
-      </p>
     </div>
   );
 }

frontend/src/gaugepilot/components/visualizations/PerformanceProfile.jsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import {
   LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Dot,
 } from "recharts";
+import { parseConfigDetails } from "../../utils/configUtils";
 
 const METRICS = [
   { key: "faithfulness", label: "Faithfulness" },
@@ -28,7 +29,12 @@ function computeWins(rows) {
   });
 
   return rows
-    .map((r) => ({ config: r.config, wins: wins[r.config] ?? 0 }))
+    .map((r) => ({
+      config: r.config,
+      configLabel: r.configLabel || r.config,
+      configDetails: r.configDetails || parseConfigDetails(r.config),
+      wins: wins[r.config] ?? 0,
+    }))
     .sort((a, b) => b.wins - a.wins);
 }
 
@@ -39,16 +45,28 @@ export default function PerformanceProfile({ data }) {
   const CustomTooltip = ({ active, payload }) => {
     if (!active || !payload?.length) return null;
     const p = payload[0].payload;
+    const details = p.configDetails || parseConfigDetails(p.config);
+
     return (
       <div style={{
-        background: "rgba(15,15,25,0.95)", border: "1px solid rgba(255,255,255,0.12)",
-        borderRadius: "10px", padding: "10px 14px", fontSize: "12px",
+        background: "rgba(15, 20, 36, 0.97)",
+        border: "1px solid rgba(168, 85, 247, 0.35)",
+        borderRadius: "14px",
+        padding: "12px 16px",
+        fontSize: "12px",
+        boxShadow: "0 16px 36px rgba(0,0,0,0.6)",
+        maxWidth: "300px",
       }}>
-        <div style={{ fontWeight: 700, color: "white", marginBottom: "4px" }}>
-          {p.config?.replaceAll("_", " ")}
+        <div style={{ fontWeight: 700, color: "white", fontSize: "13px", marginBottom: "6px" }}>
+          🏷️ {p.configLabel}
+        </div>
+        <div style={{ color: "#38bdf8", fontWeight: 600, marginBottom: "6px" }}>
+          Metrics Won Outright: {p.wins} / {METRICS.length}
         </div>
-        <div style={{ color: "rgba(255,255,255,0.6)" }}>
-          Metrics won: <span style={{ color: "white" }}>{p.wins} / {METRICS.length}</span>
+        <div style={{ display: "flex", flexDirection: "column", gap: "2px", fontSize: "10.5px", color: "rgba(255,255,255,0.6)", borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: "6px" }}>
+          <div>Model: {details.model}</div>
+          <div>Retrieval: {details.retrieval} · {details.reranker}</div>
+          <div>Enhancements: {details.enhancements?.join(", ")}</div>
         </div>
       </div>
     );
@@ -73,8 +91,8 @@ export default function PerformanceProfile({ data }) {
         <LineChart data={profile} margin={{ top: 10, right: 20, bottom: 10, left: 0 }}>
           <CartesianGrid stroke="rgba(255,255,255,0.06)" />
           <XAxis
-            dataKey="config" tickFormatter={(v) => v?.replaceAll("_", " ")}
-            stroke="rgba(255,255,255,0.35)" tick={{ fill: "rgba(255,255,255,0.5)", fontSize: 11 }}
+            dataKey="configLabel"
+            stroke="rgba(255,255,255,0.35)" tick={{ fill: "rgba(255,255,255,0.75)", fontSize: 11, fontWeight: 600 }}
             interval={0} angle={-20} textAnchor="end" height={60}
           />
           <YAxis
@@ -87,7 +105,7 @@ export default function PerformanceProfile({ data }) {
         </LineChart>
       </ResponsiveContainer>
       <p style={{ margin: "14px 0 0", fontSize: "11px", color: "rgba(255,255,255,0.3)" }}>
-        Counts how many of the {METRICS.length} metrics each configuration leads on (latency counts a win for the lowest value).
+        Counts how many of the {METRICS.length} metrics each configuration leads on (latency counts a win for lowest value).
       </p>
     </div>
   );

frontend/src/gaugepilot/components/visualizations/RadarView.jsx

@@ -9,6 +9,7 @@ import {
   Tooltip,
   Legend,
 } from "recharts";
+import { parseConfigDetails } from "../../utils/configUtils";
 
 const METRICS = [
   { key: "faithfulness", label: "Faithfulness" },
@@ -20,8 +21,7 @@ const METRICS = [
 
 const LOWER_IS_BETTER = new Set(["latency"]);
 
-const getColor = (index) =>
-  `hsl(${(index * 137.508) % 360}, 70%, 55%)`;
+const getColor = (index) => `hsl(${(index * 137.508) % 360}, 70%, 55%)`;
 
 function buildNormalizers(rows) {
   const map = {};
@@ -41,271 +41,135 @@ function buildNormalizers(rows) {
     const range = max - min;
 
     map[key] = (v) => {
-      if (v == null) {
-        return null;
-      }
-
-      const t =
-        range === 0
-          ? 1
-          : (v - min) / range;
-
-      const goodness =
-        LOWER_IS_BETTER.has(key)
-          ? 1 - t
-          : t;
-
-      return Math.round(
-        goodness * 100
-      );
+      if (v == null) return null;
+      const t = range === 0 ? 1 : (v - min) / range;
+      const goodness = LOWER_IS_BETTER.has(key) ? 1 - t : t;
+      return Math.round(goodness * 100);
     };
   });
 
   return map;
 }
 
-export default function RadarView({
-  data,
-}) {
+export default function RadarView({ data }) {
   const rows = data ?? [];
 
   const displayRows = useMemo(() => {
-    if (rows.length <= 7) {
-      return rows;
-    }
-
-    return [...rows]
-      .sort(
-        (a, b) =>
-          (a.average_rank ?? 999) -
-          (b.average_rank ?? 999)
-      )
-      .slice(0, 7);
+    const sorted = [...rows].sort(
+      (a, b) => (a.averageRank ?? 999) - (b.averageRank ?? 999)
+    );
+    return sorted.slice(0, 8);
   }, [rows]);
 
-  const normalizers = useMemo(
-    () =>
-      buildNormalizers(
-        displayRows
-      ),
-    [displayRows]
-  );
-
-  const chartData = useMemo(
-    () =>
-      METRICS.map(
-        ({ key, label }) => {
-          const point = {
-            metric: label,
-          };
+  const normalizers = useMemo(() => buildNormalizers(displayRows), [displayRows]);
 
-          displayRows.forEach(
-            (row) => {
-              point[row.config] =
-                normalizers[key](
-                  row[key]
-                ) ?? 0;
-            }
-          );
-
-          return point;
-        }
-      ),
-    [displayRows, normalizers]
-  );
+  const chartData = useMemo(() => {
+    return METRICS.map(({ key, label }) => {
+      const point = { metric: label };
+      displayRows.forEach((row) => {
+        const cLabel = row.configLabel || row.config;
+        point[cLabel] = normalizers[key](row[key]) ?? 0;
+      });
+      return point;
+    });
+  }, [displayRows, normalizers]);
 
   const rawMap = useMemo(() => {
     const map = {};
-
     displayRows.forEach((row) => {
-      map[row.config] = {};
-
-      METRICS.forEach(
-        ({ key }) => {
-          map[row.config][key] =
-            row[key];
-        }
-      );
+      const cLabel = row.configLabel || row.config;
+      map[cLabel] = {
+        details: row.configDetails || parseConfigDetails(row.config),
+        metrics: {},
+      };
+      METRICS.forEach(({ key }) => {
+        map[cLabel].metrics[key] = row[key];
+      });
     });
-
     return map;
   }, [displayRows]);
 
-  const CustomTooltip = ({
-    active,
-    payload,
-    label,
-  }) => {
-    if (
-      !active ||
-      !payload?.length
-    ) {
-      return null;
-    }
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (!active || !payload?.length) return null;
 
-    const metricKey =
-      METRICS.find(
-        (m) =>
-          m.label === label
-      )?.key;
+    const metricKey = METRICS.find((m) => m.label === label)?.key;
 
     return (
       <div
         style={{
-          background:
-            "rgba(15,15,25,0.97)",
-          border:
-            "1px solid rgba(255,255,255,0.12)",
-          borderRadius: 12,
-          padding:
-            "12px 14px",
+          background: "rgba(15, 20, 36, 0.97)",
+          border: "1px solid rgba(168, 85, 247, 0.35)",
+          borderRadius: 14,
+          padding: "12px 16px",
           fontSize: 12,
-          minWidth: 220,
+          minWidth: 260,
+          boxShadow: "0 16px 36px rgba(0,0,0,0.6)",
         }}
       >
-        <div
-          style={{
-            color: "white",
-            fontWeight: 700,
-            marginBottom: 10,
-          }}
-        >
-          {label}
+        <div style={{ color: "white", fontWeight: 700, marginBottom: 10, fontSize: "13px", borderBottom: "1px solid rgba(255,255,255,0.08)", paddingBottom: "6px" }}>
+          📊 {label} Comparison
         </div>
 
-        {payload.map((entry) => (
-          <div
-            key={entry.dataKey}
-            style={{
-              display: "flex",
-              justifyContent:
-                "space-between",
-              gap: 14,
-              marginBottom: 6,
-            }}
-          >
-            <div
-              style={{
-                color:
-                  entry.color,
-              }}
-            >
-              {entry.dataKey}
-            </div>
-
-            <div
-              style={{
-                textAlign:
-                  "right",
-                color:
-                  "rgba(255,255,255,0.9)",
-              }}
-            >
-              <div>
-                Score:{" "}
-                {entry.value}
-              </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          {payload.map((entry) => {
+            const info = rawMap[entry.dataKey];
+            const rawVal = info?.metrics?.[metricKey];
+            const details = info?.details;
 
+            return (
               <div
+                key={entry.dataKey}
                 style={{
-                  color:
-                    "rgba(255,255,255,0.55)",
-                  fontSize: 11,
+                  padding: "6px 8px",
+                  borderRadius: "8px",
+                  background: "rgba(255,255,255,0.03)",
+                  borderLeft: `3px solid ${entry.color}`,
                 }}
               >
-                Raw:{" "}
-                {rawMap[
-                  entry.dataKey
-                ]?.[
-                  metricKey
-                ] != null
-                  ? Number(
-                      rawMap[
-                        entry
-                          .dataKey
-                      ][
-                        metricKey
-                      ]
-                    ).toFixed(
-                      2
-                    )
-                  : "—"}
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                  <span style={{ color: entry.color, fontWeight: 700 }}>{entry.dataKey}</span>
+                  <span style={{ color: "#ffffff", fontWeight: 600 }}>
+                    Score: {entry.value}/100 {rawVal != null ? `(${Number(rawVal).toFixed(2)})` : ""}
+                  </span>
+                </div>
+                {details && (
+                  <div style={{ fontSize: "10.5px", color: "rgba(255,255,255,0.6)", marginTop: "2px" }}>
+                    {details.model} · {details.retrieval} · {details.reranker}
+                  </div>
+                )}
               </div>
-            </div>
-          </div>
-        ))}
+            );
+          })}
+        </div>
       </div>
     );
   };
 
-  if (!displayRows.length) {
+  if (displayRows.length === 0) {
     return (
-      <p
-        style={{
-          margin: 0,
-          fontSize: 13,
-          color:
-            "rgba(255,255,255,0.35)",
-        }}
-      >
-        No configurations to
-        profile yet.
+      <p style={{ margin: 0, fontSize: 13, color: "rgba(255,255,255,0.35)" }}>
+        No configurations to plot yet.
       </p>
     );
   }
 
   return (
     <div>
-      {rows.length > 7 && (
-        <div
-          style={{
-            marginBottom: 14,
-            fontSize: 12,
-            color:
-              "rgba(255,255,255,0.45)",
-          }}
-        >
-          Showing top 7 of{" "}
-          {rows.length} configurations.
-        </div>
-      )}
-
-      <ResponsiveContainer
-        width="100%"
-        height={550}
-      >
-        <RadarChart
-          data={chartData}
-          outerRadius="82%"
-        >
-          <PolarGrid
-            stroke="rgba(255,255,255,0.08)"
-          />
-
+      <ResponsiveContainer width="100%" height={380}>
+        <RadarChart data={chartData} margin={{ top: 20, right: 30, bottom: 20, left: 30 }}>
+          <PolarGrid stroke="rgba(255,255,255,0.08)" />
           <PolarAngleAxis
             dataKey="metric"
-            tick={{
-              fill:
-                "rgba(255,255,255,0.7)",
-              fontSize: 13,
-            }}
+            tick={{ fill: "rgba(255,255,255,0.85)", fontSize: 12, fontWeight: 600 }}
           />
-
           <PolarRadiusAxis
-            angle={90}
+            angle={30}
             domain={[0, 100]}
-            tick={{
-              fill:
-                "rgba(255,255,255,0.3)",
-              fontSize: 11,
-            }}
+            stroke="rgba(255,255,255,0.2)"
+            tick={{ fill: "rgba(255,255,255,0.4)", fontSize: 10 }}
           />
 
-          <Tooltip
-            content={
-              <CustomTooltip />
-            }
-          />
+          <Tooltip content={<CustomTooltip />} />
 
           <Legend
             layout="horizontal"
@@ -314,61 +178,34 @@ export default function RadarView({
               fontSize: 12,
               maxHeight: 70,
               overflowY: "auto",
+              paddingTop: "10px",
             }}
-            formatter={(
-              value
-            ) => (
-              <span
-                style={{
-                  color:
-                    "rgba(255,255,255,0.7)",
-                }}
-              >
+            formatter={(value) => (
+              <span style={{ color: "rgba(255,255,255,0.85)", fontWeight: 600, marginRight: 8 }}>
                 {value}
               </span>
             )}
           />
 
-          {displayRows.map(
-            (row, i) => (
+          {displayRows.map((row, i) => {
+            const cLabel = row.configLabel || row.config;
+            return (
               <Radar
-                key={row.config}
-                name={
-                  row.config
-                }
-                dataKey={
-                  row.config
-                }
-                stroke={getColor(
-                  i
-                )}
+                key={cLabel}
+                name={cLabel}
+                dataKey={cLabel}
+                stroke={getColor(i)}
                 fill={getColor(i)}
-                fillOpacity={
-                  0.12
-                }
+                fillOpacity={0.12}
                 strokeWidth={2}
               />
-            )
-          )}
+            );
+          })}
         </RadarChart>
       </ResponsiveContainer>
 
-      <p
-        style={{
-          margin:
-            "16px 0 0",
-          fontSize: 11,
-          color:
-            "rgba(255,255,255,0.3)",
-        }}
-      >
-        Each axis is
-        normalized from 0–100
-        across all displayed
-        configurations.
-        Latency is inverted so
-        further outward always
-        means better.
+      <p style={{ margin: "16px 0 0", fontSize: 11, color: "rgba(255,255,255,0.3)" }}>
+        Each axis is normalized from 0–100 across displayed configurations. Latency is inverted so outward represents better speed.
       </p>
     </div>
   );

frontend/src/gaugepilot/components/visualizations/RankingBarView.jsx

@@ -2,19 +2,23 @@ import { useMemo } from "react";
 import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell,
 } from "recharts";
+import { parseConfigDetails } from "../../utils/configUtils";
 
 export default function RankingBarView({ data }) {
   const rows = data ?? [];
 
   const accent = "#4f6ef7";
-  const green = "#22c55e";
 
   const ranked = useMemo(
     () =>
       rows
         .filter((r) => r.averageRank != null)
-        .map((r) => ({ config: r.config, averageRank: r.averageRank }))
-        // Lower average rank is better, so the best configuration sorts first.
+        .map((r) => ({
+          config: r.config,
+          configLabel: r.configLabel || r.config,
+          configDetails: r.configDetails || parseConfigDetails(r.config),
+          averageRank: r.averageRank,
+        }))
         .sort((a, b) => a.averageRank - b.averageRank),
     [rows]
   );
@@ -35,16 +39,28 @@ export default function RankingBarView({ data }) {
   const CustomTooltip = ({ active, payload }) => {
     if (!active || !payload?.length) return null;
     const p = payload[0].payload;
+    const details = p.configDetails || parseConfigDetails(p.config);
+
     return (
       <div style={{
-        background: "rgba(15,15,25,0.95)", border: "1px solid rgba(255,255,255,0.12)",
-        borderRadius: "10px", padding: "10px 14px", fontSize: "12px",
+        background: "rgba(15, 20, 36, 0.97)",
+        border: "1px solid rgba(168, 85, 247, 0.35)",
+        borderRadius: "14px",
+        padding: "12px 16px",
+        fontSize: "12px",
+        boxShadow: "0 16px 36px rgba(0,0,0,0.6)",
+        maxWidth: "300px",
       }}>
-        <div style={{ fontWeight: 700, color: "white", marginBottom: "4px" }}>
-          {p.config?.replaceAll("_", " ")}
+        <div style={{ fontWeight: 700, color: "#ffffff", fontSize: "13px", marginBottom: "6px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span>🏷️ {p.configLabel}</span>
+          <span style={{ color: "#38bdf8", fontSize: "11px" }}>Rank: {Number(p.averageRank).toFixed(2)}</span>
         </div>
-        <div style={{ color: "rgba(255,255,255,0.6)" }}>
-          Average rank: <span style={{ color: "white" }}>{Number(p.averageRank).toFixed(2)}</span>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "3px", fontSize: "11px", color: "rgba(255,255,255,0.75)", borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: "6px" }}>
+          <div><strong style={{ color: "rgba(255,255,255,0.5)" }}>Model:</strong> {details.model}</div>
+          <div><strong style={{ color: "rgba(255,255,255,0.5)" }}>Retrieval:</strong> {details.retrieval}</div>
+          <div><strong style={{ color: "rgba(255,255,255,0.5)" }}>Reranker:</strong> {details.reranker}</div>
+          <div><strong style={{ color: "rgba(255,255,255,0.5)" }}>Enhancements:</strong> {details.enhancements?.join(", ")}</div>
         </div>
       </div>
     );
@@ -64,8 +80,8 @@ export default function RankingBarView({ data }) {
         <BarChart data={ranked} margin={{ top: 10, right: 20, bottom: 10, left: 0 }}>
           <CartesianGrid stroke="rgba(255,255,255,0.06)" vertical={false} />
           <XAxis
-            dataKey="config" tickFormatter={(v) => v?.replaceAll("_", " ")}
-            stroke="rgba(255,255,255,0.35)" tick={{ fill: "rgba(255,255,255,0.5)", fontSize: 11 }}
+            dataKey="configLabel"
+            stroke="rgba(255,255,255,0.35)" tick={{ fill: "rgba(255,255,255,0.75)", fontSize: 11, fontWeight: 600 }}
             interval={0} angle={-20} textAnchor="end" height={60}
           />
           <YAxis
@@ -79,7 +95,7 @@ export default function RankingBarView({ data }) {
         </BarChart>
       </ResponsiveContainer>
       <p style={{ margin: "14px 0 0", fontSize: "11px", color: "rgba(255,255,255,0.3)" }}>
-        Sorted best to worst; greener bars indicate a stronger average rank across all metrics.
+        Sorted best to worst; greener bars indicate a stronger average rank across all metrics. Hover to inspect configuration parameters.
       </p>
     </div>
   );

frontend/src/gaugepilot/components/visualizations/ScatterView.jsx

@@ -3,6 +3,7 @@ import {
   ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell,
 } from "recharts";
 import ExperimentSelector from "../ExperimentSelector";
+import { parseConfigDetails } from "../../utils/configUtils";
 
 const METRICS = [
   { value: "faithfulness", label: "Faithfulness", description: "Answer accuracy" },
@@ -24,26 +25,44 @@ export default function ScatterView({ data }) {
     () =>
       (data ?? [])
         .filter((row) => row[xMetric] != null && row[yMetric] != null)
-        .map((row) => ({ config: row.config, x: row[xMetric], y: row[yMetric] })),
+        .map((row) => ({
+          config: row.config,
+          configLabel: row.configLabel || row.config,
+          configDetails: row.configDetails || parseConfigDetails(row.config),
+          x: row[xMetric],
+          y: row[yMetric],
+        })),
     [data, xMetric, yMetric]
   );
 
   const CustomTooltip = ({ active, payload }) => {
     if (!active || !payload?.length) return null;
     const p = payload[0].payload;
+    const details = p.configDetails || parseConfigDetails(p.config);
+
     return (
       <div style={{
-        background: "rgba(15,15,25,0.95)", border: "1px solid rgba(255,255,255,0.12)",
-        borderRadius: "10px", padding: "10px 14px", fontSize: "12px",
+        background: "rgba(15, 20, 36, 0.97)",
+        border: "1px solid rgba(168, 85, 247, 0.35)",
+        borderRadius: "14px",
+        padding: "12px 16px",
+        fontSize: "12px",
+        boxShadow: "0 16px 36px rgba(0,0,0,0.6)",
+        maxWidth: "300px",
       }}>
-        <div style={{ fontWeight: 700, color: "white", marginBottom: "4px" }}>
-          {p.config?.replaceAll("_", " ")}
+        <div style={{ fontWeight: 700, color: "white", fontSize: "13px", marginBottom: "6px" }}>
+          🏷️ {p.configLabel}
         </div>
-        <div style={{ color: "rgba(255,255,255,0.6)" }}>
-          {metricLabel(xMetric)}: <span style={{ color: "white" }}>{Number(p.x).toFixed(2)}</span>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "4px", fontSize: "11.5px", color: "rgba(255,255,255,0.8)" }}>
+          <div>{metricLabel(xMetric)}: <strong style={{ color: "#38bdf8" }}>{Number(p.x).toFixed(2)}</strong></div>
+          <div>{metricLabel(yMetric)}: <strong style={{ color: "#c084fc" }}>{Number(p.y).toFixed(2)}</strong></div>
         </div>
-        <div style={{ color: "rgba(255,255,255,0.6)" }}>
-          {metricLabel(yMetric)}: <span style={{ color: "white" }}>{Number(p.y).toFixed(2)}</span>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: "2px", fontSize: "10.5px", color: "rgba(255,255,255,0.6)", borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: "6px", marginTop: "6px" }}>
+          <div>Model: {details.model}</div>
+          <div>Retrieval: {details.retrieval} · {details.reranker}</div>
+          <div>Enhancements: {details.enhancements?.join(", ")}</div>
         </div>
       </div>
     );

frontend/src/gaugepilot/hooks/useVisualizations.js

@@ -1,17 +1,7 @@
-// Normalizes the leaderboard payload (separate ranked arrays per metric —
-// overall / faithfulness / grounding / retrieval_quality / query_coverage /
-// latency, each shaped like [{ config_name, value, ... }]) into one flat row
-// per configuration:
-//
-//   { config, faithfulness, grounding, quality, coverage, latency, averageRank }
-//
-// This is the shape every visualization component consumes, so charts never
-// need to know about the underlying leaderboard structure.
-//
-// Defensive by design: if a row already carries a nested `metrics` object
-// (e.g. { config_name, metrics: { faithfulness, semantic_grounding, ... } }),
-// that takes priority over the per-category `value` field, so this keeps
-// working if the API response shape evolves either way.
+import { buildConfigLabelMap, parseConfigDetails } from "../utils/configUtils";
+
+// Normalizes the leaderboard payload into one flat row per configuration:
+//   { config, configLabel, configDetails, faithfulness, grounding, quality, coverage, latency, averageRank }
 
 const CATEGORY_TO_METRIC = {
   faithfulness: "faithfulness",
@@ -44,14 +34,21 @@ function extractValue(row, category) {
 export function useVisualizations(leaderboard) {
   if (!leaderboard) return [];
 
+  const labelMap = buildConfigLabelMap(leaderboard);
   const configMap = new Map();
+
   const ensureConfig = (name) => {
-    if (!configMap.has(name)) configMap.set(name, { config: name });
+    if (!configMap.has(name)) {
+      configMap.set(name, {
+        config: name,
+        configLabel: labelMap.get(name) || `Config ${configMap.size + 1}`,
+        configDetails: parseConfigDetails(name),
+      });
+    }
     return configMap.get(name);
   };
 
-  // Seed every config that appears anywhere in the leaderboard first, so a
-  // configuration missing one metric still shows up with the rest filled in.
+  // Seed every config that appears anywhere in the leaderboard first
   Object.values(leaderboard).forEach((rows) => {
     (rows ?? []).forEach((row) => {
       if (row?.config_name) ensureConfig(row.config_name);
@@ -66,9 +63,6 @@ export function useVisualizations(leaderboard) {
     });
   });
 
-  // Average rank lives on the "overall" array rather than as its own
-  // category — the backend has used both `average_rank` and `avg_rank`
-  // for this field at different times, so support both.
   (leaderboard.overall ?? []).forEach((row) => {
     if (!row?.config_name) return;
     const target = ensureConfig(row.config_name);

frontend/src/gaugepilot/pages/Aianalysis.jsx

@@ -521,7 +521,7 @@ export default function AIAnalysis({ selectedRun, onRunRefresh }) {
           )}
 
           {/* Report cards */}
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 420px), 1fr))", gap: "16px" }}>
             <InsightCard report={insightReport} />
             <RecommendationCard report={recommendationReport} />
           </div>

frontend/src/gaugepilot/pages/ExperimentSetup.jsx

@@ -384,7 +384,7 @@ export default function ExperimentSetup({ onRunChange }) {
       style={{
         maxWidth: "1280px",
         margin: "0 auto",
-        padding: "32px 28px 80px",
+        padding: "clamp(16px, 3vw, 32px) clamp(14px, 3vw, 28px) 80px",
         fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
       }}
     >
@@ -772,7 +772,8 @@ export default function ExperimentSetup({ onRunChange }) {
                   position: "absolute",
                   top: "calc(100% + 8px)",
                   right: 0,
-                  width: "350px",
+                  width: "min(340px, calc(100vw - 32px))",
+                  maxWidth: "calc(100vw - 32px)",
                   maxHeight: "440px",
                   overflowY: "auto",
                   zIndex: 9999,
@@ -890,7 +891,7 @@ export default function ExperimentSetup({ onRunChange }) {
       <div
         style={{
           display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))",
+          gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 340px), 1fr))",
           gap: "20px",
           alignItems: "stretch",
           marginBottom: "24px",

frontend/src/gaugepilot/pages/Leaderboards.jsx

@@ -1,6 +1,8 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import OverallTable from "../components/leaderboards/OverallTable";
 import ExperimentSelector from "../components/ExperimentSelector";
+import ConfigBadge from "../components/ConfigBadge";
+import { buildConfigLabelMap } from "../utils/configUtils";
 
 const METRIC_META = {
   overall:          { label: "Overall Rankings",          desc: "Combined benchmark ranking across all evaluation metrics.", icon: "🏆" },
@@ -35,6 +37,7 @@ export default function Leaderboards({ leaderboard }) {
     color, fontSize: "11px", fontWeight: 600, letterSpacing: "0.02em",
   });
 
+  const labelMap = useMemo(() => buildConfigLabelMap(leaderboard), [leaderboard]);
 
   // ── Derived KPI values ─────────────────────────────────────────────────────
   const overall = leaderboard?.overall ?? [];
@@ -45,10 +48,6 @@ export default function Leaderboards({ leaderboard }) {
   const fastestConfig = [...latency].sort((a, b) => (a.value ?? 0) - (b.value ?? 0))[0]?.config_name ?? null;
   const topFaithfulness = faithfulness[0]?.config_name ?? null;
 
-  const formatName = (name) =>
-    name?.replaceAll("_", " ").replaceAll("+", " + ")
-      .replace("NoRewrite", "(No Rewrite)").replace("NoReranker", "(No Reranker)") ?? "—";
-
   // ── Empty state ────────────────────────────────────────────────────────────
   if (!leaderboard || overall.length === 0) {
     return (
@@ -119,14 +118,14 @@ export default function Leaderboards({ leaderboard }) {
       </div>
 
       {/* ── KPI Row ──────────────────────────────────────────────────────────── */}
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "12px", marginBottom: "16px" }}>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 220px), 1fr))", gap: "12px", marginBottom: "16px" }}>
         {[
-          { label: "Best Overall",      value: formatName(bestConfig),      icon: "🥇", color: "#f59e0b" },
-          { label: "Fastest Config",    value: formatName(fastestConfig),   icon: "⚡", color: "#22c55e" },
-          { label: "Top Faithfulness",  value: formatName(topFaithfulness), icon: "📋", color: accent    },
-          { label: "Configs Evaluated", value: totalConfigs,                icon: "🔬", color: "#a78bfa" },
-        ].map(({ label, value, icon, color }) => (
-          <div key={label} style={{
+          { label: "Best Overall",      configName: bestConfig,      icon: "🥇", color: "#f59e0b" },
+          { label: "Fastest Config",    configName: fastestConfig,   icon: "⚡", color: "#22c55e" },
+          { label: "Top Faithfulness",  configName: topFaithfulness, icon: "📋", color: accent    },
+          { label: "Configs Evaluated", count: totalConfigs,         icon: "🔬", color: "#a78bfa" },
+        ].map((item) => (
+          <div key={item.label} style={{
             ...card, padding: "16px 20px",
             display: "flex", alignItems: "center", gap: "14px",
             transition: "transform 0.2s, box-shadow 0.2s",
@@ -142,15 +141,23 @@ export default function Leaderboards({ leaderboard }) {
           >
             <div style={{
               width: 40, height: 40, borderRadius: "10px", flexShrink: 0,
-              background: `${color}18`, display: "flex", alignItems: "center",
+              background: `${item.color}18`, display: "flex", alignItems: "center",
               justifyContent: "center", fontSize: "18px",
-            }}>{icon}</div>
-            <div style={{ minWidth: 0 }}>
-              <div style={{
-                fontSize: "14px", fontWeight: 700, color: "white", lineHeight: 1.2,
-                whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
-              }}>{value}</div>
-              <div style={{ fontSize: "11px", color: "rgba(255,255,255,0.35)", marginTop: "3px" }}>{label}</div>
+            }}>{item.icon}</div>
+            <div style={{ minWidth: 0, flex: 1 }}>
+              {item.configName ? (
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  <ConfigBadge
+                    configName={item.configName}
+                    label={labelMap.get(item.configName) || "Config"}
+                  />
+                </div>
+              ) : (
+                <div style={{
+                  fontSize: "14px", fontWeight: 700, color: "white", lineHeight: 1.2,
+                }}>{item.count ?? "—"}</div>
+              )}
+              <div style={{ fontSize: "11px", color: "rgba(255,255,255,0.35)", marginTop: "4px" }}>{item.label}</div>
             </div>
           </div>
         ))}
@@ -199,7 +206,7 @@ export default function Leaderboards({ leaderboard }) {
           </div>
         </div>
 
-        <OverallTable data={leaderboard[selectedMetric]} />
+        <OverallTable data={leaderboard[selectedMetric]} labelMap={labelMap} />
       </div>
 
     </div>

frontend/src/gaugepilot/utils/configUtils.js

@@ -0,0 +1,166 @@
+// ─── GAUGEPILOT CONFIGURATION PARSER & LABELING UTILITIES ─────────────────────
+
+/**
+ * Parses raw configuration names (e.g., "gpt-oss-120b vector none Default",
+ * "gpt-oss-120b_hybrid_minilm_parent_child_all-mpnet-base-v2_Multi_Query_Query_Rewrite",
+ * "Hybrid+MiniLM", "BM25", "Vector_Only") into a structured architectural breakdown.
+ */
+export function parseConfigDetails(configName) {
+  if (!configName || typeof configName !== "string") {
+    return {
+      model: "Standard LLM",
+      retrieval: "Hybrid (Dense + BM25)",
+      reranker: "None",
+      chunker: "Parent-Child (1200/300)",
+      embedding: "all-mpnet-base-v2",
+      enhancements: ["Default (Baseline)"],
+      rawName: configName || "—",
+    };
+  }
+
+  const raw = configName;
+  const lower = configName.toLowerCase().replaceAll("_", " ");
+
+  // 1. Detect Model
+  let model = "GPT-OSS 120B";
+  if (lower.includes("llama-3.3-70b") || lower.includes("llama 3.3 70b") || lower.includes("llama3")) {
+    model = "Llama 3.3 70B";
+  } else if (lower.includes("gpt-oss-120b") || lower.includes("gpt oss 120b") || lower.includes("gptoss")) {
+    model = "GPT-OSS 120B";
+  } else if (lower.includes("gemini-1.5-flash") || lower.includes("gemini 1.5 flash") || lower.includes("gemini")) {
+    model = "Gemini 1.5 Flash";
+  } else if (lower.includes("mixtral")) {
+    model = "Mixtral 8x7B";
+  }
+
+  // 2. Detect Retrieval Method
+  let retrieval = "Hybrid (Dense + BM25)";
+  if (lower.includes("vector only") || (lower.includes("vector") && !lower.includes("hybrid"))) {
+    retrieval = "Vector (Dense FAISS)";
+  } else if (lower.includes("lexical") || lower.includes("bm25") && !lower.includes("hybrid")) {
+    retrieval = "Lexical (BM25 Keyword)";
+  } else if (lower.includes("hybrid")) {
+    retrieval = "Hybrid (Dense + BM25)";
+  }
+
+  // 3. Detect Reranker
+  let reranker = "None (Direct First-Stage)";
+  if (lower.includes("minilm")) {
+    reranker = "MiniLM Cross-Encoder";
+  } else if (lower.includes("tinybert")) {
+    reranker = "TinyBERT (Low-Latency)";
+  } else if (lower.includes("bge large") || lower.includes("bge-large")) {
+    reranker = "BGE Large Cross-Encoder";
+  } else if (lower.includes("bge m3") || lower.includes("bge-m3")) {
+    reranker = "BGE M3 Reranker";
+  } else if (lower.includes("noreranker") || lower.includes("none")) {
+    reranker = "None (Direct First-Stage)";
+  }
+
+  // 4. Detect Chunker
+  let chunker = "Parent-Child (1200/300)";
+  if (lower.includes("recursive")) {
+    chunker = "Recursive Splitter";
+  } else if (lower.includes("token")) {
+    chunker = "Fixed Token (512)";
+  } else if (lower.includes("parent child") || lower.includes("parent_child")) {
+    chunker = "Parent-Child (1200/300)";
+  }
+
+  // 5. Detect Embedding Model
+  let embedding = "all-mpnet-base-v2";
+  if (lower.includes("bge-large-en") || lower.includes("bge large en")) {
+    embedding = "bge-large-en-v1.5";
+  } else if (lower.includes("text-embedding-3-small")) {
+    embedding = "text-embedding-3-small";
+  } else if (lower.includes("all-mpnet-base-v2") || lower.includes("mpnet")) {
+    embedding = "all-mpnet-base-v2";
+  }
+
+  // 6. Detect Enhancements
+  const enhancements = [];
+  if (lower.includes("query rewrite") || lower.includes("query_rewrite")) enhancements.push("Query Rewrite");
+  if (lower.includes("multi query") || lower.includes("multi_query")) enhancements.push("Multi-Query");
+  if (lower.includes("hyde")) enhancements.push("HyDE");
+  if (lower.includes("step back") || lower.includes("step_back")) enhancements.push("Step-Back Prompting");
+  if (lower.includes("query expansion") || lower.includes("query_expansion")) enhancements.push("Query Expansion");
+  if (lower.includes("sub query") || lower.includes("sub_query")) enhancements.push("Sub-Query Decomposition");
+  if (lower.includes("metadata")) enhancements.push("Metadata Filtering");
+  if (lower.includes("routing")) enhancements.push("Intent Routing");
+  if (lower.includes("graph")) enhancements.push("GraphRAG");
+  if (lower.includes("compression")) enhancements.push("Context Compression");
+
+  if (enhancements.length === 0) {
+    enhancements.push("Default (Baseline Pipeline)");
+  }
+
+  return {
+    model,
+    retrieval,
+    reranker,
+    chunker,
+    embedding,
+    enhancements,
+    rawName: raw,
+  };
+}
+
+/**
+ * Builds a deterministic mapping from raw config name -> "Config 1", "Config 2", etc.
+ * Orders configs by overall leaderboard rank when available, or by appearance.
+ */
+export function buildConfigLabelMap(leaderboardOrConfigs) {
+  const map = new Map();
+  let index = 1;
+
+  if (!leaderboardOrConfigs) return map;
+
+  // Case 1: Leaderboard object with overall array
+  if (leaderboardOrConfigs.overall && Array.isArray(leaderboardOrConfigs.overall)) {
+    leaderboardOrConfigs.overall.forEach((row) => {
+      const name = row?.config_name || row?.config;
+      if (name && !map.has(name)) {
+        map.set(name, `Config ${index++}`);
+      }
+    });
+  }
+
+  // Case 2: Array of rows/configs or visualization items
+  if (Array.isArray(leaderboardOrConfigs)) {
+    leaderboardOrConfigs.forEach((item) => {
+      const name = typeof item === "string" ? item : (item?.config_name || item?.config);
+      if (name && !map.has(name)) {
+        map.set(name, `Config ${index++}`);
+      }
+    });
+  }
+
+  // Also check other categories in leaderboard object
+  if (typeof leaderboardOrConfigs === "object" && !Array.isArray(leaderboardOrConfigs)) {
+    Object.values(leaderboardOrConfigs).forEach((categoryRows) => {
+      if (Array.isArray(categoryRows)) {
+        categoryRows.forEach((row) => {
+          const name = row?.config_name || row?.config;
+          if (name && !map.has(name)) {
+            map.set(name, `Config ${index++}`);
+          }
+        });
+      }
+    });
+  }
+
+  return map;
+}
+
+/**
+ * Helper to resolve a config's display label ("Config 1", "Config 2", etc.).
+ */
+export function getConfigDisplayLabel(configName, labelMap = null, fallbackIndex = null) {
+  if (labelMap && labelMap.has(configName)) {
+    return labelMap.get(configName);
+  }
+  if (fallbackIndex != null) {
+    return `Config ${fallbackIndex + 1}`;
+  }
+  return configName || "Config";
+}

frontend/src/main.jsx

@@ -42,16 +42,27 @@ style.textContent = `
   }
 
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  html, body, #root { width: 100%; height: 100%; overflow: hidden; background: var(--bg-primary); color: var(--text-primary); }
-  body { min-width: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
-  button, input, textarea { font: inherit; color: inherit; }
+  html, body, #root { 
+    width: 100%; 
+    min-height: 100vh;
+    min-height: 100dvh;
+    background: var(--bg-primary); 
+    color: var(--text-primary); 
+    -webkit-text-size-adjust: 100%;
+  }
+  body { 
+    min-width: 0; 
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
+    -webkit-font-smoothing: antialiased; 
+    overflow-x: hidden;
+  }
+  button, input, textarea, select { font: inherit; color: inherit; }
   
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 9999px; }
   ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
 
-  button, input { font: inherit; color: inherit; }
   @keyframes pilot-spin { to { transform: rotate(360deg); } }
 
   .mobile-menu-button { display: none; }
@@ -63,18 +74,41 @@ style.textContent = `
     word-break: break-word;
   }
 
-  @media (max-width: 900px) {
+  .pill-scroll-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    max-width: 100%;
+    padding-bottom: 2px;
+  }
+  .pill-scroll-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .table-scroll-container {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Responsive Breakpoints */
+  @media (max-width: 960px) {
     .pilot-home {
       width: 100% !important;
       min-height: 100dvh !important;
-      height: 100dvh !important;
+      height: auto !important;
       overflow-y: auto !important;
+      display: flex !important;
+      flex-direction: column !important;
     }
 
     .pilot-home-topbar {
-      padding: 18px 18px !important;
+      padding: 16px 20px !important;
       align-items: flex-start !important;
-      gap: 14px !important;
+      gap: 12px !important;
       flex-direction: column !important;
     }
 
@@ -87,45 +121,48 @@ style.textContent = `
 
     .pilot-home-center {
       justify-content: flex-start !important;
-      padding: 28px 16px !important;
-      gap: 18px !important;
+      padding: 24px 16px !important;
+      gap: 20px !important;
     }
 
     .pilot-home-grid {
       width: 100% !important;
       flex-direction: column !important;
-      gap: 12px !important;
+      gap: 14px !important;
+      align-items: center !important;
     }
 
     .pilot-product-card {
       width: 100% !important;
+      max-width: 100% !important;
       padding: 20px !important;
-      border-radius: 12px !important;
+      border-radius: 18px !important;
     }
 
     .pilot-home-footer {
-      padding: 12px 18px !important;
+      padding: 16px 20px !important;
       flex-direction: column !important;
-      gap: 5px !important;
+      gap: 6px !important;
+      text-align: center !important;
     }
 
     .auth-shell {
       width: 100% !important;
       min-height: 100dvh !important;
-      height: 100dvh !important;
-      padding: 18px !important;
+      padding: 16px !important;
       overflow-y: auto !important;
       align-items: center !important;
     }
 
     .auth-panel {
       width: 100% !important;
-      max-width: 500px !important;
+      max-width: 440px !important;
+      padding: 28px 20px !important;
     }
 
     .auth-title {
-      font-size: 46px !important;
-      letter-spacing: -2px !important;
+      font-size: 38px !important;
+      letter-spacing: -1.5px !important;
     }
 
     .docpilot-root,
@@ -140,38 +177,40 @@ style.textContent = `
       display: inline-flex !important;
       align-items: center !important;
       justify-content: center !important;
-      width: 36px !important;
-      height: 36px !important;
-      padding: 0 !important;
+      min-width: 38px !important;
+      min-height: 38px !important;
+      padding: 6px 12px !important;
       background: var(--surface) !important;
-      color: var(--text-secondary) !important;
+      color: var(--text-primary) !important;
       border: 1px solid var(--border) !important;
-      border-radius: 8px !important;
+      border-radius: 9999px !important;
       cursor: pointer !important;
       flex-shrink: 0 !important;
+      font-size: 15px !important;
     }
 
     .mobile-drawer-backdrop {
       display: block !important;
       position: fixed !important;
       inset: 0 !important;
-      background: rgba(0, 0, 0, 0.52) !important;
+      background: rgba(0, 0, 0, 0.65) !important;
+      backdrop-filter: blur(4px) !important;
       border: 0 !important;
       padding: 0 !important;
-      z-index: 19 !important;
+      z-index: 998 !important;
     }
 
     .docpilot-sidebar,
     .trace-sidebar {
       position: fixed !important;
       inset: 0 auto 0 0 !important;
-      width: min(86vw, 320px) !important;
+      width: min(85vw, 320px) !important;
       max-width: 320px !important;
       height: 100dvh !important;
-      z-index: 20 !important;
+      z-index: 999 !important;
       transform: translateX(-105%) !important;
-      transition: transform 0.2s ease !important;
-      box-shadow: 24px 0 60px rgba(0, 0, 0, 0.35) !important;
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5) !important;
     }
 
     .docpilot-sidebar.is-open,
@@ -186,93 +225,76 @@ style.textContent = `
     }
 
     .docpilot-topbar {
-      padding: 10px 12px !important;
-      gap: 10px !important;
-      align-items: flex-start !important;
-      flex-wrap: wrap !important;
+      padding: 10px 14px !important;
+      gap: 8px !important;
+      align-items: center !important;
+      flex-wrap: nowrap !important;
+      overflow-x: auto !important;
+      scrollbar-width: none !important;
+    }
+    .docpilot-topbar::-webkit-scrollbar {
+      display: none !important;
     }
 
     .docpilot-active-document {
       min-width: 0 !important;
-      flex: 1 1 180px !important;
+      flex: 1 1 auto !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
     }
 
     .docpilot-actions {
-      width: 100% !important;
+      display: flex !important;
       gap: 6px !important;
-      overflow-x: auto !important;
-      padding-bottom: 2px !important;
+      flex-wrap: nowrap !important;
+      flex-shrink: 0 !important;
     }
 
-    .docpilot-actions button {
-      padding: 8px 10px !important;
+    .docpilot-actions button,
+    .docpilot-actions a {
+      padding: 6px 12px !important;
       white-space: nowrap !important;
+      font-size: 11px !important;
     }
 
     .docpilot-chat-area {
-      padding: 20px 14px !important;
+      padding: 16px 12px !important;
     }
 
     .docpilot-message-user,
     .docpilot-message-assistant {
       max-width: 100% !important;
-      font-size: 15px !important;
+      font-size: 14px !important;
     }
 
     .docpilot-message-user {
-      padding: 12px 14px !important;
+      padding: 10px 14px !important;
     }
 
     .docpilot-input-bar {
-      padding: 12px !important;
-    }
-
-    .docpilot-input-row {
-      gap: 8px !important;
-    }
-
-    .docpilot-input-row input {
-      min-width: 0 !important;
-      padding: 13px 14px !important;
-      font-size: 14px !important;
-    }
-
-    .docpilot-input-row button {
-      padding: 13px 14px !important;
-      min-width: 78px !important;
+      padding: 8px 10px !important;
     }
 
     .trace-header {
-      padding: 20px 16px 14px !important;
+      padding: 14px 16px !important;
     }
 
     .trace-title {
-      font-size: 34px !important;
-      letter-spacing: -1px !important;
+      font-size: 26px !important;
+      letter-spacing: -0.8px !important;
     }
 
     .trace-body {
       display: block !important;
-      overflow: hidden !important;
+      overflow-y: auto !important;
       min-width: 0 !important;
     }
 
     .trace-detail-panel {
-      height: 100% !important;
-      padding: 1rem !important;
-    }
-
-    .trace-empty-state {
-      text-align: left !important;
-      color: #444 !important;
-    }
-
-    .trace-mobile-list-button {
-      display: inline-flex !important;
-      margin-top: 12px !important;
+      height: auto !important;
+      min-height: 100% !important;
+      padding: 14px !important;
     }
 
     .trace-detail-header {
@@ -312,123 +334,112 @@ style.textContent = `
     }
   }
 
-  @media (max-width: 430px) {
+  @media (max-width: 640px) {
     .pilot-home-topbar h1 {
-      font-size: 30px !important;
+      font-size: 24px !important;
     }
 
     .pilot-home-actions button,
-    .docpilot-actions button {
-      font-size: 12px !important;
+    .pilot-home-actions a,
+    .docpilot-actions button,
+    .docpilot-actions a {
+      font-size: 11px !important;
+      padding: 5px 10px !important;
     }
 
     .auth-title {
-      font-size: 40px !important;
-    }
-
-    .docpilot-input-row {
-      flex-direction: column !important;
-    }
-
-    .docpilot-input-row button {
-      width: 100% !important;
+      font-size: 32px !important;
     }
 
     .trace-header {
-      padding: 18px 14px 12px !important;
+      padding: 12px 14px !important;
     }
 
     .trace-title {
-      font-size: 30px !important;
+      font-size: 22px !important;
     }
-  }.gauge-root {
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  background: var(--bg-primary);
-}
-
-.gauge-sidebar {
-  width: 260px;
-  border-right: 1px solid var(--border);
-  padding: 24px;
-  background: var(--bg-secondary);
-}
-
-.gauge-main {
-  flex: 1;
-  overflow-y: auto;
-  padding: 32px;
-}
-
-.gauge-title {
-  font-size: 38px;
-  font-weight: 700;
-  margin-bottom: 24px;
-}
-
-.gauge-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.gauge-nav-button {
-  border: 1px solid var(--border);
-  background: var(--surface);
-  color: var(--text-primary);
-  padding: 12px;
-  border-radius: 12px;
-  cursor: pointer;
-  text-align: left;
-}
-
-.gauge-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  padding: 24px;
-  margin-bottom: 24px;
-}
-  .gauge-input {
-  width: 100%;
-  max-width: 400px;
-
-  background: var(--bg-primary);
-  color: var(--text-primary);
-
-  border: 1px solid var(--border);
-  border-radius: 12px;
+  }
 
-  padding: 12px 16px;
-}
+  .gauge-root {
+    display: flex;
+    width: 100%;
+    min-height: 100vh;
+    min-height: 100dvh;
+    background: var(--bg-primary);
+  }
 
-.gauge-textarea {
-  width: 100%;
-  min-height: 220px;
+  .gauge-sidebar {
+    width: 260px;
+    border-right: 1px solid var(--border);
+    padding: 24px;
+    background: var(--bg-secondary);
+  }
 
-  background: var(--bg-primary);
-  color: var(--text-primary);
+  .gauge-main {
+    flex: 1;
+    overflow-y: auto;
+    padding: 32px;
+  }
 
-  border: 1px solid var(--border);
-  border-radius: 12px;
+  .gauge-title {
+    font-size: 38px;
+    font-weight: 700;
+    margin-bottom: 24px;
+  }
 
-  padding: 16px;
+  .gauge-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
 
-  resize: vertical;
-}
+  .gauge-nav-button {
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text-primary);
+    padding: 12px;
+    border-radius: 12px;
+    cursor: pointer;
+    text-align: left;
+  }
 
-.gauge-button {
-  background: var(--surface-strong);
-  color: var(--text-primary);
+  .gauge-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    padding: 24px;
+    margin-bottom: 24px;
+  }
 
-  border: 1px solid var(--border);
-  border-radius: 12px;
+  .gauge-input {
+    width: 100%;
+    max-width: 400px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 12px 16px;
+  }
 
-  padding: 12px 18px;
+  .gauge-textarea {
+    width: 100%;
+    min-height: 220px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 16px;
+    resize: vertical;
+  }
 
-  cursor: pointer;
-}
+  .gauge-button {
+    background: var(--surface-strong);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 12px 18px;
+    cursor: pointer;
+  }
 `;
 document.head.appendChild(style);
 

frontend/src/tracepilot/TraceExplorer.jsx

@@ -276,7 +276,7 @@ export default function TraceExplorer({
 
 
           {/* Action Toolbar */}
-          <div style={{ display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" }}>
+          <div className="pill-scroll-bar" style={{ display: "flex", gap: "8px", alignItems: "center", overflowX: "auto", maxWidth: "100%", paddingBottom: "2px" }}>
             <a
               href="/home"
               onClick={(e) => {

frontend/vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}