npm - kiku-agent - Versions diffs - 1.3.1 → 1.3.2 - Mend

kiku-agent 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/README.md +1 -1
package/package.json +4 -12
package/server/agent/eval/AGENTS.md +228 -0
package/server/agent/eval/analyze.py +684 -0
package/server/agent/eval/gates.json +15 -0
package/server/agent/eval/modules/analysis/compare.js +198 -0
package/server/agent/eval/modules/analysis/gates.js +72 -0
package/server/agent/eval/modules/analysis/judge.js +70 -0
package/server/agent/eval/modules/core/cli.js +453 -0
package/server/agent/eval/modules/core/config.js +60 -0
package/server/agent/eval/modules/core/store.js +236 -0
package/server/agent/eval/modules/evaluation/cases.js +689 -0
package/server/agent/eval/modules/evaluation/runner.js +298 -0
package/server/agent/eval/modules/evaluation/scoring.js +351 -0
package/server/agent/eval/modules/evaluation/worker.js +122 -0
package/server/agent/eval/modules/reporting/benchmark.js +265 -0
package/server/agent/eval/modules/reporting/benchmarkPng.js +487 -0
package/server/agent/eval/modules/reporting/dashboard.js +1406 -0
package/server/agent/eval/modules/server/evalApi.js +1099 -0
package/server/agent/eval/modules/ui/evalUi.js +4796 -0
package/server/agent/eval/modules/utils/smokes.js +119 -0
package/server/agent/tests/agentBubbleSystem.test.js +65 -0
package/server/agent/tests/agentFollowUps.test.js +127 -0
package/server/agent/tests/apiRouter.test.js +108 -0
package/server/agent/tests/architectureFixes.test.js +81 -0
package/server/agent/tests/architectureRefactoring.test.js +194 -0
package/server/agent/tests/autoResearch.test.js +64 -0
package/server/agent/tests/bilibiliEmbed.test.js +251 -0
package/server/agent/tests/catalogSync.test.js +130 -0
package/server/agent/tests/citations.test.js +180 -0
package/server/agent/tests/clarificationAnalytics.test.js +219 -0
package/server/agent/tests/clarifyingQuestions.test.js +594 -0
package/server/agent/tests/cliAutomation.test.js +121 -0
package/server/agent/tests/cloudProviders.test.js +234 -0
package/server/agent/tests/commandInput.test.js +24 -0
package/server/agent/tests/commands.test.js +417 -0
package/server/agent/tests/contextIntelligence.test.js +162 -0
package/server/agent/tests/conversationSafety.test.js +53 -0
package/server/agent/tests/decisionAndSearchEnhancements.test.js +135 -0
package/server/agent/tests/dramaAnswerQuality.test.js +73 -0
package/server/agent/tests/dynamicCatalogIngestion.test.js +285 -0
package/server/agent/tests/dynamicRoutingAndSearch.test.js +92 -0
package/server/agent/tests/edgeCasesScenarios.test.js +49 -0
package/server/agent/tests/entertainmentMetrics.test.js +126 -0
package/server/agent/tests/envBootstrap.test.js +87 -0
package/server/agent/tests/envCommand.test.js +215 -0
package/server/agent/tests/errorHandling.test.js +80 -0
package/server/agent/tests/errors.test.js +13 -0
package/server/agent/tests/evalAnalyze.test.js +54 -0
package/server/agent/tests/evalCommand.test.js +54 -0
package/server/agent/tests/evalCorpus.test.js +126 -0
package/server/agent/tests/evalHarness.test.js +62 -0
package/server/agent/tests/evalJudgeContext.test.js +38 -0
package/server/agent/tests/evalMetrics.test.js +312 -0
package/server/agent/tests/evalStore.test.js +190 -0
package/server/agent/tests/evalStudio.test.js +179 -0
package/server/agent/tests/feedbackLearning.test.js +186 -0
package/server/agent/tests/firstRun.test.js +44 -0
package/server/agent/tests/gemma4eOptimization.test.js +95 -0
package/server/agent/tests/hardwareTiers.test.js +206 -0
package/server/agent/tests/hybridWebSearch.test.js +192 -0
package/server/agent/tests/judgeService.test.js +251 -0
package/server/agent/tests/lanDiscovery.test.js +319 -0
package/server/agent/tests/mcpClient.test.js +201 -0
package/server/agent/tests/modelManager.test.js +109 -0
package/server/agent/tests/multilingualScenarios.test.js +69 -0
package/server/agent/tests/newCommands.test.js +347 -0
package/server/agent/tests/newCommandsTui.test.js +141 -0
package/server/agent/tests/newTools.test.js +113 -0
package/server/agent/tests/newsIntelligence.test.js +178 -0
package/server/agent/tests/nextGenArchitecture.test.js +99 -0
package/server/agent/tests/offlineInput.test.js +217 -0
package/server/agent/tests/packagingGuard.test.js +57 -0
package/server/agent/tests/presentation.test.js +61 -0
package/server/agent/tests/providerPersistence.test.js +39 -0
package/server/agent/tests/queryBenchmarks.test.js +83 -0
package/server/agent/tests/queryDetails.test.js +126 -0
package/server/agent/tests/realWorldValidation.test.js +391 -0
package/server/agent/tests/resilienceAndConcurrency.test.js +117 -0
package/server/agent/tests/runtimeWatchdog.test.js +32 -0
package/server/agent/tests/sanitizer.test.js +37 -0
package/server/agent/tests/scenariosData.js +378 -0
package/server/agent/tests/schemaRouting.test.js +54 -0
package/server/agent/tests/securityAuditRemediation.test.js +214 -0
package/server/agent/tests/securityHardening.test.js +146 -0
package/server/agent/tests/securitySanitizer.test.js +38 -0
package/server/agent/tests/sessionAndCopy.test.js +232 -0
package/server/agent/tests/sidebarControls.test.js +101 -0
package/server/agent/tests/statefulMemory.test.js +270 -0
package/server/agent/tests/subagent.test.js +216 -0
package/server/agent/tests/subagentProgress.test.js +109 -0
package/server/agent/tests/subagentTextFallback.test.js +115 -0
package/server/agent/tests/suggestions.test.js +199 -0
package/server/agent/tests/suggestionsTui.test.js +251 -0
package/server/agent/tests/telemetryAndProfiles.test.js +179 -0
package/server/agent/tests/terminalImage.test.js +80 -0
package/server/agent/tests/terminalMarkdown.test.js +166 -0
package/server/agent/tests/terminalText.test.js +133 -0
package/server/agent/tests/textProtocolLoop.test.js +126 -0
package/server/agent/tests/textToolParsing.test.js +139 -0
package/server/agent/tests/theme.test.js +26 -0
package/server/agent/tests/toolRegistryParity.test.js +53 -0
package/server/agent/tests/toolRoutingRegressions.test.js +119 -0
package/server/agent/tests/tools.test.js +259 -0
package/server/agent/tests/unifiedEndpoints.test.js +152 -0
package/server/agent/tests/v110Features.test.js +262 -0
package/server/agent/tests/versionBump.test.js +69 -0
package/server/agent/tests/vramEstimator.test.js +520 -0
package/server/agent/tests/webChatInspection.test.js +300 -0
package/server/agent/tests/webChatMemory.test.js +112 -0
package/server/agent/tests/webChatSecurity.test.js +169 -0
package/server/agent/tests/webExtract.test.js +261 -0
package/server/agent/tests/webSources.test.js +247 -0
package/server/eval/judgeRubrics.js +110 -0
package/server/eval/judgeService.js +290 -0
package/server/eval/runBenchmark.js +182 -0
package/server/mcp/examples/librechat.example.yaml +16 -0
package/server/mcp/tests/connection.test.js +156 -0
package/server/supabase_schema.sql +63 -0

package/server/agent/eval/modules/ui/evalUi.js ADDED Viewed

@@ -0,0 +1,4796 @@
+import { cases, expandedCases, securityCases, allCases, legacyCases } from '../evaluation/cases.js';
+export function getEvalUiHtml() {
+  const catalogCount = cases.length;
+  const expandedCount = expandedCases ? expandedCases.length : 0;
+  const securityCount = securityCases.length;
+  const legacyCount = legacyCases.length;
+  const totalCount = allCases.length;
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <title>Kiku Eval Studio — AI Agent Evaluation Platform</title>
+  <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/fonts/google-sans-official.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700;800;900&family=Google+Sans+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --font-main: 'Google Sans', 'Google Sans Text', 'Product Sans', 'Noto Sans Thai', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', 'Google Sans Code', ui-monospace, monospace;
+      --bg-base: #07090e;
+      --bg-surface: #0e121a;
+      --bg-card: rgba(16, 20, 30, 0.72);
+      --bg-glass: rgba(22, 28, 42, 0.55);
+      --border-glass: rgba(255, 255, 255, 0.08);
+      --border-focus: rgba(244, 114, 182, 0.4);
+      --accent-rose: #f472b6;
+      --accent-rose-glow: rgba(244, 114, 182, 0.25);
+      --accent-violet: #a78bfa;
+      --accent-cyan: #38bdf8;
+      --accent-emerald: #34d399;
+      --accent-amber: #fbbf24;
+      --accent-red: #f87171;
+      --accent-rose-dim: rgba(244, 114, 182, 0.12);
+      --accent-emerald-dim: rgba(52, 211, 153, 0.12);
+      --accent-amber-dim: rgba(251, 191, 36, 0.12);
+      --accent-red-dim: rgba(248, 113, 113, 0.12);
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --text-dim: #64748b;
+      --radius-sm: 8px;
+      --radius-md: 14px;
+      --radius-lg: 22px;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; font-family: var(--font-main); }
+    html {
+      scroll-behavior: smooth;
+      -webkit-text-size-adjust: 100%;
+      max-width: 100vw;
+      overflow-x: hidden;
+    }
+    body {
+      font-family: var(--font-main);
+      background-color: var(--bg-base);
+      color: var(--text-main);
+      min-height: 100vh;
+      min-height: 100dvh;
+      display: flex;
+      flex-direction: column;
+      background-image:
+        radial-gradient(circle at 15% 10%, rgba(244, 114, 182, 0.09) 0%, transparent 45%),
+        radial-gradient(circle at 85% 20%, rgba(167, 139, 250, 0.09) 0%, transparent 45%),
+        radial-gradient(circle at 50% 90%, rgba(56, 189, 248, 0.06) 0%, transparent 55%);
+      background-attachment: fixed;
+      max-width: 100vw;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.2);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(244, 114, 182, 0.35);
+      border-radius: 999px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--accent-rose);
+    }
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(244, 114, 182, 0.35) rgba(0, 0, 0, 0.2);
+    }
+    header {
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      background: rgba(11, 14, 22, 0.9);
+      border-bottom: 1px solid var(--border-glass);
+      position: sticky;
+      top: 0;
+      z-index: 40;
+      padding: max(10px, env(safe-area-inset-top)) 14px 10px 14px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      width: 100%;
+      max-width: 100vw;
+      box-sizing: border-box;
+    }
+    @media (min-width: 641px) {
+      header { padding: 14px 24px; gap: 16px; }
+      .header-actions { gap: 12px; }
+    }
+    @media (max-width: 640px) {
+      header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+        padding: max(10px, env(safe-area-inset-top)) 14px 12px 14px;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 100%;
+      }
+      .brand-title { font-size: 16px; }
+      .brand-icon { font-size: 22px; }
+      .brand-tag { display: inline-block; }
+      .header-actions {
+        display: grid;
+        grid-template-columns: 1.1fr 1fr 1fr;
+        align-items: center;
+        width: 100%;
+        gap: 8px;
+      }
+      .status-pill {
+        width: 100%;
+        justify-content: center;
+        min-height: 38px;
+        padding: 6px 8px;
+        font-size: 11px;
+      }
+      .btn {
+        width: 100%;
+        min-height: 38px;
+        font-size: 12.5px;
+        font-weight: 600;
+      }
+      .form-control, .search-input { font-size: 16px; }
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      text-decoration: none;
+      color: inherit;
+      flex-shrink: 0;
+    }
+    .brand-icon {
+      font-size: 24px;
+      line-height: 1;
+      filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.4));
+    }
+    .brand-title {
+      font-family: var(--font-main);
+      font-size: 18px;
+      font-weight: 700;
+      background: linear-gradient(135deg, #fff 40%, var(--accent-rose) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      letter-spacing: -0.02em;
+    }
+    .brand-tag {
+      display: none;
+      font-size: 10px;
+      font-weight: 600;
+      padding: 2px 7px;
+      border-radius: 999px;
+      background: var(--accent-rose-dim);
+      color: var(--accent-rose);
+      border: 1px solid rgba(244, 114, 182, 0.3);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    @media (min-width: 768px) {
+      .brand-title { font-size: 20px; }
+      .brand-tag { display: inline-block; }
+    }
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 10px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 500;
+      background: var(--bg-glass);
+      border: 1px solid var(--border-glass);
+      color: var(--text-muted);
+      white-space: nowrap;
+    }
+    .status-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--text-dim);
+      flex-shrink: 0;
+    }
+    .status-dot.active {
+      background: var(--accent-emerald);
+      box-shadow: 0 0 8px var(--accent-emerald);
+      animation: pulse 1.8s infinite;
+    }
+    .status-dot.running {
+      background: var(--accent-cyan);
+      box-shadow: 0 0 8px var(--accent-cyan);
+      animation: pulse 0.9s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.35; transform: scale(1.3); }
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 8px 14px;
+      font-size: 12px;
+      font-weight: 600;
+      border-radius: var(--radius-sm);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+      font-family: inherit;
+      min-height: 38px;
+      touch-action: manipulation;
+    }
+    @media (min-width: 640px) {
+      .btn { padding: 9px 18px; font-size: 13px; min-height: 40px; }
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
+      color: #fff;
+      box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3);
+    }
+    .btn-primary:hover:not(:disabled) {
+      box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
+      transform: translateY(-1px);
+    }
+    .btn-danger {
+      background: var(--accent-red-dim);
+      color: var(--accent-red);
+      border-color: rgba(248, 113, 113, 0.3);
+    }
+    .btn-danger:hover:not(:disabled) {
+      background: rgba(248, 113, 113, 0.25);
+    }
+    .btn-secondary {
+      background: var(--bg-glass);
+      color: var(--text-main);
+      border-color: var(--border-glass);
+    }
+    .btn-secondary:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .btn-warning {
+      background: var(--accent-amber-dim);
+      color: var(--accent-amber);
+      border-color: rgba(251, 191, 36, 0.35);
+    }
+    .btn-warning:hover:not(:disabled) {
+      background: rgba(251, 191, 36, 0.25);
+      box-shadow: 0 4px 14px rgba(251, 191, 36, 0.25);
+    }
+    .btn-run-case {
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      border-radius: 4px;
+      background: rgba(255, 255, 255, 0.08);
+      border: 1px solid var(--border-glass);
+      color: var(--text-main);
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+    .btn-run-case:hover {
+      background: rgba(255, 255, 255, 0.16);
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+    .btn-run-case.btn-warning {
+      background: var(--accent-amber-dim);
+      color: var(--accent-amber);
+      border-color: rgba(251, 191, 36, 0.4);
+    }
+    .btn-run-case.btn-warning:hover {
+      background: rgba(251, 191, 36, 0.28);
+    }
+    .pill-anomaly {
+      background: var(--accent-amber-dim);
+      color: var(--accent-amber);
+      border: 1px solid rgba(251, 191, 36, 0.35);
+    }
+    .btn:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      transform: none !important;
+      box-shadow: none !important;
+    }
+    main {
+      flex: 1;
+      max-width: 1440px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 12px 12px max(32px, env(safe-area-inset-bottom));
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      min-width: 0;
+      box-sizing: border-box;
+      overflow-x: hidden;
+    }
+    main > * {
+      min-width: 0;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+    @media (min-width: 640px) {
+      main { padding: 20px 20px max(32px, env(safe-area-inset-bottom)); gap: 20px; }
+    }
+    @media (min-width: 1024px) {
+      main { padding: 24px; gap: 24px; }
+    }
+    .preset-chips {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      overflow-x: auto;
+      padding: 4px 2px 6px 2px;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+      white-space: nowrap;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+    .preset-chips::-webkit-scrollbar { display: none; }
+    .preset-chip {
+      padding: 7px 14px;
+      border-radius: 999px;
+      font-size: 11.5px;
+      font-weight: 500;
+      background: var(--bg-card);
+      border: 1px solid var(--border-glass);
+      color: var(--text-muted);
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.15s;
+      min-height: 34px;
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      touch-action: manipulation;
+    }
+    .preset-chip:hover { color: var(--text-main); border-color: rgba(255, 255, 255, 0.18); }
+    .preset-chip.active {
+      background: var(--accent-rose-dim);
+      color: var(--accent-rose);
+      border-color: rgba(244, 114, 182, 0.35);
+      font-weight: 600;
+    }
+    .config-card {
+      background: var(--bg-card);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+      box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+    .config-header {
+      padding: 14px 18px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      user-select: none;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .config-title {
+      font-family: var(--font-main);
+      font-size: 14px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+    }
+    .config-chevron {
+      transition: transform 0.25s ease;
+      flex-shrink: 0;
+    }
+    .config-chevron.open {
+      transform: rotate(180deg);
+    }
+    .config-body {
+      padding: 0 18px 18px;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 14px;
+      border-top: 1px solid rgba(255, 255, 255, 0.05);
+      padding-top: 16px;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+    @media (min-width: 640px) {
+      .config-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+    @media (min-width: 1024px) {
+      .config-body { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    }
+    #targetCaseGroup {
+      grid-column: auto;
+      width: 100%;
+      min-width: 0;
+    }
+    @media (min-width: 640px) {
+      #targetCaseGroup { grid-column: span 2; }
+    }
+    @media (min-width: 1024px) {
+      #targetCaseGroup { grid-column: span 2; }
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      min-width: 0;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+    .form-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .form-control {
+      background: rgba(8, 10, 15, 0.75);
+      border: 1px solid var(--border-glass);
+      color: var(--text-main);
+      padding: 9px 12px;
+      border-radius: var(--radius-sm);
+      font-size: 13px;
+      font-family: inherit;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      min-height: 40px;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      text-overflow: ellipsis;
+    }
+    .form-control:focus {
+      border-color: var(--accent-rose);
+      box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.15);
+    }
+    select.form-control {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    select.form-control option {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background: #0e121a;
+      color: #f8fafc;
+    }
+    .progress-hero {
+      background: linear-gradient(145deg, rgba(24, 30, 46, 0.65) 0%, rgba(12, 15, 24, 0.95) 100%);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-md);
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+    }
+    @media (min-width: 640px) {
+      .progress-hero { padding: 22px; gap: 18px; }
+    }
+    .progress-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .progress-hero-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .progress-title-text {
+      font-family: var(--font-main);
+      font-size: 16px;
+      font-weight: 600;
+    }
+    @media (min-width: 640px) {
+      .progress-title-text { font-size: 18px; }
+    }
+    .progress-stats-text {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .progress-track {
+      width: 100%;
+      height: 10px;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 999px;
+      overflow: hidden;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      position: relative;
+    }
+    @media (min-width: 640px) {
+      .progress-track { height: 12px; }
+    }
+    .progress-fill {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, #ec4899, #8b5cf6, #38bdf8);
+      border-radius: 999px;
+      transition: width 0.3s ease;
+      box-shadow: 0 0 16px rgba(236, 72, 153, 0.5);
+    }
+    .active-case-card {
+      background: rgba(6, 8, 14, 0.45);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: var(--radius-sm);
+      padding: 12px 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    @media (min-width: 640px) {
+      .active-case-card {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+    .active-case-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      overflow: hidden;
+    }
+    .case-badge-pill {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 7px;
+      border-radius: 4px;
+      background: var(--accent-cyan);
+      color: #06080e;
+      flex-shrink: 0;
+    }
+    .case-question-preview {
+      font-size: 13px;
+      color: var(--text-main);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    @media (max-width: 640px) {
+      .case-question-preview {
+        white-space: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        font-size: 12.5px;
+        line-height: 1.35;
+      }
+      .active-case-card {
+        padding: 10px 12px;
+        gap: 8px;
+        border-radius: 10px;
+      }
+      .active-case-meta {
+        align-items: flex-start;
+      }
+      .progress-hero {
+        padding: 14px 12px;
+        gap: 12px;
+      }
+      .gate-banner {
+        padding: 12px 14px;
+        gap: 6px;
+      }
+      .gate-title-group {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        font-size: 12px;
+      }
+      .config-header {
+        padding: 12px 14px;
+      }
+      .config-body {
+        padding: 0 14px 14px;
+        gap: 12px;
+      }
+      #targetCaseGroup {
+        grid-column: 1 / -1 !important;
+      }
+      .explorer-toolbar {
+        padding: 10px 12px;
+        gap: 10px;
+      }
+      .mobile-cards-container {
+        padding: 10px 8px;
+        gap: 9px;
+      }
+      .detail-section {
+        padding: 12px;
+        gap: 8px;
+        border-radius: 10px;
+      }
+      pre.code-block {
+        font-size: 10.5px;
+        padding: 8px 10px;
+        border-radius: 8px;
+        max-height: 180px;
+      }
+    }
+    .active-tool-live {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      color: var(--accent-amber);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+      background: rgba(251, 191, 36, 0.08);
+      padding: 4px 8px;
+      border-radius: 4px;
+      border: 1px solid rgba(251, 191, 36, 0.2);
+    }
+    .lms-stream-card {
+      background: var(--bg-card);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(167, 139, 250, 0.25);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .lms-stream-header {
+      padding: 12px 16px;
+      background: rgba(18, 22, 34, 0.85);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 10px;
+      cursor: pointer;
+      user-select: none;
+      border-bottom: 1px solid var(--border-glass);
+    }
+    .lms-header-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .lms-pulse-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--accent-emerald);
+      box-shadow: 0 0 10px var(--accent-emerald);
+      animation: pulse 1.8s infinite;
+    }
+    .lms-pulse-dot.offline {
+      background: var(--text-dim);
+      box-shadow: none;
+      animation: none;
+    }
+    .lms-title {
+      font-size: 13.5px;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: -0.01em;
+    }
+    .lms-tag {
+      font-family: var(--font-mono);
+      font-size: 10.5px;
+      padding: 2px 7px;
+      border-radius: 999px;
+      background: rgba(167, 139, 250, 0.15);
+      border: 1px solid rgba(167, 139, 250, 0.3);
+      color: var(--accent-violet);
+    }
+    .lms-header-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .lms-filters {
+      display: flex;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.4);
+      border: 1px solid var(--border-glass);
+      border-radius: 6px;
+      padding: 2px;
+      gap: 2px;
+    }
+    .lms-filter-btn {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      font-size: 11px;
+      font-weight: 500;
+      padding: 3px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .lms-filter-btn.active {
+      background: var(--accent-violet);
+      color: #fff;
+      font-weight: 600;
+    }
+    .lms-tool-btn {
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid var(--border-glass);
+      color: var(--text-muted);
+      font-size: 11px;
+      font-weight: 500;
+      padding: 4px 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .lms-tool-btn:hover {
+      color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+    .lms-stream-body {
+      display: flex;
+      flex-direction: column;
+      background: #05070c;
+    }
+    .lms-telemetry-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 8px 16px;
+      background: rgba(12, 16, 26, 0.9);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      overflow-x: auto;
+    }
+    .lms-telemetry-item {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      white-space: nowrap;
+    }
+    .lms-telemetry-label {
+      font-size: 10px;
+      color: var(--text-dim);
+      text-transform: uppercase;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+    }
+    .lms-telemetry-val {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--accent-cyan);
+    }
+    .lms-log-viewport {
+      height: 240px;
+      overflow-y: auto;
+      padding: 12px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      font-family: var(--font-mono);
+      font-size: 11.5px;
+      line-height: 1.5;
+    }
+    .lms-log-empty {
+      color: var(--text-dim);
+      font-style: italic;
+      text-align: center;
+      margin: auto 0;
+      flex-shrink: 0;
+    }
+    .lms-entry-thought {
+      background: rgba(167, 139, 250, 0.08);
+      border-left: 3px solid var(--accent-violet);
+      padding: 6px 10px;
+      border-radius: 0 6px 6px 0;
+      color: #e2e8f0;
+      white-space: pre-wrap;
+      word-break: break-word;
+      flex-shrink: 0;
+    }
+    .lms-entry-tool {
+      background: rgba(251, 191, 36, 0.08);
+      border-left: 3px solid var(--accent-amber);
+      padding: 6px 10px;
+      border-radius: 0 6px 6px 0;
+      color: #fef08a;
+      white-space: pre-wrap;
+      word-break: break-word;
+      flex-shrink: 0;
+    }
+    .lms-entry-text {
+      color: #94a3b8;
+      white-space: pre-wrap;
+      word-break: break-word;
+      flex-shrink: 0;
+    }
+    .lms-entry-raw {
+      color: #64748b;
+      font-size: 10.5px;
+      white-space: pre-wrap;
+      word-break: break-all;
+      flex-shrink: 0;
+    }
+    .lms-thought-badge {
+      display: inline-block;
+      font-size: 9.5px;
+      font-weight: 700;
+      padding: 1px 5px;
+      border-radius: 3px;
+      background: rgba(167, 139, 250, 0.25);
+      color: var(--accent-violet);
+      margin-bottom: 4px;
+      text-transform: uppercase;
+    }
+    .lms-tool-badge {
+      display: inline-block;
+      font-size: 9.5px;
+      font-weight: 700;
+      padding: 1px 5px;
+      border-radius: 3px;
+      background: rgba(251, 191, 36, 0.25);
+      color: var(--accent-amber);
+      margin-bottom: 4px;
+      text-transform: uppercase;
+    }
+    .lms-entry-input {
+      background: rgba(56, 189, 248, 0.08);
+      border-left: 3px solid var(--accent-cyan);
+      padding: 6px 10px;
+      border-radius: 0 6px 6px 0;
+      color: #bae6fd;
+      white-space: pre-wrap;
+      word-break: break-word;
+      flex-shrink: 0;
+    }
+    .lms-input-badge {
+      display: inline-block;
+      font-size: 9.5px;
+      font-weight: 700;
+      padding: 1px 5px;
+      border-radius: 3px;
+      background: rgba(56, 189, 248, 0.25);
+      color: var(--accent-cyan);
+      margin-bottom: 4px;
+      text-transform: uppercase;
+    }
+    .lms-entry-answer {
+      background: rgba(52, 211, 153, 0.08);
+      border-left: 3px solid var(--accent-emerald);
+      padding: 6px 10px;
+      border-radius: 0 6px 6px 0;
+      color: #d1fae5;
+      white-space: pre-wrap;
+      word-break: break-word;
+      flex-shrink: 0;
+    }
+    .lms-live-badge {
+      font-size: 10px;
+      font-weight: 700;
+      padding: 2px 7px;
+      border-radius: 999px;
+      background: rgba(52, 211, 153, 0.15);
+      border: 1px solid rgba(52, 211, 153, 0.35);
+      color: var(--accent-emerald);
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+    .lms-answer-badge {
+      display: inline-block;
+      font-size: 9.5px;
+      font-weight: 700;
+      padding: 1px 5px;
+      border-radius: 3px;
+      background: rgba(52, 211, 153, 0.25);
+      color: var(--accent-emerald);
+      margin-bottom: 4px;
+      text-transform: uppercase;
+    }
+    .gate-banner {
+      padding: 12px 16px;
+      border-radius: var(--radius-md);
+      background: var(--bg-card);
+      border: 1px solid var(--border-glass);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    @media (min-width: 640px) {
+      .gate-banner {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 20px;
+      }
+    }
+    .gate-title-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 600;
+    }
+    .kpi-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+    @media (min-width: 640px) {
+      .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+    }
+    @media (min-width: 1024px) {
+      .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
+    }
+    .kpi-card {
+      background: var(--bg-card);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-md);
+      padding: 12px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      transition: transform 0.2s, border-color 0.2s;
+      min-width: 0;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    @media (min-width: 640px) {
+      .kpi-card { padding: 18px; gap: 8px; }
+    }
+    .kpi-card:hover {
+      transform: translateY(-2px);
+      border-color: rgba(255, 255, 255, 0.16);
+    }
+    .kpi-label-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 11px;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+    .kpi-target-tag {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 10px;
+      color: var(--text-dim);
+    }
+    .kpi-metric-val {
+      font-family: var(--font-main);
+      font-size: 20px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+    }
+    @media (min-width: 640px) {
+      .kpi-metric-val { font-size: 26px; }
+    }
+    .kpi-bottom-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 10px;
+      color: var(--text-dim);
+    }
+    .badge-gate {
+      font-size: 9px;
+      font-weight: 700;
+      padding: 2px 6px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .badge-pass { background: var(--accent-emerald-dim); color: var(--accent-emerald); border: 1px solid rgba(52, 211, 153, 0.3); }
+    .badge-fail { background: var(--accent-red-dim); color: var(--accent-red); border: 1px solid rgba(248, 113, 113, 0.3); }
+    .badge-neutral { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); }
+    .btn-run-case {
+      padding: 5px 12px;
+      font-size: 11.5px;
+      font-weight: 600;
+      border-radius: 999px;
+      background: var(--accent-rose-dim);
+      color: var(--accent-rose);
+      border: 1px solid rgba(244, 114, 182, 0.35);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      transition: all 0.15s ease;
+      white-space: nowrap;
+      min-height: 30px;
+      touch-action: manipulation;
+    }
+    .btn-run-case:hover, .btn-run-case:active {
+      background: var(--accent-rose);
+      color: #fff;
+      box-shadow: 0 0 10px var(--accent-rose-glow);
+    }
+    .btn-run-case:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .explorer-card {
+      background: var(--bg-card);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-md);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+    .explorer-toolbar {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border-glass);
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    @media (min-width: 768px) {
+      .explorer-toolbar {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 20px;
+      }
+    }
+    .filter-tabs {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      overflow-x: auto;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+      padding-bottom: 2px;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+    .filter-tabs::-webkit-scrollbar { display: none; }
+    .filter-tab {
+      padding: 6px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 999px;
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.15s;
+    }
+    .filter-tab:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.05); }
+    .filter-tab.active {
+      background: var(--accent-rose-dim);
+      color: var(--accent-rose);
+      border-color: rgba(244, 114, 182, 0.35);
+      font-weight: 600;
+    }
+    .search-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+    @media (min-width: 768px) {
+      .search-row { width: auto; }
+    }
+    .search-input {
+      background: rgba(8, 10, 15, 0.8);
+      border: 1px solid var(--border-glass);
+      color: var(--text-main);
+      padding: 8px 14px;
+      border-radius: 999px;
+      font-size: 12px;
+      flex: 1;
+      min-width: 0;
+      max-width: 100%;
+      outline: none;
+      min-height: 36px;
+      box-sizing: border-box;
+    }
+    .search-input:focus { border-color: var(--accent-rose); }
+    .view-toggle-btn {
+      padding: 6px 10px;
+      background: var(--bg-glass);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-sm);
+      color: var(--text-muted);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 36px;
+    }
+    .view-toggle-btn:hover { color: var(--text-main); }
+    .table-view-container {
+      display: none;
+      overflow-x: auto;
+      max-height: 600px;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    @media (min-width: 1024px) {
+      .table-view-container { display: block; }
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+      text-align: left;
+    }
+    th {
+      position: sticky;
+      top: 0;
+      background: rgba(14, 18, 28, 0.95);
+      backdrop-filter: blur(10px);
+      padding: 12px 14px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid var(--border-glass);
+      z-index: 10;
+    }
+    td {
+      padding: 12px 14px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      vertical-align: middle;
+    }
+    tr.case-row {
+      cursor: pointer;
+      transition: background-color 0.15s;
+    }
+    tr.case-row:hover {
+      background-color: rgba(244, 114, 182, 0.06);
+    }
+    .mobile-cards-container {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 12px 10px;
+      overflow-y: visible;
+      -webkit-overflow-scrolling: touch;
+    }
+    @media (min-width: 1024px) {
+      .mobile-cards-container { display: none; }
+    }
+    .mobile-case-card {
+      background: rgba(12, 16, 26, 0.85);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-md);
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 9px;
+      cursor: pointer;
+      transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+      touch-action: manipulation;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+    }
+    .mobile-case-card:active {
+      transform: scale(0.985);
+      border-color: rgba(244, 114, 182, 0.45);
+      background: rgba(244, 114, 182, 0.08);
+    }
+    .mobile-card-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .mobile-card-question {
+      font-size: 13.5px;
+      line-height: 1.45;
+      color: #f1f5f9;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .mobile-card-stats {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11.5px;
+      color: var(--text-muted);
+      flex-wrap: wrap;
+    }
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 7px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      font-family: 'JetBrains Mono', monospace;
+    }
+    .pill-success { background: var(--accent-emerald-dim); color: var(--accent-emerald); }
+    .pill-error { background: var(--accent-red-dim); color: var(--accent-red); }
+    .pill-warn { background: var(--accent-amber-dim); color: var(--accent-amber); }
+    .pill-tag { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
+    .drawer-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(5px);
+      -webkit-backdrop-filter: blur(5px);
+      z-index: 50;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s ease;
+    }
+    .drawer-overlay.open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .drawer {
+      position: fixed;
+      z-index: 60;
+      background: #0c0f18;
+      border: 1px solid var(--border-glass);
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
+      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 85vh;
+      height: 85dvh;
+      border-radius: 20px 20px 0 0;
+      transform: translateY(100%);
+      padding-bottom: max(16px, env(safe-area-inset-bottom));
+    }
+    @media (min-width: 768px) {
+      .drawer {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: auto;
+        width: min(720px, 90vw);
+        height: 100%;
+        border-radius: 0;
+        border-left: 1px solid var(--border-glass);
+        transform: translateX(100%);
+        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7);
+        padding-bottom: 0;
+      }
+      .drawer.open {
+        transform: translateX(0);
+      }
+    }
+    .drawer.open {
+      transform: translateY(0);
+    }
+    @media (min-width: 768px) {
+      .drawer.open { transform: translateX(0); }
+    }
+    .drawer-drag-handle {
+      width: 44px;
+      height: 5px;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 999px;
+      margin: 10px auto 4px;
+      cursor: grab;
+      touch-action: none;
+    }
+    @media (min-width: 768px) {
+      .drawer-drag-handle { display: none; }
+    }
+    .drawer-header {
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--border-glass);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    @media (min-width: 640px) {
+      .drawer-header { padding: 18px 24px; }
+    }
+    .drawer-title-area {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      overflow: hidden;
+    }
+    .drawer-title {
+      font-family: var(--font-main);
+      font-size: 16px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    @media (min-width: 640px) {
+      .drawer-title { font-size: 18px; }
+    }
+    .drawer-close {
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid var(--border-glass);
+      color: var(--text-muted);
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: all 0.15s;
+    }
+    .drawer-close:hover {
+      background: rgba(255, 255, 255, 0.12);
+      color: var(--text-main);
+    }
+    .drawer-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      -webkit-overflow-scrolling: touch;
+    }
+    @media (min-width: 640px) {
+      .drawer-body { padding: 24px; gap: 20px; }
+    }
+    .detail-section {
+      background: rgba(14, 18, 28, 0.7);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-sm);
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .detail-section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .detail-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .detail-content {
+      font-size: 13px;
+      line-height: 1.6;
+      word-break: break-word;
+    }
+    .react-timeline {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      position: relative;
+      padding-left: 18px;
+    }
+    .react-timeline::before {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 6px;
+      bottom: 6px;
+      width: 2px;
+      background: var(--border-glass);
+    }
+    .timeline-step {
+      position: relative;
+      background: rgba(8, 10, 16, 0.75);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-sm);
+      padding: 10px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .timeline-step::before {
+      content: '';
+      position: absolute;
+      left: -17px;
+      top: 13px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--accent-violet);
+      box-shadow: 0 0 6px var(--accent-violet);
+    }
+    pre.code-block {
+      background: #05070c;
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 6px;
+      padding: 10px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 11px;
+      overflow-x: auto;
+      color: #cbd5e1;
+      max-height: 220px;
+    }
+    .copy-btn {
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid var(--border-glass);
+      color: var(--text-muted);
+      border-radius: 6px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      min-height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+      touch-action: manipulation;
+    }
+    .copy-btn:hover { color: var(--text-main); border-color: rgba(255, 255, 255, 0.2); }
+    .copy-btn:active { background: var(--accent-rose-dim); color: var(--accent-rose); }
+    .sync-toast {
+      position: fixed;
+      bottom: max(16px, env(safe-area-inset-bottom));
+      right: 16px;
+      background: rgba(15, 20, 32, 0.96);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border: 1px solid rgba(244, 114, 182, 0.4);
+      color: #fff;
+      padding: 8px 14px;
+      border-radius: 999px;
+      font-size: 11.5px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+      z-index: 99;
+      opacity: 0;
+      transform: translateY(12px);
+      transition: opacity 0.25s ease, transform 0.25s ease;
+      pointer-events: none;
+    }
+    .sync-toast.show {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .studio-subnav {
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      background: rgba(14, 18, 28, 0.75);
+      border-bottom: 1px solid var(--border-glass);
+      padding: 8px 14px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      overflow-x: auto;
+      white-space: nowrap;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+      position: sticky;
+      top: 59px;
+      z-index: 35;
+    }
+    .studio-subnav::-webkit-scrollbar { display: none; }
+    .subnav-left, .subnav-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .nav-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border-radius: 999px;
+      font-size: 11.5px;
+      font-weight: 500;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--border-glass);
+      color: var(--text-muted);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      touch-action: manipulation;
+    }
+    .nav-pill:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--text-main);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+    .nav-pill:active {
+      transform: scale(0.98);
+    }
+    .export-group {
+      display: flex;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.35);
+      border: 1px solid var(--border-glass);
+      border-radius: 999px;
+      padding: 2px;
+      gap: 2px;
+    }
+    .export-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 5px 10px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 600;
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+    .export-btn:hover {
+      background: rgba(255, 255, 255, 0.12);
+      color: var(--text-main);
+    }
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.78);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
+      z-index: 100;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      box-sizing: border-box;
+    }
+    .modal-overlay.open {
+      display: flex;
+    }
+    .modal-window {
+      background: #0d111a;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: var(--radius-md);
+      width: 100%;
+      max-width: 880px;
+      max-height: 90vh;
+      max-height: 90dvh;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
+      overflow: hidden;
+      animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    @keyframes modalFadeIn {
+      from { opacity: 0; transform: scale(0.97) translateY(6px); }
+      to { opacity: 1; transform: scale(1) translateY(0); }
+    }
+    .modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--border-glass);
+      background: rgba(18, 22, 34, 0.85);
+    }
+    .modal-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+    .modal-close {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 20px;
+      line-height: 1;
+      padding: 4px 8px;
+      border-radius: var(--radius-sm);
+    }
+    .modal-close:hover {
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--text-main);
+    }
+    .modal-body {
+      padding: 18px;
+      overflow-y: auto;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .modal-footer {
+      padding: 12px 18px;
+      border-top: 1px solid var(--border-glass);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 10px;
+      background: rgba(14, 18, 26, 0.6);
+    }
+    .waterfall-container {
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-sm);
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .waterfall-bar {
+      height: 14px;
+      border-radius: 999px;
+      overflow: hidden;
+      display: flex;
+      background: rgba(255, 255, 255, 0.05);
+    }
+    .waterfall-seg {
+      height: 100%;
+      transition: width 0.3s ease;
+    }
+    .waterfall-seg.seg-llm { background: var(--accent-violet); }
+    .waterfall-seg.seg-tool { background: var(--accent-emerald); }
+    .waterfall-seg.seg-net { background: rgba(255, 255, 255, 0.16); }
+    .waterfall-legend {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 14px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+    .waterfall-legend span {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .legend-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    .legend-dot.seg-llm { background: var(--accent-violet); }
+    .legend-dot.seg-tool { background: var(--accent-emerald); }
+    .legend-dot.seg-net { background: rgba(255, 255, 255, 0.3); }
+    .token-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+      gap: 8px;
+    }
+    .token-stat-box {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-sm);
+      padding: 8px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .token-num {
+      font-family: var(--font-mono);
+      font-size: 13px;
+      font-weight: 700;
+      color: var(--text-main);
+    }
+    .token-lbl {
+      font-size: 10.5px;
+      color: var(--text-dim);
+    }
+    .btn-playground-case {
+      background: rgba(56, 189, 248, 0.12);
+      border: 1px solid rgba(56, 189, 248, 0.35);
+      color: var(--accent-cyan);
+      border-radius: 6px;
+      padding: 5px 12px;
+      font-size: 11.5px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      touch-action: manipulation;
+    }
+    .btn-playground-case:hover {
+      background: rgba(56, 189, 248, 0.22);
+    }
+    .diff-badge-reg {
+      background: var(--accent-red-dim);
+      color: var(--accent-red);
+      border: 1px solid rgba(248, 113, 113, 0.3);
+      padding: 2px 7px;
+      border-radius: 4px;
+      font-size: 10.5px;
+      font-weight: 700;
+    }
+    .diff-badge-imp {
+      background: var(--accent-emerald-dim);
+      color: var(--accent-emerald);
+      border: 1px solid rgba(52, 211, 153, 0.3);
+      padding: 2px 7px;
+      border-radius: 4px;
+      font-size: 10.5px;
+      font-weight: 700;
+    }
+    .diff-badge-neu {
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text-dim);
+      border: 1px solid var(--border-glass);
+      padding: 2px 7px;
+      border-radius: 4px;
+      font-size: 10.5px;
+      font-weight: 600;
+    }
+    .diff-kpi-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+      gap: 10px;
+    }
+    .diff-kpi-card {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border-glass);
+      border-radius: var(--radius-sm);
+      padding: 10px 12px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <a href="/eval" class="brand">
+      <div class="brand-icon">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="3"></circle>
+          <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path>
+        </svg>
+      </div>
+      <div>
+        <span class="brand-title">Kiku Eval Studio</span>
+        <span class="brand-tag">Workbench</span>
+      </div>
+    </a>
+    <div style="margin-left:auto; margin-right:12px;">
+      <a href="/eval/dashboard" class="nav-pill" style="text-decoration:none; display:inline-flex; align-items:center; gap:6px;" title="Open Visual Benchmark Dashboard">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
+        <span>Dashboard</span>
+      </a>
+    </div>
+    <div class="header-actions">
+      <div class="status-pill">
+        <span id="sseStatusDot" class="status-dot"></span>
+        <span id="sseStatusText">Connecting</span>
+      </div>
+      <button id="btnAiSummary" class="btn" onclick="openAiSummaryModal()" title="AI Executive Benchmark Summary" style="background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(168, 85, 247, 0.28)); border: 1px solid rgba(236, 72, 153, 0.5); color: #f472b6; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 0 12px rgba(236, 72, 153, 0.25);">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+        <span>AI Summary</span>
+      </button>
+      <button id="btnStart" class="btn btn-primary" onclick="startRun()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+        <span>Run</span>
+      </button>
+      <button id="btnRetry" class="btn btn-warning" onclick="retryErrors()" title="Retry status error cases" style="display:none; align-items:center; gap:6px;">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+        <span id="btnRetryLabel">Retry</span>
+      </button>
+      <button id="btnStop" class="btn btn-danger" onclick="stopRun()" disabled>
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"></rect></svg>
+        <span>Abort</span>
+      </button>
+    </div>
+  </header>
+  <nav class="studio-subnav">
+    <div class="subnav-left">
+      <button id="subnavAiSummaryBtn" class="nav-pill" onclick="openAiSummaryModal()" style="background: rgba(236, 72, 153, 0.16); border-color: rgba(236, 72, 153, 0.4); color: #f472b6; font-weight: 600;" title="AI Executive Summary">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+        <span>AI Summary</span>
+      </button>
+      <button class="nav-pill" onclick="openCompareModal()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
+        <span>Compare &amp; Diff</span>
+      </button>
+      <button class="nav-pill" onclick="openPlaygroundModal()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+        <span>Playground</span>
+      </button>
+      <button class="nav-pill" onclick="openSuitesModal()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+        <span>Custom Suites</span>
+      </button>
+      <button class="nav-pill" onclick="openArenaModal()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polygon points="12 8 8 12 12 16 16 12 12 8"></polygon></svg>
+        <span>Model Arena</span>
+      </button>
+      <button class="nav-pill" onclick="openJudgeModal()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
+        <span>Judge Rubric</span>
+      </button>
+    </div>
+    <div class="subnav-right">
+      <div class="export-group">
+        <button class="export-btn" onclick="loadLatestReport()" title="Pull latest data directly from artifacts/eval/live.json">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+          <span>Sync live.json</span>
+        </button>
+        <button class="export-btn" onclick="saveCurrentSnapshot()" title="Save current report as named snapshot">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
+          <span>Snapshot</span>
+        </button>
+        <button class="export-btn" onclick="exportReportPng()" title="Export benchmark infographic PNG">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+          <span>PNG</span>
+        </button>
+        <button class="export-btn" onclick="exportReportCsv()" title="Download CSV report">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+          <span>CSV</span>
+        </button>
+        <button class="export-btn" onclick="exportReportJson()" title="Download JSON report">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
+          <span>JSON</span>
+        </button>
+      </div>
+    </div>
+  </nav>
+  <main>
+    <div class="preset-chips">
+      <span style="font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase;">Presets:</span>
+      <button class="preset-chip active" onclick="applyPreset('single')">Single Case (1 ข้อ)</button>
+      <button class="preset-chip" onclick="applyPreset('quick')">Quick Smoke (3)</button>
+      <button class="preset-chip" onclick="applyPreset('catalog')">Catalog QA (${catalogCount})</button>
+      ${expandedCount > 0 ? `<button class="preset-chip" onclick="applyPreset('expanded')">Expanded (${expandedCount})</button>` : ''}
+      <button class="preset-chip" onclick="applyPreset('security')">Security (${securityCount})</button>
+      <button class="preset-chip" onclick="applyPreset('legacy')">Legacy Case IDs (${legacyCount})</button>
+      <button class="preset-chip" onclick="applyPreset('all')">All Comprehensive (${totalCount})</button>
+    </div>
+    <section class="config-card">
+      <div class="config-header" onclick="toggleConfig()">
+        <div class="config-title">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+          <span>Run Configuration</span>
+        </div>
+        <svg id="configChevron" class="config-chevron open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+      </div>
+      <div id="configBody" class="config-body">
+        <div class="form-group">
+          <label class="form-label" for="suiteSelect">Mode / Suite</label>
+          <select id="suiteSelect" class="form-control" onchange="syncPresetChips(); saveConfigToStorage();">
+            <option value="single" selected>Single Case (1 ข้อเฉพาะ)</option>
+            <option value="quick">Quick Smoke (3 ข้อ)</option>
+            <option value="catalog">Catalog QA (${catalogCount} ข้อ)</option>
+            ${expandedCount > 0 ? `<option value="expanded">New Cases (${expandedCount} ข้อ)</option>` : ''}
+            <option value="security">Security (${securityCount} ข้อ)</option>
+            <option value="legacy">Legacy Case IDs (${legacyCount} ข้อ)</option>
+            <option value="all">All Comprehensive (${totalCount} ข้อ)</option>
+          </select>
+        </div>
+        <div id="targetCaseGroup" class="form-group">
+          <label class="form-label" for="caseSelect">Target Case (เลือกข้อที่ต้องการรันเดี่ยว)</label>
+          <select id="caseSelect" class="form-control" onchange="saveConfigToStorage()">
+            <option value="p01">p01 [profile] - ข้อมูลและสถิติพื้นฐาน จวีจิ้งอี</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="modelInput">Model ID</label>
+          <input id="modelInput" type="text" class="form-control" value="google/gemma-4-e4b" spellcheck="false" oninput="saveConfigToStorage()">
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="baseUrlInput">Base URL</label>
+          <input id="baseUrlInput" type="text" class="form-control" value="http://127.0.0.1:1234/v1" spellcheck="false" oninput="saveConfigToStorage()">
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="limitInput">Limit</label>
+          <input id="limitInput" type="number" class="form-control" placeholder="1" value="1" min="1" max="${totalCount}" oninput="saveConfigToStorage()">
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="judgeModelInput">Judge Model</label>
+          <input id="judgeModelInput" type="text" class="form-control" placeholder="Optional" spellcheck="false" oninput="saveConfigToStorage()">
+        </div>
+        <div class="form-group" style="justify-content: flex-end;">
+          <label class="form-label" style="opacity: 0;">Resume</label>
+          <label style="display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-main); cursor: pointer; min-height: 40px; padding: 0 4px; user-select: none;">
+            <input id="resumeCheckbox" type="checkbox" onchange="saveConfigToStorage()" style="accent-color: var(--accent-rose); width: 16px; height: 16px; cursor: pointer;">
+            <span style="font-weight: 500;">Resume (รันต่อจากเดิม)</span>
+          </label>
+        </div>
+      </div>
+    </section>
+    <section id="progressHero" class="progress-hero" style="display: none;">
+      <div class="progress-top">
+        <div class="progress-hero-title">
+          <span id="runStatusBadge" class="badge-gate badge-neutral">IDLE</span>
+          <span id="runTitle" class="progress-title-text">Evaluation running</span>
+        </div>
+        <div id="progressStats" class="progress-stats-text">0 / 0 cases (0%) • Elapsed: 0s</div>
+        <div id="etaDisplay" style="display:none; font-size:12px; color:var(--accent,#a78bfa); margin-top:4px; font-weight:500; letter-spacing:0.01em;"></div>
+      </div>
+      <div class="progress-track">
+        <div id="progressBarFill" class="progress-fill"></div>
+      </div>
+      <div id="activeCaseCard" class="active-case-card" style="display: none;">
+        <div class="active-case-meta">
+          <span id="activeCaseBadge" class="case-badge-pill">ACTIVE</span>
+          <span id="activeCaseText" class="case-question-preview">Preparing case...</span>
+        </div>
+        <div id="activeToolLive" class="active-tool-live">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+          <span id="activeToolText">Processing</span>
+        </div>
+      </div>
+    </section>
+    <section id="lmsStreamCard" class="lms-stream-card">
+      <div class="lms-stream-header" onclick="toggleLmsPanel()">
+        <div class="lms-header-left">
+          <span class="lms-pulse-dot active" id="lmsStatusDot"></span>
+          <span class="lms-title">LM Studio Live Reasoning & Stream</span>
+          <span class="lms-live-badge" id="lmsLiveBadge">LIVE</span>
+          <span class="lms-tag" id="lmsModelTag">google/gemma-4-e4b</span>
+        </div>
+        <div class="lms-header-right" onclick="event.stopPropagation()">
+          <div class="lms-filters">
+            <button class="lms-filter-btn active" data-lms-filter="all" onclick="setLmsFilter('all')">All</button>
+            <button class="lms-filter-btn" data-lms-filter="thoughts" onclick="setLmsFilter('thoughts')">Thoughts</button>
+            <button class="lms-filter-btn" data-lms-filter="tools" onclick="setLmsFilter('tools')">Tools</button>
+            <button class="lms-filter-btn" data-lms-filter="json" onclick="setLmsFilter('json')">Raw</button>
+          </div>
+          <button class="lms-tool-btn" id="lmsAutoScrollBtn" onclick="toggleLmsAutoScroll()" title="Toggle Auto-scroll">Auto-scroll: ON</button>
+          <button class="lms-tool-btn" onclick="clearLmsLogs()" title="Clear Terminal">Clear</button>
+          <button class="lms-tool-btn" onclick="initLmsStream()" title="Reconnect Stream">Reconnect</button>
+          <svg id="lmsChevron" class="config-chevron open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+        </div>
+      </div>
+      <div id="lmsStreamBody" class="lms-stream-body">
+        <div class="lms-telemetry-bar">
+          <div class="lms-telemetry-item">
+            <span class="lms-telemetry-label">Events</span>
+            <span class="lms-telemetry-val" id="lmsEventCountVal">0</span>
+          </div>
+          <div class="lms-telemetry-item">
+            <span class="lms-telemetry-label">TPS</span>
+            <span class="lms-telemetry-val" id="lmsTpsVal">-</span>
+          </div>
+          <div class="lms-telemetry-item">
+            <span class="lms-telemetry-label">TTFT</span>
+            <span class="lms-telemetry-val" id="lmsTtftVal">-</span>
+          </div>
+          <div class="lms-telemetry-item">
+            <span class="lms-telemetry-label">Predicted Tokens</span>
+            <span class="lms-telemetry-val" id="lmsPredictedVal">-</span>
+          </div>
+          <div class="lms-telemetry-item">
+            <span class="lms-telemetry-label">Prompt Tokens</span>
+            <span class="lms-telemetry-val" id="lmsPromptVal">-</span>
+          </div>
+          <div class="lms-telemetry-item">
+            <span class="lms-telemetry-label">Stop Reason</span>
+            <span class="lms-telemetry-val" id="lmsStopReasonVal">-</span>
+          </div>
+        </div>
+        <div id="lmsLogViewport" class="lms-log-viewport">
+          <div class="lms-log-empty" id="lmsEmptyNotice">Listening for LM Studio inference events...</div>
+        </div>
+      </div>
+    </section>
+    <section class="gate-banner">
+      <div class="gate-title-group">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        <span>ISO/IEC 42001 & NIST AI RMF Gate:</span>
+        <span id="overallGateBadge" class="badge-gate badge-neutral">PENDING</span>
+      </div>
+      <div id="gateSubtext" style="font-size: 11px; color: var(--text-muted);">
+        Awaiting evaluation run
+      </div>
+      <button class="nav-pill" onclick="openAiSummaryModal()" style="margin-left: auto; background: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.4); color: #f472b6; font-weight: 600;" title="Generate AI Benchmark Executive Summary">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+        <span>AI Summary</span>
+      </button>
+    </section>
+    <section class="kpi-grid">
+      <div class="kpi-card">
+        <div class="kpi-label-row">
+          <span>Pass@1 Rate</span>
+          <span class="kpi-target-tag">&ge; 75%</span>
+        </div>
+        <div id="kpiPassAt1" class="kpi-metric-val" style="color: var(--accent-rose);">-</div>
+        <div class="kpi-bottom-row">
+          <span>Task Success</span>
+          <span id="gatePassAt1" class="badge-gate badge-neutral">-</span>
+        </div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label-row">
+          <span>Tool F1-Score</span>
+          <span class="kpi-target-tag">&ge; 0.90</span>
+        </div>
+        <div id="kpiToolF1" class="kpi-metric-val" style="color: var(--accent-violet);">-</div>
+        <div class="kpi-bottom-row">
+          <span>Tool Precision</span>
+          <span id="gateToolF1" class="badge-gate badge-neutral">-</span>
+        </div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label-row">
+          <span>Groundedness</span>
+          <span class="kpi-target-tag">&ge; 75%</span>
+        </div>
+        <div id="kpiGroundedness" class="kpi-metric-val" style="color: var(--accent-cyan);">-</div>
+        <div class="kpi-bottom-row">
+          <span>Catalog Faith</span>
+          <span id="gateGroundedness" class="badge-gate badge-neutral">-</span>
+        </div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label-row">
+          <span>Loop-Free</span>
+          <span class="kpi-target-tag">&ge; 95%</span>
+        </div>
+        <div id="kpiLoopFree" class="kpi-metric-val" style="color: var(--accent-emerald);">-</div>
+        <div class="kpi-bottom-row">
+          <span>Zero-Thrash</span>
+          <span id="gateLoopFree" class="badge-gate badge-neutral">-</span>
+        </div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label-row">
+          <span>Hallucination</span>
+          <span class="kpi-target-tag">&le; 5.0%</span>
+        </div>
+        <div id="kpiHallucination" class="kpi-metric-val" style="color: var(--accent-amber);">-</div>
+        <div class="kpi-bottom-row">
+          <span>Unverified</span>
+          <span id="gateHallucination" class="badge-gate badge-neutral">-</span>
+        </div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label-row">
+          <span>Speed / TPS</span>
+          <span class="kpi-target-tag">SLA</span>
+        </div>
+        <div id="kpiLatency" class="kpi-metric-val" style="color: #cbd5e1; font-size: 20px;">-</div>
+        <div class="kpi-bottom-row">
+          <span id="kpiTps">Decode: -</span>
+          <span>p95: <span id="kpiP95">-</span></span>
+        </div>
+      </div>
+    </section>
+    <section class="explorer-card">
+      <div class="explorer-toolbar">
+        <div class="filter-tabs">
+          <button class="filter-tab active" data-filter="all" onclick="setFilter('all')">All (<span id="countAll">0</span>)</button>
+          <button class="filter-tab" data-filter="completed" onclick="setFilter('completed')">Done (<span id="countCompleted">0</span>)</button>
+          <button class="filter-tab" data-filter="anomalies" onclick="setFilter('anomalies')" style="color: #fbbf24;">Anomalies (<span id="countAnomalies">0</span>)</button>
+          <button class="filter-tab" data-filter="error" onclick="setFilter('error')">Errors (<span id="countError">0</span>)</button>
+          <button class="filter-tab" data-filter="tool-fail" onclick="setFilter('tool-fail')">Tool (<span id="countToolFail">0</span>)</button>
+          <button class="filter-tab" data-filter="loop-fail" onclick="setFilter('loop-fail')">Loops (<span id="countLoopFail">0</span>)</button>
+          <button class="filter-tab" data-filter="grounding-fail" onclick="setFilter('grounding-fail')">Grounding (<span id="countGroundingFail">0</span>)</button>
+        </div>
+        <div class="search-row">
+          <input id="searchInput" type="text" class="search-input" placeholder="Search case ID, query..." oninput="handleSearch()">
+          <button class="view-toggle-btn" onclick="toggleViewMode()" title="Toggle Card / Table View">
+            <svg id="viewIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
+          </button>
+        </div>
+      </div>
+      <div id="mobileCardsContainer" class="mobile-cards-container">
+        <div style="text-align: center; color: var(--text-dim); padding: 36px 0; font-size: 13px;">
+          No evaluation run loaded yet. Click <strong>Run</strong> to start.
+        </div>
+      </div>
+      <div id="tableViewContainer" class="table-view-container active-desktop">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Category</th>
+              <th>Question</th>
+              <th>Status</th>
+              <th>Coverage</th>
+              <th>Tool Accuracy</th>
+              <th>Loop Health</th>
+              <th>Duration</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody id="casesTableBody">
+            <tr>
+              <td colspan="9" style="text-align: center; color: var(--text-dim); padding: 36px 0;">
+                No evaluation run loaded yet.
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+  <div id="drawerOverlay" class="drawer-overlay" onclick="closeDrawer()"></div>
+  <aside id="detailDrawer" class="drawer">
+    <div class="drawer-drag-handle"></div>
+    <div class="drawer-header">
+      <div class="drawer-title-area">
+        <span id="drawerCaseId" class="pill pill-tag">ID</span>
+        <span id="drawerTitle" class="drawer-title">Case Details</span>
+      </div>
+      <button class="btn-playground-case" style="margin-left: auto; margin-right: 8px;" onclick="openPlaygroundWithCurrentCase()">Debug in Playground</button>
+      <button id="drawerRunBtn" class="btn-run-case" style="margin-right: 8px;" onclick="runSingleCaseById(document.getElementById('drawerCaseId').textContent)">Run Case</button>
+      <button class="drawer-close" onclick="closeDrawer()">&times;</button>
+    </div>
+    <div id="drawerBody" class="drawer-body">
+    </div>
+  </aside>
+  <div id="compareModal" class="modal-overlay" onclick="if(event.target===this)closeCompareModal()">
+    <div class="modal-window">
+      <div class="modal-header">
+        <div class="modal-title">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
+          <span>Run Comparison &amp; Regression Diffing</span>
+        </div>
+        <button class="modal-close" onclick="closeCompareModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: flex-end;">
+          <div class="form-group" style="margin: 0;">
+            <label class="form-label" for="compareBaseSelect">Baseline Snapshot</label>
+            <select id="compareBaseSelect" class="form-control"></select>
+          </div>
+          <div class="form-group" style="margin: 0;">
+            <label class="form-label" for="compareCandSelect">Candidate Snapshot</label>
+            <select id="compareCandSelect" class="form-control"></select>
+          </div>
+          <button class="btn btn-primary" onclick="executeCompareDiff()">Run Diff</button>
+        </div>
+        <div id="compareSummaryRow" class="diff-kpi-grid" style="display: none;">
+          <div class="diff-kpi-card">
+            <div style="font-size: 11px; color: var(--text-dim);">Regressions</div>
+            <div id="diffRegCount" style="font-size: 20px; font-weight: 700; color: var(--accent-red);">0</div>
+          </div>
+          <div class="diff-kpi-card">
+            <div style="font-size: 11px; color: var(--text-dim);">Improvements</div>
+            <div id="diffImpCount" style="font-size: 20px; font-weight: 700; color: var(--accent-emerald);">0</div>
+          </div>
+          <div class="diff-kpi-card">
+            <div style="font-size: 11px; color: var(--text-dim);">Unchanged</div>
+            <div id="diffUnchangedCount" style="font-size: 20px; font-weight: 700; color: var(--text-main);">0</div>
+          </div>
+        </div>
+        <div id="compareDeltasContainer" style="display: none; flex-direction: column; gap: 12px;">
+          <div class="detail-label">Metric Deltas</div>
+          <div id="compareMetricTable" style="overflow-x: auto;"></div>
+          <div class="detail-label">Regressions Breakdown</div>
+          <div id="compareRegressionsList" style="max-height: 240px; overflow-y: auto;"></div>
+          <div class="detail-label">Improvements Breakdown</div>
+          <div id="compareImprovementsList" style="max-height: 240px; overflow-y: auto;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="playgroundModal" class="modal-overlay" onclick="if(event.target===this)closePlaygroundModal()">
+    <div class="modal-window">
+      <div class="modal-header">
+        <div class="modal-title">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+          <span>Interactive Case Debugger &amp; Playground</span>
+        </div>
+        <button class="modal-close" onclick="closePlaygroundModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+          <div class="form-group">
+            <label class="form-label" for="pgCaseSelect">Case Template</label>
+            <select id="pgCaseSelect" class="form-control" onchange="onPlaygroundCaseChange()"></select>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="pgModelInput">Model ID</label>
+            <input id="pgModelInput" type="text" class="form-control" value="google/gemma-4-e4b" spellcheck="false">
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="pgQuestionInput">Question / Prompt (Editable)</label>
+          <textarea id="pgQuestionInput" class="form-control" rows="3" placeholder="Enter custom question or modify template..." spellcheck="false"></textarea>
+        </div>
+        <div style="display: flex; gap: 10px; align-items: center;">
+          <button id="btnRunPlayground" class="btn btn-primary" onclick="runPlaygroundDebug()">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+            <span>Run Live Debug</span>
+          </button>
+          <span id="pgStatusText" style="font-size: 11.5px; color: var(--text-dim);">Ready to test</span>
+        </div>
+        <div id="pgOutputSection" style="display: none; flex-direction: column; gap: 12px; margin-top: 8px;">
+          <div class="detail-label">Agent Answer</div>
+          <div id="pgAnswerBox" style="background: rgba(0,0,0,0.4); padding: 12px; border-radius: 6px; font-size: 13px; white-space: pre-wrap; max-height: 200px; overflow-y: auto;"></div>
+          <div class="detail-label">Execution Trace &amp; Tool Calls</div>
+          <div id="pgTraceBox" style="max-height: 220px; overflow-y: auto;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="suitesModal" class="modal-overlay" onclick="if(event.target===this)closeSuitesModal()">
+    <div class="modal-window">
+      <div class="modal-header">
+        <div class="modal-title">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+          <span>Custom Case Curator &amp; Suite Manager</span>
+        </div>
+        <button class="modal-close" onclick="closeSuitesModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+          <div class="form-group">
+            <label class="form-label" for="customSuitePreset">Saved Suites</label>
+            <select id="customSuitePreset" class="form-control" onchange="loadSelectedSuitePreset()"></select>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="customSuiteName">Suite Name</label>
+            <input id="customSuiteName" type="text" class="form-control" placeholder="e.g. Thai Core QA">
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="customSuiteDesc">Description</label>
+          <input id="customSuiteDesc" type="text" class="form-control" placeholder="Brief description of this test suite">
+        </div>
+        <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+          <span style="font-size: 11px; color: var(--text-dim);">Filter:</span>
+          <button class="nav-pill" onclick="filterCuratorCategory('all')">All</button>
+          <button class="nav-pill" onclick="filterCuratorCategory('profile')">Profile</button>
+          <button class="nav-pill" onclick="filterCuratorCategory('works')">Works</button>
+          <button class="nav-pill" onclick="filterCuratorCategory('music')">Music</button>
+          <button class="nav-pill" onclick="filterCuratorCategory('security')">Security</button>
+          <div style="margin-left: auto; display: flex; gap: 6px;">
+            <button class="nav-pill" onclick="curatorSelectAll(true)">Select All</button>
+            <button class="nav-pill" onclick="curatorSelectAll(false)">Clear</button>
+          </div>
+        </div>
+        <div id="curatorCasesList" style="max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border-glass); border-radius: 6px; padding: 6px;"></div>
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+          <span id="curatorCountText" style="font-size: 12px; font-weight: 600; color: var(--accent-rose);">Selected: 0 cases</span>
+          <div style="display: flex; gap: 8px;">
+            <button class="btn btn-secondary" onclick="saveCustomSuite()">Save Suite</button>
+            <button class="btn btn-primary" onclick="runCustomSuiteNow()">Run Suite Now</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="arenaModal" class="modal-overlay" onclick="if(event.target===this)closeArenaModal()">
+    <div class="modal-window">
+      <div class="modal-header">
+        <div class="modal-title">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polygon points="12 8 8 12 12 16 16 12 12 8"></polygon></svg>
+          <span>Multi-Model Arena &amp; Matrix Benchmark</span>
+        </div>
+        <button class="modal-close" onclick="closeArenaModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div style="font-size: 12px; color: var(--text-muted);">
+          Comparative evaluation matrix across snapshot runs and model checkpoints under ISO/IEC 42001 &amp; NIST AI RMF guidelines.
+        </div>
+        <div id="arenaTableWrap" style="overflow-x: auto;">
+          <div style="text-align: center; color: var(--text-dim); padding: 24px;">Loading model matrix...</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="judgeModal" class="modal-overlay" onclick="if(event.target===this)closeJudgeModal()">
+    <div class="modal-window">
+      <div class="modal-header">
+        <div class="modal-title">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
+          <span>LLM-as-a-Judge Rubric Studio</span>
+        </div>
+        <button class="modal-close" onclick="closeJudgeModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="detail-label">ISO/IEC 42001 &amp; NIST AI RMF Evaluation Rubric (Scale: 0 to 4)</div>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
+          <div class="diff-kpi-card">
+            <div style="font-weight: 700; color: var(--accent-rose); font-size: 12px;">Correctness (0-4)</div>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">Evaluates candidate against frozen ground truth reference and catalog evidence.</div>
+          </div>
+          <div class="diff-kpi-card">
+            <div style="font-weight: 700; color: var(--accent-violet); font-size: 12px;">Grounding (0-4)</div>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">Every factual claim must be backed by observed tool results.</div>
+          </div>
+          <div class="diff-kpi-card">
+            <div style="font-weight: 700; color: var(--accent-cyan); font-size: 12px;">Instruction Following (0-4)</div>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">Adherence to requested language (Thai, Chinese, English) and format.</div>
+          </div>
+          <div class="diff-kpi-card">
+            <div style="font-weight: 700; color: var(--accent-amber); font-size: 12px;">Unsupported Claims</div>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">Flags hallucinated claims absent from verified catalog tools.</div>
+          </div>
+        </div>
+        <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: flex-end; margin-top: 8px;">
+          <div class="form-group" style="margin: 0;">
+            <label class="form-label" for="judgeModelStudioInput">Judge Model ID</label>
+            <input id="judgeModelStudioInput" type="text" class="form-control" value="google/gemma-4-e4b" spellcheck="false">
+          </div>
+          <div class="form-group" style="margin: 0;">
+            <label class="form-label" for="judgeBaseUrlStudioInput">Base URL</label>
+            <input id="judgeBaseUrlStudioInput" type="text" class="form-control" value="http://127.0.0.1:1234/v1" spellcheck="false">
+          </div>
+          <button id="btnRunJudgeReport" class="btn btn-primary" onclick="runJudgeOnActiveReport()">Grade Report</button>
+        </div>
+        <div id="judgeProgressText" style="font-size: 11.5px; color: var(--text-dim);">Ready to grade.</div>
+      </div>
+    </div>
+  </div>
+  <div id="studioAlertModal" class="modal-overlay" style="z-index: 150;" onclick="if(event.target===this)closeStudioAlert()">
+    <div class="modal-window" style="max-width: 440px;">
+      <div class="modal-header">
+        <div class="modal-title" id="studioAlertHeaderTitle">
+          <svg id="studioAlertIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--accent-cyan);"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+          <span id="studioAlertTitle">Notification</span>
+        </div>
+        <button class="modal-close" onclick="closeStudioAlert()">&times;</button>
+      </div>
+      <div class="modal-body" style="gap: 16px;">
+        <div id="studioAlertMessage" style="font-size: 13px; line-height: 1.5; color: var(--text-main); word-break: break-word; white-space: pre-wrap;"></div>
+        <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;">
+          <button id="studioAlertOkBtn" class="btn btn-primary" style="min-width: 80px;" onclick="closeStudioAlert()">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="studioPromptModal" class="modal-overlay" style="z-index: 150;" onclick="if(event.target===this)cancelStudioPrompt()">
+    <div class="modal-window" style="max-width: 480px;">
+      <div class="modal-header">
+        <div class="modal-title">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--accent-primary);"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+          <span id="studioPromptTitle">Save Snapshot</span>
+        </div>
+        <button class="modal-close" onclick="cancelStudioPrompt()">&times;</button>
+      </div>
+      <div class="modal-body" style="gap: 14px;">
+        <label id="studioPromptMessage" for="studioPromptInput" class="form-label" style="font-size: 13px; color: var(--text-main);">Enter snapshot name:</label>
+        <input id="studioPromptInput" type="text" class="form-control" spellcheck="false" style="font-size: 13px; padding: 8px 12px;">
+        <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;">
+          <button class="btn btn-ghost" style="min-width: 76px;" onclick="cancelStudioPrompt()">Cancel</button>
+          <button id="studioPromptSubmitBtn" class="btn btn-primary" style="min-width: 80px;" onclick="submitStudioPrompt()">Confirm</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="aiSummaryModal" class="modal-overlay" style="z-index: 140;" onclick="if(event.target===this)closeAiSummaryModal()">
+    <div class="modal-window" style="max-width: 900px; max-height: 88vh; display: flex; flex-direction: column;">
+      <div class="modal-header" style="border-bottom: 1px solid var(--border-glass); padding-bottom: 12px;">
+        <div class="modal-title" style="display: flex; align-items: center; gap: 8px;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--accent-rose);"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+          <span style="font-weight: 700; font-size: 16px;">AI Benchmark Executive Summary</span>
+          <span class="pill pill-tag" id="aiSummaryModelBadge" style="font-size: 11px;">AI Executive Briefing</span>
+        </div>
+        <button class="modal-close" onclick="closeAiSummaryModal()">&times;</button>
+      </div>
+      <div class="modal-body" style="padding: 18px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px;">
+        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;">
+          <div style="font-size: 12.5px; color: var(--text-muted);">
+            High-level executive briefing synthesized from evaluation benchmarks. Pure direct synthesis without thinking blocks.
+          </div>
+          <div style="display: flex; gap: 8px;">
+            <button id="btnAiSummaryRegen" class="btn btn-secondary" style="font-size: 12px; padding: 6px 12px;" onclick="generateAiSummary(true)">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+              <span>Regenerate</span>
+            </button>
+            <button id="btnAiSummaryCopy" class="btn btn-secondary" style="font-size: 12px; padding: 6px 12px;" onclick="copyAiSummary()">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+              <span>Copy</span>
+            </button>
+          </div>
+        </div>
+        <div id="aiSummaryLoading" style="display: none; text-align: center; padding: 48px 0; color: var(--text-muted);">
+          <div class="status-dot running" style="width: 14px; height: 14px; margin: 0 auto 14px; display: inline-block;"></div>
+          <div style="font-size: 14px; font-weight: 600; color: var(--text-main);">Synthesizing Executive Benchmark Briefing...</div>
+          <div style="font-size: 12px; color: var(--text-dim); margin-top: 4px;">Evaluating pass rates, SLA distributions, trajectory health, and anomalies</div>
+        </div>
+        <div id="aiSummaryContent" class="markdown-body" style="font-size: 13.5px; line-height: 1.65; color: var(--text-main); background: rgba(0,0,0,0.2); border-radius: var(--radius-md); padding: 18px 20px; border: 1px solid var(--border-glass);">
+          <div style="color: var(--text-dim); font-style: italic;">No summary generated yet. Click "Generate" or open after running a benchmark.</div>
+        </div>
+      </div>
+      <div class="modal-footer" style="padding: 12px 24px; border-top: 1px solid var(--border-glass); display: flex; justify-content: flex-end;">
+        <button class="btn btn-primary" onclick="closeAiSummaryModal()">Close</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    let currentReport = { rows: [] };
+    let activeFilter = 'all';
+    let searchQuery = '';
+    let eventSource = null;
+    let runStartTime = null;
+    let runTimerInterval = null;
+    let forceTableView = false;
+    let activeDrawerRow = null;
+    let isEvaluationRunning = false;
+    const CONFIG_STORAGE_KEY = 'kiku_eval_config_v1';
+    const REPORT_STORAGE_KEY = 'kiku_eval_last_report_v1';
+    window.addEventListener('beforeunload', e => {
+      if (isEvaluationRunning) {
+        e.preventDefault();
+        e.returnValue = '';
+        return '';
+      }
+    });
+    function showSyncNotice(msg) {
+      const toast = document.getElementById('syncToast');
+      if (!toast) return;
+      toast.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg> <span>' + escapeHtml(msg) + '</span>';
+      toast.classList.add('show');
+      setTimeout(() => {
+        toast.classList.remove('show');
+      }, 2400);
+    }
+    function isErrorRow(r) {
+      if (!r) return false;
+      return r.status === 'error' || Boolean(r.error) || Boolean(r.timedOut);
+    }
+    function isAnomalyRow(r) {
+      if (!r) return false;
+      if (r.status === 'error' || r.error) return true;
+      if (r.timedOut) return true;
+      if (r.toolCorrectness && r.toolCorrectness.isCorrect === false) return true;
+      if (r.trajectoryHealth?.hasLoop) return true;
+      if (r.groundedness && r.groundedness.isGrounded === false) return true;
+      if (r.coverage && r.coverage.allMatched === false) return true;
+      if (r.judgeResult && r.judgeResult.verdict === 'FAIL') return true;
+      if (r.passAt1 === false || (typeof r.passAt1 === 'number' && r.passAt1 === 0)) return true;
+      if (r.durationMs && r.durationMs > 60000) return true;
+      return false;
+    }
+    function getAnomalyReason(r) {
+      if (!r) return 'Unknown anomaly';
+      if (r.error) return 'Error: ' + r.error;
+      if (r.status === 'error') return 'Run Error';
+      if (r.timedOut) return 'Timeout exceeded';
+      if (r.trajectoryHealth?.hasLoop) return 'Infinite Re-planning Loop (' + r.trajectoryHealth.loopCount + ')';
+      if (r.toolCorrectness && r.toolCorrectness.isCorrect === false) {
+        const missing = r.toolCorrectness.missing?.length ? ('missing [' + r.toolCorrectness.missing.join(', ') + ']') : '';
+        const unexp = r.toolCorrectness.unexpected?.length ? ('unexpected [' + r.toolCorrectness.unexpected.join(', ') + ']') : '';
+        return 'Tool Mismatch: ' + [missing, unexp].filter(Boolean).join('; ');
+      }
+      if (r.coverage && r.coverage.allMatched === false) {
+        return 'Coverage miss (' + (r.coverage.matched || 0) + '/' + (r.coverage.total || 0) + ')';
+      }
+      if (r.groundedness && r.groundedness.isGrounded === false) return 'Hallucination / Ungrounded';
+      if (r.judgeResult && r.judgeResult.verdict === 'FAIL') return 'Judge verdict: FAIL';
+      if (r.durationMs && r.durationMs > 60000) return 'High Latency (' + (r.durationMs / 1000).toFixed(1) + 's)';
+      return 'Behavioral Anomaly';
+    }
+    async function retryErrors() {
+      const rows = currentReport.rows || [];
+      const errorRows = rows.filter(isErrorRow);
+      if (!errorRows.length) {
+        await showStudioAlert('No Errors Found', 'All evaluated cases executed without status errors.', 'success');
+        return;
+      }
+      if (document.getElementById('btnStart').disabled) return;
+      const model = document.getElementById('modelInput').value;
+      const baseUrl = document.getElementById('baseUrlInput').value;
+      const judgeModel = document.getElementById('judgeModelInput').value;
+      const errorIds = errorRows.map(r => r.id);
+      const payload = {
+        suite: 'all',
+        ids: errorIds,
+        retryErrors: true,
+        model: model.trim() || undefined,
+        baseUrl: baseUrl.trim() || undefined,
+        judgeModel: judgeModel.trim() || undefined
+      };
+      setRunningUiState(true);
+      runStartTime = Date.now();
+      if (runTimerInterval) clearInterval(runTimerInterval);
+      runTimerInterval = setInterval(updateRunTimer, 1000);
+      try {
+        const res = await fetch('/api/eval/start', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        if (!res.ok) {
+          const err = await res.json();
+          await showStudioAlert('Retry Failed', err.error || res.statusText, 'error');
+          setRunningUiState(false);
+          clearInterval(runTimerInterval);
+        }
+      } catch (err) {
+        await showStudioAlert('Connection Error', 'Network error retrying status errors: ' + err.message, 'error');
+        setRunningUiState(false);
+        clearInterval(runTimerInterval);
+      }
+    }
+    const retryAnomalies = retryErrors;
+    let cachedAiSummary = null;
+    function openAiSummaryModal() {
+      document.getElementById('aiSummaryModal').classList.add('open');
+      if (!cachedAiSummary || (currentReport.rows && currentReport.rows.length > 0 && (!cachedAiSummary.caseCount || cachedAiSummary.caseCount !== currentReport.rows.length))) {
+        generateAiSummary(false);
+      }
+    }
+    function closeAiSummaryModal() {
+      document.getElementById('aiSummaryModal').classList.remove('open');
+    }
+    function cleanThinkingBlocks(raw) {
+      if (!raw) return '';
+      let text = String(raw);
+      text = text.replace(/<think>[\\s\\S]*?<\\/think>/gi, '');
+      text = text.replace(/<\\|channel>thought[\\s\\S]*?<channel\\|>/gi, '');
+      text = text.replace(/<\\|channel>thought[\\s\\S]*?(?=\\n\\n|\\n[A-Z#*])/gi, '');
+      text = text.replace(/^thought\\s*[\\r\\n][\\s\\S]*?(?=\\n\\n#|\\n\\n[A-Z])/gi, '');
+      return text.trim();
+    }
+    function copyAiSummary() {
+      if (!cachedAiSummary?.text) return;
+      navigator.clipboard.writeText(cachedAiSummary.text).then(() => {
+        showSyncNotice('AI Summary copied to clipboard');
+      }).catch(() => {
+        fallbackCopy(cachedAiSummary.text);
+      });
+    }
+    function renderMarkdownHtml(md) {
+      if (!md) return '';
+      var rawLines = String(md).split(String.fromCharCode(10));
+      var out = [];
+      var inTable = false;
+      var tableHeaders = [];
+      var tableRows = [];
+      function formatInline(s) {
+        var str = escapeHtml(s);
+        str = str.replace(/\\*\\*(.*?)\\*\\*/g, '<strong style="color: #fff; font-weight: 600;">$1</strong>');
+        str = str.replace(/\\*(.*?)\\*/g, '<em>$1</em>');
+        str = str.replace(new RegExp('\\\\x60([^\\\\x60]+)\\\\x60', 'g'), '<code style="background: rgba(255,255,255,0.08); color: var(--accent-cyan); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px;">$1</code>');
+        return str;
+      }
+      function flushTable() {
+        if (!inTable) return;
+        var tableHtml = '<div style="overflow-x: auto; margin: 16px 0; border: 1px solid var(--border-glass); border-radius: 8px; background: rgba(255,255,255,0.02);">';
+        tableHtml += '<table style="width: 100%; border-collapse: collapse; font-size: 12.5px; text-align: left;">';
+        tableHtml += '<thead><tr style="background: rgba(255,255,255,0.06); border-bottom: 1px solid var(--border-glass);">';
+        tableHeaders.forEach(function(h) {
+          tableHtml += '<th style="padding: 10px 14px; font-weight: 700; color: #fff; white-space: nowrap;">' + escapeHtml(h) + '</th>';
+        });
+        tableHtml += '</tr></thead><tbody>';
+        tableRows.forEach(function(row, rIdx) {
+          var bg = rIdx % 2 === 1 ? 'background: rgba(255,255,255,0.015);' : '';
+          tableHtml += '<tr style="' + bg + ' border-bottom: 1px solid rgba(255,255,255,0.04);">';
+          row.forEach(function(c, cIdx) {
+            var cellContent = formatInline(c);
+            if (c.indexOf('Excellent') !== -1) {
+              cellContent = '<span style="display:inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(16,185,129,0.15); color: #34d399;">Excellent</span>';
+            } else if (c.indexOf('Moderate') !== -1) {
+              cellContent = '<span style="display:inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(56,189,248,0.15); color: #38bdf8;">Moderate</span>';
+            } else if (c.indexOf('Needs Attention') !== -1) {
+              cellContent = '<span style="display:inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(251,146,60,0.15); color: #fb923c;">Needs Attention</span>';
+            }
+            var align = (cIdx > 0 && cIdx < row.length - 1) ? 'text-align: center;' : '';
+            tableHtml += '<td style="padding: 8px 14px; color: var(--text-main); ' + align + '">' + cellContent + '</td>';
+          });
+          tableHtml += '</tr>';
+        });
+        tableHtml += '</tbody></table></div>';
+        out.push(tableHtml);
+        inTable = false;
+        tableHeaders = [];
+        tableRows = [];
+      }
+      for (var i = 0; i < rawLines.length; i++) {
+        var line = rawLines[i].trim();
+        if (line.charAt(0) === '|' && line.charAt(line.length - 1) === '|') {
+          var cells = line.slice(1, -1).split('|').map(function(s) { return s.trim(); });
+          if (!inTable) {
+            if (i + 1 < rawLines.length && rawLines[i + 1].trim().indexOf('---') !== -1) {
+              inTable = true;
+              tableHeaders = cells;
+              tableRows = [];
+              i++;
+              continue;
+            }
+          } else {
+            tableRows.push(cells);
+            continue;
+          }
+        }
+        if (inTable) {
+          flushTable();
+        }
+        if (line.indexOf('### ') === 0) {
+          out.push('<h3 style="font-size: 14.5px; font-weight: 700; color: var(--accent-rose); margin: 16px 0 6px 0;">' + escapeHtml(line.slice(4)) + '</h3>');
+        } else if (line.indexOf('## ') === 0) {
+          out.push('<h2 style="font-size: 16.5px; font-weight: 800; color: #fff; margin: 20px 0 10px 0; border-bottom: 1px solid var(--border-glass); padding-bottom: 6px;">' + escapeHtml(line.slice(3)) + '</h2>');
+        } else if (line.indexOf('# ') === 0) {
+          out.push('<h1 style="font-size: 19px; font-weight: 800; color: #fff; margin: 22px 0 12px 0;">' + escapeHtml(line.slice(2)) + '</h1>');
+        } else if (/^\\d+\\.\\s+/.test(line)) {
+          var numMatch = line.match(/^(\\d+)\\.\\s+(.*)$/);
+          var formattedNum = numMatch ? ('<div style="margin-left: 18px; margin-bottom: 6px; color: var(--text-main);"><strong style="color: var(--accent-cyan);">' + numMatch[1] + '.</strong> ' + formatInline(numMatch[2]) + '</div>') : line;
+          out.push(formattedNum);
+        } else if (/^[-*]\\s+/.test(line)) {
+          out.push('<li style="margin-left: 18px; margin-bottom: 4px; color: var(--text-main);">' + formatInline(line.replace(/^[-*]\\s+/, '')) + '</li>');
+        } else if (line === '') {
+          out.push('<div style="height: 10px;"></div>');
+        } else {
+          out.push('<div>' + formatInline(line) + '</div>');
+        }
+      }
+      if (inTable) flushTable();
+      return out.join('');
+    }
+    async function generateAiSummary(force = false) {
+      const rows = currentReport.rows || [];
+      if (!rows.length) {
+        document.getElementById('aiSummaryContent').innerHTML = '<div style="color: var(--text-dim); text-align: center; padding: 24px;">No evaluation data available to summarize. Run a benchmark first.</div>';
+        return;
+      }
+      const loadingEl = document.getElementById('aiSummaryLoading');
+      const contentEl = document.getElementById('aiSummaryContent');
+      const regenBtn = document.getElementById('btnAiSummaryRegen');
+      loadingEl.style.display = 'block';
+      contentEl.style.display = 'none';
+      if (regenBtn) regenBtn.disabled = true;
+      try {
+        const res = await fetch('/api/eval/ai-summary', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            report: currentReport,
+            summary: currentReport.summary,
+            model: document.getElementById('modelInput')?.value || undefined
+          })
+        });
+        const data = await res.json();
+        let summaryText = data.summary || data.text || '';
+        summaryText = cleanThinkingBlocks(summaryText);
+        cachedAiSummary = {
+          text: summaryText,
+          caseCount: rows.length,
+          model: data.metadata?.model || data.model || 'Deterministic AI Engine',
+          engine: data.metadata?.engine || 'unknown'
+        };
+        const badge = document.getElementById('aiSummaryModelBadge');
+        if (badge) {
+          if (data.metadata?.engine === 'ai') {
+            badge.textContent = 'AI Model: ' + (data.metadata.model || 'LLM');
+            badge.style.background = 'rgba(168, 85, 247, 0.2)';
+            badge.style.color = 'var(--accent-purple)';
+            badge.style.borderColor = 'rgba(168, 85, 247, 0.4)';
+          } else {
+            badge.textContent = 'Deterministic Analytics (Offline Fallback)';
+            badge.style.background = 'rgba(245, 158, 11, 0.2)';
+            badge.style.color = 'var(--accent-amber)';
+            badge.style.borderColor = 'rgba(245, 158, 11, 0.4)';
+          }
+        }
+        contentEl.innerHTML = renderMarkdownHtml(summaryText);
+      } catch (err) {
+        contentEl.innerHTML = '<div style="color: var(--accent-red); padding: 18px;">Failed to generate AI summary: ' + escapeHtml(err.message) + '</div>';
+      } finally {
+        loadingEl.style.display = 'none';
+        contentEl.style.display = 'block';
+        if (regenBtn) regenBtn.disabled = false;
+      }
+    }
+    let studioAlertResolve = null;
+    function showStudioAlert(title, message, type = 'info') {
+      return new Promise(resolve => {
+        studioAlertResolve = resolve;
+        const modal = document.getElementById('studioAlertModal');
+        const titleEl = document.getElementById('studioAlertTitle');
+        const msgEl = document.getElementById('studioAlertMessage');
+        const iconEl = document.getElementById('studioAlertIcon');
+        const okBtn = document.getElementById('studioAlertOkBtn');
+        if (titleEl) titleEl.textContent = title || 'Notice';
+        if (msgEl) msgEl.textContent = message || '';
+        if (iconEl) {
+          if (type === 'error') {
+            iconEl.style.color = 'var(--accent-red)';
+            iconEl.innerHTML = '<circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>';
+          } else if (type === 'success') {
+            iconEl.style.color = 'var(--accent-emerald)';
+            iconEl.innerHTML = '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>';
+          } else {
+            iconEl.style.color = 'var(--accent-cyan)';
+            iconEl.innerHTML = '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>';
+          }
+        }
+        if (modal) modal.classList.add('open');
+        if (okBtn) setTimeout(() => okBtn.focus(), 50);
+      });
+    }
+    function closeStudioAlert() {
+      const modal = document.getElementById('studioAlertModal');
+      if (modal) modal.classList.remove('open');
+      if (studioAlertResolve) {
+        const res = studioAlertResolve;
+        studioAlertResolve = null;
+        res();
+      }
+    }
+    let studioPromptResolve = null;
+    function showStudioPrompt(title, message, defaultValue = '', placeholder = '') {
+      return new Promise(resolve => {
+        studioPromptResolve = resolve;
+        const modal = document.getElementById('studioPromptModal');
+        const titleEl = document.getElementById('studioPromptTitle');
+        const msgEl = document.getElementById('studioPromptMessage');
+        const inputEl = document.getElementById('studioPromptInput');
+        if (titleEl) titleEl.textContent = title || 'Prompt';
+        if (msgEl) msgEl.textContent = message || '';
+        if (inputEl) {
+          inputEl.value = defaultValue || '';
+          inputEl.placeholder = placeholder || '';
+        }
+        if (modal) modal.classList.add('open');
+        if (inputEl) {
+          setTimeout(() => {
+            inputEl.focus();
+            inputEl.select();
+          }, 50);
+        }
+      });
+    }
+    function submitStudioPrompt() {
+      const modal = document.getElementById('studioPromptModal');
+      const inputEl = document.getElementById('studioPromptInput');
+      const val = inputEl ? inputEl.value.trim() : '';
+      if (modal) modal.classList.remove('open');
+      if (studioPromptResolve) {
+        const res = studioPromptResolve;
+        studioPromptResolve = null;
+        res(val);
+      }
+    }
+    function cancelStudioPrompt() {
+      const modal = document.getElementById('studioPromptModal');
+      if (modal) modal.classList.remove('open');
+      if (studioPromptResolve) {
+        const res = studioPromptResolve;
+        studioPromptResolve = null;
+        res(null);
+      }
+    }
+    window.addEventListener('keydown', e => {
+      const promptModal = document.getElementById('studioPromptModal');
+      if (promptModal && promptModal.classList.contains('open')) {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          submitStudioPrompt();
+          return;
+        }
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          cancelStudioPrompt();
+          return;
+        }
+      }
+      const alertModal = document.getElementById('studioAlertModal');
+      if (alertModal && alertModal.classList.contains('open')) {
+        if (e.key === 'Enter' || e.key === 'Escape') {
+          e.preventDefault();
+          closeStudioAlert();
+          return;
+        }
+      }
+      if (e.key === 'Escape') {
+        closeCompareModal();
+        closePlaygroundModal();
+        closeSuitesModal();
+        closeArenaModal();
+        closeJudgeModal();
+        closeDrawer();
+      }
+    });
+    async function saveCurrentSnapshot() {
+      const defaultName = 'run_' + new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      const name = await showStudioPrompt('Save Snapshot', 'Enter snapshot name:', defaultName, 'Snapshot name...');
+      if (!name) return;
+      try {
+        const res = await fetch('/api/eval/snapshot', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name })
+        });
+        if (res.ok) {
+          showSyncNotice('Snapshot saved: ' + name);
+        } else {
+          const err = await res.json();
+          await showStudioAlert('Save Snapshot Failed', err.error || 'Server error', 'error');
+        }
+      } catch (err) {
+        await showStudioAlert('Save Snapshot Failed', err.message, 'error');
+      }
+    }
+    function triggerDownload(url, ext) {
+      const uuid = (typeof crypto !== 'undefined' && crypto.randomUUID) ? crypto.randomUUID() : (Math.random().toString(36).slice(2) + '-' + Date.now());
+      const filename = uuid + '.' + ext;
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+    function exportReportPng() {
+      showSyncNotice('Downloading Benchmark PNG...');
+      triggerDownload('/api/eval/export/png', 'png');
+    }
+    function exportReportCsv() {
+      showSyncNotice('Downloading CSV report...');
+      triggerDownload('/api/eval/export/csv', 'csv');
+    }
+    function exportReportJson() {
+      showSyncNotice('Downloading JSON report...');
+      triggerDownload('/api/eval/export/json', 'json');
+    }
+    function openCompareModal() {
+      document.getElementById('compareModal').classList.add('open');
+      loadCompareSnapshots();
+    }
+    function closeCompareModal() {
+      document.getElementById('compareModal').classList.remove('open');
+    }
+    async function loadCompareSnapshots() {
+      const bSel = document.getElementById('compareBaseSelect');
+      const cSel = document.getElementById('compareCandSelect');
+      try {
+        const res = await fetch('/api/eval/history');
+        const list = res.ok ? await res.json() : ['live'];
+        const options = list.map(item => '<option value="' + item + '">' + item + '</option>').join('');
+        bSel.innerHTML = options;
+        cSel.innerHTML = options;
+        if (list.length > 1) {
+          cSel.selectedIndex = 1;
+        }
+      } catch {}
+    }
+    async function executeCompareDiff() {
+      const base = document.getElementById('compareBaseSelect').value;
+      const cand = document.getElementById('compareCandSelect').value;
+      const summaryRow = document.getElementById('compareSummaryRow');
+      const deltasContainer = document.getElementById('compareDeltasContainer');
+      try {
+        const res = await fetch('/api/eval/compare?baseline=' + encodeURIComponent(base) + '&candidate=' + encodeURIComponent(cand));
+        if (!res.ok) {
+          const err = await res.json();
+          await showStudioAlert('Compare Error', err.error || 'Failed to compare', 'error');
+          return;
+        }
+        const data = await res.json();
+        summaryRow.style.display = 'grid';
+        deltasContainer.style.display = 'flex';
+        document.getElementById('diffRegCount').textContent = data.caseDiffs?.summary?.regressionsCount ?? 0;
+        document.getElementById('diffImpCount').textContent = data.caseDiffs?.summary?.improvementsCount ?? 0;
+        document.getElementById('diffUnchangedCount').textContent = data.caseDiffs?.summary?.unchangedCount ?? 0;
+        let tableHtml = '<table style="width: 100%; border-collapse: collapse; font-size: 11.5px;">' +
+          '<thead><tr style="border-bottom: 1px solid var(--border-glass); color: var(--text-dim); text-align: left;">' +
+          '<th style="padding: 6px;">Metric</th><th style="padding: 6px;">Baseline</th><th style="padding: 6px;">Candidate</th><th style="padding: 6px;">Delta</th>' +
+          '</tr></thead><tbody>';
+        for (const [m, d] of Object.entries(data.metricDeltas || {})) {
+          const delta = d.delta;
+          let deltaClass = 'diff-badge-neu';
+          let sign = '';
+          if (delta !== null && delta !== undefined) {
+            if (delta > 0) { deltaClass = 'diff-badge-imp'; sign = '+'; }
+            else if (delta < 0) { deltaClass = 'diff-badge-reg'; }
+          }
+          tableHtml += '<tr style="border-bottom: 1px solid rgba(255,255,255,0.04);">' +
+            '<td style="padding: 6px; font-weight: 500;">' + escapeHtml(m) + '</td>' +
+            '<td style="padding: 6px; color: var(--text-muted);">' + (d.baseline ?? '-') + '</td>' +
+            '<td style="padding: 6px; color: var(--text-main); font-weight: 600;">' + (d.candidate ?? '-') + '</td>' +
+            '<td style="padding: 6px;"><span class="' + deltaClass + '">' + (delta !== null ? (sign + delta) : '-') + '</span></td>' +
+            '</tr>';
+        }
+        tableHtml += '</tbody></table>';
+        document.getElementById('compareMetricTable').innerHTML = tableHtml;
+        const regList = data.caseDiffs?.regressions || [];
+        if (regList.length === 0) {
+          document.getElementById('compareRegressionsList').innerHTML = '<div style="color: var(--accent-emerald); font-size: 12px; padding: 12px; background: rgba(52,211,153,0.06); border-radius: 6px;">Zero regressions detected between snapshots.</div>';
+        } else {
+          document.getElementById('compareRegressionsList').innerHTML = regList.map(r =>
+            '<div style="background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.2); border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-bottom: 6px;">' +
+            '<div style="display: flex; justify-content: space-between; font-weight: 600;">' +
+            '<span style="color: var(--accent-red);">' + r.id + ' [' + escapeHtml(r.category) + ']</span>' +
+            '<span class="diff-badge-reg">Regression</span>' +
+            '</div>' +
+            '<div style="color: var(--text-dim); margin-top: 4px; font-size: 11px;">Baseline: status=' + r.baseline.status + ', allMatched=' + r.baseline.allMatched + ', tool=' + r.baseline.toolCorrect + ' &rarr; Candidate: status=' + r.candidate.status + ', allMatched=' + r.candidate.allMatched + ', tool=' + r.candidate.toolCorrect + '</div>' +
+            '</div>'
+          ).join('');
+        }
+        const impList = data.caseDiffs?.improvements || [];
+        if (impList.length === 0) {
+          document.getElementById('compareImprovementsList').innerHTML = '<div style="color: var(--text-dim); font-size: 12px; padding: 12px;">No new case improvements in this diff.</div>';
+        } else {
+          document.getElementById('compareImprovementsList').innerHTML = impList.map(i =>
+            '<div style="background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.2); border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-bottom: 6px;">' +
+            '<div style="display: flex; justify-content: space-between; font-weight: 600;">' +
+            '<span style="color: var(--accent-emerald);">' + i.id + ' [' + escapeHtml(i.category) + ']</span>' +
+            '<span class="diff-badge-imp">Improvement</span>' +
+            '</div>' +
+            '<div style="color: var(--text-dim); margin-top: 4px; font-size: 11px;">Baseline: status=' + i.baseline.status + ' &rarr; Candidate: status=' + i.candidate.status + ', allMatched=' + i.candidate.allMatched + '</div>' +
+            '</div>'
+          ).join('');
+        }
+      } catch (err) {
+        await showStudioAlert('Compare Error', 'Failed to execute diff: ' + err.message, 'error');
+      }
+    }
+    function openPlaygroundModal() {
+      document.getElementById('playgroundModal').classList.add('open');
+      populatePlaygroundCases();
+    }
+    function closePlaygroundModal() {
+      document.getElementById('playgroundModal').classList.remove('open');
+    }
+    function populatePlaygroundCases() {
+      const sel = document.getElementById('pgCaseSelect');
+      if (!sel || !window.allAvailableCases?.length) return;
+      sel.innerHTML = window.allAvailableCases.map(c =>
+        '<option value="' + c.id + '">' + c.id + ' [' + c.category + '] ' + escapeHtml(c.question).slice(0, 50) + '...</option>'
+      ).join('');
+      if (!document.getElementById('pgQuestionInput').value) {
+        onPlaygroundCaseChange();
+      }
+    }
+    function onPlaygroundCaseChange() {
+      const caseId = document.getElementById('pgCaseSelect').value;
+      const found = (window.allAvailableCases || []).find(c => c.id === caseId);
+      if (found) {
+        document.getElementById('pgQuestionInput').value = found.question || '';
+      }
+    }
+    function openPlaygroundWithCurrentCase() {
+      if (!activeDrawerRow) return;
+      openPlaygroundModal();
+      const sel = document.getElementById('pgCaseSelect');
+      if (sel) sel.value = activeDrawerRow.id;
+      document.getElementById('pgQuestionInput').value = activeDrawerRow.question || '';
+      const mInput = document.getElementById('modelInput');
+      if (mInput) document.getElementById('pgModelInput').value = mInput.value;
+    }
+    async function runPlaygroundDebug() {
+      const caseId = document.getElementById('pgCaseSelect').value;
+      const customQuestion = document.getElementById('pgQuestionInput').value;
+      const model = document.getElementById('pgModelInput').value;
+      const bInput = document.getElementById('baseUrlInput');
+      const baseUrl = bInput ? bInput.value : 'http://127.0.0.1:1234/v1';
+      const btn = document.getElementById('btnRunPlayground');
+      const statusText = document.getElementById('pgStatusText');
+      const outSec = document.getElementById('pgOutputSection');
+      btn.disabled = true;
+      statusText.textContent = 'Agent executing case...';
+      outSec.style.display = 'none';
+      try {
+        const res = await fetch('/api/eval/playground', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ caseId, customQuestion, model, baseUrl })
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) {
+          statusText.textContent = 'Execution failed: ' + (data.error || 'Server error');
+          btn.disabled = false;
+          return;
+        }
+        statusText.textContent = 'Completed in ' + (data.result?.durationMs || 0) + 'ms';
+        outSec.style.display = 'flex';
+        document.getElementById('pgAnswerBox').textContent = data.result?.answer || data.result?.error || 'No answer';
+        const trace = data.result?.trace || [];
+        if (trace.length === 0) {
+          document.getElementById('pgTraceBox').innerHTML = '<div style="color: var(--text-dim); font-size: 12px;">No tool trace events recorded.</div>';
+        } else {
+          document.getElementById('pgTraceBox').innerHTML = '<div class="react-timeline">' + trace.map(t => {
+            const isResult = t.event === 'result';
+            const title = isResult ? ('Observation: ' + t.name + ' (' + (t.durationMs || 0) + 'ms)') : ('Action: ' + t.name);
+            const payload = isResult ? t.value : t.parameters;
+            const jsonStr = payload ? JSON.stringify(payload, null, 2) : '';
+            return '<div class="timeline-step">' +
+              '<div style="font-weight: 600; font-size: 12px; color: ' + (isResult ? 'var(--accent-emerald)' : 'var(--accent-cyan)') + ';">' + escapeHtml(title) + '</div>' +
+              (jsonStr ? '<pre class="code-block">' + escapeHtml(jsonStr) + '</pre>' : '') +
+              '</div>';
+          }).join('') + '</div>';
+        }
+      } catch (err) {
+        statusText.textContent = 'Error: ' + err.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+    window.customSuitesList = [];
+    window.curatorSelectedSet = new Set();
+    window.activeCuratorCategory = 'all';
+    function openSuitesModal() {
+      document.getElementById('suitesModal').classList.add('open');
+      loadCustomSuites();
+      renderCuratorCases('all');
+    }
+    function closeSuitesModal() {
+      document.getElementById('suitesModal').classList.remove('open');
+    }
+    async function loadCustomSuites() {
+      try {
+        const res = await fetch('/api/eval/custom-suites');
+        if (res.ok) {
+          window.customSuitesList = await res.json();
+          const sel = document.getElementById('customSuitePreset');
+          sel.innerHTML = '<option value="">-- Choose Preset or Author New --</option>' +
+            window.customSuitesList.map(s => '<option value="' + s.id + '">' + escapeHtml(s.name) + ' (' + s.caseIds.length + ' cases)</option>').join('');
+        }
+      } catch {}
+    }
+    function loadSelectedSuitePreset() {
+      const sId = document.getElementById('customSuitePreset').value;
+      const found = (window.customSuitesList || []).find(s => s.id === sId);
+      if (!found) return;
+      document.getElementById('customSuiteName').value = found.name || '';
+      document.getElementById('customSuiteDesc').value = found.description || '';
+      window.curatorSelectedSet = new Set(found.caseIds || []);
+      renderCuratorCases(window.activeCuratorCategory || 'all');
+    }
+    function filterCuratorCategory(cat) {
+      renderCuratorCases(cat);
+    }
+    function renderCuratorCases(cat) {
+      window.activeCuratorCategory = cat;
+      const list = window.allAvailableCases || [];
+      const filtered = cat === 'all' ? list : list.filter(c => c.category === cat);
+      const container = document.getElementById('curatorCasesList');
+      container.innerHTML = filtered.map(c => {
+        const isChecked = window.curatorSelectedSet.has(c.id);
+        return '<label style="display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 4px 6px; cursor: pointer; border-radius: 4px;">' +
+          '<input type="checkbox" class="curator-chk" value="' + c.id + '" ' + (isChecked ? 'checked' : '') + ' onchange="onCuratorCheckboxChange(this)">' +
+          '<span style="font-weight: 600; color: var(--accent-rose); width: 44px;">' + c.id + '</span>' +
+          '<span style="color: var(--text-dim); width: 68px;">[' + c.category + ']</span>' +
+          '<span style="color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' + escapeHtml(c.question) + '</span>' +
+          '</label>';
+      }).join('');
+      updateCuratorCount();
+    }
+    function onCuratorCheckboxChange(el) {
+      if (!window.curatorSelectedSet) window.curatorSelectedSet = new Set();
+      if (el.checked) {
+        window.curatorSelectedSet.add(el.value);
+      } else {
+        window.curatorSelectedSet.delete(el.value);
+      }
+      updateCuratorCount();
+    }
+    function curatorSelectAll(bool) {
+      if (!window.curatorSelectedSet) window.curatorSelectedSet = new Set();
+      const list = window.allAvailableCases || [];
+      const filtered = window.activeCuratorCategory === 'all' ? list : list.filter(c => c.category === window.activeCuratorCategory);
+      filtered.forEach(c => {
+        if (bool) {
+          window.curatorSelectedSet.add(c.id);
+        } else {
+          window.curatorSelectedSet.delete(c.id);
+        }
+      });
+      document.querySelectorAll('.curator-chk').forEach(chk => {
+        chk.checked = bool;
+      });
+      updateCuratorCount();
+    }
+    function updateCuratorCount() {
+      const count = window.curatorSelectedSet ? window.curatorSelectedSet.size : 0;
+      document.getElementById('curatorCountText').textContent = 'Selected: ' + count + ' cases';
+    }
+    async function saveCustomSuite() {
+      const name = document.getElementById('customSuiteName').value.trim();
+      const description = document.getElementById('customSuiteDesc').value.trim();
+      if (!name) { await showStudioAlert('Input Required', 'Please enter a suite name.'); return; }
+      const caseIds = Array.from(window.curatorSelectedSet || []);
+      if (caseIds.length === 0) { await showStudioAlert('Selection Required', 'Please select at least 1 case.'); return; }
+      try {
+        const res = await fetch('/api/eval/custom-suites', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, description, caseIds })
+        });
+        if (res.ok) {
+          showSyncNotice('Custom suite saved');
+          loadCustomSuites();
+        }
+      } catch (err) {
+        await showStudioAlert('Save Suite Failed', err.message, 'error');
+      }
+    }
+    async function runCustomSuiteNow() {
+      const caseIds = Array.from(window.curatorSelectedSet || []);
+      if (caseIds.length === 0) { await showStudioAlert('Selection Required', 'Please select at least 1 case.'); return; }
+      closeSuitesModal();
+      document.getElementById('suiteSelect').value = 'single';
+      const caseSel = document.getElementById('caseSelect');
+      if (caseSel && caseIds[0]) caseSel.value = caseIds[0];
+      window.customSuiteRunIds = caseIds.join(',');
+      startRun();
+    }
+    function openArenaModal() {
+      document.getElementById('arenaModal').classList.add('open');
+      loadModelArena();
+    }
+    function closeArenaModal() {
+      document.getElementById('arenaModal').classList.remove('open');
+    }
+    async function loadModelArena() {
+      const wrap = document.getElementById('arenaTableWrap');
+      try {
+        const res = await fetch('/api/eval/matrix');
+        const list = res.ok ? await res.json() : [];
+        if (list.length === 0) {
+          wrap.innerHTML = '<div style="text-align: center; color: var(--text-dim); padding: 24px;">No evaluated snapshot models found in artifacts/eval.</div>';
+          return;
+        }
+        let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px;">' +
+          '<thead><tr style="border-bottom: 1px solid var(--border-glass); color: var(--text-dim); text-align: left;">' +
+          '<th style="padding: 8px;">Model / Snapshot</th>' +
+          '<th style="padding: 8px;">Pass@1</th>' +
+          '<th style="padding: 8px;">Tool F1</th>' +
+          '<th style="padding: 8px;">Grounded</th>' +
+          '<th style="padding: 8px;">Loop-Free</th>' +
+          '<th style="padding: 8px;">Median Latency</th>' +
+          '<th style="padding: 8px;">Cases</th>' +
+          '</tr></thead><tbody>';
+        for (const item of list) {
+          const s = item.summary || {};
+          const pass = Math.round((s.passAt1 ?? s.lexicalCoverageRate ?? 0) * 100);
+          const tool = Math.round((s.toolF1 ?? s.toolAccuracyRate ?? 0) * 100);
+          const ground = Math.round((s.groundednessRate ?? 0) * 100);
+          const loop = Math.round((s.loopFreeRate ?? 1) * 100);
+          const med = s.medianMs ? (s.medianMs + 'ms') : '-';
+          html += '<tr style="border-bottom: 1px solid rgba(255,255,255,0.04);">' +
+            '<td style="padding: 8px; font-weight: 600; color: var(--text-main);">' + escapeHtml(item.name) + '<div style="font-size: 10px; color: var(--text-dim); font-weight: normal;">' + escapeHtml(item.model) + '</div></td>' +
+            '<td style="padding: 8px; color: var(--accent-rose); font-weight: 700;">' + pass + '%</td>' +
+            '<td style="padding: 8px; color: var(--accent-violet);">' + tool + '%</td>' +
+            '<td style="padding: 8px; color: var(--accent-cyan);">' + ground + '%</td>' +
+            '<td style="padding: 8px; color: var(--accent-emerald);">' + loop + '%</td>' +
+            '<td style="padding: 8px; color: var(--text-muted);">' + med + '</td>' +
+            '<td style="padding: 8px; color: var(--text-dim);">' + (item.caseCount || 0) + '</td>' +
+            '</tr>';
+        }
+        html += '</tbody></table>';
+        wrap.innerHTML = html;
+      } catch (err) {
+        wrap.innerHTML = '<div style="color: var(--accent-red); padding: 20px;">Failed to load arena: ' + err.message + '</div>';
+      }
+    }
+    function openJudgeModal() {
+      document.getElementById('judgeModal').classList.add('open');
+    }
+    function closeJudgeModal() {
+      document.getElementById('judgeModal').classList.remove('open');
+    }
+    async function runJudgeOnActiveReport() {
+      const judgeModel = document.getElementById('judgeModelStudioInput').value.trim();
+      const baseUrl = document.getElementById('judgeBaseUrlStudioInput').value.trim();
+      const btn = document.getElementById('btnRunJudgeReport');
+      const progress = document.getElementById('judgeProgressText');
+      btn.disabled = true;
+      progress.textContent = 'LLM Judge evaluating cases...';
+      try {
+        const res = await fetch('/api/eval/judge', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ judgeModel, baseUrl })
+        });
+        const data = await res.json();
+        if (!res.ok) {
+          progress.textContent = 'Judge error: ' + (data.error || 'Evaluation failed');
+          return;
+        }
+        progress.textContent = 'Judging complete! Inspect verdicts in Case Details drawer.';
+        showSyncNotice('Report graded with Judge');
+        if (data.report) {
+          currentReport = data.report;
+          renderDashboard();
+        }
+      } catch (err) {
+        progress.textContent = 'Error: ' + err.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+    function saveConfigToStorage() {
+      try {
+        const cfg = {
+          suite: document.getElementById('suiteSelect')?.value,
+          targetCase: document.getElementById('caseSelect')?.value,
+          model: document.getElementById('modelInput')?.value,
+          baseUrl: document.getElementById('baseUrlInput')?.value,
+          limit: document.getElementById('limitInput')?.value,
+          judgeModel: document.getElementById('judgeModelInput')?.value,
+          resume: document.getElementById('resumeCheckbox')?.checked
+        };
+        localStorage.setItem(CONFIG_STORAGE_KEY, JSON.stringify(cfg));
+      } catch {}
+    }
+    function restoreConfigFromStorage() {
+      try {
+        const raw = localStorage.getItem(CONFIG_STORAGE_KEY);
+        if (!raw) return;
+        const cfg = JSON.parse(raw);
+        if (cfg.suite) {
+          const suiteSel = document.getElementById('suiteSelect');
+          if (suiteSel) {
+            suiteSel.value = cfg.suite;
+            syncPresetChips();
+          }
+        }
+        if (cfg.targetCase && document.getElementById('caseSelect')) {
+          document.getElementById('caseSelect').value = cfg.targetCase;
+        }
+        if (cfg.model !== undefined && document.getElementById('modelInput')) {
+          document.getElementById('modelInput').value = cfg.model;
+        }
+        if (cfg.baseUrl !== undefined && document.getElementById('baseUrlInput')) {
+          document.getElementById('baseUrlInput').value = cfg.baseUrl;
+        }
+        if (cfg.limit !== undefined && document.getElementById('limitInput')) {
+          document.getElementById('limitInput').value = cfg.limit;
+        }
+        if (cfg.judgeModel !== undefined && document.getElementById('judgeModelInput')) {
+          document.getElementById('judgeModelInput').value = cfg.judgeModel;
+        }
+        if (cfg.resume !== undefined && document.getElementById('resumeCheckbox')) {
+          document.getElementById('resumeCheckbox').checked = Boolean(cfg.resume);
+        }
+      } catch {}
+    }
+    function saveReportToStorage(rep) {
+      try {
+        if (rep && Array.isArray(rep.rows) && rep.rows.length > 0) {
+          localStorage.setItem(REPORT_STORAGE_KEY, JSON.stringify(rep));
+        }
+      } catch {}
+    }
+    function restoreReportFromStorage() {
+      try {
+        const raw = localStorage.getItem(REPORT_STORAGE_KEY);
+        if (raw) {
+          const cached = JSON.parse(raw);
+          if (Array.isArray(cached.rows) && cached.rows.length > 0 && (!currentReport.rows || !currentReport.rows.length)) {
+            currentReport = cached;
+            renderDashboard();
+            showSyncNotice('Restored local draft');
+          }
+        }
+      } catch {}
+    }
+    function copyActiveDrawerField(field) {
+      if (!activeDrawerRow) return;
+      const val = field === 'question' ? (activeDrawerRow.question || '') : (activeDrawerRow.answer || activeDrawerRow.error || '');
+      copyText(val);
+    }
+    function toggleConfig() {
+      const body = document.getElementById('configBody');
+      const chev = document.getElementById('configChevron');
+      const isHidden = body.style.display === 'none';
+      body.style.display = isHidden ? 'grid' : 'none';
+      chev.classList.toggle('open', isHidden);
+    }
+    function applyPreset(name) {
+      document.querySelectorAll('.preset-chip').forEach(c => c.classList.remove('active'));
+      const found = Array.from(document.querySelectorAll('.preset-chip')).find(c => c.textContent.toLowerCase().includes(name));
+      if (found) found.classList.add('active');
+      const suiteSelect = document.getElementById('suiteSelect');
+      const limitInput = document.getElementById('limitInput');
+      const targetCaseGroup = document.getElementById('targetCaseGroup');
+      if (name === 'single') {
+        suiteSelect.value = 'single';
+        limitInput.value = '1';
+        if (targetCaseGroup) targetCaseGroup.style.display = 'flex';
+      } else if (name === 'quick') {
+        suiteSelect.value = 'quick';
+        limitInput.value = '3';
+        if (targetCaseGroup) targetCaseGroup.style.display = 'none';
+      } else {
+        suiteSelect.value = name;
+        limitInput.value = '';
+        if (targetCaseGroup) targetCaseGroup.style.display = 'none';
+      }
+      saveConfigToStorage();
+    }
+    function syncPresetChips() {
+      const val = document.getElementById('suiteSelect').value;
+      document.querySelectorAll('.preset-chip').forEach(c => {
+        c.classList.toggle('active', c.textContent.toLowerCase().includes(val));
+      });
+      const targetCaseGroup = document.getElementById('targetCaseGroup');
+      if (targetCaseGroup) {
+        targetCaseGroup.style.display = (val === 'single') ? 'flex' : 'none';
+      }
+      const limitInput = document.getElementById('limitInput');
+      if (val === 'single') {
+        limitInput.value = '1';
+      } else if (val === 'quick') {
+        limitInput.value = '3';
+      } else if (limitInput.value === '1' || limitInput.value === '3') {
+        limitInput.value = '';
+      }
+    }
+    function toggleViewMode() {
+      forceTableView = !forceTableView;
+      const mCards = document.getElementById('mobileCardsContainer');
+      const tView = document.getElementById('tableViewContainer');
+      const isCardsVisible = window.getComputedStyle(mCards).display !== 'none';
+      if (isCardsVisible) {
+        mCards.style.setProperty('display', 'none', 'important');
+        tView.style.setProperty('display', 'block', 'important');
+      } else {
+        mCards.style.setProperty('display', 'flex', 'important');
+        tView.style.setProperty('display', 'none', 'important');
+      }
+    }
+    let lmsEventSource = null;
+    let lmsFilter = 'all';
+    let lmsAutoScroll = true;
+    let lmsEventCount = 0;
+    const MAX_LMS_LOGS = 250;
+    function initLmsStream() {
+      if (lmsEventSource) {
+        try { lmsEventSource.close(); } catch {}
+      }
+      const dot = document.getElementById('lmsStatusDot');
+      const badge = document.getElementById('lmsLiveBadge');
+      if (badge) {
+        badge.textContent = 'CONNECTING';
+        badge.style.color = 'var(--accent-amber)';
+        badge.style.borderColor = 'rgba(251, 191, 36, 0.4)';
+      }
+      const streamUrl = (window.location.protocol === 'http:' || window.location.protocol === 'https:')
+        ? '/api/eval/lms/stream'
+        : 'http://localhost:3001/api/eval/lms/stream';
+      lmsEventSource = new EventSource(streamUrl);
+      lmsEventSource.onopen = () => {
+        if (dot) dot.className = 'lms-pulse-dot active';
+        if (badge) {
+          badge.textContent = 'LIVE';
+          badge.style.color = 'var(--accent-emerald)';
+          badge.style.borderColor = 'rgba(52, 211, 153, 0.35)';
+        }
+      };
+      lmsEventSource.onerror = () => {
+        if (dot) dot.className = 'lms-pulse-dot offline';
+        if (badge) {
+          badge.textContent = 'OFFLINE';
+          badge.style.color = 'var(--accent-red)';
+          badge.style.borderColor = 'rgba(239, 68, 68, 0.4)';
+        }
+      };
+      lmsEventSource.addEventListener('lms_log', (e) => {
+        try {
+          const payload = JSON.parse(e.data);
+          lmsEventCount++;
+          const cEl = document.getElementById('lmsEventCountVal');
+          if (cEl) cEl.textContent = String(lmsEventCount);
+          handleLmsLogPayload(payload);
+        } catch {}
+      });
+    }
+    function handleLmsLogPayload(item) {
+      const emptyNotice = document.getElementById('lmsEmptyNotice');
+      if (emptyNotice) emptyNotice.style.display = 'none';
+      const data = item.data || item;
+      if (data.modelIdentifier && document.getElementById('lmsModelTag')) {
+        document.getElementById('lmsModelTag').textContent = data.modelIdentifier;
+      }
+      if (data.stats) {
+        if (data.stats.tokensPerSecond != null && document.getElementById('lmsTpsVal')) {
+          document.getElementById('lmsTpsVal').textContent = Number(data.stats.tokensPerSecond).toFixed(1) + ' tok/s';
+        }
+        if (data.stats.timeToFirstTokenSec != null && document.getElementById('lmsTtftVal')) {
+          document.getElementById('lmsTtftVal').textContent = Number(data.stats.timeToFirstTokenSec).toFixed(2) + 's';
+        }
+        if (data.stats.predictedTokensCount != null && document.getElementById('lmsPredictedVal')) {
+          document.getElementById('lmsPredictedVal').textContent = data.stats.predictedTokensCount;
+        }
+        if (data.stats.promptTokensCount != null && document.getElementById('lmsPromptVal')) {
+          document.getElementById('lmsPromptVal').textContent = data.stats.promptTokensCount;
+        }
+        if (data.stats.stopReason && document.getElementById('lmsStopReasonVal')) {
+          document.getElementById('lmsStopReasonVal').textContent = data.stats.stopReason;
+        }
+      }
+      const viewport = document.getElementById('lmsLogViewport');
+      if (!viewport) return;
+      if (data.type === 'llm.prediction.input' && data.input) {
+        let queryText = '';
+        const userMatch = data.input.match(/<\|turn>user\s*([\s\S]*?)<turn\|>/);
+        if (userMatch && userMatch[1]) {
+          queryText = userMatch[1].trim();
+        } else {
+          queryText = data.input.slice(-300).trim();
+        }
+        if (queryText) {
+          const el = document.createElement('div');
+          el.className = 'lms-entry-input';
+          el.dataset.lmsType = 'all';
+          if (lmsFilter === 'thoughts' || lmsFilter === 'tools') el.style.display = 'none';
+          el.innerHTML = '<span class="lms-input-badge">Prompt Received</span><br>' + escapeHtml(queryText);
+          viewport.appendChild(el);
+          if (document.getElementById('lmsStopReasonVal')) {
+            document.getElementById('lmsStopReasonVal').textContent = 'Predicting...';
+          }
+        }
+        while (viewport.children.length > MAX_LMS_LOGS) {
+          viewport.removeChild(viewport.children[0]);
+        }
+        if (lmsAutoScroll) viewport.scrollTop = viewport.scrollHeight;
+        return;
+      }
+      const outputText = data.output || data.raw || (typeof item === 'string' ? item : '');
+      if (!outputText && !item.error && !item.info) return;
+      if (item.error) {
+        const div = document.createElement('div');
+        div.className = 'lms-entry-raw';
+        div.style.color = 'var(--accent-red)';
+        div.textContent = item.error;
+        viewport.appendChild(div);
+      } else if (item.info) {
+        const div = document.createElement('div');
+        div.className = 'lms-entry-text';
+        div.style.color = 'var(--accent-violet)';
+        div.textContent = item.info;
+        viewport.appendChild(div);
+      } else {
+        renderLmsOutputEntries(outputText, item, viewport);
+      }
+      while (viewport.children.length > MAX_LMS_LOGS) {
+        viewport.removeChild(viewport.children[0]);
+      }
+      if (lmsAutoScroll) {
+        viewport.scrollTop = viewport.scrollHeight;
+      }
+    }
+    function renderLmsOutputEntries(text, item, viewport) {
+      let cur = text;
+      let thoughtPart = '';
+      let answerPart = '';
+      if (cur.indexOf('<channel|>') !== -1) {
+        const splitIdx = cur.indexOf('<channel|>');
+        thoughtPart = cur.slice(0, splitIdx).replace(/^<\|channel>thought\s*/, '').trim();
+        answerPart = cur.slice(splitIdx + 10).trim();
+      } else if (cur.indexOf('<|channel>thought') !== -1) {
+        thoughtPart = cur.replace(/^<\|channel>thought\s*/, '').trim();
+      } else {
+        answerPart = cur.trim();
+      }
+      if (thoughtPart) {
+        const el = document.createElement('div');
+        el.className = 'lms-entry-thought';
+        el.dataset.lmsType = 'thoughts';
+        if (lmsFilter !== 'all' && lmsFilter !== 'thoughts') el.style.display = 'none';
+        el.innerHTML = '<span class="lms-thought-badge">Reasoning Thought</span><br>' + escapeHtml(thoughtPart);
+        viewport.appendChild(el);
+      }
+      if (answerPart) {
+        let remaining = answerPart;
+        while (remaining.indexOf('<|tool_call>') !== -1) {
+          const tStart = remaining.indexOf('<|tool_call>');
+          const beforeTool = remaining.slice(0, tStart).trim();
+          if (beforeTool) {
+            const el = document.createElement('div');
+            el.className = 'lms-entry-answer';
+            el.dataset.lmsType = 'all';
+            if (lmsFilter === 'thoughts' || lmsFilter === 'tools') el.style.display = 'none';
+            el.innerHTML = '<span class="lms-answer-badge">Generated Text</span><br>' + escapeHtml(beforeTool);
+            viewport.appendChild(el);
+          }
+          const tEnd = remaining.indexOf('<tool_call|>', tStart);
+          if (tEnd !== -1) {
+            const toolContent = remaining.slice(tStart + 12, tEnd).trim();
+            const el = document.createElement('div');
+            el.className = 'lms-entry-tool';
+            el.dataset.lmsType = 'tools';
+            if (lmsFilter !== 'all' && lmsFilter !== 'tools') el.style.display = 'none';
+            el.innerHTML = '<span class="lms-tool-badge">Tool Invocation</span><br>' + escapeHtml(toolContent);
+            viewport.appendChild(el);
+            remaining = remaining.slice(tEnd + 12).trim();
+          } else {
+            break;
+          }
+        }
+        if (remaining) {
+          const el = document.createElement('div');
+          el.className = 'lms-entry-answer';
+          el.dataset.lmsType = 'all';
+          if (lmsFilter === 'thoughts' || lmsFilter === 'tools') el.style.display = 'none';
+          el.innerHTML = '<span class="lms-answer-badge">Generated Answer</span><br>' + escapeHtml(remaining);
+          viewport.appendChild(el);
+        }
+      }
+      const rawEl = document.createElement('div');
+      rawEl.className = 'lms-entry-raw';
+      rawEl.dataset.lmsType = 'json';
+      if (lmsFilter !== 'json') rawEl.style.display = 'none';
+      rawEl.textContent = JSON.stringify(item);
+      viewport.appendChild(rawEl);
+    }
+    function setLmsFilter(filter) {
+      lmsFilter = filter;
+      document.querySelectorAll('.lms-filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.lmsFilter === filter);
+      });
+      const viewport = document.getElementById('lmsLogViewport');
+      if (!viewport) return;
+      Array.from(viewport.children).forEach(child => {
+        if (child.id === 'lmsEmptyNotice') return;
+        const type = child.dataset.lmsType;
+        if (filter === 'all') {
+          child.style.display = (type === 'json') ? 'none' : '';
+        } else if (filter === 'json') {
+          child.style.display = (type === 'json') ? '' : 'none';
+        } else {
+          child.style.display = (type === filter) ? '' : 'none';
+        }
+      });
+    }
+    function toggleLmsAutoScroll() {
+      lmsAutoScroll = !lmsAutoScroll;
+      const btn = document.getElementById('lmsAutoScrollBtn');
+      if (btn) {
+        btn.textContent = 'Auto-scroll: ' + (lmsAutoScroll ? 'ON' : 'OFF');
+      }
+    }
+    function clearLmsLogs() {
+      const viewport = document.getElementById('lmsLogViewport');
+      if (viewport) {
+        viewport.innerHTML = '<div class="lms-log-empty" id="lmsEmptyNotice">Listening for LM Studio inference events...</div>';
+      }
+    }
+    function toggleLmsPanel() {
+      const body = document.getElementById('lmsStreamBody');
+      const chev = document.getElementById('lmsChevron');
+      if (!body) return;
+      const isHidden = body.style.display === 'none';
+      body.style.display = isHidden ? 'flex' : 'none';
+      if (chev) chev.classList.toggle('open', isHidden);
+    }
+    function initSSE() {
+      const dot = document.getElementById('sseStatusDot');
+      const text = document.getElementById('sseStatusText');
+      if (eventSource) {
+        eventSource.close();
+      }
+      eventSource = new EventSource('/api/eval/events');
+      eventSource.onopen = () => {
+        dot.className = isEvaluationRunning ? 'status-dot running' : 'status-dot active';
+        text.textContent = isEvaluationRunning ? 'Running' : 'Live SSE';
+      };
+      eventSource.onerror = () => {
+        dot.className = 'status-dot';
+        text.textContent = 'Disconnected';
+      };
+      eventSource.addEventListener('sync_state', e => {
+        try {
+          const data = JSON.parse(e.data);
+          if (data.running) {
+            setRunningUiState(true);
+            if (data.activeRun?.startedAt) {
+              runStartTime = data.activeRun.startedAt;
+              if (runTimerInterval) clearInterval(runTimerInterval);
+              runTimerInterval = setInterval(updateRunTimer, 1000);
+            }
+            if (data.activeRun?.suite) {
+              document.getElementById('runTitle').textContent = 'Suite: ' + data.activeRun.suite;
+            }
+            if (data.activeCase) {
+              handleCaseStart(data.activeCase);
+              if (data.activeCase.tool) {
+                document.getElementById('activeToolText').textContent = data.activeCase.tool;
+              }
+            }
+            if (data.report && Array.isArray(data.report.rows)) {
+              currentReport = data.report;
+              saveReportToStorage(currentReport);
+              renderDashboard();
+              const overallTotal = data.activeRun?.total || data.report?.metadata?.caseIds?.length || ${totalCount};
+              const batchInfo = (data.activeRun?.planned && data.activeRun.planned !== overallTotal)
+                ? { current: data.activeCase?.index || (data.report.rows.length - (data.activeRun.initialRows || 0)), total: data.activeRun.planned }
+                : null;
+              updateProgress(data.report.rows.length, overallTotal, batchInfo);
+            }
+            showSyncNotice('Live run connected');
+          } else if (data.report && Array.isArray(data.report.rows) && data.report.rows.length > 0) {
+            currentReport = data.report;
+            saveReportToStorage(currentReport);
+            renderDashboard();
+            const total = data.report.metadata?.caseIds?.length || ${totalCount};
+            document.getElementById('progressHero').style.display = 'flex';
+            document.getElementById('runTitle').textContent = 'Live Report (' + currentReport.rows.length + ' cases)';
+            updateProgress(currentReport.rows.length, total);
+          }
+        } catch {}
+      });
+      eventSource.addEventListener('run_start', e => {
+        const data = JSON.parse(e.data);
+        handleRunStart(data);
+      });
+      eventSource.addEventListener('case_start', e => {
+        const data = JSON.parse(e.data);
+        handleCaseStart(data);
+      });
+      eventSource.addEventListener('case_step', e => {
+        const data = JSON.parse(e.data);
+        handleCaseStep(data);
+      });
+      eventSource.addEventListener('case_complete', e => {
+        const data = JSON.parse(e.data);
+        handleCaseComplete(data);
+      });
+      eventSource.addEventListener('run_complete', e => {
+        const data = JSON.parse(e.data);
+        handleRunComplete(data);
+      });
+      eventSource.addEventListener('report_judged', e => {
+        try {
+          const data = JSON.parse(e.data);
+          if (data.report) {
+            currentReport = data.report;
+            saveReportToStorage(currentReport);
+            renderDashboard();
+            showSyncNotice('Report graded with Judge');
+          }
+        } catch {}
+      });
+    }
+    async function checkServerStatus() {
+      try {
+        const res = await fetch('/api/eval/status');
+        if (res.ok) {
+          const status = await res.json();
+          if (status.running) {
+            setRunningUiState(true);
+            if (status.activeRun?.startedAt) {
+              runStartTime = status.activeRun.startedAt;
+              if (runTimerInterval) clearInterval(runTimerInterval);
+              runTimerInterval = setInterval(updateRunTimer, 1000);
+            }
+            if (status.activeRun?.suite) {
+              document.getElementById('runTitle').textContent = 'Suite: ' + status.activeRun.suite;
+            }
+            if (status.activeCase) {
+              handleCaseStart(status.activeCase);
+              if (status.activeCase.tool) {
+                document.getElementById('activeToolText').textContent = status.activeCase.tool;
+              }
+            }
+            if (status.currentReport && Array.isArray(status.currentReport.rows)) {
+              currentReport = status.currentReport;
+              saveReportToStorage(currentReport);
+              renderDashboard();
+              const overallTotal = status.activeRun?.total || status.currentReport.metadata?.caseIds?.length || ${totalCount};
+              const batchInfo = (status.activeRun?.planned && status.activeRun.planned !== overallTotal)
+                ? { current: status.activeCase?.index, total: status.activeRun.planned }
+                : null;
+              updateProgress(status.currentReport.rows.length, overallTotal, batchInfo);
+            }
+            showSyncNotice('Synced live test');
+          } else {
+            setRunningUiState(false);
+            if (status.currentReport && Array.isArray(status.currentReport.rows) && status.currentReport.rows.length > 0) {
+              currentReport = status.currentReport;
+              saveReportToStorage(currentReport);
+              renderDashboard();
+            } else if (status.hasReport && !currentReport.rows?.length) {
+              loadLatestReport();
+            }
+          }
+        }
+      } catch (err) {}
+    }
+    function setRunningUiState(isRunning) {
+      isEvaluationRunning = isRunning;
+      document.getElementById('btnStart').disabled = isRunning;
+      document.getElementById('btnStop').disabled = !isRunning;
+      const drawerBtn = document.getElementById('drawerRunBtn');
+      if (drawerBtn) drawerBtn.disabled = isRunning;
+      const progressHero = document.getElementById('progressHero');
+      const activeCard = document.getElementById('activeCaseCard');
+      const dot = document.getElementById('sseStatusDot');
+      if (isRunning) {
+        progressHero.style.display = 'flex';
+        activeCard.style.display = 'flex';
+        dot.className = 'status-dot running';
+        document.getElementById('runStatusBadge').className = 'badge-gate badge-neutral';
+        document.getElementById('runStatusBadge').textContent = 'RUNNING';
+        if (window.innerWidth < 768) {
+          document.getElementById('configBody').style.display = 'none';
+          document.getElementById('configChevron').classList.remove('open');
+        }
+      } else {
+        activeCard.style.display = 'none';
+        dot.className = 'status-dot active';
+      }
+    }
+    async function startRun() {
+      const suite = document.getElementById('suiteSelect').value;
+      const model = document.getElementById('modelInput').value;
+      const baseUrl = document.getElementById('baseUrlInput').value;
+      const limitVal = document.getElementById('limitInput').value;
+      const judgeModel = document.getElementById('judgeModelInput').value;
+      const targetCase = document.getElementById('caseSelect')?.value;
+      let payloadSuite = suite;
+      let payloadLimit = limitVal ? Number(limitVal) : undefined;
+      let payloadIds = undefined;
+      if (suite === 'single') {
+        payloadSuite = 'all';
+        payloadLimit = 1;
+        payloadIds = targetCase || 'p01';
+      } else if (suite === 'quick') {
+        payloadSuite = 'catalog';
+        payloadLimit = 3;
+      }
+      if (window.customSuiteRunIds) {
+        payloadSuite = 'all';
+        payloadIds = window.customSuiteRunIds;
+        payloadLimit = undefined;
+        window.customSuiteRunIds = null;
+      }
+      const isResume = Boolean(document.getElementById('resumeCheckbox')?.checked);
+      const payload = {
+        suite: payloadSuite,
+        ids: payloadIds,
+        limit: payloadLimit,
+        model: model.trim() || undefined,
+        baseUrl: baseUrl.trim() || undefined,
+        judgeModel: judgeModel.trim() || undefined,
+        resume: isResume
+      };
+      if (!payloadIds && !isResume) {
+        currentReport = { rows: [] };
+        renderDashboard();
+      }
+      setRunningUiState(true);
+      runStartTime = Date.now();
+      if (runTimerInterval) clearInterval(runTimerInterval);
+      runTimerInterval = setInterval(updateRunTimer, 1000);
+      try {
+        const res = await fetch('/api/eval/start', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        if (!res.ok) {
+          const err = await res.json();
+          await showStudioAlert('Run Evaluation Failed', err.error || res.statusText, 'error');
+          setRunningUiState(false);
+          clearInterval(runTimerInterval);
+        }
+      } catch (err) {
+        await showStudioAlert('Connection Error', 'Network error starting evaluation: ' + err.message, 'error');
+        setRunningUiState(false);
+        clearInterval(runTimerInterval);
+      }
+    }
+    async function runSingleCaseById(caseId) {
+      if (!caseId) return;
+      if (document.getElementById('btnStart').disabled) return;
+      const model = document.getElementById('modelInput').value;
+      const baseUrl = document.getElementById('baseUrlInput').value;
+      const judgeModel = document.getElementById('judgeModelInput').value;
+      const payload = {
+        suite: 'all',
+        ids: caseId,
+        limit: 1,
+        model: model.trim() || undefined,
+        baseUrl: baseUrl.trim() || undefined,
+        judgeModel: judgeModel.trim() || undefined
+      };
+      const sel = document.getElementById('caseSelect');
+      if (sel) sel.value = caseId;
+      setRunningUiState(true);
+      runStartTime = Date.now();
+      if (runTimerInterval) clearInterval(runTimerInterval);
+      runTimerInterval = setInterval(updateRunTimer, 1000);
+      try {
+        const res = await fetch('/api/eval/start', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        if (!res.ok) {
+          const err = await res.json();
+          await showStudioAlert('Case Run Failed', 'Failed to start case ' + caseId + ': ' + (err.error || res.statusText), 'error');
+          setRunningUiState(false);
+          clearInterval(runTimerInterval);
+        }
+      } catch (err) {
+        await showStudioAlert('Connection Error', err.message, 'error');
+        setRunningUiState(false);
+        clearInterval(runTimerInterval);
+      }
+    }
+    async function stopRun() {
+      try {
+        await fetch('/api/eval/stop', { method: 'POST' });
+        document.getElementById('activeToolText').textContent = 'Aborting';
+      } catch (err) {}
+    }
+    function formatEta(remainingMs) {
+      if (!remainingMs || remainingMs <= 0) return null;
+      const totalSec = Math.round(remainingMs / 1000);
+      const now = new Date(Date.now() + remainingMs);
+      const hh = now.getHours().toString().padStart(2, '0');
+      const mm = now.getMinutes().toString().padStart(2, '0');
+      const hRemain = Math.floor(totalSec / 3600);
+      const mRemain = Math.floor((totalSec % 3600) / 60);
+      const durationStr = hRemain > 0 ? (hRemain + 'h ' + mRemain + 'm') : (mRemain + 'm ' + (totalSec % 60) + 's');
+      return 'ETA ' + hh + ':' + mm + ' (' + durationStr + ' remaining)';
+    }
+    let currentProgressMeta = { current: 0, total: 0, batchInfo: null };
+    function getElapsedSeconds() {
+      if (!runStartTime) return 0;
+      return Math.max(0, Math.floor((Date.now() - runStartTime) / 1000));
+    }
+    function formatElapsedString(elapsedSec) {
+      const m = Math.floor(elapsedSec / 60);
+      const s = elapsedSec % 60;
+      return m > 0 ? (m + 'm ' + s + 's') : (s + 's');
+    }
+    function renderEta(current, total, batchInfo) {
+      const etaElem = document.getElementById('etaDisplay');
+      if (!etaElem) return;
+      if (current >= total || !runStartTime) {
+        etaElem.style.display = 'none';
+        return;
+      }
+      let remaining = total - current;
+      let effectiveDone = current;
+      if (batchInfo && batchInfo.current > 0 && batchInfo.total > 0) {
+        remaining = batchInfo.total - batchInfo.current;
+        effectiveDone = batchInfo.current;
+      }
+      const elapsedMs = Date.now() - runStartTime;
+      if (effectiveDone > 0 && remaining > 0 && elapsedMs > 3000) {
+        const msPerCase = elapsedMs / effectiveDone;
+        const remainingMs = remaining * msPerCase;
+        const etaStr = formatEta(remainingMs);
+        if (etaStr) {
+          etaElem.textContent = etaStr;
+          etaElem.style.display = 'block';
+          return;
+        }
+      }
+      if (currentReport?.summary?.meanLlmMs && remaining > 0) {
+        const etaMs = remaining * currentReport.summary.meanLlmMs;
+        const etaStr = formatEta(etaMs);
+        if (etaStr) {
+          etaElem.textContent = etaStr;
+          etaElem.style.display = 'block';
+          return;
+        }
+      }
+      etaElem.style.display = 'none';
+    }
+    function updateRunTimer() {
+      if (!runStartTime) return;
+      const elapsedSec = getElapsedSeconds();
+      const timeStr = formatElapsedString(elapsedSec);
+      const statsElem = document.getElementById('progressStats');
+      if (statsElem) {
+        const base = statsElem.dataset.baseText || statsElem.textContent.split('• Elapsed:')[0].trim();
+        statsElem.textContent = base + ' • Elapsed: ' + timeStr;
+      }
+      if (currentProgressMeta.total > 0 && currentProgressMeta.current > 0) {
+        renderEta(currentProgressMeta.current, currentProgressMeta.total, currentProgressMeta.batchInfo);
+      }
+    }
+    function handleRunStart(data) {
+      setRunningUiState(true);
+      document.getElementById('runTitle').textContent = 'Suite: ' + (data.suite || 'catalog');
+      const overallTotal = data.overallTotal || data.total || 0;
+      const initial = data.initialRows || currentReport.rows?.length || 0;
+      const batchInfo = (data.planned && data.planned !== overallTotal) ? { current: 0, total: data.planned } : null;
+      updateProgress(initial, overallTotal, batchInfo);
+    }
+    function handleCaseStart(data) {
+      document.getElementById('activeCaseBadge').textContent = '#' + data.index + ' ' + data.caseId;
+      document.getElementById('activeCaseText').textContent = data.question || '';
+      document.getElementById('activeToolText').textContent = 'Starting agent';
+      const overallTotal = data.overallTotal || data.total;
+      const overallIdx = data.overallIndex != null ? Math.max(0, data.overallIndex - 1) : (currentReport.rows?.length || 0);
+      const batchInfo = (data.total && data.total !== overallTotal) ? { current: data.index, total: data.total } : null;
+      updateProgress(overallIdx, overallTotal, batchInfo);
+    }
+    function handleCaseStep(data) {
+      if (data.event === 'retry') {
+        document.getElementById('activeToolText').textContent = 'Reconnecting (attempt ' + data.attempt + '/3)...';
+      } else if (data.event === 'tool_start') {
+        document.getElementById('activeToolText').textContent = data.name;
+      } else if (data.event === 'tool_result') {
+        document.getElementById('activeToolText').textContent = data.name + ' (' + (data.durationMs || 0) + 'ms)';
+      }
+    }
+    function handleCaseComplete(data) {
+      if (!currentReport.rows) currentReport.rows = [];
+      const idx = currentReport.rows.findIndex(r => r.id === data.result.id);
+      if (idx >= 0) {
+        currentReport.rows[idx] = data.result;
+      } else {
+        currentReport.rows.push(data.result);
+      }
+      if (data.summary) {
+        currentReport.summary = data.summary;
+      } else if (data.report?.summary) {
+        currentReport.summary = data.report.summary;
+      }
+      saveReportToStorage(currentReport);
+      const overallTotal = data.overallTotal || currentReport.metadata?.caseIds?.length || data.total;
+      const overallCurrent = data.overallCurrent || currentReport.rows.length;
+      const batchInfo = (data.total && data.total !== overallTotal) ? { current: data.current, total: data.total } : null;
+      updateProgress(overallCurrent, overallTotal, batchInfo);
+      renderDashboard();
+    }
+    function handleRunComplete(data) {
+      isEvaluationRunning = false;
+      setRunningUiState(false);
+      if (runTimerInterval) clearInterval(runTimerInterval);
+      if (data.error) {
+        document.getElementById('runStatusBadge').className = 'badge-gate badge-fail';
+        document.getElementById('runStatusBadge').textContent = 'ERROR';
+        document.getElementById('runTitle').textContent = 'Evaluation Error: ' + data.error;
+        showStudioAlert('Evaluation Error', data.error, 'error');
+        return;
+      }
+      document.getElementById('runStatusBadge').className = data.gatesPassed ? 'badge-gate badge-pass' : 'badge-gate badge-fail';
+      document.getElementById('runStatusBadge').textContent = data.gatesPassed ? 'GATES PASSED' : 'GATES FAILED';
+      document.getElementById('runTitle').textContent = 'Evaluation Finished';
+      if (data.report) {
+        currentReport = data.report;
+        saveReportToStorage(currentReport);
+        renderDashboard();
+        const total = currentReport.metadata?.caseIds?.length || currentReport.rows.length;
+        updateProgress(currentReport.rows.length, total);
+      }
+      showSyncNotice('Results auto-saved');
+    }
+    function updateProgress(current, total, batchInfo = null) {
+      const safeTotal = Math.max(1, Number(total) || 1);
+      const safeCurrent = Math.min(safeTotal, Math.max(0, Number(current) || 0));
+      const pct = Math.min(100, Math.max(0, Math.round((safeCurrent / safeTotal) * 100)));
+      currentProgressMeta = { current: safeCurrent, total: safeTotal, batchInfo };
+      const fillEl = document.getElementById('progressBarFill');
+      if (fillEl) fillEl.style.width = pct + '%';
+      const stats = document.getElementById('progressStats');
+      if (stats) {
+        let base = safeCurrent + ' / ' + safeTotal + ' cases (' + pct + '%)';
+        if (batchInfo && batchInfo.current != null && batchInfo.total && batchInfo.total !== safeTotal) {
+          base += ' [Batch: ' + batchInfo.current + '/' + batchInfo.total + ']';
+        }
+        stats.dataset.baseText = base;
+        const elapsedSec = getElapsedSeconds();
+        const timeStr = formatElapsedString(elapsedSec);
+        stats.textContent = base + ' • Elapsed: ' + timeStr;
+      }
+      renderEta(safeCurrent, safeTotal, batchInfo);
+    }
+    async function loadLatestReport() {
+      try {
+        const res = await fetch('/api/eval/report');
+        if (res.ok) {
+          const loaded = await res.json();
+          if (loaded && Array.isArray(loaded.rows) && loaded.rows.length > 0) {
+            currentReport = loaded;
+            saveReportToStorage(currentReport);
+            renderDashboard();
+            const total = loaded.metadata?.caseIds?.length || ${totalCount};
+            document.getElementById('progressHero').style.display = 'flex';
+            document.getElementById('runTitle').textContent = 'Live Report (' + currentReport.rows.length + ' cases)';
+            updateProgress(currentReport.rows.length, total);
+            showSyncNotice('Loaded live.json (' + currentReport.rows.length + ' cases)');
+          }
+        }
+      } catch (err) {}
+    }
+    function renderDashboard() {
+      const s = currentReport.summary || {};
+      const rows = currentReport.rows || [];
+      renderKpis(s, rows);
+      renderGateStatus(s);
+      renderCounts(rows);
+      renderCardsAndTable(rows);
+    }
+    function renderKpis(s, rows) {
+      const formatPct = val => val !== null && val !== undefined ? Math.round(val * 100) + '%' : '-';
+      const formatRatio = val => val !== null && val !== undefined ? Number(val).toFixed(2) : '-';
+      const passAt1 = s.passAt1 ?? s.lexicalCoverageRate;
+      document.getElementById('kpiPassAt1').textContent = formatPct(passAt1);
+      setGatePill('gatePassAt1', passAt1, 0.75, true);
+      const toolF1 = s.toolF1 ?? s.toolAccuracyRate;
+      document.getElementById('kpiToolF1').textContent = formatRatio(toolF1);
+      setGatePill('gateToolF1', toolF1, 0.90, true);
+      const grounded = s.groundednessRate;
+      document.getElementById('kpiGroundedness').textContent = formatPct(grounded);
+      setGatePill('gateGroundedness', grounded, 0.75, true);
+      const loopFree = s.loopFreeRate;
+      document.getElementById('kpiLoopFree').textContent = formatPct(loopFree);
+      setGatePill('gateLoopFree', loopFree, 0.95, true);
+      const hallucination = s.hallucinationRate;
+      document.getElementById('kpiHallucination').textContent = formatPct(hallucination);
+      setGatePill('gateHallucination', hallucination, 0.05, false);
+      const medMs = s.medianMs;
+      document.getElementById('kpiLatency').textContent = medMs ? (medMs / 1000).toFixed(2) + 's' : '-';
+      document.getElementById('kpiP95').textContent = s.p95Ms ? (s.p95Ms / 1000).toFixed(2) + 's' : '-';
+      document.getElementById('kpiTps').textContent = s.meanDecodeTps ? ('Decode: ' + s.meanDecodeTps.toFixed(1) + ' tok/s') : 'Decode: -';
+    }
+    function setGatePill(elemId, val, threshold, higherIsBetter) {
+      const elem = document.getElementById(elemId);
+      if (val === null || val === undefined || isNaN(val)) {
+        elem.className = 'badge-gate badge-neutral';
+        elem.textContent = '-';
+        return;
+      }
+      const passed = higherIsBetter ? (val >= threshold) : (val <= threshold);
+      elem.className = passed ? 'badge-gate badge-pass' : 'badge-gate badge-fail';
+      elem.textContent = passed ? 'PASS' : 'FAIL';
+    }
+    function renderGateStatus(s) {
+      const overallBadge = document.getElementById('overallGateBadge');
+      const gateSubtext = document.getElementById('gateSubtext');
+      if (!s || s.completionRate === null || s.completionRate === undefined) {
+        overallBadge.className = 'badge-gate badge-neutral';
+        overallBadge.textContent = 'PENDING';
+        gateSubtext.textContent = 'Awaiting evaluation run';
+        return;
+      }
+      const passAt1Ok = (s.passAt1 ?? s.lexicalCoverageRate ?? 0) >= 0.75;
+      const toolOk = (s.toolF1 ?? s.toolAccuracyRate ?? 0) >= 0.80;
+      const loopOk = (s.loopFreeRate ?? 1) >= 0.95;
+      const allPassed = passAt1Ok && toolOk && loopOk;
+      overallBadge.className = allPassed ? 'badge-gate badge-pass' : 'badge-gate badge-fail';
+      overallBadge.textContent = allPassed ? 'PASS' : 'FAIL';
+      gateSubtext.textContent = allPassed
+        ? 'Pass@1, Tool F1, and Trajectory Health meet quality benchmark.'
+        : 'One or more metrics are below the quality gate requirements.';
+    }
+    function renderCounts(rows) {
+      const anomalies = rows.filter(isAnomalyRow);
+      const errorRows = rows.filter(isErrorRow);
+      document.getElementById('countAll').textContent = rows.length;
+      document.getElementById('countCompleted').textContent = rows.filter(r => r.status === 'completed').length;
+      const countAnomaliesEl = document.getElementById('countAnomalies');
+      if (countAnomaliesEl) countAnomaliesEl.textContent = anomalies.length;
+      document.getElementById('countError').textContent = errorRows.length;
+      document.getElementById('countToolFail').textContent = rows.filter(r => r.toolCorrectness && r.toolCorrectness.isCorrect === false).length;
+      document.getElementById('countLoopFail').textContent = rows.filter(r => r.trajectoryHealth?.hasLoop).length;
+      document.getElementById('countGroundingFail').textContent = rows.filter(r => r.groundedness && r.groundedness.isGrounded === false).length;
+      const btnRetry = document.getElementById('btnRetry');
+      const btnRetryLabel = document.getElementById('btnRetryLabel');
+      if (btnRetry && btnRetryLabel) {
+        if (errorRows.length > 0) {
+          btnRetry.style.display = 'inline-flex';
+          btnRetryLabel.textContent = 'Retry (' + errorRows.length + ')';
+          btnRetry.title = 'Retry ' + errorRows.length + ' error cases (status: error)';
+        } else {
+          btnRetry.style.display = 'none';
+        }
+      }
+    }
+    function setFilter(filter) {
+      activeFilter = filter;
+      document.querySelectorAll('.filter-tab').forEach(b => {
+        b.classList.toggle('active', b.dataset.filter === filter);
+      });
+      renderCardsAndTable(currentReport.rows || []);
+    }
+    function handleSearch() {
+      searchQuery = document.getElementById('searchInput').value.toLowerCase().trim();
+      renderCardsAndTable(currentReport.rows || []);
+    }
+    function getFilteredRows(rows) {
+      return rows.filter(r => {
+        if (activeFilter === 'completed' && r.status !== 'completed') return false;
+        if (activeFilter === 'anomalies' && !isAnomalyRow(r)) return false;
+        if (activeFilter === 'error' && (r.status !== 'error' && !r.error)) return false;
+        if (activeFilter === 'tool-fail' && (!r.toolCorrectness || r.toolCorrectness.isCorrect !== false)) return false;
+        if (activeFilter === 'loop-fail' && !r.trajectoryHealth?.hasLoop) return false;
+        if (activeFilter === 'grounding-fail' && (!r.groundedness || r.groundedness.isGrounded !== false)) return false;
+        if (searchQuery) {
+          const q = (r.question || '').toLowerCase();
+          const id = (r.id || '').toLowerCase();
+          const cat = (r.category || '').toLowerCase();
+          const ans = (r.answer || '').toLowerCase();
+          if (!q.includes(searchQuery) && !id.includes(searchQuery) && !cat.includes(searchQuery) && !ans.includes(searchQuery)) {
+            return false;
+          }
+        }
+        return true;
+      });
+    }
+    function renderCardsAndTable(rows) {
+      const filtered = getFilteredRows(rows);
+      renderTableRows(filtered);
+      renderMobileCards(filtered);
+    }
+    function renderTableRows(filtered) {
+      const tbody = document.getElementById('casesTableBody');
+      if (!filtered.length) {
+        tbody.innerHTML = '<tr><td colspan="9" style="text-align: center; color: var(--text-dim); padding: 36px 0;">No cases matched.</td></tr>';
+        return;
+      }
+      tbody.innerHTML = filtered.map(r => {
+        const isAnomaly = isAnomalyRow(r);
+        const isErr = isErrorRow(r);
+        const anomalyReason = isAnomaly ? getAnomalyReason(r) : '';
+        const anomalyBadge = isAnomaly ? (' <span class="pill pill-anomaly" title="' + escapeHtml(anomalyReason) + '">ANOMALY</span>') : '';
+        const isOk = r.status === 'completed';
+        const cov = r.coverage;
+        const covText = cov ? (cov.matched + '/' + cov.total) : '-';
+        const covPill = cov?.allMatched ? 'pill-success' : (cov?.allMatched === false ? 'pill-error' : 'pill-tag');
+        const judge = r.judgeResult;
+        const judgeHtml = judge ? (' <span class="pill ' + (judge.verdict === 'PASS' ? 'pill-success' : 'pill-error') + '" style="font-size: 10px; margin-left: 4px;">Judge: ' + judge.verdict + '</span>') : '';
+        const tool = r.toolCorrectness;
+        let toolPill = 'pill-tag';
+        let toolText = 'n/a';
+        if (tool && !tool.notApplicable) {
+          toolText = 'F1: ' + (tool.f1 ?? 0);
+          toolPill = tool.isCorrect ? 'pill-success' : 'pill-error';
+        }
+        const loop = r.trajectoryHealth;
+        const loopPill = loop?.hasLoop ? 'pill-warn' : 'pill-success';
+        const loopText = loop?.hasLoop ? ('Loop (' + loop.loopCount + ')') : 'Optimal';
+        const dur = r.durationMs ? ((r.durationMs / 1000).toFixed(2) + 's') : '-';
+        const qEscaped = escapeHtml(r.question || '');
+        return '<tr class="case-row" data-case-id="' + r.id + '" onclick="openDrawer(this.dataset.caseId)">' +
+          '<td><span class="pill pill-tag">' + r.id + '</span>' + anomalyBadge + '</td>' +
+          '<td><span style="color: var(--text-muted);">' + (r.category || 'general') + '</span></td>' +
+          '<td style="max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + qEscaped + '</td>' +
+          '<td><span class="pill ' + (isOk ? 'pill-success' : (r.status === 'ready' ? 'pill-tag' : 'pill-error')) + '">' + r.status + '</span></td>' +
+          '<td><span class="pill ' + covPill + '">' + covText + '</span>' + judgeHtml + '</td>' +
+          '<td><span class="pill ' + toolPill + '">' + toolText + '</span></td>' +
+          '<td><span class="pill ' + loopPill + '">' + loopText + '</span></td>' +
+          '<td style="font-family: monospace;">' + dur + '</td>' +
+          '<td><button class="btn-run-case ' + (isErr ? 'btn-warning' : '') + '" data-case-id="' + r.id + '" onclick="event.stopPropagation(); runSingleCaseById(this.dataset.caseId)" title="' + (isErr ? ('Retry error: ' + escapeHtml(r.error || r.status)) : 'Run this single case') + '">' + (isErr ? 'Retry' : 'Run') + '</button></td>' +
+        '</tr>';
+      }).join('');
+    }
+    function renderMobileCards(filtered) {
+      const container = document.getElementById('mobileCardsContainer');
+      if (!filtered.length) {
+        container.innerHTML = '<div style="text-align: center; color: var(--text-dim); padding: 36px 0; font-size: 13px;">No cases matched.</div>';
+        return;
+      }
+      container.innerHTML = filtered.map(r => {
+        const isAnomaly = isAnomalyRow(r);
+        const isErr = isErrorRow(r);
+        const anomalyReason = isAnomaly ? getAnomalyReason(r) : '';
+        const isOk = r.status === 'completed';
+        const cov = r.coverage;
+        const covText = cov ? (cov.matched + '/' + cov.total) : '-';
+        const covPill = cov?.allMatched ? 'pill-success' : (cov?.allMatched === false ? 'pill-error' : 'pill-tag');
+        const dur = r.durationMs ? ((r.durationMs / 1000).toFixed(2) + 's') : '-';
+        const tool = r.toolCorrectness;
+        const toolText = tool && !tool.notApplicable ? ('F1: ' + (tool.f1 ?? 0)) : null;
+        const loop = r.trajectoryHealth;
+        const loopText = loop?.hasLoop ? ('Loop (' + loop.loopCount + ')') : null;
+        const judge = r.judgeResult;
+        const judgeText = judge ? ('Judge: ' + judge.verdict) : null;
+        return '<div class="mobile-case-card" data-case-id="' + r.id + '" onclick="openDrawer(this.dataset.caseId)">' +
+          '<div class="mobile-card-top">' +
+            '<div style="display: flex; align-items: center; gap: 6px;">' +
+              '<span class="pill pill-tag" style="font-weight: 700; color: #fff; background: rgba(255,255,255,0.08);">' + r.id + '</span>' +
+              '<span style="font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 600;">' + (r.category || 'general') + '</span>' +
+              (isAnomaly ? '<span class="pill pill-anomaly" style="font-size: 10px;" title="' + escapeHtml(anomalyReason) + '">ANOMALY</span>' : '') +
+            '</div>' +
+            '<div style="display: flex; align-items: center; gap: 8px;">' +
+              '<span class="pill ' + (isOk ? 'pill-success' : (r.status === 'ready' ? 'pill-tag' : 'pill-error')) + '">' + r.status + '</span>' +
+              '<button class="btn-run-case ' + (isErr ? 'btn-warning' : '') + '" data-case-id="' + r.id + '" onclick="event.stopPropagation(); runSingleCaseById(this.dataset.caseId)" title="' + (isErr ? ('Retry error: ' + escapeHtml(r.error || r.status)) : 'Run this single case') + '">' + (isErr ? 'Retry' : 'Run') + '</button>' +
+            '</div>' +
+          '</div>' +
+          '<div class="mobile-card-question">' + escapeHtml(r.question || '') + '</div>' +
+          '<div class="mobile-card-stats">' +
+            '<span class="pill ' + covPill + '" style="font-size: 10.5px;">Cov: ' + covText + '</span>' +
+            (judgeText ? ('<span class="pill ' + (judge?.verdict === 'PASS' ? 'pill-success' : 'pill-error') + '" style="font-size: 10.5px;">' + judgeText + '</span>') : '') +
+            (toolText ? ('<span class="pill ' + (tool?.isCorrect ? 'pill-success' : 'pill-error') + '" style="font-size: 10.5px;">' + toolText + '</span>') : '') +
+            (loopText ? '<span class="pill pill-warn" style="font-size: 10.5px;">' + loopText + '</span>' : '') +
+            '<span style="font-size: 11px; color: var(--text-dim); margin-left: auto; font-family: monospace;">' + dur + '</span>' +
+          '</div>' +
+        '</div>';
+      }).join('');
+    }
+    function openDrawer(caseId) {
+      const row = (currentReport.rows || []).find(r => r.id === caseId);
+      if (!row) return;
+      activeDrawerRow = row;
+      document.getElementById('drawerCaseId').textContent = row.id;
+      document.getElementById('drawerTitle').textContent = row.category ? ('[' + row.category + '] ' + row.id) : row.id;
+      const isErr = isErrorRow(row);
+      const drawerRunBtn = document.getElementById('drawerRunBtn');
+      if (drawerRunBtn) {
+        if (isErr) {
+          drawerRunBtn.textContent = 'Retry Case';
+          drawerRunBtn.className = 'btn-run-case btn-warning';
+          drawerRunBtn.title = 'Retry failed case (' + escapeHtml(row.error || row.status || 'status: error') + ')';
+        } else {
+          drawerRunBtn.textContent = 'Run Case';
+          drawerRunBtn.className = 'btn-run-case';
+          drawerRunBtn.title = 'Run this single case';
+        }
+      }
+      const body = document.getElementById('drawerBody');
+      const trace = Array.isArray(row.trace) ? row.trace : [];
+      const totalMs = row.durationMs || 1;
+      const llmMs = row.latencyBreakdown?.llmMs || Math.round(totalMs * 0.7);
+      const toolMs = row.latencyBreakdown?.toolMs || (totalMs > llmMs ? totalMs - llmMs : 0);
+      const netMs = Math.max(0, totalMs - llmMs - toolMs);
+      const llmPct = Math.min(100, Math.round((llmMs / totalMs) * 100));
+      const toolPct = Math.min(100 - llmPct, Math.round((toolMs / totalMs) * 100));
+      const netPct = Math.max(0, 100 - llmPct - toolPct);
+      const promptTok = row.metrics?.counts?.prompt_tokens ?? row.metrics?.promptTokens ?? row.telemetry?.promptTokens ?? '-';
+      const compTok = row.metrics?.counts?.completion_tokens ?? row.latencyBreakdown?.outputTokens ?? row.metrics?.completionTokens ?? row.telemetry?.completionTokens ?? '-';
+      const decodeTps = row.latencyBreakdown?.decodeTps ? Number(row.latencyBreakdown.decodeTps).toFixed(1) : (row.metrics?.rates?.decode_tps ? Number(row.metrics.rates.decode_tps).toFixed(1) : (row.metrics?.decodeTps ? Number(row.metrics.decodeTps).toFixed(1) : (row.telemetry?.generationTokensPerSecond ? Number(row.telemetry.generationTokensPerSecond).toFixed(1) : '-')));
+      const isLocal = !currentReport?.metadata?.baseUrl || currentReport.metadata.baseUrl.includes('127.0.0.1') || currentReport.metadata.baseUrl.includes('localhost') || (currentReport?.metadata?.model || '').includes('gemma-4') || (currentReport?.metadata?.model || '').includes('lmstudio');
+      const estCost = ((Number(promptTok) || 0) * 0.0000005 + (Number(compTok) || 0) * 0.0000015).toFixed(4);
+      const costValueDisplay = isLocal ? '$0.00' : ('$' + estCost);
+      const costLabelDisplay = isLocal ? 'API Cost (Free)' : 'Est. Cost';
+      const costTitleTooltip = isLocal ? ('Local LM Studio inference is $0.00. Cloud equivalent: $' + estCost) : ('Estimated Cloud API Cost: $' + estCost);
+      let anomalySectionHtml = '';
+      if (isAnomalyRow(row)) {
+        const reason = getAnomalyReason(row);
+        anomalySectionHtml = '<div class="detail-section">' +
+          '<div class="detail-label" style="color: ' + (isErr ? 'var(--accent-red)' : 'var(--accent-amber)') + ';">' + (isErr ? 'Status Error Diagnosis' : 'Anomaly Diagnosis') + '</div>' +
+          '<div style="background: ' + (isErr ? 'rgba(239,68,68,0.08)' : 'rgba(251,191,36,0.08)') + '; border: 1px solid ' + (isErr ? 'rgba(239,68,68,0.3)' : 'rgba(251,191,36,0.3)') + '; border-radius: 6px; padding: 10px 12px; font-size: 12px;">' +
+            '<div style="font-weight: 700; color: ' + (isErr ? '#ef4444' : '#fbbf24') + '; margin-bottom: 4px;">Detected: ' + escapeHtml(reason) + '</div>' +
+            '<div style="color: var(--text-muted); font-size: 11.5px; line-height: 1.4;">' + (isErr ? 'This case encountered an execution error or timeout. Click "Retry Case" to re-execute.' : 'This case deviated from normal benchmark acceptance gates.') + '</div>' +
+          '</div>' +
+        '</div>';
+      }
+      let judgeSectionHtml = '';
+      if (row.judgeResult) {
+        const jr = row.judgeResult;
+        const isPass = jr.verdict === 'PASS';
+        const color = isPass ? 'var(--accent-emerald)' : 'var(--accent-red)';
+        judgeSectionHtml = '<div class="detail-section">' +
+          '<div class="detail-label">LLM-as-a-Judge Assessment</div>' +
+          '<div style="background: rgba(167,139,250,0.06); border: 1px solid rgba(167,139,250,0.2); border-radius: 6px; padding: 10px 12px; font-size: 12px;">' +
+          '<div style="display: flex; gap: 12px; font-weight: 600; margin-bottom: 6px; align-items: center;">' +
+            '<span style="color: ' + color + '; font-weight: 800; font-size: 13px;">' + (jr.verdict || '-') + ' (' + (jr.score ?? '-') + ')</span>' +
+            (jr.latencyMs ? '<span style="color: var(--text-dim); font-size: 11px;">Latency: ' + jr.latencyMs + 'ms</span>' : '') +
+            (jr.evaluatorModel ? '<span style="color: var(--text-dim); font-size: 11px;">Model: ' + escapeHtml(jr.evaluatorModel) + '</span>' : '') +
+          '</div>' +
+          '<div style="color: var(--text-muted); line-height: 1.4; white-space: pre-wrap;">' + escapeHtml(jr.reasoning || jr.error || 'No reasoning provided.') + '</div>' +
+        '</div>' +
+      '</div>';
+      } else if (row.judgment) {
+        judgeSectionHtml = '<div class="detail-section">' +
+          '<div class="detail-label">LLM Judge Assessment</div>' +
+          '<div style="background: rgba(167,139,250,0.06); border: 1px solid rgba(167,139,250,0.2); border-radius: 6px; padding: 10px 12px; font-size: 12px;">' +
+          '<div style="display: flex; gap: 12px; font-weight: 600; margin-bottom: 6px;">' +
+            '<span style="color: var(--accent-rose);">Correctness: ' + (row.judgment.correctness ?? '-') + '/4</span>' +
+            '<span style="color: var(--accent-violet);">Grounding: ' + (row.judgment.grounding ?? '-') + '/4</span>' +
+            '<span style="color: var(--accent-cyan);">Instruction: ' + (row.judgment.instructionFollowing ?? '-') + '/4</span>' +
+          '</div>' +
+          '<div style="color: var(--text-muted); line-height: 1.4;">' + escapeHtml(row.judgment.reason || 'No judgment reason provided.') + '</div>' +
+        '</div>' +
+      '</div>';
+      }
+      let timelineHtml = '<div style="color: var(--text-dim); font-size: 12px;">No trace events recorded.</div>';
+      if (trace.length > 0) {
+        timelineHtml = '<div class="react-timeline">' + trace.map(t => {
+          const isResult = t.event === 'result';
+          const title = isResult ? ('Observation: ' + t.name + ' (' + (t.durationMs || 0) + 'ms)') : ('Action: ' + t.name);
+          const payload = isResult ? t.value : t.parameters;
+          const jsonStr = payload ? JSON.stringify(payload, null, 2) : '';
+          return '<div class="timeline-step">' +
+            '<div style="font-weight: 600; font-size: 12px; color: ' + (isResult ? 'var(--accent-emerald)' : 'var(--accent-cyan)') + ';">' + escapeHtml(title) + '</div>' +
+            (jsonStr ? '<pre class="code-block">' + escapeHtml(jsonStr) + '</pre>' : '') +
+          '</div>';
+        }).join('') + '</div>';
+      }
+      const groundText = row.groundedness?.notApplicable ? 'N/A' : (row.groundedness?.isGrounded ? 'Yes' : (row.groundedness ? 'No' : '-'));
+      body.innerHTML = anomalySectionHtml +
+        '<div class="detail-section">' +
+          '<div class="detail-section-header">' +
+            '<div class="detail-label">Question / Prompt</div>' +
+            '<button class="copy-btn" data-field="question" onclick="copyActiveDrawerField(this.dataset.field)">Copy</button>' +
+          '</div>' +
+          '<div class="detail-content" style="font-weight: 500;">' + escapeHtml(row.question || '') + '</div>' +
+        '</div>' +
+        '<div class="detail-section">' +
+          '<div class="detail-section-header">' +
+            '<div class="detail-label">Agent Final Answer</div>' +
+            '<button class="copy-btn" data-field="answer" onclick="copyActiveDrawerField(this.dataset.field)">Copy</button>' +
+          '</div>' +
+          '<div class="detail-content" style="white-space: pre-wrap; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 6px; font-family: inherit;">' + escapeHtml(row.answer || row.error || 'No answer generated.') + '</div>' +
+        '</div>' +
+        '<div class="detail-section">' +
+          '<div class="detail-label">Trace Waterfall &amp; Latency Breakdown</div>' +
+          '<div class="waterfall-container">' +
+            '<div class="waterfall-bar">' +
+              '<div class="waterfall-seg seg-llm" style="width: ' + llmPct + '%;" title="Model: ' + llmMs + 'ms"></div>' +
+              '<div class="waterfall-seg seg-tool" style="width: ' + toolPct + '%;" title="Tools: ' + toolMs + 'ms"></div>' +
+              '<div class="waterfall-seg seg-net" style="width: ' + netPct + '%;" title="Overhead: ' + netMs + 'ms"></div>' +
+            '</div>' +
+            '<div class="waterfall-legend">' +
+              '<span><span class="legend-dot seg-llm"></span> Model: ' + llmMs + 'ms (' + llmPct + '%)</span>' +
+              '<span><span class="legend-dot seg-tool"></span> Tools: ' + toolMs + 'ms (' + toolPct + '%)</span>' +
+              '<span><span class="legend-dot seg-net"></span> Net: ' + netMs + 'ms</span>' +
+            '</div>' +
+          '</div>' +
+        '</div>' +
+        '<div class="detail-section">' +
+          '<div class="detail-label">Token Cost &amp; Throughput Profiler</div>' +
+          '<div class="token-grid">' +
+            '<div class="token-stat-box"><span class="token-num">' + promptTok + '</span><span class="token-lbl">Prompt Tokens</span></div>' +
+            '<div class="token-stat-box"><span class="token-num">' + compTok + '</span><span class="token-lbl">Completion Tokens</span></div>' +
+            '<div class="token-stat-box"><span class="token-num">' + decodeTps + '</span><span class="token-lbl">Decode TPS</span></div>' +
+            '<div class="token-stat-box" title="' + costTitleTooltip + '"><span class="token-num" style="' + (isLocal ? 'color: var(--accent-emerald);' : '') + '">' + costValueDisplay + '</span><span class="token-lbl">' + costLabelDisplay + '</span></div>' +
+          '</div>' +
+        '</div>' +
+        judgeSectionHtml +
+        '<div class="detail-section">' +
+          '<div class="detail-label">ReAct Execution Trace (' + trace.length + ' events)</div>' +
+          timelineHtml +
+        '</div>' +
+        '<div class="detail-section">' +
+          '<div class="detail-label">Metrics &amp; Analysis</div>' +
+          '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px;">' +
+            '<div style="background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05);">Coverage: ' + (row.coverage?.matched ?? '-') + '/' + (row.coverage?.total ?? '-') + '</div>' +
+            '<div style="background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05);">Grounded: ' + groundText + '</div>' +
+            '<div style="background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05);">Duration: ' + (row.durationMs || 0) + 'ms</div>' +
+            '<div style="background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05);">Loops: ' + (row.trajectoryHealth?.hasLoop ? 'Detected' : 'Optimal') + '</div>' +
+          '</div>' +
+        '</div>';
+      document.getElementById('drawerOverlay').classList.add('open');
+      document.getElementById('detailDrawer').classList.add('open');
+      document.body.style.overflow = 'hidden';
+    }
+    function closeDrawer() {
+      document.getElementById('drawerOverlay').classList.remove('open');
+      document.getElementById('detailDrawer').classList.remove('open');
+      document.body.style.overflow = '';
+    }
+    function copyText(str) {
+      if (!str) return;
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(str).then(() => {
+          showSyncNotice('Copied to clipboard');
+        }).catch(() => {
+          fallbackCopy(str);
+        });
+      } else {
+        fallbackCopy(str);
+      }
+    }
+    function fallbackCopy(str) {
+      try {
+        const el = document.createElement('textarea');
+        el.value = str;
+        el.setAttribute('readonly', '');
+        el.style.position = 'absolute';
+        el.style.left = '-9999px';
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+        showSyncNotice('Copied to clipboard');
+      } catch {}
+    }
+    function escapeHtml(str) {
+      return String(str || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+    async function loadAvailableCases() {
+      try {
+        const res = await fetch('/api/eval/cases');
+        if (res.ok) {
+          window.allAvailableCases = await res.json();
+          const list = window.allAvailableCases || [];
+          const sel = document.getElementById('caseSelect');
+          if (sel && list.length) {
+            sel.innerHTML = list.map(c =>
+              '<option value="' + c.id + '">' + c.id + ' [' + c.category + (c.dimension ? (' / ' + c.dimension) : '') + '] ' + escapeHtml(c.question).slice(0, 50) + '...</option>'
+            ).join('');
+          }
+          try {
+            const sRes = await fetch('/api/eval/suites');
+            if (sRes.ok) {
+              const suites = await sRes.json();
+              const sSel = document.getElementById('suiteSelect');
+              if (sSel) {
+                const cur = sSel.value;
+                sSel.innerHTML =
+                  '<option value="single">Single Case (1 ข้อเฉพาะ)</option>' +
+                  '<option value="quick">Quick Smoke (3 ข้อ)</option>' +
+                  '<option value="catalog">Catalog QA (' + suites.catalog.count + ' ข้อ)</option>' +
+                  (suites.expanded.count > 0 ? ('<option value="expanded">New Cases (' + suites.expanded.count + ' ข้อ)</option>') : '') +
+                  '<option value="security">Security (' + suites.security.count + ' ข้อ)</option>' +
+                  '<option value="legacy">Legacy Case IDs (' + suites.legacy.count + ' ข้อ)</option>' +
+                  '<option value="all">All Comprehensive (' + suites.all.count + ' ข้อ)</option>';
+                sSel.value = cur;
+              }
+              const chips = document.querySelector('.preset-chips');
+              if (chips) {
+                chips.innerHTML =
+                  '<span style="font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase;">Presets:</span>' +
+                  '<button class="preset-chip" onclick="applyPreset(\\'single\\')">Single Case (1 ข้อ)</button>' +
+                  '<button class="preset-chip" onclick="applyPreset(\\'quick\\')">Quick Smoke (3)</button>' +
+                  '<button class="preset-chip" onclick="applyPreset(\\'catalog\\')">Catalog QA (' + suites.catalog.count + ')</button>' +
+                  (suites.expanded.count > 0 ? ('<button class="preset-chip" onclick="applyPreset(\\'expanded\\')">Expanded (' + suites.expanded.count + ')</button>') : '') +
+                  '<button class="preset-chip" onclick="applyPreset(\\'security\\')">Security (' + suites.security.count + ')</button>' +
+                  '<button class="preset-chip" onclick="applyPreset(\\'legacy\\')">Legacy (' + suites.legacy.count + ')</button>' +
+                  '<button class="preset-chip" onclick="applyPreset(\\'all\\')">All Comprehensive (' + suites.all.count + ')</button>';
+                syncPresetChips();
+              }
+              const lInput = document.getElementById('limitInput');
+              if (lInput) lInput.setAttribute('max', String(suites.total));
+            }
+          } catch {}
+          const hasRealData = Array.isArray(currentReport.rows) && currentReport.rows.some(r => r.status && r.status !== 'ready');
+          if (!hasRealData && (!currentReport.rows || currentReport.rows.length === 0)) {
+            currentReport.rows = list.map(c => ({
+              id: c.id,
+              category: c.category,
+              question: c.question,
+              status: 'ready',
+              coverage: null,
+              toolCorrectness: null,
+              trajectoryHealth: null,
+              durationMs: null
+            }));
+            renderDashboard();
+          }
+        }
+      } catch (err) {}
+    }
+    function initDrawerGesture() {
+      const drawer = document.getElementById('detailDrawer');
+      if (!drawer) return;
+      let startY = 0;
+      let currentY = 0;
+      let isDragging = false;
+      drawer.addEventListener('touchstart', e => {
+        const bodyEl = document.getElementById('drawerBody');
+        if (!bodyEl || bodyEl.scrollTop <= 0) {
+          startY = e.touches[0].clientY;
+          currentY = startY;
+          isDragging = true;
+        } else {
+          isDragging = false;
+        }
+      }, { passive: true });
+      drawer.addEventListener('touchmove', e => {
+        if (!isDragging) return;
+        currentY = e.touches[0].clientY;
+        const delta = currentY - startY;
+        if (delta > 0 && window.innerWidth < 768) {
+          drawer.style.transform = 'translateY(' + delta + 'px)';
+        }
+      }, { passive: true });
+      drawer.addEventListener('touchend', () => {
+        if (!isDragging) return;
+        const delta = currentY - startY;
+        drawer.style.transform = '';
+        if (delta > 85 && window.innerWidth < 768) {
+          closeDrawer();
+        }
+        isDragging = false;
+      });
+    }
+    function bootEvalStudio() {
+      restoreConfigFromStorage();
+      restoreReportFromStorage();
+      loadLatestReport();
+      initSSE();
+      initLmsStream();
+      loadAvailableCases().then(() => {
+        restoreConfigFromStorage();
+      });
+      checkServerStatus();
+      initDrawerGesture();
+      setInterval(() => {
+        if (!isEvaluationRunning) {
+          fetch('/api/eval/report').then(r => r.ok ? r.json() : null).then(rep => {
+            if (rep && Array.isArray(rep.rows) && rep.rows.length > 0 && rep.rows.length !== (currentReport.rows?.length || 0)) {
+              currentReport = rep;
+              saveReportToStorage(currentReport);
+              renderDashboard();
+              const total = rep.metadata?.caseIds?.length || ${totalCount};
+              document.getElementById('progressHero').style.display = 'flex';
+              document.getElementById('runTitle').textContent = 'Live Synced (' + currentReport.rows.length + ' cases)';
+              updateProgress(currentReport.rows.length, total);
+              showSyncNotice('Live synced: ' + rep.rows.length + ' cases');
+            }
+          }).catch(() => {});
+        }
+      }, 5000);
+    }
+    if (document.readyState === 'loading') {
+      window.addEventListener('DOMContentLoaded', bootEvalStudio);
+    } else {
+      bootEvalStudio();
+    }
+  </script>
+  <div id="syncToast" class="sync-toast"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg> <span>Synced</span></div>
+</body>
+</html>`;
+}